From bb31f8f97c8e494bef68fcf48fea68a5aa9f6d37 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Sat, 9 Jul 2022 09:03:39 +0000 Subject: [PATCH 1/4] Refactor: move reducers closer to components --- pages/_app.tsx | 2 +- pages/experiment/[experimentid].tsx | 6 +++--- .../data-points}/data-points-reducer.test.ts | 2 +- .../data-points}/data-points-reducer.ts | 2 +- src/components/data-points/data-points.tsx | 7 ++----- src/components/download-csv-button.tsx | 2 +- src/components/experiment/configurationTab.tsx | 4 ++-- src/components/experiment/dataEntryTab.tsx | 2 +- .../{ => experiment}/debug-experiment.tsx | 2 +- src/components/experiment/experiment.tsx | 8 ++++---- .../experiment/tabbed-experiment.tsx | 8 ++++---- .../home}/home-reducer.test.ts | 0 .../home}/home-reducer.ts | 0 src/components/home/home.tsx | 4 ++-- src/components/json-editor/json-editor.tsx | 4 ++-- src/components/layout/layout.tsx | 2 +- src/components/optimizer-configurator.tsx | 2 +- src/components/plots/plot-item.tsx | 2 +- src/components/plots/plots.tsx | 4 ++-- .../result-data/experimentation-guide.tsx | 6 +++--- .../result-data/initialization-progress.tsx | 2 +- .../result-data/next-experiments.tsx | 2 +- .../summary-configuration.tsx | 4 ++-- .../theme-selector/theme-selector.tsx | 2 +- src/components/upload-csv-button.tsx | 2 +- .../experiment-context.test.tsx | 4 ++-- .../{ => experiment}/experiment-context.tsx | 18 +++++++++--------- .../experiment}/experiment-reducers.ts | 6 +++--- .../experiment}/experiment-selectors.test.tsx | 2 +- .../experiment}/experiment-selectors.ts | 2 +- src/context/experiment/index.ts | 3 +++ .../experiment}/reducers.test.ts | 4 ++-- .../experiment}/reducers.ts | 4 ++-- src/{ => context/experiment}/store.ts | 4 ++-- src/context/{ => global}/global-context.tsx | 13 ++++--------- .../global}/global-reducer.test.ts | 2 +- .../global}/global-reducer.ts | 4 ++-- src/context/global/index.ts | 2 ++ src/context/index.ts | 1 + src/hooks/useLocalStorageReducer.test.ts | 4 ++-- src/utility/converters.test.ts | 2 +- src/utility/migration/migration.test.ts | 2 +- src/utility/ui-util.test.ts | 2 +- src/utility/ui-util.ts | 2 +- 44 files changed, 80 insertions(+), 82 deletions(-) rename src/{reducers => components/data-points}/data-points-reducer.test.ts (98%) rename src/{reducers => components/data-points}/data-points-reducer.ts (95%) rename src/components/{ => experiment}/debug-experiment.tsx (81%) rename src/{reducers => components/home}/home-reducer.test.ts (100%) rename src/{reducers => components/home}/home-reducer.ts (100%) rename src/context/{ => experiment}/experiment-context.test.tsx (92%) rename src/context/{ => experiment}/experiment-context.tsx (87%) rename src/{reducers => context/experiment}/experiment-reducers.ts (97%) rename src/{reducers => context/experiment}/experiment-selectors.test.tsx (93%) rename src/{reducers => context/experiment}/experiment-selectors.ts (86%) create mode 100644 src/context/experiment/index.ts rename src/{reducers => context/experiment}/reducers.test.ts (99%) rename src/{reducers => context/experiment}/reducers.ts (88%) rename src/{ => context/experiment}/store.ts (87%) rename src/context/{ => global}/global-context.tsx (84%) rename src/{reducers => context/global}/global-reducer.test.ts (98%) rename src/{reducers => context/global}/global-reducer.ts (97%) create mode 100644 src/context/global/index.ts create mode 100644 src/context/index.ts diff --git a/pages/_app.tsx b/pages/_app.tsx index ba3ab4e4..76a7b414 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,7 +4,7 @@ import { AppProps } from 'next/app' import CssBaseline from '@mui/material/CssBaseline' import { CacheProvider, EmotionCache } from '@emotion/react' import createEmotionCache from '../src/createEmotionCache' -import { GlobalStateProvider } from '../src/context/global-context' +import { GlobalStateProvider } from '../src/context/global' // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache() diff --git a/pages/experiment/[experimentid].tsx b/pages/experiment/[experimentid].tsx index 0a87ae1c..93671ba8 100644 --- a/pages/experiment/[experimentid].tsx +++ b/pages/experiment/[experimentid].tsx @@ -1,9 +1,9 @@ import { useRouter } from 'next/router' -import { ExperimentProvider } from '../../src/context/experiment-context' +import { ExperimentProvider } from '../../src/context/experiment' import TabbedExperiment from '../../src/components/experiment/tabbed-experiment' import Experiment from '../../src/components/experiment/experiment' -import DebugExperiment from '../../src/components/debug-experiment' -import { useGlobal } from '../../src/context/global-context' +import DebugExperiment from '../../src/components/experiment/debug-experiment' +import { useGlobal } from '../../src/context/global' import LoadingExperiment from '../../src/components/experiment/loading-experiment' import JsonEditor from '../../src/components/json-editor/json-editor' diff --git a/src/reducers/data-points-reducer.test.ts b/src/components/data-points/data-points-reducer.test.ts similarity index 98% rename from src/reducers/data-points-reducer.test.ts rename to src/components/data-points/data-points-reducer.test.ts index c5b5b4f5..5d199c82 100644 --- a/src/reducers/data-points-reducer.test.ts +++ b/src/components/data-points/data-points-reducer.test.ts @@ -1,5 +1,5 @@ import { dataPointsReducer, DataPointsState } from './data-points-reducer' -import { TableDataRow } from '../types/common' +import { TableDataRow } from '../../types/common' describe('data points reducer', () => { const initialState: DataPointsState = { diff --git a/src/reducers/data-points-reducer.ts b/src/components/data-points/data-points-reducer.ts similarity index 95% rename from src/reducers/data-points-reducer.ts rename to src/components/data-points/data-points-reducer.ts index 43328fb7..6549bc99 100644 --- a/src/reducers/data-points-reducer.ts +++ b/src/components/data-points/data-points-reducer.ts @@ -1,4 +1,4 @@ -import { TableDataRow } from '../types/common' +import { TableDataRow } from '../../types/common' interface EditRow { row: TableDataRow diff --git a/src/components/data-points/data-points.tsx b/src/components/data-points/data-points.tsx index f1ff4b2d..854cc4be 100644 --- a/src/components/data-points/data-points.tsx +++ b/src/components/data-points/data-points.tsx @@ -1,6 +1,6 @@ import { CircularProgress, IconButton, Box, Tooltip } from '@mui/material' import { useCallback, useEffect, useMemo, useReducer } from 'react' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { DataPointType, TableDataPoint, @@ -17,10 +17,7 @@ import { TitleCard } from '../title-card/title-card' import useStyles from './data-points.style' import DownloadCSVButton from '../download-csv-button' import UploadCSVButton from '../upload-csv-button' -import { - dataPointsReducer, - DataPointsState, -} from '../../reducers/data-points-reducer' +import { dataPointsReducer, DataPointsState } from './data-points-reducer' type DataPointProps = { valueVariables: ValueVariableType[] diff --git a/src/components/download-csv-button.tsx b/src/components/download-csv-button.tsx index 7c6d3556..76aad7f5 100644 --- a/src/components/download-csv-button.tsx +++ b/src/components/download-csv-button.tsx @@ -1,5 +1,5 @@ import { IconButton, Tooltip } from '@mui/material' -import { useExperiment } from '../context/experiment-context' +import { useExperiment } from '../context/experiment' import { dataPointsToCSV } from '../utility/converters' import { saveCSVToLocalFile } from '../utility/save-to-local-file' import GetAppIcon from '@mui/icons-material/GetApp' diff --git a/src/components/experiment/configurationTab.tsx b/src/components/experiment/configurationTab.tsx index 0ca5bec7..33c9129b 100644 --- a/src/components/experiment/configurationTab.tsx +++ b/src/components/experiment/configurationTab.tsx @@ -1,6 +1,6 @@ import { Grid } from '@mui/material' -import { useExperiment } from '../../context/experiment-context' -import { useGlobal } from '../../context/global-context' +import { useExperiment } from '../../context/experiment' +import { useGlobal } from '../../context/global' import { ValueVariableType, CategoricalVariableType, diff --git a/src/components/experiment/dataEntryTab.tsx b/src/components/experiment/dataEntryTab.tsx index daf41be7..333d5c3f 100644 --- a/src/components/experiment/dataEntryTab.tsx +++ b/src/components/experiment/dataEntryTab.tsx @@ -1,5 +1,5 @@ import { Grid } from '@mui/material' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import { DataPointType } from '../../types/common' import DataPoints from '../data-points/data-points' import { ExperimentationGuide } from '../result-data/experimentation-guide' diff --git a/src/components/debug-experiment.tsx b/src/components/experiment/debug-experiment.tsx similarity index 81% rename from src/components/debug-experiment.tsx rename to src/components/experiment/debug-experiment.tsx index 36c8de15..514f8dc6 100644 --- a/src/components/debug-experiment.tsx +++ b/src/components/experiment/debug-experiment.tsx @@ -1,5 +1,5 @@ import { Card, CardContent } from '@mui/material' -import { useExperiment } from '../context/experiment-context' +import { useExperiment } from '../../context/experiment' export default function DebugExperiment() { const { state } = useExperiment() diff --git a/src/components/experiment/experiment.tsx b/src/components/experiment/experiment.tsx index b692140a..35e0026f 100644 --- a/src/components/experiment/experiment.tsx +++ b/src/components/experiment/experiment.tsx @@ -19,7 +19,7 @@ import { useExperiment, runExperiment, useSelector, -} from '../../context/experiment-context' +} from '../../context/experiment' import React, { useState } from 'react' import { ValueVariableType, @@ -32,11 +32,11 @@ import { ExperimentationGuide } from '../result-data/experimentation-guide' import LoadingButton from '../loading-button/loading-button' import { Plots } from '../plots/plots' import { saveObjectToLocalFile } from '../../utility/save-to-local-file' -import { useGlobal } from '../../context/global-context' -import { UISizeValue } from '../../reducers/global-reducer' +import { useGlobal } from '../../context/global' +import { UISizeValue } from '../../context/global' import { getSize } from '../../utility/ui-util' import { AlertColor } from '@mui/material' -import { selectIsInitializing } from '../../reducers/experiment-selectors' +import { selectIsInitializing } from '../../context/experiment' type SnackbarMessage = { message: string diff --git a/src/components/experiment/tabbed-experiment.tsx b/src/components/experiment/tabbed-experiment.tsx index 621710a2..e437f490 100644 --- a/src/components/experiment/tabbed-experiment.tsx +++ b/src/components/experiment/tabbed-experiment.tsx @@ -16,17 +16,17 @@ import { useExperiment, runExperiment, useSelector, -} from '../../context/experiment-context' +} from '../../context/experiment' import React, { useState } from 'react' import LoadingExperiment from './loading-experiment' import LoadingButton from '../loading-button/loading-button' import { Plots } from '../plots/plots' import { saveObjectToLocalFile } from '../../utility/save-to-local-file' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { ConfigurationTab } from './configurationTab' import { DataEntryTab } from './dataEntryTab' -import { State } from '../../reducers/global-reducer' -import { selectIsInitializing } from '../../reducers/experiment-selectors' +import { State } from '../../context/global' +import { selectIsInitializing } from '../../context/experiment' type SnackbarMessage = { message: string diff --git a/src/reducers/home-reducer.test.ts b/src/components/home/home-reducer.test.ts similarity index 100% rename from src/reducers/home-reducer.test.ts rename to src/components/home/home-reducer.test.ts diff --git a/src/reducers/home-reducer.ts b/src/components/home/home-reducer.ts similarity index 100% rename from src/reducers/home-reducer.ts rename to src/components/home/home-reducer.ts diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx index b9f1a53c..8b5532ca 100644 --- a/src/components/home/home.tsx +++ b/src/components/home/home.tsx @@ -21,9 +21,9 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight' import DeleteIcon from '@mui/icons-material/Delete' import { buildPath, paths } from '../../../paths' import { ExperimentType } from '../../types/common' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { v4 as uuid } from 'uuid' -import { reducer } from '../../reducers/home-reducer' +import { reducer } from './home-reducer' import { CreateOrOverwriteDialog } from '../create-or-overwrite-dialog/create-or-overwrite-dialog' type UploadMessage = { diff --git a/src/components/json-editor/json-editor.tsx b/src/components/json-editor/json-editor.tsx index 7d7a01cc..e50ba888 100644 --- a/src/components/json-editor/json-editor.tsx +++ b/src/components/json-editor/json-editor.tsx @@ -8,11 +8,11 @@ import { Typography, } from '@mui/material' import { ChangeEvent, useEffect, useState } from 'react' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import useStyles from './json-editor.style' import { ExperimentType } from '../../types/common' import CloseIcon from '@mui/icons-material/Close' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { errorMessage } from '../../utility' type DisplayedResults = { diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index db6c227f..b3d013b3 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -9,7 +9,7 @@ import { } from '@mui/material' import Link from 'next/link' import useStyles from './layout.style' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { VersionInfo } from '../version-info' import { useState } from 'react' diff --git a/src/components/optimizer-configurator.tsx b/src/components/optimizer-configurator.tsx index fc0e3d7b..17286713 100644 --- a/src/components/optimizer-configurator.tsx +++ b/src/components/optimizer-configurator.tsx @@ -1,7 +1,7 @@ import { OptimizerConfig } from '../types/common' import { TitleCard } from './title-card/title-card' import { TextField } from '@mui/material' -import { useGlobal } from '../context/global-context' +import { useGlobal } from '../context/global' type OptimizerConfiguratorProps = { config: OptimizerConfig diff --git a/src/components/plots/plot-item.tsx b/src/components/plots/plot-item.tsx index 7524bf2c..5a5459fa 100644 --- a/src/components/plots/plot-item.tsx +++ b/src/components/plots/plot-item.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react' import { Typography } from '@mui/material' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import useStyles from './plot-item.style' interface PlotItemProps { diff --git a/src/components/plots/plots.tsx b/src/components/plots/plots.tsx index b9b2b9c5..ee1d72db 100644 --- a/src/components/plots/plots.tsx +++ b/src/components/plots/plots.tsx @@ -1,9 +1,9 @@ -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import useStyles from './plots.style' import { TitleCard } from '../title-card/title-card' import { Tooltip, IconButton, Hidden } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { isUIBig } from '../../utility/ui-util' import { PlotList } from './plot-list' import { PlotItem } from './plot-item' diff --git a/src/components/result-data/experimentation-guide.tsx b/src/components/result-data/experimentation-guide.tsx index e396692b..291a660b 100644 --- a/src/components/result-data/experimentation-guide.tsx +++ b/src/components/result-data/experimentation-guide.tsx @@ -1,15 +1,15 @@ -import { useSelector } from '../../context/experiment-context' +import { useSelector } from '../../context/experiment' import { Suggestions } from './suggestions' import { TitleCard } from '../title-card/title-card' import { Tooltip, IconButton, Hidden, Box } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import { isUIBig } from '../../utility/ui-util' import useStyles from './experimentation-guide.style' import { SingleDataPoint } from './single-data-point' import { NextExperiments } from './next-experiments' import { InitializationProgress } from './initialization-progress' -import { selectIsInitializing } from '../../reducers/experiment-selectors' +import { selectIsInitializing } from '../../context/experiment' interface ResultDataProps { nextValues: string[][] diff --git a/src/components/result-data/initialization-progress.tsx b/src/components/result-data/initialization-progress.tsx index 0d80765c..3dfb8f88 100644 --- a/src/components/result-data/initialization-progress.tsx +++ b/src/components/result-data/initialization-progress.tsx @@ -6,7 +6,7 @@ import { Typography, } from '@mui/material' import CheckIcon from '@mui/icons-material/Check' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import { useEffect, useState } from 'react' export const InitializationProgress = () => { diff --git a/src/components/result-data/next-experiments.tsx b/src/components/result-data/next-experiments.tsx index 1b66fb5d..3d808134 100644 --- a/src/components/result-data/next-experiments.tsx +++ b/src/components/result-data/next-experiments.tsx @@ -1,6 +1,6 @@ import { Divider, Stack, TextField } from '@mui/material' import { ChangeEvent } from 'react' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' export const NextExperiments = () => { const { diff --git a/src/components/summary-configuration/summary-configuration.tsx b/src/components/summary-configuration/summary-configuration.tsx index 4b4d2f3c..059855c3 100644 --- a/src/components/summary-configuration/summary-configuration.tsx +++ b/src/components/summary-configuration/summary-configuration.tsx @@ -16,9 +16,9 @@ import { import LensIcon from '@mui/icons-material/Lens' import Settings from '@mui/icons-material/Settings' import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye' -import { useExperiment } from '../../context/experiment-context' +import { useExperiment } from '../../context/experiment' import useStyles from './summary-configuration.style' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' export const SummaryConfiguration = () => { const { diff --git a/src/components/theme-selector/theme-selector.tsx b/src/components/theme-selector/theme-selector.tsx index d83f3ce7..4f648ec6 100644 --- a/src/components/theme-selector/theme-selector.tsx +++ b/src/components/theme-selector/theme-selector.tsx @@ -1,5 +1,5 @@ import { Box, Button } from '@mui/material' -import { useGlobal } from '../../context/global-context' +import { useGlobal } from '../../context/global' import useStyles from './theme-selector.style' import { themes } from '../../theme/theme' diff --git a/src/components/upload-csv-button.tsx b/src/components/upload-csv-button.tsx index 6f31bacc..26581452 100644 --- a/src/components/upload-csv-button.tsx +++ b/src/components/upload-csv-button.tsx @@ -1,5 +1,5 @@ import { IconButton, Input, Tooltip } from '@mui/material' -import { useExperiment } from '../context/experiment-context' +import { useExperiment } from '../context/experiment' import { DataPointType } from '../types/common' import { csvToDataPoints } from '../utility/converters' import PublishIcon from '@mui/icons-material/Publish' diff --git a/src/context/experiment-context.test.tsx b/src/context/experiment/experiment-context.test.tsx similarity index 92% rename from src/context/experiment-context.test.tsx rename to src/context/experiment/experiment-context.test.tsx index f23ddad0..7f199da7 100644 --- a/src/context/experiment-context.test.tsx +++ b/src/context/experiment/experiment-context.test.tsx @@ -1,12 +1,12 @@ import { renderHook } from '@testing-library/react' import { FC } from 'react' -import { State } from '../store' +import { State } from '../../context/experiment/store' import { useExperiment, ExperimentProvider, useSelector, } from './experiment-context' -import { GlobalStateProvider } from './global-context' +import { GlobalStateProvider } from '../global' const ExperimentWrapper: FC<{ children: React.ReactNode }> = ({ children }) => ( diff --git a/src/context/experiment-context.tsx b/src/context/experiment/experiment-context.tsx similarity index 87% rename from src/context/experiment-context.tsx rename to src/context/experiment/experiment-context.tsx index c6707014..f7d0a583 100644 --- a/src/context/experiment-context.tsx +++ b/src/context/experiment/experiment-context.tsx @@ -1,17 +1,17 @@ import * as React from 'react' -import { versionInfo } from '../components/version-info' -import { useLocalStorageReducer } from '../hooks/useLocalStorageReducer' +import { versionInfo } from '../../components/version-info' +import { useLocalStorageReducer } from '../../hooks/useLocalStorageReducer' import { Configuration, DefaultApi, OptimizerapiOptimizerRunRequest, -} from '../../openapi' -import { Dispatch, rootReducer } from '../reducers/reducers' -import { initialState, State } from '../store' -import { ExperimentResultType, ExperimentType } from '../types/common' -import { calculateData, calculateSpace } from '../utility/converters' -import { migrate } from '../utility/migration/migration' -import { useGlobal } from './global-context' +} from '../../../openapi' +import { Dispatch, rootReducer } from './reducers' +import { initialState, State } from '../../context/experiment/store' +import { ExperimentResultType, ExperimentType } from '../../types/common' +import { calculateData, calculateSpace } from '../../utility/converters' +import { migrate } from '../../utility/migration/migration' +import { useGlobal } from '../global/' const ExperimentContext = React.createContext< { state: State; dispatch: Dispatch; loading: boolean } | undefined diff --git a/src/reducers/experiment-reducers.ts b/src/context/experiment/experiment-reducers.ts similarity index 97% rename from src/reducers/experiment-reducers.ts rename to src/context/experiment/experiment-reducers.ts index f780995e..3304a21f 100644 --- a/src/reducers/experiment-reducers.ts +++ b/src/context/experiment/experiment-reducers.ts @@ -1,4 +1,4 @@ -import { versionInfo } from '../components/version-info' +import { versionInfo } from '../../components/version-info' import { CategoricalVariableType, DataPointType, @@ -6,8 +6,8 @@ import { ExperimentType, OptimizerConfig, ValueVariableType, -} from '../types/common' -import { assertUnreachable } from '../utility' +} from '../../types/common' +import { assertUnreachable } from '../../utility' import produce from 'immer' const calculateInitialPoints = (state: ExperimentType) => diff --git a/src/reducers/experiment-selectors.test.tsx b/src/context/experiment/experiment-selectors.test.tsx similarity index 93% rename from src/reducers/experiment-selectors.test.tsx rename to src/context/experiment/experiment-selectors.test.tsx index 8baa9169..1a083a20 100644 --- a/src/reducers/experiment-selectors.test.tsx +++ b/src/context/experiment/experiment-selectors.test.tsx @@ -1,4 +1,4 @@ -import { initialState, State } from '../store' +import { initialState, State } from '../../context/experiment/store' import { selectId, selectIsInitializing } from './experiment-selectors' describe('Experiment selectors', () => { diff --git a/src/reducers/experiment-selectors.ts b/src/context/experiment/experiment-selectors.ts similarity index 86% rename from src/reducers/experiment-selectors.ts rename to src/context/experiment/experiment-selectors.ts index aa654c41..7d949cd0 100644 --- a/src/reducers/experiment-selectors.ts +++ b/src/context/experiment/experiment-selectors.ts @@ -1,4 +1,4 @@ -import { State } from '../store' +import { State } from '../../context/experiment/store' export const selectExperiment = (state: State) => state.experiment export const selectId = (state: State) => selectExperiment(state).id diff --git a/src/context/experiment/index.ts b/src/context/experiment/index.ts new file mode 100644 index 00000000..9e6bbf94 --- /dev/null +++ b/src/context/experiment/index.ts @@ -0,0 +1,3 @@ +export * from './experiment-context' +export * from './experiment-selectors' +export * from './reducers' diff --git a/src/reducers/reducers.test.ts b/src/context/experiment/reducers.test.ts similarity index 99% rename from src/reducers/reducers.test.ts rename to src/context/experiment/reducers.test.ts index 89b59cb1..464e2608 100644 --- a/src/reducers/reducers.test.ts +++ b/src/context/experiment/reducers.test.ts @@ -1,6 +1,6 @@ import { ExperimentAction } from './experiment-reducers' import { rootReducer } from './reducers' -import { State, emptyExperiment } from '../store' +import { State, emptyExperiment } from '../../context/experiment/store' import { CategoricalVariableType, DataPointType, @@ -8,7 +8,7 @@ import { ExperimentType, OptimizerConfig, ValueVariableType, -} from '../types/common' +} from '../../types/common' describe('experiment reducer', () => { const initState: State = { diff --git a/src/reducers/reducers.ts b/src/context/experiment/reducers.ts similarity index 88% rename from src/reducers/reducers.ts rename to src/context/experiment/reducers.ts index ed63fb45..9ad869bf 100644 --- a/src/reducers/reducers.ts +++ b/src/context/experiment/reducers.ts @@ -1,5 +1,5 @@ -import { State } from '../store' -import { assertUnreachable } from '../utility' +import { State } from '../../context/experiment/store' +import { assertUnreachable } from '../../utility' import { ExperimentAction, experimentReducer } from './experiment-reducers' export type Action = ExperimentAction diff --git a/src/store.ts b/src/context/experiment/store.ts similarity index 87% rename from src/store.ts rename to src/context/experiment/store.ts index a51b1baf..d49348c0 100644 --- a/src/store.ts +++ b/src/context/experiment/store.ts @@ -1,5 +1,5 @@ -import { ExperimentType } from './types/common' -import { versionInfo } from './components/version-info' +import { ExperimentType } from '../../types/common' +import { versionInfo } from '../../components/version-info' export const emptyExperiment: ExperimentType = { id: '', diff --git a/src/context/global-context.tsx b/src/context/global/global-context.tsx similarity index 84% rename from src/context/global-context.tsx rename to src/context/global/global-context.tsx index 1eb630e2..d16f5d66 100644 --- a/src/context/global-context.tsx +++ b/src/context/global/global-context.tsx @@ -1,14 +1,9 @@ import { Theme, ThemeProvider } from '@mui/material' import * as React from 'react' -import ThemeSelector from '../components/theme-selector/theme-selector' -import { useLocalStorageReducer } from '../hooks/useLocalStorageReducer' -import { - State, - Dispatch, - initialState, - reducer, -} from '../reducers/global-reducer' -import { theme, themes, CustomTheme } from '../theme/theme' +import ThemeSelector from '../../components/theme-selector/theme-selector' +import { useLocalStorageReducer } from '../../hooks/useLocalStorageReducer' +import { State, Dispatch, initialState, reducer } from './global-reducer' +import { theme, themes, CustomTheme } from '../../theme/theme' declare module '@mui/styles/defaultTheme' { interface DefaultTheme extends Theme {} diff --git a/src/reducers/global-reducer.test.ts b/src/context/global/global-reducer.test.ts similarity index 98% rename from src/reducers/global-reducer.test.ts rename to src/context/global/global-reducer.test.ts index e175487d..6c1bffe7 100644 --- a/src/reducers/global-reducer.test.ts +++ b/src/context/global/global-reducer.test.ts @@ -1,4 +1,4 @@ -import { ThemeName } from '../theme/theme' +import { ThemeName } from '../../theme/theme' import { initialState, reducer, State, UISizeValue } from './global-reducer' const initState = initialState diff --git a/src/reducers/global-reducer.ts b/src/context/global/global-reducer.ts similarity index 97% rename from src/reducers/global-reducer.ts rename to src/context/global/global-reducer.ts index b752b7a5..59d8a248 100644 --- a/src/reducers/global-reducer.ts +++ b/src/context/global/global-reducer.ts @@ -1,6 +1,6 @@ -import { ThemeName } from '../theme/theme' +import { ThemeName } from '../../theme/theme' import produce from 'immer' -import { assertUnreachable } from '../utility' +import { assertUnreachable } from '../../utility' export type State = { debug: boolean diff --git a/src/context/global/index.ts b/src/context/global/index.ts new file mode 100644 index 00000000..96e9974f --- /dev/null +++ b/src/context/global/index.ts @@ -0,0 +1,2 @@ +export * from './global-context' +export * from './global-reducer' diff --git a/src/context/index.ts b/src/context/index.ts new file mode 100644 index 00000000..336ce12b --- /dev/null +++ b/src/context/index.ts @@ -0,0 +1 @@ +export {} diff --git a/src/hooks/useLocalStorageReducer.test.ts b/src/hooks/useLocalStorageReducer.test.ts index 3ccd9a0c..0e66cb44 100644 --- a/src/hooks/useLocalStorageReducer.test.ts +++ b/src/hooks/useLocalStorageReducer.test.ts @@ -1,7 +1,7 @@ import { useLocalStorageReducer } from './useLocalStorageReducer' import { renderHook } from '@testing-library/react' -import { initialState, State } from '../store' -import { Action } from '../reducers/reducers' +import { initialState, State } from '../context/experiment/store' +import { Action } from '../context/experiment' describe('useLocalStorageReducer', () => { it('can be called once', () => { diff --git a/src/utility/converters.test.ts b/src/utility/converters.test.ts index f3a88577..ae22590b 100644 --- a/src/utility/converters.test.ts +++ b/src/utility/converters.test.ts @@ -1,4 +1,4 @@ -import { initialState } from '../store' +import { initialState } from '../context/experiment/store' import { CategoricalVariableType, ExperimentType, diff --git a/src/utility/migration/migration.test.ts b/src/utility/migration/migration.test.ts index 1f586901..a5eeac9a 100644 --- a/src/utility/migration/migration.test.ts +++ b/src/utility/migration/migration.test.ts @@ -5,7 +5,7 @@ import version4 from './data-formats/4.json' import version3 from './data-formats/3.json' import version2 from './data-formats/2.json' import version1 from './data-formats/1.json' -import { emptyExperiment } from '../../store' +import { emptyExperiment } from '../../context/experiment/store' import { ExperimentType } from '../../types/common' import fs from 'fs' diff --git a/src/utility/ui-util.test.ts b/src/utility/ui-util.test.ts index 54419cc0..91548bec 100644 --- a/src/utility/ui-util.test.ts +++ b/src/utility/ui-util.test.ts @@ -1,4 +1,4 @@ -import { UISize, UISizeValue } from '../reducers/global-reducer' +import { UISize, UISizeValue } from '../context/global' import { getSize, isUIBig, isUISmall } from './ui-util' const uiSizes: UISize[] = [ diff --git a/src/utility/ui-util.ts b/src/utility/ui-util.ts index 2bf30f6f..2028f947 100644 --- a/src/utility/ui-util.ts +++ b/src/utility/ui-util.ts @@ -1,5 +1,5 @@ import { GridSize } from '@mui/material' -import { UISize, UISizeKey, UISizeValue } from '../reducers/global-reducer' +import { UISize, UISizeKey, UISizeValue } from '../context/global' export const isUIBig = (uiSizes: UISize[], key: UISizeKey): boolean => { return uiSizes.find(u => u.key === key)?.value === UISizeValue.Big From cf4b7fda7cb1ba95680d96dd3a7a088484cf1594 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Sat, 9 Jul 2022 09:03:40 +0000 Subject: [PATCH 2/4] Introduce module alias --- jest.config.js | 1 + pages/_app.tsx | 2 +- pages/experiment/[experimentid].tsx | 14 +++++++------- pages/index.tsx | 2 +- .../data-points/data-points-reducer.test.ts | 2 +- .../data-points/data-points-reducer.ts | 2 +- src/components/data-points/data-points.tsx | 4 ++-- src/components/details.tsx | 2 +- src/components/download-csv-button.tsx | 6 +++--- .../editable-table-collapsed-row.tsx | 2 +- .../editable-table-expanded-row.tsx | 2 +- .../editable-table/editable-table-row.tsx | 2 +- .../editable-table/editable-table.tsx | 2 +- src/components/experiment/configurationTab.tsx | 6 +++--- src/components/experiment/dataEntryTab.tsx | 4 ++-- src/components/experiment/debug-experiment.tsx | 2 +- src/components/experiment/experiment.tsx | 18 +++++++----------- .../experiment/tabbed-experiment.tsx | 14 +++++--------- src/components/home/home.tsx | 4 ++-- .../input-model/categorical-variable.tsx | 4 ++-- src/components/input-model/optimizer-model.tsx | 2 +- src/components/input-model/value-variable.tsx | 8 ++++---- src/components/input-model/variable-editor.tsx | 2 +- src/components/json-editor/json-editor.tsx | 8 ++++---- src/components/layout/layout.tsx | 2 +- src/components/optimizer-configurator.tsx | 4 ++-- src/components/plots/plot-item.tsx | 2 +- src/components/plots/plots.tsx | 6 +++--- .../result-data/experimentation-guide.tsx | 8 ++++---- .../result-data/initialization-progress.tsx | 2 +- .../result-data/next-experiments.tsx | 2 +- .../summary-configuration.tsx | 4 ++-- .../theme-selector/theme-selector.tsx | 2 +- src/components/upload-csv-button.tsx | 6 +++--- .../experiment/experiment-context.test.tsx | 2 +- src/context/experiment/experiment-context.tsx | 12 ++++++------ src/context/experiment/experiment-reducers.ts | 6 +++--- .../experiment/experiment-selectors.test.tsx | 2 +- src/context/experiment/experiment-selectors.ts | 2 +- src/context/experiment/reducers.test.ts | 4 ++-- src/context/experiment/reducers.ts | 4 ++-- src/context/experiment/store.ts | 4 ++-- src/context/global/global-context.tsx | 4 ++-- src/context/global/global-reducer.ts | 2 +- src/hooks/useLocalStorageReducer.test.ts | 4 ++-- src/utility/converters.test.ts | 4 ++-- src/utility/converters.ts | 2 +- src/utility/migration/migration.test.ts | 6 +++--- src/utility/migration/migration.ts | 2 +- src/utility/ui-util.test.ts | 2 +- src/utility/ui-util.ts | 2 +- tsconfig.json | 4 +++- 52 files changed, 108 insertions(+), 113 deletions(-) diff --git a/jest.config.js b/jest.config.js index b546915a..ad908a94 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,6 +4,7 @@ module.exports = { watchPathIgnorePatterns: ['/boost-tests-', '/tmp/'], moduleNameMapper: { '\\.(scss|sass|css)$': 'identity-obj-proxy', + '^@/(.*)': ['/src/$1'], }, testEnvironment: 'jsdom', transform: { diff --git a/pages/_app.tsx b/pages/_app.tsx index 76a7b414..29ef809b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,7 +4,7 @@ import { AppProps } from 'next/app' import CssBaseline from '@mui/material/CssBaseline' import { CacheProvider, EmotionCache } from '@emotion/react' import createEmotionCache from '../src/createEmotionCache' -import { GlobalStateProvider } from '../src/context/global' +import { GlobalStateProvider } from '@/context/global' // Client-side cache, shared for the whole session of the user in the browser. const clientSideEmotionCache = createEmotionCache() diff --git a/pages/experiment/[experimentid].tsx b/pages/experiment/[experimentid].tsx index 93671ba8..be13d131 100644 --- a/pages/experiment/[experimentid].tsx +++ b/pages/experiment/[experimentid].tsx @@ -1,11 +1,11 @@ import { useRouter } from 'next/router' -import { ExperimentProvider } from '../../src/context/experiment' -import TabbedExperiment from '../../src/components/experiment/tabbed-experiment' -import Experiment from '../../src/components/experiment/experiment' -import DebugExperiment from '../../src/components/experiment/debug-experiment' -import { useGlobal } from '../../src/context/global' -import LoadingExperiment from '../../src/components/experiment/loading-experiment' -import JsonEditor from '../../src/components/json-editor/json-editor' +import { ExperimentProvider } from '@/context/experiment' +import TabbedExperiment from '@/components/experiment/tabbed-experiment' +import Experiment from '@/components/experiment/experiment' +import DebugExperiment from '@/components/experiment/debug-experiment' +import { useGlobal } from '@/context/global' +import LoadingExperiment from '@/components/experiment/loading-experiment' +import JsonEditor from '@/components/json-editor/json-editor' export default function ExperimentContainer() { const router = useRouter() diff --git a/pages/index.tsx b/pages/index.tsx index 715e5feb..768f1c5c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import type { NextPage } from 'next' -import Home from '../src/components/home/home' +import Home from '@/components/home/home' const Index: NextPage = () => { return diff --git a/src/components/data-points/data-points-reducer.test.ts b/src/components/data-points/data-points-reducer.test.ts index 5d199c82..f2e49df5 100644 --- a/src/components/data-points/data-points-reducer.test.ts +++ b/src/components/data-points/data-points-reducer.test.ts @@ -1,5 +1,5 @@ import { dataPointsReducer, DataPointsState } from './data-points-reducer' -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' describe('data points reducer', () => { const initialState: DataPointsState = { diff --git a/src/components/data-points/data-points-reducer.ts b/src/components/data-points/data-points-reducer.ts index 6549bc99..37273aa4 100644 --- a/src/components/data-points/data-points-reducer.ts +++ b/src/components/data-points/data-points-reducer.ts @@ -1,4 +1,4 @@ -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' interface EditRow { row: TableDataRow diff --git a/src/components/data-points/data-points.tsx b/src/components/data-points/data-points.tsx index 854cc4be..571c0008 100644 --- a/src/components/data-points/data-points.tsx +++ b/src/components/data-points/data-points.tsx @@ -1,6 +1,6 @@ import { CircularProgress, IconButton, Box, Tooltip } from '@mui/material' import { useCallback, useEffect, useMemo, useReducer } from 'react' -import { useGlobal } from '../../context/global' +import { useGlobal } from '@/context/global' import { DataPointType, TableDataPoint, @@ -10,7 +10,7 @@ import { CategoricalVariableType, DataPointTypeValue, ScoreVariableType, -} from '../../types/common' +} from '@/types/common' import { EditableTable } from '../editable-table/editable-table' import SwapVertIcon from '@mui/icons-material/SwapVert' import { TitleCard } from '../title-card/title-card' diff --git a/src/components/details.tsx b/src/components/details.tsx index ecbdcf6c..29bbf39c 100644 --- a/src/components/details.tsx +++ b/src/components/details.tsx @@ -1,5 +1,5 @@ import { TextField } from '@mui/material' -import { Info } from '../types/common' +import { Info } from '@/types/common' import { TitleCard } from './title-card/title-card' type DetailsProps = { diff --git a/src/components/download-csv-button.tsx b/src/components/download-csv-button.tsx index 76aad7f5..00cc2e76 100644 --- a/src/components/download-csv-button.tsx +++ b/src/components/download-csv-button.tsx @@ -1,7 +1,7 @@ import { IconButton, Tooltip } from '@mui/material' -import { useExperiment } from '../context/experiment' -import { dataPointsToCSV } from '../utility/converters' -import { saveCSVToLocalFile } from '../utility/save-to-local-file' +import { useExperiment } from '@/context/experiment' +import { dataPointsToCSV } from '@/utility/converters' +import { saveCSVToLocalFile } from '@/utility/save-to-local-file' import GetAppIcon from '@mui/icons-material/GetApp' interface DownloadCSVButtonProps { diff --git a/src/components/editable-table/editable-table-collapsed-row.tsx b/src/components/editable-table/editable-table-collapsed-row.tsx index 646f81ac..6982ff05 100644 --- a/src/components/editable-table/editable-table-collapsed-row.tsx +++ b/src/components/editable-table/editable-table-collapsed-row.tsx @@ -1,6 +1,6 @@ import useStyles from './editable-table-collapsed-row.style' import { IconButton, TableCell, TableRow, Tooltip } from '@mui/material' -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' import { EditableTableCell } from './editable-table-cell' import AddIcon from '@mui/icons-material/Add' import EditIcon from '@mui/icons-material/Edit' diff --git a/src/components/editable-table/editable-table-expanded-row.tsx b/src/components/editable-table/editable-table-expanded-row.tsx index c3e3a208..50418a4f 100644 --- a/src/components/editable-table/editable-table-expanded-row.tsx +++ b/src/components/editable-table/editable-table-expanded-row.tsx @@ -9,7 +9,7 @@ import { TableHead, TableRow, } from '@mui/material' -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' import { EditableTableCell } from './editable-table-cell' import { useState } from 'react' diff --git a/src/components/editable-table/editable-table-row.tsx b/src/components/editable-table/editable-table-row.tsx index b3123d5c..2ee0910c 100644 --- a/src/components/editable-table/editable-table-row.tsx +++ b/src/components/editable-table/editable-table-row.tsx @@ -1,4 +1,4 @@ -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' import { useState } from 'react' import { EditableTableExpandedRow } from './editable-table-expanded-row' import { EditableTableCollapsedRow } from './editable-table-collapsed-row' diff --git a/src/components/editable-table/editable-table.tsx b/src/components/editable-table/editable-table.tsx index 7a303716..52e43146 100644 --- a/src/components/editable-table/editable-table.tsx +++ b/src/components/editable-table/editable-table.tsx @@ -6,7 +6,7 @@ import { TableHead, TableRow, } from '@mui/material' -import { TableDataRow } from '../../types/common' +import { TableDataRow } from '@/types/common' import { EditableTableRow } from './editable-table-row' import { getRowIndex, getRowId } from './editable-table-util' import useStyles from './editable-table.style' diff --git a/src/components/experiment/configurationTab.tsx b/src/components/experiment/configurationTab.tsx index 33c9129b..703ca6db 100644 --- a/src/components/experiment/configurationTab.tsx +++ b/src/components/experiment/configurationTab.tsx @@ -1,11 +1,11 @@ import { Grid } from '@mui/material' -import { useExperiment } from '../../context/experiment' -import { useGlobal } from '../../context/global' +import { useExperiment } from '@/context/experiment' +import { useGlobal } from '@/context/global' import { ValueVariableType, CategoricalVariableType, OptimizerConfig, -} from '../../types/common' +} from '@/types/common' import Details from '../details' import OptimizerModel from '../input-model/optimizer-model' import OptimizerConfigurator from '../optimizer-configurator' diff --git a/src/components/experiment/dataEntryTab.tsx b/src/components/experiment/dataEntryTab.tsx index 333d5c3f..4f717ed9 100644 --- a/src/components/experiment/dataEntryTab.tsx +++ b/src/components/experiment/dataEntryTab.tsx @@ -1,6 +1,6 @@ import { Grid } from '@mui/material' -import { useExperiment } from '../../context/experiment' -import { DataPointType } from '../../types/common' +import { useExperiment } from '@/context/experiment' +import { DataPointType } from '@/types/common' import DataPoints from '../data-points/data-points' import { ExperimentationGuide } from '../result-data/experimentation-guide' diff --git a/src/components/experiment/debug-experiment.tsx b/src/components/experiment/debug-experiment.tsx index 514f8dc6..7aaff72a 100644 --- a/src/components/experiment/debug-experiment.tsx +++ b/src/components/experiment/debug-experiment.tsx @@ -1,5 +1,5 @@ import { Card, CardContent } from '@mui/material' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' export default function DebugExperiment() { const { state } = useExperiment() diff --git a/src/components/experiment/experiment.tsx b/src/components/experiment/experiment.tsx index 35e0026f..d85d86dc 100644 --- a/src/components/experiment/experiment.tsx +++ b/src/components/experiment/experiment.tsx @@ -15,28 +15,24 @@ import { Alert } from '@mui/material' import Details from '../details' import DataPoints from '../data-points/data-points' import { useStyles } from './experiment.style' -import { - useExperiment, - runExperiment, - useSelector, -} from '../../context/experiment' +import { useExperiment, runExperiment, useSelector } from '@/context/experiment' import React, { useState } from 'react' import { ValueVariableType, CategoricalVariableType, OptimizerConfig, DataPointType, -} from '../../types/common' +} from '@/types/common' import LoadingExperiment from './loading-experiment' import { ExperimentationGuide } from '../result-data/experimentation-guide' import LoadingButton from '../loading-button/loading-button' import { Plots } from '../plots/plots' -import { saveObjectToLocalFile } from '../../utility/save-to-local-file' -import { useGlobal } from '../../context/global' -import { UISizeValue } from '../../context/global' -import { getSize } from '../../utility/ui-util' +import { saveObjectToLocalFile } from '@/utility/save-to-local-file' +import { useGlobal } from '@/context/global' +import { UISizeValue } from '@/context/global' +import { getSize } from '@/utility/ui-util' import { AlertColor } from '@mui/material' -import { selectIsInitializing } from '../../context/experiment' +import { selectIsInitializing } from '@/context/experiment' type SnackbarMessage = { message: string diff --git a/src/components/experiment/tabbed-experiment.tsx b/src/components/experiment/tabbed-experiment.tsx index e437f490..1d51290e 100644 --- a/src/components/experiment/tabbed-experiment.tsx +++ b/src/components/experiment/tabbed-experiment.tsx @@ -12,21 +12,17 @@ import Layout from '../layout/layout' import { Alert } from '@mui/material' import { TabContext, TabList, TabPanel } from '@mui/lab' import { useStyles } from './experiment.style' -import { - useExperiment, - runExperiment, - useSelector, -} from '../../context/experiment' +import { useExperiment, runExperiment, useSelector } from '@/context/experiment' import React, { useState } from 'react' import LoadingExperiment from './loading-experiment' import LoadingButton from '../loading-button/loading-button' import { Plots } from '../plots/plots' -import { saveObjectToLocalFile } from '../../utility/save-to-local-file' -import { useGlobal } from '../../context/global' +import { saveObjectToLocalFile } from '@/utility/save-to-local-file' +import { useGlobal } from '@/context/global' import { ConfigurationTab } from './configurationTab' import { DataEntryTab } from './dataEntryTab' -import { State } from '../../context/global' -import { selectIsInitializing } from '../../context/experiment' +import { State } from '@/context/global' +import { selectIsInitializing } from '@/context/experiment' type SnackbarMessage = { message: string diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx index 8b5532ca..65d23cf1 100644 --- a/src/components/home/home.tsx +++ b/src/components/home/home.tsx @@ -20,8 +20,8 @@ import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt' import ChevronRightIcon from '@mui/icons-material/ChevronRight' import DeleteIcon from '@mui/icons-material/Delete' import { buildPath, paths } from '../../../paths' -import { ExperimentType } from '../../types/common' -import { useGlobal } from '../../context/global' +import { ExperimentType } from '@/types/common' +import { useGlobal } from '@/context/global' import { v4 as uuid } from 'uuid' import { reducer } from './home-reducer' import { CreateOrOverwriteDialog } from '../create-or-overwrite-dialog/create-or-overwrite-dialog' diff --git a/src/components/input-model/categorical-variable.tsx b/src/components/input-model/categorical-variable.tsx index 4d6397af..ad866fa9 100644 --- a/src/components/input-model/categorical-variable.tsx +++ b/src/components/input-model/categorical-variable.tsx @@ -4,8 +4,8 @@ import { useState, useCallback, useEffect } from 'react' import { useForm } from 'react-hook-form' import CategoricalVariableOptions from './categorical-variable-options' import { useStyles } from './categorical-variable.style' -import { CategoricalVariableType } from '../../types/common' -import { validation } from '../../utility/forms/validation' +import { CategoricalVariableType } from '@/types/common' +import { validation } from '@/utility/forms/validation' type CategoricalVariableProps = { isDisabled: boolean diff --git a/src/components/input-model/optimizer-model.tsx b/src/components/input-model/optimizer-model.tsx index f462f16b..214270b7 100644 --- a/src/components/input-model/optimizer-model.tsx +++ b/src/components/input-model/optimizer-model.tsx @@ -9,7 +9,7 @@ import { Typography, Tooltip, } from '@mui/material' -import { CategoricalVariableType, ValueVariableType } from '../../types/common' +import { CategoricalVariableType, ValueVariableType } from '@/types/common' import DeleteIcon from '@mui/icons-material/Delete' import VariableEditor from './variable-editor' import useStyles from './optimizer-model.style' diff --git a/src/components/input-model/value-variable.tsx b/src/components/input-model/value-variable.tsx index 5bde0fcd..16deb9d5 100644 --- a/src/components/input-model/value-variable.tsx +++ b/src/components/input-model/value-variable.tsx @@ -2,10 +2,10 @@ import { Box, Button } from '@mui/material' import { useEffect, useMemo } from 'react' import { useForm } from 'react-hook-form' import useStyles from './value-variable.style' -import { ValueVariableInputType, ValueVariableType } from '../../types/common' -import { FormInputText } from '../../utility/forms' -import { FormRadioGroup } from '../../utility/forms/form-radio-group' -import { validation } from '../../utility/forms/validation' +import { ValueVariableInputType, ValueVariableType } from '@/types/common' +import { FormInputText } from '@/utility/forms' +import { FormRadioGroup } from '@/utility/forms/form-radio-group' +import { validation } from '@/utility/forms/validation' type ValueVariableProps = { isDisabled: boolean diff --git a/src/components/input-model/variable-editor.tsx b/src/components/input-model/variable-editor.tsx index a914a4fd..c5e7e919 100644 --- a/src/components/input-model/variable-editor.tsx +++ b/src/components/input-model/variable-editor.tsx @@ -3,7 +3,7 @@ import ValueVariable from './value-variable' import { Box, Tab, Tabs } from '@mui/material' import { useState, ChangeEvent } from 'react' import useStyles from './variable-editor.style' -import { CategoricalVariableType, ValueVariableType } from '../../types/common' +import { CategoricalVariableType, ValueVariableType } from '@/types/common' type VariableEditorProps = { isAddVariableDisabled: boolean diff --git a/src/components/json-editor/json-editor.tsx b/src/components/json-editor/json-editor.tsx index e50ba888..c33895a4 100644 --- a/src/components/json-editor/json-editor.tsx +++ b/src/components/json-editor/json-editor.tsx @@ -8,12 +8,12 @@ import { Typography, } from '@mui/material' import { ChangeEvent, useEffect, useState } from 'react' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' import useStyles from './json-editor.style' -import { ExperimentType } from '../../types/common' +import { ExperimentType } from '@/types/common' import CloseIcon from '@mui/icons-material/Close' -import { useGlobal } from '../../context/global' -import { errorMessage } from '../../utility' +import { useGlobal } from '@/context/global' +import { errorMessage } from '@/utility' type DisplayedResults = { id: string diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index b3d013b3..91ace6bb 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -9,7 +9,7 @@ import { } from '@mui/material' import Link from 'next/link' import useStyles from './layout.style' -import { useGlobal } from '../../context/global' +import { useGlobal } from '@/context/global' import { VersionInfo } from '../version-info' import { useState } from 'react' diff --git a/src/components/optimizer-configurator.tsx b/src/components/optimizer-configurator.tsx index 17286713..a1bbb489 100644 --- a/src/components/optimizer-configurator.tsx +++ b/src/components/optimizer-configurator.tsx @@ -1,7 +1,7 @@ -import { OptimizerConfig } from '../types/common' +import { OptimizerConfig } from '@/types/common' import { TitleCard } from './title-card/title-card' import { TextField } from '@mui/material' -import { useGlobal } from '../context/global' +import { useGlobal } from '@/context/global' type OptimizerConfiguratorProps = { config: OptimizerConfig diff --git a/src/components/plots/plot-item.tsx b/src/components/plots/plot-item.tsx index 5a5459fa..d7929833 100644 --- a/src/components/plots/plot-item.tsx +++ b/src/components/plots/plot-item.tsx @@ -1,6 +1,6 @@ import { Fragment } from 'react' import { Typography } from '@mui/material' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' import useStyles from './plot-item.style' interface PlotItemProps { diff --git a/src/components/plots/plots.tsx b/src/components/plots/plots.tsx index ee1d72db..476c9bde 100644 --- a/src/components/plots/plots.tsx +++ b/src/components/plots/plots.tsx @@ -1,10 +1,10 @@ -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' import useStyles from './plots.style' import { TitleCard } from '../title-card/title-card' import { Tooltip, IconButton, Hidden } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' -import { useGlobal } from '../../context/global' -import { isUIBig } from '../../utility/ui-util' +import { useGlobal } from '@/context/global' +import { isUIBig } from '@/utility/ui-util' import { PlotList } from './plot-list' import { PlotItem } from './plot-item' diff --git a/src/components/result-data/experimentation-guide.tsx b/src/components/result-data/experimentation-guide.tsx index 291a660b..daa5cd05 100644 --- a/src/components/result-data/experimentation-guide.tsx +++ b/src/components/result-data/experimentation-guide.tsx @@ -1,15 +1,15 @@ -import { useSelector } from '../../context/experiment' +import { useSelector } from '@/context/experiment' import { Suggestions } from './suggestions' import { TitleCard } from '../title-card/title-card' import { Tooltip, IconButton, Hidden, Box } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' -import { useGlobal } from '../../context/global' -import { isUIBig } from '../../utility/ui-util' +import { useGlobal } from '@/context/global' +import { isUIBig } from '@/utility/ui-util' import useStyles from './experimentation-guide.style' import { SingleDataPoint } from './single-data-point' import { NextExperiments } from './next-experiments' import { InitializationProgress } from './initialization-progress' -import { selectIsInitializing } from '../../context/experiment' +import { selectIsInitializing } from '@/context/experiment' interface ResultDataProps { nextValues: string[][] diff --git a/src/components/result-data/initialization-progress.tsx b/src/components/result-data/initialization-progress.tsx index 3dfb8f88..a5544887 100644 --- a/src/components/result-data/initialization-progress.tsx +++ b/src/components/result-data/initialization-progress.tsx @@ -6,7 +6,7 @@ import { Typography, } from '@mui/material' import CheckIcon from '@mui/icons-material/Check' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' import { useEffect, useState } from 'react' export const InitializationProgress = () => { diff --git a/src/components/result-data/next-experiments.tsx b/src/components/result-data/next-experiments.tsx index 3d808134..1e639c97 100644 --- a/src/components/result-data/next-experiments.tsx +++ b/src/components/result-data/next-experiments.tsx @@ -1,6 +1,6 @@ import { Divider, Stack, TextField } from '@mui/material' import { ChangeEvent } from 'react' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' export const NextExperiments = () => { const { diff --git a/src/components/summary-configuration/summary-configuration.tsx b/src/components/summary-configuration/summary-configuration.tsx index 059855c3..7496d027 100644 --- a/src/components/summary-configuration/summary-configuration.tsx +++ b/src/components/summary-configuration/summary-configuration.tsx @@ -16,9 +16,9 @@ import { import LensIcon from '@mui/icons-material/Lens' import Settings from '@mui/icons-material/Settings' import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye' -import { useExperiment } from '../../context/experiment' +import { useExperiment } from '@/context/experiment' import useStyles from './summary-configuration.style' -import { useGlobal } from '../../context/global' +import { useGlobal } from '@/context/global' export const SummaryConfiguration = () => { const { diff --git a/src/components/theme-selector/theme-selector.tsx b/src/components/theme-selector/theme-selector.tsx index 4f648ec6..57cf1944 100644 --- a/src/components/theme-selector/theme-selector.tsx +++ b/src/components/theme-selector/theme-selector.tsx @@ -1,5 +1,5 @@ import { Box, Button } from '@mui/material' -import { useGlobal } from '../../context/global' +import { useGlobal } from '@/context/global' import useStyles from './theme-selector.style' import { themes } from '../../theme/theme' diff --git a/src/components/upload-csv-button.tsx b/src/components/upload-csv-button.tsx index 26581452..c1e07255 100644 --- a/src/components/upload-csv-button.tsx +++ b/src/components/upload-csv-button.tsx @@ -1,7 +1,7 @@ import { IconButton, Input, Tooltip } from '@mui/material' -import { useExperiment } from '../context/experiment' -import { DataPointType } from '../types/common' -import { csvToDataPoints } from '../utility/converters' +import { useExperiment } from '@/context/experiment' +import { DataPointType } from '@/types/common' +import { csvToDataPoints } from '@/utility/converters' import PublishIcon from '@mui/icons-material/Publish' import { ChangeEvent } from 'react' diff --git a/src/context/experiment/experiment-context.test.tsx b/src/context/experiment/experiment-context.test.tsx index 7f199da7..50d99a04 100644 --- a/src/context/experiment/experiment-context.test.tsx +++ b/src/context/experiment/experiment-context.test.tsx @@ -1,6 +1,6 @@ import { renderHook } from '@testing-library/react' import { FC } from 'react' -import { State } from '../../context/experiment/store' +import { State } from '@/context/experiment/store' import { useExperiment, ExperimentProvider, diff --git a/src/context/experiment/experiment-context.tsx b/src/context/experiment/experiment-context.tsx index f7d0a583..145ad14d 100644 --- a/src/context/experiment/experiment-context.tsx +++ b/src/context/experiment/experiment-context.tsx @@ -1,16 +1,16 @@ import * as React from 'react' -import { versionInfo } from '../../components/version-info' -import { useLocalStorageReducer } from '../../hooks/useLocalStorageReducer' +import { versionInfo } from '@/components/version-info' +import { useLocalStorageReducer } from '@/hooks/useLocalStorageReducer' import { Configuration, DefaultApi, OptimizerapiOptimizerRunRequest, } from '../../../openapi' import { Dispatch, rootReducer } from './reducers' -import { initialState, State } from '../../context/experiment/store' -import { ExperimentResultType, ExperimentType } from '../../types/common' -import { calculateData, calculateSpace } from '../../utility/converters' -import { migrate } from '../../utility/migration/migration' +import { initialState, State } from '@/context/experiment/store' +import { ExperimentResultType, ExperimentType } from '@/types/common' +import { calculateData, calculateSpace } from '@/utility/converters' +import { migrate } from '@/utility/migration/migration' import { useGlobal } from '../global/' const ExperimentContext = React.createContext< diff --git a/src/context/experiment/experiment-reducers.ts b/src/context/experiment/experiment-reducers.ts index 3304a21f..95793eed 100644 --- a/src/context/experiment/experiment-reducers.ts +++ b/src/context/experiment/experiment-reducers.ts @@ -1,4 +1,4 @@ -import { versionInfo } from '../../components/version-info' +import { versionInfo } from '@/components/version-info' import { CategoricalVariableType, DataPointType, @@ -6,8 +6,8 @@ import { ExperimentType, OptimizerConfig, ValueVariableType, -} from '../../types/common' -import { assertUnreachable } from '../../utility' +} from '@/types/common' +import { assertUnreachable } from '@/utility' import produce from 'immer' const calculateInitialPoints = (state: ExperimentType) => diff --git a/src/context/experiment/experiment-selectors.test.tsx b/src/context/experiment/experiment-selectors.test.tsx index 1a083a20..0832b224 100644 --- a/src/context/experiment/experiment-selectors.test.tsx +++ b/src/context/experiment/experiment-selectors.test.tsx @@ -1,4 +1,4 @@ -import { initialState, State } from '../../context/experiment/store' +import { initialState, State } from '@/context/experiment/store' import { selectId, selectIsInitializing } from './experiment-selectors' describe('Experiment selectors', () => { diff --git a/src/context/experiment/experiment-selectors.ts b/src/context/experiment/experiment-selectors.ts index 7d949cd0..f8ffbef7 100644 --- a/src/context/experiment/experiment-selectors.ts +++ b/src/context/experiment/experiment-selectors.ts @@ -1,4 +1,4 @@ -import { State } from '../../context/experiment/store' +import { State } from '@/context/experiment/store' export const selectExperiment = (state: State) => state.experiment export const selectId = (state: State) => selectExperiment(state).id diff --git a/src/context/experiment/reducers.test.ts b/src/context/experiment/reducers.test.ts index 464e2608..5b294b6c 100644 --- a/src/context/experiment/reducers.test.ts +++ b/src/context/experiment/reducers.test.ts @@ -1,6 +1,6 @@ import { ExperimentAction } from './experiment-reducers' import { rootReducer } from './reducers' -import { State, emptyExperiment } from '../../context/experiment/store' +import { State, emptyExperiment } from '@/context/experiment/store' import { CategoricalVariableType, DataPointType, @@ -8,7 +8,7 @@ import { ExperimentType, OptimizerConfig, ValueVariableType, -} from '../../types/common' +} from '@/types/common' describe('experiment reducer', () => { const initState: State = { diff --git a/src/context/experiment/reducers.ts b/src/context/experiment/reducers.ts index 9ad869bf..840626b7 100644 --- a/src/context/experiment/reducers.ts +++ b/src/context/experiment/reducers.ts @@ -1,5 +1,5 @@ -import { State } from '../../context/experiment/store' -import { assertUnreachable } from '../../utility' +import { State } from '@/context/experiment/store' +import { assertUnreachable } from '@/utility' import { ExperimentAction, experimentReducer } from './experiment-reducers' export type Action = ExperimentAction diff --git a/src/context/experiment/store.ts b/src/context/experiment/store.ts index d49348c0..4720b1c5 100644 --- a/src/context/experiment/store.ts +++ b/src/context/experiment/store.ts @@ -1,5 +1,5 @@ -import { ExperimentType } from '../../types/common' -import { versionInfo } from '../../components/version-info' +import { ExperimentType } from '@/types/common' +import { versionInfo } from '@/components/version-info' export const emptyExperiment: ExperimentType = { id: '', diff --git a/src/context/global/global-context.tsx b/src/context/global/global-context.tsx index d16f5d66..1e6cca7f 100644 --- a/src/context/global/global-context.tsx +++ b/src/context/global/global-context.tsx @@ -1,7 +1,7 @@ import { Theme, ThemeProvider } from '@mui/material' import * as React from 'react' -import ThemeSelector from '../../components/theme-selector/theme-selector' -import { useLocalStorageReducer } from '../../hooks/useLocalStorageReducer' +import ThemeSelector from '@/components/theme-selector/theme-selector' +import { useLocalStorageReducer } from '@/hooks/useLocalStorageReducer' import { State, Dispatch, initialState, reducer } from './global-reducer' import { theme, themes, CustomTheme } from '../../theme/theme' diff --git a/src/context/global/global-reducer.ts b/src/context/global/global-reducer.ts index 59d8a248..c7647f3e 100644 --- a/src/context/global/global-reducer.ts +++ b/src/context/global/global-reducer.ts @@ -1,6 +1,6 @@ import { ThemeName } from '../../theme/theme' import produce from 'immer' -import { assertUnreachable } from '../../utility' +import { assertUnreachable } from '@/utility' export type State = { debug: boolean diff --git a/src/hooks/useLocalStorageReducer.test.ts b/src/hooks/useLocalStorageReducer.test.ts index 0e66cb44..0ad012ec 100644 --- a/src/hooks/useLocalStorageReducer.test.ts +++ b/src/hooks/useLocalStorageReducer.test.ts @@ -1,7 +1,7 @@ import { useLocalStorageReducer } from './useLocalStorageReducer' import { renderHook } from '@testing-library/react' -import { initialState, State } from '../context/experiment/store' -import { Action } from '../context/experiment' +import { initialState, State } from '@/context/experiment/store' +import { Action } from '@/context/experiment' describe('useLocalStorageReducer', () => { it('can be called once', () => { diff --git a/src/utility/converters.test.ts b/src/utility/converters.test.ts index ae22590b..ea5f20cc 100644 --- a/src/utility/converters.test.ts +++ b/src/utility/converters.test.ts @@ -1,10 +1,10 @@ -import { initialState } from '../context/experiment/store' +import { initialState } from '@/context/experiment/store' import { CategoricalVariableType, ExperimentType, ScoreVariableType, ValueVariableType, -} from '../types/common' +} from '@/types/common' import { calculateSpace, calculateData, diff --git a/src/utility/converters.ts b/src/utility/converters.ts index c0bc3959..a385e500 100644 --- a/src/utility/converters.ts +++ b/src/utility/converters.ts @@ -7,7 +7,7 @@ import { ScoreVariableType, SpaceType, ValueVariableType, -} from '../types/common' +} from '@/types/common' export const calculateSpace = (experiment: ExperimentType): SpaceType => { const numerical: SpaceType = experiment.valueVariables.map(v => { diff --git a/src/utility/migration/migration.test.ts b/src/utility/migration/migration.test.ts index a5eeac9a..f0378c28 100644 --- a/src/utility/migration/migration.test.ts +++ b/src/utility/migration/migration.test.ts @@ -5,13 +5,13 @@ import version4 from './data-formats/4.json' import version3 from './data-formats/3.json' import version2 from './data-formats/2.json' import version1 from './data-formats/1.json' -import { emptyExperiment } from '../../context/experiment/store' -import { ExperimentType } from '../../types/common' +import { emptyExperiment } from '@/context/experiment/store' +import { ExperimentType } from '@/types/common' import fs from 'fs' const loadLatestJson = () => { const fileVersions: number[] = fs - .readdirSync('src/utility/migration/data-formats') + .readdirSync('./src/utility/migration/data-formats') .map(f => parseInt(f.replace(/[^0-9]/, ''))) const latestVersion = Math.max(...fileVersions) return JSON.parse( diff --git a/src/utility/migration/migration.ts b/src/utility/migration/migration.ts index 56220173..feb36683 100644 --- a/src/utility/migration/migration.ts +++ b/src/utility/migration/migration.ts @@ -1,5 +1,5 @@ import compareVersions from 'compare-versions' -import { ExperimentType } from '../../types/common' +import { ExperimentType } from '@/types/common' //TODO: Compare json to current ExperimentType and set missing fields to default values? export const migrate = ( diff --git a/src/utility/ui-util.test.ts b/src/utility/ui-util.test.ts index 91548bec..7c353820 100644 --- a/src/utility/ui-util.test.ts +++ b/src/utility/ui-util.test.ts @@ -1,4 +1,4 @@ -import { UISize, UISizeValue } from '../context/global' +import { UISize, UISizeValue } from '@/context/global' import { getSize, isUIBig, isUISmall } from './ui-util' const uiSizes: UISize[] = [ diff --git a/src/utility/ui-util.ts b/src/utility/ui-util.ts index 2028f947..48c76aec 100644 --- a/src/utility/ui-util.ts +++ b/src/utility/ui-util.ts @@ -1,5 +1,5 @@ import { GridSize } from '@mui/material' -import { UISize, UISizeKey, UISizeValue } from '../context/global' +import { UISize, UISizeKey, UISizeValue } from '@/context/global' export const isUIBig = (uiSizes: UISize[], key: UISizeKey): boolean => { return uiSizes.find(u => u.key === key)?.value === UISizeValue.Big diff --git a/tsconfig.json b/tsconfig.json index ad6ae103..e9dddc08 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -21,7 +21,9 @@ "noUnusedParameters": true, "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true, - "strictNullChecks": true + "strictNullChecks": true, + "baseUrl": ".", + "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "global-fetch.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"] From 930fbfe7cf7c742af9663a067a8c951ca8496be2 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Sat, 9 Jul 2022 09:03:40 +0000 Subject: [PATCH 3/4] Add selectors for global context --- .../experiment/configurationTab.tsx | 10 +++--- src/context/experiment/experiment-context.tsx | 11 +++--- ....test.tsx => experiment-selectors.test.ts} | 0 src/context/global/global-context.test.tsx | 35 +++++++++++++++++++ src/context/global/global-context.tsx | 12 +++++-- src/context/global/global-selectors.test.ts | 21 +++++++++++ src/context/global/global-selectors.ts | 8 +++++ 7 files changed, 83 insertions(+), 14 deletions(-) rename src/context/experiment/{experiment-selectors.test.tsx => experiment-selectors.test.ts} (100%) create mode 100644 src/context/global/global-context.test.tsx create mode 100644 src/context/global/global-selectors.test.ts create mode 100644 src/context/global/global-selectors.ts diff --git a/src/components/experiment/configurationTab.tsx b/src/components/experiment/configurationTab.tsx index 703ca6db..4a205260 100644 --- a/src/components/experiment/configurationTab.tsx +++ b/src/components/experiment/configurationTab.tsx @@ -1,6 +1,6 @@ import { Grid } from '@mui/material' import { useExperiment } from '@/context/experiment' -import { useGlobal } from '@/context/global' +import { useSelector } from '@/context/global' import { ValueVariableType, CategoricalVariableType, @@ -9,17 +9,15 @@ import { import Details from '../details' import OptimizerModel from '../input-model/optimizer-model' import OptimizerConfigurator from '../optimizer-configurator' +import { selectAdvancedConfiguration } from '@/context/global/global-selectors' export const ConfigurationTab = () => { const { state: { experiment }, dispatch, } = useExperiment() - const { - state: { - flags: { advancedConfiguration }, - }, - } = useGlobal() + + const advancedConfiguration = useSelector(selectAdvancedConfiguration) const valueVariables = experiment.valueVariables const categoricalVariables = experiment.categoricalVariables diff --git a/src/context/experiment/experiment-context.tsx b/src/context/experiment/experiment-context.tsx index 145ad14d..d8949b6e 100644 --- a/src/context/experiment/experiment-context.tsx +++ b/src/context/experiment/experiment-context.tsx @@ -22,7 +22,7 @@ type ExperimentProviderProps = { children: any } -function ExperimentProvider({ +export function ExperimentProvider({ experimentId, children, }: ExperimentProviderProps) { @@ -63,7 +63,7 @@ function ExperimentProvider({ ) } -function useExperiment() { +export function useExperiment() { const context = React.useContext(ExperimentContext) if (context === undefined) { throw new Error('useExperiment must be used within an ExperimentProvider') @@ -124,9 +124,10 @@ const fetchExperimentResult = async ( return experimentResult } -async function runExperiment(dispatch: Dispatch, experiment: ExperimentType) { +export async function runExperiment( + dispatch: Dispatch, + experiment: ExperimentType +) { const result = await fetchExperimentResult(experiment) dispatch({ type: 'registerResult', payload: result }) } - -export { ExperimentProvider, useExperiment, runExperiment } diff --git a/src/context/experiment/experiment-selectors.test.tsx b/src/context/experiment/experiment-selectors.test.ts similarity index 100% rename from src/context/experiment/experiment-selectors.test.tsx rename to src/context/experiment/experiment-selectors.test.ts diff --git a/src/context/global/global-context.test.tsx b/src/context/global/global-context.test.tsx new file mode 100644 index 00000000..78e8a0ba --- /dev/null +++ b/src/context/global/global-context.test.tsx @@ -0,0 +1,35 @@ +import { renderHook } from '@testing-library/react' +import { FC } from 'react' +import { State } from '@/context/global' +import { GlobalStateProvider, useGlobal, useSelector } from '../global' + +const GlobalWrapper: FC<{ children: React.ReactNode }> = ({ children }) => ( + {children} +) + +describe('useGlobal', () => { + it('fails if called outside provider', async () => { + console.error = jest.fn() + expect(() => renderHook(() => useGlobal())).toThrow( + 'useGlobal must be used within a GlobalStateProvider' + ) + expect(console.error).toHaveBeenCalled() + }) + + it('provides context when called inside provider', async () => { + const { result } = renderHook(() => useGlobal(), { + wrapper: GlobalWrapper, + }) + expect(result.current.state.debug).toBeFalsy() + }) +}) + +describe('useSelector', () => { + it('should bind selector to state', () => { + const testSelector = (state: State) => state.debug + const { result } = renderHook(() => useSelector(testSelector), { + wrapper: GlobalWrapper, + }) + expect(result.current).toBeFalsy + }) +}) diff --git a/src/context/global/global-context.tsx b/src/context/global/global-context.tsx index 1e6cca7f..c6c5a639 100644 --- a/src/context/global/global-context.tsx +++ b/src/context/global/global-context.tsx @@ -17,7 +17,7 @@ interface GlobalStateProviderProps { children: React.ReactNode } -function GlobalStateProvider({ children }: GlobalStateProviderProps) { +export function GlobalStateProvider({ children }: GlobalStateProviderProps) { const [state, dispatch] = useLocalStorageReducer( reducer, initialState, @@ -55,7 +55,7 @@ function GlobalStateProvider({ children }: GlobalStateProviderProps) { ) } -function useGlobal() { +export function useGlobal() { const context = React.useContext(GlobalContext) if (context === undefined) { throw new Error('useGlobal must be used within a GlobalStateProvider') @@ -63,4 +63,10 @@ function useGlobal() { return context } -export { GlobalStateProvider, useGlobal } +export const useSelector = (selector: (state: State) => T) => { + const context = React.useContext(GlobalContext) + if (context === undefined) { + throw new Error('useSelector must be used within an GlobalStateProvider') + } + return selector(context.state) +} diff --git a/src/context/global/global-selectors.test.ts b/src/context/global/global-selectors.test.ts new file mode 100644 index 00000000..8a3b19d8 --- /dev/null +++ b/src/context/global/global-selectors.test.ts @@ -0,0 +1,21 @@ +import { initialState, State } from '@/context/global' +import { selectDebug, selectAdvancedConfiguration } from './global-selectors' + +describe('Experiment selectors', () => { + let state: State + beforeEach(() => { + state = JSON.parse(JSON.stringify(initialState)) + }) + + it('should select debug', () => { + state.debug = true + expect(selectDebug(state)).toBeTruthy() + }) + + describe('Flags', () => { + it('should selectAdvancedConfiguration', () => { + state.flags.advancedConfiguration = true + expect(selectAdvancedConfiguration(state)).toBeTruthy() + }) + }) +}) diff --git a/src/context/global/global-selectors.ts b/src/context/global/global-selectors.ts new file mode 100644 index 00000000..5d8cd107 --- /dev/null +++ b/src/context/global/global-selectors.ts @@ -0,0 +1,8 @@ +import { State } from '@/context/global' + +export const selectDebug = (state: State) => state.debug + +export const selectFlags = (state: State) => state.flags + +export const selectAdvancedConfiguration = (state: State) => + selectFlags(state).advancedConfiguration From afbfb5448c1aa53f9cb7da6fd3df51e7f63bea19 Mon Sep 17 00:00:00 2001 From: Jakob Langdal Date: Mon, 22 Aug 2022 12:38:57 +0000 Subject: [PATCH 4/4] Refactor to use alias --- jest.config.js | 1 + src/components/data-points/data-points.tsx | 8 ++++---- .../editable-table/editable-table-cell.style.ts | 2 +- .../editable-table-collapsed-row.style.ts | 2 +- .../editable-table-expanded-row.style.ts | 2 +- .../editable-table/editable-table.style.ts | 2 +- src/components/experiment/configurationTab.tsx | 6 +++--- src/components/experiment/dataEntryTab.tsx | 4 ++-- src/components/experiment/experiment.tsx | 16 ++++++++-------- src/components/experiment/loading-experiment.tsx | 2 +- src/components/experiment/tabbed-experiment.tsx | 6 +++--- src/components/home/home.tsx | 4 ++-- src/components/input-model/optimizer-model.tsx | 2 +- src/components/layout/layout.tsx | 2 +- src/components/plots/plots.tsx | 2 +- .../result-data/experimentation-guide.tsx | 2 +- src/components/theme-selector/theme-selector.tsx | 2 +- .../experiment/experiment-context.test.tsx | 2 +- src/context/experiment/experiment-context.tsx | 4 ++-- src/context/global/global-context.test.tsx | 2 +- src/context/global/global-context.tsx | 2 +- src/context/global/global-reducer.test.ts | 2 +- src/context/global/global-reducer.ts | 2 +- src/utility/converters.ts | 2 +- tsconfig.json | 2 +- 25 files changed, 42 insertions(+), 41 deletions(-) diff --git a/jest.config.js b/jest.config.js index ad908a94..19a73174 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,7 @@ module.exports = { moduleNameMapper: { '\\.(scss|sass|css)$': 'identity-obj-proxy', '^@/(.*)': ['/src/$1'], + '^@openapi': ['/openapi'], }, testEnvironment: 'jsdom', transform: { diff --git a/src/components/data-points/data-points.tsx b/src/components/data-points/data-points.tsx index 571c0008..c6abae0b 100644 --- a/src/components/data-points/data-points.tsx +++ b/src/components/data-points/data-points.tsx @@ -11,12 +11,12 @@ import { DataPointTypeValue, ScoreVariableType, } from '@/types/common' -import { EditableTable } from '../editable-table/editable-table' +import { EditableTable } from '@/components/editable-table/editable-table' import SwapVertIcon from '@mui/icons-material/SwapVert' -import { TitleCard } from '../title-card/title-card' +import { TitleCard } from '@/components/title-card/title-card' import useStyles from './data-points.style' -import DownloadCSVButton from '../download-csv-button' -import UploadCSVButton from '../upload-csv-button' +import DownloadCSVButton from '@/components/download-csv-button' +import UploadCSVButton from '@/components/upload-csv-button' import { dataPointsReducer, DataPointsState } from './data-points-reducer' type DataPointProps = { diff --git a/src/components/editable-table/editable-table-cell.style.ts b/src/components/editable-table/editable-table-cell.style.ts index 3ff6da9f..268523ad 100644 --- a/src/components/editable-table/editable-table-cell.style.ts +++ b/src/components/editable-table/editable-table-cell.style.ts @@ -1,5 +1,5 @@ import { makeStyles } from '@mui/styles' -import { tableBorder } from '../../theme/theme' +import { tableBorder } from '@/theme/theme' export const useStyles = makeStyles(() => ({ editCell: { diff --git a/src/components/editable-table/editable-table-collapsed-row.style.ts b/src/components/editable-table/editable-table-collapsed-row.style.ts index 283f37f4..0bf0576c 100644 --- a/src/components/editable-table/editable-table-collapsed-row.style.ts +++ b/src/components/editable-table/editable-table-collapsed-row.style.ts @@ -1,5 +1,5 @@ import { makeStyles } from '@mui/styles' -import { colors, tableBorder } from '../../theme/theme' +import { colors, tableBorder } from '@/theme/theme' export const useStyles = makeStyles(() => ({ buttonContainer: { diff --git a/src/components/editable-table/editable-table-expanded-row.style.ts b/src/components/editable-table/editable-table-expanded-row.style.ts index 6ac60089..7c956977 100644 --- a/src/components/editable-table/editable-table-expanded-row.style.ts +++ b/src/components/editable-table/editable-table-expanded-row.style.ts @@ -1,5 +1,5 @@ import { makeStyles } from '@mui/styles' -import { colors } from '../../theme/theme' +import { colors } from '@/theme/theme' export const useStyles = makeStyles(() => ({ row: { diff --git a/src/components/editable-table/editable-table.style.ts b/src/components/editable-table/editable-table.style.ts index 4e4d27ca..9593e08f 100644 --- a/src/components/editable-table/editable-table.style.ts +++ b/src/components/editable-table/editable-table.style.ts @@ -1,5 +1,5 @@ import { makeStyles } from '@mui/styles' -import { tableBorder } from '../../theme/theme' +import { tableBorder } from '@/theme/theme' export const useStyles = makeStyles(() => ({ emptyCell: { diff --git a/src/components/experiment/configurationTab.tsx b/src/components/experiment/configurationTab.tsx index 4a205260..fe6ae93c 100644 --- a/src/components/experiment/configurationTab.tsx +++ b/src/components/experiment/configurationTab.tsx @@ -6,9 +6,9 @@ import { CategoricalVariableType, OptimizerConfig, } from '@/types/common' -import Details from '../details' -import OptimizerModel from '../input-model/optimizer-model' -import OptimizerConfigurator from '../optimizer-configurator' +import Details from '@/components/details' +import OptimizerModel from '@/components/input-model/optimizer-model' +import OptimizerConfigurator from '@/components/optimizer-configurator' import { selectAdvancedConfiguration } from '@/context/global/global-selectors' export const ConfigurationTab = () => { diff --git a/src/components/experiment/dataEntryTab.tsx b/src/components/experiment/dataEntryTab.tsx index 4f717ed9..be47989e 100644 --- a/src/components/experiment/dataEntryTab.tsx +++ b/src/components/experiment/dataEntryTab.tsx @@ -1,8 +1,8 @@ import { Grid } from '@mui/material' import { useExperiment } from '@/context/experiment' import { DataPointType } from '@/types/common' -import DataPoints from '../data-points/data-points' -import { ExperimentationGuide } from '../result-data/experimentation-guide' +import DataPoints from '@/components/data-points/data-points' +import { ExperimentationGuide } from '@/components/result-data/experimentation-guide' export const DataEntryTab = () => { const { diff --git a/src/components/experiment/experiment.tsx b/src/components/experiment/experiment.tsx index d85d86dc..eae660a8 100644 --- a/src/components/experiment/experiment.tsx +++ b/src/components/experiment/experiment.tsx @@ -8,12 +8,12 @@ import { Switch, Typography, } from '@mui/material' -import Layout from '../layout/layout' -import OptimizerModel from '../input-model/optimizer-model' -import OptimizerConfigurator from '../optimizer-configurator' +import Layout from '@/components/layout/layout' +import OptimizerModel from '@/components/input-model/optimizer-model' +import OptimizerConfigurator from '@/components/optimizer-configurator' import { Alert } from '@mui/material' -import Details from '../details' -import DataPoints from '../data-points/data-points' +import Details from '@/components/details' +import DataPoints from '@/components/data-points/data-points' import { useStyles } from './experiment.style' import { useExperiment, runExperiment, useSelector } from '@/context/experiment' import React, { useState } from 'react' @@ -24,9 +24,9 @@ import { DataPointType, } from '@/types/common' import LoadingExperiment from './loading-experiment' -import { ExperimentationGuide } from '../result-data/experimentation-guide' -import LoadingButton from '../loading-button/loading-button' -import { Plots } from '../plots/plots' +import { ExperimentationGuide } from '@/components/result-data/experimentation-guide' +import LoadingButton from '@/components/loading-button/loading-button' +import { Plots } from '@/components/plots/plots' import { saveObjectToLocalFile } from '@/utility/save-to-local-file' import { useGlobal } from '@/context/global' import { UISizeValue } from '@/context/global' diff --git a/src/components/experiment/loading-experiment.tsx b/src/components/experiment/loading-experiment.tsx index f35ac854..feaef801 100644 --- a/src/components/experiment/loading-experiment.tsx +++ b/src/components/experiment/loading-experiment.tsx @@ -6,7 +6,7 @@ import { Typography, } from '@mui/material' import useStyles from './loading-experiment.style' -import Layout from '../layout/layout' +import Layout from '@/components/layout/layout' export default function LoadingExperiment() { const classes = useStyles() diff --git a/src/components/experiment/tabbed-experiment.tsx b/src/components/experiment/tabbed-experiment.tsx index 1d51290e..9c4b6e68 100644 --- a/src/components/experiment/tabbed-experiment.tsx +++ b/src/components/experiment/tabbed-experiment.tsx @@ -8,15 +8,15 @@ import { Tab, Typography, } from '@mui/material' -import Layout from '../layout/layout' +import Layout from '@/components/layout/layout' import { Alert } from '@mui/material' import { TabContext, TabList, TabPanel } from '@mui/lab' import { useStyles } from './experiment.style' import { useExperiment, runExperiment, useSelector } from '@/context/experiment' import React, { useState } from 'react' import LoadingExperiment from './loading-experiment' -import LoadingButton from '../loading-button/loading-button' -import { Plots } from '../plots/plots' +import LoadingButton from '@/components/loading-button/loading-button' +import { Plots } from '@/components/plots/plots' import { saveObjectToLocalFile } from '@/utility/save-to-local-file' import { useGlobal } from '@/context/global' import { ConfigurationTab } from './configurationTab' diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx index 65d23cf1..c1a53905 100644 --- a/src/components/home/home.tsx +++ b/src/components/home/home.tsx @@ -13,7 +13,7 @@ import { } from '@mui/material' import { MouseEvent, useCallback, useReducer, useState } from 'react' import { useDropzone } from 'react-dropzone' -import Layout from '../layout/layout' +import Layout from '@/components/layout/layout' import useStyles from './home.style' import { NextRouter, useRouter } from 'next/router' import SystemUpdateAltIcon from '@mui/icons-material/SystemUpdateAlt' @@ -24,7 +24,7 @@ import { ExperimentType } from '@/types/common' import { useGlobal } from '@/context/global' import { v4 as uuid } from 'uuid' import { reducer } from './home-reducer' -import { CreateOrOverwriteDialog } from '../create-or-overwrite-dialog/create-or-overwrite-dialog' +import { CreateOrOverwriteDialog } from '@/components/create-or-overwrite-dialog/create-or-overwrite-dialog' type UploadMessage = { message: string diff --git a/src/components/input-model/optimizer-model.tsx b/src/components/input-model/optimizer-model.tsx index 214270b7..3460a12f 100644 --- a/src/components/input-model/optimizer-model.tsx +++ b/src/components/input-model/optimizer-model.tsx @@ -13,7 +13,7 @@ import { CategoricalVariableType, ValueVariableType } from '@/types/common' import DeleteIcon from '@mui/icons-material/Delete' import VariableEditor from './variable-editor' import useStyles from './optimizer-model.style' -import { TitleCard } from '../title-card/title-card' +import { TitleCard } from '@/components/title-card/title-card' import LensIcon from '@mui/icons-material/Lens' import PanoramaFishEyeIcon from '@mui/icons-material/PanoramaFishEye' diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx index 91ace6bb..17195994 100644 --- a/src/components/layout/layout.tsx +++ b/src/components/layout/layout.tsx @@ -10,7 +10,7 @@ import { import Link from 'next/link' import useStyles from './layout.style' import { useGlobal } from '@/context/global' -import { VersionInfo } from '../version-info' +import { VersionInfo } from '@/components/version-info' import { useState } from 'react' interface Props { diff --git a/src/components/plots/plots.tsx b/src/components/plots/plots.tsx index 476c9bde..a2d5d90f 100644 --- a/src/components/plots/plots.tsx +++ b/src/components/plots/plots.tsx @@ -1,6 +1,6 @@ import { useExperiment } from '@/context/experiment' import useStyles from './plots.style' -import { TitleCard } from '../title-card/title-card' +import { TitleCard } from '@/components/title-card/title-card' import { Tooltip, IconButton, Hidden } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' import { useGlobal } from '@/context/global' diff --git a/src/components/result-data/experimentation-guide.tsx b/src/components/result-data/experimentation-guide.tsx index daa5cd05..f923a310 100644 --- a/src/components/result-data/experimentation-guide.tsx +++ b/src/components/result-data/experimentation-guide.tsx @@ -1,6 +1,6 @@ import { useSelector } from '@/context/experiment' import { Suggestions } from './suggestions' -import { TitleCard } from '../title-card/title-card' +import { TitleCard } from '@/components/title-card/title-card' import { Tooltip, IconButton, Hidden, Box } from '@mui/material' import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap' import { useGlobal } from '@/context/global' diff --git a/src/components/theme-selector/theme-selector.tsx b/src/components/theme-selector/theme-selector.tsx index 57cf1944..5af8ae3b 100644 --- a/src/components/theme-selector/theme-selector.tsx +++ b/src/components/theme-selector/theme-selector.tsx @@ -1,7 +1,7 @@ import { Box, Button } from '@mui/material' import { useGlobal } from '@/context/global' import useStyles from './theme-selector.style' -import { themes } from '../../theme/theme' +import { themes } from '@/theme/theme' export default function ThemeSelector() { const classes = useStyles() diff --git a/src/context/experiment/experiment-context.test.tsx b/src/context/experiment/experiment-context.test.tsx index 50d99a04..e449b653 100644 --- a/src/context/experiment/experiment-context.test.tsx +++ b/src/context/experiment/experiment-context.test.tsx @@ -6,7 +6,7 @@ import { ExperimentProvider, useSelector, } from './experiment-context' -import { GlobalStateProvider } from '../global' +import { GlobalStateProvider } from '@/context/global' const ExperimentWrapper: FC<{ children: React.ReactNode }> = ({ children }) => ( diff --git a/src/context/experiment/experiment-context.tsx b/src/context/experiment/experiment-context.tsx index d8949b6e..b0a8cebe 100644 --- a/src/context/experiment/experiment-context.tsx +++ b/src/context/experiment/experiment-context.tsx @@ -5,13 +5,13 @@ import { Configuration, DefaultApi, OptimizerapiOptimizerRunRequest, -} from '../../../openapi' +} from '@openapi' import { Dispatch, rootReducer } from './reducers' import { initialState, State } from '@/context/experiment/store' import { ExperimentResultType, ExperimentType } from '@/types/common' import { calculateData, calculateSpace } from '@/utility/converters' import { migrate } from '@/utility/migration/migration' -import { useGlobal } from '../global/' +import { useGlobal } from '@/context/global/' const ExperimentContext = React.createContext< { state: State; dispatch: Dispatch; loading: boolean } | undefined diff --git a/src/context/global/global-context.test.tsx b/src/context/global/global-context.test.tsx index 78e8a0ba..34e06879 100644 --- a/src/context/global/global-context.test.tsx +++ b/src/context/global/global-context.test.tsx @@ -1,7 +1,7 @@ import { renderHook } from '@testing-library/react' import { FC } from 'react' import { State } from '@/context/global' -import { GlobalStateProvider, useGlobal, useSelector } from '../global' +import { GlobalStateProvider, useGlobal, useSelector } from '@/context/global' const GlobalWrapper: FC<{ children: React.ReactNode }> = ({ children }) => ( {children} diff --git a/src/context/global/global-context.tsx b/src/context/global/global-context.tsx index c6c5a639..ff412ec0 100644 --- a/src/context/global/global-context.tsx +++ b/src/context/global/global-context.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import ThemeSelector from '@/components/theme-selector/theme-selector' import { useLocalStorageReducer } from '@/hooks/useLocalStorageReducer' import { State, Dispatch, initialState, reducer } from './global-reducer' -import { theme, themes, CustomTheme } from '../../theme/theme' +import { theme, themes, CustomTheme } from '@/theme/theme' declare module '@mui/styles/defaultTheme' { interface DefaultTheme extends Theme {} diff --git a/src/context/global/global-reducer.test.ts b/src/context/global/global-reducer.test.ts index 6c1bffe7..2d0bb5e7 100644 --- a/src/context/global/global-reducer.test.ts +++ b/src/context/global/global-reducer.test.ts @@ -1,4 +1,4 @@ -import { ThemeName } from '../../theme/theme' +import { ThemeName } from '@/theme/theme' import { initialState, reducer, State, UISizeValue } from './global-reducer' const initState = initialState diff --git a/src/context/global/global-reducer.ts b/src/context/global/global-reducer.ts index c7647f3e..df96df2a 100644 --- a/src/context/global/global-reducer.ts +++ b/src/context/global/global-reducer.ts @@ -1,4 +1,4 @@ -import { ThemeName } from '../../theme/theme' +import { ThemeName } from '@/theme/theme' import produce from 'immer' import { assertUnreachable } from '@/utility' diff --git a/src/utility/converters.ts b/src/utility/converters.ts index a385e500..b604a147 100644 --- a/src/utility/converters.ts +++ b/src/utility/converters.ts @@ -1,4 +1,4 @@ -import { ExperimentData } from '../../openapi' +import { ExperimentData } from '@openapi' import { CategoricalVariableType, DataPointType, diff --git a/tsconfig.json b/tsconfig.json index e9dddc08..f624235f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,7 @@ "noUncheckedIndexedAccess": true, "strictNullChecks": true, "baseUrl": ".", - "paths": { "@/*": ["./src/*"] } + "paths": { "@/*": ["./src/*"], "@openapi": ["./openapi"] } }, "include": ["next-env.d.ts", "global-fetch.d.ts", "**/*.ts", "**/*.tsx"], "exclude": ["node_modules"]