Routing and filter posts functionality added, #116

client/src/App.js

@@ -49,7 +49,7 @@ function App() {
         <Route path='/user/:path'>
           <User user={user}>
             <Switch>
-              <PrivateRoute path='/user/communities/:id/posts'>
+              <PrivateRoute path='/user/communities/:id/posts/:category'>
                 <CommunityPosts />
               </PrivateRoute>
               <PrivateRoute path='/user/communities/search'>

client/src/views/communityDetail/CommunityDetailScreen.js

@@ -44,7 +44,7 @@ const CommunityDetailScreen = ({ community, posts }) => {
           {/* ===== TOOLBAR ===== */}
           <div className='d-flex justify-content-center'>
             <div className='quick-controls row'>
-              <Link to={`/user/communities/${community?._id}/posts`}>
+              <Link to={`/user/communities/${community?._id}/posts/social`}>
                 <Tooltip title='Social Posts'>
                   <Badge
                     badgeContent={
@@ -60,7 +60,7 @@ const CommunityDetailScreen = ({ community, posts }) => {
                   </Badge>
                 </Tooltip>
               </Link>
-              <Link to={`/user/communities/${community?._id}/posts`}>
+              <Link to={`/user/communities/${community?._id}/posts/incidents`}>
                 <Tooltip title='Incident Reports'>
                   <Badge
                     badgeContent={
@@ -76,7 +76,9 @@ const CommunityDetailScreen = ({ community, posts }) => {
                   </Badge>
                 </Tooltip>
               </Link>
-              <Link to={`/user/communities/${community?._id}/posts`}>
+              <Link
+                to={`/user/communities/${community?._id}/posts/discussions`}
+              >
                 <Tooltip title='Discussions'>
                   <Badge
                     badgeContent={

client/src/views/communityPost/CommunityPost.js

@@ -7,10 +7,9 @@ import toastr from 'toastr';
 
 const CommunityPosts = () => {
   const [posts, setPosts] = useState(null);
-  let { id } = useParams();
+  let { id, category } = useParams();
   const [token] = useLocalStorage('token');
   const [refreshEdit, setRefreshEdit] = useState('');
-  // const [refreshPost, setRefreshPost] = useState('')
 
   const handleEdit = async (data) => {
     setRefreshEdit('');
@@ -23,19 +22,34 @@ const CommunityPosts = () => {
     const response = await editPost(token, id, data._id, postData);
     setRefreshEdit(response.message);
     toastr['success'](response.message);
-    // alert(response.message)
   };
 
   const handleGetPosts = async () => {
     const response = await getPosts(token, id);
     return response;
   };
 
+  let filterBy;
+  switch (category) {
+    case 'social':
+      filterBy = 'Social Events';
+      break;
+    case 'incidents':
+      filterBy = 'Incident Reports';
+      break;
+    case 'discussions':
+      filterBy = 'Discussions';
+      break;
+    default:
+      filterBy = '';
+  }
+
   useEffect(() => {
     (async () => {
       const data = await handleGetPosts();
-      console.log(data);
-      setPosts(data);
+      const filteredPosts = data.filter((post) => post.category === filterBy);
+      console.log(filteredPosts);
+      setPosts(filteredPosts);
     })();
     console.log(posts);
     //eslint-disable-next-line
@@ -46,6 +60,7 @@ const CommunityPosts = () => {
       posts={posts}
       handleEdit={handleEdit}
       setRefreshEdit={setRefreshEdit}
+      category={filterBy}
     />
   );
 };

client/src/views/communityPost/CommunityPostScreen.js

@@ -1,48 +1,59 @@
-import React, { useState } from "react"
-import CreatePostModal from "../../components/CreatePostModal"
-import PostCard from "../../components/PostCard"
-import { useHistory } from "react-router-dom"
+import React, { useState } from 'react';
+import CreatePostModal from '../../components/CreatePostModal';
+import PostCard from '../../components/PostCard';
+import { useHistory } from 'react-router-dom';
 
-const CommunityPostScreen = ({ posts, handleEdit, setRefreshEdit }) => {
-  const [show, setShow] = useState(false)
-  const handleShow = () => setShow(true)
-  const history = useHistory()
+const CommunityPostScreen = ({
+  posts,
+  handleEdit,
+  setRefreshEdit,
+  category,
+}) => {
+  const [show, setShow] = useState(false);
+  const handleShow = () => setShow(true);
+  const history = useHistory();
 
   return (
     <div>
-      <div className="row d-flex justify-content-between">
+      <div className='row d-flex justify-content-between'>
         <button
-          className="create-com-button"
+          className='create-com-button'
           onClick={() => {
-            history.goBack()
+            history.goBack();
           }}
         >
-          {"<"}
+          {'<'}
         </button>
 
-        <button className="create-com-button" onClick={handleShow}>
+        <button className='create-com-button' onClick={handleShow}>
           New Post
         </button>
       </div>
-      <h1 className="my-2 text-center">Posts</h1>
+      <h1 className='my-2 text-center brand-font'>{category}</h1>
       <CreatePostModal
         show={show}
         setShow={setShow}
         setRefreshEdit={setRefreshEdit}
       />
 
       <div>
-        {posts?.map((post) => (
-          <PostCard
-            key={post._id}
-            post={post}
-            handleEdit={handleEdit}
-            showEdit={true}
-          />
-        ))}
+        {posts?.length ? (
+          posts?.map((post) => (
+            <PostCard
+              key={post._id}
+              post={post}
+              handleEdit={handleEdit}
+              showEdit={true}
+            />
+          ))
+        ) : (
+          <h5 className='text-center p-3'>
+            Looks like there are no posts yet...
+          </h5>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default CommunityPostScreen
+export default CommunityPostScreen;