const element = <h1>Hello, world!</h1>;

npm init react-app my-app
// lub 
yarn create react-app my-app

const root = ReactDOM.createRoot(element do 
której będziemy wstrzykiwać aplikację);

root.render(element, który wstrzykujemy)

<br /> lub <image src="src/logo.png" />

<div style={{color: 'red' }}/>
<div height="0"/>

<p id="logo">Hello, World</p>

React.createElement(
    "p",
    {id: "logo"},
    "Hello, World"
);

<div>{ 4 + 3 }</div>

const name = 'Jan';
const count = name.length;
<div>Twoje imię ma { count } znaków</div>

const name = 'Jan';
const str = <p>Hello,{ name }</p>
<div>{ str }</div>

const name = 'Jan';
const cmp = <Hello>Hello,{ name }</Hello>
<div>{ cmp }</div>

<div contentEditable={ true }>Sample<∕div>

const style = {
  color: 'blue',
  backgroundColor: 'green'
};
<div style={style}><∕div>

return <ul>
  <li key="1">Element 1</li>
  <li key="1">Element 2</li>
  <li key="3">Element 3</li>
</ul>;

return [
  <li key="1">Element 1</li>,
  <li key="1">Element 2</li>,
  <li key="3">Element 3</li>,
];

return <React.Fragment>
  <li key="1">Element 1</li>,
  <li key="1">Element 2</li>,
  <li key="3">Element 3</li>,
</React.Fragment>;

return <>
  <li key="1">Element 1</li>,
  <li key="1">Element 2</li>,
  <li key="3">Element 3</li>,
</>;

const tab = [1,2,3]; 

return <ul>
{
  tab.map((el, i) => <li key={i}>{el+2}</li>)
}
</ul>;
//  <li key="1">3</li>,
//  <li key="1">4</li>,
//  <li key="3">5</li>,

<ul>
    <li> Jan </li>
    <li> Ala </li>
</ul>
//Dodajemy element na koniec
//Nie ma problemu
<ul>
    <li> Jan </li>
    <li> Ala </li>
    <li> Ela </li>
</ul>

<ul>
    <li> Jan </li>
    <li> Ala </li>
</ul>
//Dodajemy element na początek
//Jest problem
<ul>
    <li> Ola </li>
    <li> Jan </li>
    <li> Ala </li>
</ul>

<ul>
    <li key="89237284"> Jan </li>
    <li key="81928284"> Ala </li>
</ul>
//Dodajemy element na początek
//Jest problem
<ul>
    <li key="77284737"> Ola </li>
    <li key="89237284"> Jan </li>
    <li key="81928284"> Ala </li>
</ul>

const App = () =>  {
    const animals = ["dog", "cat", "horse"];
    const liElements = animals.map( el => {
        return <li> {el} </li>
    })
  return liElements;
}

const App = () =>  {
    const animals = ["dog", "cat", "horse"];
    const liElements = animals.map( (el,i) => {
        return <li key={i}> {el} </li>
    })
  return <ul>{liElements}</ul>
}

<div> 
    <h1> Hello </h1>
    <Counter />
</div>
//Jeżeli zmienimy element główny to 
//wszystko jest montowane od nowa
<section> 
     <h1> Hello </h1>
    <Counter />
</section>

const Hello = () => {
    return <h1>Hello World </h1>
}

//Wywołujemy
<Hello />

class Hello extends React.Component {
  render() {
    return <h1> Hello </h1>
  }
}

//Wywołujemy
<Hello />

<Hi name="Zygmunt" />

//Zapis funkcyjny
const Hi = (props) => <h1>Hi, {props.name}</h1>

//Zapis klasowy
class Hi extends React.Component {
  render() {
    return <h1>Hi, {this.props.name}</h1>;
  }
}

<Hi numbers={[1,2,3]} />

//Zapis funkcyjny
const Hi = (props) => <div> Hi, 
    {props.numbers.map( e => <span> {e} </span> )}
</div>

//Zapis klasowy
class Hi extends React.Component {
  render() {
    return <div> Hi, 
        {this.props.numbers.map( e => <span> {e} </span> )}
    </div>
  }
}

const pureFunc = (a, b) => {
    return a + b;
}

pureFunc(2,2) // 4;
pureFunc(2,3) // 5

