From ada6a684204c6caae313f7ffa3f30674fc96ef21 Mon Sep 17 00:00:00 2001 From: Yangshun Tay Date: Thu, 10 Nov 2022 13:59:26 +0800 Subject: [PATCH] [offers][feat] show company logo --- .../offers/dashboard/DashboardOfferCard.tsx | 12 +++++-- .../offers/offerAnalysis/OfferProfileCard.tsx | 12 +++++-- .../components/offers/profile/OfferCard.tsx | 18 ++++++++--- .../offers/profile/ProfileDetails.tsx | 29 ++++++++++++++--- .../offers/profile/ProfileHeader.tsx | 4 +-- .../src/components/offers/table/OffersRow.tsx | 18 ++++++++--- apps/portal/src/components/offers/types.ts | 4 ++- .../components/shared/CompanyProfileImage.tsx | 31 +++++++++++++++++++ apps/portal/src/pages/offers/dashboard.tsx | 17 +++++++--- apps/portal/src/pages/offers/index.tsx | 9 ++++++ .../pages/offers/profile/[offerProfileId].tsx | 12 +++---- .../offers/submit/result/[offerProfileId].tsx | 9 ++++++ 12 files changed, 143 insertions(+), 32 deletions(-) create mode 100644 apps/portal/src/components/shared/CompanyProfileImage.tsx diff --git a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx index 1085b7e9..56685302 100644 --- a/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx +++ b/apps/portal/src/components/offers/dashboard/DashboardOfferCard.tsx @@ -6,6 +6,7 @@ import { import { JobType } from '@prisma/client'; import { JobTypeLabel } from '~/components/offers/constants'; +import CompanyProfileImage from '~/components/shared/CompanyProfileImage'; import type { JobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; @@ -31,8 +32,13 @@ export default function DashboardProfileCard({ }: Props) { return (
-
-
+
+ +

{getLabelForJobTitleType(title as JobTitleType)}{' '} {jobType && <>({JobTypeLabel[jobType]})} @@ -80,4 +86,4 @@ export default function DashboardProfileCard({

); -} \ No newline at end of file +} diff --git a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx index ae0d678b..73a1f2c3 100644 --- a/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx +++ b/apps/portal/src/components/offers/offerAnalysis/OfferProfileCard.tsx @@ -10,6 +10,7 @@ import { } from '@heroicons/react/24/outline'; import { JobType } from '@prisma/client'; +import CompanyProfileImage from '~/components/shared/CompanyProfileImage'; import type { JobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; @@ -89,8 +90,13 @@ export default function OfferProfileCard({ function BottomSection() { return (
-
-
+
+ +

{getLabelForJobTitleType(title as JobTitleType)}{' '} {jobType && <>({JobTypeLabel[jobType]})} @@ -125,7 +131,7 @@ export default function OfferProfileCard({ )}

-
+

{jobType === JobType.FULLTIME ? `${convertMoneyToString(income)} / year` diff --git a/apps/portal/src/components/offers/profile/OfferCard.tsx b/apps/portal/src/components/offers/profile/OfferCard.tsx index fd4336dc..ea844207 100644 --- a/apps/portal/src/components/offers/profile/OfferCard.tsx +++ b/apps/portal/src/components/offers/profile/OfferCard.tsx @@ -9,6 +9,7 @@ import { JobType } from '@prisma/client'; import { JobTypeLabel } from '~/components/offers/constants'; import { InternshipCycleValuesToLabels } from '~/components/offers/InternshipCycles'; import type { OfferDisplayData } from '~/components/offers/types'; +import CompanyProfileImage from '~/components/shared/CompanyProfileImage'; import { getLocationDisplayText } from '~/utils/offers/string'; import { getDurationDisplayText } from '~/utils/offers/time'; @@ -21,7 +22,7 @@ export default function OfferCard({ offer: { base, bonus, - companyName, + company, duration, internshipCycle, jobTitle, @@ -40,19 +41,26 @@ export default function OfferCard({ function UpperSection() { return (

-
-
+
+ {company && ( + + )} +

{jobTitle} {jobType && <>({JobTypeLabel[jobType]})}

- {companyName && ( + {company?.name != null && (
)} {location && ( diff --git a/apps/portal/src/components/offers/profile/ProfileDetails.tsx b/apps/portal/src/components/offers/profile/ProfileDetails.tsx index f46cfa47..ccf28f3e 100644 --- a/apps/portal/src/components/offers/profile/ProfileDetails.tsx +++ b/apps/portal/src/components/offers/profile/ProfileDetails.tsx @@ -34,10 +34,21 @@ function ProfileOffers({ offers }: ProfileOffersProps) { } return ( -
- {offers.map((offer) => ( - - ))} +
+
+ {offers.map((offer) => ( + + ))} +
+
); } @@ -140,6 +151,15 @@ function ProfileAnalysis({ />
)} +
); } @@ -188,5 +208,6 @@ export default function ProfileDetails({ /> ); } + return null; } diff --git a/apps/portal/src/components/offers/profile/ProfileHeader.tsx b/apps/portal/src/components/offers/profile/ProfileHeader.tsx index 5a16cb96..03ffd68b 100644 --- a/apps/portal/src/components/offers/profile/ProfileHeader.tsx +++ b/apps/portal/src/components/offers/profile/ProfileHeader.tsx @@ -243,7 +243,7 @@ export default function ProfileHeader({

{profileName ?? 'anonymous'}

- {(experiences[0]?.companyName || + {(experiences[0]?.company?.name || experiences[0]?.jobLevel || experiences[0]?.jobTitle) && (
@@ -252,7 +252,7 @@ export default function ProfileHeader({

Current: - {`${experiences[0].companyName || ''} ${ + {`${experiences[0].company?.name || ''} ${ experiences[0].jobLevel || '' } ${experiences[0].jobTitle || ''} ${ experiences[0].jobType diff --git a/apps/portal/src/components/offers/table/OffersRow.tsx b/apps/portal/src/components/offers/table/OffersRow.tsx index 38961d7d..34300361 100644 --- a/apps/portal/src/components/offers/table/OffersRow.tsx +++ b/apps/portal/src/components/offers/table/OffersRow.tsx @@ -2,6 +2,7 @@ import clsx from 'clsx'; import Link from 'next/link'; import { JobType } from '@prisma/client'; +import CompanyProfileImage from '~/components/shared/CompanyProfileImage'; import type { JobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; @@ -34,10 +35,19 @@ export default function OfferTableRow({ }: OfferTableRowProps) { return ( - -

{company.name}
-
- {location.cityName} ({location.countryCode}) + + +
+
+ {company.name} +
+
+ {location.cityName} ({location.countryCode}) +
diff --git a/apps/portal/src/components/offers/types.ts b/apps/portal/src/components/offers/types.ts index 6a010746..28ef1d29 100644 --- a/apps/portal/src/components/offers/types.ts +++ b/apps/portal/src/components/offers/types.ts @@ -2,6 +2,8 @@ import type { JobType } from '@prisma/client'; import type { MonthYear } from '~/components/shared/MonthYearPicker'; +import type { OffersCompany } from '../../types/offers'; + import type { Location } from '~/types/offers'; /** @@ -177,7 +179,7 @@ export type EducationDisplayData = { export type OfferDisplayData = { base?: string | null; bonus?: string | null; - companyName?: string | null; + company?: OffersCompany | null; duration?: number | null; id?: string; internshipCycle?: string; diff --git a/apps/portal/src/components/shared/CompanyProfileImage.tsx b/apps/portal/src/components/shared/CompanyProfileImage.tsx new file mode 100644 index 00000000..3e9cd133 --- /dev/null +++ b/apps/portal/src/components/shared/CompanyProfileImage.tsx @@ -0,0 +1,31 @@ +import clsx from 'clsx'; +import { useState } from 'react'; +import { BuildingOffice2Icon } from '@heroicons/react/24/outline'; +type Props = Readonly<{ + alt: string; + className: string; + src: string; +}>; + +export default function CompanyProfileImage({ alt, className, src }: Props) { + const [hasError, setHasError] = useState(false); + + return hasError ? ( +
+ +
+ ) : ( + {alt} { + setHasError(true); + }} + /> + ); +} diff --git a/apps/portal/src/pages/offers/dashboard.tsx b/apps/portal/src/pages/offers/dashboard.tsx index b397fddc..f1b2427d 100644 --- a/apps/portal/src/pages/offers/dashboard.tsx +++ b/apps/portal/src/pages/offers/dashboard.tsx @@ -85,13 +85,13 @@ export default function ProfilesDashboard() { {!userProfilesQuery.isLoading && (

- My dashboard + Dashboard

- Save your offer profiles to your dashboard to easily access and - edit them later. + Save offer profiles to your dashboard to easily access and edit + them later.

-
+
    {userProfiles?.map((profile) => (
  • @@ -99,6 +99,15 @@ export default function ProfilesDashboard() {
    • ))}
+
)} diff --git a/apps/portal/src/pages/offers/index.tsx b/apps/portal/src/pages/offers/index.tsx index 9f62dc79..d2ee066f 100644 --- a/apps/portal/src/pages/offers/index.tsx +++ b/apps/portal/src/pages/offers/index.tsx @@ -186,6 +186,15 @@ export default function OffersHomePage({ selectedSortType={selectedSortType} onSort={onSort} /> + diff --git a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx index b1498bf1..9941c6bc 100644 --- a/apps/portal/src/pages/offers/profile/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/profile/[offerProfileId].tsx @@ -74,7 +74,7 @@ export default function OfferProfile() { res.offersFullTime.bonus != null ? convertMoneyToString(res.offersFullTime.bonus) : undefined, - companyName: res.company.name, + company: res.company, id: res.offersFullTime.id, jobLevel: res.offersFullTime.level, jobTitle: getLabelForJobTitleType( @@ -96,7 +96,7 @@ export default function OfferProfile() { return filteredOffer; } const filteredOffer: OfferDisplayData = { - companyName: res.company.name, + company: res.company, id: res.offersIntern!.id, internshipCycle: res.offersIntern!.internshipCycle, jobTitle: getLabelForJobTitleType( @@ -130,7 +130,7 @@ export default function OfferProfile() { })), experiences: data.background.experiences.map( (experience): OfferDisplayData => ({ - companyName: experience.company?.name, + company: experience.company, duration: experience.durationInMonths, jobLevel: experience.level, jobTitle: experience.title @@ -197,10 +197,10 @@ export default function OfferProfile() {
) : getProfileQuery.isLoading ? ( -
-
+
+
-
Loading profile...
+

Loading profile...

) : ( diff --git a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx index 36ec895b..63012b4c 100644 --- a/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx +++ b/apps/portal/src/pages/offers/submit/result/[offerProfileId].tsx @@ -141,6 +141,15 @@ export default function OffersSubmissionResult() {
)}
+