From 31b89bf322e1aeefbc040982a44f011428768ce5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Haugsb=C3=B8?= <mathiash98@gmail.com>
Date: Wed, 15 Nov 2023 18:40:40 +0100
Subject: [PATCH] Convert some files to typescript

---
 apps/kvarteret/components/GallerySection.js   |  38 ------
 apps/kvarteret/components/GallerySection.tsx  |  75 +++++++++++
 .../{RoomsSection.js => RoomsSection.tsx}     |  22 ++-
 apps/kvarteret/components/SnippetSection.js   |   7 -
 apps/kvarteret/components/SnippetSection.tsx  |  12 ++
 apps/kvarteret/components/TextSection.js      |   7 -
 apps/kvarteret/components/TextSection.tsx     |  11 ++
 .../{TodayItem.js => TodayItem.tsx}           |  20 ++-
 apps/kvarteret/pages/404.js                   |  17 ---
 apps/kvarteret/pages/404.ts                   |  23 ++++
 apps/kvarteret/pages/[id].js                  |  40 ------
 apps/kvarteret/pages/[id].ts                  |  43 ++++++
 apps/kvarteret/pages/_app.js                  |  20 ---
 apps/kvarteret/pages/_app.tsx                 |  27 ++++
 apps/kvarteret/pages/api/events.js            |  77 -----------
 apps/kvarteret/pages/api/events.ts            |  45 +++++++
 .../api/{invalidate.js => invalidate.ts}      |  35 ++---
 apps/kvarteret/pages/api/preview.js           |  33 -----
 apps/kvarteret/pages/api/preview.ts           |  39 ++++++
 .../pages/events/{index.js => index.tsx}      |  70 +++++-----
 apps/kvarteret/pages/{index.js => index.tsx}  |  27 +++-
 .../pages/{infoskjerm.js => infoskjerm.tsx}   | 126 ++++++++++--------
 22 files changed, 443 insertions(+), 371 deletions(-)
 delete mode 100644 apps/kvarteret/components/GallerySection.js
 create mode 100644 apps/kvarteret/components/GallerySection.tsx
 rename apps/kvarteret/components/{RoomsSection.js => RoomsSection.tsx} (90%)
 delete mode 100644 apps/kvarteret/components/SnippetSection.js
 create mode 100644 apps/kvarteret/components/SnippetSection.tsx
 delete mode 100644 apps/kvarteret/components/TextSection.js
 create mode 100644 apps/kvarteret/components/TextSection.tsx
 rename apps/kvarteret/components/{TodayItem.js => TodayItem.tsx} (53%)
 delete mode 100644 apps/kvarteret/pages/404.js
 create mode 100644 apps/kvarteret/pages/404.ts
 delete mode 100644 apps/kvarteret/pages/[id].js
 create mode 100644 apps/kvarteret/pages/[id].ts
 delete mode 100644 apps/kvarteret/pages/_app.js
 create mode 100644 apps/kvarteret/pages/_app.tsx
 delete mode 100644 apps/kvarteret/pages/api/events.js
 create mode 100644 apps/kvarteret/pages/api/events.ts
 rename apps/kvarteret/pages/api/{invalidate.js => invalidate.ts} (67%)
 delete mode 100644 apps/kvarteret/pages/api/preview.js
 create mode 100644 apps/kvarteret/pages/api/preview.ts
 rename apps/kvarteret/pages/events/{index.js => index.tsx} (76%)
 rename apps/kvarteret/pages/{index.js => index.tsx} (89%)
 rename apps/kvarteret/pages/{infoskjerm.js => infoskjerm.tsx} (68%)

