Removed API's in favor of statically linked files

components/navbar.tsx

@@ -1,13 +1,7 @@
 import { usePathname } from 'next/navigation'
 import { NavBar, NavLink, NavWrap } from './styles/navbar';
 import { StyleSelector, StyleSelectorPlaceholder } from './themeselector';
-
+import Links from '../public/data/navbar.json';
-const navLinks = [
-  { name: "Home", href: "/" },
-  { name: "About", href: "/about" },
-  { name: "Games", href: "/games" },
-  { name: "Services", href: "/services" }
-]
 
 const PageNavbar = () => {
   const path = usePathname();
@@ -16,8 +10,8 @@ const PageNavbar = () => {
     <NavWrap>
       <StyleSelector></StyleSelector>
       <NavBar>
-        {navLinks.map((item) => (
+        {Links.links.map((item) => (
-          <NavLink active={path == item.href ? true : false} key={item.name} href={item.href}>
+          <NavLink active={path === item.href ? +true : +false} key={item.name} href={item.href}>
             {item.name}
           </NavLink>
         ))}

pages/_app.tsx

@@ -7,6 +7,7 @@ import { DefaultTheme, ThemeProvider } from 'styled-components';
 import { createContext, useContext, useEffect, useState } from 'react'
 import { darkTheme, GlobalStyle } from '../components/themes';
 import { getTheme } from '../components/themeselector';
+import Themes from '../public/data/themes.json';
 
 export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
   getLayout?: (page: ReactElement) => ReactNode
@@ -16,8 +17,7 @@ export type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout
 }
 
-
+export const ThemeUpdateContext = createContext(
-const ThemeUpdateContext = createContext(
   (theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
 )
 
@@ -25,7 +25,9 @@ export const useUpdateTheme = () => useContext(ThemeUpdateContext);
 
 
 export default function Website({ Component, pageProps }: AppPropsWithLayout) {
+  const loadedThemes = Themes.themes;
   const [selectedTheme, setselectedTheme] = useState(darkTheme);
+  const [themes, setThemes] = useState(loadedThemes);
 
 
   useEffect(() => {
@@ -34,10 +36,9 @@ export default function Website({ Component, pageProps }: AppPropsWithLayout) {
     // if theme data differs set it
     // if not just exit
     if (storedThemeIdTemp && parseInt(storedThemeIdTemp) !== selectedTheme.themeId) {
-      setselectedTheme(getTheme(parseInt(storedThemeIdTemp)))
+      setselectedTheme(getTheme(parseInt(storedThemeIdTemp), themes))
     }
-  }, [selectedTheme])
+  }, [selectedTheme, themes])
-
 
   // Use the layout defined at the page level, if available
   const getLayout = Component.getLayout ?? ((page) => (

pages/api/services.tsx

@@ -1,21 +0,0 @@
-import fsPromises from 'fs/promises'
-import path from 'path'
-import { Service, Status } from '../../interfaces/CardTypes';
-
-export default async function ServicesAPI(req: any, res: any) {
-  try {
-    const filePath = path.join(process.cwd(), '/public/pages.json')
-    const data = await fsPromises.readFile(filePath)
-      .then((file) => JSON.parse(file.toString()));
-    data.services.forEach((service: Service) => {
-        service.status = Status.loading;
-      });
-
-    res.status(200).json(data.services);
-  }
-  catch (error) {
-    console.log(error);
-    res.status(500).json({ error: 'Error reading data' });
-  }
-}
-

pages/api/v1/navbar.tsx

@@ -1,15 +0,0 @@
-import fsPromises from 'fs/promises'
-import path from 'path'
-
-export default async function Navbar(req: any, res: any) {
-    try {
-        const filePath = path.join(process.cwd(), '/public/data/navbar.json')
-        const jsonData = await fsPromises.readFile(filePath)
-        const data = JSON.parse(jsonData.toString())
-        res.status(200).json(data)
-    }
-    catch (error) {
-        console.log(error)
-        res.status(500).json({error: 'Error reading data'})
-    }
-}

pages/api/v1/themes.tsx

@@ -1,15 +0,0 @@
-import fsPromises from 'fs/promises'
-import path from 'path'
-
-export default async function Navbar(req: any, res: any) {
-    try {
-        const filePath = path.join(process.cwd(), '/public/data/themes.json')
-        const jsonData = await fsPromises.readFile(filePath)
-        const data = JSON.parse(jsonData.toString())
-        res.status(200).json(data)
-    }
-    catch (error) {
-        console.log(error)
-        res.status(500).json({error: 'Error reading data'})
-    }
-}

pages/games.tsx

@@ -1,12 +1,11 @@
 import Head from 'next/head'
-import fsPromises from 'fs/promises'
+import { Game } from '../interfaces/CardTypes';
-import path from 'path'
-import { EntryList, Game } from '../interfaces/CardTypes';
 import { PageContentBox, PageDescription, PageTitle, CardContentGame } from '../components/styles/content'
-import Link from 'next/link'
+import GameList from '../public/pages.json';
 
-function Servers(props: EntryList) {
+function Servers() {
-  const serverList = props.games
+  // TODO: unuggly this shit
+  const serverList: Game[] = JSON.parse(JSON.stringify(GameList.games));
   return (
     <>
       <Head>
@@ -32,12 +31,4 @@ function Servers(props: EntryList) {
   )
 }
 
-export async function getServerSideProps() {
-  const filePath = path.join(process.cwd(), '/public/pages.json')
-  const jsonData = await fsPromises.readFile(filePath)
-  const list = JSON.parse(jsonData.toString())
-
-  return { props: list }
-}
-
 export default Servers

pages/services.tsx

@@ -1,20 +1,19 @@
 import Head from 'next/head'
-import Link from 'next/link'
 import { Service, Status, ServiceType, ServiceLocation } from '../interfaces/CardTypes';
 import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
-import { PageCard, CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import ServiceList from '../public/pages.json';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
-  const { initialData, fullData, loadingInitial, loadingFull, error } = useServices();
+  const { initialData, fullData, loadingFull, error } = useServices();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
-  else if (loadingInitial) { content = <div>Loading</div> }
   else if (loadingFull) {
     content =
       <PageContentBox>
@@ -22,7 +21,6 @@ function Services() {
           <CardContentService key={item.name} content={item} />
         ))}
       </PageContentBox>
-
   }
   else if (fullData) {
     content =
@@ -171,17 +169,18 @@ const fetchFullDataArray = (containerData: Dockerode.ContainerInfo[], dataSet: S
 
 function useServices() {
   const { data: containerData, error: containerError } = useSWR('/api/containers', fetcher);
-  const { data: initialData, error: initialError } = useSWR('/api/services', fetcher);
+  // TODO: unfuck this
-  const loadingInitial = !initialData && !initialError
+  const initialData: Service[] = JSON.parse(JSON.stringify(ServiceList.services));
-  const { data: fullData, error: fullError } = useSWR((initialData && containerData) ? [containerData, initialData] : null, fetchFullDataArray)
+  initialData.forEach((service) => {
+    if (service.status === undefined) service.status = Status.loading;
+  })
+  const { data: fullData, error: fullError } = useSWR((containerData) ? [containerData, initialData] : null, fetchFullDataArray)
   const loadingFull = !fullData && !fullError
-
   return {
     initialData,
     fullData,
-    loadingInitial,
     loadingFull,
-    error: initialError || fullError || containerError,
+    error: fullError || containerError,
   };
 }