From 26179b89bfe85457d59231ba99e7b4604c4393b4 Mon Sep 17 00:00:00 2001
From: Max <er4gonik@gmail.com>
Date: Wed, 29 Jan 2025 20:45:26 +0300
Subject: [PATCH] Work at add post to blog dialog

---
 enshi/src/@types/BlogTypes.ts                 |  8 ++
 enshi/src/App.tsx                             |  2 +-
 .../ArticleViewer/ArticleViewer.tsx           | 64 +--------------
 .../AddPostToBlogDialog.tsx                   | 82 +++++++++++++++++++
 4 files changed, 94 insertions(+), 62 deletions(-)
 create mode 100644 enshi/src/@types/BlogTypes.ts
 create mode 100644 enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx

diff --git a/enshi/src/@types/BlogTypes.ts b/enshi/src/@types/BlogTypes.ts
new file mode 100644
index 0000000..f638c7e
--- /dev/null
+++ b/enshi/src/@types/BlogTypes.ts
@@ -0,0 +1,8 @@
+export type Blog = {
+    blog_id: number;           
+    user_id: number;        
+    title: string;         
+    description?: string;   
+    category_id?: number;    
+    created_at: Date;       
+}
\ No newline at end of file
diff --git a/enshi/src/App.tsx b/enshi/src/App.tsx
index 29bf349..cbcc6d9 100644
--- a/enshi/src/App.tsx
+++ b/enshi/src/App.tsx
@@ -13,7 +13,7 @@ const router = createBrowserRouter(routes);
 
 export default function App() {
     return (
-        <Theme className="h-fit" accentColor="indigo" grayColor="slate">
+        <Theme className="h-fit" accentColor="indigo" grayColor="slate" appearance="dark">
             <ToastProvider>
                 <QueryClientProvider client={queryClient}>
                     <RouterProvider router={router} />
diff --git a/enshi/src/Components/ArticleViewer/ArticleViewer.tsx b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx
index 9cc5024..842a672 100644
--- a/enshi/src/Components/ArticleViewer/ArticleViewer.tsx
+++ b/enshi/src/Components/ArticleViewer/ArticleViewer.tsx
@@ -1,13 +1,9 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
 import {
     Box,
-    Button,
     Container,
     Flex,
-    Select,
     Separator,
-    Text,
+    Text
 } from "@radix-ui/themes";
 import { useQuery } from "@tanstack/react-query";
 import { Interweave } from "interweave";
@@ -15,6 +11,7 @@ import { useAtomValue } from "jotai";
 import { useParams } from "react-router-dom";
 import { axiosLocalhost } from "../../api/axios/axios";
 import { userAtom } from "../../AtomStore/AtomStore";
+import AddPostToBlogDialog from "../Dialogs/AddPostToBlogDialog/AddPostToBlogDialog";
 import ChangePostButton from "./ChangePostButton/ChangePostButton";
 import SkeletonPostLoader from "./SkeletonLoader/SkeletonLoader";
 import VoteButton, { DOWNVOTE, UPVOTE } from "./VoteButton/VoteButton";
@@ -78,62 +75,7 @@ export default function ArticleViewer(props: TArticleViewer) {
                                     />
                                 </Box>
 
-                                <Dialog.Root>
-                                    <Dialog.Trigger asChild>
-                                        <Button
-                                            variant="surface"
-                                            className="h-5"
-                                        >
-                                            Add to blog
-                                        </Button>
-                                    </Dialog.Trigger>
-                                    <Dialog.Portal>
-                                        <Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
-                                        <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[450px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
-                                            <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
-                                                Add this post to blog
-                                            </Dialog.Title>
-                                            <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
-                                                <Flex>
-                                                    <Text>
-                                                        {`Add "${data.title}" to blog...`}
-                                                    </Text>
-                                                    <Select.Root defaultValue="apple">
-                                                        <Select.Trigger />
-                                                        <Select.Content>
-                                                            <Select.Group>
-                                                                <Select.Item value="orange">
-                                                                    This
-                                                                </Select.Item>
-                                                                <Select.Item value="apple">
-                                                                    This is
-                                                                    updated blog
-                                                                </Select.Item>
-                                                                <Select.Item value="grape">
-                                                                    This another
-                                                                </Select.Item>
-                                                            </Select.Group>
-                                                        </Select.Content>
-                                                    </Select.Root>
-                                                </Flex>
-                                            </Dialog.Description>
-
-                                            <div className="mt-[25px] flex justify-end">
-                                                <Dialog.Close asChild>
-                                                    <Button>Confirm</Button>
-                                                </Dialog.Close>
-                                            </div>
-                                            <Dialog.Close asChild>
-                                                <button
-                                                    className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
-                                                    aria-label="Close"
-                                                >
-                                                    <Cross2Icon />
-                                                </button>
-                                            </Dialog.Close>
-                                        </Dialog.Content>
-                                    </Dialog.Portal>
-                                </Dialog.Root>
+                                <AddPostToBlogDialog />
                             </Flex>
                         </Flex>
                         <Separator size={"4"} className="mb-2" />
diff --git a/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx b/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx
new file mode 100644
index 0000000..04deee3
--- /dev/null
+++ b/enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx
@@ -0,0 +1,82 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Button, Card, Flex, Select, Text, Theme } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { Blog } from "../../../@types/BlogTypes";
+import { axiosLocalhost } from "../../../api/axios/axios";
+import { JSONWithInt64 } from "../../../utils/idnex";
+
+export default function AddPostToBlogDialog() {
+    const { data } = useQuery({
+        queryKey: ["userBlogs"],
+        queryFn: async () => {
+            const response = await axiosLocalhost.get("/user/blogs", {
+                transformResponse: [(data) => data],
+            });
+
+            let temp = JSONWithInt64(response.data);
+
+            return temp as Blog[];
+        },
+    });
+
+    const [selectedBlog, setSelectedBlog] = useState<string>("");
+
+    return (
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                <Button variant="surface" className="h-5">
+                    Add to blog
+                </Button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 bg-black/40 data-[state=open]:animate-overlayShow" />
+                <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-md p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
+                    <Theme>
+                        <Card>
+                            <Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
+                                Add this post to blog
+                            </Dialog.Title>
+                            <Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
+                                <Flex gap={"2"} align={"center"}>
+                                    <Text>{`Add post to `}</Text>
+                                    <Select.Root>
+                                        <Select.Trigger className="w-40"/>
+                                        <Select.Content>
+                                            <Select.Group>
+                                                {data?.map((blog, i) => {
+                                                    return (
+                                                        <Select.Item key={i} value={`${blog.blog_id}`}>
+                                                            {blog.title}
+                                                        </Select.Item>
+                                                    );
+                                                })}
+                                            </Select.Group>
+                                        </Select.Content>
+                                    </Select.Root>
+                                </Flex>
+                            </Dialog.Description>
+
+                            <div className="mt-[25px] flex justify-end">
+                                <Dialog.Close asChild>
+                                    <Button variant="outline" color="green">
+                                        Confirm
+                                    </Button>
+                                </Dialog.Close>
+                            </div>
+                            <Dialog.Close asChild>
+                                <button
+                                    className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full text-violet11 hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
+                                    aria-label="Close"
+                                >
+                                    <Cross2Icon />
+                                </button>
+                            </Dialog.Close>
+                        </Card>
+                    </Theme>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+}