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

export default function App(){
    const [name, setName] = useState('')
    const prevName = useRef('')
    
    useEffect(() => {
        prevName.current = name
    }, [name])
    
    return (
        <>
            <input value{name} onChange={e => setName(e.target.value)}>
            <div>My name is {name} and it used to be {prevName.current}</div>
        </>
    )
}

// Autre exemple :

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

export default function App(){
    const [name, setName] = useState('')
    const inputRef = useRef('')
    
    function focus(){
        inputRef.current.focus()
        inputRef.current.value = 'Some value'
    }
    
    return (
        <>
            <input ref={inputRef} value{name} onChange={e => setName(e.target.value)}>
            <button onClick={focus}>Focus</button>
        </>
    )
}

useRef hook example

useContext React hook
source : https://www.youtube.com/watch?v=5LrDIWkK_Bc


// Isoler le composant contextuel dans un fichier 
// ThemeContext.js
import React, {useContext, useState} from 'react'

const ThemeContext = React.createContext()
const ThemeUpdateContext = React.createContext()

export function useTheme(){
  return useContext(ThemeContext)
}

export function useThemeUpdate(){
  return useContext(ThemeUpdateContext)
}

export function ThemeProvider({children}){
  const [darkTheme, setdarkTheme] = useState(true)
  
  function toggleTheme(){
    setDarkTheme(prevDarkTheme => !prevDarkTheme)  
  }
  
  return (
    <ThemeContext.Provider value={darkTheme}>
      <ThemeUpdateContext.Provider value={toggleTheme}>
        {children}
      </ThemeUpdateContext.Provider>
    </ThemeContext.Provider>
  )
}

// Ajouter le composant dans un fichier racine (idéalement dans _app.js)

import React from 'react'
import FunctionContextComponent from './FunctionContextComponent'
import {ThemeProvider} from './ThemeContext'

export default function App(){
  return(
  <ThemeProvider>
    <FunctionContextComponent />
  </ThemeProvider>
  )
}

// Dans les composants enfants, on peut ainsi utiliser le context
// FunctionContextComponent.js
import {useTheme, useThemeUpdate} from './ThemeContext'

export default function FunctionContextComponent(){
  const darkTheme = useTheme()
  const toggleTheme = useThemeUpdate()
  const themeStyles = {
    backgroundColor: darkTheme ? '#333' : '#CCC'
  }
  return(
    <>
      <button onClick={toggleTheme}>Toggle theme</button>
      <div style={themeStyles}>theme</div>
    </>
  )
}

useContext React hook

Utiliser .env (prod) :
REACT_APP_DOMAIN=https://www.mon-nom-de-domaine.fr

et .env.development (dev) :
REACT_APP_DOMAIN=http://localhost:3000

On utilisera les variable dans React avec:
process.env.REACT_APP_DOMAIN

Il faut toujours commencer la variable par REACT_APP, sinon elle ne sera pas reconnue.


.env - Environment variable

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

export default function App(){
    const [number, setNumber] = useState(0)
    const [dark, setDark] = useState(false)

    const doubleNumber = useMemo(()=>{
        return slowFunction(number)
    }, [number])
    const themeStyles = useMemo(() => {
        return {
            [object]
        }
    }, [dark])
    
    useEffect(() => {
        console.log('Theme changed')
    }, [themeStyles])
    

    return(
      ...
    )
}

useMemo

Source : https://learnwithparam.com/blog/basic-routing-in-react-router/
Autre source importante : https://reactrouter.com/web/example/basic

//// Ajouter la librairie
<§yarn add react-router-dom§>

//// Importer react-router
<§import { Link, BrowserRouter as Router, Route } from 'react-router-dom';§>

const App = () => {
  return (
    <section className="App">
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Route exact path="/" component={IndexPage} />
        <Route exact path="/about" component={AboutPage} />
      </Router>
    </section>
  );
};

//// Routes dynamiques
<Route path="/user/:userId" component={UserPage} />

// React router passe deux variables : match et location
const UserPage = ({ match, location }) => {
  const { params: { userId } } = match;

  return (
    <>
      <p>
        <strong>User ID: </strong>
        {userId}
      </p>
    </>
  )
}

// Noter la destructuration utilisée : const { params: { userId } } = match;

// on peut également accéder aux param grâce à useParam
import {BrowserRouter as Router, Switch, Route, Link,
  useParams
} from "react-router-dom";
<Switch>
    <Route path="/:id" children={<Child />} />
