feat: add autosave and required options (#29)

.yarnrc.yml

@@ -1,9 +1,9 @@
 compressionLevel: mixed
 
+defaultSemverRangePrefix: ""
+
 enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
-
-defaultSemverRangePrefix: ""
+yarnPath: .yarn/releases/yarn-4.2.2.cjs

cypress/e2e/builder/main.cy.ts

@@ -110,7 +110,7 @@ describe('builder settings as admin without configuration', () => {
   });
 });
 
-describe('builder settings as admin with question and answer.', () => {
+describe('builder settings as admin with question and answer', () => {
   beforeEach(() => {
     cy.setUpApi(
       {
@@ -166,7 +166,7 @@ describe('builder settings as admin with question and answer.', () => {
   });
 });
 
-describe('builder answers as admin with question and answer.', () => {
+describe('builder answers as admin with question and answer', () => {
   beforeEach(() => {
     cy.setUpApi(
       {

cypress/e2e/player/main.cy.ts

@@ -5,17 +5,24 @@ import {
   ANSWER_SUBMIT_BUTTON_CY,
   PLAYER_VIEW_CY,
   QUESTION_CY,
+  REQUIRED_CHIP_CY,
+  SAVED_CHIP_CY,
+  SUBMITTED_CHIP_CY,
   buildDataCy,
 } from '@/config/selectors';
 
 import { USER_ANSWER_CONTENT } from '../../fixtures/appData';
-import { ANSWER_SETTING, QUESTION_SETTING } from '../../fixtures/appSettings';
+import {
+  ANSWER_SETTING,
+  GENERAL_SETTING,
+  QUESTION_SETTING,
+} from '../../fixtures/appSettings';
 
 describe('player view as anonymous', () => {
   beforeEach(() => {
     cy.setUpApi(
       {
-        appSettings: [QUESTION_SETTING, ANSWER_SETTING],
+        appSettings: [QUESTION_SETTING, ANSWER_SETTING, GENERAL_SETTING],
       },
       {
         context: Context.Player,
@@ -38,24 +45,22 @@ describe('player view as anonymous', () => {
 
   it('answer should be modifiable but not saveable', () => {
     cy.get(buildDataCy(ANSWER_CY)).should('be.visible');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.visible');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.disabled');
+    cy.get(buildDataCy(REQUIRED_CHIP_CY)).should('be.visible');
+    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('not.be.visible');
     cy.get(buildDataCy(ANSWER_CY)).type(USER_ANSWER_CONTENT);
     cy.get(buildDataCy(ANSWER_CY))
       .invoke('val')
       .should('eq', USER_ANSWER_CONTENT);
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.disabled');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY))
-      .invoke('text')
-      .should('eq', 'Save');
+    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('not.be.visible');
+    cy.get(buildDataCy(SAVED_CHIP_CY)).should('not.exist');
   });
 });
 
 describe('player view as reader', () => {
   beforeEach(() => {
     cy.setUpApi(
       {
-        appSettings: [QUESTION_SETTING, ANSWER_SETTING],
+        appSettings: [QUESTION_SETTING, ANSWER_SETTING, GENERAL_SETTING],
       },
       {
         context: Context.Player,
@@ -78,23 +83,16 @@ describe('player view as reader', () => {
 
   it('answer should be modifiable and saveable', () => {
     cy.get(buildDataCy(ANSWER_CY)).should('be.visible');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.visible');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.disabled');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY))
-      .invoke('text')
-      .should('eq', 'Saved');
+    cy.get(buildDataCy(REQUIRED_CHIP_CY)).should('be.visible');
     cy.get(buildDataCy(ANSWER_CY)).type(USER_ANSWER_CONTENT);
+    cy.get(buildDataCy(SAVED_CHIP_CY)).should('be.visible');
+    cy.get(buildDataCy(SUBMITTED_CHIP_CY)).should('not.exist');
     cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).should('be.enabled');
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY))
-      .invoke('text')
-      .should('eq', 'Save');
     cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY)).click();
-    cy.get(buildDataCy(ANSWER_SUBMIT_BUTTON_CY))
-      .invoke('text')
-      .should('eq', 'Saved');
     cy.get(buildDataCy(ANSWER_CY))
       .invoke('val')
       .should('eq', USER_ANSWER_CONTENT);
+    cy.get(buildDataCy(SUBMITTED_CHIP_CY)).should('be.visible');
   });
 });
 

cypress/fixtures/appSettings.ts

@@ -29,3 +29,15 @@ export const ANSWER_SETTING = {
   updatedAt: new Date().toISOString(),
   item: MOCK_SERVER_DISCRIMINATED_ITEM,
 };
+
+export const GENERAL_SETTING = {
+  id: '2',
+  name: 'general',
+  data: {
+    required: true,
+    autosubmit: false,
+  },
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  item: MOCK_SERVER_DISCRIMINATED_ITEM,
+};

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="Short Answer" />
+    <meta name="title" content="Long Answer" />
     <meta
       name="description"
-      content="A simple app that allows learners to provide short answers on Graasp."
+      content="A simple app that allows learners to provide long answers on Graasp."
     />
     <meta
       name="version-info"

package.json

@@ -5,37 +5,39 @@
   "author": "Graasp",
   "contributors": [
     "Juan Carlos Farah",
-    "Basile Spaenlehauer"
+    "Basile Spaenlehauer",
+    "Jérémy La Scala"
   ],
   "homepage": ".",
   "type": "module",
   "dependencies": {
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
-    "@graasp/apps-query-client": "3.4.4",
-    "@graasp/sdk": "3.3.0",
-    "@graasp/ui": "4.1.1",
-    "@mui/icons-material": "5.15.10",
-    "@mui/lab": "5.0.0-alpha.165",
-    "@mui/material": "5.15.10",
-    "@sentry/react": "7.86.0",
+    "@emotion/styled": "11.11.5",
+    "@graasp/apps-query-client": "3.4.15",
+    "@graasp/sdk": "4.12.0",
+    "@graasp/ui": "4.19.0",
+    "@mui/icons-material": "5.15.18",
+    "@mui/lab": "5.0.0-alpha.170",
+    "@mui/material": "5.15.18",
+    "@sentry/react": "7.113.0",
     "@tanstack/react-query": "4.36.1",
     "@tanstack/react-query-devtools": "4.36.1",
-    "@types/node": "20.10.8",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.19",
-    "i18next": "23.7.20",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "18.2.25",
+    "i18next": "23.11.5",
+    "lodash.debounce": "4.0.8",
     "lodash.isequal": "4.5.0",
     "lodash.sortby": "4.7.0",
     "lodash.uniqby": "4.7.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-i18next": "13.5.0",
     "react-toastify": "9.1.3",
-    "typescript": "5.3.3"
+    "typescript": "5.4.5"
   },
   "scripts": {
     "dev": "yarn vite",
+    "dev:mock": "VITE_ENABLE_MOCK_API=true && yarn vite",
     "start": "yarn dev",
     "start:test": "yarn vite --mode test",
     "build": "yarn vite build",
@@ -57,41 +59,42 @@
     "cov:report": "open ./coverage/lcov-report/index.html"
   },
   "devDependencies": {
-    "@commitlint/cli": "18.4.4",
-    "@commitlint/config-conventional": "18.4.4",
-    "@cypress/code-coverage": "3.12.29",
+    "@commitlint/cli": "18.6.1",
+    "@commitlint/config-conventional": "18.6.3",
+    "@cypress/code-coverage": "3.12.39",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/i18n": "0.13.10",
+    "@types/i18n": "0.13.12",
+    "@types/lodash.debounce": "4.0.9",
     "@types/lodash.isequal": "^4",
     "@types/lodash.sortby": "^4",
     "@types/lodash.uniqby": "^4",
     "@types/uuid": "9.0.8",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "@vitejs/plugin-react": "4.2.1",
-    "axios": "0.27.2",
+    "axios": "1.6.8",
     "concurrently": "8.2.2",
-    "cypress": "13.6.6",
+    "cypress": "13.8.1",
     "env-cmd": "10.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-import-resolver-typescript": "3.6.1",
-    "eslint-plugin-cypress": "2.15.1",
+    "eslint-plugin-cypress": "2.15.2",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react": "7.34.1",
+    "eslint-plugin-react-hooks": "4.6.2",
     "husky": "8.0.3",
     "miragejs": "0.1.48",
-    "nock": "13.4.0",
+    "nock": "13.5.4",
     "nyc": "15.1.0",
-    "prettier": "3.1.1",
+    "prettier": "3.2.5",
     "uuid": "9.0.1",
-    "vite": "5.1.6",
+    "vite": "5.2.11",
     "vite-plugin-checker": "0.6.4",
     "vite-plugin-istanbul": "5.0.0"
   },
@@ -116,7 +119,7 @@
       "src/**/*.d.ts"
     ]
   },
-  "packageManager": "yarn@4.0.2",
+  "packageManager": "yarn@4.2.2",
   "msw": {
     "workerDirectory": "public"
   }

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (1.3.2).
+ * Mock Service Worker (1.3.3).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/config/appSettings.ts

@@ -16,3 +16,8 @@ export type CharsSettings = {
   minChars: number;
   maxChars: number;
 };
+
+export type GeneralSettings = {
+  required: boolean;
+  autosubmit: boolean;
+};

src/config/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_LANG = 'en';
+export const DEBOUNCE_SAVE_MS = 500;

src/config/selectors.ts

@@ -22,6 +22,11 @@ export const makeUserAnswerCorrectCellCy = (index: number | string): string =>
 export const QUESTION_CY = 'question';
 export const ANSWER_CY = 'answer';
 export const ANSWER_SUBMIT_BUTTON_CY = 'answer-submit-button';
+export const RESET_BTN_CY = 'reset-button';
+
+export const REQUIRED_CHIP_CY = 'required-chip';
+export const SAVED_CHIP_CY = 'saved-chip';
+export const SUBMITTED_CHIP_CY = 'submitted-chip';
 
 export const buildDataCy = (selector: string): string =>
   `[data-cy=${selector}]`;

src/config/sentry.ts

@@ -10,26 +10,35 @@ type SentryConfigType = {
 };
 
 export const generateSentryConfig = (): SentryConfigType => {
+  let SENTRY_ENVIRONMENT = SENTRY_ENV || 'development';
+  let SENTRY_TRACE_SAMPLE_RATE = 1.0;
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production
-  const DEV_TRACE_SAMPLE_RATE = 1.0;
-  const DEV_REPLAY_SAMPLE_RATE = 0.1;
-  const PROD_TRACE_SAMPLE_RATE = 0.1;
-  const PROD_REPLAY_SAMPLE_RATE = 0.1;
+  let SENTRY_REPLAY_SAMPLE_RATE = 0.1;
+  switch (process.env.NODE_ENV) {
+    case 'production':
+      SENTRY_ENVIRONMENT = 'production';
+      SENTRY_TRACE_SAMPLE_RATE = 0.1;
+      break;
+    case 'test':
+      SENTRY_TRACE_SAMPLE_RATE = 0.0;
+      SENTRY_REPLAY_SAMPLE_RATE = 0.0;
+      break;
+    case 'development':
+      SENTRY_REPLAY_SAMPLE_RATE = 1.0;
+      break;
+    default:
+  }
 
   return {
     // dsn is set only when not running inside cypress
     dsn: (!window.Cypress && SENTRY_DSN) || '',
-    environment: SENTRY_ENV,
-    tracesSampleRate: import.meta.env.PROD
-      ? PROD_TRACE_SAMPLE_RATE
-      : DEV_TRACE_SAMPLE_RATE,
+    environment: SENTRY_ENV || SENTRY_ENVIRONMENT,
+    tracesSampleRate: SENTRY_TRACE_SAMPLE_RATE,
     // release is set only when building for production
-    release: VERSION,
+    release: SENTRY_ENVIRONMENT === 'production' ? VERSION : '',
 
-    replaysSessionSampleRate: import.meta.env.PROD
-      ? PROD_REPLAY_SAMPLE_RATE
-      : DEV_REPLAY_SAMPLE_RATE,
+    replaysSessionSampleRate: SENTRY_REPLAY_SAMPLE_RATE,
     // If the entire session is not sampled, use the below sample rate to sample
     // sessions when an error occurs.
     replaysOnErrorSampleRate: 1.0,