graasp · pyphilia · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
diff --git a/cypress/e2e/builder/main.cy.ts b/cypress/e2e/builder/main.cy.ts
@@ -50,9 +50,6 @@ describe('Builder View', () => {
         cy.visit('/');
 
         // move to add labels step
-        // TODO: due to an issue, we have to click twice. Remove the second click when the issue is resolved.
-        // for more, see https://github.com/graasp/graasp-app-name-the-frame/issues/167.
-        cy.get(`#${CONFIG_STEPPERS_ADD_LABELS_ID}`).click();
         cy.get(`#${CONFIG_STEPPERS_ADD_LABELS_ID}`).click();
       });
     });

diff --git a/cypress/fixtures/appSettings.ts b/cypress/fixtures/appSettings.ts
@@ -20,7 +20,7 @@ const EMPTY_SETTING: Pick<
 export const MOCK_SETTING_DATA: AppSetting & { data: Settings } = {
   ...EMPTY_SETTING,
   id: v4(),
-  name: SettingsKeys.SettingsData,
+  name: SettingsKeys.Settings,
   data: {
     description: 'item description',
     labels: [],
@@ -40,7 +40,7 @@ export const MOCK_FILE_APP_SETTING: AppSetting & { data: FileSettings } = {
 export const MOCK_SETTING_DATA_WITH_LABELS: AppSetting & { data: Settings } = {
   ...EMPTY_SETTING,
   id: v4(),
-  name: SettingsKeys.SettingsData,
+  name: SettingsKeys.Settings,
   data: {
     description: 'Drag and drop colors within the right place',
     labels: [

diff --git a/index.html b/index.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/graasp.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="title" content="Graasp App template" />
+    <meta name="title" content="Name the Frame" />
     <meta
       name="description"
-      content="A Template project to create graasp apps."
+      content="An educational application adding labels on an image, and creating a quiz from it"
     />
     <meta
       name="version-info"
@@ -19,7 +19,7 @@
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
-    <title>Graasp App Template</title>
+    <title>Name the Frame</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -12,8 +12,9 @@
   "dependencies": {
     "@emotion/react": "11.13.3",
     "@emotion/styled": "11.13.0",
-    "@graasp/apps-query-client": "3.6.0",
+    "@graasp/apps-query-client": "3.7.0",
     "@graasp/sdk": "4.29.1",
+    "@graasp/stylis-plugin-rtl": "^2.2.0",
     "@graasp/translations": "^1.28.0",
     "@graasp/ui": "5.0.0",
     "@mui/icons-material": "5.16.7",
@@ -36,11 +37,13 @@
     "lodash.groupby": "^4.6.0",
     "lodash.isequal": "^4.5.0",
     "lodash.orderby": "^4.6.0",
+    "lucide-react": "^0.441.0",
     "react": "18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "18.3.1",
     "react-draggable": "^4.4.6",
     "react-i18next": "14.1.3",
+    "react-router-dom": "^6.26.2",
     "react-toastify": "10.0.5",
     "react-zoom-pan-pinch": "^3.6.0",
     "typescript": "5.5.4"

diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -8,7 +8,7 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.4.1'
+const PACKAGE_VERSION = '2.4.8'
 const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()

diff --git a/src/@types/index.ts b/src/@types/index.ts
@@ -9,7 +9,7 @@ export type FileSettings = {
 
 export enum SettingsKeys {
   File = 'file',
-  SettingsData = 'settings-data',
+  Settings = 'settings',
 }
 
 // x and y are relative to image size (percentage)

diff --git a/src/mocks/db.ts b/src/mocks/db.ts
@@ -33,7 +33,7 @@ export const defaultMockContext: LocalContext = {
   permission: PermissionLevel.Admin,
   context: 'builder',
   itemId: mockItem.id,
-  memberId: mockMembers[0].id,
+  accountId: mockMembers[0].id,
 };
 
 const buildDatabase = (): Database => ({
@@ -127,7 +127,7 @@ const buildDatabase = (): Database => ({
     {
       id: '2c11a73a-f333-47e1-8572-b8f99fe883b0',
       item: mockItem,
-      name: SettingsKeys.SettingsData,
+      name: SettingsKeys.Settings,
       data: {
         description: '',
         labels: [

diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx
@@ -74,10 +74,6 @@ const RootDiv = styled('div')({
 
 const Root: FC = () => {
   const [mockContext, setMockContext] = useObjectState(defaultMockContext);
-
-  // eslint-disable-next-line no-console
-  console.log('render root');
-
   return (
     <RootDiv>
       {/* Used to define the order of injected properties between JSS and emotion */}

diff --git a/src/modules/builder/configuration/AddImageStep.tsx b/src/modules/builder/configuration/AddImageStep.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import {
   Box,
@@ -18,23 +18,21 @@ import { DESCRIPTION_INPUT_ID } from '@/config/selectors';
 import { APP } from '@/langs/constants';
 import ImageDisplay from '@/modules/builder/ImageDisplay';
 import UploadImage from '@/modules/common/UploadImage';
-import { SettingsContext } from '@/modules/context/SettingsContext';
+import { saveSettings } from '@/utils/saveSettings';
 
-type Props = {
-  moveToNextStep: () => void;
-};
-const AddImageStep = ({ moveToNextStep }: Props): JSX.Element => {
+import { useStepContext } from './StepContext';
+
+const AddImageStep = (): JSX.Element => {
   const { t } = useAppTranslation();
   const { itemId } = useLocalContext();
+  const { goToNextStep } = useStepContext();
   const token = useContext(TokenContext);
   const { data: imageSetting } = hooks.useAppSettings({
     name: SettingsKeys.File,
   });
 
-  const { saveSettings } = useContext(SettingsContext);
-
   const { data: appSetting } = hooks.useAppSettings<Settings>({
-    name: SettingsKeys.SettingsData,
+    name: SettingsKeys.Settings,
   });
 
   const image = imageSetting?.[0];
@@ -45,8 +43,8 @@ const AddImageStep = ({ moveToNextStep }: Props): JSX.Element => {
   const saveData = (): void => {
     const newData = { ...(settings && settings.data), description };
 
-    saveSettings(SettingsKeys.SettingsData, newData);
-    moveToNextStep();
+    saveSettings(SettingsKeys.Settings, newData);
+    goToNextStep();
   };
 
   useEffect(() => {

diff --git a/src/modules/builder/configuration/AddLabelsStep/AddLabelsStep.tsx b/src/modules/builder/configuration/AddLabelsStep/AddLabelsStep.tsx
@@ -6,17 +6,11 @@ import { useAppTranslation } from '@/config/i18n';
 import { APP } from '@/langs/constants';
 import { LabelsContext } from '@/modules/context/LabelsContext';
 
+import { useStepContext } from '../StepContext';
 import AddLabelWithinFrame from './AddLabelWithinFrame';
 
-type Props = {
-  moveToNextStep: () => void;
-  moveToPrevStep: () => void;
-};
-
-const AddLabelsStep = ({
-  moveToNextStep,
-  moveToPrevStep,
-}: Props): JSX.Element => {
+const AddLabelsStep = (): JSX.Element => {
+  const { setActiveStep } = useStepContext();
   const { t } = useAppTranslation();
 
   const { labels } = useContext(LabelsContext);
@@ -25,13 +19,20 @@ const AddLabelsStep = ({
     <Stack direction="row" flexWrap="wrap" spacing={2} padding={2}>
       <AddLabelWithinFrame />
       <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
-        <Button size="large" onClick={moveToPrevStep}>
+        <Button
+          size="large"
+          onClick={() => {
+            setActiveStep(0);
+          }}
+        >
           {t(APP.BACK)}
         </Button>
         <Button
           variant="contained"
           size="large"
-          onClick={moveToNextStep}
+          onClick={() => {
+            setActiveStep(2);
+          }}
           disabled={!labels.length}
         >
           {t(APP.NEXT)}

diff --git a/src/modules/builder/configuration/Configurations.tsx b/src/modules/builder/configuration/Configurations.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import { Stack, Step, StepButton, Stepper } from '@mui/material';
 
 import { Settings, SettingsKeys } from '@/@types';
@@ -12,59 +10,48 @@ import {
   CONFIG_STEPPERS_PREVIEW_ID,
 } from '@/config/selectors';
 import { APP } from '@/langs/constants';
+import { LabelsProvider } from '@/modules/context/LabelsContext';
 import { ImageDimensionsProvider } from '@/modules/context/imageDimensionContext';
 
 import AddImageStep from './AddImageStep';
 import AddLabelsStep from './AddLabelsStep/AddLabelsStep';
 import PreviewStep from './PreviewStep';
+import StepProvider, { useStepContext } from './StepContext';
 
 const Configurations = (): JSX.Element => {
   const { t } = useAppTranslation();
+  const { setActiveStep, activeStep } = useStepContext();
 
   const { data: imageSetting } = hooks.useAppSettings({
     name: SettingsKeys.File,
   });
   const { data: settings } = hooks.useAppSettings<Settings>({
-    name: SettingsKeys.SettingsData,
+    name: SettingsKeys.Settings,
   });
 
   const image = imageSetting?.[0];
 
   const settingsData = settings?.[0];
-  const [activeStep, setActiveStep] = useState(0);
-
-  const [initialSetRef, setInitialSetRef] = useState(false);
-
-  useEffect(() => {
-    // move to preview step in case all was settled, using Ref to move only within first render, So If i change sth with second step I don't want to move to preview immediately
-    if (!initialSetRef && settingsData?.data?.labels) {
-      setActiveStep(2);
-      setInitialSetRef(true);
-    }
-  }, [settingsData, initialSetRef]);
 
   const steps = [
     {
-      label: t(APP.ADD_IMAGE_STEP_LABEL),
-      component: <AddImageStep moveToNextStep={() => setActiveStep(1)} />,
+      labelKey: APP.ADD_IMAGE_STEP_LABEL,
+      component: <AddImageStep />,
       id: CONFIG_STEPPERS_ADD_IMG_ID,
     },
     {
-      label: t(APP.ADD_LABELS_STEP_LABEL),
+      labelKey: APP.ADD_LABELS_STEP_LABEL,
       component: (
         <ImageDimensionsProvider>
-          <AddLabelsStep
-            moveToNextStep={() => setActiveStep(2)}
-            moveToPrevStep={() => setActiveStep(0)}
-          />
+          <AddLabelsStep />
         </ImageDimensionsProvider>
       ),
       disabled: !image?.id,
       id: CONFIG_STEPPERS_ADD_LABELS_ID,
     },
     {
-      label: t(APP.PREVIEW_STEP_LABEL),
-      component: <PreviewStep moveToPrevStep={() => setActiveStep(1)} />,
+      labelKey: APP.PREVIEW_STEP_LABEL,
+      component: <PreviewStep />,
       disabled: !settingsData?.data.labels || !image?.id,
       id: CONFIG_STEPPERS_PREVIEW_ID,
     },
@@ -73,15 +60,15 @@ const Configurations = (): JSX.Element => {
   return (
     <Stack spacing={1} id={CONFIGURATION_TAB_ID}>
       <Stepper activeStep={activeStep} nonLinear>
-        {steps.map(({ label, disabled, id }, index) => (
-          <Step key={label}>
+        {steps.map(({ labelKey, disabled, id }, index) => (
+          <Step key={labelKey}>
             <StepButton
               disabled={disabled}
               onClick={() => setActiveStep(index)}
               color="inherit"
               id={id}
             >
-              {label}
+              {t(labelKey)}
             </StepButton>
           </Step>
         ))}
@@ -91,4 +78,12 @@ const Configurations = (): JSX.Element => {
   );
 };
 
-export default Configurations;
+const WrapperComponent = (): JSX.Element => (
+  <StepProvider>
+    <LabelsProvider>
+      <Configurations />
+    </LabelsProvider>
+  </StepProvider>
+);
+
+export default WrapperComponent;
diff --git a/src/modules/builder/configuration/PreviewStep.tsx b/src/modules/builder/configuration/PreviewStep.tsx
@@ -8,15 +8,14 @@ import { hooks } from '@/config/queryClient';
 import { APP } from '@/langs/constants';
 import PlayerFrame from '@/modules/common/PlayerFrame';
 
-const PreviewStep = ({
-  moveToPrevStep,
-}: {
-  moveToPrevStep: () => void;
-}): JSX.Element => {
+import { useStepContext } from './StepContext';
+
+const PreviewStep = (): JSX.Element => {
   const { t } = useAppTranslation();
+  const { setActiveStep } = useStepContext();
 
   const { data: appSettings } = hooks.useAppSettings<Settings>({
-    name: SettingsKeys.SettingsData,
+    name: SettingsKeys.Settings,
   });
 
   const [answeredLabels, setAnsweredLabels] = useState<AnsweredLabel[]>([]);
@@ -59,7 +58,12 @@ const PreviewStep = ({
           onLabelMoved={onLabelMoved}
         />
         <Stack direction="row" gap={1} width="100%" justifyContent="flex-end">
-          <Button size="large" onClick={moveToPrevStep}>
+          <Button
+            size="large"
+            onClick={() => {
+              setActiveStep(1);
+            }}
+          >
             {t(APP.BACK)}
           </Button>
         </Stack>