@@ -65,11 +81,7 @@ const Editor = forwardRef((props: TEditor) => {
value={value}
ref={editor}
modules={modules}
-
-
onChange={changeHandler}
-
-
theme="snow"
placeholder="Type your thoughts here..."
/>
diff --git a/enshi/src/Components/NavBar/NavBar.tsx b/enshi/src/Components/NavBar/NavBar.tsx
index bd60301..17472c6 100644
--- a/enshi/src/Components/NavBar/NavBar.tsx
+++ b/enshi/src/Components/NavBar/NavBar.tsx
@@ -1,20 +1,15 @@
-import {
- Container,
-} from "@radix-ui/themes";
-import SearchField from "./SearchField/SearchField";
-import UserButton from "./UserButton/UserButton";
import CustomNavigationMenu from "./NavigationMenu/NavigationMenu";
+import RightButtonBar from "./RightButtonBar/RightButtonBar";
+import SearchField from "./SearchField/SearchField";
export default function NavBar() {
return (
-
-
-
+
-
+
+
);
-}
\ No newline at end of file
+}
diff --git a/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx b/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
index e82d496..56e8b9a 100644
--- a/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
+++ b/enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx
@@ -1,15 +1,19 @@
import * as NavigationMenu from "@radix-ui/react-navigation-menu";
-import { useThemeContext, Button, Heading } from "@radix-ui/themes";
-import { useNavigate, useLocation } from "react-router-dom";
+import { Button, Heading, useThemeContext } from "@radix-ui/themes";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
export default function CustomNavigationMenu() {
+
+ const {t} = useTranslation()
+
return (
-
diff --git a/enshi/src/Components/NavBar/RightButtonBar/CreatePostButton/CreatePostButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/CreatePostButton/CreatePostButton.tsx
new file mode 100644
index 0000000..eaaaaa6
--- /dev/null
+++ b/enshi/src/Components/NavBar/RightButtonBar/CreatePostButton/CreatePostButton.tsx
@@ -0,0 +1,17 @@
+import { PlusIcon } from "@radix-ui/react-icons";
+import { Button, Text } from "@radix-ui/themes";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+export default function CreatePostButton() {
+ const { t } = useTranslation();
+
+ return (
+
+
+ {t("createPost")}
+
+
+ );
+}
diff --git a/enshi/src/Components/NavBar/RightButtonBar/RightButtonBar.tsx b/enshi/src/Components/NavBar/RightButtonBar/RightButtonBar.tsx
new file mode 100644
index 0000000..3c1ff38
--- /dev/null
+++ b/enshi/src/Components/NavBar/RightButtonBar/RightButtonBar.tsx
@@ -0,0 +1,12 @@
+import CreatePostButton from "./CreatePostButton/CreatePostButton";
+import UserButton from "./UserButton/UserButton";
+
+
+export default function RightButtonBar() {
+ return (
+
+
+ )
+}
\ No newline at end of file
diff --git a/enshi/src/Components/NavBar/UserButton/UserButton.tsx b/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx
similarity index 66%
rename from enshi/src/Components/NavBar/UserButton/UserButton.tsx
rename to enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx
index c9c1868..ce9ca61 100644
--- a/enshi/src/Components/NavBar/UserButton/UserButton.tsx
+++ b/enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx
@@ -7,14 +7,16 @@ import {
import { DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes";
import { Icon } from "@radix-ui/themes/dist/esm/components/callout.js";
import { useAtomValue } from "jotai";
-import { userAtom } from "../../../AtomStore/AtomStore";
+import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
+import { userAtom } from "../../../../AtomStore/AtomStore";
export default function UserButton() {
const user = useAtomValue(userAtom);
+ const { t } = useTranslation();
return (
-
+
@@ -24,24 +26,26 @@ export default function UserButton() {
-
- Profile
+ {t("profile")}
-
-
-
- Your blogs
-
+
+
+
+ {t("yourBlogs")}
+
+
- Log out
+ {t("signOut")}
) : (
-
-
-
- Log in
-
+
+
+
+ {t("signIn")}
+
+
)}
diff --git a/enshi/src/Components/NavBar/SearchField/SearchField.tsx b/enshi/src/Components/NavBar/SearchField/SearchField.tsx
index 74cf6fb..02dbf95 100644
--- a/enshi/src/Components/NavBar/SearchField/SearchField.tsx
+++ b/enshi/src/Components/NavBar/SearchField/SearchField.tsx
@@ -6,9 +6,9 @@ export default function SearchField() {
const {t} = useTranslation()
return (
-
+
diff --git a/enshi/src/Components/ToastProvider/ToastProvider.tsx b/enshi/src/Components/ToastProvider/ToastProvider.tsx
new file mode 100644
index 0000000..51ec9a7
--- /dev/null
+++ b/enshi/src/Components/ToastProvider/ToastProvider.tsx
@@ -0,0 +1,44 @@
+import { Cross1Icon } from "@radix-ui/react-icons";
+import * as Toast from "@radix-ui/react-toast";
+import { Card, Text } from "@radix-ui/themes";
+import { useAtomValue } from "jotai";
+import React from "react";
+import { toastAtom } from "../../AtomStore/AtomStore";
+
+export default function ToastProvider(props: React.PropsWithChildren) {
+ const toastsToRender = useAtomValue(toastAtom);
+
+ return (
+
+ {props.children}
+
+ {toastsToRender.map((toast) => {
+ return (
+
+
+
+
+ {toast.title}
+
+
+
+ {toast.description}
+
+
+
+
+
+ );
+ })}
+
+
+ );
+}
diff --git a/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx b/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx
new file mode 100644
index 0000000..05091f5
--- /dev/null
+++ b/enshi/src/Components/UserNicknameLink/UserNicknameLink.tsx
@@ -0,0 +1,33 @@
+import { Skeleton, Text } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
+import { Link } from "react-router-dom";
+import { axiosLocalhost } from "../../api/axios/axios";
+
+type TUserNicknameLink = {
+ userId: string;
+};
+
+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;
+ },
+ });
+
+ if (isPending)
+ return (
+
+ @Nickname
+
+ );
+
+ return (
+ @{data}
+
+ );
+}
diff --git a/enshi/src/Pages/AuthPageWrapper/AuthPageWrapper.tsx b/enshi/src/Pages/AuthPageWrapper/AuthPageWrapper.tsx
new file mode 100644
index 0000000..3418d83
--- /dev/null
+++ b/enshi/src/Pages/AuthPageWrapper/AuthPageWrapper.tsx
@@ -0,0 +1,22 @@
+import { Container, Text } from "@radix-ui/themes";
+import { t } from "i18next";
+import { useAtomValue } from "jotai";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { userAtom } from "../../AtomStore/AtomStore";
+
+export default function AuthPageWrapper(props: React.PropsWithChildren) {
+ const user = useAtomValue(userAtom);
+ const navigate = useNavigate();
+
+ if (!user) {
+ navigate("/login");
+ return (
+
+ {t("errors.unauthorized")}
+
+ );
+ }
+
+ return props.children;
+}
diff --git a/enshi/src/Pages/BlogPage/BlogPage.tsx b/enshi/src/Pages/BlogPage/BlogPage.tsx
new file mode 100644
index 0000000..fc1ae4a
--- /dev/null
+++ b/enshi/src/Pages/BlogPage/BlogPage.tsx
@@ -0,0 +1,13 @@
+import { Box } from '@radix-ui/themes'
+import { useParams } from 'react-router-dom'
+
+
+export default function BlogPage() {
+ const queryParams = useParams()
+
+ return (
+
+
+
+ )
+}
diff --git a/enshi/src/Pages/LoginRegisterPage/LoginPage/LoginPage.tsx b/enshi/src/Pages/LoginRegisterPage/LoginPage/LoginPage.tsx
new file mode 100644
index 0000000..2b1e3db
--- /dev/null
+++ b/enshi/src/Pages/LoginRegisterPage/LoginPage/LoginPage.tsx
@@ -0,0 +1,182 @@
+import * as Form from "@radix-ui/react-form";
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { Button, Card, Heading, Text, TextField } from "@radix-ui/themes";
+import { useMutation } from "@tanstack/react-query";
+import { t } from "i18next";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { axiosLocalhost } from "../../../api/axios/axios";
+import { userAtom } from "../../../AtomStore/AtomStore";
+import UseCapsLock from "../../../hooks/useCapsLock";
+import ShowPasswordButton from "../ShowPasswordButton/ShowPasswordButton";
+
+type TLoginData = {
+ username: string;
+ password: string;
+};
+
+export default function LoginPage() {
+ const [userAtomValue, setUserAtom] = useAtom(userAtom);
+ const [showPassword, setShowPassword] = useState(false);
+ const { isCapsLockOn } = UseCapsLock();
+ const [isError, setIsError] = useState(false);
+
+ const navigate = useNavigate();
+
+ const logInMutation = useMutation({
+ mutationFn: async (data: TLoginData) => {
+ let response = await axiosLocalhost.post(
+ "/login",
+ JSON.stringify(data)
+ );
+ setUserAtom({
+ username: response.data.username,
+ isAdmin: false,
+ id: response.data.id,
+ });
+ },
+
+ onError: (error, _variables, _context) => {
+ console.log(error);
+ setIsError(true);
+ },
+
+ onSuccess: () => {
+ let isAdminFunc = async () => {
+ let response = await axiosLocalhost.get("/admin/check");
+ if (response.status === 200) {
+ setUserAtom({
+ username: userAtomValue?.username || "",
+ isAdmin: true,
+ id: userAtomValue?.id,
+ });
+ }
+ };
+
+ isAdminFunc();
+
+ navigate("/");
+ },
+ });
+
+ return (
+
+
+ {t("loginForm")}
+
+ {
+ e.preventDefault();
+ let formData = new FormData(
+ document.querySelector("form") as HTMLFormElement
+ );
+
+ let loginData: TLoginData = {
+ password: (formData.get("password") as string) || "",
+ username: (formData.get("username") as string) || "",
+ };
+
+ logInMutation.mutate(loginData);
+ }}
+ >
+
+
+
+ {t("username")}
+
+
+ {t("errors.enterUsername")}
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {t("password")}
+
+
+ {t("errors.enterPassword")}
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+ {t("capsLogWarning")}
+
+
+
+
+ {t("errors.invalidLoginData")}
+
+
+
+
+ {t("submit")}
+
+
+
+
+ {t("suggestRegister")}{" "}
+ {t("register")}
+ {" "}
+ {t("now")}
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/LoginRegisterPage/PostRedactor/PostRedactor.tsx b/enshi/src/Pages/LoginRegisterPage/PostRedactor/PostRedactor.tsx
new file mode 100644
index 0000000..50d1e9b
--- /dev/null
+++ b/enshi/src/Pages/LoginRegisterPage/PostRedactor/PostRedactor.tsx
@@ -0,0 +1,76 @@
+import { Box, Container, Flex, Spinner } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
+import { useParams } from "react-router-dom";
+import { axiosLocalhost } from "../../../api/axios/axios";
+import Editor from "../../../Components/Editor/Editor";
+import SubmitChangesButton from "./SubmitChangesButton/SubmitChangesButton";
+
+export default function PostRedactor() {
+ const [contentValue, setContentValue] = useState("");
+ const [titleValue, setTitleValue] = useState("");
+
+ const queryParams = useParams();
+
+ const { isPending } = useQuery({
+ queryKey: ["changePostKey", queryParams.postId],
+ queryFn: async () => {
+ try {
+ const response = await axiosLocalhost.get(
+ `/posts/${queryParams.postId}`
+ );
+
+ setTitleValue(response.data["title"]);
+ setContentValue(response.data["content"]);
+
+ return response.data;
+ } catch (error) {
+ console.log(error);
+
+ return error;
+ }
+ },
+ gcTime: 0,
+ refetchOnMount: true
+ });
+
+ return (
+ <>
+
+
+
+
+
+
+ {isPending ? (
+
+
+
+
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/LoginRegisterPage/PostRedactor/SubmitChangesButton/SubmitChangesButton.tsx b/enshi/src/Pages/LoginRegisterPage/PostRedactor/SubmitChangesButton/SubmitChangesButton.tsx
new file mode 100644
index 0000000..070448d
--- /dev/null
+++ b/enshi/src/Pages/LoginRegisterPage/PostRedactor/SubmitChangesButton/SubmitChangesButton.tsx
@@ -0,0 +1,60 @@
+import { Button } from "@radix-ui/themes";
+import { useMutation } from "@tanstack/react-query";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import { axiosLocalhost } from "../../../../api/axios/axios";
+import useToast from "../../../../hooks/useToast";
+
+type TSubmitChangesButton = {
+ className: string;
+ titleValue: string;
+ contentValue: string;
+};
+
+export default function SubmitChangesButton(props: TSubmitChangesButton) {
+ const { t } = useTranslation();
+
+ const [isDisabled, setIsDisabled] = useState(false);
+ const createToast = useToast();
+
+ const navigate = useNavigate();
+ const queryParams = useParams();
+
+ const postMutation = useMutation({
+ mutationFn: async () => {
+ if (!props.titleValue) throw new Error("no title provided");
+ if (!props.contentValue || props.contentValue === "
")
+ throw new Error("no content provided");
+
+ axiosLocalhost.put(`/posts/${queryParams["postId"]}`, {
+ title: props.titleValue,
+ content: props.contentValue,
+ });
+ },
+ onMutate: () => {
+ setIsDisabled(true);
+ },
+ onError: () => {
+ setIsDisabled(false);
+ },
+ onSuccess: () => {
+ createToast({title: "Post has been changed!"})
+ navigate("/");
+ },
+ });
+
+ return (
+ {
+ postMutation.mutate();
+ }}
+ className={props.className}
+ variant="soft"
+ size={"4"}
+ disabled={isDisabled}
+ >
+ {t("updatePost")}
+
+ );
+}
diff --git a/enshi/src/Pages/LoginRegisterPage/RegisterPage/RegisterPage.tsx b/enshi/src/Pages/LoginRegisterPage/RegisterPage/RegisterPage.tsx
new file mode 100644
index 0000000..4702221
--- /dev/null
+++ b/enshi/src/Pages/LoginRegisterPage/RegisterPage/RegisterPage.tsx
@@ -0,0 +1,265 @@
+import * as Form from "@radix-ui/react-form";
+import { CrossCircledIcon } from "@radix-ui/react-icons";
+import { Button, Card, Heading, Text, TextField } from "@radix-ui/themes";
+import { useMutation } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useNavigate } from "react-router-dom";
+import { axiosLocalhost } from "../../../api/axios/axios";
+import { userAtom } from "../../../AtomStore/AtomStore";
+import UseCapsLock from "../../../hooks/useCapsLock";
+import ShowPasswordButton from "../ShowPasswordButton/ShowPasswordButton";
+
+type TRegisterData = {
+ username: string;
+ password: string;
+ email: string;
+};
+
+export default function RegisterPage() {
+ const setUserAtom = useSetAtom(userAtom)
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfPassword, setShowConfPassword] = useState(false);
+ const { isCapsLockOn } = UseCapsLock();
+
+ const { t } = useTranslation();
+
+ const [isError, setIsError] = useState(false);
+
+ const navigate = useNavigate();
+
+ const registerMutation = useMutation({
+ mutationFn: async (data: TRegisterData) => {
+ let response = await axiosLocalhost.post("/users", JSON.stringify(data));
+ setUserAtom({
+ username: response.data.username,
+ isAdmin: false,
+ id: response.data.id,
+ })
+ },
+
+ onError: (error, _variables, _context) => {
+ console.log(error);
+ setIsError(true);
+ },
+
+ onSuccess: () => {
+ navigate("/");
+ },
+ });
+
+ return (
+
+
+ {t("registerForm")}
+
+ {
+ e.preventDefault();
+ let formData = new FormData(
+ document.querySelector("form") as HTMLFormElement
+ );
+
+ let registerData: TRegisterData = {
+ password: (formData.get("password") as string) || "",
+ username: (formData.get("username") as string) || "",
+ email: (formData.get("email") as string) || "",
+ };
+
+ registerMutation.mutate(registerData);
+ }}
+ >
+
+
+
+ {t("username")}
+
+
+ {t("errors.enterUsername")}
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {t("email")}
+
+
+ {t("errors.enterEmail")}
+
+
+ {t("errors.invalidEmail")}
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {t("password")}
+
+
+ {t("errors.enterPassword")}
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+ {t("capsLogWarning")}
+
+
+
+
+
+
+ {t("confirmPassword")}
+
+
+ {t("errors.enterPassword")}
+
+
+ value !== formData.get("password")
+ }
+ >
+
+ {t("errors.passwordsMismatch")}
+
+
+
+
+
+
+ {(validity) => (
+
+
+ )}
+
+
+
+
+ {t("capsLogWarning")}
+
+
+
+
+ {t("errors.invalidRegisterData")}
+
+
+
+
+ {t("submit")}
+
+
+
+
+ {t("alreadyRegistered")}{" "}
+ {t("logIn")}
+ {" "}
+ {t("now")}
+
+
+
+ {t("byPressingTheButton")}{" "}
+ {t("termsOfService")} .
+
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/LoginRegisterPage/ShowPasswordButton/ShowPasswordButton.tsx b/enshi/src/Pages/LoginRegisterPage/ShowPasswordButton/ShowPasswordButton.tsx
new file mode 100644
index 0000000..e7bd092
--- /dev/null
+++ b/enshi/src/Pages/LoginRegisterPage/ShowPasswordButton/ShowPasswordButton.tsx
@@ -0,0 +1,40 @@
+import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
+import { IconButton, Tooltip } from "@radix-ui/themes";
+import { Dispatch, SetStateAction } from "react";
+
+type TShowPasswordButton = {
+ isShown: boolean;
+ setIsShown: Dispatch>;
+};
+
+export default function ShowPasswordButton({ isShown, setIsShown }: TShowPasswordButton) {
+ return (
+
+
+ {isShown ? (
+ {
+ setIsShown(!isShown);
+ }}
+ size={"1"}
+ className="rounded-full"
+ variant="soft"
+ >
+
+ ) : (
+ setIsShown(!isShown)}
+ size={"1"}
+ className="rounded-full"
+ variant="soft"
+ >
+
+ )}
+
+
+ );
+}
\ No newline at end of file
diff --git a/enshi/src/Pages/MainPage/MainPage.tsx b/enshi/src/Pages/MainPage/MainPage.tsx
deleted file mode 100644
index 905549a..0000000
--- a/enshi/src/Pages/MainPage/MainPage.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { Outlet } from "react-router-dom";
-import NavBar from "../../Components/NavBar/NavBar";
-import { axiosLocalhost } from "../../api/axios/axios";
-import { Container } from "@radix-ui/themes";
-
-export default function MainPage() {
- return (
- <>
- {
- let d = await axiosLocalhost.get("getCookie");
- console.log(d.data);
- }}
- >
- Click for cookie test
-
-
- );
-}
diff --git a/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx b/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx
new file mode 100644
index 0000000..eb677ba
--- /dev/null
+++ b/enshi/src/Pages/PostCreatorPage/PostCreatorPage.tsx
@@ -0,0 +1,43 @@
+import { Box, Container, Flex } from "@radix-ui/themes";
+import { useAtom, useSetAtom } from "jotai";
+import {
+ postCreationAtom,
+ postCreationTitleAtom
+} from "../../AtomStore/AtomStore";
+import Editor from "../../Components/Editor/Editor";
+import SubmitPostButton from "./SubmitPostButton/SubmitPostButton";
+
+export default function PostCreatorPage() {
+ const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom);
+ const setContentValue = useSetAtom(postCreationAtom);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx b/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx
new file mode 100644
index 0000000..201d22d
--- /dev/null
+++ b/enshi/src/Pages/PostCreatorPage/SubmitPostButton/SubmitPostButton.tsx
@@ -0,0 +1,64 @@
+import { Button } from "@radix-ui/themes";
+import { useMutation } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { axiosLocalhost } from "../../../api/axios/axios";
+import {
+ postCreationAtom,
+ postCreationTitleAtom,
+} from "../../../AtomStore/AtomStore";
+
+type TSubmitPostButton = {
+ className: string;
+};
+
+export default function SubmitPostButton(props: TSubmitPostButton) {
+ const { t } = useTranslation();
+
+ const [isDisabled, setIsDisabled] = useState(false);
+
+ const [contentValue, setContentValue] = useAtom(postCreationAtom);
+ const [titleValue, setTitleValue] = useAtom(postCreationTitleAtom);
+
+ const navigate = useNavigate();
+
+ const postMutation = useMutation({
+ mutationFn: async () => {
+ if (!titleValue) throw new Error("no title provided");
+ if (!contentValue || contentValue === "
")
+ throw new Error("no content provided");
+
+ axiosLocalhost.post("/posts", {
+ title: titleValue,
+ content: contentValue,
+ });
+ },
+ onMutate: () => {
+ setIsDisabled(true);
+ },
+ onError: () => {
+ setIsDisabled(false);
+ },
+ onSuccess: () => {
+ setContentValue("");
+ setTitleValue("");
+ navigate("/");
+ },
+ });
+
+ return (
+ {
+ postMutation.mutate();
+ }}
+ className={props.className}
+ variant="soft"
+ size={"4"}
+ disabled={isDisabled}
+ >
+ {t("submit")}
+
+ );
+}
diff --git a/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx b/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx
new file mode 100644
index 0000000..2b29f64
--- /dev/null
+++ b/enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx
@@ -0,0 +1,30 @@
+import { ImageIcon } from "@radix-ui/react-icons";
+import { Box, Card, Heading } from "@radix-ui/themes";
+import { useNavigate } from "react-router-dom";
+import { GetRandomPostsRow } from "../../../@types/PostTypes";
+
+type TPostCard = {
+ post: GetRandomPostsRow;
+};
+
+export default function PostCard({ post }: TPostCard) {
+ const navigate = useNavigate()
+
+ const clickHandler = () => {
+ navigate(`/posts/${post.post_id.toString()}`)
+ }
+
+ return (
+
+
+
+
+
+
+ {post.title}
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx b/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx
new file mode 100644
index 0000000..605e04f
--- /dev/null
+++ b/enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx
@@ -0,0 +1,67 @@
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { Container, Flex, Heading, Separator } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { GetRandomPostsRow } from "../../@types/PostTypes";
+import { axiosLocalhost } from "../../api/axios/axios";
+import PostCard from "./PostCard/PostCard";
+
+const LIMIT = 10;
+
+export default function RandomPostsPage() {
+ const {t} = useTranslation()
+
+ const { data, refetch } = useQuery({
+ queryKey: ["random_posts_key"],
+ queryFn: async () => {
+ try {
+ const response = await axiosLocalhost.get(
+ `/posts/random?limit=${LIMIT}`
+ );
+
+ return response.data as GetRandomPostsRow[];
+ } catch (error) {
+ console.log(`Something went wrong`);
+ }
+
+ return [];
+ },
+ });
+
+ return (
+ <>
+
+
+ {t("discover")}
+
+
+
+
+ {data?.map((post, i) => {
+ return (
+
+
+ );
+ })}
+
+
+
+ {/*
+ */}
+ {/*
+
+
+ );
+}
diff --git a/enshi/src/Pages/UserBlogsPage/SkeletonBoxes/SkeletonBoxes.tsx b/enshi/src/Pages/UserBlogsPage/SkeletonBoxes/SkeletonBoxes.tsx
new file mode 100644
index 0000000..2419e98
--- /dev/null
+++ b/enshi/src/Pages/UserBlogsPage/SkeletonBoxes/SkeletonBoxes.tsx
@@ -0,0 +1,17 @@
+import { Box, Skeleton } from "@radix-ui/themes";
+
+export default function SkeletonBoxes() {
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
diff --git a/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx b/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx
new file mode 100644
index 0000000..599ae6d
--- /dev/null
+++ b/enshi/src/Pages/UserBlogsPage/UserBlogsPage.tsx
@@ -0,0 +1,126 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Cross2Icon, PlusIcon } from "@radix-ui/react-icons";
+import {
+ Box,
+ Button,
+ 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";
+import { JSONWithInt64 } from "../../utils/idnex";
+import SkeletonBoxes from "./SkeletonBoxes/SkeletonBoxes";
+
+export default function UserBlogsPage() {
+ const { data, isPending, isFetching } = useQuery({
+ queryKey: ["userBlogs"],
+ queryFn: async () => {
+ const response = await axiosLocalhost.get("/user/blogs", {
+ transformResponse: [(data) => data],
+ });
+
+ let temp = JSONWithInt64(response.data);
+
+ return temp as any[];
+ },
+ });
+
+ if (isPending)
+ return (
+
+
+ );
+
+ return (
+
+
+
+
+ Your blogs
+
+
+
+
+ {}}>
+
+
+
+
+
+ Create blog
+
+
+ Create your new blog.
+
+
+
+ Blog title
+
+
+
+
+ Description
+
+
+
+
+
+
+ Create blog
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/enshi/src/api/axios/axios.ts b/enshi/src/api/axios/axios.ts
index 1a352da..858e9a0 100644
--- a/enshi/src/api/axios/axios.ts
+++ b/enshi/src/api/axios/axios.ts
@@ -2,7 +2,7 @@ import axios from "axios";
export const axiosLocalhost = axios.create(
{
- baseURL: `http://localhost:9876/`,
+ baseURL: `http://127.0.0.1:9876/`,
withCredentials: true,
headers: {
diff --git a/enshi/src/constants/textForSkeleton.ts b/enshi/src/constants/textForSkeleton.ts
new file mode 100644
index 0000000..b166637
--- /dev/null
+++ b/enshi/src/constants/textForSkeleton.ts
@@ -0,0 +1,12 @@
+export const pText = `The goal of typography is to relate font size, line
+ height, and line width in a proportional way that
+ maximizes beauty and makes reading easier and more
+ pleasant. The question is: What proportion(s) will give
+ us the best results? The golden ratio is often observed
+ in nature where beauty and utility intersect; perhaps we
+ can use this “divine” proportion to enhance these
+ attributes in our typography.`;
+
+export const headerLong = `THUS SHU SHU HDFQIUWKHFQWHF KJQWHqwfiqfquwdhqwjdk`;
+
+export const headerShort = `THUS SHU SHU HDFQIUWKHFQWHF`;
diff --git a/enshi/src/hooks/useCapsLock.tsx b/enshi/src/hooks/useCapsLock.tsx
new file mode 100644
index 0000000..04abe26
--- /dev/null
+++ b/enshi/src/hooks/useCapsLock.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export default function UseCapsLock() {
+
+ const [isCapsLockOn, setIsCapsLockOn] = useState(false);
+
+ useEffect(() => {
+ const f = (e: KeyboardEvent) => {
+ if (e.getModifierState("CapsLock")) {
+ setIsCapsLockOn(true);
+ } else {
+ setIsCapsLockOn(false);
+ }
+ };
+
+ document.addEventListener("keydown", f);
+
+ return () => {
+ document.removeEventListener("keydown", f);
+ };
+ }, []);
+
+
+ return {
+ isCapsLockOn
+ }
+}
\ No newline at end of file
diff --git a/enshi/src/hooks/useToast.tsx b/enshi/src/hooks/useToast.tsx
new file mode 100644
index 0000000..b4fd553
--- /dev/null
+++ b/enshi/src/hooks/useToast.tsx
@@ -0,0 +1,7 @@
+import { useSetAtom } from "jotai";
+import { setToastAtom } from "../AtomStore/AtomStore";
+
+export default function useToast() {
+ const createToast = useSetAtom(setToastAtom);
+ return createToast;
+}
diff --git a/enshi/src/index.css b/enshi/src/index.css
index 5238975..574086b 100644
--- a/enshi/src/index.css
+++ b/enshi/src/index.css
@@ -4,6 +4,11 @@
@tailwind components;
@tailwind utilities;
+@layer components {
+ .center-of-parent {
+ @apply absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%];
+ }
+}
.radix-themes {
--default-font-family: "Times New Roman"; ;
diff --git a/enshi/src/layout/MainPage/MainPage.tsx b/enshi/src/layout/MainPage/MainPage.tsx
new file mode 100644
index 0000000..fe64d01
--- /dev/null
+++ b/enshi/src/layout/MainPage/MainPage.tsx
@@ -0,0 +1,74 @@
+import { Box, Flex, Spinner } from "@radix-ui/themes";
+import { useQuery } from "@tanstack/react-query";
+import { useSetAtom } from "jotai";
+import { Outlet } from "react-router-dom";
+import { axiosLocalhost } from "../../api/axios/axios";
+import { userAtom } from "../../AtomStore/AtomStore";
+import NavBar from "../../Components/NavBar/NavBar";
+
+const REFETCH_INTERVAL_IN_MINUTES = 5;
+const RETRY_INTERVAL_IN_SECONDS = 1;
+
+const SECONDS_IN_MINUTE = 60;
+const MILLS_IN_SECOND = 1000;
+
+const TAGS = Array.from({ length: 50 }).map(
+ (_, i, a) => `v1.2.0-beta.${a.length - i}`
+);
+
+export default function MainPage() {
+ const setUserData = useSetAtom(userAtom);
+
+ const { isPending } = useQuery({
+ queryKey: ["authKey"],
+ queryFn: async () => {
+ try {
+ const response = await axiosLocalhost.get("/auth/check");
+
+ setUserData({
+ isAdmin: response.data["is_admin"],
+ username: response.data["username"],
+ id: response.data["id"],
+ });
+ return true;
+ } catch (error) {
+ setUserData(undefined);
+ return false;
+ }
+ },
+ refetchInterval:
+ REFETCH_INTERVAL_IN_MINUTES * SECONDS_IN_MINUTE * MILLS_IN_SECOND,
+ refetchOnWindowFocus: true,
+ refetchOnReconnect: true,
+ gcTime: 10,
+
+ retry: 3,
+ retryDelay: (attempt) =>
+ attempt * RETRY_INTERVAL_IN_SECONDS * MILLS_IN_SECOND,
+ });
+
+ return (
+ <>
+ {isPending ? (
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/enshi/src/locale/en.ts b/enshi/src/locale/en.ts
index bd15612..caacecb 100644
--- a/enshi/src/locale/en.ts
+++ b/enshi/src/locale/en.ts
@@ -1,6 +1,53 @@
const en = {
hello: "hello!",
search: "Search...",
-}
+ username: "Username",
+ email: "Email",
+ password: "Password",
+ confirmPassword: "Confirm password",
+ submit: "Submit",
-export default en;
\ No newline at end of file
+ createPost: "Write post",
+
+ profile: "Profile",
+ yourBlogs: "Your blogs",
+
+ signIn: "Log in",
+ signOut: "Sign out",
+
+ capsLogWarning: "CapsLock is on",
+
+ registerForm: "Register",
+ loginForm: "Log in",
+
+ alreadyRegistered: "Already registered?",
+
+ suggestRegister: "Don't have an account?",
+ register: "Register",
+ now: "now!",
+
+ logIn: "Log in",
+
+ updatePost: "Update",
+
+ byPressingTheButton: "By pressing the submit button you agree with our",
+ termsOfService: "Terms Of Service",
+
+ discover: "Discover something new...",
+
+ home: "Home",
+ following: "Following",
+
+ errors: {
+ enterUsername: "Please enter your username",
+ enterEmail: "Please enter your email",
+ invalidEmail: "Please enter correct email",
+ enterPassword: "Please enter your password",
+ passwordsMismatch: "Passwords must be the same",
+ invalidLoginData: "Invalid username or password",
+ invalidRegisterData: "Invalid register data",
+ unauthorized: "You need to be authorized to do that",
+ },
+};
+
+export default en;
diff --git a/enshi/src/locale/ru.ts b/enshi/src/locale/ru.ts
index abba300..b50c34f 100644
--- a/enshi/src/locale/ru.ts
+++ b/enshi/src/locale/ru.ts
@@ -1,6 +1,56 @@
+
const ru = {
hello: "Привет!",
search: "Поиск...",
-}
+ username: "Имя пользователя",
+ email: "Электронная почта",
+ password: "Пароль",
+ confirmPassword: "Подтвердите пароль",
+ submit: "Подтвердить",
-export default ru;
\ No newline at end of file
+ createPost: "Написать пост",
+
+ profile: "Профиль",
+ yourBlogs: "Ваши блоги",
+
+ signIn: "Войти",
+ signOut: "Выйти",
+
+ capsLogWarning: "Включён CapsLock",
+
+ registerForm: "Регистрация",
+ loginForm: "Вход",
+
+ alreadyRegistered: "Уже есть аккаунт?",
+
+ suggestRegister: "Не зарегистрированы?",
+ register: "Создайте аккаунт",
+ now: "сейчас!",
+
+ logIn: "Войдите",
+
+ byPressingTheButton: "Нажимая `Подтвердить`, вы соглашаетесь с нашими",
+ termsOfService: "Условиями предоставления услуг.",
+
+ updatePost: "Изменить",
+
+ discover: "Найдите что-то новое",
+
+ home: "Главная",
+ following: "Отслеживаемые",
+
+
+ errors: {
+ enterUsername: "Это обязательное поле",
+ enterEmail: "Это обязательное поле",
+ invalidEmail: "Некорректный адрес электронной почты",
+ enterPassword: "Пожалуйста, введите пароль",
+ passwordsMismatch: "Пароли должны быть одинаковыми",
+ invalidLoginData: "Неверное имя пользователя или пароль",
+ invalidRegisterData:
+ "Пользователь с таким адресом электронной почты или именем пользователя уже существует",
+ unauthorized: "Вы должны быть авторизованы, чтобы сделать это",
+ },
+};
+
+export default ru;
diff --git a/enshi/src/routes/routes.tsx b/enshi/src/routes/routes.tsx
index 8331bbb..ef8fa3e 100644
--- a/enshi/src/routes/routes.tsx
+++ b/enshi/src/routes/routes.tsx
@@ -1,7 +1,20 @@
-import { createRoutesFromElements, Route, useRouteError } from "react-router-dom"
-import MainPage from "../Pages/MainPage/MainPage"
-import {Text} from "@radix-ui/themes";
-
+import { Text } from "@radix-ui/themes";
+import {
+ createRoutesFromElements,
+ Outlet,
+ Route,
+ useRouteError,
+} from "react-router-dom";
+import ArticleViewer from "../Components/ArticleViewer/ArticleViewer";
+import MainPage from "../layout/MainPage/MainPage";
+import AuthPageWrapper from "../Pages/AuthPageWrapper/AuthPageWrapper";
+import BlogPage from "../Pages/BlogPage/BlogPage";
+import LoginPage from "../Pages/LoginRegisterPage/LoginPage/LoginPage";
+import PostRedactor from "../Pages/LoginRegisterPage/PostRedactor/PostRedactor";
+import RegisterPage from "../Pages/LoginRegisterPage/RegisterPage/RegisterPage";
+import PostCreatorPage from "../Pages/PostCreatorPage/PostCreatorPage";
+import RandomPostsPage from "../Pages/RandomPostsPage/RandomPostsPage";
+import UserBlogsPage from "../Pages/UserBlogsPage/UserBlogsPage";
function ErrorBoundary() {
let error = useRouteError();
@@ -12,16 +25,54 @@ function ErrorBoundary() {
export const routes = createRoutesFromElements(
<>
- Cringer path} />
+ Cringer path, but this a}
- >
+ path="a?/c"
+ element={
+
+ This page is yet to be created
+
+ }
+ />
+
+
+
+
+
+
+
+