</Switch>

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

//// utiliser les query params
<Link to="/search?q=react">Search</Link>
<Route exact path="/search" component={SearchPage} />

// Utiliser librairie qs pour parser les query param en cas d'url complexe: 
yarn add qs

const SearchPage = ({ match, location }) => {
  return (
    <p>
      <strong>Query Params: </strong>
      {location.search}
    </p>
  );
};

//// Ajouter une page 404 dans le router
<§
<Route component={NoMatchPage} />
§>

// puis entourer les routes d'un switch de react-router 
import { Link, BrowserRouter as Router, Route, Switch } from 'react-router-dom';
...
<Router>
  <Switch>
    <Route exact path="/" component={IndexPage} />
    <Route exact path="/search" component={SearchPage} />
    <Route component={NoMatchPage} />
  </Switch>
</Router>

// Le switch permettra d'éviter de matcher une route connue avec la 404 et ainsi de pas avoir à rendre la 404 sur toutes les pages connues

// -> passer des props à une route
<Route exact path="/props-through-render" render={(props) => <PropsPage {...props} title={`Props through render`} />} />

//// redirection
import { Route, Redirect } from 'react-router';

// redirection simple
<Redirect from="/old-route" to="/new-route" />
// Handle the to Route and load new page
<Route exact path="/new-route" component={RedirectPage} />
<Link to="/new-route">Redirecting to New page</Link>

// une utilisation plus concrète
const AuthPage = ({ isLoggedIn }) => {
  if (isLoggedIn) {
    return <Redirect to="/dashboard" />;
  } else {
    return <h3>User not loggedin</h3>;
  }
};

const DashboardPage = () => {
  return <h3>Dashboard Page</h3>;
};


<Route exact path="/dashboard" component={DashboardPage} />
// Route definition for not loggedin page by passing IsLoggedIn props as false
<Route exact path="/auth-not-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={false} />} />
// Route definition for loggedin page by passing IsLoggedIn props as true. This route will automatically redirect to dashboard because of the condition
<Route exact path="/auth-loggedin" render={(props) => <AuthPage {...props} isLoggedIn={true} />} />


// Lets add the links to navigate to these pages
<Link to="/auth-not-loggedin">Not Loggedin</Link>
<Link to="/auth-loggedin">User Loggedin</Link>

//// Nesting url
import { BrowserRouter as Router, Switch, Route, Link, useParams,
  useRouteMatch
} from "react-router-dom";

function Topics() {
  // The `path` lets us build <Route> paths that are
  // relative to the parent route, while the `url` lets
  // us build relative links.
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li>
          <Link to={`${url}/rendering`}>Rendering with React</Link>
        </li>
        <li>
          <Link to={`${url}/components`}>Components</Link>
        </li>
        <li>
          <Link to={`${url}/props-v-state`}>Props v. State</Link>
        </li>
      </ul>

      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  // The <Route> that rendered this component has a
  // path of `/topics/:topicId`. The `:topicId` portion
  // of the URL indicates a placeholder that we can
  // get from `useParams()`.
  let { topicId } = useParams();

  return (
    <div>
      <h3>{topicId}</h3>
    </div>
  );
}


//// Redirection avec authentification
https://reactrouter.com/web/example/auth-workflow




React-router

Example Hook useFetch

// Example où l'on passe des fonctions aux enfants (ici addTodo)
// On passe la fonction en props dans addTodo

import React from "react";

export default function App() {
  const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);

  return (
    <>
      <TodoCount todos={todos} />
      <TodoList todos={todos} />
      <AddTodo setTodos={setTodos} />
    </>
  );
}

