feat:added usequery for more routes

code100x · Nov 3, 2024 · a477d9e · a477d9e
1 parent a5531e4
commit a477d9e
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 38 deletions.
diff --git a/src/app/jobs/page.tsx b/src/app/jobs/page.tsx
@@ -11,8 +11,13 @@ import { Suspense } from 'react';
 import getQueryClient from '../../providers/queryClient';
 import { GetUserBookmarksId, getAllJobs } from '@/actions/job.action';
 import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { getServerSession } from 'next-auth';
 
 const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
+  const session = await getServerSession();
+  if (!session) {
+    redirect('/auth/signin');
+  }
   const parsedData = JobQuerySchema.safeParse(searchParams);
   if (!(parsedData.success && parsedData.data)) {
     console.error(parsedData.error);
@@ -27,7 +32,10 @@ const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
     queryFn: () => getAllJobs(parsedSearchParams),
     staleTime: 1000 * 60 * 5,
   });
-  const UserBookmarks = await GetUserBookmarksId();
+  await queryClient.prefetchQuery({
+    queryKey: ['UserBookmarksId', session?.user?.id],
+    queryFn: () => GetUserBookmarksId(),
+  });
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
@@ -53,10 +61,7 @@ const page = async ({ searchParams }: { searchParams: JobQuerySchemaType }) => {
                 </div>
               }
             >
-              <AllJobs
-                userbookmarks={UserBookmarks.data}
-                searchParams={parsedSearchParams}
-              />
+              <AllJobs searchParams={parsedSearchParams} />
             </Suspense>
           </div>
         </div>

diff --git a/src/components/RecentJobs.tsx b/src/components/RecentJobs.tsx
@@ -1,13 +1,32 @@
+'use client';
 import { getRecentJobs, GetUserBookmarksId } from '@/actions/job.action';
 import JobCard from './Jobcard';
+import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
 
