feat: Apps query client connection and save calculation action (#82)

* feat: connect to graasp-app-api

* feat: save calc action on equality

* fix: setup api for cypress tests to add appcontext and databse

* fix: use sdk factories for member and item

* fix: add default values for setupApi cy command for db and app context

cypress/e2e/Calculator.cy.ts

@@ -32,6 +32,7 @@ describe('Calculator', () => {
 
   describe('scientific mode = false', () => {
     before(() => {
+      cy.setUpApi();
       cy.visitAsStudent({ appQueryParameters });
     });
 

cypress/e2e/Keyboard.cy.ts

@@ -12,6 +12,7 @@ describe('Keyboard', () => {
   const resultErrorSelector = `[data-cy="${RESULT_TEXT_NAME}"] .katex-error`;
 
   before(() => {
+    cy.setUpApi();
     cy.visitAsStudent({ appQueryParameters });
   });
 

cypress/fixtures/members.ts

@@ -0,0 +1,11 @@
+import { Member, MemberFactory } from '@graasp/sdk';
+
+const ANNA = MemberFactory({ name: 'anna', email: '[email protected]' });
+const BOB = MemberFactory({ name: 'bob', email: '[email protected]' });
+
+export const MEMBERS: { [key: string]: Member } = {
+  ANNA,
+  BOB,
+};
+
+export const CURRENT_MEMBER = MEMBERS.ANNA;

cypress/fixtures/mockItem.ts

@@ -0,0 +1,7 @@
+import { AppItemFactory } from '@graasp/sdk';
+import { MEMBERS } from './members';
+
+export const MOCK_APP_ITEM = AppItemFactory({
+  name: 'calc1',
+  creator: MEMBERS.ANNA,
+});

cypress/support/commands.ts

@@ -4,6 +4,30 @@ import {
   SCIENTIFIC_MODE_SWITCH_NAME,
 } from '../../src/config/selectors';
 import { LOAD_PAGE_PAUSE, CLICK_BUTTON_PAUSE } from '../constants';
+import { CURRENT_MEMBER, MEMBERS } from '../fixtures/members';
+import { MOCK_APP_ITEM } from '../fixtures/mockItem';
+
+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_APP_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_APP_ITEM],
+      ...database,
+    };
+  });
+});
 
 Cypress.Commands.add(
   'visitAsStudent',

cypress/support/index.ts

@@ -1,5 +1,6 @@
 // cypress/support/index.ts
 
+import { Database, LocalContext } from '@graasp/apps-query-client';
 import { ANGLE_UNITS } from 'config/constants';
 import { ValueOf } from 'types/math';
 
@@ -10,6 +11,11 @@ declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace Cypress {
     interface Chainable {
+      setUpApi(
+        database?: Partial<Database>,
+        appContext?: Partial<LocalContext>,
+      ): void;
+
       visitAsStudent(
         args: { appQueryParameters: AppQueryParameters },
         scientificMode?: boolean,

cypress/window.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  interface Window {
+    appContext: LocalContext;
+    Cypress: boolean;
+    database: Database;
+    apiErrors: object;
+    katex: katex;
+  }
+}
+
+export {};

package.json

@@ -13,10 +13,13 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/apps-query-client": "3.4.1",
+    "@graasp/sdk": "3.10.0",
     "@graasp/ui": "3.0.0",
     "@mui/icons-material": "5.14.3",
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.14.4",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
     "i18next": "22.5.1",
     "katex": "0.16.7",
     "lodash.isnan": "3.0.2",
@@ -52,7 +55,7 @@
     "test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome",
     "report": "cat ./coverage/lcov.info | codacy-coverage",
-    "cypress:open": "cypress open",
+    "cypress:open": "env-cmd -f ./.env.test cypress open",
     "cypress": "npm-run-all --parallel start cypress:open",
     "postinstall": "husky install"
   },

src/components/Root.tsx

@@ -1,18 +1,57 @@
 import { I18nextProvider } from 'react-i18next';
 import { ThemeProvider } from '@mui/material/styles';
 import { ToastContainer } from 'react-toastify';
-import { theme } from '@graasp/ui';
+import { Loader, theme } from '@graasp/ui';
 import 'react-toastify/dist/ReactToastify.css';
+import {
+  GraaspContextDevTool,
+  WithLocalContext,
+  WithTokenContext,
+  useObjectState,
+} from '@graasp/apps-query-client';
+import { QueryClientProvider, hooks, queryClient } from '@/config/queryClient';
+import { defaultMockContext, mockMembers } from '@/mocks/db';
 import i18nConfig from '../config/i18n';
 import App from './App';
 
-const Root = (): JSX.Element => (
-  <ThemeProvider theme={theme}>
-    <I18nextProvider i18n={i18nConfig}>
-      <App />
-      <ToastContainer />
-    </I18nextProvider>
-  </ThemeProvider>
-);
+const Root = (): JSX.Element => {
+  const [mockContext, setMockContext] = useObjectState(defaultMockContext);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <I18nextProvider i18n={i18nConfig}>
+        <QueryClientProvider client={queryClient}>
+          <ToastContainer />
+          <WithLocalContext
+            defaultValue={window.Cypress ? window.appContext : mockContext}
+            LoadingComponent={<Loader />}
+            useGetLocalContext={hooks.useGetLocalContext}
+            useAutoResize={hooks.useAutoResize}
+            onError={(e) => {
+              console.error('An error occurred while fetching the context.', e);
+            }}
+          >
+            <WithTokenContext
+              LoadingComponent={<Loader />}
+              useAuthToken={hooks.useAuthToken}
+              onError={() => {
+                console.error('An error occurred while requesting the token.');
+              }}
+            >
+              <App />
+              {import.meta.env.DEV && (
+                <GraaspContextDevTool
+                  members={mockMembers}
+                  context={mockContext}
+                  setContext={setMockContext}
+                />
+              )}
+            </WithTokenContext>
+          </WithLocalContext>
+        </QueryClientProvider>
+      </I18nextProvider>
+    </ThemeProvider>
+  );
+};
 
 export default Root;

src/components/common/Calculator.tsx

@@ -1,15 +1,9 @@
 import { useState, useEffect, useCallback } from 'react';
 import * as math from 'mathjs';
 import isNaN from 'lodash.isnan';
-
 import Grid from '@mui/material/Grid';
 import { useTranslation } from 'react-i18next';
 import { Box } from '@mui/material';
-import FocusIndicator from '../FocusIndicator';
-import ScientificSwitch from '../ScientificSwitch';
-import Result from './Result';
-import KeyPad from './Keypad';
-import { RESULT_ERROR_MESSAGE } from '../../config/messages';
 import {
   KEYPAD_BUTTONS,
   BUTTON_NAMES,
@@ -19,7 +13,14 @@ import {
   SCIENTIFIC_CALCULATOR_MAX_WIDTH,
   ANGLE_UNITS,
   OPERATIONS,
-} from '../../config/constants';
+  CalculationTriggers,
+} from '@/config/constants';
+import { mutations } from '@/config/queryClient';
+import FocusIndicator from '../FocusIndicator';
+import ScientificSwitch from '../ScientificSwitch';
+import Result from './Result';
+import KeyPad from './Keypad';
+import { RESULT_ERROR_MESSAGE } from '../../config/messages';
 import AngleUnitSwitch from './AngleUnitSwitch';
 import {
   backSpace,
@@ -49,6 +50,14 @@ const Calculator = ({ standalone = false }: Props): JSX.Element => {
   const [scientificMode, setScientificMode] = useState(false);
   const [history, setHistory] = useState<string[]>([]);
 
+  const { mutate: postAction } = mutations.usePostAppAction();
+
+  const saveAction = (data: { equation: string; result: string }): void => {
+    postAction({
+      data,
+      type: CalculationTriggers.EQUATION,
+    });
+  };
   const updateResult = useCallback(
     ({
       name,
@@ -168,7 +177,10 @@ const Calculator = ({ standalone = false }: Props): JSX.Element => {
             newHistory.push(name);
             break;
         }
-
+        // to trigger action on equality operation
+        if (name === BUTTON_NAMES.EQUAL) {
+          saveAction({ equation: mathjs, result: newResult });
+        }
         setResult(newResult);
         setMathjs(newMathjs);
         setHistory(newHistory);
@@ -179,7 +191,8 @@ const Calculator = ({ standalone = false }: Props): JSX.Element => {
         setHistory([]);
       }
     },
-    [history, mathjs, result, t],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [history, mathjs, result],
   );
 
   const handleKeydown = useCallback(

src/config/constants.ts

@@ -184,3 +184,7 @@ export const TRIGONOMETRY_SPECIAL_CASES: SpecialCases = {
 
 export const ROUND_OFF_ERROR_MARGIN = 1.58;
 export const BUTTON_FONT_SIZE = '1.9rem';
+
+export enum CalculationTriggers {
+  EQUATION = 'calculation-equation',
+}

src/config/queryClient.ts

@@ -0,0 +1,29 @@
+import { configureQueryClient } from '@graasp/apps-query-client';
+
+import { API_HOST, GRAASP_APP_KEY, MOCK_API } from './env';
+
+const {
+  queryClient,
+  QueryClientProvider,
+  hooks,
+  API_ROUTES,
+  mutations,
+  ReactQueryDevtools,
+} = configureQueryClient({
+  API_HOST,
+  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/index.tsx

@@ -1,7 +1,30 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import Root from './components/Root';
 import './index.css';
+import {
+  mockApi,
+  buildDatabase,
+  MockSolution,
+} from '@graasp/apps-query-client';
+import Root from './components/Root';
+import { MOCK_API } from './config/env';
+import { defaultMockContext, mockMembers } from './mocks/db';
+
+// setup mocked api for cypress or standalone app
+/* istanbul ignore next */
+if (MOCK_API) {
+  mockApi(
+    {
+      externalUrls: [],
+      dbName: window.Cypress ? 'graasp-app-cypress' : undefined,
+      appContext: window.Cypress ? window.appContext : defaultMockContext,
+      database: window.Cypress
+        ? window.database
+        : buildDatabase({ members: mockMembers }),
+    },
+    window.Cypress ? MockSolution.MirageJS : MockSolution.ServiceWorker,
+  );
+}
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <Root />,