Heavu refactoring on Control panel typing and component selection

react-client/src/store/slices/generalUiSlice.ts

@@ -2,17 +2,18 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { ThemeType } from "@/theme/theme";
 import { FALLBACK_THEME } from "@/utilities/env";
 import LocalStorageService from "@/services/LocalStorageService";
+import { ControlPanelComponents } from "@/views/mapView/ControlPanelItems/components/componentsConstants";
 
 // INFO: ViewCompany just for testing purposes, not actual component
-export type ControlViewComponent = "AddCompany" | "ViewCompany";
+export type ControlViewComponent = keyof typeof ControlPanelComponents;
 
 interface UiState {
  selectedTheme: ThemeType;
  isLoading: boolean;
  error: string | null;
  openSnackbar: boolean;
  snackbarText: string | null;
- selectedControlViewComponent: ControlViewComponent | null;
+ selectedControlViewComponent: ControlViewComponent;
 }
 
 const initialState: UiState = {
@@ -22,7 +23,7 @@ const initialState: UiState = {
  error: null,
  openSnackbar: false,
  snackbarText: null,
- selectedControlViewComponent: null,
+ selectedControlViewComponent: "InitialView",
 };
 
 export const generalUiSlice = createSlice({
@@ -57,7 +58,7 @@ export const generalUiSlice = createSlice({
  state.selectedControlViewComponent = action.payload;
  },
  clearControlViewComponent: (state) => {
- state.selectedControlViewComponent = null;
+ state.selectedControlViewComponent = "InitialView";
  },
  },
 });

react-client/src/store/store.ts

@@ -1,6 +1,5 @@
 import { configureStore } from "@reduxjs/toolkit";
 // Reducers
-import exampleReducer from "@/store/slices/exampleSlice";
 import uiReducer from "@/store/slices/generalUiSlice";
 import uiMapReducer from "@/store/slices/uiMapSlice";
 import authReducer from "@/store/slices/authSlice";
@@ -20,7 +19,6 @@ export type RejectedActionPayload = {
 
 export const store = configureStore({
  reducer: {
- example: exampleReducer,
  ui: uiReducer,
  uiMap: uiMapReducer,
  auth: authReducer,

react-client/src/views/mapView/ControlPanelItems/ControlPanel.tsx

@@ -0,0 +1,23 @@
+import { Stack, styled } from "@mui/material";
+import { useAppSelector } from "@/hooks/useStoreHooks";
+import SelectControlPanelDropdown from "@/views/mapView/ControlPanelItems/SelectControlPanelDropdown";
+import { ComponentMap } from "@/views/mapView/ControlPanelItems/components/componentsConstants";
+
+const PaddedStack = styled(Stack)(({ theme }) => ({
+ padding: theme.spacing(4),
+}));
+
+const ControlPanel = () => {
+ const selectedControlViewComponent = useAppSelector(
+ (s) => s.ui.selectedControlViewComponent
+ );
+
+ return (
+ <PaddedStack>
+ <SelectControlPanelDropdown />
+ {ComponentMap[selectedControlViewComponent]}
+ </PaddedStack>
+ );
+};
+
+export default ControlPanel;

react-client/src/views/mapView/ControlPanelItems/SelectControlPanelDropdown.tsx

@@ -0,0 +1,48 @@
+import {
+ FormControl,
+ MenuItem,
+ Select,
+ SelectChangeEvent,
+} from "@mui/material";
+import { useAppDispatch, useAppSelector } from "@/hooks/useStoreHooks";
+import { ControlPanelComponents } from "@/views/mapView/ControlPanelItems/components/componentsConstants";
+import {
+ ControlViewComponent,
+ setControlViewComponent,
+} from "@/store/slices/generalUiSlice";
+
+const SelectControlPanelDropdown = () => {
+ const selectedComponent = useAppSelector(
+ (s) => s.ui.selectedControlViewComponent
+ );
+ const dispatch = useAppDispatch();
+
+ const controlPanelComponentKeys = Object.values(ControlPanelComponents);
+
+ const isComponentString = (input: string): input is ControlViewComponent =>
+ controlPanelComponentKeys.includes(input as ControlViewComponent);
+
+ const handleChange = ({ target: { value } }: SelectChangeEvent) => {
+ if (!isComponentString(value)) {
+ throw new Error(
+ `Component mapping fails in ControlPanel, unknown value ${value}`
+ );
+ }
+
+ dispatch(setControlViewComponent(value));
+ };
+
+ return (
+ <FormControl>
+ <Select onChange={handleChange} value={selectedComponent}>
+ {controlPanelComponentKeys.map((component) => (
+ <MenuItem key={component} value={component}>
+ {component}
+ </MenuItem>
+ ))}
+ </Select>
+ </FormControl>
+ );
+};
+
+export default SelectControlPanelDropdown;

react-client/src/views/mapView/ControlPanelItems/components/componentsConstants.tsx

@@ -0,0 +1,16 @@
+import { Typography } from "@mui/material";
+import AddCompanyComponent from "./AddCompanyComponent";
+
+export const ControlPanelComponents = {
+ InitialView: "InitialView",
+ AddCompany: "AddCompany",
+ GetCompanies: "GetCompanies",
+} as const;
+
+const { AddCompany, GetCompanies, InitialView } = ControlPanelComponents;
+// eslint-disable-next-line react-refresh/only-export-components
+export const ComponentMap: Record<string, JSX.Element | null> = {
+ [AddCompany]: <AddCompanyComponent />,
+ [InitialView]: <Typography>Very good initial view</Typography>,
+ [GetCompanies]: null,
+};

react-client/src/views/mapView/MapPage.tsx

@@ -1,9 +1,6 @@
 import { styled } from "@mui/material";
-import { useAppSelector } from "@/hooks/useStoreHooks";
-import { ControlViewComponent } from "@/store/slices/generalUiSlice";
-import ControlPanel from "@/views/mapView/ControlPanelComponents/ControlPanel";
+import ControlPanel from "@/views/mapView/ControlPanelItems/ControlPanel";
 import LeafletMap from "@/views/mapView/mapComponents/LeafletMap";
-import AddCompany from "@/views/mapView/ControlPanelComponents/AddCompany";
 
 const PageSection = styled("section")({
  flex: 1,
@@ -19,25 +16,11 @@ const ViewContainer = styled("div")({
  flex: 1,
 });
 
-const ControlPanelComponents: Record<ControlViewComponent, JSX.Element> = {
- AddCompany: <AddCompany />,
- ViewCompany: <h1>This is view company component</h1>,
-};
-
 const MapPage = () => {
- const selectedControlViewComponent = useAppSelector(
- (s) => s.ui.selectedControlViewComponent
- );
-
- const controlPanelComponent =
- selectedControlViewComponent === null
- ? null
- : ControlPanelComponents[selectedControlViewComponent];
-
  return (
  <ViewContainer>
  <PageSection>
- <ControlPanel component={controlPanelComponent} />
+ <ControlPanel />
  </PageSection>
  <PageSection>
  <LeafletMap />