function AddTodo({ setTodos }) {
  function handleSubmit(event) {
    event.preventDefault();
    const todo = event.target.elements.todo.value;
    setTodos(prevTodos => [...prevTodos, todo]);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" id="todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

Lifting state up

// HoverComponent.js

import {useRef} from 'react'
import useHover from './useHover'
export default function HoverComponent(){
  const elementRef = useRef()
  const hovered = useHover(elementRef)
  
  return(
    <div
      ref={elementRef}
      style={{
        backgrounColor: hovered ? "blue": "red",
        width: "100px",
        height: "100px"
      }}
    />
  )
}

// useHover.js

import {useState} from 'react'
import useEventListener from './useEventListener'

export default function useHover(ref){
  const [hovered, setHovered] = useState(false)
  
  useEventListener("mouseover", () => setHovered(true), ref.current)
  useEventListener("mouseout", () => setHovered(false), ref.current)
}


hover component

import {useEffect, useRef} from 'react'

export default function useEventListener(
  eventType,
  callback,
  element = window
){
  const callbackRef = useRef(callback)
  useEffect(() => {
    callbackRef.current = callback
  }, [callback])
  
  useEffect(() =>{
    const handler = e => callbackRef.current(e)
    element.addEventListener(eventType, handler)
    return () => element.removeEventListener(eventType, handler)
  }, [eventType, element])
}

useEventListener

<§const [count, setCount] = useState(4)§>


// La bonne manière d'utiliser setCount est de préciser la valeur précédente
<§function incrementCount(){
  setCount(prevCount => prevCount + 1)
}
§>

// (PAS BON !) Ici ce code fonctionnera mal car il incrémentera que de 1
function incrementCount(){
  setCount(count + 1)
  setCount(count + 1)
}
------------------------------------------------------------------
// Ne pas hésiter à utiliser une fonction de retour à useState pour éviter d'avoir un rendu à chaque changement de la page (ça améliorera la performance de react). La fonction permettra de rendre le composant qu'une seule fois.
const [count, setCount] = useState(() => return 4)

------------------------------------------------------------------
// Pour éviter de perdre les données du tableau, utiliser ...preState
const [count, setCount] = useState({count: 3, theme: 'blue'})

function incrementCount(){
  setState(prevState =>{
    return {...prevState, count: prevState.count + 1}
  })
}
// BAD : return {count: count + 1} // -> effacera le thème car il écrase toute la valeur du tableau


useState

onSearch = (e) => {
    e.preventDefault()
    const { value } = this.input
    if (value === '') {
      return
    }

    const cachedHits = localStorage.getItem(value)
    if (cachedHits) {
      this.setState({ hits: JSON.parse(cachedHits) })
      return
    }

    fetch('https://hn.algolia.com/api/v1/search?query=' + value)
      .then(response => response.json())
      .then(result => this.onSetResult(result, value))
}

onSetResult = (result, key) => {
    localStorage.setItem(key, JSON.stringify(result.hits));
    this.setState({ hits: result.hits });
}

Gestion du cache

// Fichier .htaccess
// A mettre dans le dossier /public
// Force le https et redirige toutes les requêtes sur le fichier index.html

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L,NE,QSA]

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

.htaccess for production


// Définir le provider
<§import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();§>

// Puis dans le RectDom.render
<§
<QueryClientProvider client={queryClient}>
<App />
</QueryClientProvider>
§>

// Requête classique
const {isLoading, data, error} = useQuery(['post'], () => getResults())
const post = data || [];

// La 3eme option permet de définir le refresh des données
const {isLoading, data, error} = useQuery(['post'], () => getResults(), { refetchOnWindowFocus: false})

// On peut définir ce comportement par défaut pour toutes les requêtes depuis le provider:
<§const queryClient = new QueryClient(
  defaultOptions: {
    queries: {
      refreshOnWindowFocus: false
    }
  }
  );§>
  
  // On peut aussi définir un StaleTime (un refresh automatique définit):
  const {isLoading, data, error} = useQuery(['post'], () => getResults(), { staleTime: 60_000 })
// Pour un formulaire, on peut par exemple mettre un cache null:
{ cacheTime: 0 }
// Utiliser le dev_tools, dans le provider, ajouter:

<§import {ReactQueryDevtools} from 'react-query/devtools';§>

<§
<QueryClientProvider client={queryClient}>
<App />
<ReactQueryDevTools initialIsOpen={false}/>
</QueryClientProvider>
§>

// Pour lancer manuellement un fetch
<§const {isLoading, data, refetch} = useQuery(['post'], () => getResults())
const post = data || [];§>

<button onClick={() => refetch()}>Charger les données</button>

// Pas bête, on peut aussi utiliser un toggle avec le hook useToggle

// Utiliser le cas où l'on est en cours de fetch
const {isLoading, data, isFetching} = useQuery(['post'], () => getResults())

{isFetching && <>...</>}

// Utiliser les mutations
const queryClient = useQueryClient();

const {isLoading: isUpdating, isSuccess, reset, mutate} = useMutation(async (e) => {
  e.preventDefault()
  // Mettre à jour la donnée
  await updatePost(postId, data);
}, {
  onSuccess: () => {
    // Invalider les requêtes post
    queryClient.invalidateQueries(['post']);
  }
})

// Cas d'utilisation optimal
const queryKey = ['posts'];
const {isLoading, data, IsFetching } = useQuery(queryKey, () => loadPosts(), {staleTime: 60_000});
const post = data || [];

const queryClient = useQueryClient();
const { mutate: handleTitleUpdate } = useMutation(
  ({id, title}) => updatePost(id, {title}),
  {
    onMutate: async ({id, title}) => {
      // Annuler les requêtes en cours s'il y en a
      await queryClient.cancelQueries(queryKey);
      const preivousPosts = queryClient.getQueryData(queryKey);
      queryClient.setQueryData(queryKey, (posts) => {
        return posts.map((p) => (p.id === id ? {...p, title} : p));
        return {previousPosts};
      })
    }
  }
)

// Utiliser la pagination
const {isLoading, data, isFetching, fetchNextPage} = useInfiniteQuery(
  queryKey,
  ({pageParam}) => loadPosts(pageParam),
  {
    staleTime: 60_000,
    getNextPageParam: (lastPage, allPages) => allPages.length + 1
  }
)
const posts = data?.pages?.flat() || []; 




React Query

// Utiliser plutôt Vite
<§yarn create vite§>

// Créer une app avec yarn
<§yarn create react-app my-app§>

//Démarrer le serveur
<§yarn start§>

//Test
<§yarn test§>

// Build
<§yarn build§>

// Utiliser des variables d'environnement

Créer un fichier .env à la racine du projet :
<§
REACT_APP_BASE_URL=http://localhost:3000
§>
// Note : Doit commencer par REACT_APP_ pour être prise en compte.

yarn build
// Rebuilder si nécessaire
// La variable sera accessible avec :
<§
process.env.REACT_APP_BASE_URL
§>


Create react app

// yarn add formik
// yarn add yup

<§import { useFormik, Formik, Form, Field } from 'formik';
import * as Yup from 'yup';
§>
// Créer un schéma de validation
<§const SignupSchema = Yup.object().shape({
  name: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Champ obligatoire'),
  surname: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Champ obligatoire'),
  address: Yup.string()
    .min(2, 'Too Short!')
    .max(70, 'Too Long!')
    .required('Champ obligatoire'),
  email: Yup.string().email('Invalid email').required('Champ obligatoire'),
});
§>
// Ajouter le composant Formik autour du formulaire, y mettre les valeurs initiales
<§<Formik
  initialValues={{ name: '', surname: '', email: '' }}
  validationSchema={SignupSchema}
  onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
      }, 400);
  }}
