Prepare pages folder for NextJS

src/pages/CommonPage.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-import Header from "@components/Header";
-import Footer from "@components/Footer/Footer";
-
-export interface CommonPageProps {
-  page: any;
-}
-export interface CommonPageState {}
-
-class CommonPage extends React.Component<CommonPageProps, CommonPageState> {
-  render() {
-    const Page = this.props.page;
-    return (
-      <>
-        <Header />
-        <Page {...this.props} />
-        <Footer />
-      </>
-    );
-  }
-}
-
-export default CommonPage;

src/pages/admin/AdminCommonPage.tsx

@@ -1,100 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Redirect } from "react-router-dom";
-import colors from "@theme/colors";
-import breakpoints from "@theme/breakpoints";
-import AdminHeader from "@components/AdminHeader";
-import AdminSidebar from "@components/AdminSidebar";
-import { isAuthenticated } from "@utils/auth";
-
-const Main = styled.main`
-  display: flex;
-  color: ${colors.white};
-  background-color: ${colors.darkBlue};
-  flex-flow: row nowrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex: 1;
-
-  h1 {
-    margin-top: 0;
-  }
-
-  & > div {
-    padding: 0 1rem;
-    width: 100%;
-    max-width: 1000px;
-    margin: 0 auto;
-  }
-
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    flex-flow: column nowrap;
-
-    & > nav {
-      width: 100%;
-    }
-  }
-
-`;
-
-export interface AdminCommonPageProps {
-  page: any;
-  match: {
-    path: string;
-  };
-  requireAuthentication?: boolean;
-}
-export interface AdminCommonPageState {
-  redirecting: boolean;
-}
-
-class AdminCommonPage extends React.Component<AdminCommonPageProps, AdminCommonPageState> {
-  unmounted: boolean;
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      redirecting: false,
-    };
-
-    if (props.requireAuthentication) {
-      this.updateIsAuthenticated();
-    }
-  }
-
-  componentWillUnmount() {
-    this.unmounted = true;
-  }
-
-  updateIsAuthenticated = async () => {
-    const redirecting = !await isAuthenticated();
-    if (!this.unmounted && redirecting) {
-      this.setState({
-        redirecting,
-      });
-    }
-  }
-
-  render() {
-    const Page = this.props.page;
-    const { path } = this.props.match;
-    const { redirecting } = this.state;
-
-    if (redirecting) {
-      const loginURL = `/admin/login?next=${path}`;
-      return <Redirect to={loginURL} />;
-    }
-
-    return (
-      <>
-        <AdminHeader />
-        <Main>
-          <AdminSidebar path={path} />
-          <Page {...this.props} />
-        </Main>
-      </>
-    );
-  }
-}
-
-export default AdminCommonPage;

src/pages/kilta/kunnia.tsx

