fix: next15 searchParams

src/app/(main)/app/create/thread/_component.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { createThread } from "@/actions/fraudit";
+import { useToast } from "@/components/ui/use-toast";
+import { useRouter, useSearchParams } from "next/navigation";
+import { ForwardedEditor } from "@/components/editor";
+import { Suspense, useState } from "react";
+
+interface Props {
+    slug: string;
+  }
+
+  const formSchema = z.object({
+    title: z
+      .string({ required_error: "A Title is required to post a thread" })
+      .min(6, { message: "Best Practices to have a well-defined title" }),
+  });
+
+const CreateThreadComponent = () => {
+    const { toast } = useToast();
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const slug = searchParams.get("slug") as string;
+
+    const [content, setContent] = useState<string>("Edit Me!");
+
+    const form = useForm<z.infer<typeof formSchema>>({
+      resolver: zodResolver(formSchema),
+      defaultValues: {
+        title: "",
+      },
+    });
+
+    const onSubmit = async (values: z.infer<typeof formSchema>) => {
+      await createThread({
+        title: values.title,
+        content: content,
+        frauditSlug: slug,
+      })
+        .then(() => {
+          toast({
+            title: "Success",
+            description: "Successfully posted a new thread",
+            variant: "success",
+          });
+          router.push(`/app/f/${slug}`);
+        })
+        .catch((err) =>
+          toast({
+            variant: "destructive",
+            title: "An Error has occurred",
+            description:
+              err.message || "Failed to post new thread, please try again later",
+          }),
+        );
+    };
+
+    const onEditorChange = (text: string) => {
+      setContent(text);
+    };
+
+
+    return (
+    <div className="mx-auto lg:max-w-[968px]">
+        <Card>
+          <CardHeader>
+            <h1 className="text-xl font-extrabold tracking-wide md:text-2xl lg:text-3xl">
+              Post a new Thread
+            </h1>
+          </CardHeader>
+          <CardContent>
+            <Form {...form}>
+            <Suspense>
+              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+                <FormField
+                  control={form.control}
+                  name="title"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Thread Title</FormLabel>
+                      <FormControl>
+                        <Input placeholder="Help Needed" {...field} />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <ForwardedEditor markdown={content} onChange={onEditorChange} />
+                <Button type="submit" className="bg-green-500 text-slate-700">
+                  Post
+                </Button>
+              </form>
+            </Suspense>
+            </Form>
+          </CardContent>
+        </Card>
+      </div>
+      )
+}
+
+export default CreateThreadComponent

src/app/(main)/app/create/thread/page.tsx

@@ -1,118 +1,11 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/components/ui/form";
-import { Card, CardContent, CardHeader } from "@/components/ui/card";
-import { createThread } from "@/actions/fraudit";
-import { useToast } from "@/components/ui/use-toast";
-import { useRouter, useSearchParams } from "next/navigation";
-import { ForwardedEditor } from "@/components/editor";
-import { useState } from "react";
-
-interface Props {
-  slug: string;
-}
-
-const formSchema = z.object({
-  title: z
-    .string({ required_error: "A Title is required to post a thread" })
-    .min(6, { message: "Best Practices to have a well-defined title" }),
-});
+import { Suspense } from "react";
+import CreateThreadComponent from "./_component";
 
 const CreateThreadPage = () => {
-  const { toast } = useToast();
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const slug = searchParams.get("slug") as string;
-
-  const [content, setContent] = useState<string>("Edit Me!");
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      title: "",
-    },
-  });
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    await createThread({
-      title: values.title,
-      content: content,
-      frauditSlug: slug,
-    })
-      .then(() => {
-        toast({
-          title: "Success",
-          description: "Successfully posted a new thread",
-          variant: "success",
-        });
-        router.push(`/app/f/${slug}`);
-      })
-      .catch((err) =>
-        toast({
-          variant: "destructive",
-          title: "An Error has occurred",
-          description:
-            err.message || "Failed to post new thread, please try again later",
-        }),
-      );
-  };
-
-  const onEditorChange = (text: string) => {
-    setContent(text);
-  };
-
   return (
-    <div className="mx-auto lg:max-w-[968px]">
-      <Card>
-        <CardHeader>
-          <h1 className="text-xl font-extrabold tracking-wide md:text-2xl lg:text-3xl">
-            Post a new Thread
-          </h1>
-        </CardHeader>
-        <CardContent>
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-              <FormField
-                control={form.control}
-                name="title"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Thread Title</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Help Needed" {...field} />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              {/* <FormField
-                control={form.control}
-                name="content"
-                render={({ field }) => (
-                  <Input placeholder="Content" {...field} />
-                )}
-              /> */}
-              <ForwardedEditor markdown={content} onChange={onEditorChange} />
-              <Button type="submit" className="bg-green-500 text-slate-700">
-                Post
-              </Button>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </div>
+    <Suspense>
+      <CreateThreadComponent />
+    </Suspense>
   );
 };
 