const dirtyFunc = () => {
    return Math.random();
}

dirtyFunc() //0.5211613377746926
dirtyFunc() //0.4766865051280922

class KomponentB extends React.Component {
    render() {
        return <div> {this.props.name} </div>
    }
}

class KomponentA extends React.Component {
    render() {
        return <KomponentB name={this.props.name} />
    }
}
ReactDOM.render(
    <KomponentA name="Ala"/>,
    document.getElementById("root")
)

const KomponentB = ({name}) => <div> {name} </div>
const KomponentA = ({name}) => <KomponentB name={name} />
 
ReactDOM.render(
    <KomponentA name="Ala"/>,
    document.getElementById("root")
)

const CrazyBg = (props) => {
  return (
    <div style={ {backgroundColor: props.color}}>
      {props.children}
    </div>
  );
}

const NotLogged = () => {
  return (
    <CrazyBg color="green">
      <a href="#">Zaloguj</a>
    </CrazyBg>
  );
}

const Logged = (props) => {
  return (
    <CrazyBg color="red">
      <h3>
        Witaj {props.name}
      </h3>
      <a href="#">Wyloguj</a>
    </CrazyBg>
  );
}

const App = () => { 
  return <>
    <Logged name="Agata"/>
    <NotLogged />
  </>
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	counter: 0
    }
  }
  render() {
    return <h1> 
      {this.state.counter} 
    </h1>
  }
}

// Źle
componentDidMount () {
	this.state.counter += 1;
}

//Dobrze
componentDidMount () {
  this.setState({
      counter: this.state.counter + 1
  })
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	counter: 0
    }
  }
  componentDidMount() {
    this.id = setInterval( () => {
      this.setState({
      	counter: this.state.counter + 1
      })
    })
  }
    
  render() {
    return <h1> 
      {this.state.counter} 
     </h1>
   }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	counter: 0
    }
  }
    componentDidMount() {
    	this.id = setInterval( () => {
            this.setState({
                counter: this.state.counter + 1
            })
        })
    }
    componentWillUnmount() {
    	clearInterval(this.id);
    }
    render() {
        return <h1> 
        	{this.state.counter} 
        </h1>
    }
}

import React, { useState } from 'react';

const Counter2 => () {
    const [counter, setCounter] = useState(0);
  
    return (
        <div>
            Hook {counter}
        </div>
    )
}

import React, { useState } from 'react';

const Counter2 => () {
  const [counter, setCounter] = useState(0);
  const [name, setName] = useState("Ala");
  const [animal, setAnimal] = useState("Dog");
  
  return (
        <div>
            Hook {counter}
            <h1>{name} {animal} </h1>
        </div>
    )
}

//Zwraca parę
const [animal, setAnimal] = useState('Reksio');

//Inaczej
var animalState = useState('Reksio'); // Zwraca parę
var animal = animalState[0]; // Pierwszy element pary
var setAnimal = animalState[1]; // Drugi element pary

import React, { useState, useEffect } from 'react';

const Counter2 = () => {
  
  useEffect(() => {
      const id = setInterval(() => {
           setCounter(counter => counter+1)
        }, 1000)
    })
  
    return (
        <div>
            Hook {counter}
        </div>
    )
}

import React, { useState, useEffect } from 'react';

const Counter2 = () => {
  const [counter, setCounter] = useState(0);
  
  useEffect(() => {
       const id = setInterval(() => {
           setCounter(counter => counter+1)
        }, 1000)
    }, [])
  
    return (
        <div>
            Hook {counter}
        </div>
    )
}

useEffect(() => {
  const id = setInterval(() => {
    console.log(counter) // zawsze 0
  	setCounter(counter => counter+1)
  }, 1000)
}, [])

useEffect(() => {
  const id = setInterval(() => {
  	setCounter(counter => counter+1)
  }, 1000)
  
  return () => clearInterval(id);
  
}, [])
  

import React, { useState, useEffect } from 'react';

const App = () => {
  const [title, setTitle] = useState("Empty")
  
  useEffect(() => {
    document.title = title
  }, [title])

  return <input 
        type="text" 
        onChange={e => setTitle(e.target.value)} 
   />
}

const ref = useRef(initialValue);

useEffect(() => {
  ref.current = newValue
})

