From cd955091f380e69bb15a2d670fdec66314c0b510 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <jon.summers.muir@googlemail.com>
Date: Mon, 15 Mar 2021 15:17:47 +0800
Subject: [PATCH] chore: fix mobile issues and category selection

---
 www/pages/blog.tsx        | 47 +++++++++++++++++++++-------------
 www/pages/blog/[slug].tsx | 53 ++++++++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/www/pages/blog.tsx b/www/pages/blog.tsx
index 1e76b31e77f..b25bbe01fe0 100644
--- a/www/pages/blog.tsx
+++ b/www/pages/blog.tsx
@@ -11,7 +11,7 @@ import { getSortedPosts, getAllCategories } from '~/lib/posts'
 import authors from 'lib/authors.json'
 
 import DefaultLayout from '~/components/Layouts/Default'
-import { Typography, Badge, Space, Button } from '@supabase/ui'
+import { Typography, Badge, Space, Select } from '@supabase/ui'
 
 export async function getStaticProps() {
   const allPostsData = getSortedPosts()
@@ -31,20 +31,23 @@ export async function getStaticProps() {
 }
 
 function Blog(props: any) {
-  const [category, setCategory] = useState('')
+  const [category, setCategory] = useState('all')
   const [blogs, setBlogs] = useState(props.blogs)
 
   const { basePath } = useRouter()
 
   useEffect(() => {
     // Update the document title using the browser API
+    console.log('useeffect')
+    console.log(category)
+    console.log(props.blogs)
     setBlogs(
-      category
-        ? props.blogs.filter((post: any) => {
+      category === 'all'
+        ? props.blogs
+        : props.blogs.filter((post: any) => {
             const found = post.tags.includes(category)
             return found
           })
-        : blogs
     )
   }, [category])
 
@@ -81,23 +84,31 @@ function Blog(props: any) {
             </div>
           </div>
           <div className="container mx-auto px-8 sm:px-16 xl:px-20 mt-32">
-            <div className=" mx-auto max-w-7xl">
+            <div className="mx-auto max-w-7xl">
               <div className="grid grid-cols-12">
-                <div className="col-span-8">
+                <div className="col-span-12 lg:col-span-8">
                   <Typography.Title level={2}>More posts from the team</Typography.Title>
                 </div>
+                <div className="col-span-12 lg:col-span-4 mt-4 lg:mt-0">
+                  <Space className="lg:justify-end">
+                    <Typography.Text>Select a category</Typography.Text>
+                    <Select
+                      onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                        setCategory(e.target.value)
+                      }
+                    >
+                      <Select.Option key={'all'} value={'all'}>
+                        Show all
+                      </Select.Option>
+                      {props.categories.map((categoryId: string) => (
+                        <Select.Option key={categoryId} value={categoryId}>
+                          {categoryId}
+                        </Select.Option>
+                      ))}
+                    </Select>
+                  </Space>
+                </div>
               </div>
-              <Space className="mt-6">
-                {props.categories.map((categoryId: string) => (
-                  <Button
-                    type={category === categoryId ? 'primary' : 'outline'}
-                    key={categoryId}
-                    onClick={() => setCategory(categoryId)}
-                  >
-                    {categoryId}
-                  </Button>
-                ))}
-              </Space>
               <div className="mt-12 max-w-lg mx-auto grid lg:grid-cols-1 lg:max-w-none">
                 {/* <ul> */}
                 {blogs.map((blog: any, idx: any) => {
diff --git a/www/pages/blog/[slug].tsx b/www/pages/blog/[slug].tsx
index ca85adf9140..d47f9ec54d1 100644
--- a/www/pages/blog/[slug].tsx
+++ b/www/pages/blog/[slug].tsx
@@ -119,6 +119,26 @@ function BlogPostPage(props: any) {
     )
   }
 
+  const toc = props.blog.toc && (
+    <Space direction="vertical" size={8} className="py-8 lg:py-0">
+      <div>
+        <Space>
+          {props.blog.tags.map((tag: string) => {
+            return <Badge key={`categroy-badge-${tag}`}>{tag}</Badge>
+          })}
+        </Space>
+      </div>
+      <div>
+        <Typography.Title level={5}>Table of contents</Typography.Title>
+        <Typography>
+          <div className={blogStyles['toc']}>
+            <ReactMarkdown plugins={[gfm]}>{props.blog.toc.content}</ReactMarkdown>
+          </div>
+        </Typography>
+      </div>
+    </Space>
+  )
+
   return (
     <>
       <NextSeo
@@ -152,10 +172,10 @@ function BlogPostPage(props: any) {
       />
       <DefaultLayout>
         <div className="bg-white dark:bg-dark-800 overflow-hidden py-12">
-          <div className="container px-8 sm:px-16 xl:px-20 mt-16 mx-auto">
+          <div className="container px-8 sm:px-16 xl:px-20 lg:mt-16 mx-auto">
             <div className="max-w-6xl mx-auto">
-              <div className="py-12 grid grid-cols-12 gap-16">
-                <div className="col-span-10">
+              <div className="lg:py-12 grid grid-cols-12 lg:gap-16">
+                <div className="col-span-12 lg:col-span-10">
                   <Link href={`/blog`} as={`/blog`}>
                     <div>
                       <Typography.Text type="secondary">
@@ -174,7 +194,7 @@ function BlogPostPage(props: any) {
                   </Space>
                   <Typography.Title>{props.blog.title}</Typography.Title>
                   {author && (
-                    <div className="mt-6">
+                    <div className="mt-6 mb-8 lg:mb-0">
                       <Space size={4}>
                         {author.author_image_url && (
                           <img src={author.author_image_url} className="rounded-full w-10" />
@@ -195,8 +215,8 @@ function BlogPostPage(props: any) {
         </div>
         <div className="container px-8 sm:px-16 xl:px-20 py-16 mx-auto">
           <div className="max-w-6xl mx-auto">
-            <div className="py-4 grid grid-cols-12 gap-16">
-              <div className="col-span-8">
+            <div className="py-4 grid grid-cols-12 lg:gap-16">
+              <div className="col-span-12 lg:col-span-8">
                 {props.blog.thumb && (
                   <img
                     src={'/new/images/blog/' + props.blog.thumb}
@@ -204,27 +224,14 @@ function BlogPostPage(props: any) {
                     style={{ maxHeight: '520px', width: '100%' }}
                   />
                 )}
+                <div className="lg:hidden">{toc}</div>
                 <article className={blogStyles['article']}>
                   <Typography>{content}</Typography>
                 </article>
               </div>
-              <div className="col-span-4">
+              <div className="col-span-12 lg:col-span-4">
                 <Space direction="vertical" size={8}>
-                  <Space>
-                    {props.blog.tags.map((tag: string) => {
-                      return <Badge key={`categroy-badge-${tag}`}>{tag}</Badge>
-                    })}
-                  </Space>
-                  {props.blog.toc && (
-                    <div>
-                      <Typography.Title level={5}>Table of contents</Typography.Title>
-                      <Typography>
-                        <div className={blogStyles['toc']}>
-                          <ReactMarkdown plugins={[gfm]}>{props.blog.toc.content}</ReactMarkdown>
-                        </div>
-                      </Typography>
-                    </div>
-                  )}
+                  <div className="hidden lg:block">{toc}</div>
                   <div>
                     <Typography.Title className="mb-4" level={5}>
                       Related articles
@@ -259,7 +266,7 @@ function BlogPostPage(props: any) {
                 </Space>
               </div>
             </div>
-            <div className="grid grid-cols-2 gap-8 py-8">
+            <div className="grid lg:grid-cols-2 gap-8 py-8">
               <div>{props.prevPost && <NextCard post={props.prevPost} label="Last post" />}</div>
               <div>
                 {props.nextPost && (