From 9aa5cbc12a16101ed56ecedb459f5cbfc3f8c4c6 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 25 Nov 2024 17:36:29 +0300 Subject: [PATCH] Bookmarks and layout --- .../ArticleViewer/ArticleViewer.tsx | 31 +++++++++++++--- .../SkeletonLoader/SkeletonLoader.tsx | 27 ++++++++++++++ .../Pages/PostCreatorPage/PostCreatorPage.tsx | 9 ++--- .../SubmitPostButton/SubmitPostButton.tsx | 17 ++++++--- enshi/src/constants/textForSkeleton.ts | 12 +++++++ enshi/src/routes/routes.tsx | 5 ++- .../ABAC/BookmarkPolicies/bookmarkPolicies.go | 36 +++++++++++++++++++ .../bookmarkRules/createRule.go | 22 ++++++++++++ .../bookmarkRules/deleteRule.go | 22 ++++++++++++ .../bookmarkRules/readRule.go | 22 ++++++++++++ enshi_back/middleware/bookmarksMiddleware.go | 33 +++++++++++++++++ .../routes/bookmarksRoutes/createBookmark.go | 35 ++++++++++++++++++ enshi_back/routes/routesSetup.go | 9 +++++ 13 files changed, 265 insertions(+), 15 deletions(-) create mode 100644 enshi/src/Components/ArticleViewer/SkeletonLoader/SkeletonLoader.tsx create mode 100644 enshi/src/constants/textForSkeleton.ts create mode 100644 enshi_back/ABAC/BookmarkPolicies/bookmarkPolicies.go create mode 100644 enshi_back/ABAC/BookmarkPolicies/bookmarkRules/createRule.go create mode 100644 enshi_back/ABAC/BookmarkPolicies/bookmarkRules/deleteRule.go create mode 100644 enshi_back/ABAC/BookmarkPolicies/bookmarkRules/readRule.go create mode 100644 enshi_back/middleware/bookmarksMiddleware.go create mode 100644 enshi_back/routes/bookmarksRoutes/createBookmark.go diff --git a/enshi/src/Components/ArticleViewer/ArticleViewer.tsx b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx index 511968a..564e314 100644 --- a/enshi/src/Components/ArticleViewer/ArticleViewer.tsx +++ b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx @@ -1,19 +1,40 @@ -import { Container } from "@radix-ui/themes"; +import { Container, Separator, Text } from "@radix-ui/themes"; +import { useQuery } from "@tanstack/react-query"; import { Interweave } from "interweave"; import { useParams } from "react-router-dom"; +import { axiosLocalhost } from "../../api/axios/axios"; +import SkeletonLoader from "./SkeletonLoader/SkeletonLoader"; type TArticleViewer = { htmlToParse?: string; -} +}; export default function ArticleViewer(props: TArticleViewer) { - const queryPapms = useParams() + let queryParams = useParams(); + + const { data, isPending } = useQuery({ + queryKey: [`post_${queryParams["postId"]}`], + queryFn: async () => { + const response = await axiosLocalhost.get( + `posts/${queryParams["postId"]}` + ); + + return response.data; + }, + }); + + if (isPending) + return ( + + ); return ( <>
- - + + {data.title} + +
diff --git a/enshi/src/Components/ArticleViewer/SkeletonLoader/SkeletonLoader.tsx b/enshi/src/Components/ArticleViewer/SkeletonLoader/SkeletonLoader.tsx new file mode 100644 index 0000000..2a9841b --- /dev/null +++ b/enshi/src/Components/ArticleViewer/SkeletonLoader/SkeletonLoader.tsx @@ -0,0 +1,27 @@ +import { Container, Skeleton, Text } from "@radix-ui/themes"; +import { + headerLong, + headerShort, + pText, +} from "../../../constants/textForSkeleton"; + +export default function SkeletonLoader() { + return ( + + + {headerLong} +
+ {headerShort} +
+
+ {pText} +
+
+ {pText} +
+
+ {pText} +
+
+ ); +} diff --git a/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx b/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx index 3e3e6dd..eb677ba 100644 --- a/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx +++ b/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx @@ -1,5 +1,5 @@ import { Box, Container, Flex } from "@radix-ui/themes"; -import { useSetAtom } from "jotai"; +import { useAtom, useSetAtom } from "jotai"; import { postCreationAtom, postCreationTitleAtom @@ -8,7 +8,7 @@ import Editor from "../../Components/Editor/Editor"; import SubmitPostButton from "./SubmitPostButton/SubmitPostButton"; export default function PostCreatorPage() { - const setTitleValue = useSetAtom(postCreationTitleAtom); + const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom); const setContentValue = useSetAtom(postCreationAtom); return ( @@ -20,11 +20,12 @@ export default function PostCreatorPage() { { setTitleValue(e.target.value); }} + value={titleValue} /> diff --git a/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx b/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx index c57f3c6..201d22d 100644 --- a/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx +++ b/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx @@ -1,6 +1,6 @@ import { Button } from "@radix-ui/themes"; import { useMutation } from "@tanstack/react-query"; -import { useAtomValue } from "jotai"; +import { useAtom } from "jotai"; import { useState } from "react"; import { useTranslation } from "react-i18next"; import { useNavigate } from "react-router-dom"; @@ -16,15 +16,20 @@ type TSubmitPostButton = { export default function SubmitPostButton(props: TSubmitPostButton) { const { t } = useTranslation(); - const contentValue = useAtomValue(postCreationAtom); - const titleValue = useAtomValue(postCreationTitleAtom); - - const navigate = useNavigate(); const [isDisabled, setIsDisabled] = useState(false); + const [contentValue, setContentValue] = useAtom(postCreationAtom); + const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom); + + const navigate = useNavigate(); + const postMutation = useMutation({ mutationFn: async () => { + if (!titleValue) throw new Error("no title provided"); + if (!contentValue || contentValue === "


") + throw new Error("no content provided"); + axiosLocalhost.post("/posts", { title: titleValue, content: contentValue, @@ -37,6 +42,8 @@ export default function SubmitPostButton(props: TSubmitPostButton) { setIsDisabled(false); }, onSuccess: () => { + setContentValue(""); + setTitleValue(""); navigate("/"); }, }); diff --git a/enshi/src/constants/textForSkeleton.ts b/enshi/src/constants/textForSkeleton.ts new file mode 100644 index 0000000..b166637 --- /dev/null +++ b/enshi/src/constants/textForSkeleton.ts @@ -0,0 +1,12 @@ +export const pText = `The goal of typography is to relate font size, line + height, and line width in a proportional way that + maximizes beauty and makes reading easier and more + pleasant. The question is: What proportion(s) will give + us the best results? The golden ratio is often observed + in nature where beauty and utility intersect; perhaps we + can use this “divine” proportion to enhance these + attributes in our typography.`; + +export const headerLong = `THUS SHU SHU HDFQIUWKHFQWHF KJQWHqwfiqfquwdhqwjdk`; + +export const headerShort = `THUS SHU SHU HDFQIUWKHFQWHF`; diff --git a/enshi/src/routes/routes.tsx b/enshi/src/routes/routes.tsx index a6f3544..fd1c62a 100644 --- a/enshi/src/routes/routes.tsx +++ b/enshi/src/routes/routes.tsx @@ -4,6 +4,7 @@ import { Route, useRouteError, } from "react-router-dom"; +import ArticleViewer from "../Components/ArticleViewer/ArticleViewer"; import AuthPageWrapper from "../Pages/AuthPageWrapper/AuthPageWrapper"; import LoginPage from "../Pages/LoginRegisterPage/LoginPage/LoginPage"; import RegisterPage from "../Pages/LoginRegisterPage/RegisterPage/RegisterPage"; @@ -36,7 +37,9 @@ export const routes = createRoutesFromElements( } - > + /> + + } />