|
|
|
|
@ -5,11 +5,13 @@ import { useEffect, useMemo, useState } from 'react';
|
|
|
|
|
import { Bars3BottomLeftIcon } from '@heroicons/react/20/solid';
|
|
|
|
|
import { NoSymbolIcon } from '@heroicons/react/24/outline';
|
|
|
|
|
import type { QuestionsQuestionType } from '@prisma/client';
|
|
|
|
|
import type { TypeaheadOption } from '@tih/ui';
|
|
|
|
|
import { Button, SlideOut } from '@tih/ui';
|
|
|
|
|
|
|
|
|
|
import QuestionOverviewCard from '~/components/questions/card/question/QuestionOverviewCard';
|
|
|
|
|
import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard';
|
|
|
|
|
import FilterSection from '~/components/questions/filter/FilterSection';
|
|
|
|
|
import PaginationLoadMoreButton from '~/components/questions/PaginationLoadMoreButton';
|
|
|
|
|
import QuestionSearchBar from '~/components/questions/QuestionSearchBar';
|
|
|
|
|
import CompanyTypeahead from '~/components/questions/typeahead/CompanyTypeahead';
|
|
|
|
|
import LocationTypeahead from '~/components/questions/typeahead/LocationTypeahead';
|
|
|
|
|
@ -17,8 +19,6 @@ import RoleTypeahead from '~/components/questions/typeahead/RoleTypeahead';
|
|
|
|
|
import { JobTitleLabels } from '~/components/shared/JobTitles';
|
|
|
|
|
|
|
|
|
|
import type { QuestionAge } from '~/utils/questions/constants';
|
|
|
|
|
import { SORT_TYPES } from '~/utils/questions/constants';
|
|
|
|
|
import { SORT_ORDERS } from '~/utils/questions/constants';
|
|
|
|
|
import { APP_TITLE } from '~/utils/questions/constants';
|
|
|
|
|
import { QUESTION_AGES, QUESTION_TYPES } from '~/utils/questions/constants';
|
|
|
|
|
import createSlug from '~/utils/questions/createSlug';
|
|
|
|
|
@ -29,14 +29,29 @@ import {
|
|
|
|
|
} from '~/utils/questions/useSearchParam';
|
|
|
|
|
import { trpc } from '~/utils/trpc';
|
|
|
|
|
|
|
|
|
|
import type { Location } from '~/types/questions.d';
|
|
|
|
|
import { SortType } from '~/types/questions.d';
|
|
|
|
|
import { SortOrder } from '~/types/questions.d';
|
|
|
|
|
|
|
|
|
|
function locationToSlug(value: Location & TypeaheadOption): string {
|
|
|
|
|
return [
|
|
|
|
|
value.countryId,
|
|
|
|
|
value.stateId,
|
|
|
|
|
value.cityId,
|
|
|
|
|
value.id,
|
|
|
|
|
value.label,
|
|
|
|
|
value.value,
|
|
|
|
|
].join('-');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function QuestionsBrowsePage() {
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
const [selectedCompanies, setSelectedCompanies, areCompaniesInitialized] =
|
|
|
|
|
useSearchParam('companies');
|
|
|
|
|
const [
|
|
|
|
|
selectedCompanySlugs,
|
|
|
|
|
setSelectedCompanySlugs,
|
|
|
|
|
areCompaniesInitialized,
|
|
|
|
|
] = useSearchParam('companies');
|
|
|
|
|
const [
|
|
|
|
|
selectedQuestionTypes,
|
|
|
|
|
setSelectedQuestionTypes,
|
|
|
|
|
@ -70,7 +85,13 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
const [selectedRoles, setSelectedRoles, areRolesInitialized] =
|
|
|
|
|
useSearchParam('roles');
|
|
|
|
|
const [selectedLocations, setSelectedLocations, areLocationsInitialized] =
|
|
|
|
|
useSearchParam('locations');
|
|
|
|
|
useSearchParam<Location & TypeaheadOption>('locations', {
|
|
|
|
|
paramToString: locationToSlug,
|
|
|
|
|
stringToParam: (param) => {
|
|
|
|
|
const [countryId, stateId, cityId, id, label, value] = param.split('-');
|
|
|
|
|
return { cityId, countryId, id, label, stateId, value };
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const [sortOrder, setSortOrder, isSortOrderInitialized] =
|
|
|
|
|
useSearchParamSingle<SortOrder>('sortOrder', {
|
|
|
|
|
@ -122,13 +143,13 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
|
|
|
|
|
const hasFilters = useMemo(
|
|
|
|
|
() =>
|
|
|
|
|
selectedCompanies.length > 0 ||
|
|
|
|
|
selectedCompanySlugs.length > 0 ||
|
|
|
|
|
selectedQuestionTypes.length > 0 ||
|
|
|
|
|
selectedQuestionAge !== 'all' ||
|
|
|
|
|
selectedRoles.length > 0 ||
|
|
|
|
|
selectedLocations.length > 0,
|
|
|
|
|
[
|
|
|
|
|
selectedCompanies,
|
|
|
|
|
selectedCompanySlugs,
|
|
|
|
|
selectedQuestionTypes,
|
|
|
|
|
selectedQuestionAge,
|
|
|
|
|
selectedRoles,
|
|
|
|
|
@ -147,24 +168,24 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
: undefined;
|
|
|
|
|
}, [selectedQuestionAge]);
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
data: questionsQueryData,
|
|
|
|
|
fetchNextPage,
|
|
|
|
|
hasNextPage,
|
|
|
|
|
isFetchingNextPage,
|
|
|
|
|
} = trpc.useInfiniteQuery(
|
|
|
|
|
const questionsInfiniteQuery = trpc.useInfiniteQuery(
|
|
|
|
|
[
|
|
|
|
|
'questions.questions.getQuestionsByFilter',
|
|
|
|
|
{
|
|
|
|
|
companyNames: selectedCompanies,
|
|
|
|
|
// TODO: Enable filtering by countryIds and stateIds
|
|
|
|
|
cityIds: selectedLocations
|
|
|
|
|
.map(({ cityId }) => cityId)
|
|
|
|
|
.filter((id) => id !== undefined) as Array<string>,
|
|
|
|
|
companyIds: selectedCompanySlugs.map((slug) => slug.split('_')[0]),
|
|
|
|
|
countryIds: [],
|
|
|
|
|
endDate: today,
|
|
|
|
|
limit: 10,
|
|
|
|
|
locations: selectedLocations,
|
|
|
|
|
questionTypes: selectedQuestionTypes,
|
|
|
|
|
roles: selectedRoles,
|
|
|
|
|
sortOrder,
|
|
|
|
|
sortType,
|
|
|
|
|
startDate,
|
|
|
|
|
stateIds: [],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
{
|
|
|
|
|
@ -173,6 +194,8 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
},
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const { data: questionsQueryData } = questionsInfiniteQuery;
|
|
|
|
|
|
|
|
|
|
const questionCount = useMemo(() => {
|
|
|
|
|
if (!questionsQueryData) {
|
|
|
|
|
return undefined;
|
|
|
|
|
@ -239,8 +262,8 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
Router.replace({
|
|
|
|
|
pathname,
|
|
|
|
|
query: {
|
|
|
|
|
companies: selectedCompanies,
|
|
|
|
|
locations: selectedLocations,
|
|
|
|
|
companies: selectedCompanySlugs,
|
|
|
|
|
locations: selectedLocations.map(locationToSlug),
|
|
|
|
|
questionAge: selectedQuestionAge,
|
|
|
|
|
questionTypes: selectedQuestionTypes,
|
|
|
|
|
roles: selectedRoles,
|
|
|
|
|
@ -255,7 +278,7 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
areSearchOptionsInitialized,
|
|
|
|
|
loaded,
|
|
|
|
|
pathname,
|
|
|
|
|
selectedCompanies,
|
|
|
|
|
selectedCompanySlugs,
|
|
|
|
|
selectedRoles,
|
|
|
|
|
selectedLocations,
|
|
|
|
|
selectedQuestionAge,
|
|
|
|
|
@ -265,13 +288,16 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
const selectedCompanyOptions = useMemo(() => {
|
|
|
|
|
return selectedCompanies.map((company) => ({
|
|
|
|
|
checked: true,
|
|
|
|
|
id: company,
|
|
|
|
|
label: company,
|
|
|
|
|
value: company,
|
|
|
|
|
}));
|
|
|
|
|
}, [selectedCompanies]);
|
|
|
|
|
return selectedCompanySlugs.map((company) => {
|
|
|
|
|
const [id, label] = company.split('_');
|
|
|
|
|
return {
|
|
|
|
|
checked: true,
|
|
|
|
|
id,
|
|
|
|
|
label,
|
|
|
|
|
value: id,
|
|
|
|
|
};
|
|
|
|
|
});
|
|
|
|
|
}, [selectedCompanySlugs]);
|
|
|
|
|
|
|
|
|
|
const selectedRoleOptions = useMemo(() => {
|
|
|
|
|
return selectedRoles.map((role) => ({
|
|
|
|
|
@ -285,9 +311,7 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
const selectedLocationOptions = useMemo(() => {
|
|
|
|
|
return selectedLocations.map((location) => ({
|
|
|
|
|
checked: true,
|
|
|
|
|
id: location,
|
|
|
|
|
label: location,
|
|
|
|
|
value: location,
|
|
|
|
|
...location,
|
|
|
|
|
}));
|
|
|
|
|
}, [selectedLocations]);
|
|
|
|
|
|
|
|
|
|
@ -305,7 +329,7 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
label="Clear filters"
|
|
|
|
|
variant="tertiary"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setSelectedCompanies([]);
|
|
|
|
|
setSelectedCompanySlugs([]);
|
|
|
|
|
setSelectedQuestionTypes([]);
|
|
|
|
|
setSelectedQuestionAge('all');
|
|
|
|
|
setSelectedRoles([]);
|
|
|
|
|
@ -320,8 +344,8 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
{...field}
|
|
|
|
|
clearOnSelect={true}
|
|
|
|
|
filterOption={(option) => {
|
|
|
|
|
return !selectedCompanies.some((company) => {
|
|
|
|
|
return company === option.value;
|
|
|
|
|
return !selectedCompanySlugs.some((companySlug) => {
|
|
|
|
|
return companySlug === `${option.id}_${option.label}`;
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
isLabelHidden={true}
|
|
|
|
|
@ -337,10 +361,15 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
)}
|
|
|
|
|
onOptionChange={(option) => {
|
|
|
|
|
if (option.checked) {
|
|
|
|
|
setSelectedCompanies([...selectedCompanies, option.label]);
|
|
|
|
|
setSelectedCompanySlugs([
|
|
|
|
|
...selectedCompanySlugs,
|
|
|
|
|
`${option.id}_${option.label}`,
|
|
|
|
|
]);
|
|
|
|
|
} else {
|
|
|
|
|
setSelectedCompanies(
|
|
|
|
|
selectedCompanies.filter((company) => company !== option.label),
|
|
|
|
|
setSelectedCompanySlugs(
|
|
|
|
|
selectedCompanySlugs.filter(
|
|
|
|
|
(companySlug) => companySlug !== `${option.id}_${option.label}`,
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
@ -348,7 +377,10 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
<FilterSection
|
|
|
|
|
label="Roles"
|
|
|
|
|
options={selectedRoleOptions}
|
|
|
|
|
renderInput={({ onOptionChange, field: { ref: _, ...field } }) => (
|
|
|
|
|
renderInput={({
|
|
|
|
|
onOptionChange,
|
|
|
|
|
field: { ref: _, onChange: __, ...field },
|
|
|
|
|
}) => (
|
|
|
|
|
<RoleTypeahead
|
|
|
|
|
{...field}
|
|
|
|
|
clearOnSelect={true}
|
|
|
|
|
@ -406,13 +438,16 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
<FilterSection
|
|
|
|
|
label="Locations"
|
|
|
|
|
options={selectedLocationOptions}
|
|
|
|
|
renderInput={({ onOptionChange, field: { ref: _, ...field } }) => (
|
|
|
|
|
renderInput={({
|
|
|
|
|
onOptionChange,
|
|
|
|
|
field: { ref: _, onChange: __, ...field },
|
|
|
|
|
}) => (
|
|
|
|
|
<LocationTypeahead
|
|
|
|
|
{...field}
|
|
|
|
|
clearOnSelect={true}
|
|
|
|
|
filterOption={(option) => {
|
|
|
|
|
return !selectedLocations.some((location) => {
|
|
|
|
|
return location === option.value;
|
|
|
|
|
return location.id === option.id;
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
isLabelHidden={true}
|
|
|
|
|
@ -428,10 +463,14 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
)}
|
|
|
|
|
onOptionChange={(option) => {
|
|
|
|
|
if (option.checked) {
|
|
|
|
|
setSelectedLocations([...selectedLocations, option.value]);
|
|
|
|
|
// TODO: Fix type inference, then remove the `as` cast.
|
|
|
|
|
setSelectedLocations([
|
|
|
|
|
...selectedLocations,
|
|
|
|
|
option as unknown as Location & TypeaheadOption,
|
|
|
|
|
]);
|
|
|
|
|
} else {
|
|
|
|
|
setSelectedLocations(
|
|
|
|
|
selectedLocations.filter((role) => role !== option.value),
|
|
|
|
|
selectedLocations.filter((location) => location.id !== option.id),
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
@ -450,21 +489,22 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
<div className="m-4 flex max-w-3xl flex-1 flex-col items-stretch justify-start gap-8">
|
|
|
|
|
<ContributeQuestionCard
|
|
|
|
|
onSubmit={(data) => {
|
|
|
|
|
const { cityId, countryId, stateId } = data.location;
|
|
|
|
|
createQuestion({
|
|
|
|
|
cityId,
|
|
|
|
|
companyId: data.company,
|
|
|
|
|
content: data.questionContent,
|
|
|
|
|
location: data.location,
|
|
|
|
|
countryId,
|
|
|
|
|
questionType: data.questionType,
|
|
|
|
|
role: data.role,
|
|
|
|
|
role: data.role.value,
|
|
|
|
|
seenAt: data.date,
|
|
|
|
|
stateId,
|
|
|
|
|
});
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<div className="sticky top-0 border-b border-slate-300 bg-slate-50 py-4">
|
|
|
|
|
<QuestionSearchBar
|
|
|
|
|
sortOrderOptions={SORT_ORDERS}
|
|
|
|
|
sortOrderValue={sortOrder}
|
|
|
|
|
sortTypeOptions={SORT_TYPES}
|
|
|
|
|
sortTypeValue={sortType}
|
|
|
|
|
onFilterOptionsToggle={() => {
|
|
|
|
|
setFilterDrawerOpen(!filterDrawerOpen);
|
|
|
|
|
@ -477,7 +517,7 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
{(questionsQueryData?.pages ?? []).flatMap(
|
|
|
|
|
({ data: questions }) =>
|
|
|
|
|
questions.map((question) => {
|
|
|
|
|
const { companyCounts, locationCounts, roleCounts } =
|
|
|
|
|
const { companyCounts, countryCounts, roleCounts } =
|
|
|
|
|
relabelQuestionAggregates(
|
|
|
|
|
question.aggregatedQuestionEncounters,
|
|
|
|
|
);
|
|
|
|
|
@ -488,10 +528,10 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
answerCount={question.numAnswers}
|
|
|
|
|
companies={companyCounts}
|
|
|
|
|
content={question.content}
|
|
|
|
|
countries={countryCounts}
|
|
|
|
|
href={`/questions/${question.id}/${createSlug(
|
|
|
|
|
question.content,
|
|
|
|
|
)}`}
|
|
|
|
|
locations={locationCounts}
|
|
|
|
|
questionId={question.id}
|
|
|
|
|
receivedCount={question.receivedCount}
|
|
|
|
|
roles={roleCounts}
|
|
|
|
|
@ -508,15 +548,7 @@ export default function QuestionsBrowsePage() {
|
|
|
|
|
);
|
|
|
|
|
}),
|
|
|
|
|
)}
|
|
|
|
|
<Button
|
|
|
|
|
disabled={!hasNextPage || isFetchingNextPage}
|
|
|
|
|
isLoading={isFetchingNextPage}
|
|
|
|
|
label={hasNextPage ? 'Load more' : 'Nothing more to load'}
|
|
|
|
|
variant="tertiary"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
fetchNextPage();
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<PaginationLoadMoreButton query={questionsInfiniteQuery} />
|
|
|
|
|
{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" />
|
|
|
|
|
|
hpkoh
2 years ago
committed by
GitHub