const App = () => {
    const [counter, setCounter] = useState(0)
    const timer = useRef();
    
    useEffect(()=> {
       timer.current = setInterval(()=>{
            setCounter(counter => {
                if(counter >=5 )  
                  clearInterval(timer.current)
                return counter + 1
            })
        }, 1000)

        return () => clearInterval(timer.current)
    }, [])

    return <div>  Counter: {counter} </div>
}

const App = () => {
    const [counter, setCounter] = useState(0)
    const timer = {current: null} // za kazdym razem nowy obiekt 
    console.log("ja się renderuje!")

    useEffect(()=> {
       timer.current = setInterval(()=>{
            setCounter(counter => {
                if(counter >=5 )  
                  clearInterval(timer.current)
                return counter + 1
            })
        }, 1000)

        return () => clearInterval(timer.current)
    }, [])

    return <div> Counter: {counter} </div>
}

// ...
let timer = useRef();

useEffect(()=> {
 //tak też nie. Wyrzucamy całą referencję 
 //zastepując ją zwykła zmienną
  timer = setInterval(()=>{
     setCounter(counter => {
       if(counter >=5 )  clearInterval(timer)
           return counter + 1
      })
  }, 1000)

  return () => clearInterval(timer)
}, [])

// ...

// timer jest obiektem, który jest 
// przechowywany przez mechanizmy Reacta
const timer = useRef(); 

// Tutaj aktualizuje tylko 
// własność tego obiektu.
timer.current = 1234; 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
} /* optional comaparison function (prevProps, nextProps) => { ... } */);

{} === {} // Falsy

...
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

return <Child callback={memoizedCallback} />
...

function Child = React.memo(({callback}) => {
...
})

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
// you may now access the ref of a button from parent perspective
// for example ref.current.focus()
<FancyButton ref={ref}>Click me!</FancyButton>;

const [state, dispatch] = useReducer(reducer, initialArg, init);

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + action.payload};
    case 'decrement':
      return {count: state.count - action.payload};
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

import { useState, useDeferredValue } from 'react';

function SearchPage() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);
  // ...
}

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

const ClickTest = () => {
    const [counter, setCounter] = useState(0);
    const handleClick = () => {
        setCounter(counter + 1)
    }
    return (
        <div>
            <h1>{counter}</h1>
            <button onClick={handleClick}>
            	Kliknij mnie
            </button>
        </div>
    )
}

const ClickTest = () => {
    const [counter, setCounter] = useState(0);
    const handleClick = (e, name) => {
        console.log(e, name)
        setCounter(counter + 1)
    }
    return (
        <div>
            <h1>{counter}</h1>
            <button onClick={ e => handleClick(e, "Jan")}>
            	Kliknij mnie
            </button>
        </div>
    )
}

const Hello = (props) => {
  return <div>
    Hello {props.name}
  </div>
}

const Counter = (props) => {
  return <div>
   {props.num}
  </div>
}

const App = () => (
  <div>
    <Hello name="Jan"/>
    <Hello name="Giorgio" />
    <Counter num="1" />
  </div>
);

const Hello = (props) => {
    return <div>
      Hello {props.name}
    </div>
  }
  
  const Counter = (props) => {
    const handleClick = () => {
      props.add();
    }
    return <div> {props.num}
     <button onClick={handleClick}> Add </button>
    </div>
  }
  
 const App = () => {
    const [counter, setCounter] = useState(0);
    const addNum = () => {
      setCounter(counter + 1)
    }
    return <div>
        <Hello name="Jan" />
        <Hello name="Giorgio" />
        <Counter num={counter} 
                 add={addNum}
        />
    </div>
  }

const App = () => { 
  const [isLogged, setIsLogged] = useState(false);
  
  if(isLogged) {
    return <h1> Witaj </h1>
  } else {
    return <span>Zaloguj</span>
  }
}

const App = () => { 
  const [isLogged, setIsLogged] = useState(false);
  const el = isLogged ? 
            <h1>Witaj</h1> :
            <span>Zaloguj</span>

  return el;
}

const App = () => { 
  const [msgs, setMsgs] = useState([]);

  return msgs.length > 0 &&
        <h1>Masz {msgs.length} 
        nieprzeczytanych wiadomości
        </h1>
}

const App = () => {
    return null;
}

