refactor: add menu component

components/Navigation.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { useRouter } from "next/router"
+
+const config = [
+  {
+    name: 'Home',
+    path: '/'
+  },
+  {
+    name: '+Create',
+    path: '/create'
+  },
+  {
+    name: 'My Articles',
+    path: '/articles-my'
+  },
+  {
+    name: 'All Articles',
+    path: '/articles-all'
+  },
+  {
+    name: 'My NFTs',
+    path: '/my-nfts'
+  },
+  {
+    name: 'My Collections',
+    path: '/my-collections'
+  },
+  {
+    name: 'NFT Market',
+    path: '/nft-market'
+  },
+]
+
+export const Navigation = () => {
+  const router = useRouter()
+  console.log(router.asPath);
+  const isActivePath = (path: string) => router.asPath === path
+  return (
+    <div className="flex mt-4">
+      { config.map((item) => {
+        return (
+          <Link key={item.path} href={item.path}>
+            <a className={`mr-4 text-pink-500 _nav ${ isActivePath(item.path) && 'current'}`} id="_home">
+              {item.name}
+            </a>
+          </Link>
+        )
+      })}
+    </div>
+  )
+}

pages/_app.js

@@ -1,14 +1,13 @@
 import "../styles/globals.css"
 import "../styles/markdown.css"
 import { FrontendVersion } from "../version.js"
-import Link from "next/link"
 import Head from "next/head"
 import { useState } from "react"
 import { ethers } from "ethers"
 import { Menu, Transition } from "@headlessui/react"
-import { Fragment, useEffect, useRef } from "react"
+import { Fragment, useEffect } from "react"
 import { ChevronDownIcon } from "@heroicons/react/solid"
-import { useRouter } from "next/router"
+import {Navigation} from "../components/Navigation";
 import axios from "axios"
 
 // On production, you should use something like web3Modal
@@ -181,43 +180,7 @@ function Marketplace({ Component, pageProps }) {
 
       <nav className="border-b p-6">
         <p className="text-4xl font-bold">Creative Commons NFT Playground</p>
-        <div className="flex mt-4">
-          <Link href="/">
-            <a className="mr-4 text-pink-500 _nav" id="_home">
-              Home
-            </a>
-          </Link>
-          <Link href="/create">
-            <a className="mr-4 text-pink-500 _nav" id="_create">
-              +Create
-            </a>
-          </Link>
-          <Link href="/articles-my">
-            <a className="mr-4 text-pink-500 _nav" id="_articles_my">
-              My Articles
-            </a>
-          </Link>
-          <Link href="/articles-all">
-            <a className="mr-4 text-pink-500 _nav" id="_articles_all">
-              All Articles
-            </a>
-          </Link>
-          <Link href="/my-nfts">
-            <a className="mr-4 text-pink-500 _nav" id="_my_nfts">
-              My NFTs
-            </a>
-          </Link>
-          <Link href="/my-collections">
-            <a className="mr-4 text-pink-500 _nav" id="_my_collections">
-              My Collections
-            </a>
-          </Link>
-          <Link href="/nft-market">
-            <a className="mr-4 text-pink-500 _nav" id="_nft_market">
-              NFT Market
-            </a>
-          </Link>
-        </div>
+        <Navigation />
         <button
           style={{ display: Logined ? "none" : "block" }}
           onClick={ConnectWallet}

pages/article.js

@@ -24,15 +24,6 @@ export default function MyAssets() {
   // const [nft, setNft] = useState({})
   const [loadingState, setLoadingState] = useState("not-loaded")
   const router = useRouter()
-  console.log(router) // pathname: '/', route: '/', asPath: '/'
-  if (router.pathname == "/article") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-    }
-  }
 
   async function createMint() {
     /* first, upload to IPFS */

pages/articles-all.js

@@ -1,29 +1,14 @@
 import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
-import { useRouter } from "next/router"
 
 import { nftmarketaddress, nftaddress } from "../config"
 
 let ethAccount
 export default function MyAssets() {
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
-  const router = useRouter()
-  console.log(router) // pathname: '/', route: '/', asPath: '/'
-  if (router.pathname == "/articles-all") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        console.log(el.tagName)
-        console.log(el.classList)
-        el.classList.remove("current")
-      })
-      document.getElementById("_articles_all").classList.add("current")
-    }
-  }
 
