Z-chat

Installation

git clone https://github.com/Yopadd/z-chat.git
git checkout step0
npm ci
npm start

Objectif

L'objectif est de développer une simple application de chat. A peu-près tout est permis tant qu'à la fin vous arriver à envoyer des messages et que les autres et vous même puissiez les lires.

Dans le dossier maquettes vous trouverais deux maquettes, qui peuvent vous guider.

L'application est suffisamment simple pour ne pas avoir à se poser des questions sur son architecture. Pas de router ou de redux, restons simple. Tout vos composant seront à la racine du dossier src. C'est aussi le seul dossier dont vous avez besoin.

Vous commencerez avec quelques méthodes et composants.

Le back-end est propulsé par Firebase. Ca configuration est déjà faite et le module firebase.js expose quelques méthodes documentés dans firebase.md.

Un composant App sont rôle est juste de faire la balance entre la page Login et Chat

Un composant Login, il prend une function onLogin en paramètre. Cette function vous permettra sûrement de retourner l'utilisateur créé par la page Login.

Un composant Chat, il prend un User (cf. firebase.md) en paramètre. C'est le coeur de votre application C'est ici que ce déroulera un grande parti du TP.

Contraintes

Vous n'avais pas le droit d'utiliser de class. Tout vos composant doivent être des functions et utiliser le plus possible de nouveautés de React.

Le composant Chat doit être lazy loader.

Etape 1

Avoir une page Login qui créer un utilisateur et qui vous renvois sur la page Chat.

Bonus: Avec le localStorage faite en sorte de ne pas avoir à retaper à chaque fois le dernier utilisateur rentré.

Aide 1

Il faut utiliser le hooks useState pour créer un utilisateur qui à doit ressembler à { name: 'Alber' color: '#000000' }.

Aide 2

Pour envoyer un utilisateur avec Firebase il faut utiliser la méthode addUser du module firebase.js. ex:

addUser({ name: 'Alber' color: '#000000' })

Aide 3

Votre formulaire doit executer une function qui ressemble à

const login = (e) => {
      e.preventDefault()
      setUser(user)
      addUser(user)
      onLogin(user)
  }

Etape 2

Récupérer et afficher dans le bonne ordre les messages envoyés par Firebase.

Aide 1

Il faut utiliser le hooks useEffect. Cette méthode prend un deuxième paramètre qui est un tableau de valeur. La fonction de useEffect ne sera rejouée qui si une des valeur du tableau change. Donc si on lui donne un tableau [] la fonction ne sera joué qu'une seul fois au premier rendu du composant. A l'instar de componentDidMount.

Etape 3

Afficher le nom des utilisateurs en avec leur couleur.

Etape 4

Envoyer des messages. Isoler cette parti dans un composant.

Bonus: sur téléphone faite en sorte de garder le focus sur le clavier après l'envoie d'un message

Etape 5

Ajouter la gestion d'erreur réseau avec Error Boundaries