From 760229a9102bd2f8c9f9525862da8f63c9e88fdb Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Mon, 10 Oct 2022 13:24:32 +0800 Subject: [PATCH 1/4] [questions][ui] add date picker, company autocomplete to form --- .../questions/ContributeQuestionForm.tsx | 62 ++++++++++++------- .../[questionId]/[questionSlug]/index.tsx | 5 +- apps/portal/src/pages/questions/index.tsx | 5 +- 3 files changed, 48 insertions(+), 24 deletions(-) diff --git a/apps/portal/src/components/questions/ContributeQuestionForm.tsx b/apps/portal/src/components/questions/ContributeQuestionForm.tsx index 367f0d88..c5e7f84b 100644 --- a/apps/portal/src/components/questions/ContributeQuestionForm.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionForm.tsx @@ -1,10 +1,7 @@ +import { startOfMonth } from 'date-fns'; import { useState } from 'react'; -import { useForm } from 'react-hook-form'; -import { - BuildingOffice2Icon, - CalendarDaysIcon, - UserIcon, -} from '@heroicons/react/24/outline'; +import { Controller, useForm } from 'react-hook-form'; +import { CalendarDaysIcon, UserIcon } from '@heroicons/react/24/outline'; import type { QuestionsQuestionType } from '@prisma/client'; import { Button, Collapsible, Select, TextArea, TextInput } from '@tih/ui'; @@ -15,6 +12,9 @@ import { } from '~/utils/questions/useFormRegister'; import Checkbox from './ui-patch/Checkbox'; +import CompaniesTypeahead from '../shared/CompaniesTypeahead'; +import type { Month } from '../shared/MonthYearPicker'; +import MonthYearPicker from '../shared/MonthYearPicker'; export type ContributeQuestionData = { company: string; @@ -35,8 +35,15 @@ export default function ContributeQuestionForm({ onSubmit, onDiscard, }: ContributeQuestionFormProps) { - const { register: formRegister, handleSubmit } = - useForm(); + const { + control, + register: formRegister, + handleSubmit, + } = useForm({ + defaultValues: { + date: startOfMonth(new Date()), + }, + }); const register = useFormRegister(formRegister); const selectRegister = useSelectRegister(formRegister); @@ -66,24 +73,35 @@ export default function ContributeQuestionForm({ />
- ( + { + // TODO: To change from using company name to company id (i.e., value) + field.onChange(label); + }} + /> + )} />
- ( + + field.onChange(startOfMonth(new Date(year, month - 1))) + } + /> + )} />
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx index 92149e81..f75fb1cb 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx @@ -117,7 +117,10 @@ export default function QuestionPage() { {...question} receivedCount={0} // TODO: Change to actual value showVoteButtons={true} - timestamp={question.seenAt.toLocaleDateString()} + timestamp={question.seenAt.toLocaleDateString(undefined, { + month: 'short', + year: 'numeric', + })} upvoteCount={question.numVotes} />
diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 826a6204..5ca513fe 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/apps/portal/src/pages/questions/index.tsx @@ -267,7 +267,10 @@ export default function QuestionsHomePage() { location={question.location} receivedCount={0} // TODO: Implement received count role={question.role} - timestamp={question.seenAt.toLocaleDateString()} + timestamp={question.seenAt.toLocaleDateString(undefined, { + month: 'short', + year: 'numeric', + })} type={question.type} upvoteCount={question.numVotes} /> From 0c385bd686e3e3b293003de2abc3a8b1442649da Mon Sep 17 00:00:00 2001 From: Jeff Sieu Date: Mon, 10 Oct 2022 15:08:50 +0800 Subject: [PATCH 2/4] [questions][ui] improve mobile styling --- .../questions/ContributeQuestionCard.tsx | 2 +- .../questions/ContributeQuestionDialog.tsx | 4 +- .../questions/QuestionSearchBar.tsx | 19 +- apps/portal/src/pages/questions/index.tsx | 185 ++++++++++-------- 4 files changed, 124 insertions(+), 86 deletions(-) diff --git a/apps/portal/src/components/questions/ContributeQuestionCard.tsx b/apps/portal/src/components/questions/ContributeQuestionCard.tsx index fa11f098..73faba27 100644 --- a/apps/portal/src/components/questions/ContributeQuestionCard.tsx +++ b/apps/portal/src/components/questions/ContributeQuestionCard.tsx @@ -40,7 +40,7 @@ export default function ContributeQuestionCard({ placeholder="Contribute a question" onChange={handleOpenContribute} /> -
+
-
+
-
+
diff --git a/apps/portal/src/components/questions/QuestionSearchBar.tsx b/apps/portal/src/components/questions/QuestionSearchBar.tsx index d72ee69f..a27f043b 100644 --- a/apps/portal/src/components/questions/QuestionSearchBar.tsx +++ b/apps/portal/src/components/questions/QuestionSearchBar.tsx @@ -1,5 +1,8 @@ -import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; -import { Select, TextInput } from '@tih/ui'; +import { + AdjustmentsHorizontalIcon, + MagnifyingGlassIcon, +} from '@heroicons/react/24/outline'; +import { Button, Select, TextInput } from '@tih/ui'; export type SortOption = { label: string; @@ -7,6 +10,7 @@ export type SortOption = { }; export type QuestionSearchBarProps> = { + onFilterOptionsToggle: () => void; onSortChange?: (sortValue: SortOptions[number]['value']) => void; sortOptions: SortOptions; sortValue: SortOptions[number]['value']; @@ -18,6 +22,7 @@ export default function QuestionSearchBar< onSortChange, sortOptions, sortValue, + onFilterOptionsToggle, }: QuestionSearchBarProps) { return (
@@ -39,7 +44,15 @@ export default function QuestionSearchBar< label="Sort by" options={sortOptions} value={sortValue} - onChange={onSortChange}> + onChange={onSortChange} + /> +
); } diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 5ca513fe..d7558bb0 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/apps/portal/src/pages/questions/index.tsx @@ -1,7 +1,9 @@ import { subMonths, subYears } from 'date-fns'; import { useRouter } from 'next/router'; import { useEffect, useMemo, useState } from 'react'; +import { NoSymbolIcon } from '@heroicons/react/24/outline'; import type { QuestionsQuestionType } from '@prisma/client'; +import { SlideOut } from '@tih/ui'; import QuestionOverviewCard from '~/components/questions/card/QuestionOverviewCard'; import ContributeQuestionCard from '~/components/questions/ContributeQuestionCard'; @@ -59,17 +61,22 @@ export default function QuestionsHomePage() { : undefined; }, [selectedQuestionAge]); - const { data: questions } = trpc.useQuery([ - 'questions.questions.getQuestionsByFilter', + const { data: questions } = trpc.useQuery( + [ + 'questions.questions.getQuestionsByFilter', + { + companies: selectedCompanies, + endDate: today, + locations: selectedLocations, + questionTypes: selectedQuestionTypes, + roles: [], + startDate, + }, + ], { - companies: selectedCompanies, - endDate: today, - locations: selectedLocations, - questionTypes: selectedQuestionTypes, - roles: [], - startDate, + keepPreviousData: true, }, - ]); + ); const utils = trpc.useContext(); const { mutate: createQuestion } = trpc.useMutation( @@ -83,6 +90,7 @@ export default function QuestionsHomePage() { const [hasLanded, setHasLanded] = useState(false); const [loaded, setLoaded] = useState(false); + const [filterDrawerOpen, setFilterDrawerOpen] = useState(false); const companyFilterOptions = useMemo(() => { return COMPANIES.map((company) => ({ @@ -153,79 +161,72 @@ export default function QuestionsHomePage() { return null; } + const filterSidebar = ( +
+ { + if (checked) { + setSelectedCompanies([...selectedCompanies, optionValue]); + } else { + setSelectedCompanies( + selectedCompanies.filter((company) => company !== optionValue), + ); + } + }} + /> + { + if (checked) { + setSelectedQuestionTypes([...selectedQuestionTypes, optionValue]); + } else { + setSelectedQuestionTypes( + selectedQuestionTypes.filter( + (questionType) => questionType !== optionValue, + ), + ); + } + }} + /> + { + setSelectedQuestionAge(optionValue); + }} + /> + { + if (checked) { + setSelectedLocations([...selectedLocations, optionValue]); + } else { + setSelectedLocations( + selectedLocations.filter((location) => location !== optionValue), + ); + } + }} + /> +
+ ); + return !hasLanded ? ( ) : ( -
-
- -
-
-
+
+
+
+
+
{ createQuestion({ @@ -250,6 +251,9 @@ export default function QuestionsHomePage() { }, ]} sortValue="most-recent" + onFilterOptionsToggle={() => { + setFilterDrawerOpen(!filterDrawerOpen); + }} onSortChange={(value) => { // eslint-disable-next-line no-console console.log(value); @@ -257,7 +261,6 @@ export default function QuestionsHomePage() { /> {(questions ?? []).map((question) => ( ))} + {(questions ?? []).length === 0 && ( +
+ +

Nothing found. Try changing your search filters.

+
+ )}
+ +
+ { + setFilterDrawerOpen(false); + }}> + {filterSidebar} + +
); From acaa5dbb92dbae844e91e6dfa50cbf4161278da7 Mon Sep 17 00:00:00 2001 From: wlren Date: Mon, 10 Oct 2022 16:42:45 +0800 Subject: [PATCH 3/4] [questions][chore] minor bug fixes --- .../src/components/questions/VotingButtons.tsx | 18 ++++++++++++++++++ .../components/questions/card/QuestionCard.tsx | 5 ++++- .../answer/[answerId]/[answerSlug]/index.tsx | 2 +- .../[questionId]/[questionSlug]/index.tsx | 2 ++ apps/portal/src/pages/questions/index.tsx | 2 +- 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/apps/portal/src/components/questions/VotingButtons.tsx b/apps/portal/src/components/questions/VotingButtons.tsx index 74b9193e..51b96b34 100644 --- a/apps/portal/src/components/questions/VotingButtons.tsx +++ b/apps/portal/src/components/questions/VotingButtons.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'; import type { ButtonSize } from '@tih/ui'; import { Button } from '@tih/ui'; @@ -11,6 +12,21 @@ export default function VotingButtons({ upvoteCount, size = 'md', }: VotingButtonsProps) { + const handleUpvote = (event: React.MouseEvent) => { + event.preventDefault(); + + event.stopPropagation(); + console.log('upvote'); + }; + + const handleDownVote = (event: React.MouseEvent) => { + event.preventDefault(); + + event.stopPropagation(); + + console.log('downvote'); + }; + return (
); diff --git a/apps/portal/src/components/questions/card/QuestionCard.tsx b/apps/portal/src/components/questions/card/QuestionCard.tsx index 75e95dd2..b643f031 100644 --- a/apps/portal/src/components/questions/card/QuestionCard.tsx +++ b/apps/portal/src/components/questions/card/QuestionCard.tsx @@ -41,6 +41,7 @@ type ActionButtonProps = export type QuestionCardProps = ActionButtonProps & StatisticsProps & UpvoteProps & { + company: string; content: string; href?: string; location: string; @@ -51,6 +52,7 @@ export type QuestionCardProps = ActionButtonProps & }; export default function QuestionCard({ + company, answerCount, content, // ReceivedCount, @@ -70,7 +72,8 @@ export default function QuestionCard({ {showVoteButtons && }
-
+
+

{company}

{timestamp} · {location} · {role} diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx index aac0a7a2..d1c0e2a8 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx @@ -47,7 +47,7 @@ export default function QuestionPage() { 'questions.answers.comments.create', { onSuccess: () => { - utils.invalidateQuery([ + utils.invalidateQueries([ 'questions.answers.comments.getAnswerComments', { answerId: answerId as string }, ]); diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx index f75fb1cb..29233351 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx @@ -29,6 +29,7 @@ export default function QuestionPage() { const { register: ansRegister, handleSubmit, + reset: resetAnswer, formState: { isDirty, isValid }, } = useForm({ mode: 'onChange' }); const answerRegister = useFormRegister(ansRegister); @@ -86,6 +87,7 @@ export default function QuestionPage() { content: data.answerContent, questionId: questionId as string, }); + resetAnswer(); }; const handleSubmitComment = (data: QuestionCommentData) => { diff --git a/apps/portal/src/pages/questions/index.tsx b/apps/portal/src/pages/questions/index.tsx index 41e2cee7..d3d9efaa 100644 --- a/apps/portal/src/pages/questions/index.tsx +++ b/apps/portal/src/pages/questions/index.tsx @@ -179,7 +179,6 @@ export default function QuestionsHomePage() { if (!loaded) { return null; } - const filterSidebar = (

Date: Mon, 10 Oct 2022 16:47:48 +0800 Subject: [PATCH 4/4] [questions][bug] fix comments and answers bug not updating --- .../src/pages/questions/[questionId]/[questionSlug]/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx index 29233351..77d6c1a1 100644 --- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx +++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx @@ -126,7 +126,7 @@ export default function QuestionPage() { upvoteCount={question.numVotes} />
- +
@@ -201,7 +201,7 @@ export default function QuestionPage() { />
-

{question.numAnswers} answers

+

{(answers ?? []).length} answers

Sort by: