From 46bcfa50de49b000151f3ec888df86336ec0f389 Mon Sep 17 00:00:00 2001 From: Thibault Reidy <147397675+ReidyT@users.noreply.github.com> Date: Tue, 17 Dec 2024 15:04:16 +0100 Subject: [PATCH] feat: remove local context (#111) --- src/context/SettingsContext.tsx | 105 ----------------------------- src/context/SimulationContext.tsx | 3 +- src/langs/en.json | 3 + src/modules/Root.tsx | 85 ++++++----------------- src/modules/main/AnalyticsView.tsx | 40 ----------- src/modules/main/App.tsx | 26 +------ src/modules/main/BuilderView.tsx | 104 ---------------------------- src/modules/main/PlayerView.tsx | 55 ++++++++++----- src/types/simulation.ts | 1 + 9 files changed, 66 insertions(+), 356 deletions(-) delete mode 100644 src/context/SettingsContext.tsx delete mode 100644 src/modules/main/AnalyticsView.tsx delete mode 100644 src/modules/main/BuilderView.tsx diff --git a/src/context/SettingsContext.tsx b/src/context/SettingsContext.tsx deleted file mode 100644 index 0da48cc..0000000 --- a/src/context/SettingsContext.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { FC, ReactElement, createContext, useContext } from 'react'; - -import { hooks, mutations } from '@/config/queryClient'; -import Loader from '@/modules/common/Loader'; - -// mapping between Setting names and their data type -// eslint-disable-next-line @typescript-eslint/ban-types -type AllSettingsType = {}; - -// default values for the data property of settings by name -const defaultSettingsValues: AllSettingsType = {}; - -// list of the settings names -const ALL_SETTING_NAMES = [ - // name of your settings -] as const; - -// automatically generated types -type AllSettingsNameType = (typeof ALL_SETTING_NAMES)[number]; -type AllSettingsDataType = AllSettingsType[keyof AllSettingsType]; - -export type SettingsContextType = AllSettingsType & { - saveSettings: ( - name: AllSettingsNameType, - newValue: AllSettingsDataType, - ) => void; -}; - -const defaultContextValue = { - ...defaultSettingsValues, - saveSettings: () => null, -}; - -const SettingsContext = createContext(defaultContextValue); - -type Prop = { - children: ReactElement | ReactElement[]; -}; - -export const SettingsProvider: FC = ({ children }) => { - const { mutate: postAppSetting } = mutations.usePostAppSetting(); - const { mutate: patchAppSetting } = mutations.usePatchAppSetting(); - const { - data: appSettingsList, - isLoading, - isSuccess, - } = hooks.useAppSettings(); - - const saveSettings = ( - name: AllSettingsNameType, - newValue: AllSettingsDataType, - ): void => { - if (appSettingsList) { - const previousSetting = appSettingsList.find((s) => s.name === name); - // setting does not exist - if (!previousSetting) { - postAppSetting({ - data: newValue, - name, - }); - } else { - patchAppSetting({ - id: previousSetting.id, - data: newValue, - }); - } - } - }; - - if (isLoading) { - return ; - } - - const getContextValue = (): SettingsContextType => { - if (isSuccess) { - const allSettings: AllSettingsType = ALL_SETTING_NAMES.reduce( - (acc: AllSettingsType, key: T) => { - // todo: types are not inferred correctly here - // @ts-ignore - const setting = appSettingsList.find((s) => s.name === key); - const settingData = setting?.data; - acc[key] = settingData as AllSettingsType[T]; - return acc; - }, - {}, - ); - return { - ...allSettings, - saveSettings, - }; - } - return defaultContextValue; - }; - - const contextValue = getContextValue(); - - return ( - - {children} - - ); -}; - -export const useSettings = (): SettingsContextType => - useContext(SettingsContext); diff --git a/src/context/SimulationContext.tsx b/src/context/SimulationContext.tsx index e5f57eb..64529fc 100644 --- a/src/context/SimulationContext.tsx +++ b/src/context/SimulationContext.tsx @@ -110,7 +110,7 @@ export const SimulationProvider = ({ unit: TimeUnit.Years, }); const [simulationStatus, setSimulationStatus] = useState( - SimulationStatus.LOADING, // waiting for the temperatures... + SimulationStatus.INITIAL_LOADING, // waiting for the temperatures... ); const [simulationSpeedIdx, setSimulationSpeedIdx] = useState(0); @@ -150,6 +150,7 @@ export const SimulationProvider = ({ type: 'load', temperatureRows: temperatures.current, }); + setSimulationStatus(SimulationStatus.LOADING); }); }, [csv, csv.measurementFrequency, csv.path, simulationDuration.value]); diff --git a/src/langs/en.json b/src/langs/en.json index 16e93bb..3ec6bb2 100644 --- a/src/langs/en.json +++ b/src/langs/en.json @@ -1,4 +1,7 @@ { + "INITIAL_LOADING": { + "LOADING_MESSAGE": "Loading House Insulation Simulator..." + }, "DATES": { "YEARS_one": "{{count}} year", "YEARS_other": "{{count}} years", diff --git a/src/modules/Root.tsx b/src/modules/Root.tsx index 6e551eb..31e661a 100644 --- a/src/modules/Root.tsx +++ b/src/modules/Root.tsx @@ -7,22 +7,14 @@ import { CssBaseline, ThemeProvider, createTheme, styled } from '@mui/material'; import { grey, orange, pink } from '@mui/material/colors'; import { StyledEngineProvider } from '@mui/material/styles'; -import { - GraaspContextDevTool, - WithLocalContext, - WithTokenContext, -} from '@graasp/apps-query-client'; +import '@graasp/apps-query-client'; import i18nConfig from '@/config/i18n'; import { QueryClientProvider, ReactQueryDevtools, - hooks, queryClient, } from '@/config/queryClient'; -import { defaultMockContext, mockMembers } from '@/mocks/db'; -import Loader from '@/modules/common/Loader'; -import { useObjectState } from '@/utils/hooks'; import ErrorBoundary from './ErrorBoundary'; import App from './main/App'; @@ -73,59 +65,26 @@ const RootDiv = styled('div')({ background: '#fafaff', }); -const Root: FC = () => { - const [mockContext, setMockContext] = useObjectState(defaultMockContext); - - return ( - - {/* Used to define the order of injected properties between JSS and emotion */} - - - - - - - - } - useGetLocalContext={hooks.useGetLocalContext} - useAutoResize={hooks.useAutoResize} - onError={() => { - console.error( - 'An error occurred while fetching the context.', - ); - }} - > - } - useAuthToken={hooks.useAuthToken} - onError={() => { - console.error( - 'An error occurred while requesting the token.', - ); - }} - > - - {import.meta.env.DEV && ( - - )} - - - {import.meta.env.DEV && ( - - )} - - - - - - - ); -}; +const Root: FC = () => ( + + {/* Used to define the order of injected properties between JSS and emotion */} + + + + + + + + + {import.meta.env.DEV && ( + + )} + + + + + + +); export default Root; diff --git a/src/modules/main/AnalyticsView.tsx b/src/modules/main/AnalyticsView.tsx deleted file mode 100644 index f8c5830..0000000 --- a/src/modules/main/AnalyticsView.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Button, Stack, Typography } from '@mui/material'; - -import { useLocalContext } from '@graasp/apps-query-client'; - -import { hooks, mutations } from '@/config/queryClient'; -import { ANALYTICS_VIEW_CY } from '@/config/selectors'; - -const AnalyticsView = (): JSX.Element => { - const { permission } = useLocalContext(); - const { data: appActions, refetch } = hooks.useAppActions(); - const { mutate: postAppAction } = mutations.usePostAppAction(); - return ( -
- Analytics as {permission} - - - - - - - App Actions - 
{JSON.stringify(appActions, null, 2)}
- - -
- ); -}; -export default AnalyticsView; diff --git a/src/modules/main/App.tsx b/src/modules/main/App.tsx index 6933fa2..756b38b 100644 --- a/src/modules/main/App.tsx +++ b/src/modules/main/App.tsx @@ -1,13 +1,8 @@ import { useEffect } from 'react'; import { useLocalContext } from '@graasp/apps-query-client'; -import { Context } from '@graasp/sdk'; - -import { SettingsProvider } from '@/context/SettingsContext'; import i18n, { DEFAULT_LANGUAGE } from '../../config/i18n'; -import AnalyticsView from './AnalyticsView'; -import BuilderView from './BuilderView'; import PlayerView from './PlayerView'; const App = (): JSX.Element => { @@ -21,26 +16,7 @@ const App = (): JSX.Element => { } }, [context]); - // eslint-disable-next-line @typescript-eslint/no-unused-vars - const renderContent = (): JSX.Element => { - switch (context.context) { - case Context.Builder: - return ; - - case Context.Analytics: - return ; - - case Context.Player: - default: - return ; - } - }; - - return ( - - - - ); + return ; }; export default App; diff --git a/src/modules/main/BuilderView.tsx b/src/modules/main/BuilderView.tsx deleted file mode 100644 index 3d3aa29..0000000 --- a/src/modules/main/BuilderView.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import { Button, Stack, Typography } from '@mui/material'; - -import { useLocalContext } from '@graasp/apps-query-client'; - -import { BUILDER_VIEW_CY } from '@/config/selectors'; - -import { hooks, mutations } from '../../config/queryClient'; - -const AppSettingsDisplay = (): JSX.Element => { - const { data: appSettings } = hooks.useAppSettings(); - return ( - - App Setting - {appSettings ? ( - 
{JSON.stringify(appSettings, null, 2)}
- ) : ( - Loading - )} - - ); -}; - -const AppActionsDisplay = (): JSX.Element => { - const { data: appActions } = hooks.useAppActions(); - return ( - - App Actions - {appActions ? ( - 
{JSON.stringify(appActions, null, 2)}
- ) : ( - Loading - )} - - ); -}; - -const BuilderView = (): JSX.Element => { - const { permission } = useLocalContext(); - const { data: appDatas } = hooks.useAppData(); - const { mutate: postAppData } = mutations.usePostAppData(); - const { mutate: postAppAction } = mutations.usePostAppAction(); - const { mutate: patchAppData } = mutations.usePatchAppData(); - const { mutate: deleteAppData } = mutations.useDeleteAppData(); - const { mutate: postAppSetting } = mutations.usePostAppSetting(); - - return ( -
- Builder as {permission} - - - - - - - - - - App Data - 
{JSON.stringify(appDatas, null, 2)}
- - - - -
- ); -}; -export default BuilderView; diff --git a/src/modules/main/PlayerView.tsx b/src/modules/main/PlayerView.tsx index 251d938..291d77f 100644 --- a/src/modules/main/PlayerView.tsx +++ b/src/modules/main/PlayerView.tsx @@ -1,32 +1,51 @@ -import { Stack } from '@mui/material'; +import { useTranslation } from 'react-i18next'; + +import { LinearProgress, Stack, Typography } from '@mui/material'; import { SIMULATION_FRAME_MS } from '@/config/simulation'; import { SeasonProvider } from '@/context/SeasonContext'; -import { SimulationProvider } from '@/context/SimulationContext'; +import { SimulationProvider, useSimulation } from '@/context/SimulationContext'; +import { SimulationStatus } from '@/types/simulation'; import { SimulationCanvas } from '../common/SimulationCanvas'; import { SimulationControl } from '../common/SimulationControl'; import { SimulationInformations } from '../common/SimulationInformations/SimulationInformations'; import { SimulationSettingsPanel } from '../common/SimulationSettingsPanel/SimulationSettingsPanel'; -const PlayerViewComponent = (): JSX.Element => ( - - - - - - +const PlayerViewComponent = (): JSX.Element => { + const { t } = useTranslation('INITIAL_LOADING'); + const { status } = useSimulation(); + + if (status === SimulationStatus.INITIAL_LOADING) { + return ( + + + {t('LOADING_MESSAGE')} + + + + ); + } - - + return ( + + + + + + + + + + - -); + ); +}; const PlayerView = (): JSX.Element => ( diff --git a/src/types/simulation.ts b/src/types/simulation.ts index 42c6103..3cccc85 100644 --- a/src/types/simulation.ts +++ b/src/types/simulation.ts @@ -1,5 +1,6 @@ export enum SimulationStatus { IDLE, + INITIAL_LOADING, LOADING, RUNNING, PAUSED,