From 570ee1013b72a7f4a67898f43a732ee17d9049cf Mon Sep 17 00:00:00 2001 From: guigzzzzz <47823469+guigzzz31@users.noreply.github.com> Date: Tue, 3 Nov 2020 09:23:40 +0100 Subject: [PATCH 01/20] Update langage-javascript.md --- development/langage-javascript.md | 37 +++++++++++++++++++------------ 1 file changed, 23 insertions(+), 14 deletions(-) diff --git a/development/langage-javascript.md b/development/langage-javascript.md index e5d05930..0c6ac074 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -8,41 +8,50 @@ ## 🎓 J'ai compris et je peux expliquer -- les `structures` de base du langage ❌ / ✔️ -- les normes `ecmascript` ❌ / ✔️ -- l'utilisation de l'`asynchrone` ❌ / ✔️ -- les spécifités du mot-clef `this` ❌ / ✔️ +- les `structures` de base du langage ✔️ +- les normes `ecmascript` ✔️ +- l'utilisation de l'`asynchrone` ✔️ +- les spécifités du mot-clef `this` ✔️ ## 💻 Je code en Javascript ### Un exemple de code commenté ❌ / ✔️ ```javascript -(e) => mc2; + const handleSubmit = event => { + event.preventDefault(); + axios.post('/boudu/admin/restaurateurs', { + lastName, + firstName, + phoneNumber, + mail + }); + }; + //petit handleSubmit avec event en paramètre pour eviter le refresh de la page ``` ### Utilisation dans un projet ❌ / ✔️ -[lien github](...) +[lien github](https://github.com/guigzzz31/hackatonEdf) -Description : +Description : petit hackathon réalisé lors de la wild ### J'ai utilisé ce langage en production ❌ / ✔️ -[lien du projet](...) +[lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) -Description : +Description : projet 3 client à la wild -### J'ai utilisé ce langage en environement professionnel ❌ / ✔️ - -Description : +### J'ai utilisé ce langage en environement professionnel ✔️ +Description : React Native pour la création d'un appli en stage, React - Express en alternance + ## 🌐 J'utilise des ressources ### Titre -- lien -- description +[lien de la doc](https://redux.js.org/) +- la doc de redux car j'y ai passé beaucoup de temps ## 🚧 Je franchis les obstacles From 20519731b703154b1edbd4a1145a801876456e35 Mon Sep 17 00:00:00 2001 From: guigzzzzz <47823469+guigzzz31@users.noreply.github.com> Date: Tue, 3 Nov 2020 09:24:15 +0100 Subject: [PATCH 02/20] Update langage-javascript.md --- development/langage-javascript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/development/langage-javascript.md b/development/langage-javascript.md index 0c6ac074..617e8ae2 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -30,13 +30,13 @@ //petit handleSubmit avec event en paramètre pour eviter le refresh de la page ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ [lien github](https://github.com/guigzzz31/hackatonEdf) Description : petit hackathon réalisé lors de la wild -### J'ai utilisé ce langage en production ❌ / ✔️ +### J'ai utilisé ce langage en production ✔️ [lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) From ab37dd9cecf25d14c2439ab55d51bde85af71cd1 Mon Sep 17 00:00:00 2001 From: guigzzzzz <47823469+guigzzz31@users.noreply.github.com> Date: Tue, 3 Nov 2020 10:29:18 +0100 Subject: [PATCH 03/20] Update nodejs.md --- development/nodejs.md | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/development/nodejs.md b/development/nodejs.md index bb008da8..91e587d3 100644 --- a/development/nodejs.md +++ b/development/nodejs.md @@ -8,43 +8,52 @@ ## 🎓 J'ai compris et je peux expliquer -- Comment développer en utilisant un système de *livereloading* (`nodemon` par exemple) ❌ / ✔️ -- La connexion de mon application à une base de données avec et sans ORM/ODM (avec `mongodb` puis `mongoose` par exemple) ❌ / ✔️ -- Le développement d'une API REST et GraphQL (avec les packages `express` et `graphql` par exemple) ❌ / ✔️ +- Comment développer en utilisant un système de *livereloading* (`nodemon` par exemple) ✔️ +- La connexion de mon application à une base de données avec et sans ORM/ODM (avec `mongodb` puis `mongoose` par exemple) ✔️ +- Le développement d'une API REST et GraphQL (avec les packages `express` et `graphql` par exemple) ✔️ - *Bonus : la manipulation des fichiers système avec `fs` et l'utilisation des streams en NodeJS* ❌ / ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ ```javascript -// this function takes a path to a .md file of the host system and write the HTML version of this file -// the .html file is given back -const convertMDFileToHTML = (pathToMDfile) => /* ... path to HTML file */ +// get restaurant by id +router.get('/:id', (req, res) => { + const { id } = req.params; + const query = 'SELECT * FROM Restaurant WHERE id= ?'; + connection.query(query, id, (err, results) => { + if (err) { + res.status(500).send('Erreur lors de la récupération des informations sur les restaurants'); + } else { + res.json(results); + } + }); +}); ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ -[lien github](...) +[lien github](https://github.com/WildCodeSchool/tlse-0919-js-boudu) Description : -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ✔️ [lien du projet](...) -Description : +Description : au sein de ma boite mais pas d'exemple sous la main -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ -Description : +Description : architecture en package ## 🌐 J'utilise des ressources ### Titre -- lien -- description +- [la doc](http://expressjs.com/fr/4x/api.html#res) +- la base ## 🚧 Je franchis les obstacles From 5ea6b45384157f49093e87f0221206f29744ac02 Mon Sep 17 00:00:00 2001 From: guigzzzzz <47823469+guigzzz31@users.noreply.github.com> Date: Tue, 3 Nov 2020 10:35:15 +0100 Subject: [PATCH 04/20] Update react.md --- development/react.md | 49 ++++++++++++++++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 11 deletions(-) diff --git a/development/react.md b/development/react.md index 80f75641..e66215d4 100644 --- a/development/react.md +++ b/development/react.md @@ -8,16 +8,43 @@ ## 🎓 J'ai compris et je peux expliquer -- l'état (_state_) pour contrôler l'affichage d'un composant ❌ / ✔️ -- les composants enfants et les _props_ qu'on leur passe ❌ / ✔️ -- le déclenchement d'instructions en fonction des actions de l'utilisateur ❌ / ✔️ -- le déclenchement d'instructions en fonction de l'étape du cycle de vie du composant ou du changement de valeur de ses props ❌ / ✔️ +- l'état (_state_) pour contrôler l'affichage d'un composant ✔️ +- les composants enfants et les _props_ qu'on leur passe ✔️ +- le déclenchement d'instructions en fonction des actions de l'utilisateur ✔️ +- le déclenchement d'instructions en fonction de l'étape du cycle de vie du composant ou du changement de valeur de ses props ✔️ - l'usage d'un reducer (_useReducer_) pour gérer un état composé dans un composant -- l'état stocké dans un composant avec un _context provider_ et accessible dans ses descendants via `useContext` ❌ / ✔️ +- l'état stocké dans un composant avec un _context provider_ et accessible dans ses descendants via `useContext` ❌ ## 💻 J'utilise ### Un exemple personnel commenté ❌ / ✔️ +``` + const [filtersQueryStr, setFiltersQueryStr] = useState(''); + useEffect(() => { + const restaurantFilters = { + moments: q1, + specialties: q2, + ambiances: q3, + date: q4, + districts: q5, + dietSpecificities: q6, + budget: q7, + accesses: q8 + }; + + if (q4) { + const date = new Date(q4); + restaurantFilters.date = date.getDay(); + } + + const updateQuery = async filters => { + await setFiltersQueryStr(formatQueryStr(filters)); + }; + updateQuery(restaurantFilters); + }, [q1, q2, q3, q4, q5, q6, q7, q8]); + + //un petit hook pour gérer les reponses du quizz qui sont sur des pages différentes +``` ### Utilisation dans un projet ❌ / ✔️ @@ -25,13 +52,13 @@ Description : -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ✔️ -[lien du projet](...) +[lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) -Description : +Description : -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ Description : @@ -39,8 +66,8 @@ Description : ### Titre -- lien -- description +- [la doc](https://reactjs.org/) +- la base ## 🚧 Je franchis les obstacles From f304c096128ed26dbf06c69ad323779b016d7184 Mon Sep 17 00:00:00 2001 From: guigzzzzz <47823469+guigzzz31@users.noreply.github.com> Date: Tue, 3 Nov 2020 11:02:13 +0100 Subject: [PATCH 05/20] Update scrum.md --- development/scrum.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/development/scrum.md b/development/scrum.md index fea17b84..f4c12958 100644 --- a/development/scrum.md +++ b/development/scrum.md @@ -8,22 +8,22 @@ ## 🎓 J'ai compris et je peux expliquer -- Différence entre Agile et SCRUM ❌ / ✔️ -- Expliquer les différents rituels et leur intérêt : ❌ / ✔️ +- Différence entre Agile et SCRUM ✔️ +- Expliquer les différents rituels et leur intérêt : ✔️ - Daily Stand Up - Sprint planning - Retro - Grooming - Poker planning -- Expliquer les différents roles ❌ / ✔️ +- Expliquer les différents roles ✔️ - SCRUM master - Product Owner - Stakeholder -- Comment rédiger une User Story complète ? ❌ / ✔️ -- Qu'est-ce qu'un Product Backlog ? ❌ / ✔️ -- Qu'est ce qu'un Sprint ? Quel est l'intérêt ? ❌ / ✔️ -- A quoi sert le Burndown Chart ? ❌ / ✔️ -- Quelles sont les 2 unités de complexité ? ❌ / ✔️ +- Comment rédiger une User Story complète ? ✔️ +- Qu'est-ce qu'un Product Backlog ? ✔️ +- Qu'est ce qu'un Sprint ? Quel est l'intérêt ? ✔️ +- A quoi sert le Burndown Chart ? ✔️ +- Quelles sont les 2 unités de complexité ? ❌ - Qu'est-ce qu'une Definition of done ? A quoi sert elle ? ❌ / ✔️ ## 💻 J'utilise @@ -32,21 +32,21 @@ ### Utilisation dans un projet ❌ / ✔️ -[lien (screenshot/photos)](...) +[lien (screenshot/photos)](https://imgur.com/iSHhVld) -Description : +Description : le backlog utilisé en stage -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ✔️ [lien (screenshot/photos)](...) -Description : +Description :pas d'exemple sous la main, mais en stage j'ai utilisé Asana et maintenant Jira -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ [lien (screenshot/photos)](...) -Description : +Description : en tant que Scrum master de ma boite je met en place l'utilisation de Scrum ## 🌐 J'utilise des ressources From 45044c47e9120ae5846020760670479d2c75f986 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Mon, 14 Dec 2020 09:52:54 +0100 Subject: [PATCH 06/20] update skills --- development/langage-javascript.md | 44 +++++++++++++++---------------- devops/github.md | 34 ++++++++++++++++++------ xp-pro/entreprise.md | 3 ++- xp-pro/experience-1.md | 18 +++++++++++++ 4 files changed, 68 insertions(+), 31 deletions(-) diff --git a/development/langage-javascript.md b/development/langage-javascript.md index 617e8ae2..7a95cc0e 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -8,50 +8,51 @@ ## 🎓 J'ai compris et je peux expliquer -- les `structures` de base du langage ✔️ -- les normes `ecmascript` ✔️ -- l'utilisation de l'`asynchrone` ✔️ -- les spécifités du mot-clef `this` ✔️ +- les `structures` de base du langage ✔️ +- les normes `ecmascript` ✔️ +- l'utilisation de l'`asynchrone` ✔️ +- les spécifités du mot-clef `this` ✔️ ## 💻 Je code en Javascript -### Un exemple de code commenté ❌ / ✔️ +### Un exemple de code commenté ✔️ ```javascript - const handleSubmit = event => { - event.preventDefault(); - axios.post('/boudu/admin/restaurateurs', { - lastName, - firstName, - phoneNumber, - mail - }); - }; - //petit handleSubmit avec event en paramètre pour eviter le refresh de la page +const handleSubmit = (event) => { + event.preventDefault(); + axios.post("/boudu/admin/restaurateurs", { + lastName, + firstName, + phoneNumber, + mail, + }); +}; +//petit handleSubmit avec event en paramètre pour eviter le refresh de la page ``` -### Utilisation dans un projet ✔️ +### Utilisation dans un projet ✔️ [lien github](https://github.com/guigzzz31/hackatonEdf) Description : petit hackathon réalisé lors de la wild -### J'ai utilisé ce langage en production ✔️ +### J'ai utilisé ce langage en production ✔️ [lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) Description : projet 3 client à la wild -### J'ai utilisé ce langage en environement professionnel ✔️ +### J'ai utilisé ce langage en environement professionnel ✔️ + +Description : React Native pour la création d'un appli en stage, React - Express en alternance -Description : React Native pour la création d'un appli en stage, React - Express en alternance - ## 🌐 J'utilise des ressources ### Titre [lien de la doc](https://redux.js.org/) -- la doc de redux car j'y ai passé beaucoup de temps + +- la doc de redux car j'y ai passé beaucoup de temps ## 🚧 Je franchis les obstacles @@ -71,4 +72,3 @@ Résolution : - J'ai ecrit un [tutoriel](...) ❌ / ✔️ - J'ai fait une [présentation](...) ❌ / ✔️ - diff --git a/devops/github.md b/devops/github.md index a9a27826..dd641eb1 100644 --- a/devops/github.md +++ b/devops/github.md @@ -8,21 +8,40 @@ ## 🎓 J'ai compris et je peux expliquer -- l'initialisation d'un projet ❌ / ✔️ -- travailler avec des branches ❌ / ✔️ -- faire une PR ❌ / ✔️ -- utiliser git rebase pour faire des commits propres ❌ / ✔️ +- l'initialisation d'un projet ✔️ +- travailler avec des branches ✔️ +- faire une PR ✔️ +- utiliser git rebase pour faire des commits propres ✔️ - utiliser les gitHub actions ❌ / ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ + + + + + + {/* infoTip est le bandeau informatif en haut de page */} + {infoPage.infoTip ? ( + + + + ) : null} + {/* VisitCardGenerator est le composant responsable de générer les cartes de visite */} + {infoPage.users ? ( + + + + ) : null} + ### Utilisation dans un projet ❌ / ✔️ -[lien github](...) +[lien github](https://github.com/guigzzz31/vitrine-next-material-ui) Description : +dans ce projet chaque branch a un préfixe feature/ refactor/ debug/ hotFix/ suivant la nature du dev à effectuer ### Utilisation en production si applicable❌ / ✔️ @@ -38,8 +57,7 @@ Description : ### Titre -- lien -- description +-[NextJs](https://nextjs.org/) -[Material-ui](https://material-ui.com/getting-started/installation/) ## 🚧 Je franchis les obstacles diff --git a/xp-pro/entreprise.md b/xp-pro/entreprise.md index 87481ecc..d6d904e9 100644 --- a/xp-pro/entreprise.md +++ b/xp-pro/entreprise.md @@ -1,5 +1,7 @@ # Le nom de l'entreprise +Sans entreprise pendant ces 3 dernières semaines j'ai réaliser le site statique d'une amie podologue en NextJs, React et full material-ui + ## L'activité principale > Décris en quelques lignes l'activité principale de l'entreprise @@ -7,4 +9,3 @@ ## Ton équipe > Décris l'équipe avec laquelle tu travailles, les différents postes et ton interaction avec ces postes. - diff --git a/xp-pro/experience-1.md b/xp-pro/experience-1.md index a88c286c..f8510879 100644 --- a/xp-pro/experience-1.md +++ b/xp-pro/experience-1.md @@ -6,10 +6,16 @@ 1. S'agit il de tes premiers jours dans l'entreprise ? (Si non, précise la date d'entrée) +Date d'entrée 28/09/2020, date de sortie 18/11/20 + 2. Décris comment se déroule la communication avec ton tuteur. (fréquence, valeur de l'aide ajoutée) +Catastrophique + 3. Décris ta mission actuelle au sein de l'entreprise +sans mission: création d'un site statique générique à souhait afin de pouvoir me constituer une librairie personelle de composants + 4. Qu'est ce qui a bien fonctionné en terme de communication avec ton équipe ? 5. Qu'est ce qui n'a pas bien fonctionné en terme de communication avec le reste de l'équipe ? @@ -20,14 +26,26 @@ 1. Quel est le projet principal sur lequel tu as travaillé sur cette période. (liste les projets si il y en a plusieurs) ? +site de présentation d'un cabinet de podologie + 2. Quelle est la tâche la plus intéressante accomplie lors de cette période ? +la refactorisation de mes composants + 3. Ta plus grosse réussite ? +la refactorisation de mes composants + 4. La plus grosse difficulté (echec ou perte de temps) ? +bien comprendre les concepts fondamentaux de material ui + 5. Quel langage as tu le plus utilisé ? +Javascript react + 6. Quel design pattern as tu pu identifier ? +aucun design pattern... + 7. Sur quel point ton formateur ou ton groupe peuvent ils t'aider ? From 1805d237168ae394436796544e7db7db77a6590a Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Tue, 13 Jul 2021 09:52:18 +0200 Subject: [PATCH 07/20] graphql update --- architecture/graphql.md | 84 +++++++++++++++++++-- development/react.md | 159 +++++++++++++++++++++++++++++++++++++++- package-lock.json | 3 + 3 files changed, 237 insertions(+), 9 deletions(-) create mode 100644 package-lock.json diff --git a/architecture/graphql.md b/architecture/graphql.md index 5aa2e92c..d4754f8d 100644 --- a/architecture/graphql.md +++ b/architecture/graphql.md @@ -8,16 +8,76 @@ ## 🎓 J'ai compris et je peux expliquer -- la différence entre REST et GraphQL ❌ / ✔️ -- les besoins auxquels répond GraphQL ❌ / ✔️ +- la différence entre REST et GraphQL ✔️ +- les besoins auxquels répond GraphQL ✔️ - la définition d'un schéma -- Query ❌ / ✔️ -- Mutation ❌ / ✔️ -- Subscription ❌ / ✔️ +- Query ✔️ +- Mutation ✔️ +- Subscription ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +GrapqhQL, en entreprise et à l'école + +### Un exemple personnel commenté ✔️ + +```une query pour get 1 article en fonction de son ID + + @Query(() => Article) + oneArticle( + @Ctx() { user }: { user: User | null }, + @Arg('articleID') articleID: string + ): Promise
{ + if (!user) { + throw Error('You are not authenticated.'); + } + return Article.findOne(articleID, { + relations: [ + 'user', + 'likesArticle', + 'likesArticle.user', + 'contentFields', + 'commentairesArticle', + 'commentairesArticle.user', + 'community', + ], + }) as Promise
; + } + +``` + +```une mutation pour supprimer la session de connexion + + @Mutation(() => User) + async deleteSession(@Ctx() { user }: { user: User | null }): Promise { + if (!user) { + throw Error('You are not authenticated.'); + } + await getConnection() + .createQueryBuilder() + .delete() + .from(UserSession) + .where('userUserID = :id', { id: user.userID }) + .execute(); + + return User.findOne(user.userID) as Promise; + } + +``` + +```une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un + + @Subscription({ + topics: 'NEW_COMMENT', + }) + subscribeToNewComment( + @Root() notificationPayload: newCommentNotificationPayload + ): CommentaireArticle { + return notificationPayload.payload; + } + +``` + ### Utilisation dans un projet ❌ / ✔️ @@ -25,7 +85,7 @@ Description : -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ❌ / ✔️ [lien du projet](...) @@ -33,10 +93,18 @@ Description : ### Utilisation en environement professionnel ❌ / ✔️ -Description : +Développement de la partie front end de Dmitri, un projet pour un client avec l'entreprise + +```typescript + +``` ## 🌐 J'utilise des ressources +[la doc graphql](https://graphql.org/) +[le playground graphql pour le debug généralement sur le localhost:4000 de tout projet graphql](http://localhost:4000/graphql) +[la doc apollo](https://www.apollographql.com/docs/react/get-started/) + ### Titre - lien diff --git a/development/react.md b/development/react.md index e66215d4..8ee0bc7c 100644 --- a/development/react.md +++ b/development/react.md @@ -56,7 +56,164 @@ Description : [lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) -Description : +Description : le context de la gestion d'annonces (fonctionnalité principale) de Dmitri + +```AdsProvider.tsx + +import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react' +import { GetAdsDocument, GetArchivedAdsDocument } from '../generated/hooks' +import { + AdArchivedFragment, AdFragment, AnnounceWhereInput, Exact, GetAdsQuery, GetAdsQueryVariables, + GetArchivedAdsQuery, GetArchivedAdsQueryVariables, +} from '../generated/types' +import { useAwaitableQuery } from '../hooks/useAwaitableQuery' +import { useCurrentUser } from './currentUserContext' + +type paramsRefetch = keyof AnnounceWhereInput +type AdsContextType = { + ads?: AdFragment[] + archivedAds?: AdArchivedFragment[] + refetchAds?: ()=> Promise + loadingAds?: boolean + currentTab?: number + setCurrentTab?: Dispatch> +} + +const AdsContext = React.createContext({}) + +type MapTabToStateType = { [key in number]: paramsRefetch} +const mapTabToStateTeacher: MapTabToStateType = { 0: 'isPublished', 1: 'isValidated', 2: 'isFinished' } +const mapTabToStateLearner: MapTabToStateType = { 0: 'isPublished', 1: 'isValidated', 2: 'isMarked' } +const mapTabToState: { [key in number]: MapTabToStateType} = { 0: mapTabToStateLearner, 1: mapTabToStateTeacher } + +export const AdsProvider: React.FC = ({ children }) => { + const { currentUser } = useCurrentUser() + + const [ads, setAds] = useState() + const [archivedAds, setArchivedAds] = useState() + const [loadingAds, setLoadingAds] = useState(false) + const [currentTab, setCurrentTab] = useState(0) + + const getAds = useAwaitableQuery(GetAdsDocument) + const getArchivedAds = useAwaitableQuery(GetArchivedAdsDocument) + const abortController = React.useRef() + + const fetchLearnerAds = async () => { + const queryStateKey = mapTabToState[Number(currentUser?.isTeacher)][currentTab] + + if (abortController.current) abortController.current.abort() + + const controller = new window.AbortController() + abortController.current = controller + + try { + setLoadingAds(true) + const res = await getAds({ variables: { + condition: { + [currentUser?.isStudent ? 'student' : 'parent']: { id: currentUser?.id }, + [queryStateKey]: true, + }, + }, + fetchPolicy: 'no-cache', + context: { + fetchOptions: { + signal: controller.signal, + }, + }, + }) + if (currentTab === 2) { + const resArchived = await getArchivedAds({ variables: { + condition: { + [currentUser?.isStudent ? 'student' : 'parent']: { id: currentUser?.id }, + isArchived: true, + }, + }, + fetchPolicy: 'no-cache', + }) + setArchivedAds(resArchived.data?.allAnnounces!) + } + if (!controller.signal.aborted) + setAds(res.data?.allAnnounces!) + + setLoadingAds(false) + } catch (err) { + console.log(err) + } + } + + const fetchTeacherAds = async () => { + try { + setLoadingAds(true) + if (currentTab === 0) { + const res = await getAds({ variables: { + condition: { + [mapTabToState[Number(currentUser?.isTeacher)][currentTab]]: true, + candidates_some: { id: currentUser?.id }, + }, + }, + fetchPolicy: 'no-cache', + }) + setAds(res.data?.allAnnounces!) + setLoadingAds(false) + } else { + if (currentTab === 2) { + const resArchived = await getArchivedAds({ variables: { + condition: { + isArchived: true, + }, + }, + fetchPolicy: 'no-cache', + }) + setArchivedAds(resArchived.data?.allAnnounces!) + } + const res = await getAds({ variables: { + condition: { + [mapTabToState[Number(currentUser?.isTeacher)][currentTab]]: true, + }, + }, + fetchPolicy: 'no-cache', + }) + setAds(res.data?.allAnnounces!) + setLoadingAds(false) + } + } catch (err) { + console.log(err) + } + } + + useEffect(() => { + const getAddsAsync = async () => { + if (currentUser?.isTeacher) + await fetchTeacherAds() + else + await fetchLearnerAds() + } + getAddsAsync() + }, [currentTab]) + + return ( + + {children} + + ) +} + +export const useAds = () => { + const ctx = useContext(AdsContext) + return ctx +} + + +``` ### Utilisation en environement professionnel ✔️ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} From 36f3f71e67fa8fd5df8c132df0e55c5245c43b72 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Tue, 13 Jul 2021 09:59:56 +0200 Subject: [PATCH 08/20] graphql finished --- architecture/graphql.md | 66 ++++++++++++++++++++++++++++++++++------- 1 file changed, 56 insertions(+), 10 deletions(-) diff --git a/architecture/graphql.md b/architecture/graphql.md index d4754f8d..454d5195 100644 --- a/architecture/graphql.md +++ b/architecture/graphql.md @@ -21,7 +21,8 @@ GrapqhQL, en entreprise et à l'école ### Un exemple personnel commenté ✔️ -```une query pour get 1 article en fonction de son ID +une query pour get 1 article en fonction de son ID +``` @Query(() => Article) oneArticle( @@ -45,8 +46,8 @@ GrapqhQL, en entreprise et à l'école } ``` - -```une mutation pour supprimer la session de connexion +une mutation pour supprimer la session de connexion +``` @Mutation(() => User) async deleteSession(@Ctx() { user }: { user: User | null }): Promise { @@ -64,8 +65,8 @@ GrapqhQL, en entreprise et à l'école } ``` - -```une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un +une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un article +``` @Subscription({ topics: 'NEW_COMMENT', @@ -81,21 +82,66 @@ GrapqhQL, en entreprise et à l'école ### Utilisation dans un projet ❌ / ✔️ -[lien github](...) +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) -Description : +Description : voici le lien du repo de SkillzShare, le projet de l'année réalisé avec graphql ### Utilisation en production si applicable ❌ / ✔️ -[lien du projet](...) +[SkillzShare](https://skillzshare.wns.wilders.dev/) -Description : +Description : la production de SkillzShare ### Utilisation en environement professionnel ❌ / ✔️ Développement de la partie front end de Dmitri, un projet pour un client avec l'entreprise -```typescript +utilisation de graphql en milieu professionel, voici ci-dessous un exemple du fichier généré par le back pour servir le front + +``` +export const GetParentDocument = gql` + query GetParent($id: ID!) { + User(where: {id: $id}) { + ...UserProfile + ...UserRoles + ...UserMetadata + parent { + ...ParentProfile + } + } +} + ${UserProfileFragmentDoc} +${UserRolesFragmentDoc} +${UserMetadataFragmentDoc} +${ParentProfileFragmentDoc}`; + +/** + * __useGetParentQuery__ + * + * To run a query within a React component, call `useGetParentQuery` and pass it any options that fit your needs. + * When your component renders, `useGetParentQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useGetParentQuery({ + * variables: { + * id: // value for 'id' + * }, + * }); + */ +export function useGetParentQuery(baseOptions: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(GetParentDocument, options); + } +export function useGetParentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(GetParentDocument, options); + } +export type GetParentQueryHookResult = ReturnType; +export type GetParentLazyQueryHookResult = ReturnType; +export type GetParentQueryResult = Apollo.QueryResult; ``` From ac1966a3a34371c695de7ef82007164b1aae6bd9 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Tue, 13 Jul 2021 10:16:03 +0200 Subject: [PATCH 09/20] react finished --- architecture/graphql.md | 17 +++++----- development/react.md | 69 +++++++++++++++++++---------------------- 2 files changed, 39 insertions(+), 47 deletions(-) diff --git a/architecture/graphql.md b/architecture/graphql.md index 454d5195..2a98f55a 100644 --- a/architecture/graphql.md +++ b/architecture/graphql.md @@ -21,9 +21,8 @@ GrapqhQL, en entreprise et à l'école ### Un exemple personnel commenté ✔️ -une query pour get 1 article en fonction de son ID -``` - +```ts +//une query pour get 1 article en fonction de son ID @Query(() => Article) oneArticle( @Ctx() { user }: { user: User | null }, @@ -46,9 +45,8 @@ une query pour get 1 article en fonction de son ID } ``` -une mutation pour supprimer la session de connexion -``` - +```ts +//une mutation pour supprimer la session de connexion @Mutation(() => User) async deleteSession(@Ctx() { user }: { user: User | null }): Promise { if (!user) { @@ -65,9 +63,8 @@ une mutation pour supprimer la session de connexion } ``` -une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un article -``` - +```ts +//une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un article @Subscription({ topics: 'NEW_COMMENT', }) @@ -98,7 +95,7 @@ Développement de la partie front end de Dmitri, un projet pour un client avec l utilisation de graphql en milieu professionel, voici ci-dessous un exemple du fichier généré par le back pour servir le front -``` +```ts export const GetParentDocument = gql` query GetParent($id: ID!) { User(where: {id: $id}) { diff --git a/development/react.md b/development/react.md index 8ee0bc7c..e0a68cd4 100644 --- a/development/react.md +++ b/development/react.md @@ -18,47 +18,46 @@ ## 💻 J'utilise ### Un exemple personnel commenté ❌ / ✔️ -``` - const [filtersQueryStr, setFiltersQueryStr] = useState(''); - useEffect(() => { - const restaurantFilters = { - moments: q1, - specialties: q2, - ambiances: q3, - date: q4, - districts: q5, - dietSpecificities: q6, - budget: q7, - accesses: q8 - }; - - if (q4) { - const date = new Date(q4); - restaurantFilters.date = date.getDay(); - } - const updateQuery = async filters => { - await setFiltersQueryStr(formatQueryStr(filters)); - }; - updateQuery(restaurantFilters); - }, [q1, q2, q3, q4, q5, q6, q7, q8]); +```tsx + //un handle change generique pour modifiier un state User + + const [user, setUser] = useState(defaultUser); + const onUserChange =

