Improvements

This commit is contained in:
Max 2025-01-30 17:16:17 +03:00
parent 26179b89bf
commit c54278baea
6 changed files with 242 additions and 112 deletions

View File

@ -1,18 +1,18 @@
{
"name": "enshi",
"version": "0.0.0",
"version": "0.1.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "enshi",
"version": "0.0.0",
"version": "0.1.7",
"dependencies": {
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-form": "^0.1.0",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-navigation-menu": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/themes": "^3.1.3",
@ -2234,18 +2234,18 @@
}
},
"node_modules/@radix-ui/react-scroll-area": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.1.tgz",
"integrity": "sha512-FnM1fHfCtEZ1JkyfH/1oMiTcFBQvHKl4vD9WnpwkLgtF+UmnXMCad6ECPTaAjcDjam+ndOEJWgHyKDGNteWSHw==",
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.2.tgz",
"integrity": "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==",
"license": "MIT",
"dependencies": {
"@radix-ui/number": "1.1.0",
"@radix-ui/primitive": "1.1.0",
"@radix-ui/react-compose-refs": "1.1.0",
"@radix-ui/primitive": "1.1.1",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-context": "1.1.1",
"@radix-ui/react-direction": "1.1.0",
"@radix-ui/react-presence": "1.1.1",
"@radix-ui/react-primitive": "2.0.0",
"@radix-ui/react-presence": "1.1.2",
"@radix-ui/react-primitive": "2.0.1",
"@radix-ui/react-use-callback-ref": "1.1.0",
"@radix-ui/react-use-layout-effect": "1.1.0"
},
@ -2264,6 +2264,27 @@
}
}
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/primitive": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
"integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==",
"license": "MIT"
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-compose-refs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
"integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
"license": "MIT",
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-context": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
@ -2280,12 +2301,12 @@
}
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-presence": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
"integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
"integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.0",
"@radix-ui/react-compose-refs": "1.1.1",
"@radix-ui/react-use-layout-effect": "1.1.0"
},
"peerDependencies": {
@ -2303,6 +2324,47 @@
}
}
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-primitive": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
"integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-slot": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-scroll-area/node_modules/@radix-ui/react-slot": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
"integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
"license": "MIT",
"dependencies": {
"@radix-ui/react-compose-refs": "1.1.1"
},
"peerDependencies": {
"@types/react": "*",
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-select": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.1.tgz",

View File

@ -15,7 +15,7 @@
"@radix-ui/react-form": "^0.1.0",
"@radix-ui/react-icons": "^1.3.2",
"@radix-ui/react-navigation-menu": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-scroll-area": "^1.2.2",
"@radix-ui/react-toast": "^1.2.2",
"@radix-ui/react-tooltip": "^1.1.2",
"@radix-ui/themes": "^3.1.3",

View File

@ -1,13 +1,24 @@
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 { useMutation, useQuery } from "@tanstack/react-query";
import { useAtomValue } from "jotai";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Blog } from "../../../@types/BlogTypes";
import { axiosLocalhost } from "../../../api/axios/axios";
import { userAtom } from "../../../AtomStore/AtomStore";
import useToast from "../../../hooks/useToast";
import { JSONWithInt64 } from "../../../utils/idnex";
export default function AddPostToBlogDialog() {
const navigate = useNavigate();
const user = useAtomValue(userAtom);
const [selectedBlog, setSelectedBlog] = useState<string>("");
const createToast = useToast()
const { data } = useQuery({
queryKey: ["userBlogs"],
queryFn: async () => {
@ -21,13 +32,34 @@ export default function AddPostToBlogDialog() {
},
});
const [selectedBlog, setSelectedBlog] = useState<string>("");
const addMutation = useMutation({
mutationKey: ["addPostToBlog"],
mutationFn: async () => {
},
onError: (error) => {
console.error(error);
createToast({title: "Error!", description: "Post have not been added"})
},
onSuccess: () => {
console.log("Post added successfully");
createToast({title: "Success!", description: "Post added successfully"})
},
onSettled: () => {
console.log("Add mutation is settled");
},
});
if (!user) {
navigate("/login");
return null;
}
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<Button variant="surface" className="h-5">
Add to blog
<Text>Add to blog</Text>
</Button>
</Dialog.Trigger>
<Dialog.Portal>
@ -36,18 +68,26 @@ export default function AddPostToBlogDialog() {
<Theme>
<Card>
<Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
Add this post to blog
<Text size={"4"}>Add this post to blog</Text>
</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.Root
value={selectedBlog}
onValueChange={(e) =>
setSelectedBlog(e)
}
>
<Select.Trigger className="w-40 cursor-pointer" />
<Select.Content>
<Select.Group>
{data?.map((blog, i) => {
return (
<Select.Item key={i} value={`${blog.blog_id}`}>
<Select.Item
key={i}
value={`${blog.blog_id}`}
>
{blog.title}
</Select.Item>
);
@ -60,8 +100,10 @@ export default function AddPostToBlogDialog() {
<div className="mt-[25px] flex justify-end">
<Dialog.Close asChild>
<Button variant="outline" color="green">
Confirm
<Button
className="cursor-pointer"
>
<Text>Confirm</Text>
</Button>
</Dialog.Close>
</div>

View File

@ -1,6 +1,6 @@
import * as Dialog from "@radix-ui/react-dialog";
import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
import { Box, Button, Heading, Text, Theme } from "@radix-ui/themes";
import { Box, Button, Card, Text, Theme } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { useState } from "react";
import { axiosLocalhost } from "../../../api/axios/axios";
@ -52,63 +52,67 @@ export default function BlogCreationDialog() {
<Box>
<Theme>
<Dialog.Overlay className="fixed inset-0 bg-black/40 backdrop-blur-sm data-[state=open]:animate-appear" />
<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 className="m-0 text-[17px] font-medium text-mauve12">
<Heading>Create blog</Heading>
</Dialog.Title>
<Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
<Text>Create your new blog.</Text>
</Dialog.Description>
<fieldset className="mb-[15px] flex items-center gap-5">
<label
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="title"
>
<Text>Blog title</Text>
</label>
<input
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"
id="title"
defaultValue="My blog"
onChange={(e) => {
setTitle(e.target.value);
}}
/>
</fieldset>
<fieldset className="mb-[15px] flex items-center gap-5">
<label
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="Description"
>
<Text>Description</Text>
</label>
<textarea
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"
id="Description"
placeholder="Your description..."
onChange={(e) => {
setDescription(e.target.value);
}}
/>
</fieldset>
<div className="mt-[25px] flex justify-end">
<Dialog.Close
asChild
onClick={() => {
addMutation.mutate();
}}
>
<Button>Create blog</Button>
<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-appear">
<Card>
<Dialog.Title className="m-0 text-[17px] font-medium text-mauve12">
<Text size={"4"}>Create blog</Text>
</Dialog.Title>
<Dialog.Description className="mb-5 mt-2.5 text-[15px] leading-normal text-mauve11">
<Text>Create your new blog.</Text>
</Dialog.Description>
<fieldset className="mb-[15px] flex items-center gap-5">
<label
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="title"
>
<Text>Blog title</Text>
</label>
<input
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"
id="title"
defaultValue="My blog"
onChange={(e) => {
setTitle(e.target.value);
}}
/>
</fieldset>
<fieldset className="mb-[15px] flex items-center gap-5">
<label
className="w-[90px] text-right text-[15px] text-violet11"
htmlFor="Description"
>
<Text>Description</Text>
</label>
<textarea
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"
id="Description"
placeholder="Your description..."
onChange={(e) => {
setDescription(e.target.value);
}}
/>
</fieldset>
<div className="mt-[25px] flex justify-end">
<Dialog.Close
asChild
onClick={() => {
addMutation.mutate();
}}
>
<Button className="cursor-pointer">
Create blog
</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>
</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>
</Dialog.Content>
</Theme>
</Box>

View File

@ -1,10 +1,5 @@
import {
Box,
Container,
Flex,
Separator,
Text
} from "@radix-ui/themes";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { Box, Container, Flex, Separator, Text } from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
import { axiosLocalhost } from "../../api/axios/axios";
import BlogBox from "../../Components/BlogBox/BlogBox";
@ -12,6 +7,10 @@ import BlogCreationDialog from "../../Components/Dialogs/BlogCreationDialog/Blog
import { JSONWithInt64 } from "../../utils/idnex";
import SkeletonBoxes from "./SkeletonBoxes/SkeletonBoxes";
const TAGS = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
);
export default function UserBlogsPage() {
const { data, isPending, isFetching } = useQuery({
queryKey: ["userBlogs"],
@ -34,33 +33,55 @@ export default function UserBlogsPage() {
);
return (
<Box className="size-full">
<Container size={"1"}>
<Flex direction={"column"} gap={"2"}>
<Text size={"9"} className="text-center">
Your blogs
</Text>
<Box className="w-full max-h-full overflow-hidden">
{/* <Container size={"2"} className="w-full h-full max-h-full"> */}
<Flex
id="currentTestBox"
direction={"column"}
gap={"2"}
className="max-h-full pb-2 mx-80"
>
<Text size={"9"} className="text-center">
Your blogs
</Text>
<Separator size={"4"} className="my-2" />
<Separator size={"4"} className="my-2" />
{data
? data?.map((blog: any, b) => {
return (
<>
<BlogBox
key={b}
title={blog.title}
blogId={blog.blog_id}
userId={blog.user_id}
/>
</>
);
})
: null}
<div className="overflow-hidden">
<ScrollArea.Root className="w-full overflow-hidden h-fit max-h-">
<ScrollArea.Viewport className="size-full">
<Flex direction={"column"} gap={"2"}>
{data
? data?.map((blog: any, b) => {
return (
<>
<BlogBox
key={b}
title={blog.title}
blogId={blog.blog_id}
userId={blog.user_id}
/>
</>
);
})
: null}
</Flex>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
orientation="vertical"
color="gray"
className="rounded-xl data-[state=visible]:w-1"
>
<ScrollArea.Thumb className="relative flex-1 bg-gray-600 rounded-xl" />
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</div>
<BlogCreationDialog />
</Flex>
</Container>
<BlogCreationDialog />
</Flex>
{/* </Container> */}
</Box>
);
}

View File

@ -58,6 +58,7 @@ export default function MainPage() {
</div>
) : (
<Flex
id="mainFlex"
direction={"column"}
className="min-h-[100vh] max-h-[100vh] overflow-hidden"
>