070 - Je dois tracer ma route

Trop bien tu as une application qui te permet de t'enregistrer. Tu as même un petit popup qui te dit si cela a fonctionné ou non :). Maintenant ça serait bien de pouvoir s'authentifier et accéder à son profil !

C'est ici que tu vas apprendre à utiliser le système de route de React. ** !! Attention !! **, le router React va permettre de naviguer dans l'application coté front. A ne pas confondre avec le router Express coté back qui met à disposition l'API REST.

Objectifs

• Pour cela tu vas créer deux nouveaux composants : SignIn et Profile. Et tu va créer un premier système de navigation à l'aide du Router.

Création du composants SignIn

Le composant SignIn est très proche du composant SignUp. Tu peux récupérer l'ensemble du code avec les quelques points d'attention suivant :

• Il ne reste que 2 champs au formulaire : email et password -> soit vigilant dans la fonction renderet contructor

• Le fetchne va plus pointer sur /auth/signup mais bien /auth/signin

Pour tester ton composant tu peux dans App.jsmodifier le composant <SignUp /> en <SignIn />.

Création du composants Profile

Le composant Profile va afficher l'email, le prénom et le nom de l'utilisateur. Tu vas tout d'abord définir l'état de ton composant. Et comme tu n'as pas de connexion à la base de données, tu vas initialiser ton état à des valeurs non nul, de tests. Je propose par exemple :

this.state  = {
    profile: {
        email:  "homer.simpson@wildcodeschool.fr",
        name:  "Homer",
        lastname:  "Simpson"
    }
}

Pour cela je te propose d'utiliser les composants du Material UI :

<List>
    <ListItem>
        <ListItemText primary="email" secondary="mon email"/>
    </ListItem>
</List>

A toi de l'adapter !

Pour tester ton composant tu peux dans App.jsremplacer le composant <SignUp /> par <Profile />.

Intégration du Router

Maintenant que tu as trois composants correspondant à trois pages, tu vas pouvoir utiliser la librairie Routerde React qui va te permettre de passer d'une page à une autre par rapport à un chemin spécifié dans l'URL. Le nom du module à installer est react-router . Cependant, comme tu construis une application web, il existe un module dédié dépendant de react-router qui s'appelle react-router-dom . Il va entre autres permettre de garder un historique de navigation accessible dans le navigateur (bouton retour).

Tout d'abord tu dois installer le module :

npm i --save react-router-dom

Une fois la librairie installée, tu vas avoir accès aux composants : BrowserRouter, Switch, Route. La Route définit quel composant doit être chargé pour une chemin d'accès donné. Le Router (ici BrowserRouter) synchronise le contenu, rendu par la Route avec l'URL du navigateur. Suivant l'URL tu vas charger un composant différent ==> D'où l'introduction de Switch qui va permettre de rendre une seule des Route définit au Router suivant le chemin.

Le Router se positionne à l'endroit où tu souhaites modifier ton contenu dynamiquement suivant le chemin renseigné. On pourrait le mettre en top de l'application, mais je te propose de garder le layout et de ne modifier que la partie droite de l'interface. Modifie l'item de la grid où était <SignIn /> par le BrowserRouter.

<Grid  item  xs={12}  sm={6}>
    <BrowserRouter>
        <Switch>
            <Route   />
            <Route   />
            ...
        </Switch>
    </BrowserRouter>
</Grid>

Tu dois configurer le router pour que :

• sur / et /signin tu charges le composant SignIn

• sur /signup tu charges le composant SignUp

• sur /profile tu charges le composant Profile

Mise en place d'une navigation entre composants

Ici tu vas mettre en place un chemin utilisateur afin de naviguer dans l'application sans modifier à la main l'url dans le navigateur. Pour cela on utilise Link, à utiliser à l'intérieur d'un Router, afin de renvoyer sur un chemin particulier. Tu dois :

• dans SignIn, créer un lien pour aller sur /signup

• dans SignIn, aller sur /profile lorsqu'on soumet le formulaire d'authentification

• dans SignUp, créer un lien pour aller sur /signin

• dans SignUp, aller sur / lorsqu'on soumet le formulaire d'enregistrement

• dans Profile, ajouter un bouton de déconnexion qui retourne sur /signin

Challenge

Show me your property

• Avoir 3 composants/pages
• Avoir un parcours utilisateur, permettant d'accéder à l'ensemble des pages

Critères de validation

• Vérifier que les chemins /, /sigin, signup, profile soient bien fonctionnels
• Vérifier que la navigation permet d'accéder à l'ensemble des pages sans modifier manuellement l'URL
• Utiliser le bouton back du navigateur revient en arrière