cleaned up rykel's mess
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,35 @@
|
||||
// import { title } from "@/components/primitives";
|
||||
import DefaultLayout from "../layouts/default";
|
||||
import { SetStateAction, useEffect, useState } from 'react';
|
||||
import { Button, Avatar, Link, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Input } from "@nextui-org/react";
|
||||
import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/react";
|
||||
import { SetStateAction, useEffect, useState } from "react";
|
||||
import {
|
||||
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 onSearchChange = (e: { target: { value: SetStateAction<string>; }; }) => {
|
||||
const [search, setSearch] = useState("");
|
||||
const onSearchChange = (e: { target: { value: SetStateAction<string> } }) => {
|
||||
setSearch(e.target.value);
|
||||
};
|
||||
|
||||
const getPosts = () => {
|
||||
instance
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
instance.get(config.serverAddress + "/post").then((res) => {
|
||||
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
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
console.log(res.data);
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
instance.get(config.serverAddress + "/post").then((res) => {
|
||||
console.log(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
|
||||
.delete(config.serverAddress + `/post/${selectedPost.id}`);
|
||||
setCommunityList((prevList) => prevList.filter(post => post.id !== selectedPost.id));
|
||||
await instance.delete(
|
||||
config.serverAddress + `/post/${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-col w-4/5">
|
||||
{
|
||||
communityList.map((post) => {
|
||||
<div className="flex flex-row gap-4 m-10">
|
||||
<div className="flex flex-col gap-8 w-full">
|
||||
<div className="flex flex-col">
|
||||
<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}>
|
||||
<div className="pl-7 pr-3 pt-5">
|
||||
<Avatar src="https://pbs.twimg.com/media/GOva9x5a0AAK8Bn?format=jpg&name=large" size="lg" />
|
||||
<section
|
||||
className="flex flex-row gap-4 bg-red-50 dark:bg-red-950 border border-none rounded-2xl p-4"
|
||||
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="h-full flex flex-col justify-center py-5">
|
||||
<div className="flex flex-row items-center">
|
||||
<div className="flex flex-col justify-center w-11/12">
|
||||
<div className="h-full text-sm text-neutral-500">
|
||||
<p>Adam</p>
|
||||
</div>
|
||||
<div className="h-full">
|
||||
<p className="text-lg mb-2 font-bold">
|
||||
{post.title}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-8 w-full">
|
||||
<div className="h-full flex flex-col gap-4">
|
||||
<div className="flex flex-row justify-between">
|
||||
<div className="flex flex-col">
|
||||
<p className="text-xl font-bold">{post.title}</p>
|
||||
<p className="text-md text-neutral-500">Adam</p>
|
||||
</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">
|
||||
<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>
|
||||
<Button isIconOnly variant="light">
|
||||
<EllipsisHorizontalIcon />
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
</div>
|
||||
@@ -135,13 +157,17 @@ export default function CommunityPage() {
|
||||
<DropdownItem
|
||||
key="edit"
|
||||
onClick={() => {
|
||||
// Navigate to editPost page with post.id
|
||||
const editPostUrl = `/editPost/${post.id}`; // Replace with your actual edit post route
|
||||
window.location.href = editPostUrl;
|
||||
}}>
|
||||
navigate(`/editPost/${post.id}`);
|
||||
}}
|
||||
>
|
||||
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>
|
||||
{post.content}
|
||||
</p>
|
||||
<p>{post.content}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<div>
|
||||
<p>tag1</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-row gap-2">
|
||||
<Chip>Tag 1</Chip>
|
||||
<Chip>Tag 2</Chip>
|
||||
</div>
|
||||
<div>
|
||||
<p>tag2</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-row">
|
||||
<div className="p-5">
|
||||
<p>Like</p>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<p>Comment</p>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<p>...</p>
|
||||
<div className="flex flex-row">
|
||||
<Button variant="light" isIconOnly>
|
||||
<HandThumbsUpIcon />
|
||||
</Button>
|
||||
<Button variant="light" isIconOnly>
|
||||
<ChatBubbleOvalLeftEllipsisIcon />
|
||||
</Button>
|
||||
<Button variant="light" isIconOnly>
|
||||
<EllipsisHorizontalIcon />
|
||||
</Button>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
@@ -1,127 +1,131 @@
|
||||
import DefaultLayout from '../layouts/default';
|
||||
import { Button, Link } from "@nextui-org/react";
|
||||
import DefaultLayout from "../layouts/default";
|
||||
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 NextUIFormikInput from '../components/NextUIFormikInput';
|
||||
import NextUIFormikTextarea from '../components/NextUIFormikTextarea';
|
||||
import config from '../config';
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import NextUIFormikInput from "../components/NextUIFormikInput";
|
||||
import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
|
||||
import config from "../config";
|
||||
import { ArrowUTurnLeftIcon } from "../icons";
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
title: Yup.string().trim()
|
||||
.min(3, 'Title must be at least 3 characters')
|
||||
.max(200, 'Title must be at most 200 characters')
|
||||
.matches(/^[a-zA-Z0-9\s]+$/, "Title can only contain letters, numbers, and spaces")
|
||||
.required('Title 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')
|
||||
title: Yup.string()
|
||||
.trim()
|
||||
.min(3, "Title must be at least 3 characters")
|
||||
.max(200, "Title must be at most 200 characters")
|
||||
.matches(
|
||||
/^[a-zA-Z0-9\s]+$/,
|
||||
"Title can only contain letters, numbers, and spaces"
|
||||
)
|
||||
.required("Title 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 = {
|
||||
title: '',
|
||||
content: '',
|
||||
tags: ''
|
||||
};
|
||||
const initialValues = {
|
||||
title: "",
|
||||
content: "",
|
||||
tags: "",
|
||||
};
|
||||
|
||||
const handleSubmit = async (values: any, { setSubmitting, resetForm, setFieldError }: any) => {
|
||||
try {
|
||||
const response = await axios
|
||||
.post(config.serverAddress + '/post', values); // Assuming an API route
|
||||
if (response.status === 200) {
|
||||
console.log('Post created successfully:', response.data);
|
||||
resetForm(); // Clear form after successful submit
|
||||
navigate("/community");
|
||||
} else {
|
||||
console.error('Error creating post:', response.statusText);
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response && error.response.data && error.response.data.field) {
|
||||
setFieldError(error.response.data.field, error.response.data.error);
|
||||
} else {
|
||||
console.error('Unexpected error:', error);
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
const handleSubmit = async (
|
||||
values: any,
|
||||
{ setSubmitting, resetForm, setFieldError }: any
|
||||
) => {
|
||||
try {
|
||||
const response = await axios.post(config.serverAddress + "/post", values); // Assuming an API route
|
||||
if (response.status === 200) {
|
||||
console.log("Post created successfully:", response.data);
|
||||
resetForm(); // Clear form after successful submit
|
||||
navigate("/community");
|
||||
} else {
|
||||
console.error("Error creating post:", response.statusText);
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response && error.response.data && error.response.data.field) {
|
||||
setFieldError(error.response.data.field, error.response.data.error);
|
||||
} else {
|
||||
console.error("Unexpected error:", error);
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<section className="w-8/12 mx-auto">
|
||||
<Link href="/community">
|
||||
<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>
|
||||
</Link>
|
||||
</section>
|
||||
<section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<section className="w-8/12 mx-auto">
|
||||
<Button
|
||||
variant="light"
|
||||
onPress={() => {
|
||||
navigate(-1);
|
||||
}}
|
||||
>
|
||||
<ArrowUTurnLeftIcon />
|
||||
</Button>
|
||||
</section>
|
||||
<section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ isValid, dirty, isSubmitting }) => (
|
||||
<Form className="flex flex-col gap-5">
|
||||
<div>
|
||||
<NextUIFormikInput
|
||||
label="Title"
|
||||
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 }) => (
|
||||
<Form className="flex flex-col gap-5">
|
||||
<div>
|
||||
<NextUIFormikInput
|
||||
label="Title"
|
||||
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}
|
||||
>
|
||||
<p>Post</p>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
);
|
||||
<p>Post</p>
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default CreatePostPage;
|
||||
|
||||
@@ -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">
|
||||
<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>
|
||||
</Link>
|
||||
<Button
|
||||
variant="light"
|
||||
onPress={() => {
|
||||
navigate(-1);
|
||||
}}
|
||||
>
|
||||
<ArrowUTurnLeftIcon />
|
||||
</Button>
|
||||
</section>
|
||||
<section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl">
|
||||
{!loading && (
|
||||
|
||||
Reference in New Issue
Block a user