diff --git a/cypress/e2e/builder/main.cy.ts b/cypress/e2e/builder/main.cy.ts
index e374b31..bbeb453 100644
--- 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
index 938cd8f..0563d6b 100644
--- 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
index d66a2ad..5628379 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,10 @@
-
+
-
Graasp App Template
+ Name the Frame
diff --git a/package.json b/package.json
index 3dad520..c65dbb0 100644
--- 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
index e781514..b65d2b9 100644
--- 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
index 0a944fa..8d08f22 100644
--- 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
index 95532b9..dcb72de 100644
--- 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
index 371ad59..caefbb8 100644
--- 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 (
{/* 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
index 4d45039..3616322 100644
--- 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,22 @@ 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 { useSaveSettings } from '@/utils/useSaveSettings';
-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 saveSettings = useSaveSettings();
const { data: imageSetting } = hooks.useAppSettings({
name: SettingsKeys.File,
});
- const { saveSettings } = useContext(SettingsContext);
-
const { data: appSetting } = hooks.useAppSettings({
- name: SettingsKeys.SettingsData,
+ name: SettingsKeys.Settings,
});
const image = imageSetting?.[0];
@@ -45,8 +44,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
index b7bb542..8914ecd 100644
--- 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 { goToPrevStep, goToNextStep } = useStepContext();
const { t } = useAppTranslation();
const { labels } = useContext(LabelsContext);
@@ -25,13 +19,20 @@ const AddLabelsStep = ({
-