refactor table component

UniversityOfHelsinkiCS · Feb 3, 2025 · 33b159a · 33b159a
1 parent 02cbd48
commit 33b159a
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 41 deletions.
diff --git a/client/components/V1/Generic/TableComponent.tsx b/client/components/V1/Generic/TableComponent.tsx
@@ -0,0 +1,67 @@
+import React from 'react'
+
+/*
+This component is a table for displaying data designed for this project.
+
+Example usage:
+    <>
+      <Table>
+        <TableRow isHeader>
+            <TableCell>Header 1</TableCell>
+            <TableCell>Header 2</TableCell>
+            <TableCell>Header 3</TableCell>
+        </TableRow>
+
+        <TableRow>
+            <TableCell isKey>Item 1</TableCell>
+            <TableCell>Item 2</TableCell>
+            <TableCell>Item 3</TableCell>
+        </TableRow>
+      </Table>
+    </>
+*/
+
+export const Table = ({ children }: { children: React.ReactNode }) => {
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            width: "100%"
+        }}>{children}</div>
+    )
+}
+
+
+export const TableRow = ({ children, isHeader = false }: { children: React.ReactNode, isHeader?: boolean }) => {
+    return (
+        <div style={{
+            display: "grid",
+            gridTemplateRows: "1fr",
+            gridTemplateColumns: `2fr repeat(${React.Children.count(children)-1}, 1fr)`, // TODO: Make this dynamic
+            boxShadow: isHeader ? "none" : "0px 1px 3px rgba(0,0,0,0.3)",
+            borderRadius: "0.5rem"
+        }}>
+            {React.Children.map(children, (child, index) => (
+                <div style={{
+                    borderRight: index < React.Children.count(children) - 1 && !isHeader ? '1px solid rgba(0,0,0,0.2)' : 'none',
+                    display: "flex",
+                    placeItems: "center",
+                    padding: "1.5rem",
+                }}>
+                    {child}
+                </div>
+            ))}
+        </div>
+    )
+}
+
+
+export const TableCell = ({ children, isKey = false }: { children?: React.ReactNode, isKey?: boolean }) => {
+    return (
+        <div style={{
+            margin: !isKey && "0 auto",
+            textAlign: isKey ? "left" : "center",
+        }}>{children}</div>
+    )
+}
diff --git a/client/components/V1/Overview/DataComponent.tsx b/client/components/V1/Overview/DataComponent.tsx
@@ -4,47 +4,12 @@ import useFetchKeyData from '../../../hooks/useFetchKeyData'
 import { Link } from 'react-router-dom'
 import { ProgrammeLevel } from '../enums'
 import { TrafficLight } from '../Generic/TrafficLightComponent'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
-const TableCell = ({ children, isKey = false }: { children?: React.ReactNode, isKey?: boolean }) => {
-  return (
-    <div style={{
-      margin: !isKey && "0 auto",
-      textAlign: isKey ? "left" : "center",
-    }}>{children}</div>
-  )
-}
-
-const TableRow = ({ children, isHeader = false }: { children: React.ReactNode, isHeader?: boolean }) => {
-  return (
-    <div style={{
-      display: "grid",
-      gridTemplateRows: "1fr",
-      gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr 1fr 1fr", // TODO: Make this dynamic
-      boxShadow: isHeader ? "none" : "0px 1px 3px rgba(0,0,0,0.3)",
-      borderRadius: "0.5rem"
-    }}>
-      {React.Children.map(children, (child, index) => (
-        <div style={{
-          borderRight: index < React.Children.count(children) - 1 && !isHeader ? '1px solid rgba(0,0,0,0.2)' : 'none',
-          display: "flex",
-          placeItems: "center",
-          padding: "1.5rem",
-        }}>
-          {child}
-        </div>
-      ))}
-    </div>
-  )
-}
+import { Table, TableRow, TableCell } from '../Generic/TableComponent'
 
-const Table = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "1rem", width: "100%" }}>{children}</div>
-  )
-}
 
-const DataComponent = ({ programLevel, faculty, year}: {programLevel: string | null, faculty: string | null, year: number | null}) => {
+const DataComponent = ({ programLevel, faculty, year }: { programLevel: string | null, faculty: string | null, year: number | null }) => {
   const fetchedKeyData = useFetchKeyData()
   const keyData = useMemo(() => fetchedKeyData, [fetchedKeyData])
 
@@ -70,7 +35,7 @@ const DataComponent = ({ programLevel, faculty, year}: {programLevel: string | n
     <>
       <Table>
         <TableRow isHeader>
-          <TableCell>Programme</TableCell>
+          <TableCell></TableCell>
           <TableCell>Attractiveness</TableCell>
           <TableCell>Throughput and Graduation</TableCell>
           <TableCell>Student Feedback and Employment</TableCell>
@@ -80,8 +45,8 @@ const DataComponent = ({ programLevel, faculty, year}: {programLevel: string | n
         </TableRow>
 
         {programmeData.map((programmeData: KeyDataProgramme) => (
-          <TableRow key={programmeData.koulutusohjelmakoodi}>
-            <TableCell isKey={true}>
+          <TableRow>
+            <TableCell isKey>
               <Link to={`/v1/programmes/${programmeData.koulutusohjelmakoodi}`}>{programmeData.koulutusohjelma}</Link>
             </TableCell>
             <TableCell>