-export default async function RecentJobs() {
-  const [recentJobs, getUserBookmarks] = await Promise.all([
-    await getRecentJobs(),
-    await GetUserBookmarksId(),
-  ]);
+export default function RecentJobs() {
+  // const [recentJobs, getUserBookmarks] = await Promise.all([
+  //   await getRecentJobs(),
+  //   await GetUserBookmarksId(),
+  // ]);
+  const session = useSession();
 
-  const userbookmarkArr: { jobId: string }[] | null = getUserBookmarks.data;
+  const { data } = useQuery({
+    queryKey: ['recentJobs'],
+    queryFn: () => getRecentJobs(),
+    staleTime: 1000 * 60 * 5,
+  });
+  const bookmarks = useQuery({
+    queryKey: ['UserBookmarksId', session?.data?.user?.id],
+    queryFn: () => GetUserBookmarksId(),
+  });
+  if (!data?.status || !data?.additional) {
+    return <div>Error {data?.message}</div>;
+  }
+  const recentJobs = data;
+
+  const userbookmarkArr: { jobId: string }[] | null =
+    bookmarks.data?.data || null;
 
   if (!recentJobs.status) {
     return <div>{recentJobs.message}</div>;

diff --git a/src/components/all-jobs.tsx b/src/components/all-jobs.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { getAllJobs } from '@/actions/job.action';
+import { GetUserBookmarksId, getAllJobs } from '@/actions/job.action';
 import { DEFAULT_PAGE, JOBS_PER_PAGE } from '@/config/app.config';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { JobQuerySchemaType } from '@/lib/validators/jobs.validator';
@@ -12,14 +12,20 @@ import { PaginationPages } from './ui/paginator';
 import JobCard from './Jobcard';
 import APP_PATHS from '@/config/path.config';
 import { useQuery } from '@tanstack/react-query';
+import { useSession } from 'next-auth/react';
 
 type PaginatorProps = {
   searchParams: JobQuerySchemaType;
-  userbookmarks: { jobId: string }[] | null;
 };
 
-const AllJobs = ({ searchParams, userbookmarks }: PaginatorProps) => {
-  const userbookmarkArr: { jobId: string }[] | null = userbookmarks;
+const AllJobs = ({ searchParams }: PaginatorProps) => {
+  // const userbookmarkArr: { jobId: string }[] | null = userbookmarks;
+  const session = useSession();
+
+  const userbookmark = useQuery({
+    queryKey: ['UserBookmarksId', session?.data?.user?.id],
+    queryFn: () => GetUserBookmarksId(),
+  });
 
   const { data } = useQuery({
     queryKey: ['jobs', searchParams],
@@ -30,6 +36,8 @@ const AllJobs = ({ searchParams, userbookmarks }: PaginatorProps) => {
     return <div>Error {data?.message}</div>;
   }
   const jobs = data;
+  const userbookmarkArr: { jobId: string }[] | null =
+    userbookmark.data?.data || null;
 
   const totalPages =
     Math.ceil((jobs.additional?.totalJobs || 0) / JOBS_PER_PAGE) ||

diff --git a/src/components/job-landing.tsx b/src/components/job-landing.tsx
@@ -3,6 +3,10 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { ChevronRight } from 'lucide-react';
 import RecentJobs from './RecentJobs';
 import Link from 'next/link';
+import getQueryClient from '@/providers/queryClient';
+import { GetUserBookmarksId, getRecentJobs } from '@/actions/job.action';
+import { HydrationBoundary, dehydrate } from '@tanstack/react-query';
+import { getServerSession } from 'next-auth';
 dayjs.extend(relativeTime);
 
 export const calculateTimeSincePosted = (postedAt: Date): string => {
@@ -13,30 +17,47 @@ export const getFirstLetterCaps = (str: string): string => {
   return str.charAt(0).toUpperCase();
 };
 
-export const JobLanding = () => {
+export const JobLanding = async () => {
+  const session = await getServerSession();
+  const queryClient = getQueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ['recentJobs'],
+    queryFn: () => getRecentJobs(),
+    staleTime: 1000 * 60 * 5,
+  });
+  await queryClient.prefetchQuery({
+    queryKey: ['UserBookmarksId', session?.user?.id],
+    queryFn: () => GetUserBookmarksId(),
+  });
+
   return (
-    <div
-      id="recent-jobs"
-      className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-6 md:pt-20 dark:bg-grad-dark bg-grad-light"
-    >
-      <div className="w-full h-fit flex flex-col items-center">
-        <h2 className="font-bold md:text-4xl text-3xl">Recently Added jobs</h2>
-        <p className="md:text-sm text-xs py-2 font-semibold text-[#64748B] dark:text-[#94A3B8]">
-          Stay ahead with newly added jobs
-        </p>
-      </div>
-      <RecentJobs />
-      <div className="w-full flex justify-center items-center my-5">
-        <button
-          className="flex items-center text-[#4E7AFF] border-none outline-none text-lg font-medium group"
-          aria-label="view-all-jobs"
-        >
-          <Link href={'/jobs'} className="flex items-center">
-            View all jobs
-            <ChevronRight className="w-4 h-4 mx-2 group-hover:translate-x-1 duration-200 ease-in-out transition" />
-          </Link>
-        </button>
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <div
+        id="recent-jobs"
+        className="w-full h-fit md:px-16 px-5 flex flex-col items-center pt-6 md:pt-20 dark:bg-grad-dark bg-grad-light"
+      >
+        <div className="w-full h-fit flex flex-col items-center">
+          <h2 className="font-bold md:text-4xl text-3xl">
+            Recently Added jobs
+          </h2>
+          <p className="md:text-sm text-xs py-2 font-semibold text-[#64748B] dark:text-[#94A3B8]">
+            Stay ahead with newly added jobs
+          </p>
+        </div>
+        <RecentJobs />
+        <div className="w-full flex justify-center items-center my-5">
+          <button
+            className="flex items-center text-[#4E7AFF] border-none outline-none text-lg font-medium group"
+            aria-label="view-all-jobs"
+          >
+            <Link href={'/jobs'} className="flex items-center">
+              View all jobs
+              <ChevronRight className="w-4 h-4 mx-2 group-hover:translate-x-1 duration-200 ease-in-out transition" />
+            </Link>
+          </button>
+        </div>
       </div>
-    </div>
+    </HydrationBoundary>
   );
 };