(prop: P, value: User[P]) => { + setUser({ ...user, [prop]: value }); + }; - //un petit hook pour gérer les reponses du quizz qui sont sur des pages différentes ``` ### Utilisation dans un projet ❌ / ✔️ -[lien github](...) +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) + +```tsx +//Description : +export default function App(): JSX.Element { + const { data, loading } = useQuery(CHECK_AUTH); + return ( + <> + {!loading && ( + + + + )} + + ); +} -Description : +``` ### Utilisation en production si applicable ✔️ -[lien du projet](https://github.com/WildCodeSchool/tlse-0919-js-boudu) +[SkillzShare](https://skillzshare.wns.wilders.dev/) -Description : le context de la gestion d'annonces (fonctionnalité principale) de Dmitri +### Utilisation en environement professionnel ✔️ -```AdsProvider.tsx +```tsx +//Description : le context de la gestion d'annonces (fonctionnalité principale) de Dmitri import React, { Dispatch, SetStateAction, useContext, useEffect, useState } from 'react' import { GetAdsDocument, GetArchivedAdsDocument } from '../generated/hooks' @@ -212,19 +211,15 @@ export const useAds = () => { return ctx } - ``` - -### Utilisation en environement professionnel ✔️ - -Description : - ## 🌐 J'utilise des ressources ### Titre -- [la doc](https://reactjs.org/) -- la base +- [la doc react](https://reactjs.org/) +- [le handbook typescript](https://www.typescriptlang.org/docs/handbook/intro.html) +- [react router pour la navigation](https://reactrouter.com/) +- [chakra-ui pour le style](https://chakra-ui.com/docs/getting-started) ## 🚧 Je franchis les obstacles From e72c80ce3fa1d454e5bd8fe838269630a292ecd1 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Tue, 13 Jul 2021 10:28:18 +0200 Subject: [PATCH 10/20] typescript ok --- development/langage-typescript.md | 128 +++++++++++++++++++++++++++--- 1 file changed, 118 insertions(+), 10 deletions(-) diff --git a/development/langage-typescript.md b/development/langage-typescript.md index 064465ec..5646aaa2 100644 --- a/development/langage-typescript.md +++ b/development/langage-typescript.md @@ -8,33 +8,141 @@ ## 🎓 J'ai compris et je peux expliquer -- l'intéret de TypeScript dans l'IDE ❌ / ✔️ -- les types de bases ❌ / ✔️ -- comment et pourquoi étendre une interface ❌ / ✔️ +- l'intéret de TypeScript dans l'IDE ✔️ +- les types de bases ✔️ +- comment et pourquoi étendre une interface ✔️ - les classes et les decorators ❌ / ✔️ ## 💻 J'utilise ### Un exemple personnel commenté ❌ / ✔️ -### Utilisation dans un projet ❌ / ✔️ +```ts +//mapping sur une enum pour rattacher un objet a une variant pour avoir différentes tailles d'avatar et responsives +export enum AvatarVariants { + Small = 'small', + Medium = 'medium', + Big = 'big', +} + +export interface ISizes { + base: string; + sm: string; + md: string; + lg: string; + xl: string; +} + +export const avatarSizeMap: Record = { + [AvatarVariants.Small]: { + base: '30px', + sm: '30px', + md: '34px', + lg: '36px', + xl: '38px', + }, + [AvatarVariants.Medium]: { + base: '36px', + sm: '36px', + md: '38px', + lg: '42px', + xl: '44px', + }, + [AvatarVariants.Big]: { + base: '50px', + sm: '60px', + md: '64px', + lg: '70px', + xl: '70px', + }, +}; + +type AvatarCustomProps = { + variant: 'small' | 'medium' | 'big'; + avatar: string | null; +}; + +const AvatarCustom = (props: AvatarCustomProps) => { + const { avatar, variant } = props; + + return ( + + ); +}; + +export default AvatarCustom; + + +``` -[lien github](...) +### Utilisation dans un projet ❌ / ✔️ -Description : +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) ### Utilisation en production si applicable❌ / ✔️ -[lien du projet](...) - -Description : +[SkillzShare](https://skillzshare.wns.wilders.dev/) ### Utilisation en environement professionnel ❌ / ✔️ -Description : +```ts +//exemples de types en unviers professionels + +export type Experience = { + id: string + from: Date + to?: Date + title: string + place?: string + description?: string + isValidate?: boolean +} + +export type AuthFormData = Partial<(AuthFormTeacherData | AuthFormParentData | AuthFormStudentData)> + +export type UpdateProfileTeacher = { + lastName: string + firstName: string + location: GooglePlacesAutocompleteResponse +} + +export type ExperienceForm = { + isCurrentJob: boolean + title: string + fromDate: string + toDate: string + description: string + school: School + file?: File +} + + +``` ## 🌐 J'utilise des ressources +- [le handbook typescript](https://www.typescriptlang.org/docs/handbook/intro.html) + ### Titre - lien From 23ba367ffcc0ccc9fa35142a515a645445591d15 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Tue, 13 Jul 2021 14:56:35 +0200 Subject: [PATCH 11/20] start --- development/react-native.md | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/development/react-native.md b/development/react-native.md index 3fab92dd..da62d7bc 100644 --- a/development/react-native.md +++ b/development/react-native.md @@ -8,17 +8,21 @@ ## 🎓 J'ai compris et je peux expliquer -- les différences et points communs entre du code react et du code react native ❌ / ✔️ -- ce que devient et comment est interprêté le code javascript dans une application react native ❌ / ✔️ -- les avantages et inconvénients de react native ❌ / ✔️ -- la différence entre react native et expo ❌ / ✔️ -- les principales briques qui composent react native (core components) ❌ / ✔️ -- comment écrire du style en react native ❌ / ✔️ -- comment est géré le layout en react native ❌ / ✔️ +- les différences et points communs entre du code react et du code react native ✔️ +- ce que devient et comment est interprêté le code javascript dans une application react native ✔️ +- les avantages et inconvénients de react native ✔️ +- la différence entre react native et expo ✔️ +- les principales briques qui composent react native (core components) ✔️ +- comment écrire du style en react native ✔️ +- comment est géré le layout en react native ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ + +```tsx +//un composant +``` ### Utilisation dans un projet ❌ / ✔️ From d85a438ac72d0d50e27befbbd5cfa973e13b8c10 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 09:45:44 +0200 Subject: [PATCH 12/20] node js ok --- development/langage-javascript.md | 2 + development/nodejs.md | 73 ++++++++++++++++++++++++------- 2 files changed, 60 insertions(+), 15 deletions(-) diff --git a/development/langage-javascript.md b/development/langage-javascript.md index 7a95cc0e..55993322 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -18,6 +18,7 @@ ### Un exemple de code commenté ✔️ ```javascript + const handleSubmit = (event) => { event.preventDefault(); axios.post("/boudu/admin/restaurateurs", { @@ -27,6 +28,7 @@ const handleSubmit = (event) => { mail, }); }; + //petit handleSubmit avec event en paramètre pour eviter le refresh de la page ``` diff --git a/development/nodejs.md b/development/nodejs.md index 91e587d3..942051a8 100644 --- a/development/nodejs.md +++ b/development/nodejs.md @@ -17,30 +17,73 @@ ### Un exemple personnel commenté ✔️ -```javascript -// get restaurant by id -router.get('/:id', (req, res) => { - const { id } = req.params; - const query = 'SELECT * FROM Restaurant WHERE id= ?'; - connection.query(query, id, (err, results) => { - if (err) { - res.status(500).send('Erreur lors de la récupération des informations sur les restaurants'); - } else { - res.json(results); - } - }); -}); +```ts + +//un server express +export const getExpressServer = async (): Promise<{ + expressServer: Application; + apolloServer: ApolloServer; + graphQLSchema: GraphQLSchema; +}> => { + const { apolloServer, graphQLSchema } = await getApolloServer(); + + const expressServer = express() + .use(cookieParser()) + .use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 })) + .use('/public', express.static(path.join(__dirname, '..', 'public'))); + apolloServer.applyMiddleware({ app: expressServer }); + + return { expressServer, apolloServer, graphQLSchema }; +}; + ``` ### Utilisation dans un projet ✔️ -[lien github](https://github.com/WildCodeSchool/tlse-0919-js-boudu) +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) Description : ### Utilisation en production si applicable ✔️ -[lien du projet](...) +[SkillzShare](https://skillzshare.wns.wilders.dev/) + +```ts + +// connexion au back +const main = async () => { + const connectionOptions = await getConnectionOptions(); + await createConnection({ + ...connectionOptions, + synchronize: true, + entities: ['dist/models/*.js'], + }); + + const { expressServer, apolloServer, graphQLSchema } = + await getExpressServer(); + + const server = createServer(expressServer); + server.listen(4000, () => { + console.log( + `🚀 Server ready at http://localhost:4000${apolloServer.graphqlPath}` + ); + new SubscriptionServer( + { + execute, + subscribe, + schema: graphQLSchema, + }, + { + server, + path: apolloServer.graphqlPath, + } + ); + }); +}; + +main(); + +``` Description : au sein de ma boite mais pas d'exemple sous la main From 9c2a5c28e24bc6c2481801457fa34138a2d3c953 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 09:53:21 +0200 Subject: [PATCH 13/20] react native ok --- development/react-native.md | 43 +++++++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 4 deletions(-) diff --git a/development/react-native.md b/development/react-native.md index da62d7bc..159934f2 100644 --- a/development/react-native.md +++ b/development/react-native.md @@ -22,26 +22,61 @@ ```tsx //un composant +type Props = { + onPressImage: (image: MediaFile) => void + image: MediaFile +} + +//Component GalleryItem to render images coming from back (MediaFile) +const GalleryRemoteImage: React.FC = ({ onPressImage, image }) => { + const theme = useTheme() + const styles = useMemo(() => themedStyles(theme), [theme]) + const [checked, setChecked] = useState(false) + + const availableWidth = theme.windowWidth - 64 + const imageSize = availableWidth / 4 + + const onPress = () => { + setChecked(!checked) + onPressImage(image) + } + + return + + + + + +} + +const themedStyles = (theme: Theme) => StyleSheet.create({ + +}) + + +export default React.memo(GalleryRemoteImage) + ``` ### Utilisation dans un projet ❌ / ✔️ -[lien github](...) -Description : +Description : uniquement effectué en entreprise ### Utilisation en production si applicable❌ / ✔️ [lien du projet](...) -Description : +Description : Eve app (bientôt disponible) ### Utilisation en environement professionnel ❌ / ✔️ -Description : +Description : Eve app (bientôt disponible) ## 🌐 J'utilise des ressources +[Doc React Native](https://reactnative.dev/docs/components-and-apis) +[Doc React Navigation](https://reactnavigation.org/docs/getting-started) ### Titre - lien From bd2ba890098dc09a0e77059910d5f90d6d122e6c Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 10:00:46 +0200 Subject: [PATCH 14/20] experience ok --- xp-pro/experience-1.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/xp-pro/experience-1.md b/xp-pro/experience-1.md index f8510879..99907eab 100644 --- a/xp-pro/experience-1.md +++ b/xp-pro/experience-1.md @@ -6,11 +6,11 @@ 1. S'agit il de tes premiers jours dans l'entreprise ? (Si non, précise la date d'entrée) -Date d'entrée 28/09/2020, date de sortie 18/11/20 +Date d'entrée 06/01/2021, date de sortie 31/10/21 2. Décris comment se déroule la communication avec ton tuteur. (fréquence, valeur de l'aide ajoutée) -Catastrophique +Superbe, des reviews a tous les sprint, disponibilité de mes tuteurs quand j'en ai besoin :) 3. Décris ta mission actuelle au sein de l'entreprise @@ -18,34 +18,41 @@ sans mission: création d'un site statique générique à souhait afin de pouvoi 4. Qu'est ce qui a bien fonctionné en terme de communication avec ton équipe ? +les daily stand-up quotidiens, les reviews + 5. Qu'est ce qui n'a pas bien fonctionné en terme de communication avec le reste de l'équipe ? +parfois l'indisponibilité ou le manque de visibilité + 6. Quelle(s) proposition(s) pourrais tu faire pour améliorer ton intégration dans l'équipe ? + ## Expérience technique 1. Quel est le projet principal sur lequel tu as travaillé sur cette période. (liste les projets si il y en a plusieurs) ? -site de présentation d'un cabinet de podologie +Eve App, une application en React Native et Dmitri un webapp en React, le tout sur du typescript 2. Quelle est la tâche la plus intéressante accomplie lors de cette période ? -la refactorisation de mes composants +le developpement de toute la librairie de composants, la refactorisation 3. Ta plus grosse réussite ? -la refactorisation de mes composants +la refactorisation de composants 4. La plus grosse difficulté (echec ou perte de temps) ? -bien comprendre les concepts fondamentaux de material ui +avoir bonne approche de graphql, utiliser le cache a bon escient 5. Quel langage as tu le plus utilisé ? -Javascript react +React, Typescript 6. Quel design pattern as tu pu identifier ? aucun design pattern... 7. Sur quel point ton formateur ou ton groupe peuvent ils t'aider ? + +sur l'appréhension et la réflexion de certains problèmes rencontrés From 71dcfbe745b8c54c35c5a866910143fd824f1a9a Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 10:04:42 +0200 Subject: [PATCH 15/20] xp pro --- xp-pro/entreprise.md | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/xp-pro/entreprise.md b/xp-pro/entreprise.md index d6d904e9..daaee359 100644 --- a/xp-pro/entreprise.md +++ b/xp-pro/entreprise.md @@ -1,11 +1,16 @@ # Le nom de l'entreprise -Sans entreprise pendant ces 3 dernières semaines j'ai réaliser le site statique d'une amie podologue en NextJs, React et full material-ui +La Forge ## L'activité principale -> Décris en quelques lignes l'activité principale de l'entreprise +Entreprise de services, proposant la réalisations de sites internet & d'application mobiles. +De la maquette au data model en passant par l'interface :) ## Ton équipe -> Décris l'équipe avec laquelle tu travailles, les différents postes et ton interaction avec ces postes. +1 pôle design +1 pôle developpement +1 pôle relation client / com + +Superbe équipe ou tous les pôles travaillent ensemble; ambiance générale décontractée \ No newline at end of file From 81ebbc0715ef43310a71dc71890b7e282af0bc89 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 10:40:15 +0200 Subject: [PATCH 16/20] check ok + docker ok --- architecture/graphql.md | 21 +---- architecture/mobile.md | 133 ++++++++++++++++++++++---- architecture/rest.md | 68 ++++++++++---- development/langage-typescript.md | 94 +++---------------- development/react-native.md | 12 +-- development/react.md | 87 +++++++++++++++-- development/secu.md | 8 +- devops/docker.md | 149 +++++++++++++++++++++++++++--- devops/github.md | 17 ---- 9 files changed, 406 insertions(+), 183 deletions(-) diff --git a/architecture/graphql.md b/architecture/graphql.md index 2a98f55a..6ea2d5cb 100644 --- a/architecture/graphql.md +++ b/architecture/graphql.md @@ -89,7 +89,7 @@ Description : voici le lien du repo de SkillzShare, le projet de l'année réali Description : la production de SkillzShare -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ Développement de la partie front end de Dmitri, un projet pour un client avec l'entreprise @@ -112,22 +112,9 @@ ${UserRolesFragmentDoc} ${UserMetadataFragmentDoc} ${ParentProfileFragmentDoc}`; -/** - * __useGetParentQuery__ - * - * To run a query within a React component, call `useGetParentQuery` and pass it any options that fit your needs. - * When your component renders, `useGetParentQuery` returns an object from Apollo Client that contains loading, error, and data properties - * you can use to render your UI. - * - * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; - * - * @example - * const { data, loading, error } = useGetParentQuery({ - * variables: { - * id: // value for 'id' - * }, - * }); - */ + @param baseOptions + @example + export function useGetParentQuery(baseOptions: Apollo.QueryHookOptions) { const options = {...defaultOptions, ...baseOptions} return Apollo.useQuery(GetParentDocument, options); diff --git a/architecture/mobile.md b/architecture/mobile.md index d22827da..b5d7057d 100644 --- a/architecture/mobile.md +++ b/architecture/mobile.md @@ -8,32 +8,125 @@ ## 🎓 J'ai compris et je peux expliquer -- les différences entre les webapps, les applications hybrides et natives ❌ / ✔️ -- le fonctionnement d'une app React Native, ce qui sera en réalité produit et installé sur le téléphone de mes utilisateur·rices, comment le JS arrive à communiquer avec le natif ❌ / ✔️ -- quelles sont les différentes technologies (frameworks) existantes pour développer des apps mobiles ❌ / ✔️ -- quels sont les principaux points d'attention entre le développement d'une app mobile ou desktop ❌ / ✔️ +- les différences entre les webapps, les applications hybrides et natives ✔️ +- le fonctionnement d'une app React Native, ce qui sera en réalité produit et installé sur le téléphone de mes utilisateur·rices, comment le JS arrive à communiquer avec le natif ✔️ +- quelles sont les différentes technologies (frameworks) existantes pour développer des apps mobiles ✔️ +- quels sont les principaux points d'attention entre le développement d'une app mobile ou desktop ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ + +```tsx + +// le header d'une application +type Props = { + title?: string + titleVariant?: TextVariants + noBack?: boolean + onPressBack?: () => void + action?: ReactNode, + actionStyle?: ViewStyle, + wrapperStyle?: ViewStyle, + avatar?: EveAvatarProps, + bgImg?: ImageSourcePropType, +} + +const NavigationHeader: React.FC = ({ wrapperStyle, title, titleVariant, noBack, onPressBack, action, actionStyle, avatar, bgImg }) => { + const theme = useTheme() + + const styles = useMemo(() => themedStyles(theme), [theme]) + + const navigation = useNavigation() + + const _onPressBack = () => { + if (noBack) + return + if (onPressBack) + onPressBack() + else + navigation.goBack() + } + + return + {bgImg && + + + + + } + + + + {title && + + {avatar && } + 16 ? 18 : 28}>{title} + + } + + {action} + + +} + +const themedStyles = (theme: Theme) => StyleSheet.create({ + layout: { + width: "100%", + flexDirection: 'row', + alignItems: 'center', + paddingHorizontal: 16, + paddingTop: theme.safeArea.top + 24, + paddingBottom: 24, + backgroundColor: theme.colors.background + }, + title: { + alignSelf: "center", + flex: 1, + flexDirection: 'row', + justifyContent: "center", + }, + action: { + width: 32, + alignSelf: 'flex-end', + }, + backgroundImageContainer: { + borderBottomLeftRadius: 14, + borderBottomEndRadius: 14, + overflow: 'hidden', + }, + backgroundImage: { + width: theme.windowWidth, + height: 80 + theme.safeArea.top, + }, + back: { + width: 32, + + }, +}) + + +``` +### Utilisation en production si applicable ✔️ + + +Description : Eve App + +### Utilisation en environement professionnel ✔️ + +Description : Eve App -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) - -Description : - -### Utilisation en production si applicable ❌ / ✔️ - -[lien du projet](...) - -Description : - -### Utilisation en environement professionnel ❌ / ✔️ +## 🌐 J'utilise des ressources -Description : +- [Doc React Native](https://reactnative.dev/docs/components-and-apis) +- [Doc React Navigation](https://reactnavigation.org/docs/getting-started) +- [chakra-ui pour le style](https://chakra-ui.com/docs/getting-started) -## 🌐 J'utilise des ressources ### Titre diff --git a/architecture/rest.md b/architecture/rest.md index afec159b..96d5a2fb 100644 --- a/architecture/rest.md +++ b/architecture/rest.md @@ -8,32 +8,68 @@ ## 🎓 J'ai compris et je peux expliquer -- les verbes HTTP ❌ / ✔️ -- les statuts HTTP ❌ / ✔️ -- les endpoints ❌ / ✔️ -- CORS ❌ / ✔️ -- la nomenclature recommandée pour les routes ❌ / ✔️ +- les verbes HTTP ✔️ +- les statuts HTTP ✔️ +- les endpoints ✔️ +- CORS ✔️ +- la nomenclature recommandée pour les routes ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ - -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) +### Un exemple personnel commenté ✔️ + +```js + +//différentes routes +router.get('/', (req, res) => { + const query = 'SELECT * FROM Carte'; + connection.query(query, (err, results) => { + if (err) { + err; + res.status(500).send('Erreur lors de la récupération des types de plat'); + } else { + res.json(results); + } + }); +}); + +router.put('/:id', (req, res) => { + const idTypesDePlat = req.params.id; + const { name } = req.body; + connection.query('UPDATE Carte = ? WHERE id_Type_de_plat = ?', [name, idTypesDePlat], err => { + if (err) { + res.status(500).send("Erreur lors de la modification d'un type de plat"); + } else { + res.sendStatus(200); + } + }); +}); + +router.delete('/:id', (req, res) => { + const { id } = req.params; + connection.query('DELETE FROM Carte WHERE id= ?', [id], err => { + if (err) { + res.status(500).send("Erreur lors de la suppression d'un type de plat"); + } else { + res.status(200).json({ + status: 'success', + deletedId: id + }); + } + }); +}); + +``` +### Utilisation dans un projet ✔️ + +[Boudu Toulouse](https://github.com/WildCodeSchool/tlse-0919-js-boudu) Description : ### Utilisation en production si applicable❌ / ✔️ -[lien du projet](...) - -Description : - ### Utilisation en environement professionnel ❌ / ✔️ -Description : - ## 🌐 J'utilise des ressources ### Titre diff --git a/development/langage-typescript.md b/development/langage-typescript.md index 5646aaa2..a95c2161 100644 --- a/development/langage-typescript.md +++ b/development/langage-typescript.md @@ -15,95 +15,27 @@ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ - -```ts -//mapping sur une enum pour rattacher un objet a une variant pour avoir différentes tailles d'avatar et responsives -export enum AvatarVariants { - Small = 'small', - Medium = 'medium', - Big = 'big', -} - -export interface ISizes { - base: string; - sm: string; - md: string; - lg: string; - xl: string; -} - -export const avatarSizeMap: Record = { - [AvatarVariants.Small]: { - base: '30px', - sm: '30px', - md: '34px', - lg: '36px', - xl: '38px', - }, - [AvatarVariants.Medium]: { - base: '36px', - sm: '36px', - md: '38px', - lg: '42px', - xl: '44px', - }, - [AvatarVariants.Big]: { - base: '50px', - sm: '60px', - md: '64px', - lg: '70px', - xl: '70px', - }, -}; - -type AvatarCustomProps = { - variant: 'small' | 'medium' | 'big'; - avatar: string | null; -}; - -const AvatarCustom = (props: AvatarCustomProps) => { - const { avatar, variant } = props; - - return ( - - ); -}; - -export default AvatarCustom; - - +### Un exemple personnel commenté ✔️ + +```tsx + //un handle change generique pour modifiier un state User + + const [user, setUser] = useState(defaultUser); + const onUserChange =

