category sort implemented

src/App.tsx

@@ -16,6 +16,7 @@ import Main from "./pages/Main";
 import Dashboard from "./pages/Dashboard";
 import Posts from "./pages/Posts";
 import Details from "./pages/Details";
+import Post from "./pages/Post";
 
 const App = () => {
   const date = new Date("0.0.0000");
@@ -56,6 +57,7 @@ const App = () => {
             <Route path="/" element={<Main />} />
             <Route path="/dashboard" element={<Main child={<Dashboard />} />} />
             <Route path="/posts" element={<Main child={<Posts />} />} />
+            <Route path="/posts/:id" element={<Main child={<Post />} />} />
             <Route
               path="/user_details"
               element={<Main child={<Details />} />}

src/assets/styles/_posts.scss

@@ -1,13 +1,17 @@
 .posts {
+  select {
+    padding: 1rem 1.2rem;
+    border: 1px solid #b8b9bb;
+  }
+
   &.inner {
     display: flex;
     flex-direction: column;
     gap: 4rem;
+    padding-bottom: 3rem;
   }
 
   &__table {
-    padding: 3rem 0;
-
     &__head {
       min-height: unset !important;
       background: #dbdbdb;
@@ -58,8 +62,88 @@
     }
 
     tbody {
+      max-height: 70vh;
+      overflow-y: auto;
       display: flex;
       flex-direction: column;
     }
   }
 }
+
+.post {
+  padding-bottom: 4rem;
+  &.inner {
+    display: flex;
+    flex-direction: column;
+    gap: 4rem;
+  }
+
+  h1 {
+    font-size: 2.4rem;
+  }
+
+  &__head {
+    svg {
+      width: 5rem;
+      height: 5rem;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 3rem;
+
+    &__btn {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      max-width: 30rem;
+      border-radius: 0.2rem;
+      cursor: pointer;
+      width: 100%;
+      padding: 0.6rem 1.2rem;
+      color: #fff;
+      font-size: 1.6rem;
+      background-color: #7c69ef;
+      border: 0.1rem solid #7c69ef;
+      @include transition-std;
+      &:hover {
+        @include transition-std;
+        background-color: #705ed6;
+        border: 0.1rem solid #705ed6;
+      }
+    }
+
+    input {
+      font-size: 1.6rem;
+      padding: 1rem 1.2rem;
+      border: 1px solid #b8b9bb;
+      border-radius: 0.2rem;
+      cursor: default;
+      background: #ebedef;
+    }
+
+    textarea {
+      background: #ebedef;
+      cursor: default;
+      padding: 1rem 1.2rem;
+      resize: none;
+      outline: none;
+      font-size: 1.6rem;
+
+      border: 1px solid #b8b9bb;
+      border-radius: 0.2rem;
+    }
+
+    &__block {
+      display: flex;
+      flex-direction: column;
+      gap: 0.8rem;
+
+      h4 {
+        font-size: 1.6rem;
+      }
+    }
+  }
+}

src/helpers/parseDate.ts

@@ -1,4 +1,4 @@
-export const parseDate = (date: Date) => {
+export const parseDate = (date: Date): string[] => {
   const split = date.toString().split("T");
   const yyyy_mm_dd = split[0];
   const time = split[1].split(".");

src/pages/Post.tsx

@@ -0,0 +1,123 @@
+// Modules
+import { useContext, useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { PostContext } from "../context/PostContext";
+import { PostType } from "../types/posts";
+
+// Icons
+import { ImNewspaper } from "react-icons/im";
+import { BiLinkExternal } from "react-icons/bi";
+
+// Helpers
+import { parseDate } from "../helpers/parseDate";
+
+const Post = () => {
+  const date = new Date("0.0.0000");
+  const [postData, setPostData] = useState<PostType>({
+    id: -1,
+    category: "",
+    title: "",
+    link: "",
+    date: date,
+    summary: "",
+    createdAt: date,
+    updatedAt: date,
+  });
+  const { posts } = useContext<any>(PostContext);
+  const { id } = useParams();
+
+  useEffect(() => {
+    if (posts[0].id !== -1) {
+      posts.map((post: PostType) => {
+        if (post.id.toString() === id) {
+          setPostData(post);
+        }
+      });
+    }
+  }, [posts]);
+  return (
+    <main className="post">
+      <div className="container">
+        <div className="post inner">
+          <div className="dashboard__head post__head">
+            <ImNewspaper />
+            <h1 className="post__head">
+              {postData.id !== -1 ? postData.title : ""}
+            </h1>
+          </div>
+          <div className="post__content">
+            <div className="post__content__block">
+              <h4>ID</h4>
+              <input
+                type="text"
+                readOnly
+                value={postData.id !== -1 ? postData.id : ""}
+              />
+            </div>
+            <div className="post__content__block">
+              <h4>Category</h4>
+              <input
+                type="text"
+                readOnly
+                value={postData.id !== -1 ? postData.category : ""}
+              />
+            </div>
+            <div className="post__content__block">
+              <h4>Title</h4>
+              <input
+                type="text"
+                readOnly
+                value={postData.id !== -1 ? postData.title : ""}
+              />
+            </div>
+            <div className="post__content__block">
+              <h4>Date</h4>
+              <input
+                type={"text"}
+                readOnly
+                value={postData.id !== -1 ? parseDate(postData.date)[0] : ""}
+              />
+            </div>
+            <div className="post__content__block">
+              <h4>Summary</h4>
+              <textarea
+                readOnly
+                rows={20}
+                value={postData.id !== -1 ? postData.summary : ""}
+              ></textarea>
+            </div>
+            <div className="post__content__block">
+              <h4>Created</h4>
+              <input
+                type={"text"}
+                readOnly
+                value={
+                  postData.id !== -1 ? parseDate(postData.createdAt)[0] : ""
+                }
+              />
+            </div>
+            <div className="post__content__block">
+              <h4>Updated</h4>
+              <input
+                type={"text"}
+                readOnly
+                value={
+                  postData.id !== -1 ? parseDate(postData.updatedAt)[0] : ""
+                }
+              />
+            </div>
+            <a
+              className="post__content__btn"
+              href={postData.id !== -1 ? postData.link : ""}
+            >
+              <BiLinkExternal />
+              <span>Link</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default Post;

src/pages/Posts.tsx

@@ -1,6 +1,6 @@
 // Modules
 import { v4 as uuidv4 } from "uuid";
-import { useContext, useEffect } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { PostContext } from "../context/PostContext";
 
 // Icons
@@ -27,7 +27,7 @@ const headers: string[] = [
 
 const Posts = () => {
   const { posts, setPosts } = useContext<any>(PostContext);
-
+  const [category, setCategory] = useState<string>("All");
   useEffect(() => {
     getPosts(setPosts);
   }, []);
@@ -40,6 +40,20 @@ const Posts = () => {
             <BsFillFileEarmarkPostFill className="dashboard__img" />
             <h1>Posts</h1>
           </div>
+          <div className="posts_select">
+            <select
+              value={category}
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+                setCategory(e.target.value);
+              }}
+            >
+              <option value="All" defaultChecked>
+                All
+              </option>
+              <option value="TurkmenPortal">TurkmenPortal</option>
+              <option value="Orient">Orient</option>
+            </select>
+          </div>
           <table className="posts__table">
             <tbody>
               <tr className="posts__table__head">
@@ -48,34 +62,67 @@ const Posts = () => {
                 })}
               </tr>
               {posts[0].id !== -1
-                ? posts.map((post: PostType) => {
-                    return (
-                      <Link
-                        className="post-link"
-                        to={`/posts/${post.id}`}
-                        key={uuidv4()}
-                      >
-                        <tr>
-                          <td>{post.id}</td>
-                          <td>{post.category}</td>
-                          <td>{post.title}</td>
-                          <td>
-                            <a
-                              href={post.link}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                            >
-                              <BiLinkExternal />
-                            </a>
-                          </td>
-                          <td>{parseDate(post.date)[0]}</td>
-                          <td>{post.summary}</td>
-                          <td>{parseDate(post.createdAt)[0]}</td>
-                          <td>{parseDate(post.updatedAt)[0]}</td>
-                        </tr>
-                      </Link>
-                    );
-                  })
+                ? category === "All"
+                  ? posts.map((post: PostType, index: number) => {
+                      return (
+                        <Link
+                          className="post-link"
+                          to={`/posts/${post.id}`}
+                          key={uuidv4()}
+                        >
+                          <tr>
+                            <td>{index + 1}</td>
+                            <td>{post.category}</td>
+                            <td>{post.title}</td>
+                            <td>
+                              <a
+                                href={post.link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                <BiLinkExternal />
+                              </a>
+                            </td>
+                            <td>{parseDate(post.date)[0]}</td>
+                            <td>{post.summary}</td>
+                            <td>{parseDate(post.createdAt)[0]}</td>
+                            <td>{parseDate(post.updatedAt)[0]}</td>
+                          </tr>
+                        </Link>
+                      );
+                    })
+                  : posts.map((post: PostType, index: number) => {
+                      if (post.category === category) {
+                        return (
+                          <Link
+                            className="post-link"
+                            to={`/posts/${post.id}`}
+                            key={uuidv4()}
+                          >
+                            <tr>
+                              <td>{index + 1}</td>
+                              <td>{post.category}</td>
+                              <td>{post.title}</td>
+                              <td>
+                                <a
+                                  href={post.link}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                >
+                                  <BiLinkExternal />
+                                </a>
+                              </td>
+                              <td>{parseDate(post.date)[0]}</td>
+                              <td>{post.summary}</td>
+                              <td>{parseDate(post.createdAt)[0]}</td>
+                              <td>{parseDate(post.updatedAt)[0]}</td>
+                            </tr>
+                          </Link>
+                        );
+                      } else {
+                        return "";
+                      }
+                    })
                 : ""}
             </tbody>
           </table>