diff --git a/app/components/PrevNextLinks.tsx b/app/components/PrevNextLinks.tsx index c621d27..93b4f50 100644 --- a/app/components/PrevNextLinks.tsx +++ b/app/components/PrevNextLinks.tsx @@ -8,123 +8,102 @@ import { Link } from "@/components/Link"; import clsx from "clsx"; function ArrowIcon(props: JSX.IntrinsicElements["svg"]) { - return ( - - ); + return ( + + ); } type PageLinkProps = Omit & { - title: string; - href: string; - dir?: "previous" | "next"; + title: string; + href: string; + dir?: "previous" | "next"; }; function PageLink(props: PageLinkProps) { - const getPageCategory = () => - navigation.find((section) => { - return section.links.some( - (link) => - link.href === props.href || - link.subitems.some((subitem) => subitem.href === props.href), - ); - }); + const getPageCategory = () => + navigation.find((section) => { + return section.links.some( + (link) => link.href === props.href || link.subitems.some((subitem) => subitem.href === props.href), + ); + }); - return ( -
-
- {props.dir === "next" ? "Suivant" : "Précédent"} -
-
- -

- {getPageCategory() && ( - - {getPageCategory()?.title} - - )} - {props.title} -

- - -
-
- ); + return ( +
+
{props.dir === "next" ? "Suivant" : "Précédent"}
+
+ +

+ {getPageCategory() && ( + {getPageCategory()?.title} + )} + {props.title} +

+ + +
+
+ ); } export function PrevNextLinks() { - const pageContext = usePageContext(); + const pageContext = usePageContext(); - const allLinks = navigation - .sort((a, b) => { - // positions order (for sorting): - // 1. start - // 2. auto | undefined - // 3. end + const allLinks = navigation + .sort((a, b) => { + // positions order (for sorting): + // 1. start + // 2. auto | undefined + // 3. end - if (a.position === "start" && b.position !== "start") return -1; - if (a.position !== "start" && b.position === "start") return 1; + if (a.position === "start" && b.position !== "start") return -1; + if (a.position !== "start" && b.position === "start") return 1; - if (a.position === "end" && b.position !== "end") return 1; - if (a.position !== "end" && b.position === "end") return -1; + if (a.position === "end" && b.position !== "end") return 1; + if (a.position !== "end" && b.position === "end") return -1; - if (a.position === "auto" && b.position !== "auto") return -1; - if (a.position !== "auto" && b.position === "auto") return 1; + if (a.position === "auto" && b.position !== "auto") return -1; + if (a.position !== "auto" && b.position === "auto") return 1; - if (a.position === undefined && b.position !== undefined) return -1; - if (a.position !== undefined && b.position === undefined) return 1; - return 0; - }) - .flatMap((section) => section.links) - .flatMap((link) => { - return link.subitems ? [link, ...link.subitems] : link; - }); + if (a.position === undefined && b.position !== undefined) return -1; + if (a.position !== undefined && b.position === undefined) return 1; + return 0; + }) + .flatMap((section) => section.links) + .flatMap((link) => { + return link.subitems ? [link, ...link.subitems] : link; + }); - const getNeighboringLinks = () => { - const linkIndex = allLinks.findIndex( - (link) => link.href === pageContext.urlPathname, - ); - if (linkIndex === -1) return [null, null]; + const getNeighboringLinks = () => { + const linkIndex = allLinks.findIndex((link) => link.href === pageContext.urlPathname); + if (linkIndex === -1) return [null, null]; - const previousPage = allLinks[linkIndex - 1] || null; - let nextPage = allLinks[linkIndex + 1] || null; + const previousPage = allLinks[linkIndex - 1] || null; + let nextPage = allLinks[linkIndex + 1] || null; - if (nextPage?.href === pageContext.urlPathname) { - nextPage = allLinks[linkIndex + 2] || null; - } + if (nextPage?.href === pageContext.urlPathname) { + nextPage = allLinks[linkIndex + 2] || null; + } - return [previousPage, nextPage]; - }; + return [previousPage, nextPage]; + }; - if (getNeighboringLinks().length === 0) return null; + if (getNeighboringLinks().length === 0) return null; - return ( -
- {getNeighboringLinks()[0] && ( - - )} + return ( +
+ {getNeighboringLinks()[0] && } - {getNeighboringLinks()[1] && ( - - )} -
- ); + {getNeighboringLinks()[1] && ( + + )} +
+ ); } diff --git a/app/components/Search.tsx b/app/components/Search.tsx index 17bb85c..b5c6210 100644 --- a/app/components/Search.tsx +++ b/app/components/Search.tsx @@ -1,13 +1,7 @@ import type { SearchResult } from "@/services/FlexSearchService"; import type { JSX, Accessor, Setter } from "solid-js"; -import { - createContext, - useContext, - For, - createEffect, - createSignal, -} from "solid-js"; +import { createContext, useContext, For, createEffect, createSignal } from "solid-js"; import { Highlighter } from "solid-highlight-words"; import { useDebounce } from "@/hooks/useDebounce"; @@ -18,334 +12,305 @@ import { useId } from "@/hooks/useId"; import clsx from "clsx"; const SearchContext = createContext<{ - query: Accessor; - close: () => void; - results: Accessor; - isLoading: Accessor; - isOpened: Accessor; - setQuery: Setter; - setIsOpened: Setter; - setIsLoading: Setter; - setResults: Setter; + query: Accessor; + close: () => void; + results: Accessor; + isLoading: Accessor; + isOpened: Accessor; + setQuery: Setter; + setIsOpened: Setter; + setIsLoading: Setter; + setResults: Setter; }>({ - query: () => "", - close: () => {}, - results: () => [], - isLoading: () => false, - isOpened: () => false, - setQuery: () => {}, - setIsOpened: () => {}, - setIsLoading: () => {}, - setResults: () => {}, + query: () => "", + close: () => {}, + results: () => [], + isLoading: () => false, + isOpened: () => false, + setQuery: () => {}, + setIsOpened: () => {}, + setIsLoading: () => {}, + setResults: () => {}, }); function SearchIcon(props: JSX.IntrinsicElements["svg"]) { - return ( - - ); + return ( + + ); } function LoadingIcon(props: JSX.IntrinsicElements["svg"]) { - const id = useId(); + const id = useId(); - return ( - - ); + return ( + + ); } function SearchInput() { - const { close, setQuery, query, isLoading } = useContext(SearchContext); + const { close, setQuery, query, isLoading } = useContext(SearchContext); - return ( -
- - { - if (event.key === "Escape") { - // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the - // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI. - if (document.activeElement instanceof HTMLElement) { - document.activeElement.blur(); - } + return ( +
+ + { + if (event.key === "Escape") { + // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the + // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI. + if (document.activeElement instanceof HTMLElement) { + document.activeElement.blur(); + } - close(); - } - }} - value={query()} - onInput={(event) => { - const { value } = event.currentTarget; - setQuery(value); - }} - /> - {isLoading() && ( -
- -
- )} -
- ); + close(); + } + }} + value={query()} + onInput={(event) => { + const { value } = event.currentTarget; + setQuery(value); + }} + /> + {isLoading() && ( +
+ +
+ )} +
+ ); } function HighlightQuery(props: { text: string; query: string }) { - return ( - - ); + return ( + + ); } function SearchResultItem(props: { result: SearchResult; query: string }) { - const { close } = useContext(SearchContext); - const id = useId(); + const { close } = useContext(SearchContext); + const id = useId(); - const getHierarchy = (): string[] => { - const sectionTitle = navigation.find((section) => { - return section.links.find( - (link) => link.href === props.result.url.split("#")[0], - ); - })?.title; + const getHierarchy = (): string[] => { + const sectionTitle = navigation.find((section) => { + return section.links.find((link) => link.href === props.result.url.split("#")[0]); + })?.title; - return [sectionTitle, props.result.pageTitle].filter( - (x): x is string => typeof x === "string", - ); - }; + return [sectionTitle, props.result.pageTitle].filter((x): x is string => typeof x === "string"); + }; - return ( -
  • { - if (event.key === "Enter") { - navigate(props.result.url); - close(); - } - }} - onClick={() => { - navigate(props.result.url); - close(); - }} - > - - {getHierarchy().length > 0 && ( - - )} -
    • - ); + const handleNavigate = (url: string) => { + navigate(`/${url}`.replace(/\/+/g, "/")); + close(); + }; + + return ( +
  • { + if (event.key === "Enter") handleNavigate(props.result.url); + }} + onClick={() => handleNavigate(props.result.url)} + > + + {getHierarchy().length > 0 && ( + + )} +
    • + ); } function SearchResults() { - const { results, query } = useContext(SearchContext); + const { results, query } = useContext(SearchContext); - if (results().length === 0) { - return ( -

    - Aucun résultat pour “ - {query()} - ” -

    - ); - } + if (results().length === 0) { + return ( +

    + Aucun résultat pour “ + {query()} + ” +

    + ); + } - return ( -
      - - {(result) => ( -
    • - -
      • - )} -       -
    - ); + return ( +
      + + {(result) => ( +
    • + +
      • + )} +       +
    + ); } function SearchDialog(props: { class?: string }) { - const { close, isOpened, setIsOpened, results } = useContext(SearchContext); + const { close, isOpened, setIsOpened, results } = useContext(SearchContext); - createEffect(() => { - if (isOpened()) return; + createEffect(() => { + if (isOpened()) return; - function onKeyDown(event: KeyboardEvent) { - if (event.key === "k" && (event.metaKey || event.ctrlKey)) { - event.preventDefault(); - setIsOpened(true); - } - } + function onKeyDown(event: KeyboardEvent) { + if (event.key === "k" && (event.metaKey || event.ctrlKey)) { + event.preventDefault(); + setIsOpened(true); + } + } - window.addEventListener("keydown", onKeyDown); + window.addEventListener("keydown", onKeyDown); - return () => { - window.removeEventListener("keydown", onKeyDown); - }; - }, [isOpened, setIsOpened]); + return () => { + window.removeEventListener("keydown", onKeyDown); + }; + }, [isOpened, setIsOpened]); - const handleClickOutside = (event: MouseEvent) => { - const { target, currentTarget } = event; + const handleClickOutside = (event: MouseEvent) => { + const { target, currentTarget } = event; - if (target instanceof Node && currentTarget instanceof Node) { - if (target === currentTarget) close(); - } - }; + if (target instanceof Node && currentTarget instanceof Node) { + if (target === currentTarget) close(); + } + }; - return ( - <> - -
    + return ( + <> + +
    -
    { - if (event.key === "Escape") close(); - }} - > - -
    event.preventDefault()}> - -
    - {results().length > 0 && } -
    - -
    -
    -
    - - ); +
    { + if (event.key === "Escape") close(); + }} + > + +
    event.preventDefault()}> + +
    + {results().length > 0 && } +
    + +
    +
    +
    + + ); } export function Search() { - const [results, setResults] = createSignal([]); - const [modifierKey, setModifierKey] = createSignal(); - const [isLoading, setIsLoading] = createSignal(false); - const [isOpened, setIsOpened] = createSignal(false); - const [query, setQuery] = createSignal(""); + const [results, setResults] = createSignal([]); + const [modifierKey, setModifierKey] = createSignal(); + const [isLoading, setIsLoading] = createSignal(false); + const [isOpened, setIsOpened] = createSignal(false); + const [query, setQuery] = createSignal(""); - const debouncedQuery = useDebounce(query, 300); + const debouncedQuery = useDebounce(query, 300); - const onSearch = async (query: string) => { - const response = await fetch(`/search?query=${query}`); - if (!response.ok) { - throw new Error("Network response was not ok"); - } - const data = await response.json(); - return data; - }; + const onSearch = async (query: string) => { + const response = await fetch(`/search?query=${query}`); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const data = await response.json(); + return data; + }; - createEffect(() => { - const platform = navigator.userAgentData?.platform || navigator.platform; - setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(platform) ? "⌘" : "Ctrl "); - }, []); + createEffect(() => { + const platform = navigator.userAgentData?.platform || navigator.platform; + setModifierKey(/(Mac|iPhone|iPod|iPad)/i.test(platform) ? "⌘" : "Ctrl "); + }, []); - createEffect(() => { - const query = debouncedQuery(); + createEffect(() => { + const query = debouncedQuery(); - if (query.length === 0) { - setIsLoading(false); - setResults([]); - return; - } + if (query.length === 0) { + setIsLoading(false); + setResults([]); + return; + } - setIsLoading(true); + setIsLoading(true); - onSearch(query) - .then(setResults) - .finally(() => setIsLoading(false)); - }); + onSearch(query) + .then(setResults) + .finally(() => setIsLoading(false)); + }); - return ( - setIsOpened(false), - results, - isLoading, - isOpened, - setQuery, - setIsOpened, - setIsLoading, - setResults, - }} - > - - - - ); + return ( + setIsOpened(false), + results, + isLoading, + isOpened, + setQuery, + setIsOpened, + setIsLoading, + setResults, + }} + > + + + + ); } diff --git a/app/pages/certifications/dwwm/at2/cp7/+Page.mdx b/app/pages/certifications/dwwm/at2/cp7/+Page.mdx index d6c9c68..d6b04cb 100644 --- a/app/pages/certifications/dwwm/at2/cp7/+Page.mdx +++ b/app/pages/certifications/dwwm/at2/cp7/+Page.mdx @@ -30,39 +30,43 @@ Le design pattern MVC est un modèle d'architecture logicielle qui sépare les d - **Contrôleur** : fait le lien entre le modèle et la vue. Il contient la logique métier de l'application. - Il existe de nombreux schémas qui expliquent le design pattern MVC mais ils ne sont pas tous corrects. - Enfin, si, ils sont corrects... mais certains ne s'appliquent pas à tous les frameworks et architectures. + Il existe de nombreux schémas qui expliquent le design pattern MVC mais ils ne sont pas tous corrects. Enfin, si, ils + sont corrects... mais certains ne s'appliquent pas à tous les frameworks et architectures. Pour t'aider à mieux te représenter un schéma MVC avec les ordres de flux de données et de contrôle : -Schéma MVC pour une application web basique +Schéma MVC pour une application web basique La vue ne retourne pas directement au client car elle doit passer par le contrôleur. On ne s'en rend pas forcément compte, mais la vue est généralement générée par le contrôleur via un moteur de template _(EJS, Twig, etc.)_. - Une fois le HTML généré, le contrôleur s'occupe de l'envoyer dans la réponse HTTP au client. - C'est ce qui permet de garder une séparation entre la logique métier et l'interface utilisateur. +Une fois le HTML généré, le contrôleur s'occupe de l'envoyer dans la réponse HTTP au client. + C'est ce qui permet de garder une séparation entre la logique métier et l'interface utilisateur. + Le concept est simple : chaque partie de l'application a un **rôle bien défini** et ne doit pas empiéter sur le rôle des autres. - Dans la majorité des cas, les middlewares s'exécutent avant le contrôleur même si on peut en avoir à différents moments de la circulation de la donnée. - Si tu as déjà utilisé Express, tu as probablement déjà utilisé un middleware pour vérifier si l'utilisateur est connecté avant de lui afficher une page qui est réservée aux utilisateurs connectés. + Dans la majorité des cas, les middlewares s'exécutent avant le contrôleur même si on peut en avoir à différents + moments de la circulation de la donnée. Si tu as déjà utilisé Express, tu as probablement déjà utilisé un middleware + pour vérifier si l'utilisateur est connecté avant de lui afficher une page qui est réservée aux utilisateurs + connectés. D'après toi, est-ce que React doit être considéré comme la vue dans le design pattern MVC ? La réponse est **non** ! - React est une bibliothèque _(pas une "librarie" et encore moins un framework ⚠️)_ JavaScript qui permet de créer des interfaces utilisateur, mais elle n'est pas liée de manière directe à un serveur. - Certes, on va consommer une API pour récupérer des données, mais React n'est que le réceptacle de ces données côté client _(navigateur)_. +React est une bibliothèque _(pas une "librarie" et encore moins un framework ⚠️)_ JavaScript qui permet de créer des interfaces utilisateur, mais elle n'est pas liée de manière directe à un serveur. + Certes, on va consommer une API pour récupérer des données, mais React n'est que le réceptacle de ces données côté client _(navigateur)_. + +On va donc faire simple : on parlera plutôt d'une architecture "client-serveur" avec React côté client et notre API côté serveur. + Mais ça n'empêche pas que ton API puisse être une API REST _(ou GraphQL)_ qui respecte le design pattern MVC ! + Tout dépendra de si tu demandes dans ton serveur back-end de retourner une vue _(HTML)_ au navigateur. - On va donc faire simple : on parlera plutôt d'une architecture "client-serveur" avec React côté client et notre API côté serveur. - Mais ça n'empêche pas que ton API puisse être une API REST _(ou GraphQL)_ qui respecte le design pattern MVC ! - Tout dépendra de si tu demandes dans ton serveur back-end de retourner une vue _(HTML)_ au navigateur. ## 🧑‍⚖️ Règles et conventions de nommage @@ -73,15 +77,15 @@ Si tu fais un projet personnel, tu peux définir les tiennes, du moment que tu e Pense à être cohérent en ce qui concerne la langue utilisée. - - Évite de mélanger plusieurs langues dans tes nommages. - Si tu choisis de travailler en français, reste en français. - Si tu choisis de travailler en anglais, reste en anglais. - + + Évite de mélanger plusieurs langues dans tes nommages. Si tu choisis de travailler en français, reste en français. Si + tu choisis de travailler en anglais, reste en anglais. + - D'ailleurs, je te recommande chaudement de travailler en anglais ne serait-ce que pour te familiariser avec la langue de Shakespeare qui est, on le rappelle, la langue la plus répandue dans le monde de l'informatique. +D'ailleurs, je te recommande chaudement de travailler en anglais ne serait-ce que pour te familiariser avec la langue de Shakespeare qui est, on le rappelle, la langue la plus répandue dans le monde de l'informatique. + +Tu as évidemment le droit d'utiliser des traducteurs en ligne pour t'aider à trouver le bon mot _(ou la bonne expression)_, on ne te demande pas d'être bilingue ! - Tu as évidemment le droit d'utiliser des traducteurs en ligne pour t'aider à trouver le bon mot _(ou la bonne expression)_, on ne te demande pas d'être bilingue ! Au delà de la langue utilisée, on va également parler de la syntaxe des noms de fichiers, dossiers, classes, méthodes, variables, etc. @@ -117,9 +121,10 @@ Si on prend l'exemple d'un formulaire d'inscription où nous vérifions que l'ut Si je te parle de client HTTP, tu me réponds... ? [Bruno](https://www.usebruno.com/) ? [Postman](https://www.postman.com/) ? [Insomnia](https://insomnia.rest/) ? - Bingo ! 🎉 +Bingo ! 🎉 + +Utiliser un client HTTP comme Bruno, Postman ou Insomnia te permettra de tester facilement les routes de ton API, et de vérifier que les données que tu envoies sont bien traitées par ton serveur. - Utiliser un client HTTP comme Bruno, Postman ou Insomnia te permettra de tester facilement les routes de ton API, et de vérifier que les données que tu envoies sont bien traitées par ton serveur. ### 🧪 Les tests unitaires diff --git a/app/public/images/patterns/mvc.webp b/app/public/images/patterns/mvc.webp new file mode 100644 index 0000000..29311f0 Binary files /dev/null and b/app/public/images/patterns/mvc.webp differ