From d9f9c8c013e8c44d78b4325e98babf87d6349b22 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Tue, 20 Sep 2022 00:27:20 +0500 Subject: [PATCH] refactor & redesign --- src/App.tsx | 23 ++++- src/assets/styles/_aside.scss | 2 +- src/assets/styles/_edit-source.scss | 58 ++++++++++++ src/assets/styles/_login.scss | 2 +- src/assets/styles/_nav.scss | 2 +- src/assets/styles/_posts.scss | 32 +++---- src/assets/styles/_source.scss | 13 ++- src/assets/styles/style.scss | 1 + src/components/Nav.tsx | 4 +- src/context/PostContext.tsx | 5 +- src/helpers/apiRequests.ts | 2 +- src/pages/EditSource.tsx | 132 ++++++++++++++++++++++++++++ src/pages/Post.tsx | 17 +++- src/pages/Posts.tsx | 7 +- src/pages/Source.tsx | 49 +++-------- src/types/context.ts | 19 ++++ src/types/sources.ts | 12 +++ 17 files changed, 305 insertions(+), 75 deletions(-) create mode 100644 src/assets/styles/_edit-source.scss create mode 100644 src/pages/EditSource.tsx create mode 100644 src/types/context.ts create mode 100644 src/types/sources.ts diff --git a/src/App.tsx b/src/App.tsx index 3f3216a..724c91c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,6 +9,8 @@ import "./assets/styles/style.scss"; // Types import { PostType } from "./types/posts"; +import { SourceType } from "./types/sources"; +import { LinksAll } from "./types/links"; // Pages import Login from "./pages/Login"; @@ -18,6 +20,10 @@ import Posts from "./pages/Posts"; import Details from "./pages/Details"; import Post from "./pages/Post"; import Source from "./pages/Source"; +import EditSource from "./pages/EditSource"; + +// Helpers +import { getLinks } from "./helpers/apiRequests"; const App = () => { const navigate = useNavigate(); @@ -35,6 +41,8 @@ const App = () => { }, ]); + const [sources, setSources] = useState(); + const [user, setUser] = useState({ username: "", accessLevel: "", @@ -49,6 +57,10 @@ const App = () => { const userValue = useMemo(() => ({ user, setUser }), [user, setUser]); const postValue = useMemo(() => ({ posts, setPosts }), [posts, setPosts]); + const sourceValue = useMemo( + () => ({ sources, setSources }), + [sources, setSources] + ); useEffect(() => { if (!user.username) { @@ -59,8 +71,12 @@ const App = () => { } }, [user]); + useEffect(() => { + getLinks(setSources); + }, []); + return ( - +
@@ -68,7 +84,12 @@ const App = () => { } />} /> } />} /> } />} /> + } />} + /> } />} /> + } />} diff --git a/src/assets/styles/_aside.scss b/src/assets/styles/_aside.scss index b74a537..429b37c 100644 --- a/src/assets/styles/_aside.scss +++ b/src/assets/styles/_aside.scss @@ -38,7 +38,7 @@ display: flex; align-items: center; justify-content: flex-start; - gap: 1rem; + gap: 2rem; width: 100%; padding: 0.8rem 0.4rem 0.8rem 1.2rem; } diff --git a/src/assets/styles/_edit-source.scss b/src/assets/styles/_edit-source.scss new file mode 100644 index 0000000..6f55990 --- /dev/null +++ b/src/assets/styles/_edit-source.scss @@ -0,0 +1,58 @@ +.source-edit { + &.inner { + display: flex; + flex-direction: column; + gap: 4rem; + } + + &__content { + form { + display: flex; + flex-direction: column; + gap: 4rem; + } + } + + &__info, + &__content { + display: flex; + flex-direction: column; + gap: 3rem; + padding: 1rem; + + h2 { + font-weight: normal; + font-size: 3rem; + } + } + + &__input { + color: $base-gray; + display: flex; + flex-direction: column; + gap: 0.8rem; + font-size: 1.6rem; + + input { + font-size: 1.6rem; + background: $light-black; + padding: 0.6rem 1.2rem; + border-radius: 0.5rem; + } + } + + &__submit { + font-size: 1.6rem; + cursor: pointer; + color: $base-gray; + border-radius: 0.5rem; + background: $base-blue; + @include transition-std; + padding: 1.6rem 1.2rem; + + &:hover { + @include transition-std; + background: $hover-blue; + } + } +} diff --git a/src/assets/styles/_login.scss b/src/assets/styles/_login.scss index 5e10180..1ffeb72 100644 --- a/src/assets/styles/_login.scss +++ b/src/assets/styles/_login.scss @@ -73,7 +73,7 @@ input { font-size: 1.6rem; padding: 0.6rem 1.2rem; - border-radius: 0.2rem; + border-radius: 0.5rem; } &--check { diff --git a/src/assets/styles/_nav.scss b/src/assets/styles/_nav.scss index f5eedfd..f5fab29 100644 --- a/src/assets/styles/_nav.scss +++ b/src/assets/styles/_nav.scss @@ -58,7 +58,7 @@ padding: 1rem; display: flex; align-items: center; - gap: 0.5rem; + gap: 1.6rem; @include transition-std; &:hover { diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index 3be6245..c518aaa 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -22,7 +22,6 @@ padding: 1rem 2rem; border-radius: 0.5rem; background: $base-blue; - color: white; &:hover { @include transition-std; @@ -46,6 +45,7 @@ padding: 1rem 1.2rem; border-radius: 0.2rem; cursor: default; + border-radius: 0.5rem; } &__wrapper { @@ -57,6 +57,7 @@ padding: 1rem 1.2rem; color: $base-gray; background: $light-black; + border-radius: 0.5rem; } &.inner { @@ -168,42 +169,37 @@ 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; + padding: 1rem 1.2rem; + color: $base-gray; font-size: 1.6rem; - background-color: #7c69ef; - border: 0.1rem solid #7c69ef; + background-color: $base-blue; + @include transition-std; &:hover { @include transition-std; - background-color: #705ed6; - border: 0.1rem solid #705ed6; + background-color: $hover-blue; } } input { font-size: 1.6rem; - padding: 1rem 1.2rem; - border: 1px solid #b8b9bb; - border-radius: 0.2rem; + padding: 0.6rem 1.2rem; + border-radius: 0.5rem; cursor: default; - background: #ebedef; + background: $light-black; } textarea { - background: #ebedef; + background: $light-black; cursor: default; - padding: 1rem 1.2rem; + padding: 0.6rem 1.2rem; resize: none; - outline: none; font-size: 1.6rem; - - border: 1px solid #b8b9bb; - border-radius: 0.2rem; + border-radius: 0.5rem; } &__block { diff --git a/src/assets/styles/_source.scss b/src/assets/styles/_source.scss index aad0a52..e75f9be 100644 --- a/src/assets/styles/_source.scss +++ b/src/assets/styles/_source.scss @@ -3,7 +3,6 @@ display: flex; flex-direction: column; gap: 4rem; - padding-bottom: 3rem; } &__head { svg { @@ -95,10 +94,18 @@ gap: 1rem; color: $base-gray; background: $base-black; + &:nth-child(2n) { background: $light-blue; td { color: $light-black; + svg { + fill: $base-black; + } + span { + color: $base-black; + font-weight: bold; + } } } } @@ -139,8 +146,8 @@ } svg { - width: 1.2rem; - height: 1.2rem; + width: 1.5rem; + height: 1.5rem; } span { diff --git a/src/assets/styles/style.scss b/src/assets/styles/style.scss index e9acb50..7336bd0 100644 --- a/src/assets/styles/style.scss +++ b/src/assets/styles/style.scss @@ -8,3 +8,4 @@ @import "./posts"; @import "./details"; @import "./source"; +@import "./edit-source"; diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx index d628f77..b5a4b44 100644 --- a/src/components/Nav.tsx +++ b/src/components/Nav.tsx @@ -7,7 +7,7 @@ import { IconContext } from "react-icons"; // Icons import { FaMeteor } from "react-icons/fa"; import { GiHamburgerMenu } from "react-icons/gi"; -import { FaUserCog } from "react-icons/fa"; +import { FaUserAlt } from "react-icons/fa"; // Types import { userContextType } from "../types/user"; @@ -52,7 +52,7 @@ const Nav = ({ aside, setAside }: Props) => { }} > - + Profile diff --git a/src/context/PostContext.tsx b/src/context/PostContext.tsx index 9af3b24..0a7ab37 100644 --- a/src/context/PostContext.tsx +++ b/src/context/PostContext.tsx @@ -1,4 +1,5 @@ -// Modules +// Tyoes import { createContext } from "react"; +import { ContextType } from "../types/context"; -export const PostContext: any = createContext(null); +export const PostContext: any = createContext(null); diff --git a/src/helpers/apiRequests.ts b/src/helpers/apiRequests.ts index 44e85f3..0dabcfa 100644 --- a/src/helpers/apiRequests.ts +++ b/src/helpers/apiRequests.ts @@ -61,7 +61,7 @@ export const updateLink = ( data: { name: string; source: string } ) => { axios - .put(`http://95.85.124.41:8080/link/update/${id}`, { source: data.source }) + .put(`http://95.85.124.41:8080/link/update/${id}`, data) .then((res) => { setSuccess(res.data.message); }) diff --git a/src/pages/EditSource.tsx b/src/pages/EditSource.tsx new file mode 100644 index 0000000..083461d --- /dev/null +++ b/src/pages/EditSource.tsx @@ -0,0 +1,132 @@ +// Modules +import React, { useState, useEffect, useContext } from "react"; +import { useParams } from "react-router-dom"; +import { IconContext } from "react-icons/lib"; +import { PostContext } from "../context/PostContext"; +import { useNavigate } from "react-router-dom"; + +// Icons +import { FaRegEdit } from "react-icons/fa"; + +// Types +import { SourceType, SourceEditDataType } from "../types/sources"; +import { ContextType } from "../types/context"; + +// Helpers +import { getLinks, updateLink } from "../helpers/apiRequests"; + +const EditSource = () => { + const navigate = useNavigate(); + const { sources, setSources } = + useContext(PostContext).sourceValue; + const [source, setSource] = useState(); + useEffect(() => { + if (sources) { + sources.map((post: SourceType) => { + if (post.id.toString() === id) { + setSource(post); + } + }); + } + }, [sources]); + + const { id } = useParams(); + const [data, setData] = useState({ + name: "", + source: "", + }); + + return ( +
+
+
+
+ + + +

Edit source

+
+
+
) => { + e.preventDefault(); + }} + > +
+

Information

+
+ + +
+
+ + +
+
+ + +
+
+
+

Edit

+
+ + ) => { + setData({ ...data, name: e.target.value }); + }} + /> +
+
+ + ) => { + setData({ ...data, source: e.target.value }); + }} + /> +
+
+ +
+
+
+
+
+ ); +}; + +export default EditSource; diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx index caf1750..4e34512 100644 --- a/src/pages/Post.tsx +++ b/src/pages/Post.tsx @@ -3,15 +3,19 @@ import { useContext, useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import { PostContext } from "../context/PostContext"; import { PostType } from "../types/posts"; +import { IconContext } from "react-icons"; // Icons -import { ImNewspaper } from "react-icons/im"; +import { FaBoxOpen } from "react-icons/fa"; import { BiLinkExternal } from "react-icons/bi"; // Helpers import { parseDate } from "../helpers/parseDate"; import { capitalizeFirstLetter } from "../helpers/stringMethods"; +// Types +import { ContextType } from "../types/context"; + const Post = () => { const date = new Date("0.0.0000"); const [postData, setPostData] = useState({ @@ -24,7 +28,7 @@ const Post = () => { createdAt: date, updatedAt: date, }); - const { posts } = useContext(PostContext); + const { posts } = useContext(PostContext).postValue; const { id } = useParams(); useEffect(() => { @@ -41,7 +45,9 @@ const Post = () => {
- + + +

{postData.id !== -1 ? postData.title : ""}

@@ -97,7 +103,10 @@ const Post = () => { className="post__content__btn" href={postData.id !== -1 ? postData.link : ""} > - + + + + Link
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index 7df758d..463ac0f 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -16,7 +16,7 @@ import { parseDate } from "../helpers/parseDate"; // Types import { paramsType } from "../types/posts"; - +import { ContextType } from "../types/context"; interface pageType { perPage: number; pageNumber: number; @@ -24,7 +24,8 @@ interface pageType { const Posts = () => { const [categories, setCategories] = useState(["All"]); - const { posts, setPosts } = useContext(PostContext); + const contextValue: ContextType = useContext(PostContext); + const { posts, setPosts } = contextValue.postValue; const [category, setCategory] = useState("All"); const [sort, setSort] = useState("id"); const [page, setPage] = useState({ @@ -309,7 +310,7 @@ const Posts = () => {