Add Baseline API

src/app/api/spacecraft/[id]/route.ts

@@ -0,0 +1,9 @@
+import { NextResponse } from "next/server";
+import { mockData } from "src/data/spacecraft";
+
+export async function GET(request, { params }) {
+  const { id } = params;
+  return NextResponse.json(
+    mockData.items.filter((item) => item.id.toString() === id)[0]
+  );
+}

src/app/api/spacecraft/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+import { mockData } from "src/data/spacecraft";
+
+export async function GET(): Promise<NextResponse> {
+  return NextResponse.json({ items: mockData.items });
+}

src/app/dashboard/dashboard-table/dashboard-table.tsx

@@ -1,11 +1,11 @@
 "use client";
 
-import DataTable from '../../../components/comet/data-table.tsx'
-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/data';
+import DataTable from "../../../components/comet/data-table.tsx";
+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/data";
 
 interface DashboardTableProps {
   items: Spacecraft[] | undefined;
@@ -16,15 +16,13 @@ export const DashboardTable = ({
 }: DashboardTableProps): React.ReactElement => {
   const [data, setData] = useState<TableData[]>();
 
-
   React.useEffect(() => {
-    if (typeof window !== 'undefined' && items) {
-      console.log('ITEMS: ', items)
+    if (typeof window !== "undefined" && items) {
       const newData: TableData[] = [];
       items.forEach((item: Spacecraft) => {
         newData.push({
           name: (
-             <Link id={`details-link-${item.id}`} href={`/details/${item.id}`}>
+            <Link id={`details-link-${item.id}`} href={`/details/${item.id}`}>
               {item.name}
             </Link>
           ),
@@ -40,27 +38,27 @@ export const DashboardTable = ({
   const cols = React.useMemo<ColumnDef<TableData>[]>(
     () => [
       {
-        accessorKey: 'name',
-        header: 'Name',
+        accessorKey: "name",
+        header: "Name",
         cell: (info) => info.getValue(),
       },
       {
-        accessorKey: 'affiliation',
-        header: 'Affiliation',
+        accessorKey: "affiliation",
+        header: "Affiliation",
         cell: (info) => info.getValue(),
       },
       {
-        accessorKey: 'dimensions',
-        header: 'Dimensions',
+        accessorKey: "dimensions",
+        header: "Dimensions",
         cell: (info) => info.getValue(),
       },
       {
-        accessorKey: 'appearances',
-        header: 'Appearances',
+        accessorKey: "appearances",
+        header: "Appearances",
         cell: (info) => info.getValue(),
       },
     ],
-    [],
+    []
   );
 
   return data ? (

src/app/dashboard/page.tsx

@@ -1,18 +1,17 @@
 "use client";
 
-
-import Spinner from '../../components/comet/spinner';
-import Card from '../../components/comet/card';
-import CardBody from '../../components/comet/card-body';
-import { mockData } from '../../data/spacecraft';
-import { Spacecraft } from '../../types/spacecraft';
-import { useQuery } from '@tanstack/react-query';
-import React, { useEffect, useState } from 'react';
-import ErrorNotification from '../../components/error-notification/error-notification';
-import useAuth from '../../hooks/use-auth';
-import { DashboardBarChart } from './dashboard-bar-chart/dashboard-bar-chart';
-import { DashboardPieChart } from './dashboard-pie-chart/dashboard-pie-chart';
-import { DashboardTable } from './dashboard-table/dashboard-table';
+import Spinner from "../../components/comet/spinner";
+import Card from "../../components/comet/card";
+import CardBody from "../../components/comet/card-body";
+import { Spacecraft } from "../../types/spacecraft";
+import { useQuery } from "@tanstack/react-query";
+import React, { useEffect, useState } from "react";
+import ErrorNotification from "../../components/error-notification/error-notification";
+import useAuth from "../../hooks/use-auth";
+import { DashboardBarChart } from "./dashboard-bar-chart/dashboard-bar-chart";
+import { DashboardPieChart } from "./dashboard-pie-chart/dashboard-pie-chart";
+import { DashboardTable } from "./dashboard-table/dashboard-table";
+import axios from "@utils/axios";
 
 export default function Dashboard(): React.ReactElement {
   const { isSignedIn } = useAuth();
@@ -27,19 +26,16 @@ export default function Dashboard(): React.ReactElement {
     error,
     data: items,
   } = useQuery<Spacecraft[], { message: string }>({
-    queryKey: ['dashboard'],
+    queryKey: ["dashboard"],
     queryFn: () =>
-      // axios
-      //   .get('/spacecraft')
-      //   .then((response) => {
-      //     return response.data;
-      //   })
-      //   .then((data) => {
-      //     return data.items;
-      //   }),
-
-      // TODO: Remove this mock response and uncomment above if API available
-      Promise.resolve(mockData.items),
+      axios
+        .get("/spacecraft")
+        .then((response) => {
+          return response.data;
+        })
+        .then((data) => {
+          return data.items;
+        }),
     enabled: isSignedIn,
   });
 

src/app/details/[id]/page.tsx

@@ -1,30 +1,24 @@
 "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';
+import { Spinner } from "@metrostar/comet-extras";
+import { Card } from "@metrostar/comet-uswds";
+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 "@utils/axios";
 
 const Details = (): React.ReactElement => {
-  const router = useParams();
   const { id } = useParams();
   const { isSignedIn } = useAuth();
   const { isLoading, error, data } = useQuery<Spacecraft, { message: string }>({
-    queryKey: ['details', id],
+    queryKey: ["details", id],
     queryFn: () =>
-      // axios.get(`/spacecraft/${id}`).then((response) => {
-      //   return response.data;
-      // }),
+      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,
   });
 

src/utils/axios.ts

@@ -1,7 +1,7 @@
-import axios from 'axios';
+import axios from "axios";
 
 const instance = axios.create({
-  baseURL: process.env.API_BASE_URL,
+  baseURL: "/api",
 });
 
 export default instance;