Skip to content

Commit 05a3d52

Browse files
LanttcatLanttcat
committed
refactor: add menu comopnent
1 parent a8208fb commit 05a3d52

11 files changed

+55
-146
lines changed

‎components/Navigation.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import Link from "next/link";
2+
import { useRouter } from "next/router"
3+
4+
const config = [
5+
{
6+
name: 'Home',
7+
path: '/'
8+
},
9+
{
10+
name: '+Create',
11+
path: '/create'
12+
},
13+
{
14+
name: 'My Articles',
15+
path: '/articles-my'
16+
},
17+
{
18+
name: 'All Articles',
19+
path: '/articles-all'
20+
},
21+
{
22+
name: 'My NFTs',
23+
path: '/my-nfts'
24+
},
25+
{
26+
name: 'My Collections',
27+
path: '/my-collections'
28+
},
29+
{
30+
name: 'NFT Market',
31+
path: '/nft-market'
32+
},
33+
]
34+
35+
export const Navigation = () => {
36+
const router = useRouter()
37+
console.log(router.asPath);
38+
const isActivePath = (path: string) => router.asPath === path
39+
return (
40+
<div className="flex mt-4">
41+
{ config.map((item) => {
42+
return (
43+
<Link key={item.path} href={item.path}>
44+
<a className={`mr-4 text-pink-500 _nav ${ isActivePath(item.path) && 'current'}`} id="_home">
45+
{item.name}
46+
</a>
47+
</Link>
48+
)
49+
})}
50+
</div>
51+
)
52+
}

‎pages/_app.js

+3-40
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import "../styles/globals.css"
22
import "../styles/markdown.css"
3-
import Link from "next/link"
43
import Head from "next/head"
54
import { useState } from "react"
65
import { ethers } from "ethers"
76
import { Menu, Transition } from "@headlessui/react"
8-
import { Fragment, useEffect, useRef } from "react"
7+
import { Fragment, useEffect } from "react"
98
import { ChevronDownIcon } from "@heroicons/react/solid"
10-
import { useRouter } from "next/router"
9+
import {Navigation} from "../components/Navigation";
1110

