From 3b7142d0052048f0d881493d4758047abb9d40da Mon Sep 17 00:00:00 2001
From: Kisan <kisan@fullness.io>
Date: Tue, 2 May 2023 22:18:05 +0530
Subject: [PATCH 1/2] Fix: Blog tags updates the URL based on selected tag

---
 apps/www/pages/blog.tsx | 28 +++++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/apps/www/pages/blog.tsx b/apps/www/pages/blog.tsx
index 75537732c6a..7445e4980c1 100644
--- a/apps/www/pages/blog.tsx
+++ b/apps/www/pages/blog.tsx
@@ -14,6 +14,7 @@ import DefaultLayout from '~/components/Layouts/Default'
 import { Tabs } from 'ui'
 import PostTypes from '~/types/post'
 import BlogListItem from '~/components/Blog/BlogListItem'
+import { useParams } from '~/hooks/useParams'
 
 export async function getStaticProps() {
   const allPostsData = getSortedPosts('_blog', undefined, undefined, '** BLOG PAGE **')
@@ -37,6 +38,9 @@ export async function getStaticProps() {
     }
   })
 
+  // Append 'all' category here
+  categories.unshift('all')
+
   return {
     props: {
       blogs: allPostsData,
@@ -46,6 +50,7 @@ export async function getStaticProps() {
 }
 
 function Blog(props: any) {
+  const categoryId = useParams()?.categoryId
   const [category, setCategory] = useState('all')
   const [blogs, setBlogs] = useState(props.blogs)
 
@@ -57,6 +62,13 @@ function Blog(props: any) {
     const shiftedBlogs = [...props.blogs]
     shiftedBlogs.shift()
 
+    if (category === 'all') {
+      router.replace('/blog', undefined, { shallow: true, scroll: false })
+    } else {
+      router.query.categoryId = category
+      router.replace(router, undefined, { shallow: true, scroll: false })
+    }
+
     setBlogs(
       category === 'all'
         ? shiftedBlogs
@@ -68,11 +80,11 @@ function Blog(props: any) {
   }, [category])
 
   useEffect(() => {
-    return props.categories.unshift('all')
-  }, [])
+    if (router.isReady && categoryId && categoryId !== 'all') {
+      setCategory(categoryId)
+    }
+  }, [categoryId, router.isReady])
 
-  // append 'all' category
-  // const categories = props.categories.push('all')
   const meta_title = 'Supabase Blog: Open Source Firebase alternative Blog'
   const meta_description = 'Get all your Supabase News on the Supabase blog.'
 
@@ -116,7 +128,13 @@ function Blog(props: any) {
             <div className="mx-auto ">
               <div className="grid grid-cols-12">
                 <div className="col-span-12 lg:col-span-12">
-                  <Tabs scrollable size="medium" onChange={setCategory} defaultActiveId={'all'}>
+                  <Tabs
+                    scrollable
+                    size="medium"
+                    onChange={setCategory}
+                    defaultActiveId={'all'}
+                    activeId={category}
+                  >
                     {props.categories.map((categoryId: string) => (
                       <Tabs.Panel id={categoryId} key={categoryId} label={categoryId} />
                     ))}

From 5ea39c4b4366a126549e1fb0cbf96bd271ec3a91 Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Thu, 4 May 2023 10:52:08 -0230
Subject: [PATCH 2/2] Change from categoryId to tag

---
 apps/www/pages/blog.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/www/pages/blog.tsx b/apps/www/pages/blog.tsx
index 7445e4980c1..e5a4e1740c8 100644
--- a/apps/www/pages/blog.tsx
+++ b/apps/www/pages/blog.tsx
@@ -50,7 +50,7 @@ export async function getStaticProps() {
 }
 
 function Blog(props: any) {
-  const categoryId = useParams()?.categoryId
+  const tag = useParams()?.tag
   const [category, setCategory] = useState('all')
   const [blogs, setBlogs] = useState(props.blogs)
 
@@ -65,7 +65,7 @@ function Blog(props: any) {
     if (category === 'all') {
       router.replace('/blog', undefined, { shallow: true, scroll: false })
     } else {
-      router.query.categoryId = category
+      router.query.tag = category
       router.replace(router, undefined, { shallow: true, scroll: false })
     }
 
@@ -80,10 +80,10 @@ function Blog(props: any) {
   }, [category])
 
   useEffect(() => {
-    if (router.isReady && categoryId && categoryId !== 'all') {
-      setCategory(categoryId)
+    if (router.isReady && tag && tag !== 'all') {
+      setCategory(tag)
     }
-  }, [categoryId, router.isReady])
+  }, [tag, router.isReady])
 
   const meta_title = 'Supabase Blog: Open Source Firebase alternative Blog'
   const meta_description = 'Get all your Supabase News on the Supabase blog.'
@@ -135,8 +135,8 @@ function Blog(props: any) {
                     defaultActiveId={'all'}
                     activeId={category}
                   >
-                    {props.categories.map((categoryId: string) => (
-                      <Tabs.Panel id={categoryId} key={categoryId} label={categoryId} />
+                    {props.categories.map((tag: string) => (
+                      <Tabs.Panel id={tag} key={tag} label={tag} />
                     ))}
                   </Tabs>
                 </div>