From 846055a974e4880440c6dbb0cf766e0f6db61636 Mon Sep 17 00:00:00 2001 From: Kilian Berres Date: Thu, 18 Jul 2024 09:14:39 -0500 Subject: [PATCH] updates to structure, [id].tsx, moved data types into types --- .../dashboard-bar-chart.tsx | 2 +- .../dashboard-pie-chart.tsx | 2 +- .../dashboard-table/dashboard-table.test.tsx | 2 +- .../dashboard-table/dashboard-table.tsx | 14 +-- src/app/details/[id].tsx | 88 +++++++++++++++++++ src/app/details/details.test.tsx | 2 +- src/app/details/page.tsx | 83 ----------------- src/{app/dashboard/types.ts => types/data.ts} | 2 +- 8 files changed, 96 insertions(+), 99 deletions(-) create mode 100644 src/app/details/[id].tsx delete mode 100644 src/app/details/page.tsx rename src/{app/dashboard/types.ts => types/data.ts} (99%) diff --git a/src/app/dashboard/dashboard-bar-chart/dashboard-bar-chart.tsx b/src/app/dashboard/dashboard-bar-chart/dashboard-bar-chart.tsx index 675f902..75f665d 100644 --- a/src/app/dashboard/dashboard-bar-chart/dashboard-bar-chart.tsx +++ b/src/app/dashboard/dashboard-bar-chart/dashboard-bar-chart.tsx @@ -3,7 +3,7 @@ import { BarGraph } from '@metrostar/comet-data-viz'; import { Spacecraft } from '../../../types/spacecraft'; import React, { useEffect, useState } from 'react'; -import { ChartData } from '../types'; +import { ChartData } from '../../../types/data'; interface DashboardBarChartProps { items: Spacecraft[] | undefined; diff --git a/src/app/dashboard/dashboard-pie-chart/dashboard-pie-chart.tsx b/src/app/dashboard/dashboard-pie-chart/dashboard-pie-chart.tsx index 5deafe0..7d4f278 100644 --- a/src/app/dashboard/dashboard-pie-chart/dashboard-pie-chart.tsx +++ b/src/app/dashboard/dashboard-pie-chart/dashboard-pie-chart.tsx @@ -3,7 +3,7 @@ import { PieChart } from '@metrostar/comet-data-viz'; import { Spacecraft } from '../../../types/spacecraft'; import React, { useEffect, useState } from 'react'; -import { ChartData } from '../types'; +import { ChartData } from '../../../types/data'; interface DashboardPieChartProps { items: Spacecraft[] | undefined; diff --git a/src/app/dashboard/dashboard-table/dashboard-table.test.tsx b/src/app/dashboard/dashboard-table/dashboard-table.test.tsx index deaea66..1a34afe 100644 --- a/src/app/dashboard/dashboard-table/dashboard-table.test.tsx +++ b/src/app/dashboard/dashboard-table/dashboard-table.test.tsx @@ -4,7 +4,7 @@ import { BrowserRouter } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; import { DashboardTable } from './dashboard-table'; import { vi } from 'vitest'; -import { Spacecraft } from 'spacecraft'; +//import { Spacecraft } from 'spacecraft'; // Mock the DataTable component diff --git a/src/app/dashboard/dashboard-table/dashboard-table.tsx b/src/app/dashboard/dashboard-table/dashboard-table.tsx index 9811b76..df5d03f 100644 --- a/src/app/dashboard/dashboard-table/dashboard-table.tsx +++ b/src/app/dashboard/dashboard-table/dashboard-table.tsx @@ -5,7 +5,7 @@ import { Spacecraft } from '../../../types/spacecraft'; import { ColumnDef } from '@tanstack/react-table'; import React, { useEffect, useState } from 'react'; import Link from 'next/link'; -import { TableData } from '../types'; +import { TableData } from '../../../types/data'; interface DashboardTableProps { items: Spacecraft[] | undefined; @@ -16,7 +16,7 @@ export const DashboardTable = ({ }: DashboardTableProps): React.ReactElement => { const [data, setData] = useState(); - // Ensure window-related operations run only on the client side + React.useEffect(() => { if (typeof window !== 'undefined' && items) { console.log('ITEMS: ', items) @@ -24,8 +24,7 @@ export const DashboardTable = ({ items.forEach((item: Spacecraft) => { newData.push({ name: ( - // - + {item.name} ), @@ -38,13 +37,6 @@ export const DashboardTable = ({ } }, [items]); - // Log details folder to console - React.useEffect(() => { - if (typeof window !== 'undefined') { - console.log('Details folder:', items); - } - }, [items]); - const cols = React.useMemo[]>( () => [ { diff --git a/src/app/details/[id].tsx b/src/app/details/[id].tsx new file mode 100644 index 0000000..54ccf70 --- /dev/null +++ b/src/app/details/[id].tsx @@ -0,0 +1,88 @@ +// app/details/[id].tsx + +"use client"; + +import { Spinner } from '@metrostar/comet-extras'; +import { Card } from '@metrostar/comet-uswds'; +import { mockData } from '../../data/spacecraft'; +import { Spacecraft } from '../../types/spacecraft'; +import { useQuery } from '@tanstack/react-query'; +import React from 'react'; +import { useRouter } from 'next/router'; +import ErrorNotification from '@components/error-notification/error-notification'; +import useAuth from '@hooks/use-auth'; +// import axios from '@src/utils/axios'; + +export const Details = (): React.ReactElement => { + const router = useRouter(); + const { id } = router.query; + const { isSignedIn } = useAuth(); + const { isLoading, error, data } = useQuery({ + queryKey: ['details', id], + queryFn: () => + // axios.get(`/spacecraft/${id}`).then((response) => { + // return response.data; + // }), + + // TODO: Remove this mock response and uncomment above if API available + Promise.resolve( + mockData.items.filter((item) => item.id.toString() === id)[0], + ), + enabled: isSignedIn && !!id, + }); + + return ( +
+ <> +
+
+

Details

+
+
+ {error && ( +
+
+ +
+
+ )} +
+
+ {isLoading ? ( + + ) : data ? ( + +
    +
  • + Name: {data.name} +
    • +
  • + Description: {data.description} +
    • +
  • + Affiliation: {data.affiliation} +
    • +
  • + Dimensions: {data.dimensions} +
    • +
  • + Appearances: {data.appearances} +
    • +
+ + ) : ( + <>No items found + )} +
+
+ +
+ ); +}; + +export default Details; diff --git a/src/app/details/details.test.tsx b/src/app/details/details.test.tsx index 8051f74..79d230e 100644 --- a/src/app/details/details.test.tsx +++ b/src/app/details/details.test.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; -import Details from './page'; +import Details from './[id]'; import { vi } from 'vitest'; // Mocking the hooks diff --git a/src/app/details/page.tsx b/src/app/details/page.tsx deleted file mode 100644 index 8b5f8d6..0000000 --- a/src/app/details/page.tsx +++ /dev/null @@ -1,83 +0,0 @@ -"use client"; -import { Spinner } from '@metrostar/comet-extras'; -import { Card } from '@metrostar/comet-uswds'; -import { mockData } from '../../data/spacecraft'; -import { Spacecraft } from '../../types/spacecraft'; -import { useQuery } from '@tanstack/react-query'; -import React from 'react'; -import { useParams } from 'next/navigation'; -import ErrorNotification from '../../components/error-notification/error-notification'; -import useAuth from '../../hooks/use-auth'; -// import axios from '@src/utils/axios'; - -export const Details = (): React.ReactElement => { - const router = useParams(); - const { id } = useParams(); - const { isSignedIn } = useAuth(); - const { isLoading, error, data } = useQuery({ - queryKey: ['details', id], - queryFn: () => - // axios.get(`/spacecraft/${id}`).then((response) => { - // return response.data; - // }), - - // TODO: Remove this mock response and uncomment above if API available - Promise.resolve( - mockData.items.filter((item) => item.id.toString() === id)[0], - ), - enabled: isSignedIn && !!id, - }); - - return ( -
-
-
-

Details

-
-
- {error && ( -
-
- -
-
- )} -
-
- {isLoading ? ( - - ) : data ? ( - -
    -
  • - Name: {data.name} -
    • -
  • - Description: {data.description} -
    • -
  • - Affiliation: {data.affiliation} -
    • -
  • - Dimensions: {data.dimensions} -
    • -
  • - Appearances: {data.appearances} -
    • -
- - ) : ( - <>No items found - )} -
-
-
- ); -}; - -export default Details; diff --git a/src/app/dashboard/types.ts b/src/types/data.ts similarity index 99% rename from src/app/dashboard/types.ts rename to src/types/data.ts index 6be3928..834eaa7 100644 --- a/src/app/dashboard/types.ts +++ b/src/types/data.ts @@ -10,4 +10,4 @@ export interface TableData { export interface ChartData { x: string; y: number; -} +} \ No newline at end of file