thedevs-network · opedrodev · Sep 27, 2023 · Sep 27, 2023 · Sep 27, 2023 · Sep 28, 2023
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:12-alpine
+FROM node:16.16.0-alpine
 
 RUN apk add --update bash
 

diff --git a/client/pages/banned.tsx → client/app/banned/page.tsx b/client/pages/banned.tsx → client/app/banned/page.tsx
@@ -1,15 +1,16 @@
-import getConfig from "next/config";
+"use client"
+
 import React from "react";
 
-import AppWrapper from "../components/AppWrapper";
-import { H2, H4, Span } from "../components/Text";
-import Footer from "../components/Footer";
-import ALink from "../components/ALink";
-import { Col } from "../components/Layout";
+import AppWrapper from "../../components/AppWrapper";
+import { H2, H4, Span } from "../../components/Text";
+import Footer from "../../components/Footer";
+import ALink from "../../components/ALink";
+import { Col } from "../../components/Layout";
 
-const { publicRuntimeConfig } = getConfig();
+import { publicRuntimeConfig } from '../../../next.config';
 
-const BannedPage = () => {
+export default function BannedPage() {
   return (
     <AppWrapper>
       <Col flex="1 1 100%" alignItems="center">
@@ -33,5 +34,3 @@ const BannedPage = () => {
     </AppWrapper>
   );
 };
-
-export default BannedPage;
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { publicRuntimeConfig } from '../../next.config';
+import type { Metadata } from 'next';
+import { Providers } from "../store/provider";
+import Head from "next/head";
+import { Colors } from "../consts";
+interface Props {
+  children: React.ReactNode;
+}
+
+export const metadata: Metadata = {
+  title: `${publicRuntimeConfig.SITE_NAME} | Modern Open Source URL shortener.`,
+  description: `${publicRuntimeConfig.SITE_NAME} is a free and open source URL shortener with custom domains and stats.`,
+  openGraph: {
+    type: 'website',
+    url: `https://${publicRuntimeConfig.DEFAULT_DOMAIN}`,
+    title: `${publicRuntimeConfig.SITE_NAME} | Modern Open Source URL shortener.`,
+    description: `${publicRuntimeConfig.SITE_NAME} is a free and open source URL shortener with custom domains and stats.`,
+    images: [
+      {
+        url: `https://${publicRuntimeConfig.DEFAULT_DOMAIN}/images/card.png`,
+        width: 1200,
+        height: 630,
+        alt: `${publicRuntimeConfig.SITE_NAME} | Modern Open Source URL shortener.`,
+      },
+    ],
+  },
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css?family=Nunito:300,400,700&display=optional"
+          rel="stylesheet"
+        />
+        <link rel="icon" sizes="196x196" href="/images/favicon-196x196.png" />
+        <link rel="icon" sizes="32x32" href="/images/favicon-32x32.png" />
+        <link rel="icon" sizes="16x16" href="/images/favicon-16x16.png" />
+        <link rel="apple-touch-icon" href="/images/favicon-196x196.png" />
+        <link rel="mask-icon" href="/images/icon.svg" color="blue" />
+        <link rel="manifest" href="manifest.webmanifest" />
+
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `window.recaptchaCallback = function() { window.isCaptchaReady = true; }`
+          }}
+        />
+
+        <script
+          src="https://www.google.com/recaptcha/api.js?render=explicit"
+          async
+          defer
+        />
+      </head>
+      <body
+        style={{
+          margin: 0,
+          backgroundColor: Colors.Bg,
+          font: '16px/1.45 "Nunito", sans-serif',
+          overflowX: "hidden",
+          color: Colors.Text
+        }}
+      >
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/client/pages/login.tsx → client/app/login/page.tsx b/client/pages/login.tsx → client/app/login/page.tsx
@@ -1,21 +1,23 @@
+"use client"
+
 import { useFormState } from "react-use-form-state";
 import React, { useEffect, useState } from "react";
 import { Flex } from "rebass/styled-components";
 import emailValidator from "email-validator";
 import styled from "styled-components";
-import Router from "next/router";
+import { useRouter } from "next/navigation";
 import axios from "axios";
 
-import { useStoreState, useStoreActions } from "../store";
-import { APIv2, DISALLOW_REGISTRATION } from "../consts";
-import { ColCenterV } from "../components/Layout";
-import AppWrapper from "../components/AppWrapper";
-import { TextInput } from "../components/Input";
-import { fadeIn } from "../helpers/animations";
-import { Button } from "../components/Button";
-import Text, { H2 } from "../components/Text";
-import ALink from "../components/ALink";
-import Icon from "../components/Icon";
+import { useStoreState, useStoreActions } from "../../store";
+import { APIv2, DISALLOW_REGISTRATION } from "../../consts";
+import { ColCenterV } from "../../components/Layout";
+import AppWrapper from "../../components/AppWrapper";
+import { TextInput } from "../../components/Input";
+import { fadeIn } from "../../helpers/animations";
+import { Button } from "../../components/Button";
+import Text, { H2 } from "../../components/Text";
+import ALink from "../../components/ALink";
+import Icon from "../../components/Icon";
 
 const LoginForm = styled(Flex).attrs({
   as: "form",
@@ -30,7 +32,7 @@ const Email = styled.span`
   border-bottom: 1px dotted #999;
 `;
 
-const LoginPage = () => {
+export default function Login() {
   const { isAuthenticated } = useStoreState((s) => s.auth);
   const login = useStoreActions((s) => s.auth.login);
   const [error, setError] = useState("");
@@ -40,10 +42,11 @@ const LoginPage = () => {
     email: string;
     password: string;
   }>(null, { withIds: true });
+  const router = useRouter();
 
   useEffect(() => {
-    if (isAuthenticated) Router.push("/");
-  }, [isAuthenticated]);
+    if (isAuthenticated) router.push("/");
+  }, [isAuthenticated, router]);
 
   function onSubmit(type: "login" | "signup") {
     return async (e) => {
@@ -70,7 +73,7 @@ const LoginPage = () => {
         setLoading((s) => ({ ...s, login: true }));
         try {
           await login(formState.values);
-          Router.push("/");
+          router.push("/");
         } catch (error) {
           setError(error.response.data.error);
         }
@@ -181,5 +184,3 @@ const LoginPage = () => {
     </AppWrapper>
   );
 };
-
-export default LoginPage;
diff --git a/client/app/logout/page.tsx b/client/app/logout/page.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+import { useStoreActions } from "../../store";
+
+export default function LogoutPage() {
+  const logout = useStoreActions((s) => s.auth.logout);
+  const reset = useStoreActions((s) => s.reset);
+  const router = useRouter();
+
+  useEffect(() => {
+    logout();
+    reset();
+    router.push("/");
+  }, [logout, reset, router]);
+
+  return <div />;
+};
diff --git a/client/pages/index.tsx → client/app/page.tsx b/client/pages/index.tsx → client/app/page.tsx
@@ -1,5 +1,7 @@
-import React from "react";
-import Router from "next/router";
+"use client"
+
+import React, { useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 import { DISALLOW_ANONYMOUS_LINKS } from "../consts";
 import NeedToLogin from "../components/NeedToLogin";
@@ -9,17 +11,33 @@ import AppWrapper from "../components/AppWrapper";
 import Shortener from "../components/Shortener";
 import Features from "../components/Features";
 import Footer from "../components/Footer";
-import { useStoreState } from "../store";
+import { useStoreActions, useStoreState } from "../store";
+import cookie from "js-cookie";
 
-const Homepage = () => {
+export default function Home() {
   const isAuthenticated = useStoreState(s => s.auth.isAuthenticated);
+  const { renew, logout } = useStoreActions(s => s.auth);
+  const router = useRouter();
+
+  useEffect(() => {
+    const token = cookie.get("token");
+    const isVerifyEmailPage =
+      typeof window !== "undefined" &&
+      window.location.pathname.includes("verify-email");
+
+    if (token && !isVerifyEmailPage) {
+      renew().catch(() => {
+        logout();
+      });
+    }
+  }, [logout, renew]);
 
   if (
     !isAuthenticated &&
     DISALLOW_ANONYMOUS_LINKS &&
     typeof window !== "undefined"
   ) {
-    Router.push("/login");
+    router.push("/login");
     return null;
   }
 
@@ -33,6 +51,4 @@ const Homepage = () => {
       <Footer />
     </AppWrapper>
   );
-};
-
-export default Homepage;
+}
diff --git a/client/pages/protected/[id].tsx → client/app/protected/[id]/page.tsx b/client/pages/protected/[id].tsx → client/app/protected/[id]/page.tsx
@@ -1,24 +1,19 @@
+"use client"
+
 import { useFormState } from "react-use-form-state";
 import { Flex } from "rebass/styled-components";
 import React, { useState } from "react";
-import { NextPage } from "next";
-import { useRouter } from "next/router";
 import axios from "axios";
 
-import AppWrapper from "../../components/AppWrapper";
-import { TextInput } from "../../components/Input";
-import { Button } from "../../components/Button";
-import Text, { H2 } from "../../components/Text";
-import { Col } from "../../components/Layout";
-import Icon from "../../components/Icon";
-import { APIv2 } from "../../consts";
-
-interface Props {
-  protectedLink?: string;
-}
+import AppWrapper from "../../../components/AppWrapper";
+import { TextInput } from "../../../components/Input";
+import { Button } from "../../../components/Button";
+import Text, { H2 } from "../../../components/Text";
+import { Col } from "../../../components/Layout";
+import Icon from "../../../components/Icon";
+import { APIv2 } from "../../../consts";
 
-const ProtectedPage: NextPage<Props> = () => {
-  const router = useRouter();
+const ProtectedPage = ({ params }: { params: { id: string } }) => {
   const [loading, setLoading] = useState(false);
   const [formState, { password }] = useFormState<{ password: string }>();
   const [error, setError] = useState<string>();
@@ -35,7 +30,7 @@ const ProtectedPage: NextPage<Props> = () => {
     setLoading(true);
     try {
       const { data } = await axios.post(
-        `${APIv2.Links}/${router.query.id}/protected`,
+        `${APIv2.Links}/${params.id}/protected`,
         {
           password
         }
@@ -49,7 +44,7 @@ const ProtectedPage: NextPage<Props> = () => {
 
   return (
     <AppWrapper>
-      {!router.query.id ? (
+      {!params.id ? (
         <H2 my={4} light>
           404 | Link could not be found.
         </H2>
@@ -89,10 +84,4 @@ const ProtectedPage: NextPage<Props> = () => {
   );
 };
 
-ProtectedPage.getInitialProps = async ({ req }) => {
-  return {
-    protectedLink: req && (req as any).protectedLink
-  };
-};
-
 export default ProtectedPage;
diff --git a/client/pages/report.tsx → client/app/report/page.tsx b/client/pages/report.tsx → client/app/report/page.tsx
@@ -1,20 +1,20 @@
+"use client";
+
 import { useFormState } from "react-use-form-state";
 import { Flex } from "rebass/styled-components";
 import React, { useState } from "react";
 import axios from "axios";
 
-import Text, { H2, Span } from "../components/Text";
-import AppWrapper from "../components/AppWrapper";
-import { TextInput } from "../components/Input";
-import { Button } from "../components/Button";
-import { Col } from "../components/Layout";
-import Icon from "../components/Icon";
-import { useMessage } from "../hooks";
-import { APIv2 } from "../consts";
-
-import getConfig from "next/config";
+import Text, { H2, Span } from "../../components/Text";
+import AppWrapper from "../../components/AppWrapper";
+import { TextInput } from "../../components/Input";
+import { Button } from "../../components/Button";
+import { Col } from "../../components/Layout";
+import Icon from "../../components/Icon";
+import { useMessage } from "../../hooks";
+import { APIv2 } from "../../consts";
 
-const { publicRuntimeConfig } = getConfig();
+import { publicRuntimeConfig } from '../../../next.config';
 
 const ReportPage = () => {
   const [formState, { text }] = useFormState<{ url: string }>();