adding next.js app which calls the fastAPI AND displays date in the app.

mta-sign-ui/components/header.tsx

@@ -1,16 +1,17 @@
 'use client'
 import React, {useEffect, useState} from 'react';
-import {fetchStationData} from "@/services/api/mta-server";
+import {fetchStartDate} from "@/services/mta-api/mta-server";
+import {MtaStartTime} from "@/services/mta-api/types";
 
 
 const TitleBar = () => {
-    const [data, setData] = useState(null);
+    const [data, setData] = useState<MtaStartTime|null>(null);
 
     useEffect(() => {
         const fetchData = async () => {
             try {
                 console.log("CALLING API")
-                const mtaData = await fetchStationData([""])
+                const mtaData = await fetchStartDate([""])
                 setData( mtaData)
 
             } catch (error) {

mta-sign-ui/next.config.js

@@ -1,16 +1,16 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    // rewrites: async () => {
-    //     return [
-    //         {
-    //             source: '/api/:path*',
-    //             destination:
-    //                 process.env.NODE_ENV === 'development'
-    //                     ? 'http://127.0.0.1:8000/api/:path*'
-    //                     : '/api/',
-    //         },
-    //     ]
-    // },
+    rewrites: async () => {
+        return [
+            {
+                source: '/api/:path*',
+                destination:
+                    process.env.NODE_ENV === 'development'
+                        ? 'http://127.0.0.1:8000/api/:path*'
+                        : '/api/',
+            },
+        ]
+    },
 }
 
 module.exports = nextConfig

mta-sign-ui/services/api/mta-server.ts

@@ -1,11 +0,0 @@
-export type MtaData = {
-    mtaData: any;
-};
-
-export const fetchStationData = async (stations:[string]):Promise<MtaData> =>  {
-    const res = await fetch("")
-    const data = await res.json()
-    return {
-        mtaData: data
-    };
-};

mta-sign-ui/services/mta-api/mta-server.ts

@@ -0,0 +1,19 @@
+import {MtaData, MtaStartTime} from "@/services/mta-api/types";
+
+export const fetchStationData = async (stations: [string]): Promise<MtaData> => {
+    const res = await fetch("/api/mta_data", {method: "POST"})
+    const data = await res.json()
+    return {
+        mtaData: data
+    };
+};
+
+
+export const fetchStartDate = async (stations: [string]): Promise<MtaStartTime> => {
+    const res = await fetch("/api/start_time", {method: "POST"})
+    const data = await res.text()
+    const date = new Date(data.replaceAll("\"", ""))
+    return {
+        startTime: date
+    };
+};

mta-sign-ui/services/mta-api/types.ts

@@ -0,0 +1,7 @@
+export interface MtaData {
+    mtaData: any;
+};
+
+export interface MtaStartTime {
+    startTime: Date
+}

server.py

@@ -9,6 +9,7 @@ from fastapi_utils.tasks import repeat_every
 
 # import pandas as pd
 from dotenv import load_dotenv
+from starlette.responses import JSONResponse
 
 from mta_manager import MTA, Feed, Route
 
@@ -26,8 +27,8 @@ app.add_middleware(
 logger = logging.getLogger(__name__)  # the __name__ resolve to "main" since we are at the root of the project.
 
 
-start_time = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
-last_updated = datetime.now().strftime("%d/%m/%Y %H:%M:%S")
+start_time = datetime.now()
+last_updated = datetime.now()
 
 mtaController = MTA(
     api_key,
@@ -40,7 +41,7 @@ STATION_STOP_IDs = ["127S", "127N", "A27N", "A27S"]
 
 @app.post("/api/start_time")
 def get_start_time():
-    return start_time
+    return start_time.isoformat()
 
 @app.post("/api/mta_data")
 async def get_mta_data():
@@ -53,7 +54,7 @@ async def get_mta_data():
             arrival_times = mtaController.get_arrival_times(route, stop_id)
             if len(arrival_times) > 0:
                 arrival_by_station_and_route[stop_id][route.value] = arrival_times
-    return arrival_by_station_and_route
+    return JSONResponse(arrival_by_station_and_route)
 
 @app.on_event("startup")
 @repeat_every(seconds=5)