Mohammad Esmaeilzadeh buglessir

## styled-component-global-styles.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
  body {
    overflow-y: hidden;
  }
`;

const PageWithoutScrollbar = () => {
  return (

## react-query-object.js
// (1) ----------> Query Object for the useQuery();

import { fetchListFunction } from './services';

export const FetchListObj = (key, config) => ({
  queryKey: ['FetchList', key],
  queryFn: () => fetchListFunction,
  placeholderData: {
    list: []
  },

## react-memory-leaks.js
// 1) Using Boolean flag:

const [value, setValue] = useState('');
useEffect(() => {
  let isMounted = true;
  fetchValue().then(() => {
    if (isMounted) {
      setValue('done!'); // no more error
    }
  });

## react-query example
import React from 'react';
import { render } from 'react-dom';
import { QueryClientProvider, QueryClient, useQuery } from 'react-query';

const URL = 'https://randomuser.me/api/?results=5&inc=name';

const One = () => {
  const { error, data, isLoading, refetch } = useQuery('test', () =>
    fetch(URL).then(response => response.json())
  );

## Download and show one by one Images with JavaScript and Promise
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  img{
    width: 150px;
    height: auto;

## load images one by one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
  img{
    width: 150px;
    height: auto;

## React Upload file axios
import React from 'react';
import { render } from 'react-dom';
import axios from 'axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFile: null,
      percent: 0

## React Upload file component
import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  onChangeFile = (e) => {
    this.setState({
      selectedFile: e.target.files[0]
    });
  }

## gist:f057a53ea4760500264c979426163a63
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Link, Redirect } from 'react-router-dom';

function Auth() {
  return false;
}

const Admin = () => (
  <h1>This is Admin page</h1>

## gist:e8353054f6af80c6f544518a4eeb7db3
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

const NotFound = () => (
  <h1>404 - Page NotFound !</h1>
)

const Home = () => (
  <h1>Home</h1>
	import { createGlobalStyle } from 'styled-components';

	const GlobalStyles = createGlobalStyle`
	body {
	overflow-y: hidden;
	}
	`;

	const PageWithoutScrollbar = () => {
	return (
	// (1) ----------> Query Object for the useQuery();

	import { fetchListFunction } from './services';

	export const FetchListObj = (key, config) => ({
	queryKey: ['FetchList', key],
	queryFn: () => fetchListFunction,
	placeholderData: {
	list: []
	},
	// 1) Using Boolean flag:

	const [value, setValue] = useState('');
	useEffect(() => {
	let isMounted = true;
	fetchValue().then(() => {
	if (isMounted) {
	setValue('done!'); // no more error
	}
	});
	import React from 'react';
	import { render } from 'react-dom';
	import { QueryClientProvider, QueryClient, useQuery } from 'react-query';

	const URL = 'https://randomuser.me/api/?results=5&inc=name';

	const One = () => {
	const { error, data, isLoading, refetch } = useQuery('test', () =>
	fetch(URL).then(response => response.json())
	);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	img{
	width: 150px;
	height: auto;
	import React from 'react';
	import { render } from 'react-dom';
	import axios from 'axios';

	class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	selectedFile: null,
	percent: 0
	import React from 'react';
	import ReactDOM from 'react-dom';
	import { BrowserRouter, Switch, Route, Link, Redirect } from 'react-router-dom';

	function Auth() {
	return false;
	}

	const Admin = () => (
	<h1>This is Admin page</h1>