done

architecture/graphql.md

@@ -8,35 +8,133 @@
 
 ## 🎓 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é ✔️
+
+```ts
+//une query pour get 1 article en fonction de son ID
+  @Query(() => Article)
+  oneArticle(
+    @Ctx() { user }: { user: User | null },
+    @Arg('articleID') articleID: string
+  ): Promise<Article> {
+    if (!user) {
+      throw Error('You are not authenticated.');
+    }
+    return Article.findOne(articleID, {
+      relations: [
+        'user',
+        'likesArticle',
+        'likesArticle.user',
+        'contentFields',
+        'commentairesArticle',
+        'commentairesArticle.user',
+        'community',
+      ],
+    }) as Promise<Article>;
+  }
+
+```
+```ts
+//une mutation pour supprimer la session de connexion
+  @Mutation(() => User)
+  async deleteSession(@Ctx() { user }: { user: User | null }): Promise<User> {
+    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<User>;
+  }
+
+```
+```ts
+//une subscription ppour s'abonner à la création de nouveaux commentaires relatifs à un article
+  @Subscription({
+    topics: 'NEW_COMMENT',
+  })
+  subscribeToNewComment(
+    @Root() notificationPayload: newCommentNotificationPayload
+  ): CommentaireArticle {
+    return notificationPayload.payload;
+  }
+
+```
+
 
 ### Utilisation dans un projet ❌ / ✔️
 
-[lien github](...)
+[SkillzShare](https://github.com/WildCodeSchool/2020-11-wns-remote2-groupe5-projet)
+
+Description : voici le lien du repo de SkillzShare, le projet de l'année réalisé avec graphql
+
+### Utilisation en production si applicable ❌ / ✔️
+
+[SkillzShare](https://skillzshare.wns.wilders.dev/)
 
-Description :
+Description : la production de SkillzShare
 
-### Utilisation en production si applicable❌ / ✔️
+### Utilisation en environement professionnel ✔️
 
-[lien du projet](...)
+Développement de la partie front end de Dmitri, un projet pour un client avec l'entreprise
 
-Description :
+utilisation de graphql en milieu professionel, voici ci-dessous un exemple du fichier généré par le back pour servir le front
 
-### Utilisation en environement professionnel ❌ / ✔️
+```ts
+export const GetParentDocument = gql`
+    query GetParent($id: ID!) {
+  User(where: {id: $id}) {
+    ...UserProfile
+    ...UserRoles
+    ...UserMetadata
+    parent {
+      ...ParentProfile
+    }
+  }
+}
+    ${UserProfileFragmentDoc}
+${UserRolesFragmentDoc}
+${UserMetadataFragmentDoc}
+${ParentProfileFragmentDoc}`;
 
-Description :
+ @param baseOptions
+ @example
+
+export function useGetParentQuery(baseOptions: Apollo.QueryHookOptions<Types.GetParentQuery, Types.GetParentQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<Types.GetParentQuery, Types.GetParentQueryVariables>(GetParentDocument, options);
+      }
+export function useGetParentLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Types.GetParentQuery, Types.GetParentQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<Types.GetParentQuery, Types.GetParentQueryVariables>(GetParentDocument, options);
+        }
+export type GetParentQueryHookResult = ReturnType<typeof useGetParentQuery>;
+export type GetParentLazyQueryHookResult = ReturnType<typeof useGetParentLazyQuery>;
+export type GetParentQueryResult = Apollo.QueryResult<Types.GetParentQuery, Types.GetParentQueryVariables>;
+
+```
 
 ## 🌐 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

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<Props> = ({ 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 <Box style={[styles.layout, wrapperStyle]} >
+		{bgImg && <Box pos='absolute' style={[styles.backgroundImageContainer]}  >
+			<ImageBackground source={bgImg} style={[styles.backgroundImage]} resizeMode='cover' />
+			<Box pos='absolute' fullWidth h='100%'>
+				<EveLinearGradient
+					colors={[chroma(theme.colors.background!).alpha(0).hex(), chroma(theme.colors.background!).alpha(0.4).hex()]}
+					start={{ x: 1, y: 0 }}
+					end={{ x: 1, y: 1 }}
+					style={{ height: '100%' }}
+				/>
+			</Box>
+		</Box>}
+		<TouchableOpacity style={styles.back} onPress={_onPressBack}>
+			<EveIcon name="chevron-left" size={32} color={noBack ? 'transparent' : theme.colors.textPrimary} />
+		</TouchableOpacity>
+		{title &&
+			<Box style={styles.title}>
+				{avatar && <EveAvatar {...avatar} />}
+				<EveText variant={titleVariant ?? "h1"} numberOfLines={1} fontSize={title?.length > 16 ? 18 : 28}>{title}</EveText>
+			</Box>
+		}
+		<Box style={[styles.action, actionStyle]}>
+			{action}
+		</Box>
+	</Box>
+}
+
+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
 

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