paoli-a / maprochainerecette Goto Github PK

Il s'agit ici d'avoir une première version backend avec Django et de la connecter avec React.

Currently only ingredient catalog has end to end tests, other pages need also these tests.
We need to find a way to create initially some dataset in the database in the case that data cannot be created via the REST API.

When we go to my next recipe and add a fridge ingredient, then go to another tab, and finally return to my next recipe, the new fridge ingredient no longer appears unless we reload the page.

With dependabot our dependencies will be always up to date.

This is the main functionality of the app : displaying all the feasible recipes taking into account the ingredients of the fridge and the existing recipes of the catalog.

The feasible recipes should be ordered according to the expiration date of the ingredients used, and the one having the nearest expiration date of each recipe should be highlighted.

Each of these actions should trigger a fetch to update feasible recipes.

The playground of some components is not working anymore because some data are now coming from the backend side with requests made by axios, and docz doesn't start the backend.

Il faut que les ingrédients entrés dans IngredientsFrigo et RecettesCatalogue soient autorisés, c'est à dire qu'ils soient d'abord présents dans IngredientsCatalogue. Il s'agit donc de proposer un système d'autocomplétion ou de liste déroulante permettant de trouver rapidement un ingrédient autorisé.

Actuellement la recherche prend en compte n'importe quel mot de plus de trois caractères, pour l'améliorer on pourrait :

• accepter les mots de 2 caractères ou plus
• éliminer la ponctuation
• éliminer les mots non significatifs (stopwords)

Quand on recherche "salade" la recette "salade de pommes de terre" s'affiche bien. Mais quand on tape "pommes de" la recette ne s'affiche pas.

Certaines comportements utilisateur ne sont pas testés dans IngredientsFrigoForm, comme par exemple les dates, ou encore le fait d'entrer un ingrédient sans préciser la quantité etc.

Créer une barre de recherche dans chacun des composants de catalogue, pour filtrer les éléments présents au fur et à mesure que l'utilisateur y tappe des lettres.

• pour IngrédientsCatalogue les ingrédients dont le nom ne commence pas par les lettres tapées seront masqués
• pour RecettesCatalogue les recettes dont le titre ne commence pas par les lettres tapées seront masqués

Actuellement tout est sur une unique page.
Il faudrait 4 pages :

• une page pour le catalogue d'ingrédients
• une pour le catalogue de recettes
• une pour les ingrédients présents dans le frigo
• et une pour l'affichage des recettes possibles

Les deux dernières pourraient éventuellement etre combinées.

A priori React rooter serait la librairie la plus appropriée.

Il peut être intéressant d'ajotuer de la documentation.

docz a l'air d'être une solution intéressante. Très peu de configuration, une documentation facile à faire et jolie.

La documentation se fait pour l'essentiel dans un fichier texte mdx à côté de chaque composant, sauf les props qui sont documentées dans le code directement au niveau des PropTypes avec la syntaxe JSDoc :

/**
*
*/

cf. une page qui va un peu plus en détail.

As the frontend has been built with Create React App, we have the plugin eslint-plugin-jsx-a11y already installed, but it needs a few lines of configuration to be fully activated.

Currently the react code has a flat directory structure, as there are more than 40 files in src we should probably add some directories to group some of them.

Il faudrait ajouter des balises pour mettre en évidence les mots recherchés qui apparaissent dans les recettes.

When we go to catalog recipes and add a recipe, then go to my next recipes, and finally return to catalog recipes, the new recipe no longer appears unless we reload the page.

It would be nice if the recipes in catalog recipes and the ingredients in catalog ingredients were listed in alphabetical order.

The feasible recipes view show all the possible recipes according to the fridge ingredients, but if we do that recipe the only way to remove the used ingredients is to remove them one by one from the fridge ingredients list, and add them again with the remaining quantity. This functionality could be really useful.

Add lint functionality, including on the CI.

create-react-app is great but it has no static build time rendering and no server side rendering. Next.js will bring all that and much more.

The projects has unit tests for frontend and backend components, and to some extent what we could call integration tests inside frontend and inside backend, testing several components together. But there is no tests involving both frontend and backend.
We should use a tool like cypress or selenium that uses a real browser, and write functional tests for the whole application.

Docz seems to be not mature enough. We should find another documentation lib to replace it.

Pour le filtre par catégories, afficher dynamiquement les catégories en fonction de celles qui sont présentes dans les recettes possibles.

Indiquer également le nombre de recettes correspondant à telle ou telle catégorie.

It's not the first time that this test fails randomly, maybe we should for not use CodeceptJS's retry functionnality.

Le style de code commence à devenir un peu désordonné...

Il pourrait intéressant d'ajouter prettier en plus d'eslint qui est déjà installé et configuré avec create react app. prettier permet d'uniformiser le style de code là où eslint est surtout sur le fait d'éviter les erreurs et bugs.

• Sur le site de create react app, ils conseille d'installer prettier comme hook git avec husky et lint-staged pour formatter le code au commit.
• Sur le site de prettier, ils conseillent d'installer eslint-config-prettier et eslint-plugin-prettier pour intégrer prettier comme extension d'eslint et rendre visibles ses indications dans les éditeurs.

According to Two Scoops of Django it's a good practice for many reasons.

• Ajouter une icone loupe sur le bouton de la barre de recherche
• Ajouter des icones flèches sur le bouton du panneau dépliant des catégories

Currently all pipenv dependencies are marked as *, this is not convenient because you can easily update everything without wanting to.

The github actions configuration uses two node js versions : 10.x and 12.x. I think the 12.x is enough.

There is some documentation here about how to configure it.

Doit afficher toutes les recettes et donner la possibilité d'en ajouter une. Les ingrédients doivent coïncider avec ceux du catalogue ingrédients.

Les PropTypes semblent être une pratique commune et super utile pour vérifier que le code comporte peu de bugs, et aller vers une documentation des props de composants.