[resumes][feat] Fetch all, starred and my resumes in browse page

apps/portal/src/components/resumes/browse/constants.ts

@@ -1,3 +1,9 @@
+export const BROWSE_TABS_VALUES = {
+  ALL: 'all',
+  MY: 'my',
+  STARRED: 'starred',
+};
+
 export const SORT_OPTIONS = [
   { current: true, href: '#', name: 'Latest' },
   { current: false, href: '#', name: 'Popular' },

apps/portal/src/pages/resumes/index.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { Fragment, useState } from 'react';
+import { Fragment, useEffect, useState } from 'react';
 import { Disclosure, Menu, Transition } from '@headlessui/react';
 import {
   ChevronDownIcon,
@@ -11,6 +11,7 @@ import { Tabs, TextInput } from '@tih/ui';
 
 import BrowseListItem from '~/components/resumes/browse/BrowseListItem';
 import {
+  BROWSE_TABS_VALUES,
   EXPERIENCE,
   LOCATION,
   ROLES,
@@ -19,6 +20,8 @@ import {
 } from '~/components/resumes/browse/constants';
 import FilterPill from '~/components/resumes/browse/FilterPill';
 
+import type { Resume } from '~/types/resume';
+
 const filters = [
   {
     id: 'roles',
@@ -41,9 +44,44 @@ import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
 import { trpc } from '~/utils/trpc';
 
 export default function ResumeHomePage() {
-  const [tabsValue, setTabsValue] = useState('all');
+  const [tabsValue, setTabsValue] = useState(BROWSE_TABS_VALUES.ALL);
   const [searchValue, setSearchValue] = useState('');
-  const resumesQuery = trpc.useQuery(['resumes.resume.list']);
+  const [resumes, setResumes] = useState(Array<Resume>());
+
+  const allResumesQuery = trpc.useQuery(['resumes.resume.all'], {
+    enabled: tabsValue === BROWSE_TABS_VALUES.ALL,
+  });
+  const starredResumesQuery = trpc.useQuery(['resumes.resume.browse.stars'], {
+    enabled: tabsValue === BROWSE_TABS_VALUES.STARRED,
+  });
+  const myResumesQuery = trpc.useQuery(['resumes.resume.browse.my'], {
+    enabled: tabsValue === BROWSE_TABS_VALUES.MY,
+  });
+
+  useEffect(() => {
+    switch (tabsValue) {
+      case BROWSE_TABS_VALUES.ALL: {
+        setResumes(allResumesQuery.data ?? Array<Resume>());
+        break;
+      }
+      case BROWSE_TABS_VALUES.STARRED: {
+        setResumes(starredResumesQuery.data ?? Array<Resume>());
+        break;
+      }
+      case BROWSE_TABS_VALUES.MY: {
+        setResumes(myResumesQuery.data ?? Array<Resume>());
+        break;
+      }
+      default: {
+        setResumes(Array<Resume>());
+      }
+    }
+  }, [
+    allResumesQuery.data,
+    starredResumesQuery.data,
+    myResumesQuery.data,
+    tabsValue,
+  ]);
 
   return (
     <main className="h-full flex-1 overflow-y-auto">
@@ -64,15 +102,15 @@ export default function ResumeHomePage() {
                     tabs={[
                       {
                         label: 'All Resumes',
-                        value: 'all',
+                        value: BROWSE_TABS_VALUES.ALL,
                       },
                       {
                         label: 'Starred Resumes',
-                        value: 'starred',
+                        value: BROWSE_TABS_VALUES.STARRED,
                       },
                       {
                         label: 'My Resumes',
-                        value: 'my',
+                        value: BROWSE_TABS_VALUES.MY,
                       },
                     ]}
                     value={tabsValue}
@@ -223,12 +261,14 @@ export default function ResumeHomePage() {
                 </form>
               </div>
             </div>
-            {resumesQuery.isLoading ? (
+            {allResumesQuery.isLoading ||
+            starredResumesQuery.isLoading ||
+            myResumesQuery.isLoading ? (
               <div>Loading...</div>
             ) : (
               <div className="col-span-10 pr-8">
                 <ul role="list">
-                  {resumesQuery.data?.map((resumeObj) => (
+                  {resumes.map((resumeObj) => (
                     <li key={resumeObj.id}>
                       <BrowseListItem href="#" resumeInfo={resumeObj} />
                     </li>

apps/portal/src/server/router/resumes.ts

@@ -2,7 +2,7 @@ import { createRouter } from './context';
 
 import type { Resume } from '~/types/resume';
 
-export const resumesRouter = createRouter().query('list', {
+export const resumesRouter = createRouter().query('all', {
   async resolve({ ctx }) {
     const resumesData = await ctx.prisma.resumesResume.findMany({
       include: {