refactor(webapp): links (#58)

* chore: sass

* chore: sass base styles

* chore: eof newlines

* feat: base link component

* chore: base link tweak

* feat: external link component

don't need its styling yet
because the base link is assumed external

* feat: internal link component

* style: internal link colours

* feat: local link component

* refactor: register page

* refactor: login page

* chore: misc lib changes

* refactor: header component

* refactor: theme switcher

* refactor: videolist component

* fix: build errors

* style: header and footer tweaks

* refactor: video page

Co-authored-by: OtoMAN <65930041+horahoradev@users.noreply.github.com>

Author: GabenGar

docker-compose.dev.yml

@@ -7,6 +7,7 @@ services:
     volumes:
       - ./webapp/src:/webapp/src
       - ./webapp/public:/webapp/public
+      - ./webapp/next.config.js:/webapp/next.config.js
     ports:
       - "3000:3000"
   frontapi:

webapp/next.config.js

@@ -12,10 +12,7 @@ const nextJSConfig = {
   },
   sassOptions: {
     includePaths: [path.join(__dirname, "src", "styles")],
-  },
-  experimental: {
-    newNextLinkBehavior: true,
-  },
+  }
 };
 
 module.exports = nextJSConfig;

webapp/src/components/footer.module.scss

@@ -0,0 +1,15 @@
+@use "../styles/variables/sass.scss" as *;
+
+.block {
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 2rem;
+  background-color: var(--colour1-secondary);
+}
+
+.link {
+  font-size: 1.25rem;
+  line-height: 2rem;
+  font-weight: bold;
+}

webapp/src/components/footer.tsx

@@ -1,17 +1,14 @@
-import { PrivacyPolicy } from "./privacy-policy";
-import { TermsOfService } from "./terms-of-service";
+import styles from "./footer.module.scss";
 
-interface IFooterProps extends Record<string, unknown> {}
+import { LinkInternal } from "#components/links";
 
-export function Footer(props: IFooterProps) {
-  const { userData, dataless } = props;
+interface IFooterProps extends Record<string, unknown> {}
 
+export function Footer({ userData, dataless }: IFooterProps) {
   return (
-    <nav className="h-8 w-full bg-white dark:bg-gray-900 shadow">
-      <div className="flex justify-around p-auto">
-        <PrivacyPolicy />
-        <TermsOfService />
-      </div>
-    </nav>
+    <footer className={styles.block}>
+      <LinkInternal className={styles.link} href="/privacy-policy">Privacy Policy</LinkInternal>
+      <LinkInternal className={styles.link} href="/terms-of-service">Terms of Service</LinkInternal>
+    </footer>
   );
 }

webapp/src/components/header.module.scss

@@ -0,0 +1,14 @@
+@use "../styles/variables/sass.scss" as *;
+
+.block {
+  display: flex;
+  justify-content: center;
+  height: 4rem;
+  background-color: var(--colour1-secondary);
+}
+
+.logo {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: bold;
+}

webapp/src/components/header.tsx

@@ -1,5 +1,4 @@
 import { useRouter } from "next/router";
-import Link from "next/link";
 import { useCallback, useState } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -15,29 +14,30 @@ import { Button, Dropdown, Input, Menu } from "antd";
 
 import { ThemeSwitcher } from "./theme-switcher";
 import { LinkInternal } from "./links/internal";
+import styles from "./header.module.scss"
 
 import { UserRank } from "#api/types";
 import { onParentBlur } from "#lib/dom";
-import { Icon } from "#components/icons";
 
 interface IHeaderProps extends Record<string, unknown> {}
 export function Header({ userData, dataless }: IHeaderProps) {
   return (
-    <nav className="h-16 bg-white dark:bg-gray-800 shadow flex justify-center">
-      <div className="max-w-screen-lg w-screen flex justify-start items-center gap-x-4 mx-4">
+    <header className={styles.block}>
+      <nav className="max-w-screen-lg w-screen flex justify-start items-center gap-x-4 mx-4">
         <div className="flex justify-start flex-grow-0">
-          <Link className="text-2xl font-black text-blue-500" href="/">
+          {/* @TODO: site logo component */}
+          <LinkInternal className={styles.logo} href="/">
             Horahora
-          </Link>
+          </LinkInternal>
         </div>
         <Search />
         {!dataless && (
           <div className="flex-grow-0 ml-auto">
             <UserNav userData={userData} />
           </div>
         )}
-      </div>
-    </nav>
+      </nav>
+    </header>
   );
 }
 
@@ -163,46 +163,32 @@ function LoggedInUserNav(props: ILoggedInUserNav) {
 
   let menu = (
     <Menu className="bg-white dark:bg-black">
-      <Menu.Item key="upload" icon={<Icon icon={faUpload} />}>
-        <LinkInternal href="/account/upload">Upload</LinkInternal>
+      <Menu.Item key="upload">
+        <LinkInternal iconID={faUpload} href="/account/upload">
+          Upload
+        </LinkInternal>
       </Menu.Item>
-      <Menu.Item key="profile" icon={<Icon icon={faUser} />}>
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
+      <Menu.Item key="profile">
+        <LinkInternal
+          iconID={faUser}
           // @ts-expect-error figure `userData` shape
           href={`/users/${userData.userID}`}
         >
           Profile page
-        </Link>
+        </LinkInternal>
       </Menu.Item>
       <Menu.Divider />
 
       <Menu.Item
         key="password-reset"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-black dark:text-white"
-            icon={faKey}
-          />
-        }
       >
-        <Link className="text-black dark:text-white" href="/password-reset">
-          Reset Password
-        </Link>
+        <LinkInternal iconID={faKey} href="/password-reset">Reset Password</LinkInternal>
       </Menu.Item>
       <Menu.Divider />
       <Menu.Item
         key="logout"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-red-600"
-            icon={faSignOutAlt}
-          />
-        }
       >
-        <Link className="text-black dark:text-white" href="/logout">
-          Logout
-        </Link>
+        <LinkInternal iconID={faSignOutAlt} href="/logout">Logout</LinkInternal>
       </Menu.Item>
     </Menu>
   );
