add training component demo

EyeSeeTea · Dec 5, 2024 · cdc3bdc · cdc3bdc
1 parent 33fc8b4
commit cdc3bdc
Show file tree

Hide file tree

Showing 10 changed files with 3,532 additions and 133 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-26T10:58:19.149Z\n"
-"PO-Revision-Date: 2024-06-26T10:58:19.149Z\n"
+"POT-Creation-Date: 2024-12-05T02:15:06.571Z\n"
+"PO-Revision-Date: 2024-12-05T02:15:06.571Z\n"
 
 msgid "Add"
 msgstr ""
@@ -25,6 +25,3 @@ msgstr ""
 
 msgid "Detail page"
 msgstr ""
-
-msgid "Section"
-msgstr ""
diff --git a/i18n/es.po b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-06-26T10:58:19.149Z\n"
+"POT-Creation-Date: 2024-12-05T02:15:06.571Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -26,5 +26,5 @@ msgstr "Hola {{name}}"
 msgid "Detail page"
 msgstr ""
 
-msgid "Section"
-msgstr "Sección"
+#~ msgid "Section"
+#~ msgstr "Sección"
diff --git a/package.json b/package.json
@@ -32,12 +32,13 @@
         "purify-ts-extra-codec": "0.6.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "5.2.0",
+        "react-router-dom": "5.3.4",
         "real-cancellable-promise": "^1.1.2",
         "styled-components": "6.1.11",
         "styled-jsx": "^5.1.6",
         "typed-immutable-map": "^0.1.1",
-        "zustand": "^4.3.7"
+        "zustand": "^4.3.7",
+        "training-component": "1.5.4"
     },
     "devDependencies": {
         "@babel/core": "^7.0.0-0",

diff --git a/src/utils/tests.tsx b/src/utils/tests.tsx
@@ -4,9 +4,11 @@ import { ReactNode } from "react";
 import { AppContext, AppContextState } from "$/webapp/contexts/app-context";
 import { getTestCompositionRoot } from "$/CompositionRoot";
 import { createAdminUser } from "$/domain/entities/__tests__/userFixtures";
+import { D2Api } from "@eyeseetea/d2-api/2.36";
 
 export function getTestContext() {
     const context: AppContextState = {
+        api: {} as D2Api,
         currentUser: createAdminUser(),
         compositionRoot: getTestCompositionRoot(),
     };

diff --git a/src/webapp/contexts/app-context.ts b/src/webapp/contexts/app-context.ts
@@ -1,10 +1,12 @@
 import React, { useContext } from "react";
 import { CompositionRoot } from "$/CompositionRoot";
 import { User } from "$/domain/entities/User";
+import { D2Api } from "@eyeseetea/d2-api/2.36";
 
 export interface AppContextState {
     currentUser: User;
     compositionRoot: CompositionRoot;
+    api: D2Api;
 }
 
 export const AppContext = React.createContext<AppContextState | null>(null);

diff --git a/src/webapp/pages/app/App.tsx b/src/webapp/pages/app/App.tsx
@@ -14,13 +14,15 @@ import { Router } from "$/webapp/pages/Router";
 import "./App.css";
 import muiThemeLegacy from "./themes/dhis2-legacy.theme";
 import { muiTheme } from "./themes/dhis2.theme";
+import { D2Api } from "@eyeseetea/d2-api/2.36";
 
 export interface AppProps {
     compositionRoot: CompositionRoot;
+    api: D2Api;
 }
 
 function App(props: AppProps) {
-    const { compositionRoot } = props;
+    const { api, compositionRoot } = props;
     const [showShareButton, setShowShareButton] = useState(false);
     const [loading, setLoading] = useState(true);
     const [appContext, setAppContext] = useState<AppContextState | null>(null);
@@ -31,12 +33,12 @@ function App(props: AppProps) {
             const currentUser = await compositionRoot.users.getCurrent.execute().toPromise();
             if (!currentUser) throw new Error("User not logged in");
 
-            setAppContext({ currentUser, compositionRoot });
+            setAppContext({ api, currentUser, compositionRoot });
             setShowShareButton(isShareButtonVisible);
             setLoading(false);
         }
         setup();
-    }, [compositionRoot]);
+    }, [api, compositionRoot]);
 
     if (loading) return null;
 