src/app/(main)/rmp/search/_component.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import { searchProfessor } from "@/actions/rmp/search/search";
+import { ProfessorsSearchList } from "@/components/rmp/professors-search-list";
+import { SearchBar } from "@/components/rmp/search-bar";
+import { professors } from "@/db/schema";
+import { useSearchParams } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+const SearchComponent = () => {
+    const searchParams = useSearchParams();
+    const query = searchParams.get("q") as string;
+
+    const [searchResults, setSearchResults] = useState<
+      (typeof professors.$inferSelect)[]
+    >([]);
+    const [numSearchResults, setNumSearchResults] = useState<number>(0);
+
+    useEffect(() => {
+      const getData = () => {
+        searchProfessor(query)
+          .then((res) => {
+            setSearchResults(res.professors);
+            setNumSearchResults(res.length);
+          })
+          .catch((err) => {
+            console.error(err);
+          });
+      };
+
+      getData();
+    }, [query]);
+
+
+    return (
+        <div className="flex h-full w-full flex-col gap-5 md:gap-8">
+        <SearchBar className="flex md:hidden" value={query} />
+
+
+      <div>
+        <div className="flex justify-between">
+          <h1>{`Searching for ${query}`}</h1>
+          <h1>{`${numSearchResults} Results`}</h1>
+        </div>
+        <ProfessorsSearchList professors={searchResults} />
+      </div>
+    </div>
+    )
+}
+
+export default SearchComponent

src/app/(main)/rmp/search/page.tsx

@@ -1,48 +1,11 @@
-"use client";
-
-import { searchProfessor } from "@/actions/rmp/search/search";
-import { ProfessorsSearchList } from "@/components/rmp/professors-search-list";
-import { SearchBar } from "@/components/rmp/search-bar";
-import { professors } from "@/db/schema";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { Suspense } from "react";
+import SearchComponent from "./_component";
 
 const SearchPage = () => {
-  const searchParams = useSearchParams();
-  const query = searchParams.get("q") as string;
-
-  const [searchResults, setSearchResults] = useState<
-    (typeof professors.$inferSelect)[]
-  >([]);
-  const [numSearchResults, setNumSearchResults] = useState<number>(0);
-
-  useEffect(() => {
-    const getData = () => {
-      searchProfessor(query)
-        .then((res) => {
-          setSearchResults(res.professors);
-          setNumSearchResults(res.length);
-        })
-        .catch((err) => {
-          console.error(err);
-        });
-    };
-
-    getData();
-  }, []);
-
   return (
-    <div className="flex h-full w-full flex-col gap-5 md:gap-8">
-      <SearchBar className="flex md:hidden" value={query} />
-
-      <div>
-        <div className="flex justify-between">
-          <h1>{`Searching for ${query}`}</h1>
-          <h1>{`${numSearchResults} Results`}</h1>
-        </div>
-        <ProfessorsSearchList professors={searchResults} />
-      </div>
-    </div>
+      <Suspense>
+          <SearchComponent />
+    </Suspense>
   );
 };