cleaned up rykel's mess

client/src/components/NavigationBar.tsx

@@ -95,7 +95,7 @@ export default function NavigationBar() {
                   navigate("/community");
                 }}
               >
-                <p className="text-lg">Community</p>
+                <p className="text-lg">Community Forums</p>
               </Button>
             </div>
           </div>

client/src/icons.tsx

@@ -135,3 +135,136 @@ export const ArrowRightStartOnRectangleIcon = () => {
     </svg>
   );
 };
+
+export const EllipsisHorizontalIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
+      />
+    </svg>
+  );
+};
+
+export const PlusIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.7}
+      stroke="currentColor"
+      className="size-5"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 4.5v15m7.5-7.5h-15"
+      />
+    </svg>
+  );
+};
+
+export const ArrowUTurnLeftIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="black"
+      className="size-5"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3"
+      />
+    </svg>
+  );
+};
+
+export const MagnifyingGlassIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+      />
+    </svg>
+  );
+};
+
+export const XMarkIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18 18 6M6 6l12 12"
+      />
+    </svg>
+  );
+};
+
+export const HandThumbsUpIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.633 10.25c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 0 1 2.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 0 0 .322-1.672V2.75a.75.75 0 0 1 .75-.75 2.25 2.25 0 0 1 2.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282m0 0h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 0 1-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 0 0-1.423-.23H5.904m10.598-9.75H14.25M5.904 18.5c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 0 1-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 9.953 4.167 9.5 5 9.5h1.053c.472 0 .745.556.5.96a8.958 8.958 0 0 0-1.302 4.665c0 1.194.232 2.333.654 3.375Z"
+      />
+    </svg>
+  );
+};
+
+export const ChatBubbleOvalLeftEllipsisIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
+      />
+    </svg>
+  );
+};

client/src/layouts/default.tsx

@@ -13,6 +13,12 @@ export default function DefaultLayout({
       <main className="pt-16 flex-grow">{children}</main>
       <Toaster />
       <NavigationBar />
+
+      {/*
+      A div that becomes black in dark mode to cover white color parts
+      of the website when scrolling past the window's original view.
+      */}
+      <div className="fixed -z-50 dark:bg-black inset-0 w-full h-full"></div>
     </div>
   );
 }

client/src/pages/CommunityPage.tsx

@@ -1,10 +1,35 @@
 // import { title } from "@/components/primitives";
 import DefaultLayout from "../layouts/default";
-import { SetStateAction, useEffect, useState } from 'react';
+import { SetStateAction, useEffect, useState } from "react";
-import { Button, Avatar, Link, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Input } from "@nextui-org/react";
+import {
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/react";
+  Button,
+  Avatar,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+  Input,
+  Chip,
+} from "@nextui-org/react";
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  useDisclosure,
+} from "@nextui-org/react";
 import config from "../config";
 import instance from "../security/http";
