Skip to content

Commit 0e02e23

Browse files
ziqing26ziqing26
authored
[offers][fix] add loading and fix ci (#554)
* [offers][fix] add check for loading * [offers][fix] remove navbar
1 parent 8e53e8d commit 0e02e23

File tree

2 files changed

+123
-120
lines changed

2 files changed

+123
-120
lines changed

‎apps/portal/src/components/global/AppShell.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -157,9 +157,10 @@ export default function AppShell({ children }: Props) {
157157
if (session == null) {
158158
return OffersNavigation;
159159
}
160-
return !isOffersAdminResultsLoading && isOffersAdmin
161-
? OffersNavigationAdmin
162-
: OffersNavigationAuthenticated;
160+
if (!isOffersAdminResultsLoading && isOffersAdmin) {
161+
return OffersNavigationAdmin;
162+
}
163+
return OffersNavigationAuthenticated;
163164
}
164165

165166
if (path.startsWith('/questions')) {

‎apps/portal/src/pages/offers/admin.tsx

Lines changed: 119 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Link from 'next/link';
44
import { useRouter } from 'next/router';
55
import { useState } from 'react';
66
import { MapPinIcon } from '@heroicons/react/24/outline';
7-
import { Banner } from '@tih/ui';
7+
import { Banner, Spinner } from '@tih/ui';
88

99
import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
1010
import OffersTable from '~/components/offers/admin/OffersTable';
@@ -52,127 +52,129 @@ export default function OffersHomePage({
5252
if (!isLoading && !isAuthorized) {
5353
router.push('/offers');
5454
}
55-
return (
56-
isAuthorized && (
57-
<>
58-
<Head>
59-
<title>Admin Home - Tech Offers Repo</title>
60-
</Head>
61-
<main className="flex-1 overflow-y-auto">
62-
<Banner size="sm">
63-
⭐ Check if your offer is competitive by submitting it{' '}
64-
<Link className="underline" href="/offers/submit">
65-
here
66-
</Link>
67-
. ⭐
68-
</Banner>
69-
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
70-
<span>
71-
<MapPinIcon className="flex h-7 w-7" />
72-
</span>
73-
<CountriesTypeahead
74-
isLabelHidden={true}
75-
placeholder="All Countries"
76-
onSelect={(option) => {
77-
if (option) {
78-
setCountryFilter(option.value);
79-
gaEvent({
80-
action: `offers.table_filter_country_${option.value}`,
81-
category: 'engagement',
82-
label: 'Filter by country',
83-
});
84-
} else {
85-
setCountryFilter('');
86-
}
87-
}}
88-
/>
89-
</div>
90-
<div className="bg-slate-100 py-16 px-4">
55+
return isLoading ? (
56+
<div className="flex justify-center py-32">
57+
<Spinner display="block" size="lg" />
58+
</div>
59+
) : (
60+
<>
61+
<Head>
62+
<title>Admin Home - Tech Offers Repo</title>
63+
</Head>
64+
<main className="flex-1 overflow-y-auto">
65+
<Banner size="sm">
66+
⭐ Check if your offer is competitive by submitting it{' '}
67+
<Link className="underline" href="/offers/submit">
68+
here
69+
</Link>
70+
. ⭐
71+
</Banner>
72+
<div className="text-primary-600 flex items-center justify-end space-x-1 bg-slate-100 px-4 pt-4 sm:text-lg">
73+
<span>
74+
<MapPinIcon className="flex h-7 w-7" />
75+
</span>
76+
<CountriesTypeahead
77+
isLabelHidden={true}
78+
placeholder="All Countries"
79+
onSelect={(option) => {
80+
if (option) {
81+
setCountryFilter(option.value);
82+
gaEvent({
83+
action: `offers.table_filter_country_${option.value}`,
84+
category: 'engagement',
85+
label: 'Filter by country',
86+
});
87+
} else {
88+
setCountryFilter('');
89+
}
90+
}}
91+
/>
92+
</div>
93+
<div className="bg-slate-100 py-16 px-4">
94+
<div>
9195
<div>
92-
<div>
93-
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
94-
Tech Offers Repo (Admin)
95-
</h1>
96-
</div>
97-
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
98-
Find out how good your offer is. Discover how others got their
99-
offers.
100-
</div>
96+
<h1 className="text-primary-600 text-center text-4xl font-bold sm:text-5xl">
97+
Tech Offers Repo (Admin)
98+
</h1>
99+
</div>
100+
<div className="mt-4 text-center text-lg text-slate-600 sm:text-2xl">
101+
Find out how good your offer is. Discover how others got their
102+
offers.
101103
</div>
102-
<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">
103-
<span>Viewing offers for</span>
104-
<div className="flex items-center space-x-4">
105-
<JobTitlesTypeahead
106-
isLabelHidden={true}
107-
placeholder="All Job Titles"
108-
textSize="inherit"
109-
value={
110-
selectedJobTitleId
111-
? {
112-
id: selectedJobTitleId,
113-
label: getLabelForJobTitleType(
114-
selectedJobTitleId as JobTitleType,
115-
),
116-
value: selectedJobTitleId,
117-
}
118-
: null
104+
</div>
105+
<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">
106+
<span>Viewing offers for</span>
107+
<div className="flex items-center space-x-4">
108+
<JobTitlesTypeahead
109+
isLabelHidden={true}
110+
placeholder="All Job Titles"
111+
textSize="inherit"
112+
value={
113+
selectedJobTitleId
114+
? {
115+
id: selectedJobTitleId,
116+
label: getLabelForJobTitleType(
117+
selectedJobTitleId as JobTitleType,
118+
),
119+
value: selectedJobTitleId,
120+
}
121+
: null
122+
}
123+
onSelect={(option) => {
124+
if (option) {
125+
setSelectedJobTitleId(option.id as JobTitleType);
126+
gaEvent({
127+
action: `offers.table_filter_job_title_${option.value}`,
128+
category: 'engagement',
129+
label: 'Filter by job title',
130+
});
131+
} else {
132+
setSelectedJobTitleId(null);
119133
}
120-
onSelect={(option) => {
121-
if (option) {
122-
setSelectedJobTitleId(option.id as JobTitleType);
123-
gaEvent({
124-
action: `offers.table_filter_job_title_${option.value}`,
125-
category: 'engagement',
126-
label: 'Filter by job title',
127-
});
128-
} else {
129-
setSelectedJobTitleId(null);
130-
}
131-
}}
132-
/>
133-
<span>in</span>
134-
<CompaniesTypeahead
135-
isLabelHidden={true}
136-
placeholder="All Companies"
137-
textSize="inherit"
138-
value={
139-
selectedCompanyName
140-
? {
141-
id: selectedCompanyId,
142-
label: selectedCompanyName,
143-
value: selectedCompanyId,
144-
}
145-
: null
134+
}}
135+
/>
136+
<span>in</span>
137+
<CompaniesTypeahead
138+
isLabelHidden={true}
139+
placeholder="All Companies"
140+
textSize="inherit"
141+
value={
142+
selectedCompanyName
143+
? {
144+
id: selectedCompanyId,
145+
label: selectedCompanyName,
146+
value: selectedCompanyId,
147+
}
148+
: null
149+
}
150+
onSelect={(option) => {
151+
if (option) {
152+
setSelectedCompanyId(option.id);
153+
setSelectedCompanyName(option.label);
154+
gaEvent({
155+
action: `offers.table_filter_company_${option.value}`,
156+
category: 'engagement',
157+
label: 'Filter by company',
158+
});
159+
} else {
160+
setSelectedCompanyId('');
161+
setSelectedCompanyName('');
146162
}
147-
onSelect={(option) => {
148-
if (option) {
149-
setSelectedCompanyId(option.id);
150-
setSelectedCompanyName(option.label);
151-
gaEvent({
152-
action: `offers.table_filter_company_${option.value}`,
153-
category: 'engagement',
154-
label: 'Filter by company',
155-
});
156-
} else {
157-
setSelectedCompanyId('');
158-
setSelectedCompanyName('');
159-
}
160-
}}
161-
/>
162-
</div>
163+
}}
164+
/>
163165
</div>
164166
</div>
165-
<Container className="pb-20 pt-10">
166-
<OffersTable
167-
companyFilter={selectedCompanyId}
168-
companyName={selectedCompanyName}
169-
country={country}
170-
countryFilter={countryFilter}
171-
jobTitleFilter={selectedJobTitleId ?? ''}
172-
/>
173-
</Container>
174-
</main>
175-
</>
176-
)
167+
</div>
168+
<Container className="pb-20 pt-10">
169+
<OffersTable
170+
companyFilter={selectedCompanyId}
171+
companyName={selectedCompanyName}
172+
country={country}
173+
countryFilter={countryFilter}
174+
jobTitleFilter={selectedJobTitleId ?? ''}
175+
/>
176+
</Container>
177+
</main>
178+
</>
177179
);
178180
}

0 commit comments

Comments
 (0)