Blog creation and filling dialog completed #1
@ -1,38 +1,45 @@
|
|||||||
import * as Dialog from "@radix-ui/react-dialog";
|
import * as Dialog from "@radix-ui/react-dialog";
|
||||||
import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
|
import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
|
||||||
import { Box, Button } from "@radix-ui/themes";
|
import { Box, Button, Heading, Text, Theme } from "@radix-ui/themes";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
import { useMutation } from "@tanstack/react-query";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { axiosLocalhost } from "../../../api/axios/axios";
|
import { axiosLocalhost } from "../../../api/axios/axios";
|
||||||
|
import queryClient from "../../../api/QueryClient/QueryClient";
|
||||||
import useToast from "../../../hooks/useToast";
|
import useToast from "../../../hooks/useToast";
|
||||||
|
|
||||||
export default function BlogCreationDialog() {
|
export default function BlogCreationDialog() {
|
||||||
const createToast = useToast()
|
const createToast = useToast();
|
||||||
|
|
||||||
const [title, setTitle] = useState<string>("My blog");
|
const [title, setTitle] = useState<string>("My blog");
|
||||||
const [description, setDescription] = useState<string>("");
|
const [description, setDescription] = useState<string>("");
|
||||||
|
|
||||||
const addMutation = useMutation({
|
const addMutation = useMutation({
|
||||||
onMutate: () => {
|
onMutate: () => {},
|
||||||
},
|
|
||||||
mutationFn: async () => {
|
mutationFn: async () => {
|
||||||
await axiosLocalhost.post("/blogs", {
|
await axiosLocalhost.post("/blogs", {
|
||||||
title,
|
title,
|
||||||
description
|
description,
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
createToast({title: `Success!`, description: `Blog created successfully!`});
|
createToast({
|
||||||
|
title: `Success!`,
|
||||||
|
description: `Blog created successfully!`,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
onError: (_error) => {
|
onError: (_error) => {
|
||||||
createToast({title: `Error!`, description: `Blog creation failed!`});
|
createToast({
|
||||||
|
title: `Error!`,
|
||||||
|
description: `Blog creation failed!`,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
onSettled: () => {
|
onSettled: () => {
|
||||||
|
queryClient.invalidateQueries({
|
||||||
}
|
queryKey: ["userBlogs"],
|
||||||
|
});
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
<Dialog.Root>
|
<Dialog.Root>
|
||||||
@ -42,64 +49,69 @@ export default function BlogCreationDialog() {
|
|||||||
</Button>
|
</Button>
|
||||||
</Dialog.Trigger>
|
</Dialog.Trigger>
|
||||||
<Dialog.Portal>
|
<Dialog.Portal>
|
||||||
<Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
|
<Box>
|
||||||
<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">
|
<Theme>
|
||||||
<Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
|
<Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm data-[state=open]:animate-appear" />
|
||||||
Create blog
|
<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 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-appear">
|
||||||
</Dialog.Title>
|
<Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
|
||||||
<Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
|
<Heading>Create blog</Heading>
|
||||||
Create your new blog.
|
</Dialog.Title>
|
||||||
</Dialog.Description>
|
<Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
|
||||||
<fieldset className="mb-[15px] flex items-center gap-5">
|
<Text>Create your new blog.</Text>
|
||||||
<label
|
</Dialog.Description>
|
||||||
className="w-[90px] text-right text-[15px] text-violet11"
|
<fieldset className="mb-[15px] flex items-center gap-5">
|
||||||
htmlFor="title"
|
<label
|
||||||
>
|
className="w-[90px] text-right text-[15px] text-violet11"
|
||||||
Blog title
|
htmlFor="title"
|
||||||
</label>
|
>
|
||||||
<input
|
<Text>Blog title</Text>
|
||||||
className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
|
</label>
|
||||||
id="title"
|
<input
|
||||||
defaultValue="My blog"
|
className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
|
||||||
onChange={(e) => {
|
id="title"
|
||||||
setTitle(e.target.value);
|
defaultValue="My blog"
|
||||||
}}
|
onChange={(e) => {
|
||||||
/>
|
setTitle(e.target.value);
|
||||||
</fieldset>
|
}}
|
||||||
<fieldset className="mb-[15px] flex items-center gap-5">
|
/>
|
||||||
<label
|
</fieldset>
|
||||||
className="w-[90px] text-right text-[15px] text-violet11"
|
<fieldset className="mb-[15px] flex items-center gap-5">
|
||||||
htmlFor="Description"
|
<label
|
||||||
>
|
className="w-[90px] text-right text-[15px] text-violet11"
|
||||||
Description
|
htmlFor="Description"
|
||||||
</label>
|
>
|
||||||
<textarea
|
<Text>Description</Text>
|
||||||
className="pt-2 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
|
</label>
|
||||||
id="Description"
|
<textarea
|
||||||
placeholder="Your description..."
|
className="pt-2 inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none text-violet11 shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
|
||||||
onChange={(e) => {
|
id="Description"
|
||||||
setDescription(e.target.value);
|
placeholder="Your description..."
|
||||||
}}
|
onChange={(e) => {
|
||||||
/>
|
setDescription(e.target.value);
|
||||||
</fieldset>
|
}}
|
||||||
<div className="mt-[25px] flex justify-end">
|
/>
|
||||||
<Dialog.Close asChild
|
</fieldset>
|
||||||
onClick={() => {
|
<div className="mt-[25px] flex justify-end">
|
||||||
addMutation.mutate();
|
<Dialog.Close
|
||||||
}}
|
asChild
|
||||||
>
|
onClick={() => {
|
||||||
<Button>Create blog</Button>
|
addMutation.mutate();
|
||||||
</Dialog.Close>
|
}}
|
||||||
</div>
|
>
|
||||||
<Dialog.Close asChild>
|
<Button>Create blog</Button>
|
||||||
<button
|
</Dialog.Close>
|
||||||
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"
|
</div>
|
||||||
aria-label="Close"
|
<Dialog.Close asChild>
|
||||||
>
|
<button
|
||||||
<Cross2Icon />
|
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"
|
||||||
</button>
|
aria-label="Close"
|
||||||
</Dialog.Close>
|
>
|
||||||
</Dialog.Content>
|
<Cross2Icon />
|
||||||
|
</button>
|
||||||
|
</Dialog.Close>
|
||||||
|
</Dialog.Content>
|
||||||
|
</Theme>
|
||||||
|
</Box>
|
||||||
</Dialog.Portal>
|
</Dialog.Portal>
|
||||||
</Dialog.Root>
|
</Dialog.Root>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
@ -34,6 +34,7 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
appear: {
|
appear: {
|
||||||
|
"0%": { opacity: "0" },
|
||||||
"100%": { opacity: "1" },
|
"100%": { opacity: "1" },
|
||||||
},
|
},
|
||||||
widthOut: {
|
widthOut: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user