diff --git a/thallium-frontend/eslint.config.js b/thallium-frontend/eslint.config.js index 506b585..ea31b7d 100644 --- a/thallium-frontend/eslint.config.js +++ b/thallium-frontend/eslint.config.js @@ -35,7 +35,10 @@ export default tseslint.config( { allowConstantExport: true }, ], ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules + ...react.configs['jsx-runtime'].rules, + '@typescript-eslint/no-empty-object-type': ["error", { + allowInterfaces: 'with-single-extends', + }] }, }, ) diff --git a/thallium-frontend/src/App.tsx b/thallium-frontend/src/App.tsx index d58e34e..0aab74b 100644 --- a/thallium-frontend/src/App.tsx +++ b/thallium-frontend/src/App.tsx @@ -5,7 +5,7 @@ import { RouterProvider, } from "react-router-dom"; -import themes from './themes.tsx'; +import themes from './themes'; import Header from "./components/Header"; @@ -68,8 +68,7 @@ function App() { const theme = isDarkMode ? themes.dark : themes.light; useEffect(() => { - const prefersDark = window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches; + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; setIsDarkMode(prefersDark); }, []); diff --git a/thallium-frontend/src/components/Card.tsx b/thallium-frontend/src/components/Card.tsx index 9aac6b2..f5b8c13 100644 --- a/thallium-frontend/src/components/Card.tsx +++ b/thallium-frontend/src/components/Card.tsx @@ -1,6 +1,5 @@ import styled from 'styled-components'; - const CardContainer = styled.div` border: 3px solid ${({ theme }) => theme.borderColor}; padding: 16px; @@ -28,7 +27,7 @@ interface CardProps { children: React.ReactNode; } -const Card: React.FC = ({ title, children }) => { +const Card: React.FC = ({ title, children }: CardProps) => { return ( {title} diff --git a/thallium-frontend/src/pages/ErrorPage.tsx b/thallium-frontend/src/pages/ErrorPage.tsx index a649e25..ffc6f8a 100644 --- a/thallium-frontend/src/pages/ErrorPage.tsx +++ b/thallium-frontend/src/pages/ErrorPage.tsx @@ -1,18 +1,28 @@ -import { useRouteError } from 'react-router-dom'; +import { useRouteError, isRouteErrorResponse } from 'react-router-dom'; import Card from '../components/Card'; const LandingPage = () => { - const error: any = useRouteError() || {}; + const error = useRouteError(); - let title, message, isUnexpected = false; + let title = 'Unexpected Error', message, isUnexpected = false; - if (error.status === 404) { - title = 'Not Found'; - message = 'The requested page could not be found.'; + if (isRouteErrorResponse(error)) { + if (error.status === 404) { + title = 'Not Found'; + message = 'The requested page could not be found.'; + } else { + message = error.statusText; + } + } else if (error instanceof Error) { + message = error.message; + isUnexpected = true; + } else if (typeof error === 'string') { + message = error; + isUnexpected = true; } else { - title = 'Error'; - message = error.message || error.statusText; + console.error(error); + message = 'Unknown error'; isUnexpected = true; } diff --git a/thallium-frontend/src/styled-components.d.ts b/thallium-frontend/src/styled-components.d.ts new file mode 100644 index 0000000..d6527d3 --- /dev/null +++ b/thallium-frontend/src/styled-components.d.ts @@ -0,0 +1,5 @@ +import type { Theme } from './themes'; + +declare module "styled-components" { + export interface DefaultTheme extends Theme { } +} diff --git a/thallium-frontend/src/themes.tsx b/thallium-frontend/src/themes.ts similarity index 59% rename from thallium-frontend/src/themes.tsx rename to thallium-frontend/src/themes.ts index 9bc4f77..010300e 100644 --- a/thallium-frontend/src/themes.tsx +++ b/thallium-frontend/src/themes.ts @@ -1,4 +1,18 @@ -const themes = { +interface Theme { + backgroundColor: string; + textColor: string; + borderColor: string; + linkColor: string; + cardBackgroundColor: string; + cardShadow: string; +} + +interface ThemesStore { + light: Theme; + dark: Theme; +} + +const themes: ThemesStore = { light: { backgroundColor: '#f0f0f0', textColor: '#000', @@ -18,3 +32,5 @@ const themes = { }; export default themes; + +export type { Theme, ThemesStore };