Review comments

m-adawi · Aug 28, 2024 · 614b5f4 · 614b5f4
1 parent 1b9dda4
commit 614b5f4
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 76 deletions.
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -5,15 +5,15 @@ import StatusCardList from "./components/StatusCardList"
 import useFetchStatuses from "./hooks/useFetchStatuses"
 
 function App(): React.ReactElement {
-  const { stacks, error } = useFetchStatuses()
+  const { statuses, error } = useFetchStatuses()
   const [searchQuery, setSearchQuery] = useState("")
 
   return (
     <>
       <Container maxW="container.lg" mt={4}>
         <HeaderBar onQueryChange={query => setSearchQuery(query)} error={error !== null} />
         {error === null ? (
-          <StatusCardList statuses={stacks} query={searchQuery} />
+          <StatusCardList statuses={statuses} query={searchQuery} />
         ) : (
           <Text fontSize="xl" align="center" color="red.500">
             {error}

diff --git a/ui/src/components/HeaderBar.tsx b/ui/src/components/HeaderBar.tsx
@@ -19,37 +19,57 @@ function HeaderBar({
       bg={useColorModeValue("gray.100", "gray.900")}
       boxShadow="sm"
       padding={4}
+      mb={1}
     >
       <Flex justifyContent="space-between" alignItems="center">
-        {/* Left: Icon and Project Name */}
-        <HStack>
-          <Text fontSize="xl" fontWeight="bold">
-            SwarmCD
-          </Text>
-        </HStack>
+        <Title />
+        <SearchBar onQueryChange={onQueryChange} error={error} />
+        <HeaderLinks />
+      </Flex>
+    </Box>
+  )
+}
 
-        {/* Middle: Search Bar */}
-        <Box flex="1" mx={6}>
-          <Input
-            placeholder="Search..."
-            onChange={event => onQueryChange(event.target.value)}
-            size="lg"
-            variant="filled"
-            bg={useColorModeValue("gray.200", "gray.800")}
-            disabled={error}
-          />
-        </Box>
+function Title(): React.ReactElement {
+  return (
+    <HStack>
+      <Text fontSize="xl" fontWeight="bold">
+        SwarmCD
+      </Text>
+    </HStack>
+  )
+}
 
-        {/* Right: Links */}
-        <HStack>
-          <Link href="https://github.com/m-adawi/swarm-cd/" isExternal>
-            <IconButton aria-label="GitHub" icon={<FaGithub />} variant="ghost" isRound size="lg" />
-          </Link>
-          <ColorToggleButton variant="ghost" isRound size="lg" />
-        </HStack>
-      </Flex>
+function SearchBar({
+  onQueryChange,
+  error
+}: Readonly<{
+  onQueryChange: (query: string) => void
+  error: boolean
+}>): React.ReactElement {
+  return (
+    <Box flex="1" mx={6}>
+      <Input
+        placeholder="Search..."
+        onChange={event => onQueryChange(event.target.value)}
+        size="lg"
+        variant="filled"
+        bg={useColorModeValue("gray.200", "gray.800")}
+        disabled={error}
+      />
     </Box>
   )
 }
 
+function HeaderLinks(): React.ReactElement {
+  return (
+    <HStack>
+      <Link href="https://github.com/m-adawi/swarm-cd/" isExternal>
+        <IconButton aria-label="GitHub" icon={<FaGithub />} variant="ghost" isRound size="lg" />
+      </Link>
+      <ColorToggleButton variant="ghost" isRound size="lg" />
+    </HStack>
+  )
+}
+
 export default HeaderBar
diff --git a/ui/src/components/StatusCard.tsx b/ui/src/components/StatusCard.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid, Link, Text } from "@chakra-ui/react"
+import { Box, Grid, Link, Text, TextProps } from "@chakra-ui/react"
 import React from "react"
 
 function StatusCard({
@@ -15,20 +15,20 @@ function StatusCard({
   return (
     <Box borderWidth="1px" borderRadius="sm" overflow="hidden" p={4} boxShadow="lg">
       <Grid templateColumns="auto 1fr" gap={2}>
-        <Text fontWeight="bold">Name:</Text>
+        <KeyText>Name:</KeyText>
         <Text>{name}</Text>
 
         {error !== "" && (
           <>
-            <Text fontWeight="bold">Error:</Text>
+            <KeyText>Error:</KeyText>
             <Text color="red.500">{error}</Text>
           </>
         )}
 
-        <Text fontWeight="bold">Revision:</Text>
+        <KeyText>Revision:</KeyText>
         <Text>{revision}</Text>
 
-        <Text fontWeight="bold">Repo URL:</Text>
+        <KeyText>Repo URL:</KeyText>
         <Link color="teal.500" href={repoURL} isExternal>
           {repoURL}
         </Link>
@@ -37,4 +37,12 @@ function StatusCard({
   )
 }
 
+function KeyText({ children, ...props }: TextProps): React.ReactElement {
+  return (
+    <Text fontWeight="bold" {...props}>
+      {children}
+    </Text>
+  )
+}
+
 export default StatusCard
diff --git a/ui/src/hooks/dummyStackStatuses.json b/ui/src/hooks/dummyStackStatuses.json
@@ -0,0 +1,20 @@
+[
+  {
+    "Name": "Project Alpha",
+    "Error": "",
+    "Revision": "v1.0.1",
+    "RepoURL": "https://github.com/user/project-alpha"
+  },
+  {
+    "Name": "Project Beta",
+    "Error": "Failed to build",
+    "Revision": "v2.3.4",
+    "RepoURL": "https://github.com/user/project-beta"
+  },
+  {
+    "Name": "Project Gamma",
+    "Error": "",
+    "Revision": "v0.9.8",
+    "RepoURL": "https://github.com/user/project-gamma"
+  }
+]
diff --git a/ui/src/hooks/useFetchStatuses.tsx b/ui/src/hooks/useFetchStatuses.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react"
+import devData from "./dummyStackStatuses.json"
 
 export interface StackStatus {
   Name: string
@@ -7,28 +8,7 @@ export interface StackStatus {
   RepoURL: string
 }
 
-const devData: StackStatus[] = [
-  {
-    Name: "Project Alpha",
-    Error: "",
-    Revision: "v1.0.1",
-    RepoURL: "https://github.com/user/project-alpha"
-  },
-  {
-    Name: "Project Beta",
-    Error: "Failed to build",
-    Revision: "v2.3.4",
-    RepoURL: "https://github.com/user/project-beta"
-  },
-  {
-    Name: "Project Gamma",
-    Error: "",
-    Revision: "v0.9.8",
-    RepoURL: "https://github.com/user/project-gamma"
-  }
-]
-
-async function fetchData(): Promise<StackStatus[]> {
+async function fetchFromServer(): Promise<StackStatus[]> {
   const response = await fetch("/stacks")
   if (!response.ok) {
     throw new Error("Network response was not ok")
@@ -37,34 +17,28 @@ async function fetchData(): Promise<StackStatus[]> {
   return (await response.json()) as StackStatus[]
 }
 
-export default function useFetchStatuses(): {
-  stacks: StackStatus[]
+export default function useFetchStatuses(intervalMs = 5000): {
+  statuses: StackStatus[]
   error: string | null
 } {
   const [statuses, setStatuses] = useState<StackStatus[]>([])
   const [error, setError] = useState<string | null>(null)
 
+  const fetchStatuses = async (): Promise<void> => {
+    try {
+      const data = import.meta.env.MODE === "development" ? devData : await fetchFromServer()
+      setStatuses(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An unknown error occurred")
+    }
+  }
+
   useEffect(() => {
-    if (import.meta.env.MODE === "development") {
-      setStatuses(devData)
-    } else {
-      const updateStatuses: () => void = () => {
-        fetchData()
-          .then(stacks => setStatuses(stacks))
-          .catch((err: unknown) => {
-            if (err instanceof Error) {
-              setError(err.message)
-            } else {
-              setError("An unknown error occurred")
-            }
-          })
-      }
-      updateStatuses() // initial fetch
+    void fetchStatuses() // initial fetch
 
-      const intervalId = setInterval(updateStatuses, 5000)
-      return () => clearInterval(intervalId)
-    }
-  }, [])
+    const intervalId = setInterval(fetchStatuses, intervalMs)
+    return () => clearInterval(intervalId)
+  }, [intervalMs])
 
-  return { stacks: statuses, error }
+  return { statuses, error }
 }