From 6ebb72a400021541850964b4e5c05ad39cd0aa23 Mon Sep 17 00:00:00 2001
From: "Siaw A. Nicholas" <siawnic.dev@gmail.com>
Date: Fri, 5 Apr 2024 03:49:24 +0000
Subject: [PATCH 1/3] fix: fix type errors

---
 client/src/app/[username]/page.tsx | 1 +
 client/src/hooks/fetcher.tsx       | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/app/[username]/page.tsx b/client/src/app/[username]/page.tsx
index 0788890..f01c3f6 100644
--- a/client/src/app/[username]/page.tsx
+++ b/client/src/app/[username]/page.tsx
@@ -127,6 +127,7 @@ function UserProfile({ params }: { params: { username: string } }) {
                     <div className="mt-4">
                         {dataToDisplay ? (
                             dataToDisplay.length > 0 ? (
+                                // @ts-ignore
                                 dataToDisplay.map(item => {
                                     switch (selectedTab) {
                                         case 'posts':
diff --git a/client/src/hooks/fetcher.tsx b/client/src/hooks/fetcher.tsx
index 4e9eec9..0cbb83f 100644
--- a/client/src/hooks/fetcher.tsx
+++ b/client/src/hooks/fetcher.tsx
@@ -117,7 +117,7 @@ export const useFetcher = (filter = 'hot') => {
         }
     }
 
-    const searchPosts = async (key: string): Promise<Post[]> => {
+    const searchPosts = async (key: string): Promise<ForumPost[]> => {
         const query = key.replace('searchPosts/', '');
         try {
             const response = await axios.get(`/posts/filtered-posts/${query}`);

From 3d38639c2f5eb51a867a8a643903533bcbe30ff3 Mon Sep 17 00:00:00 2001
From: "Siaw A. Nicholas" <siawnic.dev@gmail.com>
Date: Fri, 5 Apr 2024 03:50:04 +0000
Subject: [PATCH 2/3] feat: added ui component

---
 client/src/components/ui/dialog.tsx   | 122 ++++++++++++++++++++++++++
 client/src/components/ui/textarea.tsx |  24 +++++
 2 files changed, 146 insertions(+)
 create mode 100644 client/src/components/ui/dialog.tsx
 create mode 100644 client/src/components/ui/textarea.tsx

diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..9850daa
--- /dev/null
+++ b/client/src/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "~/lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..b9044e0
--- /dev/null
+++ b/client/src/components/ui/textarea.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "~/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

From fed21eab42044b5f6fee246bef9bb40df088cf77 Mon Sep 17 00:00:00 2001
From: "Siaw A. Nicholas" <siawnic.dev@gmail.com>
Date: Fri, 5 Apr 2024 03:51:14 +0000
Subject: [PATCH 3/3] feat: add title validation and create post modal

---
 client/src/app/page.tsx                       |   3 +
 client/src/components/core/mobile-sidebar.tsx |  13 +-
 client/src/components/core/side-bar.tsx       |  15 +-
 .../components/posts/create-post-modal.tsx    | 274 ++++++++++++++++++
 4 files changed, 300 insertions(+), 5 deletions(-)
 create mode 100644 client/src/components/posts/create-post-modal.tsx

diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 9b0c819..685980f 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -34,6 +34,9 @@ const formSchema = z.object({
     required_error: "Forum is required",
   }),
   imageUrl: z.string().default(""),
+  title: z.string({
+    required_error: "Title is required",
+  })
 });
 
 export default function Home() {
diff --git a/client/src/components/core/mobile-sidebar.tsx b/client/src/components/core/mobile-sidebar.tsx
index c966694..bc5db4d 100644
--- a/client/src/components/core/mobile-sidebar.tsx
+++ b/client/src/components/core/mobile-sidebar.tsx
@@ -1,4 +1,4 @@
-
+import { useState } from 'react';
 import { FaHome, FaRocket, FaPlus, FaArrowDown } from 'react-icons/fa';
 import { Sheet, SheetContent } from "~/components/ui/sheet";
 import Link from 'next/link';
@@ -11,6 +11,8 @@ import {
 } from "~/components/ui/collapsible";
 import { Separator } from "~/components/ui/separator";
 import { Button } from "~/components/ui/button";
+import CreatePostModal from "~/components/posts/create-post-modal";
+
 
 interface Forum {
   id: string;
@@ -21,8 +23,15 @@ interface Forum {
 }
 
 const MobileSidebar = ({ open, handleShow, user, data }: { open: boolean, handleShow: () => void, user: any, data?: Forum[] }) => {
+  const [openPost, setOpenPost] = useState(false);
+
+  const handleModalOpen = () => {
+    setOpenPost(!openPost);
+    if (open) handleShow()
+  }
   return (
 <Sheet open={open} onOpenChange={handleShow}>
+  <CreatePostModal open={openPost} setOpen={handleModalOpen} />
         <SheetContent
           className={"w-[250px] bg-zinc-950 border-0 overflow-y-scroll"}
         >
@@ -59,7 +68,7 @@ const MobileSidebar = ({ open, handleShow, user, data }: { open: boolean, handle
             <Separator className={"bg-secondary"} />
 
             <div className={"py-2 place-self-center"}>
-              <Button className={"bg-primary"} variant={"ghost"}>
+              <Button className={"bg-primary"} variant={"ghost"} onClick={handleModalOpen}>
                 <FaPlus className={"mr-2"} /> Create post
               </Button>
             </div>
diff --git a/client/src/components/core/side-bar.tsx b/client/src/components/core/side-bar.tsx
index 9a18a5f..9896ab8 100644
--- a/client/src/components/core/side-bar.tsx
+++ b/client/src/components/core/side-bar.tsx
@@ -13,15 +13,20 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "~/components/ui/collapsible";
+import CreatePostModal from "~/components/posts/create-post-modal";
 import { useUser } from "@clerk/clerk-react";
 import { useFetcher } from "~/hooks/fetcher";
 import useSWR from "swr";
 
 export default function SideBar() {
   const { isSignedIn } = useUser();
+  const [open, setOpen] = React.useState(false);
   const { allForums } = useFetcher();
   const { data, error } = useSWR("/forums", allForums);
-  //console.log("forrrrrum", data, error)
+
+  const handleModalOpen = () => {
+    setOpen(!open);
+  }
   return (
     <div
       className={
@@ -50,10 +55,13 @@ export default function SideBar() {
           </li>
         </ul>
         <Separator className={"bg-primary"} />
-        <div className={"py-2"}>
-          <Button className={"hover:bg-primary"} variant={"ghost"}>
+        <div className={"flex flex-col gap-2 justify-center items-center"}>
+          <Button onClick={handleModalOpen} className={"hover:bg-primary"} variant={"ghost"}>
             <FaPlus className={"mr-2"} /> Create Post
           </Button>
+          <Button className={"hover:bg-primary"} variant={"ghost"}>
+            <FaPlus className={"mr-2"} /> Create Forum
+          </Button>
         </div>
         <Separator className={"bg-primary"} />
         {/* TODO Make this into a component */}
@@ -100,6 +108,7 @@ export default function SideBar() {
             </CollapsibleContent>
           </Collapsible>
         </div>
+        <CreatePostModal open={open} setOpen={handleModalOpen} />
       </div>
       <Separator orientation={"vertical"} className={""} />
     </div>
diff --git a/client/src/components/posts/create-post-modal.tsx b/client/src/components/posts/create-post-modal.tsx
new file mode 100644
index 0000000..4e8f7d6
--- /dev/null
+++ b/client/src/components/posts/create-post-modal.tsx
@@ -0,0 +1,274 @@
+import { useState, useEffect } from "react";
+import { Button } from "~/components/ui/button";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFetcher } from "~/hooks/fetcher";
+import { useAuth } from "@clerk/clerk-react";
+import { Input } from "~/components/ui/input";
+import { useToast } from "~/components/ui/use-toast";
+import { ToastAction } from "~/components/ui/toast";
+import { useQuill } from "react-quilljs";
+import Link from "next/link";
+import useSWR from "swr";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "~/components/ui/select";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "~/components/ui/form";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Textarea } from "~/components/ui/textarea";
+import CirclePopLoader from "react-loaders-kit/lib/circlePop/CirclePopLoader";
+
+interface CreatePostModalProps {
+  open: boolean;
+  setOpen: () => void;
+}
+
+const formSchema = z.object({
+  forum: z.string({
+    required_error: "Forum is required",
+  }),
+  imageUrl: z.string().default(""),
+  title: z.string({
+    required_error: "Title is required",
+  }),
+  content: z.string({
+    required_error: "Content is required",
+  }),
+});
+
+export default function CreatePostModal({
+  open,
+  setOpen,
+}: CreatePostModalProps) {
+  const { toast } = useToast();
+  const [value, setValue] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { quill, quillRef } = useQuill();
+  const { isSignedIn, getToken } = useAuth();
+  const { allForums, createPost } = useFetcher();
+  const { data: forums, error } = useSWR("/forums", allForums);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  });
+
+  useEffect(() => {
+    if (quill) {
+      quill.on("text-change", () => {
+        setValue(quill.getText());
+      });
+    }
+  }, [quill]);
+
+  async function onSubmit(data: z.infer<typeof formSchema>) {
+    setLoading(true);
+    const token = await getToken();
+    if (token === null) {
+      console.error("Token is null");
+      return;
+    }
+    try {
+      const res = await createPost(
+        {
+          title: data.title,
+          content: data.content,
+          forumId: forums?.find(
+            (forum) => forum.slug === form.getValues("forum")
+          )?.id,
+          imageUrl: data.imageUrl,
+        },
+        token
+      );
+      setLoading(false);
+      toast({
+        title: "Post created sucessfully",
+        description: "Your post has been created",
+        action: (
+          <ToastAction altText="View post">
+            <Link href={`/post/${res.id}`}>View post</Link>
+          </ToastAction>
+        ),
+      });
+      form.reset();
+      setOpen();
+
+      //   quill?.setText("");
+    } catch (e) {
+      setLoading(false);
+      console.error(e);
+      toast({
+        title: "Error creating post",
+        description: "An error occurred while creating your post",
+      });
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {/*<DialogTrigger>Open</DialogTrigger>*/}
+      <DialogContent className="max-w-[90%] md:max-w-[50%]">
+        <DialogHeader>
+          <DialogTitle>Create a post</DialogTitle>
+          <DialogDescription>
+            Share your thoughts with the world. You can attach an image to your
+            post by pasting the URL in the input field.
+          </DialogDescription>
+          {forums && (
+            <div className="px- py-2">
+              {isSignedIn && (
+                <Form {...form}>
+                  <form
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className="flex flex-col gap-8 mx-auto"
+                  >
+                    <div className="flex gap-2 md:gap-4">
+                      <FormField
+                        control={form.control}
+                        name="forum"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Forum</FormLabel>
+                            <Select
+                              onValueChange={field.onChange}
+                              defaultValue={field.value}
+                            >
+                              <FormControl>
+                                <SelectTrigger className="w-[180px]">
+                                  <SelectValue placeholder="Forum" />
+                                </SelectTrigger>
+                              </FormControl>
+                              <SelectContent>
+                                {forums &&
+                                  forums.map((forum) => (
+                                    <SelectItem
+                                      key={forum.id}
+                                      value={forum.slug}
+                                    >
+                                      {forum.name}
+                                    </SelectItem>
+                                  ))}
+                              </SelectContent>
+                            </Select>
+                          </FormItem>
+                        )}
+                      ></FormField>
+                      <FormField
+                        control={form.control}
+                        name="imageUrl"
+                        render={({ field }) => (
+                          <FormItem>
+                            <FormLabel>Attach image</FormLabel>
+                            <FormControl>
+                              <div className="flex gap-4">
+                                <Input
+                                  type="text"
+                                  placeholder="Image URL"
+                                  className="placeholder:text-sm"
+                                  {...field}
+                                  onChange={field.onChange}
+                                  value={field.value}
+                                  name="imageUrl"
+                                />
+                                {/* <Button variant={"default"} type="button">
+                              Upload
+                            </Button> */}
+                              </div>
+                            </FormControl>
+                          </FormItem>
+                        )}
+                      ></FormField>
+                    </div>
+                    <FormField
+                      control={form.control}
+                      name="title"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-col">
+                          <FormLabel className="text-start">Title</FormLabel>
+                          <FormControl>
+                            <div className="">
+                              <Input
+                                type="text"
+                                placeholder="Something short and sweet"
+                                className="placeholder:text-sm"
+                                {...field}
+                                onChange={field.onChange}
+                                value={field.value}
+                                name="title"
+                              />
+                            </div>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    ></FormField>
+                    <FormField
+                      control={form.control}
+                      name="content"
+                      render={({ field }) => (
+                        <FormItem className="flex flex-col">
+                          <FormLabel className="text-start w-100">
+                            Content
+                          </FormLabel>
+                          <FormControl>
+                            <div className="">
+                              <Textarea
+                                placeholder="More details about your post"
+                                className="placeholder:text-sm text-[16px]"
+                                {...field}
+                                onChange={field.onChange}
+                                value={field.value}
+                                name="content"
+                              />
+                            </div>
+                          </FormControl>
+                        </FormItem>
+                      )}
+                    ></FormField>
+                    {/* <div ref={quillRef} /> */}
+                    {loading ? (
+                      <div className="place-self-end">
+                        <CirclePopLoader
+                          loading={loading}
+                          size={20}
+                          color="#FFCA28"
+                        />
+                      </div>
+                    ) : (
+                      <Button
+                        variant={"default"}
+                        className="place-self-end font-bold"
+                        type="button"
+                        disabled={loading}
+                        onClick={form.handleSubmit(onSubmit)}
+                      >
+                        Create post
+                      </Button>
+                    )}
+                  </form>
+                </Form>
+              )}
+            </div>
+          )}
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  );
+}