feat: use URL to update tags for linkable tag lists

won23 · Sep 12, 2020 · fc16351 · fc16351
1 parent 32ad626
commit fc16351
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
 		"swr": "^0.2.0"
 	},
 	"devDependencies": {
+		"eslint-plugin-react-hooks": "^4.1.2",
 		"firebase-functions-test": "^0.2.1",
 		"sass": "^1.26.10",
 		"typescript": "^4.0.2"

diff --git a/src/components/TagList.tsx b/src/components/TagList.tsx
@@ -1,12 +1,20 @@
 import * as React from 'react';
-import { Box, Heading, Badge, List, ListItem, Link } from '@chakra-ui/core';
+import {
+  Box,
+  Heading,
+  Badge,
+  List,
+  ListItem,
+  Link,
+  Flex,
+} from '@chakra-ui/core';
 import { IPost } from '../lib/posts';
 
 export interface ITagListProps {
   tagRemoveHandler;
   tagClickHandler;
   posts: IPost[];
-  view: string;
+  view: string | string[];
   uniqueTagCount: { [key: string]: number };
 }
 
@@ -20,14 +28,24 @@ export default function TagList({
   return (
     <Box minW="10rem" display={{ xs: 'none', sm: 'block' }}>
       <Heading mb="2rem">Tags</Heading>
-      <Box mb="2rem">
-        <Heading fontSize="xs">Currently Viewing:</Heading>
+      <Box minH="3rem">
         {view ? (
-          <Badge cursor="pointer" onClick={() => tagRemoveHandler(view)}>
-            {view}
-          </Badge>
+          <>
+            <Heading fontSize="xs" display="inline">
+              {' '}
+              Viewing:{' '}
+            </Heading>
+            <Badge
+              alignSelf="center"
+              color="blue.500"
+              cursor="pointer"
+              onClick={() => tagRemoveHandler(view)}
+            >
+              {view}
+            </Badge>
+          </>
         ) : (
-          <></>
+          <Heading fontSize="xs">Viewing all posts</Heading>
         )}
       </Box>
 

diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
@@ -14,6 +14,7 @@ import {
 } from '@chakra-ui/core';
 import { useState, useEffect } from 'react';
 import TagList from '../components/TagList';
+import { useRouter } from 'next/router';
 export async function getStaticProps(): Promise<{ props }> {
   const data = getSortedPostsData();
   return {
@@ -31,34 +32,37 @@ interface IProps {
 export default function Blog({ data }: IProps) {
   const { allPostsData, uniqueTagCount } = data;
   const [posts, setPosts] = useState(allPostsData);
-  const [view, setView] = useState('');
-
-  const tagClickHandler = (tag) => {
-    console.log('click');
-    setView(tag);
-  };
+  const router = useRouter();
+  function tagClickHandler(tag) {
+    router.push({
+      query: { tags: tag },
+    });
+  }
 
   const tagRemoveHandler = (tag) => {
-    setView(null);
+    router.replace({
+      href: '/blog',
+    });
   };
 
   useEffect(() => {
-    if (view) {
+    const { tags } = router.query;
+    if (tags) {
       const filtered = allPostsData.filter((item) => {
-        return item.tags.includes(view);
+        return item.tags.includes(tags as string);
       });
       setPosts(filtered);
     } else {
       setPosts(allPostsData);
     }
-  }, [view]);
+  }, [router.query]);
 
   return (
     <Layout>
       <Grid gridTemplateColumns={'1fr auto auto'} width="100%" height="100%">
         <Box>
           <Heading as="h1" mb="2rem">
-            Thoughts and Other Stuff
+            Thoughts... and Other Stuff
           </Heading>
 
           {posts?.map(({ id, date, title, description }) => {
@@ -85,7 +89,7 @@ export default function Blog({ data }: IProps) {
           uniqueTagCount={uniqueTagCount}
           tagClickHandler={tagClickHandler}
           tagRemoveHandler={tagRemoveHandler}
-          view={view}
+          view={router.query.tags as string}
         ></TagList>
       </Grid>
     </Layout>

diff --git a/yarn.lock b/yarn.lock
@@ -3534,6 +3534,11 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
+eslint-plugin-react-hooks@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.1.2.tgz#2eb53731d11c95826ef7a7272303eabb5c9a271e"
+  integrity sha512-ykUeqkGyUGgwTtk78C0o8UG2fzwmgJ0qxBGPp2WqRKsTwcLuVf01kTDRAtOsd4u6whX2XOC8749n2vPydP82fg==
+
 eslint-scope@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"