WIP: Migrate from pages router to app router

app/frontpage.tsx

@@ -0,0 +1,131 @@
+'use client'
+
+import React from 'react';
+
+import { Section } from '../components/Styled';
+
+import { pages_index_QueryResponse } from '../__generated__/pages_index_Query.graphql';
+import Collaborators from '../components/Collaborators/Collaborators';
+import Companies from '../components/Companies/Companies';
+import Link from 'next/link';
+import styled from 'styled-components';
+import WelcomeScreen from '../components/Frontpage/WelcomeScreen';
+import Interest from '../components/Frontpage/Interest';
+import { WithDataAndLayoutProps } from '../lib/withData';
+import PageView from '../components/PageView';
+import CompactProgram from '../components/CompactProgram';
+import MainCollaborator from '../components/Collaborators/MainCollaborator';
+import FlexItem from '../components/Styled/FlexItem';
+import Flex from '../components/Styled/Flex';
+import { Player } from 'video-react';
+
+type RenderProps = WithDataAndLayoutProps<pages_index_QueryResponse>;
+
+const ReadMore = styled('h4')``;
+
+const CustomPlayer = styled.div`
+  @media only screen and (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const AboutSection = (props: pages_index_QueryResponse): JSX.Element => {
+  const frontpage =
+    props.pages && props.pages.find((el) => el && el.slug === 'frontpage');
+  return (
+    <>
+      <Flex
+        justifyContent="space-between"
+        flexDirection="row"
+        style={{ alignItems: 'center', gap: '2em' }}
+      >
+        <FlexItem flexBasis="700px" flexGrow="1">
+          {frontpage && <PageView hideDate page={frontpage} />}
+        </FlexItem>
+
+        <CustomPlayer>
+          <Player
+            playsInline
+            src={'https://cdn.itdagene.no/it.mp4'}
+            fluid={false}
+            width={280}
+            height={500}
+          />
+        </CustomPlayer>
+      </Flex>
+    </>
+  );
+};
+
+const Centered = styled('div')`
+  text-align: center;
+`;
+
+const EventsSection = ({
+  query,
+}: {
+  query: pages_index_QueryResponse;
+}): JSX.Element => (
+  <>
+    <Flex flexWrap="wrap">
+      {query.pages &&
+        query.pages.filter(Boolean).map(
+          (element) =>
+            element && (
+              <FlexItem
+                flexBasis="400px"
+                flexGrow="1"
+                key={element.slug}
+                style={{ paddingRight: '1em' }}
+              >
+                <h2>{element.title}</h2>
+                <p>{element.ingress}</p>
+                <Centered>
+                  <Link href="/info/[side]" as={`/info/${element.slug}`}>
+                    <ReadMore>Les mer</ReadMore>
+                  </Link>
+                </Centered>
+              </FlexItem>
+            )
+        )}
+    </Flex>
+  </>
+);
+
+const Index = ({ props, error }: RenderProps): JSX.Element => (
+  <>
+    <WelcomeScreen currentMetaData={props.currentMetaData} />
+    <Section>
+      <AboutSection {...props} />
+    </Section>
+    {props.currentMetaData.interestForm && (
+      <Section>
+        <Interest form={props.currentMetaData.interestForm} />
+      </Section>
+    )}
+    <Section>
+      <CompactProgram />
+    </Section>
+    {props.currentMetaData.mainCollaborator?.id && (
+      <Section>
+        <MainCollaborator company={props.currentMetaData.mainCollaborator} />
+      </Section>
+    )}
+    {props.currentMetaData.collaborators && (
+      <Section>
+        <Collaborators showDescription query={props.currentMetaData} />
+      </Section>
+    )}
+    {(props.currentMetaData.companiesFirstDay ||
+      props.currentMetaData.companiesLastDay) && (
+      <Section>
+        <Companies query={props.currentMetaData} />
+      </Section>
+    )}
+    <Section style={{ borderBottom: 0 }}>
+      <EventsSection query={props} />
+    </Section>
+  </>
+);
+
+export default Index;

app/global.css

@@ -0,0 +1,28 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.87);
+  font-smoothing: antialiased;
+  word-break: break-word;
+  font-family: Roboto, sans-serif;
+  font-variant-numeric: lining-nums;
+}
+img {
+  max-width: 100%;
+}
+p {
+  line-height: 1.4285em;
+}
+a {
+  color: '#0778BC';
+  text-decoration: none;
+}
+
+a:hover {
+  color: '#41C0EB';
+  text-decoration: none;
+}
+h1,h2,h3,h4 {
+  font-weight: 500;
+}

app/layout.tsx

@@ -0,0 +1,91 @@
+import { Metadata, Viewport } from "next"
+import Script from "next/script"
+import * as Sentry from '@sentry/node';
+
+// All css imports go here
+import './global.css'
+import 'video-react/dist/video-react.css';
+import 'react-responsive-carousel/lib/styles/carousel.min.css';
+import 'rc-slider/assets/index.css';
+
+Sentry.init({
+  enabled: process.env.NODE_ENV === 'production',
+  dsn: process.env.SENTRY_DSN,
+});
+
+export const viewport: Viewport = {
+  themeColor: "#ffffff",
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1
+}
+
+export const metadata: Metadata = {
+   icons: {
+     icon: [
+       { url: "/static/icon-512x512.png", type: "image/png", sizes: "512x512" },
+       { url: "/static/icon-384x384.png", type: "image/png", sizes: "384x384" },
+       { url: "/static/icon-256x256.png", type: "image/png", sizes: "256x256" },
+       { url: "/static/icon-192x192.png", type: "image/png", sizes: "192x192" },
+       { url: "/static/icon-96x96.png", type: "image/png", sizes: "96x96" },
+       { url: "/static/icon-48x48.png", type: "image/png", sizes: "48x48" }
+     ],
+     apple: [
+       { url: "/static/icon-512x512.png", sizes: "512x512" },
+       { url: "/static/icon-384x384.png", sizes: "384x384" },
+       { url: "/static/icon-256x256.png", sizes: "256x256" },
+       { url: "/static/icon-192x192.png", sizes: "192x192" },
+       { url: "/static/icon-96x96.png", sizes: "96x96" },
+       { url: "/static/icon-48x48.png", sizes: "48x48" }
+     ]
+   },
+   appleWebApp: {
+     title: "itDAGENE"
+   },
+   manifest: "/static/manifest.json"
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}): JSX.Element {
+  return (
+    <html lang="nb">
+      {/* <Head>
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+          rel="stylesheet"
+        />
+
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
+          integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp"
+          crossOrigin="anonymous"
+        />
+
+        {this.props.styleTags}
+      </Head> */}
+
+      <body>
+        {children}
+        <Script
+          type="module"
+          src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
+          strategy="beforeInteractive"
+        />
+        <Script
+          noModule
+          src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
+          strategy="beforeInteractive"
+        />
+      </body>
+    </html>
+  )
+}

app/page.tsx

@@ -0,0 +1,51 @@
+
+import { graphql } from 'react-relay';
+import { withDataAndLayout } from '../lib/withData';
+import FrontPage from './frontpage'
+
+
+export default withDataAndLayout(FrontPage, {
+  query: graphql`
+    query page_Query($slugs: [String!]!) {
+      currentMetaData {
+        ...Year_currentMetaData
+        ...WelcomeScreen_currentMetaData
+        id
+        interestForm
+        collaborators {
+          id
+        }
+        companiesFirstDay {
+          id
+        }
+        companiesLastDay {
+          id
+        }
+        mainCollaborator {
+          id
+          ...MainCollaborator_company
+        }
+        ...Companies_query
+        ...Collaborators_query
+      }
+
+      pages(slugs: $slugs) {
+        ...PageView_page
+        title
+        slug
+        ingress
+      }
+    }
+  `,
+  variables: {
+    slugs: [
+      //TODO: Remove this when we have this year's pages
+      'frontpage',
+      'bankett-copy',
+      'sommerjobbmaraton-copy',
+      'stands-copy',
+      'kurs-copy',
+      'om-itdagene',
+    ],
+  },
+});

lib/createRelayEnvironment.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   Environment,
   Network,
@@ -13,6 +15,12 @@ import { Environment as EnvironmentType } from 'relay-runtime';
 import * as Sentry from '@sentry/node';
 import fetch from 'isomorphic-unfetch';
 
+export type EnvSettings = {
+  sentryDsn: string;
+  release: string;
+  relayEndpoint: string;
+};
+
 let relayEnvironment: EnvironmentType | null = null;
 
 // Define a function that fetches the results of an operation (query/mutation/etc)
@@ -57,12 +65,6 @@ function fetchQueryWithSentry(envSettings: EnvSettings) {
     });
 }
 
-export type EnvSettings = {
-  sentryDsn: string;
-  release: string;
-  relayEndpoint: string;
-};
-
 export default function initEnvironment({
   records,
   envSettings,

lib/withData.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import * as React from 'react';
 import initEnvironment, { EnvSettings } from './createRelayEnvironment';
 import {

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -33,7 +33,7 @@
     "graphql": "^15.4.0",
     "isomorphic-unfetch": "^3.1.0",
     "lodash": "^4.17.21",
-    "next": "^13.1.2",
+    "next": "^14.2.3",
     "rc-slider": "^9.7.5",
     "react": "^18.2.0",
     "react-countdown-now": "^2.1.2",

tsconfig.json

@@ -4,16 +4,33 @@
     "module": "esnext",
     "strict": true,
     "esModuleInterop": true,
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/*.d.ts"]
+  "exclude": [
+    "node_modules"
+  ],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "types/*.d.ts",
+    ".next/types/**/*.ts"
+  ]
 }