Merge pull request #147 from graasp/140-realtime

Use websockets to get realtime data update events from the backend

.github/workflows/cypress.yml

@@ -31,6 +31,7 @@ jobs:
           VITE_GRAASP_APP_KEY: id-1234567890
           VITE_MOCK_API: true
           VITE_VERSION: cypress-tests
+          VITE_WS_HOST: ws://localhost:3636/ws
         with:
           install: false
           build: yarn build

.github/workflows/deploy-dev.yml

@@ -25,11 +25,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_DEV }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: development
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.sha }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

.github/workflows/deploy-prod.yml

@@ -23,11 +23,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_PROD }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: production
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.event.client_payload.tag }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

.github/workflows/deploy-stage.yml

@@ -23,11 +23,12 @@ jobs:
       - name: Yarn build
         # Set environment variables required to perform the build. These are only available to this step
         env:
-          VITE_API_HOST: ${{ secrets.REACT_APP_API_HOST_STAGE }}
+          VITE_API_HOST: ${{ vars.API_HOST }}
           VITE_GRAASP_APP_KEY: ${{ secrets.APP_KEY }}
-          VITE_SENTRY_ENV: staging
+          VITE_SENTRY_ENV: ${{ vars.SENTRY_ENV }}
           VITE_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
           VITE_VERSION: ${{ github.event.client_payload.tag }}
+          VITE_WS_HOST: ${{ vars.WS_HOST }}
           # add any env variable needed by your app here
         run: yarn build
         shell: bash

cypress/e2e/notes/notes.cy.ts

