[UX Improvement] Add Posts filter

src/AuthenticatedApp.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Router, Redirect, useLocation } from '@reach/router'
 
-import { Account, Home, Subreddit, Tag, Comments, NSFW } from './pages'
+import { Account, Home, Subreddit, Tag, Comments, Posts, NSFW } from './pages'
 import { Layout } from './components'
 
 const NotFound = () => <Redirect from='/login' to='/' noThrow />
@@ -21,6 +21,7 @@ const AuthenticatedApp = () => {
          * Snapchat's "My Eyes Only" (protect_nsfw_content: Boolean)
          */}
         <NSFW path='/nsfw' />
+        <Posts path='/posts' />
         <Comments path='/comments' />
         {/**
          * @reach/router does not support regular expressions matching in path,

src/components/Sidebar.js

@@ -23,6 +23,11 @@ const Sidebar = () => {
       <Text mb={3} pl={5} color='gray.400' fontWeight='semibold'>
         Filters
       </Text>
+      <Stack isInline justify='flex-start' align='center' cursor='pointer'>
+        <NavLink to='/posts' icon='bs-post'>
+          Posts
+        </NavLink>
+      </Stack>
       <Stack isInline justify='flex-start' align='center' cursor='pointer'>
         <NavLink to='/comments' icon='bs-chat'>
           Comments

src/components/shared/NavLinkIcon.js

@@ -7,6 +7,7 @@ import {
   BsFillCaretDownFill,
   BsFillCaretRightFill,
   BsFillChatSquareFill,
+  BsFillFolderFill,
 } from 'react-icons/bs'
 
 const NavLinkIcon = ({ name, ...rest }) => {
@@ -16,6 +17,7 @@ const NavLinkIcon = ({ name, ...rest }) => {
     'bs-caret-right': BsFillCaretRightFill,
     'bs-chat': BsFillChatSquareFill,
     'bs-warning': BsFillExclamationOctagonFill,
+    'bs-post': BsFillFolderFill,
   }
 
   const icon = iconMapping[name]

src/pages/Posts.js

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react'
+import { Heading } from '@chakra-ui/core'
+
+import { useThings } from '../contexts/ThingsContext'
+import { SEO } from '../components'
+
+const Posts = () => {
+  const { updateCurrentFilter } = useThings()
+
+  useEffect(() => {
+    updateCurrentFilter({ name: 'post' })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <>
+      <SEO title='Posts' />
+      <Heading as='h3' size='xl' mb={4} fontWeight='bold'>
+        Posts
+      </Heading>
+    </>
+  )
+}
+
+export default Posts

src/pages/index.js

@@ -3,4 +3,5 @@ export { default as Home } from './Home'
 export { default as Subreddit } from './Subreddit'
 export { default as Tag } from './Tag'
 export { default as Comments } from './Comments'
+export { default as Posts } from './Posts'
 export { default as NSFW } from './NSFW'