From e1ebb55ab24e7b2abb57c20f6ade304a2738be29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Tue, 20 Aug 2024 22:50:50 +0200
Subject: [PATCH] Replaces SpecificationSelector and VersionSelector with
 Selector

---
 .../projects/view/toolbar/MobileToolbar.tsx   | 11 ++--
 .../{VersionSelector.tsx => Selector.tsx}     | 39 +++++++-----
 .../view/toolbar/SpecificationSelector.tsx    | 59 -------------------
 .../view/toolbar/TrailingToolbarItem.tsx      | 11 ++--
 4 files changed, 33 insertions(+), 87 deletions(-)
 rename src/features/projects/view/toolbar/{VersionSelector.tsx => Selector.tsx} (71%)
 delete mode 100644 src/features/projects/view/toolbar/SpecificationSelector.tsx

diff --git a/src/features/projects/view/toolbar/MobileToolbar.tsx b/src/features/projects/view/toolbar/MobileToolbar.tsx
index 1fa7b6ae..730ad7c7 100644
--- a/src/features/projects/view/toolbar/MobileToolbar.tsx
+++ b/src/features/projects/view/toolbar/MobileToolbar.tsx
@@ -1,8 +1,7 @@
 "use client"
 
 import { Stack } from "@mui/material"
-import VersionSelector from "./VersionSelector"
-import SpecificationSelector from "./SpecificationSelector"
+import Selector from "./Selector"
 import { useProjectSelection } from "../../data"
 
 const MobileToolbar = () => {
@@ -22,14 +21,14 @@ const MobileToolbar = () => {
       spacing={1}
       sx={{ display: { sm: "block", md: "none" } }}
     >
-      <VersionSelector
-        versions={project.versions}
+      <Selector
+        items={project.versions}
         selection={version.id}
         onSelect={selectVersion}
         sx={{ width: "100%" }}
       />
-      <SpecificationSelector
-        specifications={version.specifications}
+      <Selector
+        items={version.specifications}
         selection={specification.id}
         onSelect={selectSpecification}
         sx={{ width: "100%" }}
diff --git a/src/features/projects/view/toolbar/VersionSelector.tsx b/src/features/projects/view/toolbar/Selector.tsx
similarity index 71%
rename from src/features/projects/view/toolbar/VersionSelector.tsx
rename to src/features/projects/view/toolbar/Selector.tsx
index 3eb38eda..760d51ba 100644
--- a/src/features/projects/view/toolbar/VersionSelector.tsx
+++ b/src/features/projects/view/toolbar/Selector.tsx
@@ -7,27 +7,34 @@ import {
   Typography
 } from "@mui/material"
 import MenuItemHover from "@/common/ui/MenuItemHover"
-import { Version } from "../../domain"
 
-const VersionSelector = ({
-  versions,
+interface SelectorItem {
+  readonly id: string
+  readonly name: string
+}
+
+interface SelectorProps {
+  items: SelectorItem[]
+  selection: string
+  onSelect: (itemId: string) => void
+  sx?: SxProps
+}
+
+const Selector = ({
+  items,
   selection,
   onSelect,
   sx
-}: {
-  versions: Version[]
-  selection: string
-  onSelect: (versionId: string) => void,
-  sx?: SxProps
-}) => {
-  const handleVersionChange = (event: SelectChangeEvent) => {
+}: SelectorProps) => {
+  const handleChange = (event: SelectChangeEvent) => {
     onSelect(event.target.value)
   }
+
   return (
     <FormControl sx={{ m: 1, margin: 0, ...sx }} size="small">
       <Select
         defaultValue={selection}
-        onChange={handleVersionChange}
+        onChange={handleChange}
         inputProps={{
           IconComponent: () => null,
           sx: {
@@ -38,22 +45,22 @@ const VersionSelector = ({
           }
         }}
       >
-        {versions.map(version => 
-          <MenuItem key={version.id} value={version.id}>
+        {items.map(item => (
+          <MenuItem key={item.id} value={item.id}>
             <MenuItemHover>
               <Typography sx={{
                 overflow: "hidden",
                 whiteSpace: "nowrap",
                 textOverflow: "ellipsis"
               }}>
-                {version.name}
+                {item.name}
               </Typography>
             </MenuItemHover>
           </MenuItem>
-        )}
+        ))}
       </Select>
     </FormControl>
   )
 }
 
-export default VersionSelector
+export default Selector
diff --git a/src/features/projects/view/toolbar/SpecificationSelector.tsx b/src/features/projects/view/toolbar/SpecificationSelector.tsx
deleted file mode 100644
index a04c07e6..00000000
--- a/src/features/projects/view/toolbar/SpecificationSelector.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { SxProps } from "@mui/system"
-import {
-  SelectChangeEvent,
-  Select,
-  MenuItem,
-  FormControl,
-  Typography
-} from "@mui/material"
-import MenuItemHover from "@/common/ui/MenuItemHover"
-import { OpenApiSpecification } from "../../domain"
-
-const SpecificationSelector = ({
-  specifications,
-  selection,
-  onSelect,
-  sx
-}: {
-  specifications: OpenApiSpecification[]
-  selection: string
-  onSelect: (specificationId: string) => void
-  sx?: SxProps
-}) => {
-  const handleVersionChange = (event: SelectChangeEvent) => {
-    onSelect(event.target.value)
-  }
-  return (
-    <FormControl sx={{ m: 1, margin: 0, ...sx }} size="small">
-      <Select
-        defaultValue={selection}
-        onChange={handleVersionChange}
-        inputProps={{
-          IconComponent: () => null,
-          sx: {
-              paddingTop: { xs: "10px !important", sm: "6px !important" },
-              paddingBottom: { xs: "10px !important", sm: "6px !important" },
-              paddingLeft: { xs: "15px !important", sm: "12px !important" },
-              paddingRight: { xs: "15px !important", sm: "12px !important" },
-          }
-        }}
-      >
-        {specifications.map(specification =>
-          <MenuItem key={specification.id} value={specification.id}>
-            <MenuItemHover>
-              <Typography sx={{
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis"
-              }}>
-                {specification.name}
-              </Typography>
-            </MenuItemHover>
-          </MenuItem>
-        )}
-      </Select>
-    </FormControl>
-  )
-}
-
-export default SpecificationSelector
diff --git a/src/features/projects/view/toolbar/TrailingToolbarItem.tsx b/src/features/projects/view/toolbar/TrailingToolbarItem.tsx
index 1e5dba25..4d74f06a 100644
--- a/src/features/projects/view/toolbar/TrailingToolbarItem.tsx
+++ b/src/features/projects/view/toolbar/TrailingToolbarItem.tsx
@@ -2,8 +2,7 @@
 
 import { SxProps } from "@mui/system"
 import { Stack, IconButton, Typography, Link, Tooltip, Divider } from "@mui/material"
-import VersionSelector from "./VersionSelector"
-import SpecificationSelector from "./SpecificationSelector"
+import Selector from "./Selector"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons"
 import { useProjectSelection } from "../../data"
@@ -52,15 +51,15 @@ const TrailingToolbarItem = () => {
           sx={{ marginRight: 1 }}
         />
         <Typography variant="h6" sx={{ marginRight: 1 }}>/</Typography>
-        <VersionSelector
-          versions={project.versions}
+        <Selector
+          items={project.versions}
           selection={version.id}
           onSelect={selectVersion}
           sx={{ marginRight: 1 }}
         />
         <Typography variant="h6" sx={{ marginRight: 1 }}>/</Typography>
-        <SpecificationSelector
-          specifications={version.specifications}
+        <Selector
+          items={version.specifications}
           selection={specification.id}
           onSelect={selectSpecification}
           sx={{ marginRight: 0.5 }}