diff --git a/src/webapp/pages/app/Dhis2App.tsx b/src/webapp/pages/app/Dhis2App.tsx
@@ -29,12 +29,12 @@ export function Dhis2App(_props: {}) {
             );
         }
         case "loaded": {
-            const { baseUrl, compositionRoot } = compositionRootRes.data;
+            const { api, baseUrl, compositionRoot } = compositionRootRes.data;
             const config = { baseUrl, apiVersion: 30 };
 
             return (
                 <Provider config={config}>
-                    <App compositionRoot={compositionRoot} />
+                    <App api={api} compositionRoot={compositionRoot} />
                 </Provider>
             );
         }
@@ -44,6 +44,7 @@ export function Dhis2App(_props: {}) {
 type Data = {
     compositionRoot: CompositionRoot;
     baseUrl: string;
+    api: D2Api;
 };
 
 async function getData(): Promise<CompositionRootResult> {
@@ -60,7 +61,7 @@ async function getData(): Promise<CompositionRootResult> {
     configI18n(userSettings);
 
     try {
-        return { type: "loaded", data: { baseUrl, compositionRoot } };
+        return { type: "loaded", data: { api, baseUrl, compositionRoot } };
     } catch (err) {
         return { type: "error", error: { baseUrl, error: err as Error } };
     }

diff --git a/src/webapp/pages/app/__tests__/App.spec.tsx b/src/webapp/pages/app/__tests__/App.spec.tsx
@@ -3,6 +3,7 @@ import { fireEvent, render } from "@testing-library/react";
 import App from "$/webapp/pages/app/App";
 import { getTestContext } from "$/utils/tests";
 import { Provider } from "@dhis2/app-runtime";
+import { D2Api } from "@eyeseetea/d2-api/2.36";
 
 describe("App", () => {
     it("renders the feedback component", async () => {
@@ -25,7 +26,7 @@ function getView() {
     const { compositionRoot } = getTestContext();
     return render(
         <Provider config={{ baseUrl: "http://localhost:8080", apiVersion: 30 }}>
-            <App compositionRoot={compositionRoot} />
+            <App api={{} as D2Api} compositionRoot={compositionRoot} />
         </Provider>
     );
 }
diff --git a/src/webapp/pages/landing/LandingPage.tsx b/src/webapp/pages/landing/LandingPage.tsx
@@ -1,40 +1,46 @@
 import { Typography } from "@material-ui/core";
 import React from "react";
-import { useHistory } from "react-router-dom";
-import { Card, CardGrid } from "$/webapp/components/card-grid/CardGrid";
 import { useAppContext } from "$/webapp/contexts/app-context";
-import i18n from "$/utils/i18n";
+
+import { TutorialModule } from "training-component";
+import { Button, Dialog } from "@material-ui/core";
 
 export const LandingPage: React.FC = React.memo(() => {
-    const history = useHistory();
     const { currentUser } = useAppContext();
 
-    const cards: Card[] = [
-        {
-            title: i18n.t("Section"),
-            key: "main",
-            children: [
-                {
-                    name: "John",
-                    description: "Entry point 1",
-                    listAction: () => history.push("/for/John"),
-                },
-                {
-                    name: "Mary",
-                    description: "Entry point 2",
-                    listAction: () => history.push("/for/Mary"),
-                },
-            ],
-        },
-    ];
-
     return (
         <>
             <Typography variant="h6">
                 Current user: {currentUser.name} [{currentUser.id}]
             </Typography>
 
-            <CardGrid cards={cards} />
+            <MyComponent />
         </>
     );
 });
+
+function MyComponent() {
+    const { api } = useAppContext();
+    const [showTutorial, setShowTutorial] = React.useState(false);
+
+    const openTutorial = React.useCallback(() => {
+        setShowTutorial(true);
+    }, []);
+
+    return (
+        <>
+            <Button variant="contained" onClick={openTutorial}>
+                OPEN TUTORIAL
+            </Button>
+            <Dialog open={showTutorial} fullScreen>
+                <TutorialModule
+                    moduleId="data-entry"
+                    onExit={() => setShowTutorial(false)}
+                    onHome={() => setShowTutorial(false)}
+                    locale="en"
+                    baseUrl={api.baseUrl}
+                />
+            </Dialog>
+        </>
+    );
+}