fix: update template

.eslintrc

@@ -38,6 +38,7 @@
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/ban-ts-comment": "off",
     "import/no-import-module-exports": "off",
+    "no-console": ["error", { "allow": ["error", "warn", "debug", "info"] }],
     "import/no-extraneous-dependencies": [
       "error",
       {

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn prettier:check && yarn lint && yarn test
+yarn check

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint && yarn build
+yarn check && yarn build

.yarnrc.yml

@@ -1,7 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.0.1.cjs

cypress/e2e/builder/main.cy.ts

@@ -4,12 +4,13 @@ import { BUILDER_VIEW_CY, buildDataCy } from '../../../src/config/selectors';
 
 describe('Builder View', () => {
   beforeEach(() => {
-    cy.setUpApi({
-      appContext: {
+    cy.setUpApi(
+      {},
+      {
         context: Context.Builder,
-        permission: PermissionLevel.Admin,
+        permission: PermissionLevel.Read,
       },
-    });
+    );
     cy.visit('/');
   });
 

cypress/support/commands.ts

@@ -1,6 +1,5 @@
 /// <reference types="../../src/window" />
-import { Database, LocalContext } from '@graasp/apps-query-client';
-import { HttpMethod, Member } from '@graasp/sdk';
+import { Database } from '@graasp/apps-query-client';
 
 import { CURRENT_MEMBER, MEMBERS } from '../fixtures/members';
 import { MOCK_SERVER_ITEM } from '../fixtures/mockItem';
@@ -13,42 +12,33 @@ declare global {
        * Custom command to select DOM element by data-cy attribute.
        * @example cy.dataCy('greeting')
        */
-      setUpApi({
-        database,
-        currentMember,
-        appContext,
-      }: {
-        database?: Partial<Database>;
-        currentMember?: Member;
-        appContext?: Partial<LocalContext>;
-      }): Chainable<Element>;
+      setUpApi(
+        database: Partial<Omit<Database, 'appContext'>>,
+        appContext: Partial<Database['appContext']>,
+      ): void;
     }
   }
 }
 
-Cypress.Commands.add(
-  'setUpApi',
-  ({ currentMember = CURRENT_MEMBER, database, appContext } = {}) => {
-    // mock api and database
-    Cypress.on('window:before:load', (win: Window) => {
-      // eslint-disable-next-line no-param-reassign
-      win.database = {
-        appData: [],
-        appActions: [],
-        appSettings: [],
-        members: Object.values(MEMBERS),
-        ...database,
-        items: [MOCK_SERVER_ITEM],
-      };
-      // eslint-disable-next-line no-param-reassign
-      win.appContext = {
-        memberId: currentMember.id,
-        itemId: MOCK_SERVER_ITEM.id,
-        apiHost: Cypress.env('VITE_API_HOST'),
-        ...appContext,
-      };
-    });
-
-    // setup mocks here
-  },
-);
+Cypress.Commands.add('setUpApi', (database, appContext) => {
+  Cypress.on('window:before:load', (win: Window) => {
+    win.indexedDB.deleteDatabase('graasp-app-cypress');
+    // eslint-disable-next-line no-param-reassign
+    win.appContext = {
+      memberId: CURRENT_MEMBER.id,
+      itemId: MOCK_SERVER_ITEM.id,
+      apiHost: Cypress.env('VITE_API_HOST'),
+      ...appContext,
+    };
+    // eslint-disable-next-line no-param-reassign
+    win.database = {
+      appData: [],
+      appActions: [],
+      appSettings: [],
+      members: Object.values(MEMBERS),
+      items: [MOCK_SERVER_ITEM],
+      ...database,
+    };
+  });
+  // cy.intercept('DELETE', '/__mocks/reset').as('resetAPI');
+});

package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#159-add-msw-alternative-for-mocking",
-    "@graasp/sdk": "github:graasp/graasp-sdk#251-fix-use-discriminateditem-instead-of-item-in-types",
+    "@graasp/apps-query-client": "github:graasp/graasp-apps-query-client#188-fix-msw-return-for-some-calls",
+    "@graasp/sdk": "1.10.1",
     "@graasp/ui": "3.5.4",
     "@mui/icons-material": "5.14.7",
     "@mui/lab": "5.0.0-alpha.137",
@@ -63,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "6.7.5",
     "@typescript-eslint/parser": "6.7.5",
     "@vitejs/plugin-react": "^4.1.0",
+    "axios": "0.27.0",
     "concurrently": "8.2.1",
     "cypress": "13.3.0",
     "env-cmd": "10.1.0",
@@ -109,11 +110,8 @@
       "src/**/*.d.ts"
     ]
   },
-  "packageManager": "yarn@3.6.4",
+  "packageManager": "yarn@4.0.1",
   "msw": {
     "workerDirectory": "public"
-  },
-  "resolutions": {
-    "@graasp/sdk": "github:graasp/graasp-sdk#251-fix-use-discriminateditem-instead-of-item-in-types"
   }
 }

src/config/queryClient.tsx

