postlight · EzeRangel · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023 · Mar 1, 2023
diff --git a/frontend/.eslintrc b/frontend/.eslintrc
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/frontend/components/Footer.js → frontend/components/Footer.tsx b/frontend/components/Footer.js → frontend/components/Footer.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
+import Image from "next/image";
 
 const Footer = () => (
   <div className="labs-footer bg-black">
     <p className="white">A Labs project from your friends at</p>
     <a href="https://postlight.com/">
-      <img src="/static/images/postlight-logo.svg" height="32"/>
+      <Image src="/images/postlight-logo.svg" width={32} height={32} alt="Postlight Logo" />
     </a>
   </div>
 );

diff --git a/frontend/components/Header.js b/frontend/components/Header.js
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
@@ -0,0 +1,11 @@
+import Head from 'next/head';
+
+const Header = () => (
+  <Head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta charSet="utf-8" />
+    <title>WordPress + React Starter Kit Frontend by Postlight</title>
+  </Head>
+);
+
+export default Header;
diff --git a/frontend/components/Layout.js → frontend/components/Layout.tsx b/frontend/components/Layout.js → frontend/components/Layout.tsx
@@ -1,6 +1,4 @@
-import React from 'react';
 import Header from './Header';
-import Menu from './Menu';
 import Footer from './Footer';
 
 const Layout = props => {

diff --git a/frontend/components/Menu.js b/frontend/components/Menu.js
diff --git a/frontend/components/Menu.tsx b/frontend/components/Menu.tsx
@@ -0,0 +1,115 @@
+import { FC, useEffect, useState } from 'react';
+import Link from 'next/link';
+import Router from 'next/router';
+import Image from 'next/image';
+
+import Logo from './common/Logo';
+import Config from '../config';
+
+interface Props {
+  menu: any
+}
+
+const getSlug = (url) => {
+  const parts = url.split('/');
+  return parts.length > 2 ? parts[parts.length - 2] : '';
+};
+
+const Menu: FC<Props> = ({ menu }) => {
+  const [auth, setAuth] = useState(null);
+
+  useEffect(() => {
+    const token = localStorage.getItem(Config.AUTH_TOKEN);
+    const username = localStorage.getItem(Config.USERNAME);
+    setAuth({ token, username });
+  }, []);
+
+  const handleSelectChange = (e) => {
+    location.href = e.target.value;
+  };
+
+  return (
+    <div className="menu bb">
+      <div className="flex justify-between w-90-l center-l">
+        <div className="brand bb flex justify-center items-center w-100 justify-between-l bn-l">
+          <Link href="/" className="starter-kit-logo">
+            <Logo width={48} height={32} />
+            <div className="pl2">
+              WordPress + React
+              <br />
+              Starter Kit
+            </div>
+          </Link>
+        </div>
+        <div className="links dn flex-l justify-between items-center">
+          {menu.items.map((item) => {
+            if (item.object === 'custom') {
+              return (
+                <a href={item.url} key={item.ID}>
+                  {item.title}
+                </a>
+              );
+            }
+            const slug = getSlug(item.url);
+            const actualPage =
+              item.object === 'category' ? 'category' : 'post';
+            return (
+              <Link
+                href={`/${actualPage}/${slug}`}
+                key={item.ID}
+              >
+                {item.title}
+              </Link>
+            );
+          })}
+
+          <Link href="/search">
+            <Image src="/images/search.svg" width={25} height={25} alt="Search icon" />
+          </Link>
+
+          {auth?.token ? (
+            <a
+              className="pointer round-btn ba bw1 pv2 ph3"
+              onClick={() => {
+                localStorage.removeItem(Config.AUTH_TOKEN);
+                Router.push('/login');
+              }}
+            >
+              Log out {auth.username}
+            </a>
+          ) : (
+            <Link href="/login" className="round-btn ba bw1 pv2 ph3">
+              Log in
+            </Link>
+          )}
+        </div>
+      </div>
+      <div className="dropdown bb flex justify-center items-center dn-l">
+        <select onChange={handleSelectChange}>
+          <option>Menu</option>
+          {menu.items.map((item) => {
+            if (item.object === 'custom') {
+              return (
+                <option value={item.url} key={item.ID}>
+                  {item.title}
+                </option>
+              );
+            }
+            const slug = getSlug(item.url);
+            const actualPage =
+              item.object === 'category' ? 'category' : 'post';
+            return (
+              <option
+                value={`/${actualPage}?slug=${slug}&apiRoute=${item.object}`}
+                key={item.ID}
+              >
+                {item.title}
+              </option>
+            );
+          })}
+        </select>
+      </div>
+    </div>
+  );
+}
+export default Menu;
diff --git a/frontend/components/PageWrapper.js b/frontend/components/PageWrapper.js
diff --git a/frontend/components/common/Logo.tsx b/frontend/components/common/Logo.tsx
@@ -0,0 +1,16 @@
+interface Props {
+  width: number;
+  height: number;
+  color?: string;
+}
+
+export default function Logo({ width, height, color = "#000" }: Props) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 214 142" version="1.1">
+      <g id="logo/postlight/starter-kit" stroke="none" strokeWidth="1" fill={color} fillRule="evenodd">
+        <path d="M213.066017,71 L142.355339,141.710678 L107,106.355339 L71.644661,141.710678 L0.933983,71 L71.644661,0.289322 L107,35.644661 L142.355339,0.289322 L213.066017,71 Z M142.355339,71 L107,35.644661 L71.644661,71 L107,106.355339 L142.355339,71 Z" id="Shape" fill={color} fillRule="nonzero"></path>
+      </g>
+    </svg>
+
+  )
+}
diff --git a/frontend/config.js → frontend/config.ts b/frontend/config.js → frontend/config.ts
@@ -4,6 +4,8 @@ let wpUrl = 'http://localhost:8080/wp-json';
 if (process.env.HOME === '/home/node') {
   wpUrl = 'http://wp-headless:8080/wp-json';
 }
+
+// TODO: These should be env vars...
 const Config = {
   apiUrl: wpUrl,
   AUTH_TOKEN: 'auth-token',

diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.