@@ -79,7 +79,7 @@ describe('Notes and interactions', () => {
         cy.get(dataCyWrapper(NOTE_EDIT_DIALOG)).within(() => {
           cy.get('#quill-dialog').within(() => {
             cy.get('.ql-editor').clear();
-            cy.get('.ql-editor').type(typedContent);
+            cy.get('.ql-editor').type(typedContent, { delay: 100 });
           });
           cy.get(dataCyWrapper(SAVE_DIALOG_CY)).click();
         });

cypress/plugins/index.ts

@@ -29,6 +29,7 @@ module.exports = (on, config) => {
       VITE_SENTRY_ENV: process.env.VITE_SENTRY_ENV,
       VITE_SENTRY_DSN: process.env.VITE_SENTRY_DSN,
       VITE_REFETCH_INTERVAL_SETTING: process.env.VITE_REFETCH_INTERVAL_SETTING,
+      VITE_WS_HOST: process.env.VITE_WS_HOST,
     },
   };
   require('@cypress/code-coverage/task')(on, newConfig);

package.json

@@ -30,35 +30,35 @@
     "@cypress/instrument-cra": "1.4.0",
     "@emotion/react": "~11.11.1",
     "@emotion/styled": "~11.11.0",
-    "@graasp/apps-query-client": "2.0.1",
-    "@graasp/sdk": "1.1.3",
-    "@graasp/ui": "3.2.7",
-    "@mui/icons-material": "~5.14.1",
-    "@mui/lab": "~5.0.0-alpha.137",
-    "@mui/material": "~5.14.2",
+    "@graasp/apps-query-client": "2.0.3",
+    "@graasp/sdk": "1.2.0",
+    "@graasp/ui": "3.3.1",
+    "@mui/icons-material": "~5.14.3",
+    "@mui/lab": "~5.0.0-alpha.140",
+    "@mui/material": "~5.14.5",
     "@sentry/react": "~7.60.1",
     "@sentry/tracing": "~7.60.1",
-    "@tanstack/react-query": "4.32.0",
-    "@tanstack/react-query-devtools": "4.32.0",
-    "@uppy/core": "~3.3.1",
-    "@uppy/dashboard": "~3.5.0",
-    "@uppy/drag-drop": "~3.0.2",
-    "@uppy/file-input": "~3.0.2",
-    "@uppy/progress-bar": "3.0.2",
+    "@tanstack/react-query": "4.32.6",
+    "@tanstack/react-query-devtools": "4.32.6",
+    "@uppy/core": "~3.4.0",
+    "@uppy/dashboard": "~3.5.1",
+    "@uppy/drag-drop": "~3.0.3",
+    "@uppy/file-input": "~3.0.3",
+    "@uppy/progress-bar": "3.0.3",
     "@uppy/react": "~3.1.3",
-    "@uppy/xhr-upload": "~3.3.1",
+    "@uppy/xhr-upload": "~3.3.2",
     "dompurify": "3.0.5",
     "file-saver": "~2.0.5",
-    "i18next": "~22.4.15",
+    "i18next": "~23.4.4",
     "immutable": "4.3.0",
     "lodash.isobject": "~3.0.2",
     "lodash.isstring": "~4.0.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "react-draggable": "4.4.5",
-    "react-i18next": "~12.2.2",
+    "react-i18next": "~13.1.2",
     "react-quill": "2.0.0",
-    "react-router-dom": "~6.14.2",
+    "react-router-dom": "~6.15.0",
     "react-toastify": "~9.1.3",
     "react-transition-group": "4.4.5",
     "react-zoom-pan-pinch": "~2.6.1",
@@ -86,8 +86,8 @@
     "cov:report": "open ./coverage/lcov-report/index.html"
   },
   "devDependencies": {
-    "@commitlint/cli": "~17.6.7",
-    "@commitlint/config-conventional": "~17.6.7",
+    "@commitlint/cli": "~17.7.1",
+    "@commitlint/config-conventional": "~17.7.0",
     "@cypress/code-coverage": "3.11.0",
     "@cypress/instrument-cra": "1.4.0",
     "@trivago/prettier-plugin-sort-imports": "4.2.0",
@@ -98,37 +98,38 @@
     "@types/lodash.isobject": "3.0.7",
     "@types/lodash.isstring": "4.0.7",
     "@types/mocha": "10.0.1",
-    "@types/node": "18.17.1",
-    "@types/react": "18.2.17",
+    "@types/node": "18.17.5",
+    "@types/react": "18.2.20",
     "@types/react-beautiful-dnd": "13.1.4",
     "@types/react-dom": "18.2.7",
     "@types/uuid": "^9.0.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "@vitejs/plugin-react": "4.0.3",
+    "@typescript-eslint/eslint-plugin": "6.4.0",
+    "@typescript-eslint/parser": "6.4.0",
+    "@vitejs/plugin-react": "4.0.4",
     "concurrently": "8.2.0",
     "cross-env": "7.0.3",
-    "cypress": "~12.17.2",
+    "cypress": "~12.17.3",
     "cypress-vite": "1.4.2",
     "env-cmd": "10.1.0",
-    "eslint": "~8.45.0",
+    "eslint": "~8.47.0",
     "eslint-config-airbnb": "~19.0.4",
     "eslint-config-prettier": "~8.9.0",
     "eslint-config-react-app": "~7.0.1",
-    "eslint-import-resolver-typescript": "~3.5.5",
-    "eslint-plugin-cypress": "~2.13.3",
+    "eslint-import-resolver-typescript": "~3.6.0",
+    "eslint-plugin-cypress": "~2.14.0",
     "eslint-plugin-import": "~2.28.0",
     "eslint-plugin-jsx-a11y": "~6.7.1",
     "eslint-plugin-prettier": "~4.2.1",
-    "eslint-plugin-react": "~7.33.0",
+    "eslint-plugin-react": "~7.33.1",
     "eslint-plugin-react-hooks": "~4.6.0",
     "html-webpack-plugin": "~5.5.3",
     "husky": "~8.0.3",
     "nyc": "15.1.0",
     "prettier": "~2.8.8",
     "pretty-quick": "~3.1.3",
+    "stylis-plugin-rtl": "~2.1.1",
     "ts-loader": "9.4.4",
-    "vite": "4.4.7",
+    "vite": "4.4.9",
     "vite-plugin-checker": "0.6.1",
     "vite-plugin-istanbul": "5.0.0",
     "wait-on": "7.0.1"
@@ -143,7 +144,7 @@
     "not op_mini all"
   ],
   "resolutions": {
-    "@graasp/sdk": "1.1.3",
+    "@graasp/sdk": "1.2.0",
     "immutable": "4.3.0"
   },
   "packageManager": "[email protected]",

src/components/main/note/Note.tsx

@@ -1,5 +1,9 @@
 import React, { useEffect, useState } from 'react';
-import Draggable, { DraggableData, DraggableEvent } from 'react-draggable';
+import Draggable, {
+  DraggableData,
+  DraggableEvent,
+  DraggableEventHandler,
+} from 'react-draggable';
 import { useTranslation } from 'react-i18next';
 
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
@@ -72,7 +76,10 @@ const Note = ({ note, id, userName, scale }: NoteProps): JSX.Element => {
 
   const { text: initialText, position, color } = note;
 
-  const { pageX = 0, pageY = 0 } = position;
+  const { pageX: initialPageX = 0, pageY: initialPageY = 0 } = position;
+
+  const [pageX, setPageX] = useState(initialPageX);
+  const [pageY, setPageY] = useState(initialPageY);
 
   const { patchAppData } = useAppDataContext();
   const { postAppAction } = useAppActionContext();
@@ -126,19 +133,24 @@ const Note = ({ note, id, userName, scale }: NoteProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userSetColor]);
 