@@ -0,0 +1,61 @@
+import { toast } from 'react-toastify';
+
+import { Notifier, configureQueryClient } from '@graasp/apps-query-client';
+
+import type { AxiosError } from 'axios';
+
+import { InfoToast, NetworkErrorToast } from '@/modules/common/CustomToasts';
+
+import { API_HOST, GRAASP_APP_KEY, MOCK_API } from './env';
+
+const notifier: Notifier = (data) => {
+  const { payload } = data;
+  if (payload) {
+    // eslint-disable-next-line no-console
+    console.log(data.payload);
+    // axios error
+    if (
+      payload.error &&
+      payload.error.name === 'AxiosError' &&
+      (payload.error as AxiosError).response
+    ) {
+      const { message } = (payload.error as AxiosError).response?.data as {
+        message: string;
+      };
+      toast.error(
+        <NetworkErrorToast
+          title={payload.error.message}
+          description={message}
+        />,
+      );
+    }
+    toast.success(<InfoToast type={data.type} payload={payload} />);
+  }
+};
+
+const {
+  queryClient,
+  QueryClientProvider,
+  hooks,
+  API_ROUTES,
+  mutations,
+  ReactQueryDevtools,
+} = configureQueryClient({
+  API_HOST,
+  notifier,
+  refetchOnWindowFocus: !import.meta.env.DEV,
+  keepPreviousData: true,
+  // avoid refetching when same data are closely fetched
+  staleTime: 1000, // ms
+  GRAASP_APP_KEY,
+  isStandalone: MOCK_API,
+});
+
+export {
+  ReactQueryDevtools,
+  queryClient,
+  QueryClientProvider,
+  hooks,
+  mutations,
+  API_ROUTES,
+};

src/main.tsx

@@ -26,6 +26,7 @@ if (MOCK_API) {
   mockApi(
     {
       externalUrls: [],
+      dbName: window.Cypress ? 'graasp-app-cypress' : undefined,
       appContext: window.Cypress ? window.appContext : defaultMockContext,
       database: window.Cypress
         ? window.database

src/modules/Root.tsx

@@ -1,5 +1,7 @@
 import { FC } from 'react';
 import { I18nextProvider } from 'react-i18next';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
 
 import { CssBaseline, ThemeProvider, createTheme, styled } from '@mui/material';
 import { grey, orange, pink } from '@mui/material/colors';
@@ -11,17 +13,17 @@ import {
   WithTokenContext,
 } from '@graasp/apps-query-client';
 
-import { defaultMockContext, mockMembers } from '@/mocks/db';
-import Loader from '@/modules/common/Loader';
-import { useObjectState } from '@/utils/hooks';
-
-import i18nConfig from '../config/i18n';
+import i18nConfig from '@/config/i18n';
 import {
   QueryClientProvider,
   ReactQueryDevtools,
   hooks,
   queryClient,
-} from '../config/queryClient';
+} from '@/config/queryClient';
+import { defaultMockContext, mockMembers } from '@/mocks/db';
+import Loader from '@/modules/common/Loader';
+import { useObjectState } from '@/utils/hooks';
+
 import App from './main/App';
 
 // declare the module to enable theme modification
@@ -70,8 +72,7 @@ const RootDiv = styled('div')({
 
 const Root: FC = () => {
   const [mockContext, setMockContext] = useObjectState(defaultMockContext);
-  // eslint-disable-next-line no-console
-  console.log(mockContext);
+
   return (
     <RootDiv>
       {/* Used to define the order of injected properties between JSS and emotion */}
@@ -80,13 +81,13 @@ const Root: FC = () => {
           <CssBaseline enableColorScheme />
           <I18nextProvider i18n={i18nConfig}>
             <QueryClientProvider client={queryClient}>
+              <ToastContainer />
               <WithLocalContext
                 defaultValue={window.Cypress ? window.appContext : mockContext}
                 LoadingComponent={<Loader />}
                 useGetLocalContext={hooks.useGetLocalContext}
                 useAutoResize={hooks.useAutoResize}
                 onError={() => {
-                  // eslint-disable-next-line no-console
                   console.error(
                     'An error occurred while fetching the context.',
                   );
@@ -96,7 +97,6 @@ const Root: FC = () => {
                   LoadingComponent={<Loader />}
                   useAuthToken={hooks.useAuthToken}
                   onError={() => {
-                    // eslint-disable-next-line no-console
                     console.error(
                       'An error occurred while requesting the token.',
                     );

src/modules/common/CustomToasts.tsx

@@ -0,0 +1,29 @@
+import { Stack, Typography } from '@mui/material';
+
+export const NetworkErrorToast = ({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}): JSX.Element => (
+  <Stack>
+    <Typography fontWeight="bold">{title}</Typography>
+    <Typography>{description}</Typography>
+  </Stack>
+);
+
+export const InfoToast = ({
+  type,
+  payload,
+}: {
+  type: string;
+  payload: unknown;
+}): JSX.Element => (
+  <Stack>
+    <Typography fontWeight="bold">{type}</Typography>
+    <Typography variant="caption">
+      {JSON.stringify(payload, null, 2)}
+    </Typography>
+  </Stack>
+);