@@ -5,7 +5,7 @@ import HonoraryPageView from "@views/HonoraryPage/HonoraryPageView";
 const HonoraryPage: React.FC = () => (
   <>
     <Helmet>
-      <link rel="canonical" href="https://sik.ayy.fi/toiminta/kunnia" />
+      <link rel="canonical" href="https://sik.ayy.fi/kilta/kunnia" />
     </Helmet>
     <HonoraryPageView />
   </>

src/routes.tsx

@@ -1,47 +1,36 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 import { Helmet } from "react-helmet";
-import FrontPage from "./pages/FrontPage";
-import GuildPage from "./pages/GuildPage";
-import NotFoundPage from "./pages/NotFoundPage";
-import CommonPage from "./pages/CommonPage";
 import JsonLD from "@components/JsonLD";
 import "./index.scss";
-import AdminFrontPage from "./pages/admin/AdminFrontView";
-import AdminEventPage from "./pages/admin/AdminEventPage";
-import AdminFeedPage from "./pages/admin/AdminFeedPage";
-import AdminCommonPage from "./pages/admin/AdminCommonPage";
-import AdminSignupPage from "./pages/admin/AdminSignupPage";
-import AdminLoginPage from "./pages/admin/AdminLoginPage";
-import AdminLogoutPage from "./pages/admin/AdminLogoutPage";
-import EventCreatePage from "./pages/admin/EventCreatePage";
-import FeedCreatePage from "./pages/admin/FeedCreatePage";
-import ContactsPage from "./pages/ContactsPage";
-import SignupCreatePage from "./pages/admin/SignupCreatePage";
-import SignupEmailPage from "./pages/admin/SignupEmailPage";
-import SignupListPage from "./pages/admin/SignupListPage";
-import SignUpPage from "./pages/SignUpPage";
-import ActualPage from "./pages/ActualPage";
-import FreshmenPage from "./pages/FreshmenPage";
-import HonoraryPage from "./pages/HonoraryPage";
-import StudiesPage from "./pages/StudiesPage";
-import CorporatePage from "./pages/CorporatePage";
-import InEnglishPage from "./pages/InEnglishPage";
-import EventPage from "./pages/EventPage";
-import AdminJobAdPage from "@pages/admin/AdminJobAdPage";
-import JobAdCreatePage from "@pages/admin/JobAdCreatePage";
 
-const renderPage = (Page) => (props): JSX.Element => {
-  return <CommonPage page={Page} {...props} />;
-};
-
-const renderAdminLoginPage = (Page) => (props): JSX.Element => {
-  return <AdminCommonPage page={Page} {...props} />;
-};
-
-const renderAdminPage = (Page) => (props): JSX.Element => {
-  return <AdminCommonPage page={Page} {...props} requireAuthentication />;
-};
+import FrontPage from "./pages";
+import GuildPage from "./pages/kilta";
+import NotFoundPage from "./pages/404";
+import AdminFrontPage from "./pages/admin";
+import AdminEventPage from "./pages/admin/events";
+import AdminFeedPage from "./pages/admin/feed";
+import AdminSignupPage from "./pages/admin/signups";
+import AdminLoginPage from "./pages/admin/login";
+import AdminLogoutPage from "./pages/admin/logout";
+import EventCreatePage from "./pages/admin/events/create";
+import FeedCreatePage from "./pages/admin/feed/create";
+import ContactsPage from "./pages/yhteystiedot";
+import SignupCreatePage from "./pages/admin/signups/create";
+import SignupEmailPage from "./pages/admin/signups/[id]/email";
+import SignupListPage from "./pages/admin/signups/[id]/list";
+import SignUpPage from "./pages/signup/[id]";
+import ActualPage from "./pages/kilta/toiminta";
+import FreshmenPage from "./pages/kilta/fuksi";
+import HonoraryPage from "./pages/kilta/kunnia";
+import StudiesPage from "./pages/opinnot_ja_ura";
+import CorporatePage from "./pages/yritysyhteistyo";
+import InEnglishPage from "./pages/in_english";
+import EventPage from "./pages/events/[id]";
+import AdminJobAdPage from "@pages/admin/jobads";
+import JobAdCreatePage from "@pages/admin/jobads/create";
+import commonPageWrapper from "@views/common/PageWrapper";
+import adminPageWrapper from "@views/common/AdminPageWrapper";
 
 const commonRoutes = [
   { path: "/", page: FrontPage },
@@ -81,30 +70,26 @@ const adminRoutes = [
   { path: "/admin", page: AdminFrontPage },
 ];
 
-class Routes extends React.Component {
-  render() {
-    return (
-      <React.Fragment>
-        <Helmet>
-          <title>Aalto-yliopiston Sähköinsinoorikilta ry</title>
-          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-          <meta name="description" content="Aalto-yliopiston Sähköinsinoorikillan verkkosivut" />
-          <link rel="canonical" href="https://sik.ayy.fi" />
-        </Helmet>
-        <JsonLD data={{
-          "@context": "http://schema.org",
-          "@type": "WebSite",
-          "url": "https://sik.ayy.fi",
-        }} />
-        <Switch>
-          {commonRoutes.map(r => <Route key={r.path} exact path={r.path} render={renderPage(r.page)} />)}
-          {adminLoginRoutes.map(r => <Route key={r.path} exact path={r.path} render={renderAdminLoginPage(r.page)} />)}
-          {adminRoutes.map(r => <Route key={r.path} exact path={r.path} render={renderAdminPage(r.page)} />)}
-          <Route component={NotFoundPage} />
-        </Switch>
-      </React.Fragment>
-    );
-  }
-}
+const Routes: React.FC = () => (
+  <>
+    <Helmet>
+      <title>Aalto-yliopiston Sähköinsinoorikilta ry</title>
+      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+      <meta name="description" content="Aalto-yliopiston Sähköinsinoorikillan verkkosivut" />
+      <link rel="canonical" href="https://sik.ayy.fi" />
+    </Helmet>
+    <JsonLD data={{
+      "@context": "http://schema.org",
+      "@type": "WebSite",
+      "url": "https://sik.ayy.fi",
+    }} />
+    <Switch>
+      {commonRoutes.map(r => <Route key={r.path} exact path={r.path} render={commonPageWrapper(r.page)} />)}
+      {adminLoginRoutes.map(r => <Route key={r.path} exact path={r.path} render={adminPageWrapper(r.page, false)} />)}
+      {adminRoutes.map(r => <Route key={r.path} exact path={r.path} render={adminPageWrapper(r.page, true)} />)}
+      <Route component={NotFoundPage} />
+    </Switch>
+  </>
+);
 
 export default Routes;

src/views/common/AdminPageWrapper.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState, ReactNode, ComponentType } from "react";
+import styled from "styled-components";
+import { RouteComponentProps, Redirect } from "react-router-dom";
+import colors from "@theme/colors";
+import breakpoints from "@theme/breakpoints";
+import AdminHeader from "@components/AdminHeader";
+import AdminSidebar from "@components/AdminSidebar";
+import { isAuthenticated } from "@utils/auth";
+
+const Main = styled.main`
+  display: flex;
+  color: ${colors.white};
+  background-color: ${colors.darkBlue};
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex: 1;
+
+  h1 {
+    margin-top: 0;
+  }
+
+  & > div {
+    padding: 0 1rem;
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    flex-flow: column nowrap;
+
+    & > nav {
+      width: 100%;
+    }
+  }
+`;
+
+
+const useShouldRedirect = (enabled = true) => {
+  const [redirecting, setRedirect] = useState(false);
+  const [completed, setCompleted] = useState(!enabled);
+
+  useEffect(() => {
+    if (enabled) {
+      isAuthenticated().then((result) => {
+        setRedirect(!result);
+        setCompleted(true);
+      });
+    }
+  }, []);
+
+  return {
+    redirecting,
+    completed
+  };
+}
+
+
+type PageProps = RouteComponentProps & {
+  page: ComponentType;
+  requiresAuthentication: boolean;
+}
+
+const PageWrapper: React.FC<PageProps> = ({ page, requiresAuthentication, ...props }) => {
+  const { path } = props.match;
+  const Page = page;
+  const { completed, redirecting } = useShouldRedirect(requiresAuthentication);
+
+  if (redirecting) {
+    const loginURL = `/admin/login?next=${path}`;
+    return <Redirect to={loginURL} />;
+  }
+
+  // TODO: Loading screen
+  if (!completed) {
+    return <>Loading</>;
+  }
+
+  return (
+    <>
+      <AdminHeader />
+      <Main>
+        <AdminSidebar path={path} />
+        <Page {...props} />
+      </Main>
+    </>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const renderPage = (Page: ReactNode, requiresAuthentication = true) => (props: any): JSX.Element => (
+  <PageWrapper page={Page} requiresAuthentication={requiresAuthentication} {...props} />
+);
+
+export default renderPage;

src/views/common/PageWrapper.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode, ComponentType } from "react";
+import Header from "@components/Header";
+import Footer from "@components/Footer/Footer";
+
+interface PageProps {
+  page: ComponentType;
+}
+
+const PageWrapper: React.FC<PageProps> = ({ page, ...props }) => {
+  const Page = page;
+  return (
+    <>
+      <Header />
+      <Page {...props} />
+      <Footer />
+    </>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+const renderPage = (Page: ReactNode) => (props: any): JSX.Element => (
+  <PageWrapper page={Page} {...props} />
+);
+
+export default renderPage;