-  const eventControl = (event: DraggableEvent): void => {
+  const eventControl: DraggableEventHandler = (
+    event: DraggableEvent,
+    data: DraggableData,
+  ): void => {
     if (event.type === 'mousemove' || event.type === 'touchmove') {
       setIsDragging(true);
+      setPageX(data.x);
+      setPageY(data.y);
     }
     if (event.type === 'mouseup' || event.type === 'touchend') {
       setIsDragging(false);
     }
   };
 
   const handleDragEnd = (event: DraggableEvent, data: DraggableData): void => {
-    eventControl(event);
+    eventControl(event, data);
     const { x, y } = data;
-    if (pageX !== x || pageY !== y) {
+    if (initialPageX !== x || initialPageY !== y) {
       const updatedNote = {
         ...note.toJS(),
         position: {
@@ -178,6 +190,17 @@ const Note = ({ note, id, userName, scale }: NoteProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [noteBeingEditedId]);
 
+  // May be redundant. This effect updates the text when the props change
+  useEffect(() => {
+    setText(initialText);
+  }, [initialText]);
+
+  // May be redundant. This effect updates the text when the props change
+  useEffect(() => {
+    setPageX(initialPageX);
+    setPageY(initialPageY);
+  }, [initialPageX, initialPageY]);
+
   const toggleTransform = (): void => {
     if (isTransforming) {
       setNoteBeingTransformedId(null);
@@ -230,7 +253,7 @@ const Note = ({ note, id, userName, scale }: NoteProps): JSX.Element => {
   return (
     <>
       <Draggable
-        defaultPosition={{ x: pageX, y: pageY }}
+        position={{ x: pageX, y: pageY }}
         disabled={isEditing}
         onStart={(e) => {
           e.stopPropagation();

src/components/modes/teacher/Settings.tsx

@@ -14,6 +14,7 @@ import Modal from '@mui/material/Modal';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 
+import pjson from '../../../../package.json';
 import {
   SETTINGS_BUTTON_CY,
   SETTINGS_CLOSE_BTN_CY,
@@ -83,6 +84,9 @@ const Settings = (): JSX.Element => {
       >
         <ModalContainer data-cy={SETTINGS_CY}>
           <Typography variant="h3">{t('Settings')}</Typography>
+          <Typography variant="caption" align="right">
+            Version {pjson.version}
+          </Typography>
           <ImageUpload />
           <BackgroundToggle />
           <DownloadActions />

src/config/env.ts

@@ -6,6 +6,7 @@ const {
   VITE_MOCK_API,
   VITE_API_HOST,
   VITE_REFETCH_INTERVAL_SETTING,
+  VITE_WS_HOST,
 } = window.Cypress ? Cypress.env() : import.meta.env;
 
 export const MOCK_API = VITE_MOCK_API === 'true';
@@ -15,3 +16,4 @@ export const GRAASP_APP_KEY = VITE_GRAASP_APP_KEY;
 export const SENTRY_ENV = VITE_SENTRY_ENV;
 export const SENTRY_DSN = VITE_SENTRY_DSN;
 export const REFETCH_INTERVAL_SETTING = VITE_REFETCH_INTERVAL_SETTING;
+export const WS_HOST: string | undefined = VITE_WS_HOST;

src/config/queryClient.ts

@@ -5,7 +5,7 @@ import {
 } from '@graasp/apps-query-client';
 
 import { mockContext } from '../data/db';
-import { GRAASP_APP_KEY, MOCK_API } from './env';
+import { GRAASP_APP_KEY, MOCK_API, WS_HOST } from './env';
 
 const {
   queryClient,
@@ -32,6 +32,8 @@ const {
         buildMockLocalContext(window.Cypress ? window.appContext : mockContext),
       ) as Window)
     : window.parent,
+  enableWebsocket: true,
+  WS_HOST,
 });
 
 export {

src/env.d.ts

@@ -8,6 +8,7 @@ interface ImportMetaEnv {
   readonly VITE_VERSION?: string;
   readonly VITE_SENTRY_ENV?: string;
   readonly VITE_SENTRY_DSN?: string;
+  readonly VITE_WS_HOST?: string;
 }
 
 interface ImportMeta {