From 596a555d78d30279a27f711ac33895419d7562ba Mon Sep 17 00:00:00 2001
From: Keane Chan <e0425601@u.nus.edu>
Date: Wed, 12 Oct 2022 21:22:26 +0800
Subject: [PATCH] [resumes][feat] re-route to sign-in page + prefix resume for
 components (#370)

---
 .../{FilterPill.tsx => ResumeFilterPill.tsx}  |  2 +-
 .../{constants.ts => resumeConstants.ts}      |  0
 .../resumes/comments/CommentsList.tsx         |  4 +--
 .../ResumeSignInButton.tsx}                   |  2 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  | 27 +++++++++----------
 apps/portal/src/pages/resumes/index.tsx       | 14 +++++-----
 apps/portal/src/pages/resumes/submit.tsx      |  2 +-
 7 files changed, 26 insertions(+), 25 deletions(-)
 rename apps/portal/src/components/resumes/browse/{FilterPill.tsx => ResumeFilterPill.tsx} (84%)
 rename apps/portal/src/components/resumes/browse/{constants.ts => resumeConstants.ts} (100%)
 rename apps/portal/src/components/resumes/{SignInButton.tsx => shared/ResumeSignInButton.tsx} (87%)

diff --git a/apps/portal/src/components/resumes/browse/FilterPill.tsx b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
similarity index 84%
rename from apps/portal/src/components/resumes/browse/FilterPill.tsx
rename to apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
index c34f4763..3961ac9d 100644
--- a/apps/portal/src/components/resumes/browse/FilterPill.tsx
+++ b/apps/portal/src/components/resumes/browse/ResumeFilterPill.tsx
@@ -3,7 +3,7 @@ type Props = Readonly<{
   title: string;
 }>;
 