-  console.log("router.query", router.query)
   ethAccount = "*"
   useEffect(() => {
     loadNFTs()

pages/articles-my.js

@@ -1,25 +1,14 @@
 import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
-import { useRouter } from "next/router"
 
 import { nftmarketaddress, nftaddress } from "../config"
 
 let ethAccount
 export default function MyAssets() {
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
-  const router = useRouter()
 
-  if (router.pathname == "/articles-my") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_articles_my").classList.add("current")
-    }
-  }
   if (typeof window !== "undefined") {
     ethAccount = localStorage.getItem("ethAccount")
   }

pages/articles.js

@@ -13,15 +13,6 @@ export default function MyAssets() {
   // useEffect(function() {
   // },[]);
   const router = useRouter()
-  console.log(router)
-  if (router.pathname == "/articles") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-    }
-  }
 
   console.log(router.query)
   if ("author" in router.query) {

pages/create.tsx

@@ -36,17 +36,6 @@ export default function CreateItem() {
   const [ethAccount, setEthAccount] = useState<string>()
   const [preview, setPreview] = useState<string>()
 
-  // todo: remove this menu active track
-  if (router.pathname == "/create") {
-    if (typeof document !== "undefined") {
-      const els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_create")?.classList?.add("current")
-    }
-  }
-
   useEffect(() => {
     if (typeof window !== "undefined") {
       const account = localStorage.getItem("ethAccount")

pages/index.js

@@ -1,7 +1,6 @@
 import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
-import { useRouter } from "next/router"
 
 import { nftaddress, nftmarketaddress } from "../config"
 
@@ -12,17 +11,6 @@ let provider
 
 export default function Home() {
   const [nfts, setNfts] = useState([])
-  const router = useRouter()
-  console.log(router) // pathname: '/', route: '/', asPath: '/'
-  if (router.pathname == "/") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_home").classList.add("current")
-    }
-  }
 
   return (
     <div className="px-4" style={{ maxWidth: "1600px" }}>

pages/my-collections.js

@@ -2,7 +2,6 @@ import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
 import Web3Modal from "web3modal"
-import { useRouter } from "next/router"
 import { nftmarketaddress, nftaddress } from "../config"
 
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
@@ -12,18 +11,6 @@ export default function MyAssets() {
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
 
-  const router = useRouter()
-  console.log(router)
-  if (router.pathname == "/my-collections") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_my_collections").classList.add("current")
-    }
-  }
-
   useEffect(() => {
     loadNFTs()
   }, [])

pages/my-nfts.js

@@ -2,7 +2,6 @@ import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
 import Web3Modal from "web3modal"
-import { useRouter } from "next/router"
 import { nftmarketaddress, nftaddress } from "../config"
 
 import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
@@ -13,18 +12,6 @@ export default function CreatorDashboard() {
   const [sold, setSold] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
 
-  const router = useRouter()
-  console.log(router)
-  if (router.pathname == "/my-nfts") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_my_nfts").classList.add("current")
-    }
-  }
-
   useEffect(() => {
     loadNFTs()
   }, [])

pages/nft-market.js

@@ -2,7 +2,6 @@ import { ethers } from "ethers"
 import { useEffect, useState } from "react"
 import axios from "axios"
 import Web3Modal from "web3modal"
-import { useRouter } from "next/router"
 
 import { nftaddress, nftmarketaddress } from "../config"
 
@@ -13,18 +12,6 @@ export default function Home() {
   const [nfts, setNfts] = useState([])
   const [loadingState, setLoadingState] = useState("not-loaded")
 
-  const router = useRouter()
-  console.log(router)
-  if (router.pathname == "/nft-market") {
-    if (typeof document !== "undefined") {
-      var els = document.getElementsByClassName("_nav")
-      Array.prototype.forEach.call(els, function (el) {
-        el.classList.remove("current")
-      })
-      document.getElementById("_nft_market").classList.add("current")
-    }
-  }
-
   useEffect(() => {
     loadNFTs()
   }, [])