Merge pull request #102 from kvarteret/mathias/more-typescript

Convert some files to typescript

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;

apps/kvarteret/components/RoomsSection.js → 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>

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;

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;

apps/kvarteret/components/TodayItem.js → 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) {

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;

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;