Merge pull request #99 from jotjern/main

Server render osebx data
appKom · Nov 30, 2024 · 20f0dc7 · 20f0dc7
2 parents 79697e5 + 77f56e2
commit 20f0dc7
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 32 deletions.
diff --git a/components/graphs/LineChart.tsx b/components/graphs/LineChart.tsx
@@ -1,7 +1,6 @@
 'use client';
 import { useState, useMemo } from 'react';
 import { Line } from 'react-chartjs-2';
-import useSWR from 'swr';
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -36,23 +35,13 @@ const timeRanges = {
 
 interface Props {
   onlineFondet: GraphType[];
+  osebxData: GraphType[];
 }
 
-interface OsebxResponse {
-  data: GraphType[];
-}
-
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
-
-const LineChart = ({ onlineFondet }: Props) => {
+const LineChart = ({ onlineFondet, osebxData }: Props) => {
   const [selectedRange, setSelectedRange] =
     useState<keyof typeof timeRanges>('5 år');
 
-  const { data: osebxData, error: osebxError } = useSWR<OsebxResponse>(
-    '/api/osebx',
-    fetcher,
-  );
-
   const filterDataByRange = (data: GraphType[], rangeDays: number) => {
     const today = new Date();
     const cutoffDate = new Date(today);
@@ -82,9 +71,7 @@ const LineChart = ({ onlineFondet }: Props) => {
 
   const filteredOsebx = useMemo(
     () =>
-      osebxData
-        ? filterDataByRange(osebxData.data, timeRanges[selectedRange])
-        : [],
+      osebxData ? filterDataByRange(osebxData, timeRanges[selectedRange]) : [],
     [osebxData, selectedRange],
   );
 
@@ -196,10 +183,6 @@ const LineChart = ({ onlineFondet }: Props) => {
     },
   };
 
-  if (osebxError) {
-    return <div>Noe gikk galt: {osebxError.message}</div>;
-  }
-
   if (!osebxData) {
     return (
       <div className="px-5">

diff --git a/components/graphs/PerformanceDisplay.tsx b/components/graphs/PerformanceDisplay.tsx
@@ -1,3 +1,4 @@
+import { getMarketData } from '@/lib/stockApi';
 import ErrorPage from '../all/Error';
 import Table from '../form/Table';
 import LineChart from './LineChart';
@@ -19,6 +20,8 @@ const PerformanceDisplay = async () => {
     },
   });
 
+  const osebxData = await getMarketData('OSEBX');
+
   if (!compositionData || !onlineFondetData) {
     return <ErrorPage error="Data not found" />;
   }
@@ -57,7 +60,7 @@ const PerformanceDisplay = async () => {
           Fondets prestasjon over tid
         </div>
         {onlineFondetData ? (
-          <LineChart onlineFondet={onlineFondetData} />
+          <LineChart onlineFondet={onlineFondetData} osebxData={osebxData} />
         ) : (
           <div className="px-5">
             <div className="flex flex-col items-center justify-center gap-4 text-center w-full h-full animate-pulse">

diff --git a/app/api/osebx/route.ts → lib/stockApi.ts b/app/api/osebx/route.ts → lib/stockApi.ts
@@ -1,7 +1,4 @@
-import { NextResponse } from 'next/server';
-
-export const GET = async () => {
-  const index = 'OSEBX';
+export const getMarketData = async (index: string) => {
   try {
     const data = await fetch(
       `https://api.prod.nntech.io/market-data/price-time-series/v2/period/YEAR_5/identifier/${index}?resolution=DAY`,
@@ -13,19 +10,19 @@ export const GET = async () => {
     if (data && data.pricePoints) {
       interface PricePoint {
         last: number;
-        timeStamp: string;
+        timeStamp: Date;
       }
-      const result: { value: number; date: string }[] = [];
+      const result: { value: number; date: Date}[] = [];
       data.pricePoints.forEach((element: PricePoint) => {
         result.push({
           value: element.last / 10,
-          date: new Date(element.timeStamp).toISOString(),
+          date: new Date(element.timeStamp),
         });
       });
-      return NextResponse.json({ data: result }, { status: 200 });
+      return result
     } else
-      return NextResponse.json({ error: `Data not found` }, { status: 404 });
+      throw new Error('No data found');
   } catch (error) {
-    return NextResponse.json({ error: error }, { status: 500 });
+    throw new Error(`Failed to fetch market data: ${error}`);
   }
-};
+}