Merge pull request #184 from graasp/183/queryParam

feat: set mode via query param

src/actions/app-settings.tsx

@@ -9,11 +9,11 @@ import {
   SET_DISTRIBUTION,
   SET_EQUILIBRIUM_CARBON_DIOXIDE,
   SET_INTERVAL_COUNT_DIRECTLY,
+  SET_MODE,
   SET_PH_CARBON_DIOXIDE,
   SET_SLIDER_CARBON_DIOXIDE,
   SET_YEAR,
   TOGGLE_ANIMATION_IN_MOTION,
-  TOGGLE_MODE,
   TOGGLE_PLAY,
   TOGGLE_SHOW_SCALE,
 } from '@/types/app-settings';
@@ -41,8 +41,9 @@ export const resetSettings = (): appSettingsActionType => ({
   type: RESET_SETTINGS,
 });
 
-export const toggleMode = (): appSettingsActionType => ({
-  type: TOGGLE_MODE,
+export const setMode = (payload: string): appSettingsActionType => ({
+  type: SET_MODE,
+  payload,
 });
 
 export const setAnimationIndex = (payload: number): appSettingsActionType => ({

src/components/side-menu/ModeSwitch.tsx

@@ -2,7 +2,8 @@ import { useContext } from 'react';
 
 import { t } from 'i18next';
 
-import { toggleMode } from '@/actions/app-settings';
+import { setMode } from '@/actions/app-settings';
+import { CONTINUOUS, SEQUENTIAL } from '@/constants/strings';
 import { AppSettingsContext } from '@/contexts/AppSettingsProvider';
 
 import TwoSidedSwitch from './common/TwoSidedSwitch';
@@ -13,12 +14,13 @@ interface Props {
 
 const ModeSwitch = ({ modeSequential }: Props): JSX.Element => {
   const { state, dispatch } = useContext(AppSettingsContext);
-  const { animationInMotion, isPlaying } = state;
+  const { animationInMotion, isPlaying, mode } = state;
 
   const disabled = animationInMotion || isPlaying;
 
   const handleToggle = (): void => {
-    dispatch(toggleMode());
+    if (mode === SEQUENTIAL) dispatch(setMode(CONTINUOUS));
+    else dispatch(setMode(SEQUENTIAL));
   };
 
   return (

src/modules/main/BuilderView.tsx

@@ -1,15 +1,16 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import { Tune } from '@mui/icons-material';
 import { Fab, Tooltip } from '@mui/material';
 
 import { t } from 'i18next';
 
+import { setMode } from '@/actions/app-settings';
 import Canvas from '@/components/canvas/Canvas';
 import SideMenuContinuous from '@/components/side-menu/SideMenuContinuous';
 import SideMenuSequential from '@/components/side-menu/SideMenuSequential';
 import { BUILDER_VIEW_CY } from '@/config/selectors';
-import { SEQUENTIAL } from '@/constants/strings';
+import { CONTINUOUS, SEQUENTIAL } from '@/constants/strings';
 import { AppSettingsContext } from '@/contexts/AppSettingsProvider';
 
 const openSideMenuFab = {
@@ -21,10 +22,17 @@ const openSideMenuFab = {
 
 const BuilderView = (): JSX.Element => {
   const [showSideMenu, setShowSideMenu] = useState(true);
-  const { state } = useContext(AppSettingsContext);
+  const { state, dispatch } = useContext(AppSettingsContext);
   const { mode } = state;
   const modeSequential = mode === SEQUENTIAL;
 
+  useEffect(() => {
+    const userSetMode = new URLSearchParams(window.location.search).get('mode');
+    if (userSetMode === 'cont' || userSetMode === 'continuous') {
+      dispatch(setMode(CONTINUOUS));
+    }
+  }, [dispatch]);
+
   return (
     <div data-cy={BUILDER_VIEW_CY} style={{ height: '100%', display: 'flex' }}>
       {modeSequential ? (

src/reducers/app-settings.tsx

@@ -1,7 +1,7 @@
 import { MOTION_INTERVAL } from '@/constants/motion/motion-intervals';
 import { DEFAULT_CO2, DEFAULT_YEAR } from '@/constants/side-menu';
 import { ACTIVE_CO2_DISTRIBUTION } from '@/constants/slider-molecules/active-molecules';
-import { CONTINUOUS, SEQUENTIAL } from '@/constants/strings';
+import { SEQUENTIAL } from '@/constants/strings';
 import { computeEquilibriumDistribution } from '@/utils/molecules';
 import { ActiveMoleculesType } from '@/utils/molecules/types';
 
@@ -15,11 +15,11 @@ import {
   SET_DISTRIBUTION,
   SET_EQUILIBRIUM_CARBON_DIOXIDE,
   SET_INTERVAL_COUNT_DIRECTLY,
+  SET_MODE,
   SET_PH_CARBON_DIOXIDE,
   SET_SLIDER_CARBON_DIOXIDE,
   SET_YEAR,
   TOGGLE_ANIMATION_IN_MOTION,
-  TOGGLE_MODE,
   TOGGLE_PLAY,
   TOGGLE_SHOW_SCALE,
 } from '../types/app-settings';
@@ -99,11 +99,11 @@ export const appSettingsReducer = (
         dimensions: { ...state.dimensions },
         mode: state.mode,
       };
-    case TOGGLE_MODE: {
+    case SET_MODE: {
       return {
         ...initialAppSettings,
         dimensions: { ...state.dimensions },
-        mode: state.mode === SEQUENTIAL ? CONTINUOUS : SEQUENTIAL,
+        mode: payload,
       };
     }
     case SET_ANIMATION_INDEX: {

src/types/app-settings.tsx

@@ -2,7 +2,7 @@ export const SET_DIMENSIONS = 'SET_DIMENSIONS';
 export const TOGGLE_PLAY = 'TOGGLE_PLAY';
 export const INCREMENT_INTERVAL_COUNT = 'INCREMENT_INTERVAL_COUNT';
 export const RESET_SETTINGS = 'RESET_SETTINGS';
-export const TOGGLE_MODE = 'TOGGLE_MODE';
+export const SET_MODE = 'SET_MODE';
 export const SET_ANIMATION_INDEX = 'SET_ANIMATION_INDEX';
 export const TOGGLE_ANIMATION_IN_MOTION = 'TOGGLE_ANIMATION_IN_MOTION';
 export const TOGGLE_SHOW_SCALE = 'TOGGLE_SHOW_SCALE';