diff --git a/enshi/src/@types/PostTypes.ts b/enshi/src/@types/PostTypes.ts index d744ea8..27662a1 100644 --- a/enshi/src/@types/PostTypes.ts +++ b/enshi/src/@types/PostTypes.ts @@ -17,6 +17,7 @@ export type Post = { post_id: string; title: string; user_id: string; + content: string; }; export type SelectedPostsResponse = { diff --git a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx index 711c541..b75bd51 100644 --- a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx +++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LoginButton/LoginButton.tsx @@ -8,8 +8,8 @@ export default function LoginButton() { const { t } = useTranslation(); return ( - - + + diff --git a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx index cb820ac..7f4d38a 100644 --- a/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx +++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/LogoutButton/LogoutButton.tsx @@ -36,7 +36,7 @@ export default function LogoutButton() { return ( logoutMutation.mutate()} > diff --git a/enshi/src/Components/UserCard/UserCard.tsx b/enshi/src/Components/UserCard/UserCard.tsx index 3f70b71..d17cd24 100644 --- a/enshi/src/Components/UserCard/UserCard.tsx +++ b/enshi/src/Components/UserCard/UserCard.tsx @@ -50,7 +50,7 @@ export default function UserCard(props: TUserCard) { }; const getUsername = (): string => { - if (!user || props.username) return props.username || "Nothing"; + if (!user || props.username) return props.username || ""; return user.username; }; @@ -76,7 +76,7 @@ export default function UserCard(props: TUserCard) { )} - {`@${getUsername()}`} + {`@${data?.user_info.username}`} diff --git a/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx b/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx index 05091f5..4366cfa 100644 --- a/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx +++ b/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx @@ -1,33 +1,60 @@ -import { Skeleton, Text } from "@radix-ui/themes"; +import { HoverCard, Link, Skeleton, Text } from "@radix-ui/themes"; import { useQuery } from "@tanstack/react-query"; -import { Link } from "react-router-dom"; +import { lazy, Suspense } from "react"; import { axiosLocalhost } from "../../api/axios/axios"; type TUserNicknameLink = { - userId: string; + userId: string; }; +const UserCard = lazy(() => import("../UserCard/UserCard")); + export default function UserNicknameLink(props: TUserNicknameLink) { - const { data, isPending } = useQuery({ - queryKey: [`userLink${props.userId}`], - queryFn: async () => { - const response = await axiosLocalhost.get( - `/user/${props.userId || 0}` - ); - return response.data as string; - }, - }); + const { data, isPending } = useQuery({ + queryKey: [`userLink${props.userId}`], + queryFn: async () => { + const response = await axiosLocalhost.get( + `/user/${props.userId || 0}` + ); + return response.data as string; + }, + }); - if (isPending) - return ( - - @Nickname - - ); + if (isPending) + return ( + + + @Nickname + + + ); - return ( - - @{data} - - ); + return ( + + + + + @{data} + + + + + }> + + + + + ); } diff --git a/enshi/src/Pages/RandomPostsPage/PostCard/InsetImage/InsetImage.tsx b/enshi/src/Pages/RandomPostsPage/PostCard/InsetImage/InsetImage.tsx new file mode 100644 index 0000000..2acfb32 --- /dev/null +++ b/enshi/src/Pages/RandomPostsPage/PostCard/InsetImage/InsetImage.tsx @@ -0,0 +1,50 @@ +import { Inset } from "@radix-ui/themes"; +import { useMemo } from "react"; + +type TInsetImageProps = { + isHovered: boolean; + ref_: React.RefObject; + windowWidth: number; +}; + +export default function InsetImage(props: TInsetImageProps) { + const seed = useMemo(() => { + return Math.floor(Math.random() * (1 + Math.random()) * 100000); + }, []); + + return ( + + Bold typography + + ); +} diff --git a/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx b/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx index 77ca428..c552ae7 100644 --- a/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx +++ b/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx @@ -1,24 +1,20 @@ import { CalendarIcon } from "@radix-ui/react-icons"; -import { - Card, - Flex, - Heading, - Inset, - Text, - Tooltip -} from "@radix-ui/themes"; +import { Box, Card, Flex, Heading, Text, Tooltip } from "@radix-ui/themes"; import dayjs from "dayjs"; import "dayjs/locale/ru"; -import { useEffect, useMemo, useRef, useState } from "react"; +import { Interweave } from "interweave"; +import { useEffect, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import { Post } from "../../../@types/PostTypes"; +import UserNicknameLink from "../../../Components/UserNicknameLink/UserNicknameLink"; +import InsetImage from "./InsetImage/InsetImage"; + export default function PostCard(props: Post) { const navigate = useNavigate(); const ref = useRef(null); const [windowWidth, setWindowWidth] = useState(window.innerWidth); - const [isImageLoaded, setIsImageLoaded] = useState(false); const [isHovered, setIsHovered] = useState(false); const parsedDate = dayjs(props.created_at) @@ -29,79 +25,95 @@ export default function PostCard(props: Post) { navigate(`/posts/${props.post_id.toString()}`); }; - const seed = useMemo(() => { - return Math.floor(Math.random() * (1 + Math.random()) * 100000); - }, []); - useEffect(() => { const f = () => { setWindowWidth(window.innerWidth); console.log(`Window width: ${window.innerWidth} px`); - - } + }; - f() + f(); - window.addEventListener('resize', f); - return () => window.removeEventListener('resize', f); + window.addEventListener("resize", f); + return () => window.removeEventListener("resize", f); }, []); return ( setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > - - Bold typography setIsImageLoaded(true)} - /> - + - {props.title} + + {props.title} + - - - - + + + + + + + + + + + + + {`${parsedDate}`} + + + + + - {`${parsedDate}`} + Author:{" "} + - + diff --git a/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx b/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx index 4c894af..674aef7 100644 --- a/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx +++ b/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx @@ -43,7 +43,7 @@ export default function RandomPostsPage() { direction={"column"} className="w-full overflow-hidden sm:mx-auto max-w-pc-width " > - + {data?.pages.map((post, i) => { return ( components */ --code-font-family: diff --git a/enshi/src/layout/MainPage/MainPage.tsx b/enshi/src/layout/MainPage/MainPage.tsx index a29013d..17f2ebd 100644 --- a/enshi/src/layout/MainPage/MainPage.tsx +++ b/enshi/src/layout/MainPage/MainPage.tsx @@ -66,7 +66,7 @@ export default function MainPage() { diff --git a/enshi_back/db/go_queries/posts_queries.sql.go b/enshi_back/db/go_queries/posts_queries.sql.go index bb44bee..16b3220 100644 --- a/enshi_back/db/go_queries/posts_queries.sql.go +++ b/enshi_back/db/go_queries/posts_queries.sql.go @@ -160,7 +160,7 @@ filtered_posts AS ( json_build_object( 'post_id', post_id::text, 'blog_id', blog_id::text, 'user_id', user_id::text, 'title', title, - 'created_at', created_at + 'created_at', created_at, 'content', SUBSTRING(content FROM 1 FOR 300) ) FROM public.posts diff --git a/enshi_back/db/queries/posts_queries.sql b/enshi_back/db/queries/posts_queries.sql index 49954e0..2b134fb 100644 --- a/enshi_back/db/queries/posts_queries.sql +++ b/enshi_back/db/queries/posts_queries.sql @@ -49,7 +49,7 @@ filtered_posts AS ( json_build_object( 'post_id', post_id::text, 'blog_id', blog_id::text, 'user_id', user_id::text, 'title', title, - 'created_at', created_at + 'created_at', created_at, 'content', SUBSTRING(content FROM 1 FOR 300) ) FROM public.posts