neki/Enshi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Blog creation and filling dialog completed #1

Merged
neki merged 10 commits from feature/blogCreationAndFilling into develop 2025-02-01 09:10:18 +00:00
Conversation 0 Commits 10 Files Changed 27 +94 -62
4 changed files with 94 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 26179b89bf - Show all commits

8
enshi/src/@types/BlogTypes.ts Normal file
View File

@ -0,0 +1,8 @@
export type Blog = {
blog_id: number;
user_id: number;
title: string;
description?: string;
category_id?: number;
created_at: Date;
}

2
enshi/src/App.tsx
View File

@ -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} />

64
enshi/src/Components/ArticleViewer/ArticleViewer.tsx
View File

@ -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" />

82
enshi/src/Components/Dialogs/AddPostToBlogDialog/AddPostToBlogDialog.tsx Normal file
View File

@ -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>
);
}