Prototype 2 (#23)

fix: provide data to sentry only in dev and stage

Ensure GDPR compliance for standard users

fix: add en as fallback lang

provide a few french translations

feat: add new idea button
fix: validation when all ideas are rated
fix: grid layout for ideas
feat: state control ⏯️
refactor: ideation view
feat: state management and waiting screen
feat: add final anonymous ideas view
fix: change ratings nomenclature

Author: swouf

src/config/appDataTypes.ts

@@ -3,6 +3,15 @@ import { AppDataRecord } from '@graasp/sdk/frontend';
 
 import { List } from 'immutable';
 
+import { IdeationState } from '@/interfaces/ideation';
+
+export enum AppDataTypes {
+  Idea = 'idea',
+  IdeaSet = 'idea-set',
+  CurrentState = 'current-state',
+  Ratings = 'ratings',
+}
+
 export type IdeaData = {
   idea: string;
   round?: number;
@@ -16,23 +25,24 @@ export type AnonymousIdeaData = IdeaData & { id: string };
 export type IdeasData = List<AnonymousIdeaData>;
 
 export type IdeaAppData = AppDataRecord & {
-  type: 'idea';
+  type: AppDataTypes.Idea;
   data: IdeaData;
 };
 
 export type IdeaSetAppData = AppDataRecord & {
-  type: 'idea-set';
+  type: AppDataTypes.IdeaSet;
   data: {
     ideas: IdeasData;
   };
 };
 
 export type CurrentStateData = {
-  round: number;
+  // round: number;
+  state: IdeationState;
 };
 
 export type CurrentStateAppData = AppDataRecord & {
-  type: 'current-state';
+  type: AppDataTypes.CurrentState;
   data: CurrentStateData;
 };
 
@@ -42,7 +52,7 @@ export type RatingsData<T> = {
 };
 
 export type RatingsAppData<T> = AppDataRecord & {
-  type: 'ratings';
+  type: AppDataTypes.Ratings;
   data: RatingsData<T>;
   visibility: AppDataVisibility.Member;
 };

src/config/constants.ts

@@ -1,9 +1,17 @@
 import { AppDataVisibility } from '@graasp/sdk';
 
-export const INITIAL_STATE = {
+import { IdeationState } from '@/interfaces/ideation';
+
+import { CurrentStateData } from './appDataTypes';
+
+export const INITIAL_STATE: {
+  [key: string]: unknown;
+  type: string;
+  data: CurrentStateData;
+} = {
   type: 'current-state',
   data: {
-    round: 0,
+    state: IdeationState.WaitingForStart,
   },
   visibility: AppDataVisibility.Item,
 };

src/config/i18n.ts

@@ -30,6 +30,7 @@ i18n.use(initReactI18next).init({
     escapeValue: false,
     formatSeparator: ',',
   },
+  fallbackLng: 'en',
 });
 
 export default i18n;

src/interfaces/ideation.ts

@@ -4,7 +4,13 @@ export enum IdeationPhases {
   Input = 1,
   Choose = 0,
   // Add = 1,
-  Wait = 3,
+}
+
+export enum IdeationState {
+  WaitingForStart = 'waiting-for-start',
+  End = 'end',
+  Pause = 'pause',
+  Play = 'play',
 }
 
 export type Phase = {

src/interfaces/ratings.ts

@@ -16,5 +16,5 @@ export interface LikertScale extends Rating {
 
 export type NoveltyRelevanceRatings = {
   novelty: number | undefined;
-  relevance: number | undefined;
+  usefulness: number | undefined;
 };

src/langs/en.json

@@ -21,6 +21,12 @@
     "SYNC_ALERT_SUCCESS": "All ideas are sync.",
     "CUE_PARENT_IDEA_TITLE": "Previous idea",
     "IDEA_BEING_SUBMITTED_ALERT": "Your idea is being submitted, please wait for a few seconds.",
-    "CHECK_FOR_NEW_IDEAS": "Check for new ideas"
+    "CHECK_FOR_NEW_IDEAS": "Check for new ideas",
+    "PROPOSE_NEW_IDEA": "Propose a new idea",
+    "STATE_CONTROL_TITLE": "Controls",
+    "PAUSE_MESSAGE": "The process has been paused by the admin. Please, wait for a moment.",
+    "WAIT_TO_START_SCREEN_MAIN_INSTRUCTION": "The ideation will start soon. In the meantime, please, read the following instructions:",
+    "WAIT_TO_START_SCREEN_STEP1": "At the beginning, you will be presented with a generative design question and asked to provide an answer to it.",
+    "WAIT_TO_START_SCREEN_STEP2": "After submitting a first answer, you will see some ideas provided by the other participants. Rate all of them and then propose a new idea, either by choosing one to build upon or by proposing a completely new one."
   }
 }

src/langs/fr.json

@@ -1,5 +1,18 @@
 {
   "translations": {
-    "Welcome to the Graasp App Starter Kit": "Bienvenue dans le kit de démarrage de l'application Graasp"
+    "Welcome to the Graasp App Starter Kit": "Bienvenue dans le kit de démarrage de l'application Graasp",
+    "IDEATION_TAB": "Idéation",
+    "IDEAS_VIEW_TAB": "Vue des idées",
+    "SETTINGS_TAB": "Paramètres",
+    "BUILD_ON_THIS_IDEA": "Élaborer cette idée",
+    "IDEA_TOO_LONG_ALERT": "Votre idée est trop longue. Veuillez essayer d'être plus concis.",
+    "IDEA_SUBMITTED_SUCCESS": "Votre idée a été enregistrée avec succés",
+    "SUBMIT_NEW_IDEA_STEP_TITLE": "Soumettre une nouvelle idée",
+    "READ_IDEAS_STEP_TITLE": "Trouver de l'inspiration",
+    "ADMIN_PANE_TITLE": "Panneau d'aministration",
+    "SETTINGS_TITLE": "Paramètres",
+    "SAVE": "Sauvegarder",
+    "SYNC_ALERT_SUCCESS": "Toutes les idées ont été synchronisées",
+    "CUE_PARENT_IDEA_TITLE": "Idée précédente"
   }
 }

src/modules/main/AdminControl.tsx …c/modules/admin-control/AdminControl.tsxsrc/modules/main/AdminControl.tsx renamed to src/modules/admin-control/AdminControl.tsx src/modules/main/AdminControl.tsx renamed to src/modules/admin-control/AdminControl.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -25,7 +25,9 @@ import { hooks } from '@/config/queryClient';
 import { useAppDataContext } from '@/modules/context/AppDataContext';
 
 import Synchronizer from '../common/Synchronizer';
-import IdeaInput from './ideationView/IdeaInput';
+import IdeaInput from '../main/ideation/IdeaInput';
+import SectionTitle from './SectionTitle';
+import StateControl from './StateControl';
 
 interface AdminControlProps {
   width?: string;
@@ -40,6 +42,16 @@ const AdminControl: FC<AdminControlProps> = ({ width }): JSX.Element => {
     postAppData(INITIAL_STATE);
   };
   const { data: appContext } = hooks.useAppContext();
+  const getNumberOfIdeas = useCallback(
+    (member: Member): number => {
+      const ideasForMember = appData.filter(
+        ({ type, member: memberData }) =>
+          type === 'idea' && memberData.id === member.id,
+      );
+      return ideasForMember.size;
+    },
+    [appData],
+  );
 
   useEffect(() => {
     const state = appData.find(
@@ -52,14 +64,6 @@ const AdminControl: FC<AdminControlProps> = ({ width }): JSX.Element => {
   }
   const members = appContext?.members;
 
-  const getNumberOfIdeas = (member: Member): number => {
-    const ideasForMember = appData.filter(
-      ({ type, member: memberData }) =>
-        type === 'idea' && memberData.id === member.id,
-    );
-    return ideasForMember.size;
-  };
-
   const handleSyncChange = (
     _event: React.ChangeEvent,
     checked: boolean,
@@ -86,9 +90,8 @@ const AdminControl: FC<AdminControlProps> = ({ width }): JSX.Element => {
           {t('ADMIN_PANE_TITLE')}
         </Typography>
         <Divider />
-        <Typography variant="h4" fontSize="14pt">
-          Participants
-        </Typography>
+        <StateControl />
+        <SectionTitle>Participants</SectionTitle>
         <Stack sx={{ m: 1 }} direction="row" spacing={2}>
           {members?.map((member) => (
             <Badge
@@ -100,9 +103,7 @@ const AdminControl: FC<AdminControlProps> = ({ width }): JSX.Element => {
             </Badge>
           ))}
         </Stack>
-        <Typography variant="h4" fontSize="14pt">
-          Orchestration
-        </Typography>
+        <SectionTitle>Orchestration</SectionTitle>
         <FormGroup>
           <FormHelperText>
             When enabled, the applications distribute ideas to the participants
@@ -116,9 +117,7 @@ const AdminControl: FC<AdminControlProps> = ({ width }): JSX.Element => {
         <Collapse in={sync} mountOnEnter unmountOnExit>
           <Synchronizer sync={sync} />
         </Collapse>
-        <Typography variant="h4" fontSize="14pt">
-          Act as a bot
-        </Typography>
+        <SectionTitle>Act as a bot</SectionTitle>
         <Typography>
           With the following field, you can insert new ideas in the ideation
           process under the identity of the virtual agent.

src/modules/admin-control/SectionTitle.tsx

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+
+import { Typography, TypographyProps } from '@mui/material';
+
+const SectionTitle: FC<TypographyProps> = (props) => (
+  <Typography variant="h4" fontSize="14pt" {...props}>
+    {props.children}
+  </Typography>
+);
+
+export default SectionTitle;

src/modules/admin-control/StateControl.tsx

@@ -0,0 +1,92 @@
+import { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import PauseCircleOutlineIcon from '@mui/icons-material/PauseCircleOutline';
+import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
+import ReplayOutlinedIcon from '@mui/icons-material/ReplayOutlined';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import { IconButton, Stack } from '@mui/material';
+
+import { CurrentStateAppData } from '@/config/appDataTypes';
+import { INITIAL_STATE } from '@/config/constants';
+import { IdeationState } from '@/interfaces/ideation';
+import { getCurrentState } from '@/utils/ideas';
+
+import { useAppDataContext } from '../context/AppDataContext';
+import { useSettings } from '../context/SettingsContext';
+import SectionTitle from './SectionTitle';
+
+interface StateControlProps {
+  onChange?: (state: IdeationState) => void;
+}
+
+const StateControl: FC<StateControlProps> = ({ onChange }) => {
+  const { t } = useTranslation();
+  const { appData, postAppData, patchAppData } = useAppDataContext();
+  const { orchestrator } = useSettings();
+  const [currentState, setCurrentState] = useState<CurrentStateAppData>();
+  const [processState, setProcessState] = useState<IdeationState>();
+
+  useEffect(() => {
+    const tmpCurrentState = getCurrentState(appData, orchestrator.id);
+    setCurrentState(tmpCurrentState);
+    setProcessState(tmpCurrentState?.data.state);
+  }, [appData, orchestrator.id]);
+
+  const updateState = async (
+    newProcessState?: IdeationState,
+  ): Promise<void> => {
+    if (currentState?.id) {
+      patchAppData({
+        id: currentState.id,
+        data: {
+          ...currentState.data.toJS(),
+          state: newProcessState,
+        },
+      });
+    } else {
+      postAppData({
+        ...INITIAL_STATE,
+        data: {
+          ...INITIAL_STATE.data,
+          state: newProcessState,
+        },
+      });
+    }
+  };
+  const handleChange = (newState: IdeationState): void => {
+    setProcessState(newState);
+    updateState(newState);
+    if (onChange) {
+      onChange(newState);
+    }
+  };
+  return (
+    <>
+      <SectionTitle>{t('STATE_CONTROL_TITLE')}</SectionTitle>
+      <Stack direction="row" spacing={1}>
+        {processState === IdeationState.Play ? (
+          <IconButton onClick={() => handleChange(IdeationState.Pause)}>
+            <PauseCircleOutlineIcon />
+          </IconButton>
+        ) : (
+          <IconButton onClick={() => handleChange(IdeationState.Play)}>
+            <PlayCircleOutlineIcon />
+          </IconButton>
+        )}
+        <IconButton onClick={() => handleChange(IdeationState.End)}>
+          <StopCircleOutlinedIcon />
+        </IconButton>
+        {processState === IdeationState.End && (
+          <IconButton
+            onClick={() => handleChange(IdeationState.WaitingForStart)}
+          >
+            <ReplayOutlinedIcon />
+          </IconButton>
+        )}
+      </Stack>
+    </>
+  );
+};
+
+export default StateControl;