1211
// On production, you should use something like web3Modal
1312
// to support additional wallet providers, like WalletConnect
@@ -165,43 +164,7 @@ function Marketplace({ Component, pageProps }) {
165164

166165
<nav className="border-b p-6">
167166
<p className="text-4xl font-bold">Creative Commons NFT Playground</p>
168-
<div className="flex mt-4">
169-
<Link href="/">
170-
<a className="mr-4 text-pink-500 _nav" id="_home">
171-
Home
172-
</a>
173-
</Link>
174-
<Link href="/create">
175-
<a className="mr-4 text-pink-500 _nav" id="_create">
176-
+Create
177-
</a>
178-
</Link>
179-
<Link href="/articles-my">
180-
<a className="mr-4 text-pink-500 _nav" id="_articles_my">
181-
My Articles
182-
</a>
183-
</Link>
184-
<Link href="/articles-all">
185-
<a className="mr-4 text-pink-500 _nav" id="_articles_all">
186-
All Articles
187-
</a>
188-
</Link>
189-
<Link href="/my-nfts">
190-
<a className="mr-4 text-pink-500 _nav" id="_my_nfts">
191-
My NFTs
192-
</a>
193-
</Link>
194-
<Link href="/my-collections">
195-
<a className="mr-4 text-pink-500 _nav" id="_my_collections">
196-
My Collections
197-
</a>
198-
</Link>
199-
<Link href="/nft-market">
200-
<a className="mr-4 text-pink-500 _nav" id="_nft_market">
201-
NFT Market
202-
</a>
203-
</Link>
204-
</div>
167+
<Navigation />
205168
<button
206169
style={{ display: Logined ? "none" : "block" }}
207170
onClick={ConnectWallet}

‎pages/article.js

-9
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,6 @@ export default function MyAssets() {
2424
// const [nft, setNft] = useState({})
2525
const [loadingState, setLoadingState] = useState("not-loaded")
2626
const router = useRouter()
27-
console.log(router) // pathname: '/', route: '/', asPath: '/'
28-
if (router.pathname == "/article") {
29-
if (typeof document !== "undefined") {
30-
var els = document.getElementsByClassName("_nav")
31-
Array.prototype.forEach.call(els, function (el) {
32-
el.classList.remove("current")
33-
})
34-
}
35-
}
3627

3728
async function createMint() {
3829
/* first, upload to IPFS */

‎pages/articles-all.js

-15
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,14 @@
11
import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
4-
import { useRouter } from "next/router"
54

65
import { nftmarketaddress, nftaddress } from "../config"
76

87
let ethAccount
98
export default function MyAssets() {
109
const [nfts, setNfts] = useState([])
1110
const [loadingState, setLoadingState] = useState("not-loaded")
12-
const router = useRouter()
13-
console.log(router) // pathname: '/', route: '/', asPath: '/'
14-
if (router.pathname == "/articles-all") {
15-
if (typeof document !== "undefined") {
16-
var els = document.getElementsByClassName("_nav")
17-
Array.prototype.forEach.call(els, function (el) {
18-
console.log(el.tagName)
19-
console.log(el.classList)
20-
el.classList.remove("current")
21-
})
22-
document.getElementById("_articles_all").classList.add("current")
23-
}
24-
}
2511

26-
console.log("router.query", router.query)
2712
ethAccount = "*"
2813
useEffect(() => {
2914
loadNFTs()

‎pages/articles-my.js

-11
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,14 @@
11
import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
4-
import { useRouter } from "next/router"
54

65
import { nftmarketaddress, nftaddress } from "../config"
76

87
let ethAccount
98
export default function MyAssets() {
109
const [nfts, setNfts] = useState([])
1110
const [loadingState, setLoadingState] = useState("not-loaded")
12-
const router = useRouter()
1311

14-
if (router.pathname == "/articles-my") {
15-
if (typeof document !== "undefined") {
16-
var els = document.getElementsByClassName("_nav")
17-
Array.prototype.forEach.call(els, function (el) {
18-
el.classList.remove("current")
19-
})
20-
document.getElementById("_articles_my").classList.add("current")
21-
}
22-
}
2312
if (typeof window !== "undefined") {
2413
ethAccount = localStorage.getItem("ethAccount")
2514
}

‎pages/articles.js

-9
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,6 @@ export default function MyAssets() {
1313
// useEffect(function() {
1414
// },[]);
1515
const router = useRouter()
16-
console.log(router)
17-
if (router.pathname == "/articles") {
18-
if (typeof document !== "undefined") {
19-
var els = document.getElementsByClassName("_nav")
20-
Array.prototype.forEach.call(els, function (el) {
21-
el.classList.remove("current")
22-
})
23-
}
24-
}
2516

2617
console.log(router.query)
2718
if ("author" in router.query) {

‎pages/create.tsx

-11
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,6 @@ export default function CreateItem() {
3636
const [ethAccount, setEthAccount] = useState<string>()
3737
const [preview, setPreview] = useState<string>()
3838

39-
// todo: remove this menu active track
40-
if (router.pathname == "/create") {
41-
if (typeof document !== "undefined") {
42-
const els = document.getElementsByClassName("_nav")
43-
Array.prototype.forEach.call(els, function (el) {
44-
el.classList.remove("current")
45-
})
46-
document.getElementById("_create")?.classList?.add("current")
47-
}
48-
}
49-
5039
useEffect(() => {
5140
if (typeof window !== "undefined") {
5241
const account = localStorage.getItem("ethAccount")

‎pages/index.js

-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
4-
import { useRouter } from "next/router"
54

65
import { nftaddress, nftmarketaddress } from "../config"
76

@@ -12,17 +11,6 @@ let provider
1211

1312
export default function Home() {
1413
const [nfts, setNfts] = useState([])
15-
const router = useRouter()
16-
console.log(router) // pathname: '/', route: '/', asPath: '/'
17-
if (router.pathname == "/") {
18-
if (typeof document !== "undefined") {
19-
var els = document.getElementsByClassName("_nav")
20-
Array.prototype.forEach.call(els, function (el) {
21-
el.classList.remove("current")
22-
})
23-
document.getElementById("_home").classList.add("current")
24-
}
25-
}
2614

2715
return (
2816
<div className="px-4" style={{ maxWidth: "1600px" }}>

‎pages/my-collections.js

-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
44
import Web3Modal from "web3modal"
5-
import { useRouter } from "next/router"
65
import { nftmarketaddress, nftaddress } from "../config"
76

87
import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
@@ -12,18 +11,6 @@ export default function MyAssets() {
1211
const [nfts, setNfts] = useState([])
1312
const [loadingState, setLoadingState] = useState("not-loaded")
1413

15-
const router = useRouter()
16-
console.log(router)
17-
if (router.pathname == "/my-collections") {
18-
if (typeof document !== "undefined") {
19-
var els = document.getElementsByClassName("_nav")
20-
Array.prototype.forEach.call(els, function (el) {
21-
el.classList.remove("current")
22-
})
23-
document.getElementById("_my_collections").classList.add("current")
24-
}
25-
}
26-
2714
useEffect(() => {
2815
loadNFTs()
2916
}, [])

‎pages/my-nfts.js

-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
44
import Web3Modal from "web3modal"
5-
import { useRouter } from "next/router"
65
import { nftmarketaddress, nftaddress } from "../config"
76

87
import Market from "../artifacts/contracts/Market.sol/NFTMarket.json"
@@ -13,18 +12,6 @@ export default function CreatorDashboard() {
1312
const [sold, setSold] = useState([])
1413
const [loadingState, setLoadingState] = useState("not-loaded")
1514

16-
const router = useRouter()
17-
console.log(router)
18-
if (router.pathname == "/my-nfts") {
19-
if (typeof document !== "undefined") {
20-
var els = document.getElementsByClassName("_nav")
21-
Array.prototype.forEach.call(els, function (el) {
22-
el.classList.remove("current")
23-
})
24-
document.getElementById("_my_nfts").classList.add("current")
25-
}
26-
}
27-
2815
useEffect(() => {
2916
loadNFTs()
3017
}, [])

‎pages/nft-market.js

-13
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { ethers } from "ethers"
22
import { useEffect, useState } from "react"
33
import axios from "axios"
44
import Web3Modal from "web3modal"
5-
import { useRouter } from "next/router"
65

76
import { nftaddress, nftmarketaddress } from "../config"
87

@@ -13,18 +12,6 @@ export default function Home() {
1312
const [nfts, setNfts] = useState([])
1413
const [loadingState, setLoadingState] = useState("not-loaded")
1514

16-
const router = useRouter()
17-
console.log(router)
18-
if (router.pathname == "/nft-market") {
19-
if (typeof document !== "undefined") {
20-
var els = document.getElementsByClassName("_nav")
21-
Array.prototype.forEach.call(els, function (el) {
22-
el.classList.remove("current")
23-
})
24-
document.getElementById("_nft_market").classList.add("current")
25-
}
26-
}
27-
2815
useEffect(() => {
2916
loadNFTs()
3017
}, [])

0 commit comments

Comments
 (0)