diff --git a/apps/kvarteret/components/GallerySection.js b/apps/kvarteret/components/GallerySection.js
deleted file mode 100644
index dbde739..0000000
--- a/apps/kvarteret/components/GallerySection.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Carousel } from "./Carousel";
-import { BlurImage } from "dak-components";
-
-const CarouselComponent = ({ item, objectFit, layout, height, width }) => {
-  return (
-    <div className="container">
-      <BlurImage
-        className="carousel-image"
-        fadeIn
-        image={item}
-        objectFit={objectFit || "contain"}
-        width={!layout ? 500 : width}
-        height={!layout ? 350 : height}
-        layout={layout || "responsive"}
-      />
-    </div>
-  );
-};
-
-const GallerySection = ({ gallery, objectFit, layout, width, height }) => {
-  const images = gallery
-    ?.filter((x) => x.directus_files_id)
-    ?.map((x) => x.directus_files_id);
-  if (images.length === 1) {
-    return <CarouselComponent layout={layout} width={width} height={height} objectFit={objectFit} item={images[0]} />;
-  }
-
-  return (
-    <Carousel
-      carouselItems={gallery
-        ?.filter((x) => x.directus_files_id)
-        ?.map((x) => x.directus_files_id)}
-      component={CarouselComponent}
-    />
-  );
-};
-
-export default GallerySection;
diff --git a/apps/kvarteret/components/GallerySection.tsx b/apps/kvarteret/components/GallerySection.tsx
new file mode 100644
index 0000000..790e2ef
--- /dev/null
+++ b/apps/kvarteret/components/GallerySection.tsx
@@ -0,0 +1,75 @@
+import { FC } from "react";
+import { Carousel } from "./Carousel";
+import { BlurImage } from "dak-components";
+
+interface CarouselComponentProps {
+  item: string;
+  objectFit?: string;
+  layout?: string;
+  height?: number;
+  width?: number;
+}
+
+const CarouselComponent: FC<CarouselComponentProps> = ({
+  item,
+  objectFit,
+  layout,
+  height,
+  width,
+}) => {
+  return (
+    <div className="container">
+      <BlurImage
+        className="carousel-image"
+        fadeIn
+        image={item}
+        objectFit={objectFit || "contain"}
+        width={!layout ? 500 : width}
+        height={!layout ? 350 : height}
+        layout={layout || "responsive"}
+      />
+    </div>
+  );
+};
+
+interface GallerySectionProps {
+  gallery: { directus_files_id: string }[];
+  objectFit?: string;
+  layout?: string;
+  width?: number;
+  height?: number;
+}
+
+const GallerySection: FC<GallerySectionProps> = ({
+  gallery,
+  objectFit,
+  layout,
+  width,
+  height,
+}) => {
+  const images = gallery
+    ?.filter((x) => x.directus_files_id)
+    ?.map((x) => x.directus_files_id);
+  if (images.length === 1) {
+    return (
+      <CarouselComponent
+        layout={layout}
+        width={width}
+        height={height}
+        objectFit={objectFit}
+        item={images[0]}
+      />
+    );
+  }
+
+  return (
+    <Carousel
+      carouselItems={gallery
+        ?.filter((x) => x.directus_files_id)
+        ?.map((x) => x.directus_files_id)}
+      component={CarouselComponent}
+    />
+  );
+};
+
+export default GallerySection;
diff --git a/apps/kvarteret/components/RoomsSection.js b/apps/kvarteret/components/RoomsSection.tsx
similarity index 90%
rename from apps/kvarteret/components/RoomsSection.js
rename to apps/kvarteret/components/RoomsSection.tsx
index 1d913fa..236c873 100644
--- a/apps/kvarteret/components/RoomsSection.js
+++ b/apps/kvarteret/components/RoomsSection.tsx
@@ -1,7 +1,15 @@
 import { ExternalContent, Link } from "dak-components";
 import GallerySection from "./GallerySection";
 
