Projet avril 2023

page1.tsx

import { useEffect, useState } from 'react';
import { Movie } from '../marvel/common/MovieInterface';

/*
intégré au navigateur
1. XmlHttpRequest (xhr Ajax)
2. Fetch API (promise based)

Librairies externes:
1. jQuery (ajax)
2. Axios  (promise based)
3. React query

*/

function useMarvelMovies(): [
  films: Movie[],
  refreshMovies: () => Promise<void>
] {
  const [films, setFilms] = useState<Movie[]>([]);

  useEffect(() => {
    refreshFilms();
  }, []);

  async function refreshFilms() {
    const res = await fetch(
      'https://mcuapi.herokuapp.com/api/v1/movies?limit=50'
    );
    const data = await res.json();
    setFilms(data.data);
  }

  return [films, refreshFilms];
}

export default function Page1() {
  const [films, refreshFilms] = useMarvelMovies();

  return (
    <div>
      <h1>Page 1 </h1>
      <ul>
        {films.map((film) => {
          return (
            <li key={film.id}>
              {film.title} ({film.directed_by})
            </li>
          );
        })}
      </ul>
    </div>
  );
}

page2.tsx

import { useState } from 'react';
import { Form } from 'react-bootstrap';

interface auteur {
  id: number;
  name: string;
}

const liste: auteur[] = [
  { id: 1, name: 'Hugo' },
  { id: 2, name: 'Choi' },
  { id: 3, name: 'Olivier' },
  { id: 4, name: 'Lung' },
  { id: 5, name: 'Mathieu' },
];

export default function Page2() {
  const [filtre, setFiltre] = useState<string>('');

  return (
    <div>
      <h1>Page 2 </h1>
      <Form.Control
        value={filtre}
        onChange={(evt) => {
          setFiltre(evt.currentTarget.value);
        }}
      />

      <ul>
        {liste
          .filter((auteur) => {
            return auteur.name.toLowerCase().includes(filtre.toLowerCase());
          })
          .map((auteur) => (
            <li key={auteur.id}>{auteur.name}</li>
          ))}
      </ul>
    </div>
  );
}

page3.jsx

import { useRef, useState } from 'react';
import { Button, Form, InputGroup } from 'react-bootstrap';

function Page3() {
  const [contact, setContact] = useState({ prenom: '', nom: '', courriel: [] });
  const txtCourrielAjout = useRef();

  return (
    <>
      <Form
        onSubmit={(evt) => {
          evt.preventDefault();
          let formData = new FormData(evt.currentTarget);
          alert(JSON.stringify(Object.fromEntries(formData)));
        }}
      >
        <Form.Group>
          <Form.Label>Prénom</Form.Label>
          <Form.Control name='prenom' defaultValue={contact.prenom} />
        </Form.Group>
        <Form.Group>
          <Form.Label>Nom</Form.Label>
          <Form.Control name='nom' defaultValue={contact.nom} />
        </Form.Group>
        {contact.courriel.map((courriel, idx) => {
          return (
            <Form.Group key={courriel}>
              <Form.Label>Courriel {idx + 1}</Form.Label>
              <InputGroup>
                <Form.Control name={`courriel${idx}`} defaultValue={courriel} />
                <Button
                  data-courriel={courriel}
                  onClick={(evt) => {
                    const courriels = contact.courriel.filter((courriel) => {
                      return evt.currentTarget.dataset.courriel !== courriel;
                    });
                    setContact({
                      ...contact,
                      courriel: courriels,
                    });
                  }}
                >
                  Enlever Courriel
                </Button>
              </InputGroup>
            </Form.Group>
          );
        })}

        <Form.Group className='mt-4'>
          <InputGroup>
            <Form.Control
              ref={txtCourrielAjout}
              placeholder='Courriel'
              name='courrielPlus'
            />
            <Button
              onClick={(evt) => {
                setContact({
                  ...contact,
                  courriel: [
                    ...contact.courriel,
                    txtCourrielAjout.current.value,
                  ],
                });
                txtCourrielAjout.current.value = '';
              }}
            >
              Ajouter Courriel
            </Button>
          </InputGroup>
        </Form.Group>
        <Button type='submit'>Envoyer</Button>
      </Form>
    </>
  );
}

export default Page3;