update packages and search fix

packages/next/components/PostQuery.tsx

@@ -38,13 +38,16 @@ const PostQuery = ({
 
   const [posts, setPosts] = useState([] as IPost[])
   const [count, setCount] = useState(0)
-  const [isLoading, setLoading] = useState(true)
+  const [isLoading, setLoading] = useState(router.asPath.includes('?'))
 
   useEffect(() => {
-    if (router.query.q) {
+    const u = new URL(location.href)
+    const q = u.searchParams.get('q')
+
+    if (q) {
       const querystrings: string[] = []
       for (const [k, v] of Object.entries({
-        q: router.query.q,
+        q,
         page: router.query.page,
         tag: router.query.tag
       })) {
@@ -58,20 +61,24 @@ const PostQuery = ({
         .then(({ result, count }) => {
           setPosts(result)
           setCount(count)
+
+          setLoading(false)
         })
     } else {
       setPosts(defaults.posts)
       setCount(defaults.count)
-    }
 
-    setLoading(false)
+      setLoading(false)
+    }
   }, [router.query.q, router.query.page, router.query.tag])
 
   const totalPages = Math.ceil(count / 5)
 
-  return (
+  return isLoading ? (
+    <div>Loading...</div>
+  ) : (
     <article>
-      {isLoading ? null : posts.length ? (
+      {posts.length ? (
         posts.map((p) => <PostTeaser post={p} key={p.path} />)
       ) : (
         <p>No posts found.</p>

packages/next/next.config.js

@@ -9,5 +9,8 @@ module.exports = withSvgr({
         permanent: false
       }
     ]
+  },
+  future: {
+    webpack5: true
   }
 })

packages/next/package.json

@@ -10,39 +10,39 @@
     "prebuild": "yarn ts scripts/make.ts"
   },
   "dependencies": {
-    "js-yaml": "^3.14.1",
+    "js-yaml": "^4.1.0",
     "lokijs": "^1.5.11",
     "lunr": "^2.3.9",
-    "next": "10.0.3",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "zod": "^1.11.11"
+    "next": "^10.1.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "zod": "^1.11.13"
   },
   "devDependencies": {
     "@patarapolw/scope-css": "^1.3.0",
-    "@types/cheerio": "^0.22.23",
-    "@types/ejs": "^3.0.5",
-    "@types/fs-extra": "^9.0.5",
-    "@types/js-yaml": "^3.12.5",
-    "@types/lokijs": "^1.5.3",
+    "@types/cheerio": "^0.22.28",
+    "@types/ejs": "^3.0.6",
+    "@types/fs-extra": "^9.0.11",
+    "@types/js-yaml": "^4.0.0",
+    "@types/lokijs": "^1.5.4",
     "@types/lunr": "^2.3.3",
-    "@types/node": "^14.14.14",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/node": "^14.14.41",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/rimraf": "^3.0.0",
     "@types/showdown": "^1.9.3",
-    "@typescript-eslint/eslint-plugin": "^4.10.0",
-    "@typescript-eslint/parser": "^4.10.0",
+    "@typescript-eslint/eslint-plugin": "^4.22.0",
+    "@typescript-eslint/parser": "^4.22.0",
     "cheerio": "^1.0.0-rc.3",
     "dotenv": "^8.2.0",
-    "ejs": "^3.1.5",
-    "eslint": "^7.12.1",
+    "ejs": "^3.1.6",
+    "eslint": "^7.24.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "fs-extra": "^9.0.1",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-react": "^7.23.2",
+    "fs-extra": "^9.1.0",
     "import-sort-parser-typescript": "^6.0.0",
     "next-svgr": "^0.0.2",
     "nodejieba": "^2.5.1",
@@ -50,7 +50,7 @@
     "rimraf": "^3.0.2",
     "showdown": "^1.9.1",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.2.4"
   },
   "importSort": {
     ".ts, .tsx, .config.ts": {

packages/next/pages/post/[...path].tsx

@@ -108,7 +108,7 @@ export const getStaticProps: GetStaticProps = async (ctx) => {
 
   return {
     props: dbPost.findOne({
-      path: (ctx.params.path as string[]).join('/')
+      path: (ctx.params.path as string[]).map(decodeURIComponent).join('/')
     })
   }
 }

packages/next/pages/tag/[tag]/[page].tsx

@@ -22,26 +22,19 @@ const TagPagePaged = ({
 
 export default TagPagePaged
 
-export const getStaticProps: GetStaticProps = async (ctx) => {
-  return {
-    props: await doSearch({
-      page: parseInt(ctx.params.page as string),
-      tag: ctx.params.tag as string
-    })
-  }
-}
-
 export const getStaticPaths: GetStaticPaths = async () => {
   await initDatabase()
   const tMap = new Map<string, number>()
 
-  dbPost.find({
-    date: { $lt: new Date().getTime() }
-  }).map(({ tag = [] }) => {
-    return tag.map((t) => {
-      return tMap.set(t, (tMap.get(t) || 0) + 1)
+  dbPost
+    .find({
+      date: { $lt: new Date().getTime() }
+    })
+    .map(({ tag = [] }) => {
+      return tag.map((t) => {
+        return tMap.set(t, (tMap.get(t) || 0) + 1)
+      })
     })
-  })
 
   return {
     paths: Array.from(tMap).flatMap(([t, n]) =>
@@ -49,7 +42,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
         .fill(null)
         .map((_, i) => ({
           params: {
-            tag: t,
+            tag: encodeURIComponent(t),
             page: (i + 2).toString()
           }
         }))
@@ -57,3 +50,12 @@ export const getStaticPaths: GetStaticPaths = async () => {
     fallback: false
   }
 }
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  return {
+    props: await doSearch({
+      page: parseInt(ctx.params.page as string),
+      tag: decodeURIComponent(ctx.params.tag as string)
+    })
+  }
+}

packages/next/pages/tag/[tag]/index.tsx

@@ -29,7 +29,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
   return {
     paths: Array.from(tMap).map(([t]) => ({
       params: {
-        tag: t
+        tag: encodeURIComponent(t)
       }
     })),
     fallback: false
@@ -39,7 +39,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 export const getStaticProps: GetStaticProps = async (ctx) => {
   return {
     props: await doSearch({
-      tag: ctx.params.tag as string
+      tag: decodeURIComponent(ctx.params.tag as string)
     })
   }
 }

packages/next/server/index.ts

@@ -16,7 +16,7 @@ export async function doSearch ({
   const offset = (page - 1) * perPage
 
   let cond = dbPost.chain().find({
-    date: { $exists: true } as any
+    date: { $exists: !(tag || q) } as any
   })
 
   if (q) {