fix: ws communication of activity state (#67)

and other misc fixes

fix: ws communication of activity state
refactor: activity state management
fix: disable results button
feat: add refresh data button

Author: swouf

package.json

@@ -26,7 +26,7 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@emotion/react": "11.11.3",
     "@emotion/styled": "11.11.0",
-    "@graasp/apps-query-client": "3.4.4",
+    "@graasp/apps-query-client": "graasp/graasp-apps-query-client#266-fix-patch-update-immutable-ws",
     "@graasp/sdk": "3.6.0",
     "@mui/icons-material": "5.15.10",
     "@mui/lab": "5.0.0-alpha.165",

src/hooks/useActivityState.ts

@@ -1,14 +1,14 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useLocalContext } from '@graasp/apps-query-client';
 import { PermissionLevel } from '@graasp/sdk';
 
-import { CurrentStateAppData, CurrentStateData } from '@/config/appDataTypes';
+import { CurrentStateData } from '@/config/appDataTypes';
 import { INITIAL_STATE } from '@/config/constants';
 import { ActivityStatus, ActivityType } from '@/interfaces/interactionProcess';
 import { useAppDataContext } from '@/modules/context/AppDataContext';
 import { useSettings } from '@/modules/context/SettingsContext';
-import { getAllStates, getCurrentRound, getCurrentState } from '@/utils/state';
+import { getAllStates, getCurrentState } from '@/utils/state';
 
 export interface UseActivityStateValues {
   activityState: {
@@ -26,23 +26,19 @@ export interface UseActivityStateValues {
 }
 
 const useActivityState = (): UseActivityStateValues => {
-  const [round, setRound] = useState(0);
   const [stateWarning, setStateWarning] = useState(false);
   const { appData, postAppData, patchAppData, deleteAppData } =
     useAppDataContext();
   const { orchestrator } = useSettings();
-  const [activityState, setActivityState] = useState<CurrentStateAppData>();
   const { permission } = useLocalContext();
 
-  useEffect(() => {
+  const activityState = useMemo(() => {
     const state = getCurrentState(appData, orchestrator.id);
     setStateWarning(state?.multipleStatesFound === true);
-    setActivityState(state.currentState);
-    const r = getCurrentRound(appData, orchestrator.id);
-    if (r) {
-      setRound(r);
-    }
-  }, [appData, orchestrator.id, round]);
+    return state.currentState;
+  }, [appData, orchestrator]);
+
+  const round = useMemo(() => activityState?.data.round || 0, [activityState]);
 
   const postDefaultActivityState = (): void => {
     if (permission === PermissionLevel.Admin) {
@@ -74,7 +70,6 @@ const useActivityState = (): UseActivityStateValues => {
 
   const nextRound = (): void => {
     const newRound = round + 1;
-    setRound(newRound);
     updateActivityState({
       round: newRound,
     });
@@ -95,7 +90,6 @@ const useActivityState = (): UseActivityStateValues => {
     const states = getAllStates(appData);
     states.forEach(({ id }) => deleteAppData({ id }));
     postDefaultActivityState();
-    setRound(0);
   };
 
   return {

src/langs/en.json

@@ -118,6 +118,7 @@
       "ORCHESTRATION": {
         "NEXT_ROUND_BTN": "Next round",
         "RESET_SETS_BTN": "Reset activity",
+        "REFRESH_DATA": "Refresh data",
         "RESET_SETS_DIALOG": {
           "TITLE": "Do you really want to reset the activity?",
           "HELPER_TEXT": "This action is definitive and will result in the loss of all the sets created in this activity.",

src/modules/adminPanel/NextRoundButton.tsx

@@ -6,14 +6,18 @@ import Button from '@mui/material/Button';
 import { NEXT_ROUND_BTN_CY } from '@/config/selectors';
 
 import { useActivityContext } from '../context/ActivityContext';
+import { useAppDataContext } from '../context/AppDataContext';
 
 interface NextRoundButtonProps {
   enable: boolean;
 }
 
 const NextRoundButton: FC<NextRoundButtonProps> = ({ enable }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('translations', {
+    keyPrefix: 'ADMIN_PANEL.ORCHESTRATION',
+  });
   const [isPreparingNextRound, setIsPreparingNextRound] = useState(false);
+  const { invalidateAppData } = useAppDataContext();
   const { createAllResponsesSet, nextRound } = useActivityContext();
   const promise = useRef<Promise<void>>();
 
@@ -28,13 +32,17 @@ const NextRoundButton: FC<NextRoundButtonProps> = ({ enable }) => {
   };
 
   return (
-    <Button
-      onClick={prepareNextRound}
-      disabled={!enable}
-      data-cy={NEXT_ROUND_BTN_CY}
-    >
-      {t('ADMIN_PANEL.ORCHESTRATION.NEXT_ROUND_BTN')}
-    </Button>
+    <>
+      <Button
+        onClick={prepareNextRound}
+        disabled={!enable}
+        data-cy={NEXT_ROUND_BTN_CY}
+      >
+        {t('NEXT_ROUND_BTN')}
+      </Button>
+      {/* TODO: Remove and make refresh automatic */}
+      <Button onClick={() => invalidateAppData()}>{t('REFRESH_DATA')}</Button>
+    </>
   );
 };
 

src/modules/adminPanel/Orchestration.tsx

@@ -91,9 +91,26 @@ const Orchestration: FC<OrchestrationProps> = () => {
           <ToggleButton
             value={ActivityType.Results}
             aria-label={t('ADMIN_PANEL.CONTROLS.RESULTS_BUTTON')}
+            disabled
           >
             <PollIcon sx={{ mr: 1 }} />
             {t('ADMIN_PANEL.CONTROLS.RESULTS_BUTTON')}
+            <Chip
+              disabled
+              variant="outlined"
+              color="warning"
+              size="small"
+              label="Under development"
+              sx={{
+                maxWidth: '10em',
+                height: 'auto',
+                '& .MuiChip-label': {
+                  display: 'block',
+                  whiteSpace: 'normal',
+                },
+              }}
+            />
+            {/* git commit -m "fix: disable results button" */}
           </ToggleButton>
         </ToggleButtonGroup>
         <Paper variant="outlined" elevation={1} sx={{ p: 1 }}>

src/modules/context/AppDataContext.tsx

@@ -39,6 +39,7 @@ export type AppDataContextType = {
     payload: DeleteAppDataType,
   ) => Promise<AppData<Data> | void>;
   appData: AppData<Data>[];
+  // refetchAppData: () => Promise<UseQueryResult<AppData[]>>;
   isSuccess: boolean;
   isLoading: boolean;
   invalidateAppData: () => Promise<void>;
@@ -64,7 +65,11 @@ type Props = {
 };
 
 export const AppDataProvider = ({ children }: Props): JSX.Element => {
-  const { data: appData, isLoading, isSuccess } = hooks.useAppData();
+  const {
+    data: appData,
+    isLoading,
+    isSuccess /* refetch: refetchAppData */,
+  } = hooks.useAppData();
   const invalidateAppData = useMemo(
     () => () => queryClient.invalidateQueries(QUERY_KEYS.appDataKeys.all),
     [],

src/modules/main/Activity.tsx

@@ -1,27 +1,15 @@
-import { FC, useEffect, useState } from 'react';
+import { FC } from 'react';
 
 import { ActivityType } from '@/interfaces/interactionProcess';
-import { getCurrentActivity } from '@/utils/state';
 
-import { useAppDataContext } from '../context/AppDataContext';
-import { useSettings } from '../context/SettingsContext';
+import { useActivityContext } from '../context/ActivityContext';
 import ResponseCollection from '../responseCollection/ResponseCollection';
 import ResponseEvaluation from '../responseEvaluation/ResponseEvaluation';
 
 const Activity: FC = () => {
-  const { appData } = useAppDataContext();
-  const { orchestrator } = useSettings();
+  const { activityState } = useActivityContext();
 
-  const [activity, setActivity] = useState<ActivityType>(
-    ActivityType.Collection,
-  );
-
-  useEffect(() => {
-    const a = getCurrentActivity(appData, orchestrator.id);
-    if (a) {
-      setActivity(a);
-    }
-  }, [appData, orchestrator.id]);
+  const { activity } = activityState.data;
 
   switch (activity) {
     case ActivityType.Evaluation:

yarn.lock

@@ -2474,9 +2474,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/apps-query-client@npm:3.4.4":
+"@graasp/apps-query-client@graasp/graasp-apps-query-client#266-fix-patch-update-immutable-ws":
   version: 3.4.4
-  resolution: "@graasp/apps-query-client@npm:3.4.4"
+  resolution: "@graasp/apps-query-client@https://github.com/graasp/graasp-apps-query-client.git#commit=61b48e26ec9ec0323df6e77b5a903883bbf48e4d"
   dependencies:
     "@emotion/react": "npm:11.11.3"
     "@emotion/styled": "npm:11.11.0"
@@ -2497,7 +2497,7 @@ __metadata:
     date-fns: ^3.3.0
     react: ^18.0.0
     react-dom: ^18.0.0
-  checksum: 10/5d32654427b80ed1c8e183a8ee564c1ca462f5c191b3ad568c1c8a3be903d372bbb22a761619f2c9df5b0c9c63b40f195af3ad6a327f53c7f60260a9e17448e0
+  checksum: 10/b9183d62c0b1e609b829b39d5e86cd7931831d89600463a949602e0c5e3a985605153ee3bf5aad8960e8b4bd5c37d4444de47a76d1f2dd221e3f4952b540c61a
   languageName: node
   linkType: hard
 
@@ -8392,7 +8392,7 @@ __metadata:
     "@cypress/code-coverage": "npm:3.12.22"
     "@emotion/react": "npm:11.11.3"
     "@emotion/styled": "npm:11.11.0"
-    "@graasp/apps-query-client": "npm:3.4.4"
+    "@graasp/apps-query-client": "graasp/graasp-apps-query-client#266-fix-patch-update-immutable-ws"
     "@graasp/sdk": "npm:3.6.0"
     "@mui/icons-material": "npm:5.15.10"
     "@mui/lab": "npm:5.0.0-alpha.165"