diff --git a/apps/portal/src/components/resumes/comments/CommentsForm.tsx b/apps/portal/src/components/resumes/comments/CommentsForm.tsx index dd669d39..f14ba03a 100644 --- a/apps/portal/src/components/resumes/comments/CommentsForm.tsx +++ b/apps/portal/src/components/resumes/comments/CommentsForm.tsx @@ -39,23 +39,21 @@ export default function CommentsForm({ skills: '', }, }); - const reviewCreateMutation = trpc.useMutation('resumes.reviews.user.create'); + const trpcContext = trpc.useContext(); + const reviewCreateMutation = trpc.useMutation('resumes.reviews.user.create', { + onSuccess: () => { + // New review added, invalidate query to trigger refetch + trpcContext.invalidateQueries(['resumes.reviews.list']); + }, + }); // TODO: Give a feedback to the user if the action succeeds/fails const onSubmit: SubmitHandler = async (data) => { - await reviewCreateMutation.mutate( - { - resumeId, - ...data, - }, - { - onSuccess: () => { - // New review added, invalidate query to trigger refetch - trpcContext.invalidateQueries(['resumes.reviews.list']); - }, - }, - ); + await reviewCreateMutation.mutate({ + resumeId, + ...data, + }); // Redirect back to comments section setShowCommentsForm(false); diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx index 7d8bf02c..cf6c1cc7 100644 --- a/apps/portal/src/components/resumes/comments/CommentsList.tsx +++ b/apps/portal/src/components/resumes/comments/CommentsList.tsx @@ -8,8 +8,6 @@ import Comment from './comment/Comment'; import CommentsListButton from './CommentsListButton'; import { COMMENTS_SECTIONS } from './constants'; -import type { ResumeComment } from '~/types/resume-comments'; - type CommentsListProps = Readonly<{ resumeId: string; setShowCommentsForm: (show: boolean) => void; @@ -20,15 +18,16 @@ export default function CommentsList({ setShowCommentsForm, }: CommentsListProps) { const [tab, setTab] = useState(COMMENTS_SECTIONS[0].value); - const [comments, setComments] = useState>([]); const { data: session } = useSession(); // Fetch the most updated comments to render - trpc.useQuery(['resumes.reviews.list', { resumeId, section: tab }], { - onSuccess: setComments, - }); + const commentsQuery = trpc.useQuery([ + 'resumes.reviews.list', + { resumeId, section: tab }, + ]); // TODO: Add loading prompt + console.log(commentsQuery.data); return (
@@ -41,7 +40,7 @@ export default function CommentsList({ />
- {comments.map((comment) => { + {commentsQuery.data?.map((comment) => { return (