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

[questions][ui] sticky search bar in browse

Browse Source
pull/451/head
Jeff Sieu 3 years ago
parent 8be5227db5
commit 4c39dfee6e
1 changed files with 66 additions and 66 deletions
Show Stats Download Patch File Download Diff File

132
apps/portal/src/pages/questions/browse.tsx
Unescape View File

@ -178,7 +178,7 @@ export default function QuestionsBrowsePage() {
return undefined; return undefined;
} }
return questionsQueryData.pages.reduce( return questionsQueryData.pages.reduce(
(acc, page) => acc + page.data.length, (acc, page) => acc + (page.data.length as number),
0, 0,
); );
}, [questionsQueryData]); }, [questionsQueryData]);
@ -444,20 +444,20 @@ export default function QuestionsBrowsePage() {
<main className="flex flex-1 flex-col items-stretch"> <main className="flex flex-1 flex-col items-stretch">
<div className="flex h-full flex-1"> <div className="flex h-full flex-1">
<section className="flex min-h-0 flex-1 flex-col items-center overflow-auto"> <section className="flex min-h-0 flex-1 flex-col items-center overflow-auto">
<div className="flex min-h-0 max-w-3xl flex-1 p-4"> <div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-8">
<div className="flex flex-1 flex-col items-stretch justify-start gap-8"> <ContributeQuestionCard
<ContributeQuestionCard onSubmit={(data) => {
onSubmit={(data) => { createQuestion({
createQuestion({ companyId: data.company,
companyId: data.company, content: data.questionContent,
content: data.questionContent, location: data.location,
location: data.location, questionType: data.questionType,
questionType: data.questionType, role: data.role,
role: data.role, seenAt: data.date,
seenAt: data.date, });
}); }}
}} />
/> <div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
<QuestionSearchBar <QuestionSearchBar
sortOrderOptions={SORT_ORDERS} sortOrderOptions={SORT_ORDERS}
sortOrderValue={sortOrder} sortOrderValue={sortOrder}
@ -469,58 +469,58 @@ export default function QuestionsBrowsePage() {
onSortOrderChange={setSortOrder} onSortOrderChange={setSortOrder}
onSortTypeChange={setSortType} onSortTypeChange={setSortType}
/> />
<div className="flex flex-col gap-2 pb-4"> </div>
{(questionsQueryData?.pages ?? []).flatMap( <div className="flex flex-col gap-2 pb-4">
({ data: questions }) => {(questionsQueryData?.pages ?? []).flatMap(
questions.map((question) => { ({ data: questions }) =>
const { companyCounts, locationCounts, roleCounts } = questions.map((question) => {
relabelQuestionAggregates( const { companyCounts, locationCounts, roleCounts } =
question.aggregatedQuestionEncounters, relabelQuestionAggregates(
); question.aggregatedQuestionEncounters,
return (
<QuestionOverviewCard
key={question.id}
answerCount={question.numAnswers}
companies={companyCounts}
content={question.content}
href={`/questions/${question.id}/${createSlug(
question.content,
)}`}
locations={locationCounts}
questionId={question.id}
receivedCount={question.receivedCount}
roles={roleCounts}
timestamp={question.seenAt.toLocaleDateString(
undefined,
{
month: 'short',
year: 'numeric',
},
)}
type={question.type}
upvoteCount={question.numVotes}
/>
); );
}),
)} return (
<Button <QuestionOverviewCard
disabled={!hasNextPage || isFetchingNextPage} key={question.id}
isLoading={isFetchingNextPage} answerCount={question.numAnswers}
label={hasNextPage ? 'Load more' : 'Nothing more to load'} companies={companyCounts}
variant="tertiary" content={question.content}
onClick={() => { href={`/questions/${question.id}/${createSlug(
fetchNextPage(); question.content,
}} )}`}
/> locations={locationCounts}
{questionCount === 0 && ( questionId={question.id}
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600"> receivedCount={question.receivedCount}
<NoSymbolIcon className="h-6 w-6" /> roles={roleCounts}
<p>Nothing found.</p> timestamp={question.seenAt.toLocaleDateString(
{hasFilters && <p>Try changing your search criteria.</p>} undefined,
</div> {
)} month: 'short',
</div> year: 'numeric',
},
)}
type={question.type}
upvoteCount={question.numVotes}
/>
);
}),
)}
<Button
disabled={!hasNextPage || isFetchingNextPage}
isLoading={isFetchingNextPage}
label={hasNextPage ? 'Load more' : 'Nothing more to load'}
variant="tertiary"
onClick={() => {
fetchNextPage();
}}
/>
{questionCount === 0 && (
<div className="flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-slate-200 p-4 text-slate-600">
<NoSymbolIcon className="h-6 w-6" />
<p>Nothing found.</p>
{hasFilters && <p>Try changing your search criteria.</p>}
</div>
)}
</div> </div>
</div> </div>
</section> </section>

Write Preview
Loading…
Cancel
Save