mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-04 15:28:12 +08:00
[offers][fix] add loading and fix ci (#554)
* [offers][fix] add check for loading * [offers][fix] remove navbar
This commit is contained in:
Zhang Ziqing
@ -157,9 +157,10 @@ export default function AppShell({ children }: Props) {
|
||||
if (session == null) {
|
||||
return OffersNavigation;
|
||||
}
|
||||
return !isOffersAdminResultsLoading && isOffersAdmin
|
||||
? OffersNavigationAdmin
|
||||
: OffersNavigationAuthenticated;
|
||||
if (!isOffersAdminResultsLoading && isOffersAdmin) {
|
||||
return OffersNavigationAdmin;
|
||||
}
|
||||
return OffersNavigationAuthenticated;
|
||||
}
|
||||
|
||||
if (path.startsWith('/questions')) {
|
||||
|
||||
@ -4,7 +4,7 @@ import Link from 'next/link';
|
||||
import { useRouter } from 'next/router';
|
||||
import { useState } from 'react';
|
||||
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 OffersTable from '~/components/offers/admin/OffersTable';
|
||||
@ -52,127 +52,129 @@ export default function OffersHomePage({
|
||||
if (!isLoading && !isAuthorized) {
|
||||
router.push('/offers');
|
||||
}
|
||||
return (
|
||||
isAuthorized && (
|
||||
<>
|
||||
<Head>
|
||||
<title>Admin Home - Tech Offers Repo</title>
|
||||
</Head>
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<Banner size="sm">
|
||||
⭐ Check if your offer is competitive by submitting it{' '}
|
||||
<Link className="underline" href="/offers/submit">
|
||||
here
|
||||
</Link>
|
||||
. ⭐
|
||||
</Banner>
|
||||
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
|
||||
<span>
|
||||
<MapPinIcon className="flex h-7 w-7" />
|
||||
</span>
|
||||
<CountriesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Countries"
|
||||
onSelect={(option) => {
|
||||
if (option) {
|
||||
setCountryFilter(option.value);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_country_${option.value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by country',
|
||||
});
|
||||
} else {
|
||||
setCountryFilter('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-slate-100 py-16 px-4">
|
||||
return isLoading ? (
|
||||
<div className="flex justify-center py-32">
|
||||
<Spinner display="block" size="lg" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Head>
|
||||
<title>Admin Home - Tech Offers Repo</title>
|
||||
</Head>
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<Banner size="sm">
|
||||
⭐ Check if your offer is competitive by submitting it{' '}
|
||||
<Link className="underline" href="/offers/submit">
|
||||
here
|
||||
</Link>
|
||||
. ⭐
|
||||
</Banner>
|
||||
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
|
||||
<span>
|
||||
<MapPinIcon className="flex h-7 w-7" />
|
||||
</span>
|
||||
<CountriesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Countries"
|
||||
onSelect={(option) => {
|
||||
if (option) {
|
||||
setCountryFilter(option.value);
|
||||
gaEvent({
|
||||
action: `offers.table_filter_country_${option.value}`,
|
||||
category: 'engagement',
|
||||
label: 'Filter by country',
|
||||
});
|
||||
} else {
|
||||
setCountryFilter('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-slate-100 py-16 px-4">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
|
||||
Tech Offers Repo (Admin)
|
||||
</h1>
|
||||
</div>
|
||||
<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
|
||||
offers.
|
||||
</div>
|
||||
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
|
||||
Tech Offers Repo (Admin)
|
||||
</h1>
|
||||
</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">
|
||||
<span>Viewing offers for</span>
|
||||
<div className="flex items-center space-x-4">
|
||||
<JobTitlesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Job Titles"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedJobTitleId
|
||||
? {
|
||||
id: selectedJobTitleId,
|
||||
label: getLabelForJobTitleType(
|
||||
selectedJobTitleId as JobTitleType,
|
||||
),
|
||||
value: selectedJobTitleId,
|
||||
}
|
||||
: 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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>in</span>
|
||||
<CompaniesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Companies"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedCompanyName
|
||||
? {
|
||||
id: selectedCompanyId,
|
||||
label: selectedCompanyName,
|
||||
value: selectedCompanyId,
|
||||
}
|
||||
: null
|
||||
}
|
||||
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 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
|
||||
offers.
|
||||
</div>
|
||||
</div>
|
||||
<Container className="pb-20 pt-10">
|
||||
<OffersTable
|
||||
companyFilter={selectedCompanyId}
|
||||
companyName={selectedCompanyName}
|
||||
country={country}
|
||||
countryFilter={countryFilter}
|
||||
jobTitleFilter={selectedJobTitleId ?? ''}
|
||||
/>
|
||||
</Container>
|
||||
</main>
|
||||
</>
|
||||
)
|
||||
<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">
|
||||
<span>Viewing offers for</span>
|
||||
<div className="flex items-center space-x-4">
|
||||
<JobTitlesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Job Titles"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedJobTitleId
|
||||
? {
|
||||
id: selectedJobTitleId,
|
||||
label: getLabelForJobTitleType(
|
||||
selectedJobTitleId as JobTitleType,
|
||||
),
|
||||
value: selectedJobTitleId,
|
||||
}
|
||||
: 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);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>in</span>
|
||||
<CompaniesTypeahead
|
||||
isLabelHidden={true}
|
||||
placeholder="All Companies"
|
||||
textSize="inherit"
|
||||
value={
|
||||
selectedCompanyName
|
||||
? {
|
||||
id: selectedCompanyId,
|
||||
label: selectedCompanyName,
|
||||
value: selectedCompanyId,
|
||||
}
|
||||
: null
|
||||
}
|
||||
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>
|
||||
<Container className="pb-20 pt-10">
|
||||
<OffersTable
|
||||
companyFilter={selectedCompanyId}
|
||||
companyName={selectedCompanyName}
|
||||
country={country}
|
||||
countryFilter={countryFilter}
|
||||
jobTitleFilter={selectedJobTitleId ?? ''}
|
||||
/>
|
||||
</Container>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user