get pages from current branch

Author: toresbe

pages/_app.tsx

@@ -1,22 +1,26 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React from "react";
+import React, { useState } from "react";
 import type { AppContext, AppProps } from "next/app";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import "shaka-player/dist/controls.css";
 import { Header } from "modules/core/components/Header";
-import { Global, ThemeProvider } from "@emotion/react";
+import { Global } from "@emotion/react";
 import { global } from "modules/styling/global";
-import { lightTheme } from "modules/styling/themes";
 import { Body } from "modules/core/components/Body";
 import { getManager, ManagerContext } from "modules/state/manager";
 import App from "next/app";
 import { ModalOverlay } from "modules/modal/components/ModalOverlay";
 import { ScrollLock } from "modules/ui/components/ScrollLock";
-import { useObserver } from "mobx-react-lite";
 import { PopoverOverlay } from "modules/popover/components/PopoverOverlay";
 import { IS_SERVER } from "modules/core/constants";
 import { Footer } from "modules/core/components/Footer";
+import { enableStaticRendering, observer } from "mobx-react-lite";
+import { ThemeContext } from "modules/styling/components/ThemeContext";
+
+// Not a React hook.
+// eslint-disable-next-line react-hooks/rules-of-hooks
+enableStaticRendering(IS_SERVER);
 
 Sentry.init({
   dsn: "https://[email protected]/5701229",
@@ -30,15 +34,15 @@ Sentry.init({
 
 export type CustomAppProps = AppProps & { serialized: any };
 
-export default function CustomApp(props: CustomAppProps) {
+function CustomApp(props: CustomAppProps) {
   const { Component, pageProps, serialized } = props;
 
-  const manager = getManager(serialized);
-  const locked = useObserver(() => manager.stores.modalStore.hasItems);
+  const [manager] = useState(() => getManager(serialized));
+  const locked = manager.stores.modalStore.hasItems;
 
   return (
     <ManagerContext.Provider value={manager}>
-      <ThemeProvider theme={lightTheme}>
+      <ThemeContext>
         <ScrollLock locked={locked}>
           {(style) => (
             <div style={style}>
@@ -53,7 +57,7 @@ export default function CustomApp(props: CustomAppProps) {
             </div>
           )}
         </ScrollLock>
-      </ThemeProvider>
+      </ThemeContext>
     </ManagerContext.Provider>
   );
 }
@@ -75,7 +79,7 @@ CustomApp.getInitialProps = async (appContext: AppContext): Promise<any> => {
       networkStore.incomingHeaders[key] = value;
     }
 
-    networkStore.setResponseObject(res);
+    networkStore.setHTTPObjects(res, req);
   }
 
   if (!manager.didInit) {
@@ -90,3 +94,5 @@ CustomApp.getInitialProps = async (appContext: AppContext): Promise<any> => {
 
   return { ...appProps, serialized };
 };
+
+export default observer(CustomApp);

pages/about/index.tsx

@@ -1,10 +1,17 @@
+import { Meta } from "modules/core/components/Meta";
 import { Document } from "modules/ui/components/Document";
 import { ExternalLink } from "modules/ui/components/ExternalLink";
 import { Quote } from "modules/ui/components/Quote";
 
 export default function About() {
   return (
     <Document>
+      <Meta
+        meta={{
+          title: "Om",
+          description: "Informasjon om Frikanalen og hvordan du kan bli medlem",
+        }}
+      />
       <h1>Frikanalen er sivilsamfunnets videoplatform</h1>
       <Quote
         citation={{

pages/about/statutes.tsx

@@ -1,9 +1,16 @@
+import { Meta } from "modules/core/components/Meta";
 import { Document } from "modules/ui/components/Document";
 import React from "react";
 
 export default function About() {
   return (
     <Document>
+      <Meta
+        meta={{
+          title: "Våre vedtekter",
+          description: "Her kan du lese vedtektene for Foreningen Frikanalen",
+        }}
+      />
       <h1>Vedtekter for Foreningen Frikanalen</h1>
 
       <p>

pages/graphics/index.tsx

@@ -1,22 +1,39 @@
 import styled from "@emotion/styled";
-import { useObserver } from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
+import { Meta } from "modules/core/components/Meta";
 import { ScheduleItemBlurb } from "modules/schedule/components/ScheduleItemBlurb";
 import { ScheduleItemSummary } from "modules/schedule/components/ScheduleItemSummary";
 import { useStores } from "modules/state/manager";
 import { LiveVideoPlayer } from "modules/video/components/LiveVideoPlayer";
 import { NextPageContext } from "next";
+import React from "react";
+
+const breakpoint = 880;
 
 const Container = styled.div`
   display: flex;
+
+  @media (max-width: ${breakpoint}px) {
+    flex-direction: column;
+  }
 `;
 
 const Main = styled.div`
   width: 60%;
+
+  @media (max-width: ${breakpoint}px) {
+    width: 100%;
+  }
 `;
 
 const Sidebar = styled.div`
   flex: 1;
   margin-left: 32px;
+
+  @media (max-width: ${breakpoint}px) {
+    margin-top: 32px;
+    margin-left: 0px;
+  }
 `;
 
 const NowPlaying = styled(ScheduleItemBlurb)`
@@ -32,23 +49,38 @@ const Schedule = styled.div`
   margin-top: 16px;
 `;
 
-export default function Index() {
+function Index() {
   const { scheduleStore } = useStores();
+  const [now, ...later] = scheduleStore.upcoming;
 
-  const [now, ...later] = useObserver(() => scheduleStore.upcoming);
-  if (!now) return null;
+  const renderSchedule = () => {
+    if (!now) return null;
 
-  return (
-    <Container>
-      <Main>
-        <LiveVideoPlayer width={1280} height={720} src="https://frikanalen.no/stream/index.m3u8" />
+    return (
+      <>
         <NowPlaying item={now} />
         <NextTitle>Senere</NextTitle>
         <Schedule>
           {later.map((x) => (
             <ScheduleItemSummary key={x.data.id} item={x} />
           ))}
         </Schedule>
+      </>
+    );
+  };
+
+  return (
+    <Container>
+      <Meta
+        meta={{
+          title: "Direkte",
+          description: "Frikanalen er sivilsamfunnets videoplatform",
+          type: "website",
+        }}
+      />
+      <Main>
+        <LiveVideoPlayer width={1280} height={720} src="https://frikanalen.no/stream/index.m3u8" />
+        {renderSchedule()}
       </Main>
       <Sidebar>
         <h1>Velkommen til nye Frikanalen!</h1>
@@ -67,5 +99,8 @@ Index.getInitialProps = async (context: NextPageContext) => {
   const { scheduleStore } = context.manager.stores;
   await scheduleStore.fetchLatest();
 
-  return {};
+  // Needs to return non empty object to silence error
+  return { _: "" };
 };
+
+export default observer(Index);