From 5b9a0e6b34e7de91e998d49220260c58b30f9e39 Mon Sep 17 00:00:00 2001
From: Eric NGUYEN <enguyen@techform.fr>
Date: Thu, 10 Nov 2022 15:37:56 +0100
Subject: [PATCH] Update documentation

---
 README.md                                     |   5 +-
 docs/#Project/Pages/ComponentStructure.drawio |   4 +-
 docs/Tutorial/Pages/PremierComposantReact.md  | 171 +++++++++++-------
 3 files changed, 115 insertions(+), 65 deletions(-)

diff --git a/README.md b/README.md
index bc56866..0a7dc77 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,7 @@ An svg layout designer.
 
 Requirements :
 - `node` >= 16.x (>= 17.x to run vitest tests)
-- `npm`
-- pnpm (optional) reduce `node_modules` folder size by using symlinks
+- `npm` (included with node)
 - [`git-lfs`](https://git-lfs.github.com/) (in order to clone the documentation)
 - `dotnet` (optional) used for api test
 
@@ -18,10 +17,12 @@ Requirements :
 # Recommanded tools for developers
 
 - [VSCode](https://code.visualstudio.com/)
+- [pnpm](https://pnpm.io/)
 - [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
 - [Typescript React code snippets](https://marketplace.visualstudio.com/items?itemName=infeng.vscode-react-typescript)
 - [vscode-tailwindcss](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
 - [vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [vscode-drawio](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
 
 
 # Develop
diff --git a/docs/#Project/Pages/ComponentStructure.drawio b/docs/#Project/Pages/ComponentStructure.drawio
index 0f4f484..9d3c594 100644
--- a/docs/#Project/Pages/ComponentStructure.drawio
+++ b/docs/#Project/Pages/ComponentStructure.drawio
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d84dbb36af579fc6909ad41526c27e8a38d9de4a8d12a239e0c354d85889e378
-size 24027
+oid sha256:a11fc5b268366176f1c42af46e08ba368dbbf97e6a1f687f97643f2868508640
+size 23871
diff --git a/docs/Tutorial/Pages/PremierComposantReact.md b/docs/Tutorial/Pages/PremierComposantReact.md
index 6d8ca2a..60e8b1f 100644
--- a/docs/Tutorial/Pages/PremierComposantReact.md
+++ b/docs/Tutorial/Pages/PremierComposantReact.md
@@ -127,7 +127,6 @@ Allons donc dans le composant `MainMenu.tsx` et analysons le contenu du bouton `
       return (
         <div className='absolute bg-blue-50 p-12 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
           <button type="button" className='mainmenu-btn' onClick={() => {
-            setWindowState(WindowState.Loading);
             props.newEditor();
           }}>Start from scratch</button>
           <button type="button" className='mainmenu-btn' onClick={() => setWindowState(WindowState.Load)}>Load a configuration file</button>
@@ -139,35 +138,42 @@ On trouve la fonction `onClick` suivante :
 
 ```tsx
 // MainMenu.tsx
-{
-  setWindowState(WindowState.Loading);
+<button type="button" className='mainmenu-btn' onClick={() => {
   props.newEditor();
-}
+}}>
 ```
 
-Aha! On trouve une fonction qui change d'état. Cependant ! On découvre aussi qu'elle appelle une fonction `newEditor`.
+On trouve la 
 
-Instinctivement, vu que l'on cherche une fonction qui permet de changer d'état, on pourrait croire que c'est `setWindowState` qui gère mais on va vite comprendre que ce n'est pas elle.
-
-Pour rappel `setWindowState` est un setteur d'état, et qu'elle est définie **dans** le composant. Autrement dit, elle ne gère pas l'état de l'application. De plus, un indice indique que le l'état du menu passe de `Main` à `Loading`. Elle ne fait donc que changer sa propre vue pour passer à celle d'une animation de loading que l'on peut voir plus haut dans le `switch`.
-
-`newEditor` étant une fonction donnée par `props`, doit donc correspondre à la fonctionalité que l'on veut renveser.
+`newEditor` étant une fonction donnée par `props`, doit donc correspondre à la fonctionalité que l'on veut renverser.
 
 Regardons donc le composant parent de `MainMenu`: `App`.
 
 ```tsx
 // App.tsx
 ...
-      <MainMenu
-        newEditor={() => NewEditor(
-          setEditorState, setLoaded
-        )}
-        loadEditor={(files: FileList | null) => LoadEditor(
-          files,
-          setEditorState,
-          setLoaded
-        )}
-      />
+return (
+  <div
+    ref={appRef}
+    className='App mainmenu-bg'
+  >
+    <MainMenu
+      newEditor={() => {
+        setAppState(AppState.Loading);
+        NewEditor(
+          editorState,
+          (newEditor) => setEditorState(newEditor),
+          () => setAppState(AppState.Loaded)
+        );
+      }}
+      loadEditor={(files: FileList | null) => LoadEditor(
+        files,
+        setEditorState,
+        setAppState
+      )}
+    />
+  </div>
+);
 ...
 ```
 
@@ -175,9 +181,19 @@ Cette fonction `newEditor` appelle donc une autre fonction `NewEditor`.
 
 ```tsx
 export function NewEditor(
-  setEditorState: Dispatch<SetStateAction<IEditorState>>,
-  setLoaded: Dispatch<SetStateAction<boolean>>
+  editorState: IEditorState,
+  setEditorState: (newState: IEditorState) => void,
+  enableLoaded: () => void
 ): void {
+  if (DISABLE_API) {
+    enableLoaded();
+  }
+
+  if (editorState.configuration.APIConfiguration !== undefined) {
+    enableLoaded();
+    return;
+  }
+
   // Fetch the configuration from the API
   FetchConfiguration()
     .then((configuration: IConfiguration) => {
@@ -185,44 +201,77 @@ export function NewEditor(
       const editorState: IEditorState = GetDefaultEditorState(configuration);
 
       setEditorState(editorState);
-      setLoaded(true);
+      enableLoaded();
     }, (error) => {
       console.debug('[NewEditor] Could not fetch resource from API. Using default.', error);
-      setLoaded(true);
+      enableLoaded();
     });
 }
 ```
 
-Cette fonction à l'air assez compliquée, mais on sait qu'elle utilise `setEditorState` et `setLoaded`. Et c'est tout ce qui nous intéresse.
+Cette fonction à l'air assez compliquée, mais on sait qu'elle utilise `setEditorState` et `enableLoaded()`. Et c'est tout ce qui nous intéresse. On observe dans `App.tsx` que `setEditorState` sert à changer l'état de `editorState` et que `enableLoaded` est appelle `setAppState` qui lui sert à changer l'état de `appState`.
 
-Donc pour renverser l'état de `App` il faut appeler soit `setEditorState` ou soit `setLoaded`. En analysant un peu plus près `App.tsx`, on remarque l'évidante condition permettant d'afficher ou non le menu principal :
+En analysant un peu plus près `App.tsx`, on remarque l'évidante condition permettant d'afficher ou non le menu principal :
 
 ```tsx
 // App.tsx
-  ...
-  if (isLoaded) {
-    return (
-      <div>
-        <Editor
-          (...)
-        />
-      </div>
-    );
+switch (appState) {
+    case AppState.Loaded:
+      return (
+        <div
+          ref={appRef}
+          className='App'
+        >
+          <Editor
+            root={props.root}
+            configuration={editorState.configuration}
+            history={editorState.history}
+            historyCurrentStep={editorState.historyCurrentStep}
+          />
+        </div>
+      );
+    case AppState.Loading:
+      return (
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+            <Loader />
+          </div>
+        </div>
+      );
+    default:
+      return (
+        <div
+          ref={appRef}
+          className='App mainmenu-bg'
+        >
+          <MainMenu
+            newEditor={() => {
+              setAppState(AppState.Loading);
+              NewEditor(
+                editorState,
+                (newEditor) => setEditorState(newEditor),
+                () => setAppState(AppState.Loaded)
+              );
+            }}
+            loadEditor={(files: FileList | null) => LoadEditor(
+              files,
+              setEditorState,
+              setAppState
+            )}
+          />
+        </div>
+      );
   }
-
-  return (
-    <div className='mainmenu-bg'>
-      <MainMenu
-        (...)
-      />
-    </div>
 ```
 
-Ainsi, on sait qu'il faut juste appeler `setLoaded` le setteur d'état de `isLoaded`: 
+Ainsi, on sait qu'il faut appeler `setAppState` le setteur d'état de `appState`: 
 
 ```tsx
 // App.tsx
-const [isLoaded, setLoaded] = useState<boolean>(false);
+const [appState, setAppState] = useState<AppState>(FAST_BOOT);
 ```
 
 Cependant comment appeler cette fonction depuis `Home` ? Et bien nous allons utiliser les `props` pour passer la fonction en dessous.
@@ -247,7 +296,7 @@ export function Home({ goHome }: IHomeProps): JSX.Element {
 }
 ```
 
-Note: vous pouvez utiliser `Home(props: IHomeProps)` et appeler `props.goHome` comme tout le reste du projet, mais le destructuring d'objet est autorisé.
+Note: vous pouvez utiliser `Home(props: IHomeProps)` et appeler `props.goHome` comme tout le reste du projet au lieu de le destructurer en `{ goHome }`, mais le destructuring d'objet est autorisé (et dans certains cas, c'est mieux avec).
 
 Home est utilisé dans les composants Bar, UI, et Editor avant d'être appelé dans App. Il faut faire la même chose, ajouter la fonction dans les props et l'appeler dans le composant :
 
@@ -270,25 +319,25 @@ export function Bar(props: IBarProps): JSX.Element {
 ```
 *Faites la même chose pour UI et Editor.*
 
-Enfin dans `App.tsx`, créez la fonction permettant de changer `isLoaded` vers `false`:
+Enfin dans `App.tsx`, créez la fonction permettant de changer `appState` vers `AppState.MainMenu`:
 
 ```tsx
   ...
-  if (isLoaded) {
-    return (
-      <div>
-        <Editor
-          root={props.root}
-          configuration={editorState.configuration}
-          history={editorState.history}
-          historyCurrentStep={editorState.historyCurrentStep}
-          goHome={() => {
-            setLoaded(false);
-          }}
-        />
-      </div>
-    );
-  }
+  case AppState.Loaded:
+      return (
+        <div
+          ref={appRef}
+          className='App'
+        >
+          <Editor
+            root={props.root}
+            configuration={editorState.configuration}
+            history={editorState.history}
+            historyCurrentStep={editorState.historyCurrentStep}
+            goHome={() => setAppState(AppState.MainMenu)}
+          />
+        </div>
+      );
   ...
 ```