>
{formik => (
       // ... Mettre le formulaire ici
)}
</Formik>   
§>
// Dans le formulaire, y mettre tous les input avec les information nécessaires
// Ici on utilise un composant TextField de Material UI
<§<TextField fullWidth={true} 
  name="email" label="Email" 
  variant="outlined" 
  helperText={formik.errors.email && formik.touched.email? (formik.errors.email) : null} 
  error={formik.errors.email && formik.touched.email ? true : null} 
  onChange={formik.handleChange} value={formik.values.email}/> 
§>



       
       
       
       

Formulaires avec Formik

// Fonction a appeler

import getProducts from '../../components/APIConnect'

<§
getProducts().then(res=>{
    if(res.status === 200)return setProducts((res.json))
    setProducts([])
    return console.log("error : " + res.status)
})
§>

// Dans un fichier séparé, ici components/APIConnect.js :
<§
export default async function getProducts(){
    let myHeaders = new Headers()
    myHeaders.append("Accept", "application/json")
    // myHeaders.append("Authorization", 'Bearer ' + Cookies.get('token'))
    let requestOptions = {
        method: 'GET',
        headers: myHeaders,
    };
    let status
    let json = await fetch(`http://127.0.0.1:8000/api/products`, requestOptions)
    .then(response =>{
        status = response.status
        return response.text()
    })
    .then(result => {
        return JSON.parse(result)
    })
    .catch(result => 
        result
    );
    console.log(status, json)
    return {status, json}
}
§>

// Rappel des retours status en cas de succès
get   : 200 ok
post  : 201 created
delete: 204 No Content
patch : 200 ok

React