[resumes][feat] re-route to sign-in page + prefix resume for components (yangshun#370)

Author: keanecjy

apps/portal/src/components/resumes/browse/FilterPill.tsx renamed to 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"

apps/portal/src/components/resumes/browse/constants.ts renamed to apps/portal/src/components/resumes/browse/resumeConstants.ts

@@ -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

apps/portal/src/components/resumes/comments/CommentsList.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>

apps/portal/src/components/resumes/SignInButton.tsx renamed to apps/portal/src/components/resumes/shared/ResumeSignInButton.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"

apps/portal/src/pages/resumes/[resumeId].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 ||

apps/portal/src/pages/resumes/index.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';