Tweaking at home page
This commit is contained in:
Max
parent
c36e4a7f7d
commit
f70582ce83
@ -1,4 +1,7 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false
|
||||
"useTabs": true,
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"quoteProps": "consistent"
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Enshi</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<title>Enshi</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
95
enshi/package-lock.json
generated
95
enshi/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "enshi",
|
||||
"version": "0.1.8",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.2",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-form": "^0.1.0",
|
||||
"@radix-ui/react-icons": "^1.3.2",
|
||||
@ -20,6 +21,7 @@
|
||||
"@tanstack/react-query-devtools": "^5.61.0",
|
||||
"@types/quill": "^2.0.14",
|
||||
"axios": "^1.7.7",
|
||||
"dayjs": "^1.11.13",
|
||||
"html-react-parser": "^5.1.16",
|
||||
"i18n": "^0.15.1",
|
||||
"i18next": "^23.14.0",
|
||||
@ -1296,12 +1298,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-aspect-ratio": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
|
||||
"integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.2.tgz",
|
||||
"integrity": "sha512-TaJxYoCpxJ7vfEkv2PTNox/6zzmpKXT6ewvCuf2tTOIVN45/Jahhlld29Yw4pciOXS2Xq91/rSGEdmEnUWZCqA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.0.0"
|
||||
"@radix-ui/react-primitive": "2.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
@ -1318,6 +1320,62 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-aspect-ratio/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-aspect-ratio/node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
|
||||
"integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.1.2"
|
||||
},
|
||||
"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-aspect-ratio/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
|
||||
"integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
|
||||
"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-avatar": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz",
|
||||
@ -2935,6 +2993,29 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/themes/node_modules/@radix-ui/react-aspect-ratio": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
|
||||
"integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.0.0"
|
||||
},
|
||||
"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/themes/node_modules/@radix-ui/react-dialog": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
|
||||
@ -4216,6 +4297,12 @@
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
|
||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.7",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@radix-ui/react-aspect-ratio": "^1.1.2",
|
||||
"@radix-ui/react-dialog": "^1.1.2",
|
||||
"@radix-ui/react-form": "^0.1.0",
|
||||
"@radix-ui/react-icons": "^1.3.2",
|
||||
@ -23,6 +24,7 @@
|
||||
"@tanstack/react-query-devtools": "^5.61.0",
|
||||
"@types/quill": "^2.0.14",
|
||||
"axios": "^1.7.7",
|
||||
"dayjs": "^1.11.13",
|
||||
"html-react-parser": "^5.1.16",
|
||||
"i18n": "^0.15.1",
|
||||
"i18next": "^23.14.0",
|
||||
|
||||
@ -3,6 +3,8 @@ import "@radix-ui/themes/styles.css";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import "axios";
|
||||
import dayjs from "dayjs";
|
||||
import relativeTime from 'dayjs/plugin/relativeTime';
|
||||
import { useAtomValue } from "jotai";
|
||||
import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import queryClient from "./api/QueryClient/QueryClient";
|
||||
@ -11,6 +13,9 @@ import { themeAtom } from "./AtomStore/AtomStore";
|
||||
import ToastProvider from "./Components/ToastProvider/ToastProvider";
|
||||
import { routes } from "./routes/routes";
|
||||
|
||||
|
||||
dayjs.extend(relativeTime)
|
||||
|
||||
const router = createBrowserRouter(routes);
|
||||
|
||||
export default function App() {
|
||||
|
||||
@ -12,65 +12,67 @@ import VoteButton, { DOWNVOTE, UPVOTE } from "./VoteButton/VoteButton";
|
||||
import VoteCounter from "./VoteCounter/VoteCounter";
|
||||
|
||||
type TArticleViewer = {
|
||||
htmlToParse?: string;
|
||||
htmlToParse?: string;
|
||||
};
|
||||
|
||||
export default function ArticleViewer(props: TArticleViewer) {
|
||||
let queryParams = useParams();
|
||||
const user = useAtomValue(userAtom);
|
||||
let queryParams = useParams();
|
||||
const user = useAtomValue(userAtom);
|
||||
|
||||
const { data, isPending } = useQuery({
|
||||
queryKey: [`post_${queryParams["postId"]}`],
|
||||
queryFn: async () => {
|
||||
const response = await axiosLocalhost.get(
|
||||
`posts/${queryParams["postId"]}`
|
||||
);
|
||||
const { data, isPending } = useQuery({
|
||||
queryKey: [`post_${queryParams["postId"]}`],
|
||||
queryFn: async () => {
|
||||
const response = await axiosLocalhost.get(
|
||||
`posts/${queryParams["postId"]}`
|
||||
);
|
||||
|
||||
return response.data;
|
||||
},
|
||||
gcTime: 0,
|
||||
refetchOnMount: true,
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
gcTime: 0,
|
||||
refetchOnMount: true,
|
||||
});
|
||||
|
||||
if (isPending) return <SkeletonPostLoader />;
|
||||
if (isPending) return <SkeletonPostLoader />;
|
||||
|
||||
return (
|
||||
<ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width">
|
||||
<Flex direction={"column"} className="overflow-hidden">
|
||||
<Text className="mb-2" as="div" size={"9"}>
|
||||
{data.title}
|
||||
</Text>
|
||||
<Flex
|
||||
gap={"3"}
|
||||
className="items-center mt-4 mb-2 overflow-hidden align-baseline"
|
||||
>
|
||||
<Flex gap={"1"}>
|
||||
<VoteButton
|
||||
vote={UPVOTE}
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
return (
|
||||
<ScrollArea className="p-0 mx-auto overflow-hidden ql-editor max-w-pc-width">
|
||||
<Flex direction={"column"} className="overflow-hidden">
|
||||
<Text className="mb-2" as="div" size={"9"}>
|
||||
{data.title}
|
||||
</Text>
|
||||
<Flex
|
||||
gap={"3"}
|
||||
className="items-center mt-4 mb-2 overflow-hidden align-baseline"
|
||||
>
|
||||
<Flex gap={"1"}>
|
||||
<VoteButton
|
||||
vote={UPVOTE}
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
|
||||
<VoteCounter postId={queryParams["postId"] || ""} />
|
||||
<VoteCounter postId={queryParams["postId"] || ""} />
|
||||
|
||||
<VoteButton
|
||||
vote={DOWNVOTE}
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
</Flex>
|
||||
<VoteButton
|
||||
vote={DOWNVOTE}
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
<Box hidden={data.user_id != user?.id}>
|
||||
<ChangePostButton
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
</Box>
|
||||
<Box hidden={data.user_id != user?.id}>
|
||||
<ChangePostButton
|
||||
postId={queryParams["postId"] || ""}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{user ? <AddPostToBlogDialog /> : null}
|
||||
</Flex>
|
||||
</Flex>
|
||||
{user ? <AddPostToBlogDialog /> : null}
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Separator size={"4"} className="my-2" />
|
||||
<Separator size={"4"} className="my-2" />
|
||||
|
||||
<Interweave content={data.content} />
|
||||
</ScrollArea>
|
||||
);
|
||||
<Text>
|
||||
<Interweave content={data.content} />
|
||||
</Text>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@ export default function CustomNavigationMenu() {
|
||||
|
||||
return (
|
||||
<div className="flex-1">
|
||||
<NavigationMenu.Root orientation="horizontal">
|
||||
<NavigationMenu.List className="flex items-center justify-start gap-8">
|
||||
<NavigationMenu.Root orientation="horizontal" className="h-full">
|
||||
<NavigationMenu.List className="flex items-center justify-start h-full gap-8 my-auto">
|
||||
<NavItem text={t("home")} to="/" />
|
||||
|
||||
<NavItem text={t("following")} to="/c" />
|
||||
|
||||
@ -4,20 +4,28 @@ import { useAtom } from "jotai";
|
||||
import { themeAtom } from "../../../../AtomStore/AtomStore";
|
||||
|
||||
export default function ThemeChangeButton() {
|
||||
const [theme, setTheme] = useAtom(themeAtom);
|
||||
|
||||
const [theme, setTheme] = useAtom(themeAtom);
|
||||
|
||||
const toggleTheme = () => {
|
||||
if(theme === 'light') {
|
||||
setTheme('dark')
|
||||
} else {
|
||||
setTheme('light')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<IconButton onClick={toggleTheme} className="mx-0 my-auto rounded-full p-[8px]" variant="ghost">
|
||||
{theme === 'light' ? <SunIcon /> : <MoonIcon />}
|
||||
</IconButton>
|
||||
)
|
||||
const toggleTheme = () => {
|
||||
if (theme === "light") {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
setTheme("light");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
size={"3"}
|
||||
onClick={toggleTheme}
|
||||
className="mx-0 my-auto rounded-full p-[8px]"
|
||||
variant="ghost"
|
||||
>
|
||||
{theme === "light" ? (
|
||||
<SunIcon className="size-6" />
|
||||
) : (
|
||||
<MoonIcon className="size-6" />
|
||||
)}
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
@ -26,11 +26,11 @@ export default function UserButton() {
|
||||
<Tooltip content={"User menu"} className="w-fit">
|
||||
<DropdownMenu.Trigger>
|
||||
<IconButton
|
||||
size={"2"}
|
||||
size={"3"}
|
||||
className="items-center my-auto rounded-full"
|
||||
variant="ghost"
|
||||
>
|
||||
<PersonIcon />
|
||||
<PersonIcon className="size-6" />
|
||||
</IconButton>
|
||||
</DropdownMenu.Trigger>
|
||||
</Tooltip>
|
||||
|
||||
@ -1,26 +1,74 @@
|
||||
import { ImageIcon } from "@radix-ui/react-icons";
|
||||
import { Box, Card, Heading } from "@radix-ui/themes";
|
||||
import { CalendarIcon } from "@radix-ui/react-icons";
|
||||
import {
|
||||
Box,
|
||||
Card,
|
||||
Flex,
|
||||
Heading,
|
||||
Inset,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from "@radix-ui/themes";
|
||||
import dayjs from "dayjs";
|
||||
import "dayjs/locale/ru";
|
||||
import { useMemo } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Post } from "../../../@types/PostTypes";
|
||||
|
||||
export default function PostCard(props: Post) {
|
||||
const navigate = useNavigate()
|
||||
const navigate = useNavigate();
|
||||
|
||||
const clickHandler = () => {
|
||||
navigate(`/posts/${props.post_id.toString()}`)
|
||||
}
|
||||
const parsedDate = dayjs(props.created_at)
|
||||
.locale("ru")
|
||||
.format("DD MMMM YYYY");
|
||||
|
||||
return (
|
||||
<Card className="h-32 mb-4" onClick={clickHandler}>
|
||||
<Box className="flex size-full">
|
||||
<Box>
|
||||
<ImageIcon className="w-full h-full" />
|
||||
</Box>
|
||||
const clickHandler = () => {
|
||||
navigate(`/posts/${props.post_id.toString()}`);
|
||||
};
|
||||
|
||||
<Box className="px-4 pt-2">
|
||||
<Heading>{props.title}</Heading>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
const seed = useMemo(() => {
|
||||
return Math.floor(Math.random() * (1 + Math.random()) * 100000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className="flex cursor-pointer"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
<Box className="flex-1 h-full min-w-[550px]">
|
||||
<Inset side={"left"} clip={"padding-box"}>
|
||||
<img
|
||||
className="w-full h-72"
|
||||
src={`https://picsum.photos/seed/${seed}/550/288?grayscale`}
|
||||
alt="Bold typography"
|
||||
/>
|
||||
</Inset>
|
||||
</Box>
|
||||
|
||||
<Flex
|
||||
direction={"column"}
|
||||
className="justify-between flex-1 w-full px-4 pt-2"
|
||||
>
|
||||
<Heading>{props.title}</Heading>
|
||||
|
||||
<Flex gap={"2"} className="items-end justify-start flex-1">
|
||||
<Tooltip content={`Written at`}>
|
||||
<Flex className="items-center gap-2">
|
||||
<CalendarIcon className="size-6" />
|
||||
<Text
|
||||
size={{
|
||||
sm: "4",
|
||||
md: "5",
|
||||
lg: "6",
|
||||
}}
|
||||
weight={"medium"}
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
{`${parsedDate}`}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Heading,
|
||||
ScrollArea,
|
||||
Separator,
|
||||
Text,
|
||||
} from "@radix-ui/themes";
|
||||
import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
|
||||
import { useInfiniteQuery } from "@tanstack/react-query";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
@ -14,73 +7,74 @@ import { SelectedPostsResponse } from "../../@types/PostTypes";
|
||||
import { axiosLocalhost } from "../../api/axios/axios";
|
||||
import PostCard from "./PostCard/PostCard";
|
||||
|
||||
const LIMIT = 5;
|
||||
const LIMIT = 7;
|
||||
|
||||
export default function RandomPostsPage() {
|
||||
const { t } = useTranslation();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [ref, inView] = useInView();
|
||||
const [ref, inView] = useInView();
|
||||
|
||||
const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
|
||||
queryKey: [`random_post_inf`],
|
||||
queryFn: async ({ pageParam }): Promise<SelectedPostsResponse> => {
|
||||
const response = await axiosLocalhost.get(
|
||||
`/posts/random?limit=${LIMIT}&offset=${pageParam}`
|
||||
);
|
||||
const { data, isFetching, fetchNextPage, hasNextPage } = useInfiniteQuery({
|
||||
queryKey: [`random_post_inf`],
|
||||
queryFn: async ({ pageParam }): Promise<SelectedPostsResponse> => {
|
||||
const response = await axiosLocalhost.get(
|
||||
`/posts/random?limit=${LIMIT}&offset=${pageParam}`
|
||||
);
|
||||
|
||||
return response.data as SelectedPostsResponse;
|
||||
},
|
||||
initialPageParam: 0,
|
||||
getPreviousPageParam: (lastPage) =>
|
||||
lastPage.prev_page_index < 0 ? undefined : lastPage.prev_page_index,
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.next_page_index < 0 ? undefined : lastPage.next_page_index,
|
||||
});
|
||||
return response.data as SelectedPostsResponse;
|
||||
},
|
||||
initialPageParam: 0,
|
||||
getPreviousPageParam: (lastPage) =>
|
||||
lastPage.prev_page_index < 0 ? undefined : lastPage.prev_page_index,
|
||||
getNextPageParam: (lastPage) =>
|
||||
lastPage.next_page_index < 0 ? undefined : lastPage.next_page_index,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
if (hasNextPage) fetchNextPage();
|
||||
}
|
||||
}, [inView]);
|
||||
useEffect(() => {
|
||||
if (inView) {
|
||||
if (hasNextPage) fetchNextPage();
|
||||
}
|
||||
}, [inView]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex direction={"column"} className="w-full mx-auto overflow-hidden max-w-pc-width ">
|
||||
<Heading size={"9"} weight={"regular"} className="text-center">
|
||||
{t("discover")}
|
||||
</Heading>
|
||||
return (
|
||||
<>
|
||||
<ScrollArea>
|
||||
<Flex
|
||||
direction={"column"}
|
||||
className="w-full overflow-hidden sm:mx-auto max-w-pc-width "
|
||||
>
|
||||
<Flex direction={"column"} gap={"4"}>
|
||||
{data?.pages.map((post, i) => {
|
||||
return (
|
||||
<Flex direction={"column"} gap={"4"} key={`${i}`}>
|
||||
{post.selected_posts.map((post, j) => {
|
||||
return (
|
||||
<div key={`${j}${post.post_id}`}>
|
||||
<PostCard {...post} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
);
|
||||
})}
|
||||
|
||||
<Separator size={"4"} className="my-8" />
|
||||
<ScrollArea>
|
||||
{data?.pages.map((post, i) => {
|
||||
return (
|
||||
<div key={i}>
|
||||
{post.selected_posts.map((post, i) => {
|
||||
return (
|
||||
<div key={`${i}${post.post_id}`}>
|
||||
<PostCard {...post} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<Box ref={ref} className="w-full mb-4 text-center">
|
||||
{isFetching ? (
|
||||
<Text>Loading more...</Text>
|
||||
) : hasNextPage ? (
|
||||
<Text
|
||||
className="cursor-pointer"
|
||||
onClick={() => fetchNextPage()}
|
||||
>
|
||||
Load more posts
|
||||
</Text>
|
||||
) : (
|
||||
<Text>No more posts to load</Text>
|
||||
)}
|
||||
</Box>
|
||||
</ScrollArea>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
<Box ref={ref} className="w-full mb-4 text-center">
|
||||
{isFetching ? (
|
||||
<Text>Loading more...</Text>
|
||||
) : hasNextPage ? (
|
||||
<Text
|
||||
className="cursor-pointer"
|
||||
onClick={() => fetchNextPage()}
|
||||
>
|
||||
Load more posts
|
||||
</Text>
|
||||
) : (
|
||||
<Text>No more posts to load</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</ScrollArea>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Pochaevsk&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@ -15,9 +16,8 @@
|
||||
}
|
||||
|
||||
.radix-themes {
|
||||
--default-font-family: "Times New Roman"; ;
|
||||
|
||||
--heading-font-family: "Edu AU VIC WA NT Pre", cursive;
|
||||
--default-font-family: "Pochaevsk", sans-serif;
|
||||
--heading-font-family: "Edu AU VIC WA NT Pre", cursive;
|
||||
/* Your custom font for <Heading> components */
|
||||
--code-font-family:
|
||||
/* Your custom font for <Code> components */
|
||||
|
||||
@ -66,7 +66,7 @@ export default function MainPage() {
|
||||
<NavBar />
|
||||
<Box
|
||||
flexGrow={"1"}
|
||||
className="flex flex-col overflow-hidden"
|
||||
className="flex flex-col mx-4 overflow-hidden"
|
||||
>
|
||||
<Outlet />
|
||||
</Box>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user