const App = () => { 
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value)
  }

  return <form>
  <label>
    Email:
    <input type="text"
           value={value}
           onChange={handleChange}/>
  </label>
  </form>
}

const App = () => { 
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value)
  }
  
  const handleSubmit = () => {
    //walidacja, wysyłanie
  }

  return <form onSubmit={handleSubmit}>
  <label>
    Wiadomość:
    <textarea type="text"
           value={value}
           onChange={handleChange}/>
  </label>
  <input type="submit" value="wyślij" />
  </form>
}

<form onSubmit={handleSubmit}>
    <label>
      Wybierz ulubionego zwierzaka:
      <select value={value} 
              onChange={handleChange}>
          <option value="dog">Dog</option>
          <option value="cat">Cat</option>
          <option value="shrimp">Shrimp</option>
          <option value="goose">Goose</option>
      </select>
  </label>
  <input type="submit" value="Wybierz" />
</form>

const App = () => { 
  //.....

  return <form>
    <label>
      Email:
      <input type="text"
            value={values.email}
            name="email"
            onChange={handleChange}/>
    </label>
    <label>
      Password:
      <input type="password"
            value={values.password}
            name="password"
            onChange={handleChange}/>
    </label>
  </form>
}

const App = () => { 
  const [values, setValues] = useState({email: "", password: ""});

  const handleChange = (event) => {
    const name = event.target.name;
    setValues({
      ...values,
      [name]: event.target.value
    })
  }

  return //...
}

const myRef = useRef(null);

 <input type="text"
        ref={myRef}
        onChange={handleChange}/>

console.log(myRef.current)

const App = () => { 
  const myRef = useRef(null);

  const handleChange = (event) => {
    console.log(myRef.current.value)
  }
  return <form>
    <label>
      Email:
      <input type="text"
            ref={myRef}
            onChange={handleChange}/>
    </label>
  </form>
}

fetch('https://api.kanye.rest/');

fetch('https://api.kanye.rest/')
.then( resp => {
  console.log( resp );
});

fetch('https://api.kanye.rest/')
.then( resp => resp.json())
.then( data => {
 console.log(data)
})

fetch('https://api.kanye.rest/')
.then( resp => resp.json() )
.then( data => {
    console.log(data)
})
.catch( error => {
    console.log(error)
})

fetch(url, {
  headers : {
    'X-My-Header' : 'test'
  }
});

fetch(url, {
  method : 'POST'
});

const user = {
  name: "Aga"
};

fetch(url, {
  method : 'POST',
  body: JSON.stringify( user )
});

  useEffect(() => {
      fetch('https://api.kanye.rest/')
      .then(r=>r.json())
      .then(response => {
        setData(response)
      })
  }, [])

 const url = 'https://api.kanye.rest/';
 useEffect(() => { 
    (async () => {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
    })();
  }, []);

import React from 'react';

export const TestContext = React.createContext({
    someState: null,
    setSomeState: () => null
})

const SomeComponent = () => {
    const [someState, setSomeState] = useState([])

    return <TestContext.Provider value={{someState, setSomeState}}>
        <Child />
    </TestContext.Provider>
}

const Child = () => {
  return (
    <TestContext.Consumer>
      {({ someState, setSomeState }) => {
        return (
          <>
            <h1
              onClick={() => {
                setSomeState("Hello world!!!");
              }}
            >
              {someState}
            </h1>
          </>
        );
      }}
    </TestContext.Consumer>
  );
};

const Child = () => {
  const { someState, setSomeState } = useContext(TestContext);
  return (
    <>
      <h1
        onClick={() => {
          setSomeState("Hello world!!!");
        }}
      >
        {someState}
      </h1>
    </>
  );
};

const initialState1 = {
  firstName: 'Harry',
};

const initialState2 = {
  familyName: 'Potter',
};

