wip synchro

drama-queen/src/bootstrap.tsx

@@ -6,7 +6,7 @@ import { createCoreProvider } from "core";
 import { RouterProvider } from "react-router-dom";
 
 const { CoreProvider } = createCoreProvider({
-  "apiUrl": import.meta.env.VITE_API_URL,
+  "apiUrl": import.meta.env.VITE_QUEEN_API_URL,
   "publicUrl": import.meta.env.BASE_URL,
   "oidcParams": {
     "issuerUri": import.meta.env.VITE_OIDC_ISSUER,

drama-queen/src/core/usecases/synchronizeData/selectors.ts

@@ -4,39 +4,34 @@ import { createSelector } from "@reduxjs/toolkit";
 
 const state = (rootState: RootState) => rootState[name];
 
-const runningState = createSelector(state, (state) => {
-  if (state.stateDescription === "not running") {
-    return undefined;
-  }
-  return state;
-});
+const runningStates = ["downloading", "uploading"];
 
-const isRunning = createSelector(runningState, (state) => state !== undefined);
+const isRunning = createSelector(state, ({ stateDescription }) =>
+  runningStates.includes(stateDescription)
+);
 
-const surveyUnitProgress = createSelector(runningState, (state) => {
-  if (state === undefined) {
-    return undefined;
-  }
-  return state.surveyUnitProgress;
-});
+const surveyUnitProgress = createSelector(state, (state) =>
+  state.stateDescription === "downloading"
+    ? state.surveyUnitProgress
+    : undefined
+);
+const nomenclatureProgress = createSelector(state, (state) =>
+  state.stateDescription === "downloading"
+    ? state.nomenclatureProgress
+    : undefined
+);
+const surveyProgress = createSelector(state, (state) =>
+  state.stateDescription === "downloading" ? state.surveyProgress : undefined
+);
 
-const nomenclatureProgress = createSelector(runningState, (state) => {
-  if (state === undefined) {
-    return undefined;
-  }
-  return state.nomenclatureProgress;
-});
-
-const surveyProgress = createSelector(runningState, (state) => {
-  if (state === undefined) {
-    return undefined;
-  }
-  return state.surveyProgress;
-});
+const uploadProgress = createSelector(state, (state) =>
+  state.stateDescription === "uploading" ? state.uploadProgress : undefined
+);
 
 export const selectors = {
   isRunning,
   surveyUnitProgress,
   nomenclatureProgress,
   surveyProgress,
+  uploadProgress,
 };

drama-queen/src/core/usecases/synchronizeData/state.ts

@@ -1,14 +1,20 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { id } from "tsafe";
 
-export type State = State.NotRunning | State.Running;
+export type State = State.NotRunning | State.Uploading | State.Downloading;
 
 export namespace State {
   export type NotRunning = {
     stateDescription: "not running";
   };
-  export type Running = {
-    stateDescription: "running";
+
+  export type Uploading = {
+    stateDescription: "uploading";
+    uploadProgress: number;
+  };
+
+  export type Downloading = {
+    stateDescription: "downloading";
     surveyUnitProgress: number;
     nomenclatureProgress: number;
     surveyProgress: number;
@@ -25,7 +31,21 @@ export const { reducer, actions } = createSlice({
     })
   ),
   reducers: {
-    progressUpdated: (
+    progressUploading: (
+      _state,
+      {
+        payload,
+      }: PayloadAction<{
+        uploadProgress: number;
+      }>
+    ) => {
+      const { uploadProgress } = payload;
+      return {
+        stateDescription: "uploading",
+        uploadProgress,
+      };
+    },
+    progressDownloading: (
       _state,
       {
         payload,
@@ -39,7 +59,7 @@ export const { reducer, actions } = createSlice({
         payload;
 
       return {
-        stateDescription: "running",
+        stateDescription: "downloading",
         nomenclatureProgress,
         surveyProgress,
         surveyUnitProgress,

drama-queen/src/core/usecases/synchronizeData/thunks.ts

@@ -1,22 +1,23 @@
 import { Thunks } from "core/setup";
 import { actions, name, type State } from "./state";
+import type { Campaign } from "core/ports/QueenApi/Campaing";
 
 export const thunks = {
-  start:
+  startDownloading:
     () =>
     async (...args) => {
       const [dispatch, getState] = args;
 
       {
         const state = getState()[name];
 
-        if (state.stateDescription === "running") {
+        if (state.stateDescription === "downloading") {
           return;
         }
       }
 
       dispatch(
-        actions.progressUpdated({
+        actions.progressDownloading({
           nomenclatureProgress: 0,
           surveyProgress: 0,
           surveyUnitProgress: 0,
@@ -27,7 +28,7 @@ export const thunks = {
         await new Promise((resolve) => setTimeout(resolve, 1000));
 
         dispatch(
-          actions.progressUpdated({
+          actions.progressDownloading({
             nomenclatureProgress: progress,
             surveyProgress: progress,
             surveyUnitProgress: progress,

drama-queen/src/ui/pages/synchronize-old/SynchronizePage.tsx

@@ -0,0 +1,103 @@
+import LinearProgress from '@mui/material/LinearProgress';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import { useTranslate } from "hooks/useTranslate";
+import preloader from 'ui/assets/preloader.svg';
+import { tss } from "tss-react/mui";
+import { Fragment, useEffect, useState } from "react";
+import { type PullData, usePullData } from 'hooks/usePullData';
+import type { SurveyUnitWithId } from "core/ports/QueenApi/SurveyUnit";
+import { SyncError } from "hooks/queries/SyncError";
+import { storeSyncProgress } from "./storeSyncProgress";
+import { db } from 'core/indexedDb';
+
+type SyncState = "Idle" | "Push" | "Pull" | "End";
+
+
+export const SynchronizePage = () => {
+    const { classes } = useStyles();
+    const [state, setState] = useState<SyncState>("Pull")
+
+    useEffect(() => {
+        storeSyncProgress()
+    }, []);
+
+    const handlePullEnd = (data: PullData, errors: SyncError[]) => {
+        storeSyncProgress(
+            data,
+            errors
+        )
+        db.surveyUnit.bulkAdd(data.surveyUnits);
+        setState("End")
+    }
+
+    return <Stack spacing={3} alignItems="center">
+        {state !== 'End' && <img src={preloader} alt="" className={classes.spinner} />}
+        {state === "Pull" && <PullProgress onEnd={handlePullEnd} />}
+        {state === "End" && <h1>Finished pulling data</h1>}
+    </Stack>;
+}
+
+const IndexProgress = () => {
+    return <>Index</>
+}
+
+type DownloadProgressProps = {
+    onEnd: (data: PullData, errors: SyncError[]) => void
+}
+
+const PullProgress = ({ onEnd }: DownloadProgressProps) => {
+    const { __ } = useTranslate();
+    const { classes } = useStyles();
+    const { progress, data, errors, status } = usePullData({
+        onEnd: onEnd
+    });
+    const progressBars = [{
+        progress: progress.surveyUnits,
+        label: __('sync.surveyUnits')
+    },
+    {
+        progress: progress.nomenclatures,
+        label: __('sync.nomenclatures')
+    },
+    {
+        progress: progress.questionnaires,
+        label: __('sync.questionnaires')
+    }]
+        .filter(bar => bar.progress !== null)
+
+    return <>
+        <Stack spacing={1} alignItems="center">
+            <Typography variant="h3" fontWeight="bold">{__('sync.progress')}</Typography>
+            <Typography variant="h6" className={classes.lightText}>{__('sync.download')}</Typography>
+        </Stack>
+        <Stack spacing={2}>
+            {progressBars.map(bar =>
+                <Fragment key={bar.label}>
+                    <Stack spacing={1}>
+                        <Typography variant="body2" fontWeight="bold"
+                            className={classes.lightText}>{bar.label}</Typography>
+                        <LinearProgress variant="determinate" value={bar.progress! * 100}
+                            className={classes.progressBar} />
+                    </Stack>
+                </Fragment>)}
+        </Stack>
+    </>
+}
+
+const useStyles = tss
+    .create(() => ({
+        lightText: {
+            opacity: .75,
+        },
+        spinner: {
+            width: 200,
+            height: 200
+        },
+        progressBar: {
+            maxWidth: 700,
+            width: '80vw',
+            height: 10,
+            borderRadius: 10
+        }
+    }));