Create post

client/package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
     "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",

client/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { Separator } from "~/components/ui/separator";
 import { ClerkProvider } from "@clerk/nextjs";
 import ThemeToggle from "~/components/core/dark-mode-toggle";
 import { dark } from "@clerk/themes";
+import { Toaster } from "~/components/ui/toaster"
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -52,6 +53,7 @@ export default function RootLayout({
                 <RecentPosts />
               </div>
             </div>
+            <Toaster />
             <ThemeToggle />
           </ThemeProvider>
         </body>

client/src/app/page.tsx

@@ -15,51 +15,76 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
 } from "~/components/ui/form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import useSWR from "swr";
 import { useFetcher } from "~/hooks/fetcher";
-import {useAuth} from '@clerk/clerk-react'
-import { get } from "http";
+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 Link from "next/link";
 
 const formSchema = z.object({
   forum: z.string({
     required_error: "Forum is required",
   }),
-  content: z.string({
-    required_error: "Content is required",
-  }),
+  imageUrl: z.string().default(""),
 });
+
 export default function Home() {
+  const { toast } = useToast();
   const [value, setValue] = useState("");
   const { quill, quillRef } = useQuill();
-  const [forum, setForum] = useState("");
   const { allForums, createPost } = useFetcher();
   const { data: forums, error } = useSWR("/forums", allForums);
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
   });
-  const {isSignedIn, getToken} = useAuth()
+  const { isSignedIn, getToken } = useAuth();
 
   async function onSubmit(data: z.infer<typeof formSchema>) {
+    console.log("data");
     const token = await getToken();
     if (token === null) {
-      console.error('Token is null');
+      console.error("Token is null");
       return;
     }
-    console.log(token);
-    const res = await createPost({
-      title: value.slice(0, 10),
-      content: value,
-      forumId: forums?.find((forum) => forum.slug === form.getValues('forum'))
-        ?.id,
-    }, token);
+    try {
+      const res = await createPost(
+        {
+          title: value.slice(0, 10),
+          content: value,
+          forumId: forums?.find(
+            (forum) => forum.slug === form.getValues("forum")
+          )?.id,
+          imageUrl: form.getValues("imageUrl"),
+        },
+        token
+      );
+      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();
+
+      quill?.setText("");
+    } catch (e) {
+      console.error(e);
+      toast({
+        title: "Error creating post",
+        description: "An error occurred while creating your post",
+      });
+    }
   }
 
   useEffect(() => {
@@ -70,55 +95,84 @@ export default function Home() {
     }
   }, [quill]);
 
-  // const handleChange = (event) => {
-  //   setForum(event.target.value);
-  // }
-
-
   return (
     <div className="">
-     {forums && <div className="px-4 py-10">
-        {isSignedIn && <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4 md:max-w-[600px] mx-auto">
-            <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>
-            <div ref={quillRef} />
-            <Button
-              variant={"default"}
-              className="place-self-end font-bold"
-              type="button"
-              onClick={form.handleSubmit(onSubmit)}
-            >
-              Post
-            </Button>
-          </form>
-        </Form>}
-      </div>}
+      {forums && (
+        <div className="px-4 py-6">
+          {isSignedIn && (
+            <Form {...form}>
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="flex flex-col gap-4 md:max-w-[600px] mx-auto"
+              >
+                <div className="flex 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>
+                <div ref={quillRef} />
+                <Button
+                  variant={"default"}
+                  className="place-self-end font-bold"
+                  type="button"
+                  onClick={form.handleSubmit(onSubmit)}
+                >
+                  Post
+                </Button>
+              </form>
+            </Form>
+          )}
+        </div>
+      )}
       <Posts />
     </div>
   );

client/src/components/core/recent-posts.tsx

@@ -8,7 +8,7 @@ import { useFetcher } from "~/hooks/fetcher";
 
 export default function RecentPosts() {
   const { allPosts } = useFetcher();
-  const { data, error } = useSWR("/posts", allPosts);
+  const { data, error } = useSWR("asc", allPosts);
   return (
     <div className={"flex dark:text-[#d8dce0] xl:px-4 w-full font-[500]"}>
       <div className={"p-4 w-full rounded-[12px]"}>

client/src/components/posts/posts.tsx

@@ -6,17 +6,16 @@ import { useUser } from "@clerk/clerk-react";
 import Post from "./post";
 import { Separator } from "../ui/separator";
 
-
-
 export default function Posts() {
   const { allPosts } = useFetcher();
   const { isSignedIn } = useUser();
 
-  const { data, error } = useSWR("/posts", allPosts);
-
+  const { data, error, mutate } = useSWR("allPost", () => allPosts("desc"), {
+    refreshInterval: 3000
+  });
 
     return (
-        <main className="flex min-h-screen flex-col items-center justify-between px-4 md:px-8 py-10 gap-8">
+        <main className="flex min-h-screen flex-col items-center justify-between px-4 md:px-8 py-6 gap-8">
             {data && data.map((post) => (
                 <>
                     <Post post={post} />