From 2049b8fff3fc2bd7f8126efe20069ca86e1fe46e Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Wed, 7 Sep 2022 14:45:31 +0500 Subject: [PATCH] posts page done --- package-lock.json | 44 +++++++++++++++++- package.json | 3 +- src/App.tsx | 46 ++++++++++++++----- src/assets/icons/logo_orient.svg | 9 ---- src/assets/styles/_general.scss | 4 +- src/assets/styles/_nav.scss | 7 ++- src/assets/styles/_posts.scss | 65 +++++++++++++++++++++++++++ src/components/Nav.tsx | 4 +- src/context/PostContext.tsx | 4 ++ src/helpers/apiRequests.ts | 14 ++++++ src/helpers/parseDate.ts | 8 ++++ src/pages/Main.tsx | 10 +---- src/pages/Posts.tsx | 77 +++++++++++++++++++++++++++++++- src/types/posts.ts | 10 +++++ 14 files changed, 264 insertions(+), 41 deletions(-) delete mode 100644 src/assets/icons/logo_orient.svg create mode 100644 src/context/PostContext.tsx create mode 100644 src/helpers/apiRequests.ts create mode 100644 src/helpers/parseDate.ts create mode 100644 src/types/posts.ts diff --git a/package-lock.json b/package-lock.json index 211c03b..0ad1ea3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.4.0", - "react-router-dom": "^6.3.0" + "react-router-dom": "^6.3.0", + "uuidv4": "^6.2.13" }, "devDependencies": { "@types/react": "^18.0.17", @@ -544,6 +545,11 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==" + }, "node_modules/@vitejs/plugin-react": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.1.tgz", @@ -1743,6 +1749,23 @@ "browserslist": ">= 4.21.0" } }, + "node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/uuidv4": { + "version": "6.2.13", + "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz", + "integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==", + "dependencies": { + "@types/uuid": "8.3.4", + "uuid": "8.3.2" + } + }, "node_modules/vite": { "version": "3.0.9", "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz", @@ -2173,6 +2196,11 @@ "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==", "dev": true }, + "@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==" + }, "@vitejs/plugin-react": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.1.tgz", @@ -2917,6 +2945,20 @@ "picocolors": "^1.0.0" } }, + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + }, + "uuidv4": { + "version": "6.2.13", + "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz", + "integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==", + "requires": { + "@types/uuid": "8.3.4", + "uuid": "8.3.2" + } + }, "vite": { "version": "3.0.9", "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.9.tgz", diff --git a/package.json b/package.json index 7cd9195..473e7de 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.4.0", - "react-router-dom": "^6.3.0" + "react-router-dom": "^6.3.0", + "uuidv4": "^6.2.13" }, "devDependencies": { "@types/react": "^18.0.17", diff --git a/src/App.tsx b/src/App.tsx index 543c49c..a0d77a7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,10 +2,14 @@ import { useMemo, useState, useEffect } from "react"; import { Routes, Route } from "react-router-dom"; import { UserContext } from "./context/UserContext"; +import { PostContext } from "./context/PostContext"; // Style import "./assets/styles/style.scss"; +// Types +import { PostType } from "./types/posts"; + // Pages import Login from "./pages/Login"; import Main from "./pages/Main"; @@ -14,6 +18,20 @@ import Posts from "./pages/Posts"; import Details from "./pages/Details"; const App = () => { + const date = new Date("0.0.0000"); + const [posts, setPosts] = useState([ + { + id: -1, + category: "", + title: "", + link: "", + date: date, + summary: "", + createdAt: date, + updatedAt: date, + }, + ]); + const [user, setUser] = useState({ username: "", accessLevel: "", @@ -28,19 +46,25 @@ const App = () => { }, []); const userValue = useMemo(() => ({ user, setUser }), [user, setUser]); + const postValue = useMemo(() => ({ posts, setPosts }), [posts, setPosts]); return ( - -
- - } /> - } />} /> - } />} /> - } />} /> - } /> - -
- + + +
+ + } /> + } />} /> + } />} /> + } />} + /> + } /> + +
+ + ); }; diff --git a/src/assets/icons/logo_orient.svg b/src/assets/icons/logo_orient.svg deleted file mode 100644 index eaf6dc6..0000000 --- a/src/assets/icons/logo_orient.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/styles/_general.scss b/src/assets/styles/_general.scss index 68d2678..ed38116 100644 --- a/src/assets/styles/_general.scss +++ b/src/assets/styles/_general.scss @@ -1,7 +1,7 @@ -@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); * { - font-family: "Poppins", sans-serif; + font-family: "Roboto", sans-serif; margin: 0; padding: 0; box-sizing: border-box; diff --git a/src/assets/styles/_nav.scss b/src/assets/styles/_nav.scss index e2d53b4..d5c4a41 100644 --- a/src/assets/styles/_nav.scss +++ b/src/assets/styles/_nav.scss @@ -118,12 +118,11 @@ &__img { width: 7rem; - height: 3.4rem; + height: 5rem; - img { + svg { width: 7rem; - height: 3.4rem; - object-fit: contain; + height: 5rem; } } diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index e69de29..b82e268 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -0,0 +1,65 @@ +.posts { + &.inner { + display: flex; + flex-direction: column; + gap: 4rem; + } + + &__table { + padding: 3rem 0; + + &__head { + min-height: unset !important; + background: #dbdbdb; + } + + th { + text-align: center; + font-size: 1.6rem; + justify-self: center; + } + + .post-link { + background: #f2f0fd; + &:nth-child(2n) { + background: #fafafa; + } + } + + tr { + min-height: 7rem; + padding: 1rem; + display: grid; + grid-template-columns: 1fr 2.5fr 2fr 2fr 1.5fr 3fr 1.5fr 1.5fr; + gap: 1rem; + } + + td { + text-align: center; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + justify-self: center; + font-size: 1.2rem; + align-self: center; + + a { + width: 100%; + display: flex; + align-items: center; + justify-content: center; + } + + svg { + width: 2rem; + height: 2rem; + } + } + + tbody { + display: flex; + flex-direction: column; + } + } +} diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index ebf29f9..f1810c5 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -4,7 +4,7 @@ import { UserContext } from "../context/UserContext"; import { Link } from "react-router-dom"; // Icons -import Orient from "../assets/icons/logo_orient.svg"; +import { ImStatsDots } from "react-icons/im"; import { GiHamburgerMenu } from "react-icons/gi"; import { AiOutlineUser } from "react-icons/ai"; @@ -25,7 +25,7 @@ const Nav = ({ aside, setAside }: Props) => {
- orient + ) => { + axios + .get("http://95.85.124.41:8080/posts") + .then((res) => { + setPosts(res.data); + }) + .catch(); +}; diff --git a/src/helpers/parseDate.ts b/src/helpers/parseDate.ts new file mode 100644 index 0000000..7bc45e7 --- /dev/null +++ b/src/helpers/parseDate.ts @@ -0,0 +1,8 @@ +export const parseDate = (date: Date) => { + const split = date.toString().split("T"); + const yyyy_mm_dd = split[0]; + const time = split[1].split("."); + const hh_mm_ss = time[0]; + + return [yyyy_mm_dd, hh_mm_ss]; +}; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 94f94af..94aa6ff 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,9 +1,6 @@ // Modules import { useState, useContext, useEffect } from "react"; -import { - useNavigate, - // useLocation -} from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { UserContext } from "../context/UserContext"; // Components @@ -15,14 +12,9 @@ import { userContextType } from "../types/user"; const Main = ({ child }: any) => { const navigate = useNavigate(); - // const location = useLocation(); const { user, setUser }: userContextType = useContext(UserContext); const [aside, setAside] = useState(true); - // useEffect(() => { - // if(location.pathname.includes('dashboard')) - // }, []) - useEffect(() => { if (!user.username) { navigate("/login"); diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 3f11508..b258525 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -1,12 +1,85 @@ // Modules +import { v4 as uuidv4 } from "uuid"; +import { useContext, useEffect } from "react"; +import { PostContext } from "../context/PostContext"; -// Components +// Icons +import { BsFillFileEarmarkPostFill } from "react-icons/bs"; +import { BiLinkExternal } from "react-icons/bi"; + +// Helpers +import { getPosts } from "../helpers/apiRequests"; +import { PostType } from "../types/posts"; +import { Link } from "react-router-dom"; +import { parseDate } from "../helpers/parseDate"; + +// Data +const headers: string[] = [ + "ID", + "Category", + "Title", + "Link", + "Date", + "Summary", + "Created", + "Updated", +]; const Posts = () => { + const { posts, setPosts } = useContext(PostContext); + + useEffect(() => { + getPosts(setPosts); + }, []); + return (
-
+
+
+ +

Posts

+
+ + + + {headers.map((header: string) => { + return ; + })} + + {posts[0].id !== -1 + ? posts.map((post: PostType) => { + return ( + + + + + + + + + + + + + ); + }) + : ""} + +
{header}
{post.id}{post.category}{post.title} + + + + {parseDate(post.date)[0]}{post.summary}{parseDate(post.createdAt)[0]}{parseDate(post.updatedAt)[0]}
+
); diff --git a/src/types/posts.ts b/src/types/posts.ts new file mode 100644 index 0000000..a41067a --- /dev/null +++ b/src/types/posts.ts @@ -0,0 +1,10 @@ +export interface PostType { + id: number; + category: string; + title: string; + link: string; + date: Date; + summary: string; + createdAt: Date; + updatedAt: Date; +}