Refactor components

frontend/package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@hey-api/openapi-ts": "^0.82.4",
+    "@types/luxon": "^3.7.1",
     "@types/node": "^24.3.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",

frontend/src/app.jsx

@@ -1,11 +1,7 @@
 import axios from 'axios';
-
 import nebula from '/src/nebula';
-
 import { useState, useEffect, Suspense } from 'react';
-
 import { useLocalStorage } from '/src/hooks';
-
 import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
 
 import { MediaUploadMonitor } from './containers/MediaUpload/MediaUploadMonitor';

frontend/src/components/Button.styled.tsx

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+
+import { getTheme } from './theme';
+
+export const BaseButton = styled.button`
+  border: 0;
+  border-radius: ${getTheme().inputBorderRadius};
+  background: ${getTheme().inputBackground};
+  color: ${getTheme().colors.text};
+  font-size: ${getTheme().fontSize};
+  padding-left: 12px;
+  padding-right: 12px;
+  min-height: ${getTheme().inputHeight};
+  max-height: ${getTheme().inputHeight};
+  min-width: ${getTheme().inputHeight} !important;
+
+  &.icon-only {
+    padding: 0;
+    min-width: ${getTheme().inputHeight};
+    max-width: ${getTheme().inputHeight};
+    min-height: ${getTheme().inputHeight};
+    max-height: ${getTheme().inputHeight};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  user-select: none;
+  user-drag: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+
+  .icon {
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  &:focus {
+    background: ${getTheme().colors.surface06};
+    outline: 0;
+  }
+
+  &:hover {
+    background: ${getTheme().colors.surface06};
+    color: ${getTheme().colors.text};
+    text-decoration: none; // when rendered as a
+  }
+
+  &:invalid,
+  &.error {
+    outline: 1px solid ${getTheme().colors.red} !important;
+  }
+
+  &.active {
+    background: ${getTheme().colors.surface06};
+    text-shadow: 0 0 4px ${getTheme().colors.highlight};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${getTheme().colors.surface03};
+    color: ${getTheme().colors.surface08};
+    transition:
+      background 0.2s,
+      color 0.2s;
+  }
+`;

frontend/src/components/Button.tsx

@@ -1,77 +1,7 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
 
-import { getTheme } from './theme';
-
-const BaseButton = styled.button`
-  border: 0;
-  border-radius: ${getTheme().inputBorderRadius};
-  background: ${getTheme().inputBackground};
-  color: ${getTheme().colors.text};
-  font-size: ${getTheme().fontSize};
-  padding-left: 12px;
-  padding-right: 12px;
-  min-height: ${getTheme().inputHeight};
-  max-height: ${getTheme().inputHeight};
-  min-width: ${getTheme().inputHeight} !important;
-
-  &.icon-only {
-    padding: 0;
-    min-width: ${getTheme().inputHeight};
-    max-width: ${getTheme().inputHeight};
-    min-height: ${getTheme().inputHeight};
-    max-height: ${getTheme().inputHeight};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  user-select: none;
-  user-drag: none;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-
-  .icon {
-    font-size: 20px;
-    padding-top: 2px;
-  }
-
-  &:focus {
-    background: ${getTheme().colors.surface06};
-    outline: 0;
-  }
-
-  &:hover {
-    background: ${getTheme().colors.surface06};
-    color: ${getTheme().colors.text};
-    text-decoration: none; // when rendered as a
-  }
-
-  &:invalid,
-  &.error {
-    outline: 1px solid ${getTheme().colors.red} !important;
-  }
-
-  &.active {
-    background: ${getTheme().colors.surface06};
-    text-shadow: 0 0 4px ${getTheme().colors.highlight};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: ${getTheme().colors.surface03};
-    color: ${getTheme().colors.surface08};
-    transition:
-      background 0.2s,
-      color 0.2s;
-  }
-`;
+import { BaseButton } from './Button.styled';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: string;

frontend/src/containers/Dialogs/DatePickerDialog.jsx → frontend/src/components/DatePickerDialog.tsx

@@ -3,7 +3,8 @@ import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import styled from 'styled-components';
 
-import { Dialog, Button } from '/src/components';
+import Button from './Button';
+import Dialog from './Dialog';
 
 const DatePickerWrapper = styled.div`
   display: flex;
@@ -14,10 +15,25 @@ const DatePickerWrapper = styled.div`
   min-height: 250px;
 `;
 
-const DatePickerDialog = (props) => {
-  const [value, setValue] = useState();
+interface DatePickerDialogProps {
+  title: string;
+  value: string;
+  handleCancel: () => void;
+  handleConfirm: (value: string) => void;
+  cancelLabel?: string;
+  confirmLabel?: string;
+}
+
+const DatePickerDialog = (props: DatePickerDialogProps) => {
+  /*
+   * A dialog component that allows the user to pick a date.
+   * Date is in the format 'yyyy-MM-dd', which is the
+   * one and the only sane date format.
+   */
+  const [value, setValue] = useState<DateTime>();
   const onCancel = () => props.handleCancel();
   const onConfirm = () => {
+    if (!value) return;
     const t = value.toFormat('yyyy-MM-dd');
     props.handleConfirm(t);
   };
@@ -44,14 +60,19 @@ const DatePickerDialog = (props) => {
     </>
   );
 
+  const handleChange = (date: Date | null) => {
+    if (!date) return;
+    setValue(DateTime.fromJSDate(date));
+  };
+
   return (
     <Dialog onHide={onCancel} header={props.title} footer={footer}>
       <DatePickerWrapper>
         {value && (
           <DatePicker
             calendarStartDay={1}
             selected={value.toJSDate()}
-            onChange={(date) => setValue(DateTime.fromJSDate(date))}
+            onChange={handleChange}
             inline
           />
         )}