msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[offers][feat] add base bonus stocks to table and default homepage

Browse Source
pull/495/head
Zhang Ziqing 3 years ago
parent 07ad322bac
commit d8db4e3b2a
3 changed files with 90 additions and 34 deletions
Show Stats Download Patch File Download Diff File

39
apps/portal/src/components/offers/table/OffersRow.tsx
Unescape View File

@ -1,5 +1,6 @@
import clsx from 'clsx'; import clsx from 'clsx';
import Link from 'next/link'; import Link from 'next/link';
import { JobType } from '@prisma/client';
import type { JobTitleType } from '~/components/shared/JobTitles'; import type { JobTitleType } from '~/components/shared/JobTitles';
import { getLabelForJobTitleType } from '~/components/shared/JobTitles'; import { getLabelForJobTitleType } from '~/components/shared/JobTitles';
@ -9,25 +10,47 @@ import { formatDate } from '~/utils/offers/time';
import type { DashboardOffer } from '~/types/offers'; import type { DashboardOffer } from '~/types/offers';
export type OfferTableRowProps = Readonly<{ row: DashboardOffer }>; export type OfferTableRowProps = Readonly<{
jobType: JobType;
row: DashboardOffer;
}>;
export default function OfferTableRow({ export default function OfferTableRow({
row: { company, id, income, monthYearReceived, profileId, title, totalYoe }, jobType,
row: {
baseSalary,
bonus,
company,
id,
income,
monthYearReceived,
profileId,
stocks,
title,
totalYoe,
},
}: OfferTableRowProps) { }: OfferTableRowProps) {
return ( return (
<tr key={id} className="divide-x divide-slate-200 border-b bg-white"> <tr key={id} className="divide-x divide-slate-200 border-b bg-white">
<th className="whitespace-nowrap py-4 px-6 font-medium" scope="row"> <th className="whitespace-nowrap py-4 px-4 font-medium" scope="row">
{company.name} {company.name}
</th> </th>
<td className="py-4 px-6"> <td className="py-4 px-4">
{getLabelForJobTitleType(title as JobTitleType)} {getLabelForJobTitleType(title as JobTitleType)}
</td> </td>
<td className="py-4 px-6">{totalYoe}</td> <td className="py-4 px-4">{totalYoe}</td>
<td className="py-4 px-6">{convertMoneyToString(income)}</td> <td className="py-4 px-4">{convertMoneyToString(income)}</td>
<td className="py-4 px-6">{formatDate(monthYearReceived)}</td> {jobType === JobType.FULLTIME && (
<td className="py-4 px-4">
{`${baseSalary && convertMoneyToString(baseSalary)} / ${
bonus && convertMoneyToString(bonus)
} / ${stocks && convertMoneyToString(stocks)}`}
</td>
)}
<td className="py-4 px-4">{formatDate(monthYearReceived)}</td>
<td <td
className={clsx( className={clsx(
'sticky right-0 bg-white px-6 py-4 drop-shadow lg:drop-shadow-none', 'sticky right-0 bg-white px-4 py-4 drop-shadow lg:drop-shadow-none',
)}> )}>
<Link <Link
className="text-primary-600 dark:text-primary-500 font-medium hover:underline" className="text-primary-600 dark:text-primary-500 font-medium hover:underline"

65
apps/portal/src/components/offers/table/OffersTable.tsx
Unescape View File

@ -1,6 +1,7 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { JobType } from '@prisma/client';
import { DropdownMenu, Spinner } from '@tih/ui'; import { DropdownMenu, Spinner } from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
@ -23,17 +24,18 @@ import type { DashboardOffer, GetOffersResponse, Paging } from '~/types/offers';
const NUMBER_OF_OFFERS_IN_PAGE = 10; const NUMBER_OF_OFFERS_IN_PAGE = 10;
export type OffersTableProps = Readonly<{ export type OffersTableProps = Readonly<{
cityFilter: string;
companyFilter: string; companyFilter: string;
countryFilter: string;
jobTitleFilter: string; jobTitleFilter: string;
}>; }>;
export default function OffersTable({ export default function OffersTable({
cityFilter, countryFilter,
companyFilter, companyFilter,
jobTitleFilter, jobTitleFilter,
}: OffersTableProps) { }: OffersTableProps) {
const [currency, setCurrency] = useState(Currency.SGD.toString()); // TODO: Detect location const [currency, setCurrency] = useState(Currency.SGD.toString()); // TODO: Detect location
const [selectedYoe, setSelectedYoe] = useState(''); const [selectedYoe, setSelectedYoe] = useState('');
const [jobType, setJobType] = useState<JobType>(JobType.FULLTIME);
const [pagination, setPagination] = useState<Paging>({ const [pagination, setPagination] = useState<Paging>({
currentPage: 0, currentPage: 0,
numOfItems: 0, numOfItems: 0,
@ -47,6 +49,7 @@ export default function OffersTable({
const { event: gaEvent } = useGoogleAnalytics(); const { event: gaEvent } = useGoogleAnalytics();
const router = useRouter(); const router = useRouter();
const { yoeCategory = '' } = router.query; const { yoeCategory = '' } = router.query;
const [isLoading, setIsLoading] = useState(true);
useEffect(() => { useEffect(() => {
setPagination({ setPagination({
@ -55,19 +58,20 @@ export default function OffersTable({
numOfPages: 0, numOfPages: 0,
totalItems: 0, totalItems: 0,
}); });
}, [selectedYoe, currency]); setIsLoading(true);
}, [selectedYoe, currency, countryFilter, companyFilter, jobTitleFilter]);
useEffect(() => { useEffect(() => {
setSelectedYoe(yoeCategory as YOE_CATEGORY); setSelectedYoe(yoeCategory as YOE_CATEGORY);
event?.preventDefault();
}, [yoeCategory]); }, [yoeCategory]);
const offersQuery = trpc.useQuery( trpc.useQuery(
[ [
'offers.list', 'offers.list',
{ {
companyId: companyFilter, companyId: companyFilter,
// Location: 'Singapore, Singapore', // TODO: Geolocation countryId: countryFilter,
countryId: cityFilter,
currency, currency,
limit: NUMBER_OF_OFFERS_IN_PAGE, limit: NUMBER_OF_OFFERS_IN_PAGE,
offset: pagination.currentPage, offset: pagination.currentPage,
@ -83,6 +87,8 @@ export default function OffersTable({
onSuccess: (response: GetOffersResponse) => { onSuccess: (response: GetOffersResponse) => {
setOffers(response.data); setOffers(response.data);
setPagination(response.paging); setPagination(response.paging);
setJobType(response.jobType);
setIsLoading(false);
}, },
}, },
); );
@ -118,10 +124,14 @@ export default function OffersTable({
const params = new URLSearchParams({ const params = new URLSearchParams({
['yoeCategory']: value, ['yoeCategory']: value,
}); });
router.replace({ router.replace(
pathname: location.pathname, {
search: params.toString(), pathname: location.pathname,
}); search: params.toString(),
},
undefined,
{ shallow: true },
);
} }
gaEvent({ gaEvent({
action: `offers.table_filter_yoe_category_${value}`, action: `offers.table_filter_yoe_category_${value}`,
@ -169,7 +179,7 @@ export default function OffersTable({
} }
function renderHeader() { function renderHeader() {
const columns = [ let columns = [
'Company', 'Company',
'Title', 'Title',
'YOE', 'YOE',
@ -177,6 +187,18 @@ export default function OffersTable({
'Date Offered', 'Date Offered',
'Actions', 'Actions',
]; ];
if (jobType === JobType.FULLTIME) {
columns = [
'Company',
'Title',
'YOE',
'Annual TC',
'Annual Base / Bonus / Stocks',
'Date Offered',
'Actions',
];
}
return ( return (
<thead className="text-slate-700"> <thead className="text-slate-700">
<tr className="divide-x divide-slate-200"> <tr className="divide-x divide-slate-200">
@ -184,7 +206,7 @@ export default function OffersTable({
<th <th
key={header} key={header}
className={clsx( className={clsx(
'bg-slate-100 py-3 px-6', 'bg-slate-100 py-3 px-4',
// Make last column sticky. // Make last column sticky.
index === columns.length - 1 && index === columns.length - 1 &&
'sticky right-0 drop-shadow md:drop-shadow-none', 'sticky right-0 drop-shadow md:drop-shadow-none',
@ -207,20 +229,29 @@ export default function OffersTable({
return ( return (
<div className="relative w-full border border-slate-200"> <div className="relative w-full border border-slate-200">
{renderFilters()} {renderFilters()}
{offersQuery.isLoading ? ( {isLoading ? (
<div className="col-span-10 pt-4"> <div className="col-span-10 py-32">
<Spinner display="block" size="lg" /> <Spinner display="block" size="lg" />
</div> </div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto text-slate-600">
<table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left text-slate-600"> <table className="w-full divide-y divide-slate-200 border-y border-slate-200 text-left">
{renderHeader()} {renderHeader()}
<tbody> <tbody>
{offers.map((offer) => ( {offers.map((offer) => (
<OffersRow key={offer.id} row={offer} /> <OffersRow key={offer.id} jobType={jobType} row={offer} />
))} ))}
</tbody> </tbody>
</table> </table>
{!offers ||
(offers.length === 0 && (
<div className="py-16 text-lg">
<div className="flex justify-center">No data yet🥺</div>
<div className="flex justify-center">
Please try another set of filters.
</div>
</div>
))}
</div> </div>
)} )}
<OffersTablePagination <OffersTablePagination

20
apps/portal/src/pages/offers/index.tsx
Unescape View File

@ -5,16 +5,16 @@ import { Banner } from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
import OffersTable from '~/components/offers/table/OffersTable'; import OffersTable from '~/components/offers/table/OffersTable';
import CitiesTypeahead from '~/components/shared/CitiesTypeahead';
import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead'; import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
import Container from '~/components/shared/Container'; import Container from '~/components/shared/Container';
import CountriesTypeahead from '~/components/shared/CountriesTypeahead';
import type { JobTitleType } from '~/components/shared/JobTitles'; import type { JobTitleType } from '~/components/shared/JobTitles';
import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead'; import JobTitlesTypeahead from '~/components/shared/JobTitlesTypahead';
export default function OffersHomePage() { export default function OffersHomePage() {
const [jobTitleFilter, setJobTitleFilter] = useState<JobTitleType | ''>(''); const [jobTitleFilter, setJobTitleFilter] = useState<JobTitleType | ''>('');
const [companyFilter, setCompanyFilter] = useState(''); const [companyFilter, setCompanyFilter] = useState('');
const [cityFilter, setCityFilter] = useState(''); const [countryFilter, setCountryFilter] = useState('');
const { event: gaEvent } = useGoogleAnalytics(); const { event: gaEvent } = useGoogleAnalytics();
return ( return (
@ -26,21 +26,23 @@ export default function OffersHomePage() {
</Link> </Link>
. ⭐ . ⭐
</Banner> </Banner>
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4"> <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
<span> <span>
<MapPinIcon className="flex h-7 w-7" /> <MapPinIcon className="flex h-7 w-7" />
</span> </span>
<CitiesTypeahead <CountriesTypeahead
isLabelHidden={true} isLabelHidden={true}
placeholder="All Cities" placeholder="All Countries"
onSelect={(option) => { onSelect={(option) => {
if (option) { if (option) {
setCityFilter(option.value); setCountryFilter(option.value);
gaEvent({ gaEvent({
action: `offers.table_filter_city_${option.value}`, action: `offers.table_filter_country_${option.value}`,
category: 'engagement', category: 'engagement',
label: 'Filter by city', label: 'Filter by country',
}); });
} else {
setCountryFilter('');
} }
}} }}
/> />
@ -100,8 +102,8 @@ export default function OffersHomePage() {
</div> </div>
<Container className="pb-20 pt-10"> <Container className="pb-20 pt-10">
<OffersTable <OffersTable
cityFilter={cityFilter}
companyFilter={companyFilter} companyFilter={companyFilter}
countryFilter={countryFilter}
jobTitleFilter={jobTitleFilter} jobTitleFilter={jobTitleFilter}
/> />
</Container> </Container>

Write Preview
Loading…
Cancel
Save