From e67f14fc731b1ed54200830d143b43c2d27da5a7 Mon Sep 17 00:00:00 2001
From: Ai Ling <hong-ailing@hotmail.com>
Date: Thu, 3 Nov 2022 16:07:28 +0800
Subject: [PATCH] [offers][refactor] Refactor text display

---
 .../offers/offerAnalysis/OfferProfileCard.tsx |  3 +-
 .../offersSubmission/OffersProfileSave.tsx    |  1 -
 .../offersSubmission/OffersSubmissionForm.tsx |  1 -
 .../components/offers/profile/OfferCard.tsx   | 14 ++++----
 apps/portal/src/utils/offers/string.tsx       | 36 ++++++++++++++++++-
 5 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
index 5e6aa74b..4c7ecca3 100644
--- a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
+++ b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx
@@ -9,6 +9,7 @@ import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
 
 import { HorizontalDivider } from '~/../../../packages/ui/dist';
 import { convertMoneyToString } from '~/utils/offers/currency';
+import { getCompanyDisplayText } from '~/utils/offers/string';
 import { formatDate } from '~/utils/offers/time';
 
 import { JobTypeLabel } from '../constants';
@@ -69,7 +70,7 @@ export default function OfferProfileCard({
             {getLabelForJobTitleType(title as JobTitleType)}{' '}
             {`(${JobTypeLabel[jobType]})`}
           </p>
-          <p>{`Company: ${company.name}, ${location}`}</p>
+          <p>{`Company: ${getCompanyDisplayText(company.name, location)}`}</p>
           {level && <p>Level: {level}</p>}
         </div>
         <div className="col-span-1 row-span-3">
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
index b72641d8..d494912e 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersProfileSave.tsx
@@ -93,7 +93,6 @@ export default function OffersProfileSave({
             <div className="mt-4 flex gap-4">
               <div className="grow">
                 <TextInput
-                  disabled={true}
                   isLabelHidden={true}
                   label="Edit link"
                   value={getProfileLink(profileId, token)}
diff --git a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
index 8d5a7a90..42eff26c 100644
--- a/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
+++ b/apps/portal/src/components/offers/offersSubmission/OffersSubmissionForm.tsx
@@ -289,7 +289,6 @@ export default function OffersSubmissionForm({
                 className="space-y-6 text-sm"
                 onSubmit={handleSubmit(onSubmit)}>
                 {steps[step]}
-                <pre>{JSON.stringify(formMethods.watch(), null, 2)}</pre>
                 {step === 0 && (
                   <div className="flex justify-end">
                     <Button
diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx
index feb869f0..75e5735e 100644
--- a/apps/portal/src/components/offers/profile/OfferCard.tsx
+++ b/apps/portal/src/components/offers/profile/OfferCard.tsx
@@ -8,9 +8,10 @@ import { HorizontalDivider } from '@tih/ui';
 
 import type { OfferDisplayData } from '~/components/offers/types';
 
-import { joinWithComma } from '~/utils/offers/string';
-
-import { JobTypeLabel } from '../constants';
+import {
+  getCompanyDisplayText,
+  getJobDisplayText,
+} from '~/utils/offers/string';
 
 type Props = Readonly<{
   offer: OfferDisplayData;
@@ -44,15 +45,12 @@ export default function OfferCard({
                 <BuildingOffice2Icon className="mr-3 h-5" />
               </span>
               <span className="font-bold">
-                {joinWithComma(companyName, location?.cityName)}
+                {getCompanyDisplayText(companyName, location)}
               </span>
             </div>
           )}
           <div className="ml-8 flex flex-row">
-            <p>
-              {joinWithComma(jobTitle, jobLevel)}{' '}
-              {jobType && `(${JobTypeLabel[jobType]})`}
-            </p>
+            <p>{getJobDisplayText(jobTitle, jobLevel, jobType)}</p>
           </div>
         </div>
         {!duration && receivedMonth && (
diff --git a/apps/portal/src/utils/offers/string.tsx b/apps/portal/src/utils/offers/string.tsx
index 603b934c..dbf7bd44 100644
--- a/apps/portal/src/utils/offers/string.tsx
+++ b/apps/portal/src/utils/offers/string.tsx
@@ -1,3 +1,37 @@
-export function joinWithComma(...strings: Array<string | null | undefined>) {
+import type { JobType } from '@prisma/client';
+
+import { JobTypeLabel } from '~/components/offers/constants';
+
+import type { Location } from '~/types/offers';
+
+function joinWithComma(...strings: Array<string | null | undefined>) {
   return strings.filter((value) => !!value).join(', ');
 }
+
+function getLocationDisplayText({ cityName, countryName }: Location) {
+  return cityName === countryName
+    ? cityName
+    : joinWithComma(cityName, countryName);
+}
+
+export function getCompanyDisplayText(
+  companyName?: string | null,
+  location?: Location | null,
+) {
+  if (!location) {
+    return companyName;
+  }
+  return joinWithComma(companyName, getLocationDisplayText(location));
+}
+
+export function getJobDisplayText(
+  jobTitle?: string | null,
+  jobLevel?: string | null,
+  jobType?: JobType | null,
+) {
+  let jobDisplay = joinWithComma(jobTitle, jobLevel);
+  if (jobType) {
+    jobDisplay = jobDisplay.concat(` (${JobTypeLabel[jobType]})`);
+  }
+  return jobDisplay;
+}