+import {
+  ChatBubbleOvalLeftEllipsisIcon,
+  EllipsisHorizontalIcon,
+  HandThumbsUpIcon,
+  MagnifyingGlassIcon,
+  PlusIcon,
+  XMarkIcon,
+} from "../icons";
+import { useNavigate } from "react-router-dom";
 
 interface Post {
   title: string;
@@ -14,6 +39,7 @@ interface Post {
 }
 
 export default function CommunityPage() {
+  const navigate = useNavigate();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
   const [selectedPost, setSelectedPost] = useState<Post | null>(null);
 
@@ -24,21 +50,21 @@ export default function CommunityPage() {
   const [communityList, setCommunityList] = useState<Post[]>([]);
 
   // Search Function
-  const [search, setSearch] = useState('');
+  const [search, setSearch] = useState("");
-  const onSearchChange = (e: { target: { value: SetStateAction<string>; }; }) => {
+  const onSearchChange = (e: { target: { value: SetStateAction<string> } }) => {
     setSearch(e.target.value);
   };
 
   const getPosts = () => {
-    instance
+    instance.get(config.serverAddress + "/post").then((res) => {
-      .get(config.serverAddress + '/post').then((res) => {
+      setCommunityList(res.data);
-        setCommunityList(res.data);
+    });
-      });
   };
 
   const searchPosts = () => {
     instance
-      .get(config.serverAddress + `/post?search=${search}`).then((res) => {
+      .get(config.serverAddress + `/post?search=${search}`)
+      .then((res) => {
         setCommunityList(res.data);
       });
   };
@@ -47,7 +73,7 @@ export default function CommunityPage() {
     getPosts();
   }, []);
 
-  const onSearchKeyDown = (e: { key: string; }) => {
+  const onSearchKeyDown = (e: { key: string }) => {
     if (e.key === "Enter") {
       searchPosts();
     }
@@ -55,18 +81,17 @@ export default function CommunityPage() {
 
   const onClickSearch = () => {
     searchPosts();
-  }
+  };
   const onClickClear = () => {
-    setSearch('');
+    setSearch("");
     getPosts();
   };
 
   useEffect(() => {
-    instance
+    instance.get(config.serverAddress + "/post").then((res) => {
-      .get(config.serverAddress + '/post').then((res) => {
+      console.log(res.data);
-        console.log(res.data);
+      setCommunityList(res.data);
-        setCommunityList(res.data);
+    });
-      });
   }, []);
 
   const handleDeleteClick = (post: Post) => {
@@ -76,58 +101,55 @@ export default function CommunityPage() {
   const handleDeleteConfirm = async () => {
     if (selectedPost) {
       try {
-        await instance
+        await instance.delete(
-          .delete(config.serverAddress + `/post/${selectedPost.id}`);
+          config.serverAddress + `/post/${selectedPost.id}`
-        setCommunityList((prevList) => prevList.filter(post => post.id !== selectedPost.id));
+        );
+        setCommunityList((prevList) =>
+          prevList.filter((post) => post.id !== selectedPost.id)
+        );
         onOpenChange();
       } catch (error) {
-        console.error('Error deleting post:', error);
+        console.error("Error deleting post:", error);
       }
     }
   };
 
-
   return (
     <DefaultLayout>
-      <section className="flex flex-row m-10">
+      <div className="flex flex-row gap-4 m-10">
-        <div className="flex flex-col w-4/5">
+        <div className="flex flex-col gap-8 w-full">
-          {
+          <div className="flex flex-col">
-            communityList.map((post) => {
+            <p className="text-3xl font-bold">Community Forums</p>
+            <p className="text-xl">
+              Socialize, share your experience or ask a question!
+            </p>
+          </div>
+          <div className="flex flex-col gap-4">
+            {communityList.map((post) => {
               return (
-                <section className="mb-7 flex flex-row bg-red-50 border border-none rounded-2xl" key={post.id}>
+                <section
-                  <div className="pl-7 pr-3 pt-5">
+                  className="flex flex-row gap-4 bg-red-50 dark:bg-red-950 border border-none rounded-2xl p-4"
-                    <Avatar src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large" size="lg" />
+                  key={post.id}
+                >
+                  <div>
+                    <Avatar
+                      src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large"
+                      size="lg"
+                    />
                   </div>
-                  <div className="flex flex-col justify-center w-full">
+                  <div className="flex flex-col gap-8 w-full">
-                    <div className="h-full flex flex-col justify-center py-5">
+                    <div className="h-full flex flex-col gap-4">
-                      <div className="flex flex-row items-center">
+                      <div className="flex flex-row justify-between">
-                        <div className="flex flex-col justify-center w-11/12">
+                        <div className="flex flex-col">
-                          <div className="h-full text-sm text-neutral-500">
+                          <p className="text-xl font-bold">{post.title}</p>
-                            <p>Adam</p>
+                          <p className="text-md text-neutral-500">Adam</p>
-                          </div>
-                          <div className="h-full">
-                            <p className="text-lg mb-2 font-bold">
-                              {post.title}
-                            </p>
-                          </div>
                         </div>
-                        <div className="flex flex-row-reverse justify-center items-center h-full w-10">
+                        <div className="flex flex-row-reverse justify-center items-center">
                           <Dropdown>
                             <div>
                               <DropdownTrigger className="justify-center items-center">
-                                <Button isIconOnly className="w-full h-3/5 justify-center items-center" variant="light">
+                                <Button isIconOnly variant="light">
-                                  <svg xmlns="http://www.w3.org/2000/svg"
+                                  <EllipsisHorizontalIcon />
-                                    fill="none"
-                                    viewBox="0 0 24 24"
-                                    strokeWidth={1.5}
-                                    stroke="currentColor"
-                                    className="size-6">
-
-                                    <path
-                                      strokeLinecap="round"
-                                      strokeLinejoin="round"
-                                      d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
-                                  </svg>
                                 </Button>
                               </DropdownTrigger>
                             </div>
@@ -135,13 +157,17 @@ export default function CommunityPage() {
                               <DropdownItem
                                 key="edit"
                                 onClick={() => {
-                                  // Navigate to editPost page with post.id
+                                  navigate(`/editPost/${post.id}`);
-                                  const editPostUrl = `/editPost/${post.id}`; // Replace with your actual edit post route
+                                }}
-                                  window.location.href = editPostUrl;
+                              >
-                                }}>
                                 Edit
                               </DropdownItem>
-                              <DropdownItem key="delete" className="text-danger" color="danger" onClick={() => handleDeleteClick(post)}>
+                              <DropdownItem
+                                key="delete"
+                                className="text-danger"
+                                color="danger"
+                                onClick={() => handleDeleteClick(post)}
+                              >
                                 Delete
                               </DropdownItem>
                             </DropdownMenu>
@@ -149,112 +175,69 @@ export default function CommunityPage() {
                         </div>
                       </div>
                       <div>
-                        <p>
+                        <p>{post.content}</p>
-                          {post.content}
-                        </p>
                       </div>
                     </div>
-                    <div className="flex flex-row">
+                    <div className="flex flex-col gap-2">
-                      <div>
+                      <div className="flex flex-row gap-2">
-                        <p>tag1</p>
+                        <Chip>Tag 1</Chip>
+                        <Chip>Tag 2</Chip>
                       </div>
-                      <div>
+                      <div className="flex flex-row">
-                        <p>tag2</p>
+                        <Button variant="light" isIconOnly>
-                      </div>
+                          <HandThumbsUpIcon />
-                    </div>
+                        </Button>
-                    <div className="flex flex-row">
+                        <Button variant="light" isIconOnly>
-                      <div className="p-5">
+                          <ChatBubbleOvalLeftEllipsisIcon />
-                        <p>Like</p>
+                        </Button>
-                      </div>
+                        <Button variant="light" isIconOnly>
-                      <div className="p-5">
+                          <EllipsisHorizontalIcon />
-                        <p>Comment</p>
+                        </Button>
-                      </div>
-                      <div className="p-5">
-                        <p>...</p>
                       </div>
                     </div>
                   </div>
                 </section>
               );
-            })
+            })}
-          }
-        </div>
-        <section className="flex flex-col w-1/5 mx-auto h-screen">
-          <Link href="/createPost" className="w-11/12 h-1/5 mx-auto mb-2">
-            <Button isIconOnly className="w-full h-full bg-red-color text-white">
-              <div className="flex flex-col">
-                <div className="flex flex-row justify-center items-center gap-2">
-                  <div className="text-xl">
-                    <p>Create a post!</p>
-                  </div>
-                  <div>
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      strokeWidth={1.7}
-                      stroke="currentColor"
-                      className="size-5">
-
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        d="M12 4.5v15m7.5-7.5h-15" />
-                    </svg>
-                  </div>
-                </div>
-                <div className="flex flex-col text-xs justify-center items-center">
-                  <p>Socialize, share your experience or <br></br>ask a question!</p>
-                </div>
-              </div>
-            </Button>
-          </Link>
-          <div className="flex flex-row w-11/12 border border-none rounded-2xl mx-auto bg-gray-100">
-            <Input
-              value={search}
-              placeholder="Search Title/Content"
-              onChange={onSearchChange}
-              onKeyDown={onSearchKeyDown}
-            />
-            <Button isIconOnly className="bg-red-color">
-              <svg xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="size-6 bg-red-color text-white"
-                onClick={onClickSearch}>
-
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-              </svg>
-            </Button>
-            <Button isIconOnly className="bg-red-color">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                strokeWidth={1.5}
-                stroke="currentColor"
-                className="size-6 text-white"
-                onClick={onClickClear}>
-
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  d="M6 18 18 6M6 6l12 12" />
-              </svg>
-            </Button>
           </div>
-        </section>
+        </div>
-      </section>
+        <div className="flex flex-col gap-4 bg-red-50 dark:bg-red-950 p-4 rounded-xl w-[400px]">
+          <Button
+            startContent={<PlusIcon />}
+            className=" bg-red-500 dark:bg-red-700 text-white"
+            size="lg"
+            onPress={() => {
+              navigate("/createPost");
+            }}
+          >
+            <p className="font-bold">Create a post!</p>
+          </Button>
+          <Input
+            value={search}
+            placeholder="Search Title/Content"
+            onChange={onSearchChange}
+            onKeyDown={onSearchKeyDown}
+            endContent={
+              <div className="flex flex-row -mr-3">
+                <Button isIconOnly variant="light" onPress={onClickSearch}>
+                  <MagnifyingGlassIcon />
+                </Button>
+                <Button isIconOnly variant="light" onPress={onClickClear}>
+                  <XMarkIcon />
+                </Button>
+              </div>
+            }
+          />
+        </div>
+      </div>
 
       <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
         <ModalContent>
           {(onClose) => (
             <>
-              <ModalHeader className="flex flex-col gap-1">Confirm Delete</ModalHeader>
+              <ModalHeader className="flex flex-col gap-1">
+                Confirm Delete
+              </ModalHeader>
               <ModalBody>
                 <p>Are you sure you want to delete this post?</p>
               </ModalBody>

client/src/pages/CreatePostPage.tsx

@@ -1,127 +1,131 @@
-import DefaultLayout from '../layouts/default';
+import DefaultLayout from "../layouts/default";
-import { Button, Link } from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
-import * as Yup from 'yup';
+import * as Yup from "yup";
 import axios from "axios";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
-import NextUIFormikInput from '../components/NextUIFormikInput';
+import NextUIFormikInput from "../components/NextUIFormikInput";
-import NextUIFormikTextarea from '../components/NextUIFormikTextarea';
+import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
-import config from '../config';
+import config from "../config";
+import { ArrowUTurnLeftIcon } from "../icons";
 
 const validationSchema = Yup.object({
-    title: Yup.string().trim()
+  title: Yup.string()
-        .min(3, 'Title must be at least 3 characters')
+    .trim()
-        .max(200, 'Title must be at most 200 characters')
+    .min(3, "Title must be at least 3 characters")
-        .matches(/^[a-zA-Z0-9\s]+$/, "Title can only contain letters, numbers, and spaces")
+    .max(200, "Title must be at most 200 characters")
-        .required('Title is required'),
+    .matches(
-    content: Yup.string().trim()
+      /^[a-zA-Z0-9\s]+$/,
-        .min(3, 'Content must be at least 3 characters')
+      "Title can only contain letters, numbers, and spaces"
-        .max(500, 'Content must be at most 500 characters')
+    )
-        .matches(/^[a-zA-Z0-9,\s!"'-]*$/, 'Only letters, numbers, commas, spaces, exclamation marks, quotations, and common symbols are allowed')
+    .required("Title is required"),
-        .required('Content is required')
+  content: Yup.string()
+    .trim()
+    .min(3, "Content must be at least 3 characters")
+    .max(500, "Content must be at most 500 characters")
+    .matches(
+      /^[a-zA-Z0-9,\s!"'-]*$/,
+      "Only letters, numbers, commas, spaces, exclamation marks, quotations, and common symbols are allowed"
+    )
+    .required("Content is required"),
 });
 
 function CreatePostPage() {
-    const navigate = useNavigate();
+  const navigate = useNavigate();
 
-    const initialValues = {
+  const initialValues = {
-        title: '',
+    title: "",
-        content: '',
+    content: "",
-        tags: ''
+    tags: "",
-    };
+  };
 
-    const handleSubmit = async (values: any, { setSubmitting, resetForm, setFieldError }: any) => {
+  const handleSubmit = async (
-        try {
+    values: any,
-            const response = await axios
+    { setSubmitting, resetForm, setFieldError }: any
-                .post(config.serverAddress + '/post', values); // Assuming an API route
+  ) => {
-            if (response.status === 200) {
+    try {
-                console.log('Post created successfully:', response.data);
+      const response = await axios.post(config.serverAddress + "/post", values); // Assuming an API route
-                resetForm(); // Clear form after successful submit
+      if (response.status === 200) {
-                navigate("/community");
+        console.log("Post created successfully:", response.data);
-            } else {
+        resetForm(); // Clear form after successful submit
-                console.error('Error creating post:', response.statusText);
+        navigate("/community");
-            }
+      } else {
-        } catch (error: any) {
+        console.error("Error creating post:", response.statusText);
-            if (error.response && error.response.data && error.response.data.field) {
+      }
-                setFieldError(error.response.data.field, error.response.data.error);
+    } catch (error: any) {
-            } else {
+      if (error.response && error.response.data && error.response.data.field) {
-                console.error('Unexpected error:', error);
+        setFieldError(error.response.data.field, error.response.data.error);
-            }
+      } else {
-        } finally {
+        console.error("Unexpected error:", error);
-            setSubmitting(false);
+      }
-        }
+    } finally {
-    };
+      setSubmitting(false);
+    }
+  };
 
-    return (
+  return (
-        <DefaultLayout>
+    <DefaultLayout>
-            <section className="w-8/12 mx-auto">
+      <section className="w-8/12 mx-auto">
-                <Link href="/community">
+        <Button
-                    <svg
+          variant="light"
-                        xmlns="http://www.w3.org/2000/svg"
+          onPress={() => {
-                        fill="none"
+            navigate(-1);
-                        viewBox="0 0 24 24"
+          }}
-                        strokeWidth={1.5}
+        >
-                        stroke="black"
+          <ArrowUTurnLeftIcon />
-                        className="size-5">
+        </Button>
-
+      </section>
-                        <path
+      <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
-                            strokeLinecap="round"
+        <Formik
-                            strokeLinejoin="round"
+          initialValues={initialValues}
-                            d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
+          validationSchema={validationSchema}
-                    </svg>
+          onSubmit={handleSubmit}
-                </Link>
+        >
-            </section>
+          {({ isValid, dirty, isSubmitting }) => (
-            <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
+            <Form className="flex flex-col gap-5">
-                <Formik
+              <div>
-                    initialValues={initialValues}
+                <NextUIFormikInput
-                    validationSchema={validationSchema}
+                  label="Title"
-                    onSubmit={handleSubmit}
+                  name="title"
+                  type="text"
+                  placeholder="Enter your post title"
+                  labelPlacement="inside"
+                />
+              </div>
+              <div className="text-sm">
+                <p>Image</p>
+              </div>
+              <div>
+                <NextUIFormikTextarea
+                  label="Content"
+                  name="content"
+                  placeholder="Write your post content here"
+                />
+              </div>
+              <div>
+                <NextUIFormikInput
+                  label="Tags (Optional)"
+                  name="tags"
+                  type="text"
+                  placeholder="Enter tags"
+                  labelPlacement="inside"
+                />
+              </div>
+              <div className="flex flex-row-reverse border">
+                <Button
+                  type="submit"
+                  className="bg-red-color text-white text-xl w-1/6"
+                  disabled={!isValid || !dirty || isSubmitting}
                 >
-                    {({ isValid, dirty, isSubmitting }) => (
+                  <p>Post</p>
-                        <Form className="flex flex-col gap-5">
+                </Button>
-                            <div>
+              </div>
-                                <NextUIFormikInput
+            </Form>
-                                    label="Title"
+          )}
-                                    name="title"
+        </Formik>
-                                    type="text"
+      </section>
-                                    placeholder="Enter your post title"
+    </DefaultLayout>
-                                    labelPlacement="inside"
+  );
-                                />
-                            </div>
-                            <div className="text-sm">
-                                <p>Image</p>
-                            </div>
-                            <div>
-                                <NextUIFormikTextarea
-                                    label="Content"
-                                    name="content"
-                                    placeholder="Write your post content here"
-                                />
-                            </div>
-                            <div>
-                                <NextUIFormikInput
-                                    label="Tags (Optional)"
-                                    name="tags"
-                                    type="text"
-                                    placeholder="Enter tags"
-                                    labelPlacement="inside"
-                                />
-                            </div>
-                            <div className="flex flex-row-reverse border">
-                                <Button
-                                    type="submit"
-                                    className="bg-red-color text-white text-xl w-1/6"
-                                    disabled={!isValid || !dirty || isSubmitting}
-                                >
-                                    <p>Post</p>
-                                </Button>
-                            </div>
-                        </Form>
-                    )}
-                </Formik>
-            </section>
-        </DefaultLayout>
-    );
 }
 
 export default CreatePostPage;

client/src/pages/EditPostPage.tsx

@@ -1,5 +1,5 @@
 import DefaultLayout from "../layouts/default";
-import { Button, Link } from "@nextui-org/react";
+import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { useEffect, useState } from "react";
@@ -9,6 +9,7 @@ import NextUIFormikInput from "../components/NextUIFormikInput";
 import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
 import config from "../config";
 import instance from "../security/http";
+import { ArrowUTurnLeftIcon } from "../icons";
 
 const validationSchema = Yup.object({
   title: Yup.string()
@@ -34,13 +35,6 @@ const validationSchema = Yup.object({
 function editPost() {
   const { id } = useParams();
   const navigate = useNavigate();
-
-  // const initialValues = {
-  //     title: '',
-  //     content: '',
-  //     tags: ''
-  // };
-
   const [post, setPost] = useState({
     title: "",
     content: "",
@@ -62,10 +56,10 @@ function editPost() {
       const response = await instance.put(
         config.serverAddress + `/post/${id}`,
         values
-      ); // Assuming an API route
+      );
       if (response.status === 200) {
         console.log("Post updated successfully:", response.data);
-        resetForm(); // Clear form after successful submit
+        resetForm();
         navigate("/community");
       } else {
         console.error("Error updating post:", response.statusText);
@@ -84,21 +78,14 @@ function editPost() {
   return (
     <DefaultLayout>
       <section className="w-8/12 mx-auto">
-        <Link href="/community">
+        <Button
-          <svg
+          variant="light"
-            xmlns="http://www.w3.org/2000/svg"
+          onPress={() => {
-            fill="none"
+            navigate(-1);
-            viewBox="0 0 24 24"
+          }}
-            strokeWidth={1.5}
+        >
-            stroke="black"
+          <ArrowUTurnLeftIcon />
-            className="size-5">
+        </Button>
-
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3" />
-          </svg>
-        </Link>
       </section>
       <section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
         {!loading && (