Créer une todo-list en React JS [Fin]

Dans la précédente partie nous avons vu la mise en place du projet liste des tâches, avec la réflexion (très rapide) avant projet mais aussi son initialisation..

Pour rappel :

Le concept : Je me pose en défi de coder une application web en ReactJS dans la limite d’une heure. Je partirais généralement d’une base vierge et essayerait de me tenir aux objectifs que je me fixe en début d’exercice .

Continuons maintenant !

⏳ [00:30] Mise en place de l’architecture en Composants

Je commence par créer les composants :

• Header : Qui va contenir la phrase de bienvenue et le champs d’ajout d’une tâche
• List : Qui sera elle chargée d’afficher les tâches en cours et celles accomplies

Puis je les importe dans App.js.

Je pars sur une base très simple pour ces composants :

⏳ [00:33] Je passe App.js en composant également comme ceci :

Les plus observateurs ont peut être remarqué que j’utilisais les classes de Grid de Bootstrap, mais aussi que je l’importe dans App.js !

En effet je n’utilise plus Bootstrap pour ses styles mais pour de la production rapide j’aime utiliser leur système de grilles…

Ainsi pour ne pas surcharger la solution avec du code inutilisé j’utilise leur outil de customisation de paquet. En effet grâce à Less, vous pouvez ainsi choisir ce que vous voulez ou non. Je me suis donc crée une version de bootstrap contenant seulement leur système de grilles

⏳ [00:35] Création des GET + POST vers le LocalStorage

Comme je disais dans le premier article, on ne se reposera pas sur une API pour cet exercice. Cependant comme vous pouvez voir sur l’image ci-après le fonctionnement pour le Front est globalement le même, et on pour améliorer cette application on peut rapidement remplacer les méthodes localStorage.X() vers un fetch par exemple.

Vous pouvez aussi remarquer que je lance déjà un this.postaToDo({test: « test »}). C’est un test du bon fonctionnement et voici le résultat :

⏳ [00:39] Je ne m’attarde pas plus là dessus mais je passe (en props) la data du state de App.js et la fonctions d’ajout, vers respectivement List et Header.

⏳ [00:41] Code du Header

Je commence à mettre du contenu textuel dans le Header : une salutation, le logo en texte (que je repasserais plus tard dans App.js pour une question de style).

✍️ Je mets aussi en place le champs d’entrée que je récupère depuis la doc de react-suite.

Voici le code avant que je remplace l’alert de test du bouton « Ajouter une tâche » par la fonction passée en props depuis App.js

⏳ [00:45] Code de List

Il ne reste plus que 15 minutes au chrono, il faut s’activer maintenant pour gérer la fonctionnalité indissociable, l’affichage de la liste des tâches !

A ce moment là je m’occupe de deux parties préliminaires : récupérer le modèle de liste depuis la doc de react-swipeable-view

(pour rappel on veut pouvoir gérer l’état d’une tâche en la faisant slider à gauche ou à droite)

mais aussi créer un loading pendant que l’application récupère les tâches en cours !

(Même en localStorage il y a un minime délais, pensez-y si vous ne voulez pas voir une console pleine d’erreurs ????)

Voici ce que ça donne :

Et voila le code :

⌛️ [00:59] Fin de la liste et du chrono.. ????

Et voilà nous arrivons déjà à la fin du chrono, sur les dernières minutes j’ai pu finir de mettre en place l’affichage de la liste pour les tâches en cours.

Voici le résultat final au chrono :

Malheureusement je manque de temps pour finir correctement toutes les fonctionnalités… ????

Mais vu qu’on est sur mon blog et surtout que c’est la première édition de ce format ????, je me permets d’améliorer le résultat pendant qqs dizaines de minutes supplémentaires….

⌛️ [01:23] Fin non officielle

Voici ce que ça donne ! ????????

Mieux non ?

Sur les dernières étapes j’ai ajouté les fonctions sur les éléments de la liste pour définir l’action à effectuer en cas de slide sur suppression ou sur archivage. J’ai amélioré le design global en allant notamment sur Illustrator pour sortir un petit sourire à la Amazon afin de créer un visage mignon avec le logo et rendre ça plus sympa !

Enfin j’ai amélioré l’écran affiché en cas où aucune tâche n’est en cours comme vous pouvez le voir au-dessus.

Voilà que se termine la première édition du format #1hChrono ! ????

J’ai réussi à réaliser (pour ce délais imparti) une application pas piquée des hannetons ????. Cependant beaucoup de choses à apprendre du dépassement du temps imparti ! En effet j’ai passé beaucoup de temps à choisir les modules, faire un schéma, l’initialisation… Comme je disais et je pense être dans le vrai en persistant sur l’importance d’une bonne base avant de se lancer dans le code. ????

????‍♂️ Néanmoins je pense pouvoir gagner quelques minutes dans le futur en prenant des décisions plus rapidement et en augmentant globalement ma productivité sur ces étapes.

✍️ Question format : J’ai remarqué que j’ai peut être mal dosé les deux parties d’article, il y avait beaucoup de choses à montrer dans cet épisode final et ça impacte la longueur.

???? Je vais donc travailler ces points pour le prochain #1hChrono !

Je vous souhaite d’ici là une bonne semaine de code (as-t-on mieux à faire en ce moment ?) et vous dit à bientôt sur ReactHeure.fr !

N’oubliez pas de prendre soin de vous et de vos proches !