-const Room = ({ name, floor, gallery, page, room_translations }) => {
+interface RoomProps {
+  name: string;
+  floor: string;
+  gallery: any;
+  page: any;
+  room_translations: any[];
+}
+
+const Room = ({ name, floor, gallery, page, room_translations }: RoomProps) => {
   const translation = room_translations[0];
   const tags = translation?.tags || [];
   const description = translation?.description;
@@ -48,9 +56,9 @@ const Room = ({ name, floor, gallery, page, room_translations }) => {
         </style>
         <style jsx>
           {`
-          a {
-            color: black;
-          }
+            a {
+              color: black;
+            }
             .room {
               padding: 0px;
               width: 100%;
@@ -115,7 +123,11 @@ const Room = ({ name, floor, gallery, page, room_translations }) => {
   );
 };
 
-const RoomSection = ({ room }) => {
+interface RoomSectionProps {
+  room: any[];
+}
+
+const RoomSection = ({ room }: RoomSectionProps) => {
   return (
     <div>
       <h2>Rom</h2>
diff --git a/apps/kvarteret/components/SnippetSection.js b/apps/kvarteret/components/SnippetSection.js
deleted file mode 100644
index 672079f..0000000
--- a/apps/kvarteret/components/SnippetSection.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Snippet from "./Snippet"
-
-const SnippetSection = ({title, code}) => {
-    return <Snippet snippet={{title, code}} />
-}
-
-export default SnippetSection;
\ No newline at end of file
diff --git a/apps/kvarteret/components/SnippetSection.tsx b/apps/kvarteret/components/SnippetSection.tsx
new file mode 100644
index 0000000..8dfa21d
--- /dev/null
+++ b/apps/kvarteret/components/SnippetSection.tsx
@@ -0,0 +1,12 @@
+import Snippet from "./Snippet";
+
+interface SnippetSectionProps {
+  title: string;
+  code: string;
+}
+
+const SnippetSection: React.FC<SnippetSectionProps> = ({ title, code }) => {
+  return <Snippet snippet={{ title, code }} />;
+};
+
+export default SnippetSection;
diff --git a/apps/kvarteret/components/TextSection.js b/apps/kvarteret/components/TextSection.js
deleted file mode 100644
index c54c626..0000000
--- a/apps/kvarteret/components/TextSection.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ExternalContent } from "dak-components"
-
-const TextSection = ({text}) => {
-    return <ExternalContent html={text} />
-}
-
-export default TextSection;
\ No newline at end of file
diff --git a/apps/kvarteret/components/TextSection.tsx b/apps/kvarteret/components/TextSection.tsx
new file mode 100644
index 0000000..7a20780
--- /dev/null
+++ b/apps/kvarteret/components/TextSection.tsx
@@ -0,0 +1,11 @@
+import { ExternalContent } from "dak-components";
+
+interface TextSectionProps {
+  text: string;
+}
+
+const TextSection: React.FC<TextSectionProps> = ({ text }) => {
+  return <ExternalContent html={text} />;
+};
+
+export default TextSection;
diff --git a/apps/kvarteret/components/TodayItem.js b/apps/kvarteret/components/TodayItem.tsx
similarity index 53%
rename from apps/kvarteret/components/TodayItem.js
rename to apps/kvarteret/components/TodayItem.tsx
index bae3cd3..6136a76 100644
--- a/apps/kvarteret/components/TodayItem.js
+++ b/apps/kvarteret/components/TodayItem.tsx
@@ -1,4 +1,15 @@
-const TodayItem = ({ event, bold }) => {
+import React from "react";
+
+interface Props {
+  event: {
+    time: string;
+    room: string;
+    title: string;
+  };
+  bold: boolean;
+}
+
+const TodayItem: React.FC<Props> = ({ event, bold }) => {
   return (
     <>
       <div className="time">{event.time}</div>
@@ -7,9 +18,10 @@ const TodayItem = ({ event, bold }) => {
 
       <style jsx>
         {`
-          .time, .room, .title {
-          font-weight: ${bold ? "700" : "300"};
-
+          .time,
+          .room,
+          .title {
+            font-weight: ${bold ? "700" : "300"};
           }
 
           @media (max-width: 768px) {
diff --git a/apps/kvarteret/pages/404.js b/apps/kvarteret/pages/404.js
deleted file mode 100644
index 89bb79e..0000000
--- a/apps/kvarteret/pages/404.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Custom404 } from "dak-components";
-import fetchLayoutData from "dak-components/lib/cms/layout";
-import { getTranslationsData } from "dak-components/lib/components/TranslatedField";
-
-export async function getStaticProps(context) {
-    const layout = await fetchLayoutData(context.locale);
-  
-    return {
-      props: {
-        translations: await getTranslationsData(context.locale, ["go-back", "404-title", "404-subtitle", "404-text"]),
-        layout: layout,
-      },
-      revalidate: 60 * 60 * 4, // Hver 4. time
-    };
-  }
-  
-export default Custom404
\ No newline at end of file
diff --git a/apps/kvarteret/pages/404.ts b/apps/kvarteret/pages/404.ts
new file mode 100644
index 0000000..b048fa4
--- /dev/null
+++ b/apps/kvarteret/pages/404.ts
@@ -0,0 +1,23 @@
+import { Custom404 } from "dak-components";
+import fetchLayoutData from "dak-components/lib/cms/layout";
+import { getTranslationsData } from "dak-components/lib/components/TranslatedField";
+import { GetStaticProps } from "next";
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  const layout = await fetchLayoutData(context.locale);
+
+  return {
+    props: {
+      translations: await getTranslationsData(context.locale, [
+        "go-back",
+        "404-title",
+        "404-subtitle",
+        "404-text",
+      ]),
+      layout: layout,
+    },
+    revalidate: 60 * 60 * 4, // Hver 4. time
+  };
+};
+
+export default Custom404;
diff --git a/apps/kvarteret/pages/[id].js b/apps/kvarteret/pages/[id].js
deleted file mode 100644
index acd7506..0000000
--- a/apps/kvarteret/pages/[id].js
+++ /dev/null
@@ -1,40 +0,0 @@
-import fetchLayoutData from "dak-components/lib/cms/layout";
-import queryAllPageSlugs, { queryPageBySlug } from "dak-components/lib/cms/queries/page";
-import { getTranslationsData } from "dak-components/lib/components/TranslatedField";
-import Page from "../components/Page";
-
-export async function getStaticPaths() {
-    const slugs = await queryAllPageSlugs();
-    const paths = slugs.map(x=> ({params: {id: x.slug}}));
-
-    return {
-        paths,
-        fallback: "blocking"
-    }
-}
-
-export async function getStaticProps({locale, params, preview, previewData}) {
-  const layout = await fetchLayoutData(locale);
-    let page = await queryPageBySlug(locale, params.id);
-    
-    if(!page) {
-      return {
-        props: {},
-        notFound: true,
-        revalidate: 1,
-      }
-    }
-
-    page = {...page, ...page.translations[0]};
-
-    return {
-      props: {
-        translations: await getTranslationsData(locale, []),
-        layout: layout,
-        data: page,
-      },
-      revalidate: 60 * 60, // Hver time
-    };
-}
-
-export default Page
diff --git a/apps/kvarteret/pages/[id].ts b/apps/kvarteret/pages/[id].ts
new file mode 100644
index 0000000..279dc0d
--- /dev/null
+++ b/apps/kvarteret/pages/[id].ts
@@ -0,0 +1,43 @@
+import fetchLayoutData from "dak-components/lib/cms/layout";
+import queryAllPageSlugs, {
+  queryPageBySlug,
+} from "dak-components/lib/cms/queries/page";
+import { getTranslationsData } from "dak-components/lib/components/TranslatedField";
+import Page from "../components/Page";
+import { GetStaticPaths, GetStaticProps } from "next";
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const slugs = await queryAllPageSlugs();
+  const paths = slugs.map((x) => ({ params: { id: x.slug } }));
+
+  return {
+    paths,
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps: GetStaticProps = async ({ locale, params }) => {
+  const layout = await fetchLayoutData(locale);
+  let page = await queryPageBySlug(locale, params.id);
+
+  if (!page) {
+    return {
+      props: {},
+      notFound: true,
+      revalidate: 1,
+    };
+  }
+
+  page = { ...page, ...page.translations[0] };
+
+  return {
+    props: {
+      translations: await getTranslationsData(locale, []),
+      layout: layout,
+      data: page,
+    },
+    revalidate: 60 * 60, // Every hour
+  };
+};
+
+export default Page;
diff --git a/apps/kvarteret/pages/_app.js b/apps/kvarteret/pages/_app.js
deleted file mode 100644
index c6821ae..0000000
--- a/apps/kvarteret/pages/_app.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import "../styles/globals.css";
-import '../public/fonts/fonts.css'
-import '../public/fonts/kvartereticons.css'
-import Script from 'next/script'
-import { Layout } from "dak-components";
-import { TranslationContext } from "dak-components/lib/components/TranslatedField";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <TranslationContext.Provider value={pageProps.translations}>
-      <Layout data={pageProps.layout}>
-            <Script src="https://unpkg.com/node-vibrant@3.1.5/dist/vibrant.min.js"></Script>
-            {pageProps?.layout?.scripts?.map((x, i) =><div key={i} strategy="afterInteractive" dangerouslySetInnerHTML={{__html: x.script}} />)}
-        <Component {...pageProps} />
-      </Layout>
-    </TranslationContext.Provider>
-  );
-}
-
-export default MyApp;
diff --git a/apps/kvarteret/pages/_app.tsx b/apps/kvarteret/pages/_app.tsx
new file mode 100644
index 0000000..96132a5
--- /dev/null
+++ b/apps/kvarteret/pages/_app.tsx
@@ -0,0 +1,27 @@
+import "../styles/globals.css";
+import "../public/fonts/fonts.css";
+import "../public/fonts/kvartereticons.css";
+import Script from "next/script";
+import { Layout } from "dak-components";
+import { TranslationContext } from "dak-components/lib/components/TranslatedField";
+import type { AppProps } from "next/app";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <TranslationContext.Provider value={pageProps.translations}>
+      <Layout data={pageProps.layout}>
+        <Script src="https://unpkg.com/node-vibrant@3.1.5/dist/vibrant.min.js"></Script>
+        {pageProps?.layout?.scripts?.map((x, i) => (
+          <div
+            key={i}
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{ __html: x.script }}
+          />
+        ))}
+        <Component {...pageProps} />
+      </Layout>
+    </TranslationContext.Provider>
+  );
+}
+
+export default MyApp;
diff --git a/apps/kvarteret/pages/api/events.js b/apps/kvarteret/pages/api/events.js
deleted file mode 100644
index d28208e..0000000
--- a/apps/kvarteret/pages/api/events.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { queryAllEvents } from "dak-components/lib/cms/queries/events";
-import { getEvents } from "dak-components/lib/studentBergen";
-import cache from "memory-cache";
-import Fuse from "fuse.js";
-import { getEventsAfter } from "dak-components/lib/cms/events";
-
-const allEvents = async () => {
-  const studentBergen = await getEvents();
-  const cmsEvents = await queryAllEvents();
-
-  const eventItems = cmsEvents;
-  const mappedSlugs = eventItems
-    .filter((x) => x.slug)
-    .reduce((acc, x) => {
-      acc[x.slug] = true;
-      return acc;
-    }, {});
-
-  // Merge the event sources. No longer necessary when studentBergen events in cms
-  for (const event of studentBergen) {
-    if (mappedSlugs[event.slug]) continue;
-    mappedSlugs[event.slug] = true;
-    eventItems.push(event);
-  }
-
-  return eventItems;
-};
-
-const allEventsCached = async () => {
-  if (cache.get("events")) {
-    return cache.get("events");
-  }
-
-  const events = await allEvents();
-  cache.put("events", events);
-
-  return events;
-};
-
-// TODO:
-export default async function handler(req, res) {
-  // ...
-  const { search } = req.query;
-  const events = await getEventsAfter("no", new Date());
-  const mapped = events;
-
-  const options = {
-    isCaseSensitive: false,
-    includeScore: false,
-    shouldSort: true,
-    includeMatches: false,
-    findAllMatches: false,
-    minMatchCharLength: 1,
-    location: 0,
-    threshold: 0.6,
-    distance: 100,
-    useExtendedSearch: false,
-    ignoreLocation: false,
-    ignoreFieldNorm: false,
-    fieldNormWeight: 1,
-    keys: [
-      "metadata.slug",
-      "room.room_id.name",
-      "translations.title",
-      "translations.description",
-    ],
-  };
-
-  if (search) {
-    const fuse = new Fuse(mapped, options);
-    const result = fuse.search(search || "");
-    res.status(200).json(result.map((x) => x.item));
-    return;
-  }
-  res.status(200).json(mapped);
-  // ...
-}
diff --git a/apps/kvarteret/pages/api/events.ts b/apps/kvarteret/pages/api/events.ts
new file mode 100644
index 0000000..625573f
--- /dev/null
+++ b/apps/kvarteret/pages/api/events.ts
@@ -0,0 +1,45 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import Fuse from "fuse.js";
+import { getEventsAfter } from "dak-components/lib/cms/events";
+
+// TODO:
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // ...
+  const search = req.query.search.toString();
+  const events = await getEventsAfter("no", new Date());
+  const mapped = events;
+
+  const options = {
+    isCaseSensitive: false,
+    includeScore: false,
+    shouldSort: true,
+    includeMatches: false,
+    findAllMatches: false,
+    minMatchCharLength: 1,
+    location: 0,
+    threshold: 0.6,
+    distance: 100,
+    useExtendedSearch: false,
+    ignoreLocation: false,
+    ignoreFieldNorm: false,
+    fieldNormWeight: 1,
+    keys: [
+      "metadata.slug",
+      "room.room_id.name",
+      "translations.title",
+      "translations.description",
+    ],
+  };
+
+  if (search) {
+    const fuse = new Fuse(mapped, options);
+    const result = fuse.search(search || "");
+    res.status(200).json(result.map((x) => x.item));
+    return;
+  }
+  res.status(200).json(mapped);
+  // ...
+}
diff --git a/apps/kvarteret/pages/api/invalidate.js b/apps/kvarteret/pages/api/invalidate.ts
similarity index 67%
rename from apps/kvarteret/pages/api/invalidate.js
rename to apps/kvarteret/pages/api/invalidate.ts
index b6c1ba0..81afd19 100644
--- a/apps/kvarteret/pages/api/invalidate.js
+++ b/apps/kvarteret/pages/api/invalidate.ts
@@ -1,5 +1,6 @@
 import Cors from "cors";
 import { queryPageSlugById } from "dak-components/lib/cms/queries/page";
