Replaces SpecificationSelector and VersionSelector with Selector

shapehq · Aug 20, 2024 · e1ebb55 · e1ebb55
1 parent a23d267
commit e1ebb55
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 87 deletions.
diff --git 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/...projects/view/toolbar/VersionSelector.tsx → ...atures/projects/view/toolbar/Selector.tsx b/...projects/view/toolbar/VersionSelector.tsx → ...atures/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
diff --git 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 }}