improve jsdocs little bit, small refactoring, file splitting

react-client/src/utilities/commonHelpers.ts

@@ -23,23 +23,5 @@ export const mapObjectPropertiesUndefined = (obj: NonPrimitive) => {
  return Object.fromEntries(Object.keys(obj).map((key) => [key, undefined]));
 };
 
-type ComponentName =
+export type ControlPanelComponentName =
  (typeof ControlPanelComponents)[keyof typeof ControlPanelComponents];
-
-/**
- * Normalize component names of map's control panel
- */
-export const normalizeControlPanelComponentNames = (
- component: ComponentName
-) => {
- switch (component) {
- case "AddCompany":
- return "Add company";
- case "GetCompanies":
- return "Get all companies";
- case "InitialView":
- return "Initial view";
- default:
- throw new Error(`Unknown component component name: ${component}`);
- }
-};

react-client/src/utilities/commonTypes.ts

@@ -2,7 +2,7 @@
  * Make every property nullable in object
  * @example const person: { name: string; age: number } = { name: "John", age: 55 };
  *
- * const personNullable: Nullable<typeof person> = { name: string | null, age: number | null };
+ * const personNullable: Nullable<typeof person> => { name: string | null, age: number | null };
  */
 export type Nullable<T> = {
  [P in keyof T]: T[P] | null;
@@ -12,7 +12,7 @@ export type Nullable<T> = {
  * Make property or properties nullable in object
  * @example const person: { name: string; age: number } = { name: "John", age: "55" }
  *
- * const personPartlyNullable: Nullable<typeof person, "age"> = { name: string, age: number | null}
+ * const personPartlyNullable: Nullable<typeof person, "age"> => { name: string, age: number | null}
  */
 export type NullableProperty<T, K extends keyof T> = {
  [P in keyof T]: P extends K ? T[P] | null : T[P];
@@ -42,6 +42,6 @@ type NonFunction<T> = T extends (...args: unknown[]) => unknown ? never : T;
 export type NonPrimitive = NonFunction<object>;
 
 /**
- * Plain object (exclude e.g. array from 'object' type)
+ * Plain object (exclude e.g. array, functions from 'object' type)
  */
 export type PlainObject = { [key: string]: unknown };

react-client/src/utilities/stringUtils.ts

@@ -0,0 +1,19 @@
+import { ControlPanelComponentName } from "@/utilities/commonHelpers";
+
+/**
+ * Normalize component names of map's control panel
+ */
+export const normalizeControlPanelComponentName = (
+ component: ControlPanelComponentName
+) => {
+ switch (component) {
+ case "AddCompany":
+ return "Add company";
+ case "GetCompanies":
+ return "Get all companies";
+ case "InitialView":
+ return "Initial view";
+ default:
+ throw new Error(`Unknown component component name: ${component}`);
+ }
+};

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

@@ -12,7 +12,7 @@ import {
  ControlViewComponent,
  setControlViewComponent,
 } from "@/store/slices/generalUiSlice";
-import { normalizeControlPanelComponentNames } from "@/utilities/commonHelpers";
+import { normalizeControlPanelComponentName } from "@/utilities/stringUtils";
 
 const StyledHeader = styled(Typography)(({ theme }) => ({
  paddingBottom: theme.spacing(2),
@@ -45,7 +45,7 @@ const SelectControlPanelDropdown = () => {
  <Select onChange={handleChange} value={selectedComponent}>
  {controlPanelComponentValues.map((component) => (
  <MenuItem key={component} value={component}>
- {normalizeControlPanelComponentNames(component)}
+ {normalizeControlPanelComponentName(component)}
  </MenuItem>
  ))}
  </Select>

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

@@ -1,17 +1,11 @@
-import {
- Box,
- IconButton,
- IconButtonProps,
- List,
- ListItem,
- Typography,
-} from "@mui/material";
+import { Box, IconButton, List, ListItem, Typography } from "@mui/material";
 import { styled } from "@mui/material/styles";
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
 import { ControlPanelComponents } from "@/views/mapView/ControlPanelItems/ControlPanel";
 import { setControlViewComponent } from "@/store/slices/generalUiSlice";
 import { useAppDispatch } from "@/hooks/useStoreHooks";
-import { normalizeControlPanelComponentNames } from "@/utilities/commonHelpers";
+import { ControlPanelComponentName } from "@/utilities/commonHelpers";
+import { normalizeControlPanelComponentName } from "@/utilities/stringUtils";
 
 const StyledList = styled(List)(({ theme: _theme }) => ({
  width: "100%",
@@ -25,31 +19,32 @@ const StyledListItem = styled(ListItem)(({ theme }) => ({
  },
 }));
 
-const ListActionButton = styled(({ ...otherProps }: IconButtonProps) => (
- <IconButton {...otherProps} color="success" />
-))(({ theme: _theme }) => ({}));
-
 const InitialViewComponent = () => {
  const dispatch = useAppDispatch();
 
+ const renderSecondaryActionIcon = (
+ componentName: ControlPanelComponentName
+ ) => (
+ <IconButton
+ color="success"
+ onClick={() => dispatch(setControlViewComponent(componentName))}
+ >
+ <ArrowForwardIcon fontSize="large" />
+ </IconButton>
+ );
+
  return (
  <Box>
  <StyledList>
  {Object.values(ControlPanelComponents)
- .filter((component) => component !== "InitialView")
- .map((component) => (
+ .filter((componentName) => componentName !== "InitialView")
+ .map((componentName) => (
  <StyledListItem
- key={component}
- secondaryAction={
- <ListActionButton
- onClick={() => dispatch(setControlViewComponent(component))}
- >
- <ArrowForwardIcon fontSize="large" />
- </ListActionButton>
- }
+ key={componentName}
+ secondaryAction={renderSecondaryActionIcon(componentName)}
  >
  <Typography>
- {normalizeControlPanelComponentNames(component)}
+ {normalizeControlPanelComponentName(componentName)}
  </Typography>
  </StyledListItem>
  ))}