(prop: P, value: User[P]) => { + setUser({ ...user, [prop]: value }); + }; + ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ [SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ✔️ [SkillzShare](https://skillzshare.wns.wilders.dev/) -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ ```ts //exemples de types en unviers professionels diff --git a/development/react-native.md b/development/react-native.md index 159934f2..f323ae03 100644 --- a/development/react-native.md +++ b/development/react-native.md @@ -58,25 +58,23 @@ export default React.memo(GalleryRemoteImage) ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ Description : uniquement effectué en entreprise -### Utilisation en production si applicable❌ / ✔️ - -[lien du projet](...) +### Utilisation en production si applicable ✔️ Description : Eve app (bientôt disponible) -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ✔️ Description : Eve app (bientôt disponible) ## 🌐 J'utilise des ressources -[Doc React Native](https://reactnative.dev/docs/components-and-apis) -[Doc React Navigation](https://reactnavigation.org/docs/getting-started) +- [Doc React Native](https://reactnative.dev/docs/components-and-apis) +- [Doc React Navigation](https://reactnavigation.org/docs/getting-started) ### Titre - lien diff --git a/development/react.md b/development/react.md index e0a68cd4..aa98b6bf 100644 --- a/development/react.md +++ b/development/react.md @@ -17,19 +17,86 @@ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ ```tsx - //un handle change generique pour modifiier un state User - - const [user, setUser] = useState(defaultUser); - const onUserChange =

(prop: P, value: User[P]) => { - setUser({ ...user, [prop]: value }); - }; - +//mapping sur une enum pour rattacher un objet a une variant pour avoir différentes tailles d'avatar et responsives +export enum AvatarVariants { + Small = 'small', + Medium = 'medium', + Big = 'big', +} + +export interface ISizes { + base: string; + sm: string; + md: string; + lg: string; + xl: string; +} + +export const avatarSizeMap: Record = { + [AvatarVariants.Small]: { + base: '30px', + sm: '30px', + md: '34px', + lg: '36px', + xl: '38px', + }, + [AvatarVariants.Medium]: { + base: '36px', + sm: '36px', + md: '38px', + lg: '42px', + xl: '44px', + }, + [AvatarVariants.Big]: { + base: '50px', + sm: '60px', + md: '64px', + lg: '70px', + xl: '70px', + }, +}; + +type AvatarCustomProps = { + variant: 'small' | 'medium' | 'big'; + avatar: string | null; +}; + +const AvatarCustom = (props: AvatarCustomProps) => { + const { avatar, variant } = props; + + return ( + + ); +}; + +export default AvatarCustom; + ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ [SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) @@ -54,7 +121,7 @@ export default function App(): JSX.Element { [SkillzShare](https://skillzshare.wns.wilders.dev/) -### Utilisation en environement professionnel ✔️ +### Utilisation en environement professionnel ✔️ ```tsx //Description : le context de la gestion d'annonces (fonctionnalité principale) de Dmitri diff --git a/development/secu.md b/development/secu.md index 8a5fa020..33c18eef 100644 --- a/development/secu.md +++ b/development/secu.md @@ -8,10 +8,10 @@ ## 🎓 J'ai compris et je peux expliquer -- Le rôle de l'OWASP ❌ / ✔️ -- Les injections SQL ❌ / ✔️ -- XSS ❌ / ✔️ -- CRSF ❌ / ✔️ +- Le rôle de l'OWASP ✔️ +- Les injections SQL ✔️ +- XSS ✔️ +- CRSF ✔️ ## 💻 J'utilise diff --git a/devops/docker.md b/devops/docker.md index c7aa4baf..e756f18e 100644 --- a/devops/docker.md +++ b/devops/docker.md @@ -8,33 +8,160 @@ ## 🎓 J'ai compris et je peux expliquer -- la création d'une image docker ❌ / ✔️ -- l'éxécution d'un container ❌ / ✔️ -- l'orchestration de containers avec docker-compose ❌ / ✔️ +- la création d'une image docker ✔️ +- l'éxécution d'un container ✔️ +- l'orchestration de containers avec docker-compose ✔️ ## 💻 J'utilise ### Un exemple personnel commenté ❌ / ✔️ -### Utilisation dans un projet ❌ / ✔️ +```Dockerfile -[lien github](...) +FROM node:14.16-alpine -Description : +WORKDIR /app -### Utilisation en production si applicable❌ / ✔️ +COPY package*.json ./ -[lien du projet](...) +RUN npm install -Description : +COPY . ./ -### Utilisation en environement professionnel ❌ / ✔️ +``` + +docker-compose + +```yml -Description : +version: '3' +services: + db: + image: postgres:13.2 + environment: + - POSTGRES_PASSWORD=password + api: + build: . + depends_on: + - db + environment: + - TYPEORM_CONNECTION=postgres + - TYPEORM_HOST=db + - TYPEORM_PORT=5432 + - TYPEORM_DATABASE=postgres + - TYPEORM_USERNAME=postgres + - TYPEORM_PASSWORD=password + web-client: + build: ./web-client + +``` + +### Utilisation dans un projet ✔️ + +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) + + +Description : docker-compose de dev + +```yml + +version: '3' + +services: + api: + command: npm run start:watch + stdin_open: true + volumes: + - ./src:/app/src + - ./public:/app/public + ports: + - ${API_PORT}:4000 + environment: + - NODE_ENV=development + - TYPEORM_LOGGING=true + - TYPEORM_ENTITIES=dist/models/*.js + web-client: + command: npm run start + stdin_open: true + volumes: + - ./web-client:/app + ports: + - ${WEB_CLIENT_PORT}:3000 + environment: + - NODE_ENV=development + - REACT_APP_API_BASE_URL=http://localhost:${API_PORT} + + +``` + +### Utilisation en production si applicable ✔️ + +[SkillzShare](https://skillzshare.wns.wilders.dev/) + +Description : docker-compose de production + +```yml + +version: '3' + +services: + db: + restart: always + + api: + depends_on: + db: + condition: service_started + command: sh -c "npm run build && npm run start" + expose: + - 4000 + restart: always + volumes: + - public:/app/public + environment: + - NODE_ENV=production + + web-client: + depends_on: + api: + condition: service_started + command: sh -c "npm run build" + volumes: + - web-client-build:/app/build + environment: + - NODE_ENV=production + - REACT_APP_API_BASE_URL=/api + + nginx: + depends_on: + api: + condition: service_started + web-client: + condition: service_started + image: nginx:1.19.10 + restart: always + ports: + - ${GATEWAY_PORT}:80 + volumes: + - ./nginx.conf:/etc/nginx/nginx.conf + - web-client-build:/web-client-build + - public:/public + +volumes: + web-client-build: + public: + + +``` + +### Utilisation en environement professionnel ❌ / ✔️ ## 🌐 J'utilise des ressources +- [la dock](https://docs.docker.com/) +- [la dock - docker-compose](https://docs.docker.com/compose/) + ### Titre - lien diff --git a/devops/github.md b/devops/github.md index dd641eb1..91fc6a5b 100644 --- a/devops/github.md +++ b/devops/github.md @@ -18,23 +18,6 @@ ### Un exemple personnel commenté ✔️ - - - - - {/* infoTip est le bandeau informatif en haut de page */} - {infoPage.infoTip ? ( - - - - ) : null} - {/* VisitCardGenerator est le composant responsable de générer les cartes de visite */} - {infoPage.users ? ( - - - - ) : null} - ### Utilisation dans un projet ❌ / ✔️ From 53a9b0fc8d0643dc3663c9bc7b9b849dc5350207 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 10:45:43 +0200 Subject: [PATCH 17/20] git hub ok --- devops/github.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/devops/github.md b/devops/github.md index 91fc6a5b..3cfaa80a 100644 --- a/devops/github.md +++ b/devops/github.md @@ -19,29 +19,29 @@ ### Un exemple personnel commenté ✔️ -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ [lien github](https://github.com/guigzzz31/vitrine-next-material-ui) Description : dans ce projet chaque branch a un préfixe feature/ refactor/ debug/ hotFix/ suivant la nature du dev à effectuer -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ✔️ -[lien du projet](...) +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) -Description : +[SkillzShare](https://skillzshare.wns.wilders.dev/) -### Utilisation en environement professionnel ❌ / ✔️ +Utilisation d'un webhook pour que le server pull main lorsque l'on push sur main depuis notre local -Description : +### Utilisation en environement professionnel ❌ / ✔️ ## 🌐 J'utilise des ressources +-[NextJs](https://nextjs.org/) +-[Material-ui](https://material-ui.com/getting-started/installation/) ### Titre --[NextJs](https://nextjs.org/) -[Material-ui](https://material-ui.com/getting-started/installation/) - ## 🚧 Je franchis les obstacles ### Point de blocage ❌ / ✔️ From 59ad08b63336948be44a220fd8086f33235905d8 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 10:59:34 +0200 Subject: [PATCH 18/20] paas ok --- devops/paas.md | 46 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 36 insertions(+), 10 deletions(-) diff --git a/devops/paas.md b/devops/paas.md index 2ca8c9fa..a907dcc9 100644 --- a/devops/paas.md +++ b/devops/paas.md @@ -8,31 +8,57 @@ ## 🎓 J'ai compris et je peux expliquer -- ce que c'est ❌ / ✔️ -- comment deployer une application sur une PaaS ❌ / ✔️ +- ce que c'est ✔️ +- comment deployer une application sur une PaaS ✔️ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ -### Utilisation dans un projet ❌ / ✔️ +Caddyfile de notre projet -[lien github](...) +skillzshare.wns.wilders.dev { + reverse_proxy localhost:8000 -Description : + log { + output file /var/log/caddy/demo.log + } +} -### Utilisation en production si applicable❌ / ✔️ -[lien du projet](...) +staging.skillzshare.wns.wilders.dev { + reverse_proxy localhost:8001 -Description : + log { + output file /var/log/caddy/staging-demo.log + } +} + + +ops.skillzshare.wns.wilders.dev { + reverse_proxy /hooks/* localhost:9000 + + log { + output file /var/log/caddy/webhooks.log + } +} + + +### Utilisation dans un projet ✔️ + +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) + + +### Utilisation en production si applicable ✔️ + +[SkillzShare](https://skillzshare.wns.wilders.dev/) ### Utilisation en environement professionnel ❌ / ✔️ -Description : ## 🌐 J'utilise des ressources +- [caddy](https://caddyserver.com/v2) ### Titre - lien From 082c434f1f95cad25518de0e75d7314653c46806 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Thu, 15 Jul 2021 11:07:28 +0200 Subject: [PATCH 19/20] test pending --- devops/test.md | 118 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 103 insertions(+), 15 deletions(-) diff --git a/devops/test.md b/devops/test.md index 87440a7f..2d2314db 100644 --- a/devops/test.md +++ b/devops/test.md @@ -17,24 +17,112 @@ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ - -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) - -Description : - -### Utilisation en production si applicable❌ / ✔️ - -[lien du projet](...) - -Description : +Jest + +### Un exemple personnel commenté ✔️ + +```tsx + +describe('User resolvers', () => { + let testClient; + + beforeEach(async () => { + const connectionOptions = await getConnectionOptions(); + await createConnection({ + ...connectionOptions, + dropSchema: true, + entities: [ + User, + UserSession, + Article, + Community, + Diploma, + Experience, + ContentField, + LikeArticle, + CommentaireArticle, + ], + synchronize: true, + logging: false, + }); + + const { expressServer } = await getExpressServer(); + + testClient = createTestClient(expressServer); + }); + + afterEach(() => { + const conn = getConnection(); + return conn.close(); + }); + + describe('query me', () => { + let user; + + beforeEach(async () => { + user = User.create({ + pseudo: 'jesus', + password: 'ilovedevil', + email: 'jesus@god.com', + bio: 'hell yeah', + }); + await user.save(); + }); + + describe('when user is not authenticated', () => { + it('returns error', async () => { + const response = await testClient.post('/graphql').send({ + query: `{ + me { + pseudo + userID + } + } + `, + }); + expect(response.text).toMatch('You are not authenticated.'); + }); + }); + + describe('when user is authenticated', () => { + it('returns user', async () => { + const currentUserSession = UserSession.create({ user: user }); + await currentUserSession.save(); + + const response = await testClient + .post('/graphql') + .set('Cookie', [`sessionId=${currentUserSession.uuid}`]) + .send({ + query: `{ + me { + pseudo + } + } + `, + }); + + expect(JSON.parse(response.text).data).toEqual({ + me: { + pseudo: user.pseudo, + }, + }); + }); + }); + }); +}); + +``` + +### Utilisation dans un projet ✔️ + +[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet) + +### Utilisation en production si applicable ✔️ + +[SkillzShare](https://skillzshare.wns.wilders.dev/) ### Utilisation en environement professionnel ❌ / ✔️ -Description : - ## 🌐 J'utilise des ressources ### Titre From 75082bbcb3ea42c3628d61c90541897f832a5d55 Mon Sep 17 00:00:00 2001 From: guigzzz31 Date: Fri, 16 Jul 2021 09:25:47 +0200 Subject: [PATCH 20/20] test started --- devops/test.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/devops/test.md b/devops/test.md index 2d2314db..34bf16f4 100644 --- a/devops/test.md +++ b/devops/test.md @@ -10,7 +10,7 @@ - les tests unitaires ❌ / ✔️ - les mocks ❌ / ✔️ -- les tests d'integration ❌ / ✔️ +- les tests d'integration ✔️ - les tests de bout en bout (end to end) ❌ / ✔️ - le TDD ❌ / ✔️ - les tests par snapshot ❌ / ✔️ @@ -22,7 +22,7 @@ Jest ### Un exemple personnel commenté ✔️ ```tsx - +//tests d'intégration describe('User resolvers', () => { let testClient;