+import { NextApiRequest, NextApiResponse } from "next";
 
 // Initializing the cors middleware
 const cors = Cors({
@@ -8,9 +9,13 @@ const cors = Cors({
 
 // Helper method to wait for a middleware to execute before continuing
 // And to throw an error when an error happens in a middleware
-function runMiddleware(req, res, fn) {
+function runMiddleware(
+  req: NextApiRequest,
+  res: NextApiResponse,
+  fn: Function
+) {
   return new Promise((resolve, reject) => {
-    fn(req, res, (result) => {
+    fn(req, res, (result: any) => {
       if (result instanceof Error) {
         return reject(result);
       }
@@ -21,7 +26,10 @@ function runMiddleware(req, res, fn) {
 }
 
 // TODO:
-export default async function handler(req, res) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   await runMiddleware(req, res, cors);
   // Check if secret is valid
   if (req.query.secret != process.env.INVALIDATE_SECRET) {
@@ -57,27 +65,6 @@ export default async function handler(req, res) {
     return res.json({ revalidated: true });
   }
 
-  const slug = data?.payload?.slug;
-
-  // if(collection && slug) {
-  //     let path = `/${slug}/`;
-
-  //     if(collection == "events") {
-  //         path = `/events/${slug}/`;
-  //     }
-  //     try {
-  //       await res.revalidate("/")
-  //       await res.revalidate(path)
-  //       console.info("Invalidated cache for", path)
-  //       return res.json({ revalidated: true })
-  //     } catch (err) {
-  //         console.log("Error invalidating", path, err)
-  //       // If there was an error, Next.js will continue
-  //       // to show the last successfully generated page
-  //       return res.status(500).send('Error revalidating')
-  //     }
-  // }
-
   return res.status(400).json({ message: "Invalid payload" });
   // ...
 }
diff --git a/apps/kvarteret/pages/api/preview.js b/apps/kvarteret/pages/api/preview.js
deleted file mode 100644
index 2c4aeed..0000000
--- a/apps/kvarteret/pages/api/preview.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Cors from 'cors'
-
-// Initializing the cors middleware
-const cors = Cors({
-  methods: ['GET', 'HEAD'],
-})
-
-// Helper method to wait for a middleware to execute before continuing
-// And to throw an error when an error happens in a middleware
-function runMiddleware(req, res, fn) {
-  return new Promise((resolve, reject) => {
-    fn(req, res, (result) => {
-      if (result instanceof Error) {
-        return reject(result)
-      }
-
-      return resolve(result)
-    })
-  })
-}
-
-// TODO:
-export default async function handler(req, res) {
-  await runMiddleware(req, res, cors)
-    // ...
-    const {data, path} = req.query;
-    
-    console.log("SETTING PREVIEW DATA TO", data);
-    res.setPreviewData(JSON.parse(data || "{}"));
-    console.log("SLUG", path);
-    res.redirect(path);
-    // ...
-  }
\ No newline at end of file
diff --git a/apps/kvarteret/pages/api/preview.ts b/apps/kvarteret/pages/api/preview.ts
new file mode 100644
index 0000000..2304526
--- /dev/null
+++ b/apps/kvarteret/pages/api/preview.ts
@@ -0,0 +1,39 @@
+import Cors from "cors";
+import { NextApiRequest, NextApiResponse } from "next";
+
+// Initializing the cors middleware
+const cors = Cors({
+  methods: ["GET", "HEAD"],
+});
+
+// Helper method to wait for a middleware to execute before continuing
+// And to throw an error when an error happens in a middleware
+function runMiddleware(
+  req: NextApiRequest,
+  res: NextApiResponse,
+  fn: Function
+) {
+  return new Promise((resolve, reject) => {
+    fn(req, res, (result: any) => {
+      if (result instanceof Error) {
+        return reject(result);
+      }
+
+      return resolve(result);
+    });
+  });
+}
+
+// TODO:
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  await runMiddleware(req, res, cors);
+  const { data, path } = req.query;
+
+  console.log("SETTING PREVIEW DATA TO", data);
+  res.setPreviewData(JSON.parse(data.toString() || "{}"));
+  console.log("SLUG", path);
+  res.redirect(path as string);
+}
diff --git a/apps/kvarteret/pages/events/index.js b/apps/kvarteret/pages/events/index.tsx
similarity index 76%
rename from apps/kvarteret/pages/events/index.js
rename to apps/kvarteret/pages/events/index.tsx
index 044c064..ba563f8 100644
--- a/apps/kvarteret/pages/events/index.js
+++ b/apps/kvarteret/pages/events/index.tsx
@@ -1,27 +1,35 @@
-import fetchLayoutData from "dak-components/lib/cms/layout";
 import { useCallback, useEffect, useState } from "react";
 import axios from "axios";
 import { BlurImage } from "dak-components";
-import TranslatedField, {
-  getTranslationsData,
-} from "dak-components/lib/components/TranslatedField";
-
-export async function getStaticProps(context) {
-  const layout = await fetchLayoutData(context.locale);
-
-  return {
-    props: {
-      translations: await getTranslationsData(context.locale, [
-        "events",
-        "search",
-      ]),
-      layout: layout,
-    },
-    revalidate: 60 * 30,
-  };
-}
-
-const HorizontalCard = ({ url, image, altImage, title, description, time }) => {
+import TranslatedField from "dak-components/lib/components/TranslatedField";
+
+type Event = {
+  slug: string;
+  top_image: string;
+  duration: string;
+  translations: {
+    title: string;
+    description: string;
+  }[];
+};
+
+type HorizontalCardProps = {
+  url: string;
+  image: string;
+  altImage: string;
+  title: string;
+  description: string;
+  time: string;
+};
+
+const HorizontalCard = ({
+  url,
+  image,
+  altImage,
+  title,
+  description,
+  time,
+}: HorizontalCardProps) => {
   return (
     <a href={url} className="container" id="searchContainer">
       <div className="image">
@@ -70,15 +78,6 @@ const HorizontalCard = ({ url, image, altImage, title, description, time }) => {
             cursor: pointer;
           }
 
-          // .container:hover {
-          //   border-bottom-left-radius: 0;
-          //   border-bottom-right-radius: 0;
-          //   transform: scale(1.001);
-          //   transition: all 0.1s;
-          //   box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
-          //     rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
-          // }
-
           .image {
             width: 256px;
             border-radius: 5px;
@@ -127,7 +126,11 @@ const HorizontalCard = ({ url, image, altImage, title, description, time }) => {
   );
 };
 
-const EventCard = ({ event }) => {
+type EventCardProps = {
+  event: Event;
+};
+
+const EventCard = ({ event }: EventCardProps) => {
   const title = event.translations[0].title;
   const description = event.translations[0].description;
   return (
@@ -140,7 +143,6 @@ const EventCard = ({ event }) => {
         time={event.duration}
         description={description}
       />
-      {/* {JSON.stringify(event)} */}
     </div>
   );
 };
@@ -148,11 +150,11 @@ const EventCard = ({ event }) => {
 // Relevant filter: free-text search, room, arrangør, tags
 const EventSearch = () => {
   const [search, setSearch] = useState("");
-  const [events, setEvents] = useState([]);
+  const [events, setEvents] = useState<Event[]>([]);
 
   const doSearch = useCallback(() => {
     const asyncSearch = async () => {
-      const { data } = await axios.get(
+      const { data } = await axios.get<Event[]>(
         `/api/events?search=${encodeURIComponent(search)}`
       );
       setEvents(data);
diff --git a/apps/kvarteret/pages/index.js b/apps/kvarteret/pages/index.tsx
similarity index 89%
rename from apps/kvarteret/pages/index.js
rename to apps/kvarteret/pages/index.tsx
index 1774bf5..5f30e93 100644
--- a/apps/kvarteret/pages/index.js
+++ b/apps/kvarteret/pages/index.tsx
@@ -4,14 +4,23 @@ import fetchLayoutData from "dak-components/lib/cms/layout";
 import { Title } from "dak-components";
 import { Carousel } from "../components/Carousel";
 import { EventList } from "../components/EventList";
-import { TodayItem } from "../components/TodayItem";
 import { NextSeo } from "next-seo";
 import TranslatedField, {
   getTranslationsData,
-  useTranslation,
 } from "dak-components/lib/components/TranslatedField";
+import { GetStaticProps } from "next";
 
-export async function getStaticProps(context) {
+interface IndexProps {
+  data: {
+    carouselItems: any[];
+    todayText: string;
+    eventsToday: any[];
+    openingHours: any[];
+    events: any[];
+  };
+}
+
+export const getStaticProps: GetStaticProps<IndexProps> = async (context) => {
   const layout = await fetchLayoutData(context.locale);
   const indexData = await fetchIndexData(context.locale);
 
@@ -31,9 +40,9 @@ export async function getStaticProps(context) {
     },
     revalidate: 60 * 30, // Hver halvtime
   };
-}
+};
 
-export default function Index({ data }) {
+export default function Index({ data }: IndexProps) {
   return (
     <div className="container">
       {/* TODO: Fetch from cms and make language dependent */}
@@ -74,7 +83,9 @@ export default function Index({ data }) {
           </Title>
           <OpeningHours openingHours={data.openingHours} />
           <Link href="vare-barer">
-            <a className="vare-barer"><TranslatedField tKey="footer-opening-hours-description" /></a>
+            <a className="vare-barer">
+              <TranslatedField tKey="footer-opening-hours-description" />
+            </a>
           </Link>
         </div>
         <div className="events">
@@ -83,7 +94,9 @@ export default function Index({ data }) {
           </Title>
           <EventList events={data.events} />
           <Link href="events">
-            <a className="more-events"><TranslatedField tKey="index-see-more-events" /></a>
+            <a className="more-events">
+              <TranslatedField tKey="index-see-more-events" />
+            </a>
           </Link>
         </div>
       </div>
diff --git a/apps/kvarteret/pages/infoskjerm.js b/apps/kvarteret/pages/infoskjerm.tsx
similarity index 68%
rename from apps/kvarteret/pages/infoskjerm.js
rename to apps/kvarteret/pages/infoskjerm.tsx
index f7918e2..84abebd 100644
--- a/apps/kvarteret/pages/infoskjerm.js
+++ b/apps/kvarteret/pages/infoskjerm.tsx
@@ -7,38 +7,22 @@ import {
   filterPastEvents,
   getEventsAtFloor,
 } from "../components/infoskjerm/utils";
-import logo from '../public/static/Kvarteret_logo_rosa.png'
+import logo from "../public/static/Kvarteret_logo_rosa.png";
 
-// Contains imported React code from infoskjerm github repo
-
-export async function getStaticProps(context) {
-  const crescatData = filterPastEvents(await getEvents());
-  // const crescatData = returnDummyData();
-  let floorData = [];
-  for (let i = 3; i >= 1; --i) {
-    floorData.push({
-      floor: i,
-      events: getEventsAtFloor(crescatData, i),
-    });
-  }
-
-  return {
-    props: {
-      translations: await getTranslationsData(context.locale, []),
-      eventData: floorData,
-    },
-    revalidate: 60 * 30, // Hver halvtime
-  };
+interface EventProps {
+  arrangoer: string;
+  sted: string;
+  event: string;
+  tid: string;
 }
 
-const Event = ({ arrangoer, sted, event, tid }) => (
+const Event: React.FC<EventProps> = ({ sted, event, tid }) => (
   <>
     {sted && <div className="room">{sted}</div>}
     <div className="title">{event}</div>
     <div className="time">{tid}</div>
     <style jsx>
       {`
-
         .title {
           grid-column: ${!sted ? "1/3" : "2"};
           overflow: hidden;
@@ -52,47 +36,51 @@ const Event = ({ arrangoer, sted, event, tid }) => (
   </>
 );
 
-const Floor = ({ name, events }) => {
+interface FloorProps {
+  name: string;
+  events: any[];
+}
+
+const Floor: React.FC<FloorProps> = ({ name, events }) => {
   return (
     <div className="container">
       <div className="name">{name}</div>
       <div className="content">
         <div className="eventGrid">
-
-        {events.map((event, index) => {
-        const start = new Date(event?.start)
-        let tid = format(new Date(start), "HH:mm")
-        if(start < new Date()) {
-          tid = "PÅGÅR"
-        }
-        return (<Event
-          key={index}
-          sted={event?.room}
-          event={event?.name}
-          tid={tid}
-        />)
-      })}
+          {events.map((event, index) => {
+            const start = new Date(event?.start);
+            let tid = format(new Date(start), "HH:mm");
+            if (start < new Date()) {
+              tid = "PÅGÅR";
+            }
+            return (
+              <Event
+                key={index}
+                sted={event?.room}
+                event={event?.name}
+                tid={tid}
+              />
+            );
+          })}
         </div>
       </div>
       <style jsx>
         {`
           .container {
           }
-        .eventGrid {
-          display: grid;
-          gap: 15px;
-          grid-template-columns: 150px 1fr 70px;
-          color: #FDDBDB;
-          font-size: 18px;
-          font-weight: 100;
-
-          font-weight: 400;
-
+          .eventGrid {
+            display: grid;
+            gap: 15px;
+            grid-template-columns: 150px 1fr 70px;
+            color: #fddbdb;
+            font-size: 18px;
+            font-weight: 100;
 
-        }
+            font-weight: 400;
+          }
           .content {
             margin-top: 30px;
-            display:flex;
+            display: flex;
             flex-direction: column;
             gap: 10px;
           }
@@ -109,12 +97,16 @@ const Floor = ({ name, events }) => {
   );
 };
 
-const InfoSkjerm = ({ eventData }) => {
+interface InfoSkjermProps {
+  eventData: any[];
+}
+
+const InfoSkjerm: React.FC<InfoSkjermProps> = ({ eventData }) => {
   return (
     <div className="container">
       <div className="header">
         <h1 className="title">
-          DETTE SKJER <br/> I DAG
+          DETTE SKJER <br /> I DAG
         </h1>
         <Image
           className="logo"
@@ -132,13 +124,11 @@ const InfoSkjerm = ({ eventData }) => {
       </div>
       <style jsx global>
         {`
-        body {
-
-          background-color: #282835;
-        }
-        
+          body {
+            background-color: #282835;
+          }
         `}
-        </style>
+      </style>
 
       <style jsx>
         {`
@@ -185,4 +175,24 @@ const InfoSkjerm = ({ eventData }) => {
   );
 };
 
+export async function getStaticProps(context) {
+  const crescatData = filterPastEvents(await getEvents());
+  // const crescatData = returnDummyData();
+  let floorData = [];
+  for (let i = 3; i >= 1; --i) {
+    floorData.push({
+      floor: i,
+      events: getEventsAtFloor(crescatData, i),
+    });
+  }
+
+  return {
+    props: {
+      translations: await getTranslationsData(context.locale, []),
+      eventData: floorData,
+    },
+    revalidate: 60 * 30, // Hver halvtime
+  };
+}
+
 export default InfoSkjerm;