const InnerPersonFirstName = React.memo(({ firstName, dispatch }) => (
  <div>
    First Name:
    <input
      value={firstName}
      onChange={(event) => {
        dispatch({ type: 'setFirstName', firstName: event.target.value });
      }}
    />
  </div>
);

const PersonFirstName = () => {
  const [state, dispatch] = useContext(PersonContext);
  return <InnerPersonFirstName firstName={state.firstName} dispatch={dispatch} />;
};

const PersonFirstName = () => {
  const [state, dispatch] = useContext(PersonContext);
  const { firstName } = state;
  return useMemo(() => {
    return (
      <div>
        First Name:
        <input
          value={firstName}
          onChange={(event) => {
            dispatch({ type: 'setFirstName', firstName: event.target.value });
          }}
        />
      </div>
    );
  }, [firstName, dispatch]);
};

//React tracked
const { Provider, useTracked } = createContainer(() => useReducer(reducer, initialState));

const ReactTracked = () => {
  return (
    <Provider>
      <PersonFirstName />
      <PersonFamilyName />
    </Provider>
  );
};

const PersonFirstName = () => {
  const [state, dispatch] = useTracked();
  return (
    <div>
      First Name:
      <input
        value={state.firstName}
        onChange={(event) => {
          dispatch({ type: 'setFirstName', firstName: event.target.value });
        }}
      />
    </div>
  );
};

import {
  QueryClient,
  QueryClientProvider,
} from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      ...
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })
// { isPending, isError, data, error } = query

const query = useQuery({ queryKey: ['todos'], queryFn: getTodos, staleTime: 1000 })
// { isPending, isError, data, error } = query

const query = useQuery({ queryKey: ['todos'], queryFn: getTodos, refetchInterval: 1000 })
// { isPending, isError, data, error } = query

// Get the user
const { data: user } = useQuery({
  queryKey: ['user', email],
  queryFn: getUserByEmail,
})

const userId = user?.id

// Then get the user's projects
const {
  status,
  fetchStatus,
  data: projects,
} = useQuery({
  queryKey: ['projects', userId],
  queryFn: getProjectsByUser,
  // The query will not execute until the userId exists
  enabled: !!userId,
})

import { useQuery } from '@tanstack/react-query'

// Make a specific query retry a certain number of times
const result = useQuery({
  queryKey: ['todos', 1],
  queryFn: fetchTodoListPage,
  retry: 10, // Will retry failed requests 10 times before displaying an error
  retryDelay: 1000,
})

useMutation({
  mutationFn: addTodo,
  onMutate: (variables) => {
    // A mutation is about to happen!

    // Optionally return a context containing data to use when for example rolling back
    return { id: 1 }
  },
  onError: (error, variables, context) => {
    // An error happened!
    console.log(`rolling back optimistic update with id ${context.id}`)
  },
  onSuccess: (data, variables, context) => {
    // Boom baby!
	// 
  },
  onSettled: (data, error, variables, context) => {
    // Error or success... doesn't matter!
  },
})

// Get QueryClient from the context
const queryClient = useQueryClient()



useMutation({
  mutationFn: addTodo,
  onMutate: (variables) => {
    // A mutation is about to happen!

    // Optionally return a context containing data to use when for example rolling back
    return { id: 1 }
  },

  onSuccess: (data, variables, context) => {
    // Boom baby!
	queryClient.invalidateQueries({ queryKey: ['todos'], { exact: true} })
  },

})

const queryClient = useQueryClient()

useMutation({
  mutationFn: updateTodo,
  // When mutate is called:
  onMutate: async (newTodo) => {
    // Cancel any outgoing refetches
    // (so they don't overwrite our optimistic update)
    await queryClient.cancelQueries({ queryKey: ['todos'] })

    // Snapshot the previous value
    const previousTodos = queryClient.getQueryData(['todos'])

    // Optimistically update to the new value
    queryClient.setQueryData(['todos'], (old) => [...old, newTodo])

    // Return a context object with the snapshotted value
    return { previousTodos }
  },
  // If the mutation fails,
  // use the context returned from onMutate to roll back
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos)
  },
  // Always refetch after error or success:
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] })
  },
})

const prefetchTodos = async () => {
  // The results of this query will be cached like a normal query
  await queryClient.prefetchQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
}

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())

const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // Check to see if the reducer cares about this action
  if (action.type === 'counter/increment') {
    // If so, make a copy of `state`
    return {
      ...state,
      // and update the copy with the new value
      value: state.value + 1
    }
  }
  // otherwise return the existing state unchanged
  return state
}

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())

// lub

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

const selectCounterValue = state => state.value

const currentValue = selectCounterValue(store.getState())
console.log(currentValue)