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

[offers][fix] add loading and fix ci (#554)

Browse Source 
* [offers][fix] add check for loading

* [offers][fix] remove navbar
pull/556/head
Zhang Ziqing 2 years ago committed by GitHub
parent 8e53e8dd4d
commit 0e02e23015
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 123 additions and 120 deletions
Show Stats Download Patch File Download Diff File

7
apps/portal/src/components/global/AppShell.tsx
Unescape View File

@ -157,9 +157,10 @@ export default function AppShell({ children }: Props) {
if (session == null) { if (session == null) {
return OffersNavigation; return OffersNavigation;
} }
return !isOffersAdminResultsLoading && isOffersAdmin if (!isOffersAdminResultsLoading && isOffersAdmin) {
? OffersNavigationAdmin return OffersNavigationAdmin;
: OffersNavigationAuthenticated; }
return OffersNavigationAuthenticated;
} }
if (path.startsWith('/questions')) { if (path.startsWith('/questions')) {

236
apps/portal/src/pages/offers/admin.tsx
Unescape View File

@ -4,7 +4,7 @@ import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useState } from 'react'; import { useState } from 'react';
import { MapPinIcon } from '@heroicons/react/24/outline'; import { MapPinIcon } from '@heroicons/react/24/outline';
import { Banner } from '@tih/ui'; import { Banner, Spinner } from '@tih/ui';
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics'; import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
import OffersTable from '~/components/offers/admin/OffersTable'; import OffersTable from '~/components/offers/admin/OffersTable';
@ -52,127 +52,129 @@ export default function OffersHomePage({
if (!isLoading && !isAuthorized) { if (!isLoading && !isAuthorized) {
router.push('/offers'); router.push('/offers');
} }
return ( return isLoading ? (
isAuthorized && ( <div className="flex justify-center py-32">
<> <Spinner display="block" size="lg" />
<Head> </div>
<title>Admin Home - Tech Offers Repo</title> ) : (
</Head> <>
<main className="flex-1 overflow-y-auto"> <Head>
<Banner size="sm"> <title>Admin Home - Tech Offers Repo</title>
⭐ Check if your offer is competitive by submitting it{' '} </Head>
<Link className="underline" href="/offers/submit"> <main className="flex-1 overflow-y-auto">
here <Banner size="sm">
</Link> ⭐ Check if your offer is competitive by submitting it{' '}
. ⭐ <Link className="underline" href="/offers/submit">
</Banner> here
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg"> </Link>
<span> . ⭐
<MapPinIcon className="flex h-7 w-7" /> </Banner>
</span> <div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
<CountriesTypeahead <span>
isLabelHidden={true} <MapPinIcon className="flex h-7 w-7" />
placeholder="All Countries" </span>
onSelect={(option) => { <CountriesTypeahead
if (option) { isLabelHidden={true}
setCountryFilter(option.value); placeholder="All Countries"
gaEvent({ onSelect={(option) => {
action: `offers.table_filter_country_${option.value}`, if (option) {
category: 'engagement', setCountryFilter(option.value);
label: 'Filter by country', gaEvent({
}); action: `offers.table_filter_country_${option.value}`,
} else { category: 'engagement',
setCountryFilter(''); label: 'Filter by country',
} });
}} } else {
/> setCountryFilter('');
</div> }
<div className="bg-slate-100 py-16 px-4"> }}
/>
</div>
<div className="bg-slate-100 py-16 px-4">
<div>
<div> <div>
<div> <h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl"> Tech Offers Repo (Admin)
Tech Offers Repo (Admin) </h1>
</h1> </div>
</div> <div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl"> Find out how good your offer is. Discover how others got their
Find out how good your offer is. Discover how others got their offers.
offers.
</div>
</div> </div>
<div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg"> </div>
<span>Viewing offers for</span> <div className="mt-6 flex flex-col items-center justify-center space-y-2 text-sm text-slate-700 sm:mt-10 sm:flex-row sm:space-y-0 sm:space-x-4 sm:text-lg">
<div className="flex items-center space-x-4"> <span>Viewing offers for</span>
<JobTitlesTypeahead <div className="flex items-center space-x-4">
isLabelHidden={true} <JobTitlesTypeahead
placeholder="All Job Titles" isLabelHidden={true}
textSize="inherit" placeholder="All Job Titles"
value={ textSize="inherit"
selectedJobTitleId value={
? { selectedJobTitleId
id: selectedJobTitleId, ? {
label: getLabelForJobTitleType( id: selectedJobTitleId,
selectedJobTitleId as JobTitleType, label: getLabelForJobTitleType(
), selectedJobTitleId as JobTitleType,
value: selectedJobTitleId, ),
} value: selectedJobTitleId,
: null }
: null
}
onSelect={(option) => {
if (option) {
setSelectedJobTitleId(option.id as JobTitleType);
gaEvent({
action: `offers.table_filter_job_title_${option.value}`,
category: 'engagement',
label: 'Filter by job title',
});
} else {
setSelectedJobTitleId(null);
} }
onSelect={(option) => { }}
if (option) { />
setSelectedJobTitleId(option.id as JobTitleType); <span>in</span>
gaEvent({ <CompaniesTypeahead
action: `offers.table_filter_job_title_${option.value}`, isLabelHidden={true}
category: 'engagement', placeholder="All Companies"
label: 'Filter by job title', textSize="inherit"
}); value={
} else { selectedCompanyName
setSelectedJobTitleId(null); ? {
} id: selectedCompanyId,
}} label: selectedCompanyName,
/> value: selectedCompanyId,
<span>in</span> }
<CompaniesTypeahead : null
isLabelHidden={true} }
placeholder="All Companies" onSelect={(option) => {
textSize="inherit" if (option) {
value={ setSelectedCompanyId(option.id);
selectedCompanyName setSelectedCompanyName(option.label);
? { gaEvent({
id: selectedCompanyId, action: `offers.table_filter_company_${option.value}`,
label: selectedCompanyName, category: 'engagement',
value: selectedCompanyId, label: 'Filter by company',
} });
: null } else {
setSelectedCompanyId('');
setSelectedCompanyName('');
} }
onSelect={(option) => { }}
if (option) { />
setSelectedCompanyId(option.id);
setSelectedCompanyName(option.label);
gaEvent({
action: `offers.table_filter_company_${option.value}`,
category: 'engagement',
label: 'Filter by company',
});
} else {
setSelectedCompanyId('');
setSelectedCompanyName('');
}
}}
/>
</div>
</div> </div>
</div> </div>
<Container className="pb-20 pt-10"> </div>
<OffersTable <Container className="pb-20 pt-10">
companyFilter={selectedCompanyId} <OffersTable
companyName={selectedCompanyName} companyFilter={selectedCompanyId}
country={country} companyName={selectedCompanyName}
countryFilter={countryFilter} country={country}
jobTitleFilter={selectedJobTitleId ?? ''} countryFilter={countryFilter}
/> jobTitleFilter={selectedJobTitleId ?? ''}
</Container> />
</main> </Container>
</> </main>
) </>
); );
} }

Write Preview
Loading…
Cancel
Save