@@ -229,43 +215,29 @@ function LoggedInAdminNav(props: ILoggedInAdminNav) {
     <Menu className="bg-white dark:bg-black">
       <Menu.Item
         key="profile"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-black dark:text-white"
-            icon={faUser}
-          />
-        }
       >
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
+        <LinkInternal
+          iconID={faUser}
           // @ts-expect-error figure `userData` shape
           href={`/users/${userData.userID}`}
         >
           Profile page
-        </Link>
+        </LinkInternal>
       </Menu.Item>
       <Menu.Divider />
 
-      <Menu.Item key="upload"  className="flex flex-row gap-2" icon={<Icon icon={faUpload} />}>
-        <LinkInternal href="/account/upload">Upload</LinkInternal>
+      <Menu.Item
+        key="upload"
+        className="flex flex-row gap-2"
+      >
+        <LinkInternal iconID={faUpload} href="/account/upload">Upload</LinkInternal>
       </Menu.Item>
       <Menu.Divider />
 
       <Menu.Item
         key="archive-requests"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-black dark:text-white"
-            icon={faArchive}
-          />
-        }
       >
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
-          href="/archive-requests"
-        >
-          Archive Requests
-        </Link>
+        <LinkInternal iconID={faArchive} href="/archive-requests">Archive Requests</LinkInternal>
       </Menu.Item>
       <Menu.Divider />
 
@@ -275,54 +247,21 @@ function LoggedInAdminNav(props: ILoggedInAdminNav) {
 
       <Menu.Item
         key="password-reset"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-black dark:text-white"
-            icon={faKey}
-          />
-        }
       >
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
-          href="/password-reset"
-        >
-          Password Reset
-        </Link>
+        <LinkInternal iconID={faKey} href="/password-reset">Password Reset</LinkInternal>
       </Menu.Item>
 
       <Menu.Divider />
       <Menu.Item
         key="audits"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-black dark:text-white"
-            icon={faArchive}
-          />
-        }
       >
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
-          href="/audits"
-        >
-          Audit Logs
-        </Link>
+        <LinkInternal iconID={faArchive} href="/audits">Audit Logs</LinkInternal>
       </Menu.Item>
       <Menu.Divider />
       <Menu.Item
         key="logout"
-        icon={
-          <FontAwesomeIcon
-            className="max-h-4 text-red-600"
-            icon={faSignOutAlt}
-          />
-        }
       >
-        <Link
-          className="text-black dark:text-white dark:hover:text-black"
-          href="/logout"
-        >
-          Logout
-        </Link>
+        <LinkInternal iconID={faSignOutAlt} href="/logout">Logout</LinkInternal>
       </Menu.Item>
     </Menu>
   );
@@ -346,12 +285,8 @@ function LoggedInAdminNav(props: ILoggedInAdminNav) {
 function LoggedOutUserNav() {
   return (
     <>
-      <Link href="/login">
-        <Button>Login</Button>
-      </Link>
-      <Link className="ml-2" href="/register">
-        <Button type="primary">Register</Button>
-      </Link>
+      <LinkInternal href="/login">Login</LinkInternal>
+      <LinkInternal href="/register">Register</LinkInternal>
     </>
   );
 }

webapp/src/components/links/html.module.scss

@@ -1,3 +1,5 @@
+@use "../../styles/variables/sass.scss" as *;
+
 .block {
   --local-colour1-primary: var(--anchour-colour1-primary);
   --local-colour1-secondary: var(--anchour-colour1-secondary);

webapp/src/components/links/internal.tsx

@@ -4,7 +4,7 @@ import {
   type HTMLAttributeAnchorTarget,
   type ReactNode,
 } from "react";
-import clsx from "clsx";
+
 
 import styles from "./internal.module.scss";
 import { AnchourHTML } from "./html";
@@ -35,7 +35,7 @@ export function Component({
   return (
     <Link {...blockProps} passHref>
       <AnchourHTML
-        className={linkClass}
+        className={className}
         target={target}
         iconID={iconID}
         onClick={onClick}