-export default function FilterPill({ title, onClick }: Props) {
+export default function ResumeFilterPill({ title, onClick }: Props) {
   return (
     <button
       className="rounded-xl border border-indigo-500 border-transparent bg-white px-2 py-1 text-xs font-medium text-indigo-500 focus:bg-indigo-500 focus:text-white"
diff --git a/apps/portal/src/components/resumes/browse/constants.ts b/apps/portal/src/components/resumes/browse/resumeConstants.ts
similarity index 100%
rename from apps/portal/src/components/resumes/browse/constants.ts
rename to apps/portal/src/components/resumes/browse/resumeConstants.ts
diff --git a/apps/portal/src/components/resumes/comments/CommentsList.tsx b/apps/portal/src/components/resumes/comments/CommentsList.tsx
index e3d9f532..e4f842cb 100644
--- a/apps/portal/src/components/resumes/comments/CommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/CommentsList.tsx
@@ -7,7 +7,7 @@ import { trpc } from '~/utils/trpc';
 
 import CommentListItems from './CommentListItems';
 import { COMMENTS_SECTIONS } from './constants';
-import SignInButton from '../SignInButton';
+import ResumeSignInButton from '../shared/ResumeSignInButton';
 
 type CommentsListProps = Readonly<{
   resumeId: string;
@@ -24,7 +24,7 @@ export default function CommentsList({
   const commentsQuery = trpc.useQuery(['resumes.reviews.list', { resumeId }]);
   const renderButton = () => {
     if (sessionData === null) {
-      return <SignInButton text="to join discussion" />;
+      return <ResumeSignInButton text="to join discussion" />;
     }
     return (
       <Button
diff --git a/apps/portal/src/components/resumes/SignInButton.tsx b/apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
similarity index 87%
rename from apps/portal/src/components/resumes/SignInButton.tsx
rename to apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
index 8718e588..51d55067 100644
--- a/apps/portal/src/components/resumes/SignInButton.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeSignInButton.tsx
@@ -4,7 +4,7 @@ type Props = Readonly<{
   text: string;
 }>;
 
-export default function SignInButton({ text }: Props) {
+export default function ResumeSignInButton({ text }: Props) {
   return (
     <div className="flex justify-center pt-4">
       <p>
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 012e80ca..3c2f3abd 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -35,18 +35,18 @@ export default function ResumeReviewPage() {
     },
   );
   const starMutation = trpc.useMutation('resumes.resume.star', {
-    onError() {
+    onSuccess() {
       setStarDetails({
-        isStarred: false,
-        numStars: starDetails.numStars - 1,
+        isStarred: true,
+        numStars: starDetails.numStars + 1,
       });
     },
   });
   const unstarMutation = trpc.useMutation('resumes.resume.unstar', {
-    onError() {
+    onSuccess() {
       setStarDetails({
-        isStarred: true,
-        numStars: starDetails.numStars + 1,
+        isStarred: false,
+        numStars: starDetails.numStars - 1,
       });
     },
   });
@@ -65,12 +65,11 @@ export default function ResumeReviewPage() {
   }, [detailsQuery.data]);
 
   const onStarButtonClick = () => {
-    setStarDetails({
-      isStarred: !starDetails.isStarred,
-      numStars: starDetails.isStarred
-        ? starDetails.numStars - 1
-        : starDetails.numStars + 1,
-    });
+    if (session?.user?.id == null) {
+      router.push('/api/auth/signin');
+      return;
+    }
+
     // Star button only rendered if resume exists
     // Star button only clickable if user exists
     if (starDetails.isStarred) {
@@ -110,7 +109,7 @@ export default function ResumeReviewPage() {
                     : '',
                   'isolate inline-flex max-h-10 items-center space-x-4 rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50  disabled:hover:bg-white',
                 )}
-                disabled={session?.user === undefined}
+                disabled={starMutation.isLoading || unstarMutation.isLoading}
                 id="star-button"
                 type="button"
                 onClick={onStarButtonClick}>
@@ -166,7 +165,7 @@ export default function ResumeReviewPage() {
               </div>
             </div>
             {detailsQuery.data.additionalInfo && (
-              <div className="flex items-center pt-2 text-sm text-gray-500">
+              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-gray-500">
                 <InformationCircleIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
diff --git a/apps/portal/src/pages/resumes/index.tsx b/apps/portal/src/pages/resumes/index.tsx
index 824298c8..a65f3ca6 100644
--- a/apps/portal/src/pages/resumes/index.tsx
+++ b/apps/portal/src/pages/resumes/index.tsx
@@ -19,11 +19,11 @@ import {
   ROLES,
   SORT_OPTIONS,
   TOP_HITS,
-} from '~/components/resumes/browse/constants';
-import FilterPill from '~/components/resumes/browse/FilterPill';
+} from '~/components/resumes/browse/resumeConstants';
+import ResumeFilterPill from '~/components/resumes/browse/ResumeFilterPill';
 import ResumeListItems from '~/components/resumes/browse/ResumeListItems';
 import ResumeReviewsTitle from '~/components/resumes/ResumeReviewsTitle';
-import SignInButton from '~/components/resumes/SignInButton';
+import ResumeSignInButton from '~/components/resumes/shared/ResumeSignInButton';
 
 import { trpc } from '~/utils/trpc';
 
@@ -98,7 +98,7 @@ export default function ResumeHomePage() {
     if (sessionData?.user?.id) {
       router.push('/resumes/submit');
     } else {
-      // TODO: Handle non-logged in user behaviour
+      router.push('/api/auth/signin');
     }
   };
 
@@ -221,7 +221,7 @@ export default function ResumeHomePage() {
                       {TOP_HITS.map((category) => (
                         <li key={category.name}>
                           {/* TODO: Replace onClick with filtering function */}
-                          <FilterPill
+                          <ResumeFilterPill
                             title={category.name}
                             onClick={() => true}
                           />
@@ -287,7 +287,9 @@ export default function ResumeHomePage() {
                 </div>
               </div>
               <div className="col-span-10 pr-8">
-                {renderSignInButton && <SignInButton text={signInButtonText} />}
+                {renderSignInButton && (
+                  <ResumeSignInButton text={signInButtonText} />
+                )}
                 <ResumeListItems
                   isLoading={
                     allResumesQuery.isFetching ||
diff --git a/apps/portal/src/pages/resumes/submit.tsx b/apps/portal/src/pages/resumes/submit.tsx
index 97ea8f12..b85852f0 100644
--- a/apps/portal/src/pages/resumes/submit.tsx
+++ b/apps/portal/src/pages/resumes/submit.tsx
@@ -12,7 +12,7 @@ import {
   EXPERIENCE,
   LOCATION,
   ROLES,
-} from '~/components/resumes/browse/constants';
+} from '~/components/resumes/browse/resumeConstants';
 
 import { RESUME_STORAGE_KEY } from '~/constants/file-storage-keys';
 import { trpc } from '~/utils/trpc';