[questions][feat] Add question lists (#438)
Co-authored-by: wlren <weilinwork99@gmail.com>pull/439/head
Jeff Sieu
2 years ago
committed by
GitHub
parent
839eb31d65
commit
87aa16929b
@ -0,0 +1,160 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import type { PropsWithChildren } from 'react';
|
||||||
|
import { useMemo } from 'react';
|
||||||
|
import { Fragment, useRef, useState } from 'react';
|
||||||
|
import { Menu, Transition } from '@headlessui/react';
|
||||||
|
import { CheckIcon, HeartIcon } from '@heroicons/react/20/solid';
|
||||||
|
|
||||||
|
import { trpc } from '~/utils/trpc';
|
||||||
|
|
||||||
|
export type AddToListDropdownProps = {
|
||||||
|
questionId: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AddToListDropdown({
|
||||||
|
questionId,
|
||||||
|
}: AddToListDropdownProps) {
|
||||||
|
const [menuOpened, setMenuOpened] = useState(false);
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const utils = trpc.useContext();
|
||||||
|
const { data: lists } = trpc.useQuery(['questions.lists.getListsByUser']);
|
||||||
|
|
||||||
|
const listsWithQuestionData = useMemo(() => {
|
||||||
|
return lists?.map((list) => ({
|
||||||
|
...list,
|
||||||
|
hasQuestion: list.questionEntries.some(
|
||||||
|
(entry) => entry.question.id === questionId,
|
||||||
|
),
|
||||||
|
}));
|
||||||
|
}, [lists, questionId]);
|
||||||
|
|
||||||
|
const { mutateAsync: addQuestionToList } = trpc.useMutation(
|
||||||
|
'questions.lists.createQuestionEntry',
|
||||||
|
{
|
||||||
|
// TODO: Add optimistic update
|
||||||
|
onSuccess: () => {
|
||||||
|
utils.invalidateQueries(['questions.lists.getListsByUser']);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const { mutateAsync: removeQuestionFromList } = trpc.useMutation(
|
||||||
|
'questions.lists.deleteQuestionEntry',
|
||||||
|
{
|
||||||
|
// TODO: Add optimistic update
|
||||||
|
onSuccess: () => {
|
||||||
|
utils.invalidateQueries(['questions.lists.getListsByUser']);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const addClickOutsideListener = () => {
|
||||||
|
document.addEventListener('click', handleClickOutside, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (ref.current && !ref.current.contains(event.target as Node)) {
|
||||||
|
setMenuOpened(false);
|
||||||
|
document.removeEventListener('click', handleClickOutside, true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddToList = async (listId: string) => {
|
||||||
|
await addQuestionToList({
|
||||||
|
listId,
|
||||||
|
questionId,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteFromList = async (listId: string) => {
|
||||||
|
const list = listsWithQuestionData?.find(
|
||||||
|
(listWithQuestion) => listWithQuestion.id === listId,
|
||||||
|
);
|
||||||
|
if (!list) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const entry = list.questionEntries.find(
|
||||||
|
(questionEntry) => questionEntry.question.id === questionId,
|
||||||
|
);
|
||||||
|
if (!entry) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await removeQuestionFromList({
|
||||||
|
id: entry.id,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const CustomMenuButton = ({ children }: PropsWithChildren<unknown>) => (
|
||||||
|
<button
|
||||||
|
className="focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-100"
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
addClickOutsideListener();
|
||||||
|
setMenuOpened(!menuOpened);
|
||||||
|
}}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Menu ref={ref} as="div" className="relative inline-block text-left">
|
||||||
|
<div>
|
||||||
|
<Menu.Button as={CustomMenuButton}>
|
||||||
|
<HeartIcon aria-hidden="true" className="-ml-1 mr-2 h-5 w-5" />
|
||||||
|
Add to List
|
||||||
|
</Menu.Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition ease-out duration-100"
|
||||||
|
enterFrom="transform opacity-0 scale-95"
|
||||||
|
enterTo="transform opacity-100 scale-100"
|
||||||
|
leave="transition ease-in duration-75"
|
||||||
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
|
leaveTo="transform opacity-0 scale-95"
|
||||||
|
show={menuOpened}>
|
||||||
|
<Menu.Items
|
||||||
|
className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||||
|
static={true}>
|
||||||
|
{menuOpened && (
|
||||||
|
<>
|
||||||
|
{(listsWithQuestionData ?? []).map((list) => (
|
||||||
|
<div key={list.id} className="py-1">
|
||||||
|
<Menu.Item>
|
||||||
|
{({ active }) => (
|
||||||
|
<button
|
||||||
|
className={clsx(
|
||||||
|
active
|
||||||
|
? 'bg-slate-100 text-slate-900'
|
||||||
|
: 'text-slate-700',
|
||||||
|
'group flex w-full items-center px-4 py-2 text-sm',
|
||||||
|
)}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
if (list.hasQuestion) {
|
||||||
|
handleDeleteFromList(list.id);
|
||||||
|
} else {
|
||||||
|
handleAddToList(list.id);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
{list.hasQuestion && (
|
||||||
|
<CheckIcon
|
||||||
|
aria-hidden="true"
|
||||||
|
className="mr-3 h-5 w-5 text-slate-400 group-hover:text-slate-500"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{list.name}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Menu.Items>
|
||||||
|
</Transition>
|
||||||
|
</Menu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { Button, Dialog, TextInput } from '@tih/ui';
|
||||||
|
|
||||||
|
import { useFormRegister } from '~/utils/questions/useFormRegister';
|
||||||
|
|
||||||
|
export type CreateListFormData = {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type CreateListDialogProps = {
|
||||||
|
onCancel: () => void;
|
||||||
|
onSubmit: (data: CreateListFormData) => Promise<void>;
|
||||||
|
show: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function CreateListDialog({
|
||||||
|
show,
|
||||||
|
onCancel,
|
||||||
|
onSubmit,
|
||||||
|
}: CreateListDialogProps) {
|
||||||
|
const {
|
||||||
|
register: formRegister,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isSubmitting },
|
||||||
|
reset,
|
||||||
|
} = useForm<CreateListFormData>();
|
||||||
|
const register = useFormRegister(formRegister);
|
||||||
|
|
||||||
|
const handleDialogCancel = () => {
|
||||||
|
onCancel();
|
||||||
|
reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
isShown={show}
|
||||||
|
primaryButton={undefined}
|
||||||
|
title="Create question list"
|
||||||
|
onClose={handleDialogCancel}>
|
||||||
|
<form
|
||||||
|
className="mt-5 gap-2 sm:flex sm:items-center"
|
||||||
|
onSubmit={handleSubmit(async (data) => {
|
||||||
|
await onSubmit(data);
|
||||||
|
reset();
|
||||||
|
})}>
|
||||||
|
<div className="w-full sm:max-w-xs">
|
||||||
|
<TextInput
|
||||||
|
id="listName"
|
||||||
|
isLabelHidden={true}
|
||||||
|
{...register('name')}
|
||||||
|
autoComplete="off"
|
||||||
|
label="Name"
|
||||||
|
placeholder="List name"
|
||||||
|
type="text"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
display="inline"
|
||||||
|
label="Cancel"
|
||||||
|
size="md"
|
||||||
|
variant="tertiary"
|
||||||
|
onClick={handleDialogCancel}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
display="inline"
|
||||||
|
isLoading={isSubmitting}
|
||||||
|
label="Create"
|
||||||
|
size="md"
|
||||||
|
type="submit"
|
||||||
|
variant="primary"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
import { Button, Dialog } from '@tih/ui';
|
||||||
|
|
||||||
|
export type DeleteListDialogProps = {
|
||||||
|
onCancel: () => void;
|
||||||
|
onDelete: () => void;
|
||||||
|
show: boolean;
|
||||||
|
};
|
||||||
|
export default function DeleteListDialog({
|
||||||
|
show,
|
||||||
|
onCancel,
|
||||||
|
onDelete,
|
||||||
|
}: DeleteListDialogProps) {
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
isShown={show}
|
||||||
|
primaryButton={
|
||||||
|
<Button label="Delete" variant="primary" onClick={onDelete} />
|
||||||
|
}
|
||||||
|
secondaryButton={
|
||||||
|
<Button label="Cancel" variant="tertiary" onClick={onCancel} />
|
||||||
|
}
|
||||||
|
title="Delete List"
|
||||||
|
onClose={onCancel}>
|
||||||
|
<p>
|
||||||
|
Are you sure you want to delete this list? This action cannot be undone.
|
||||||
|
</p>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import type {
|
||||||
|
Company,
|
||||||
|
QuestionsQuestion,
|
||||||
|
QuestionsQuestionVote,
|
||||||
|
} from '@prisma/client';
|
||||||
|
import { Vote } from '@prisma/client';
|
||||||
|
|
||||||
|
import type { Question } from '~/types/questions';
|
||||||
|
|
||||||
|
type QuestionWithAggregatableData = QuestionsQuestion & {
|
||||||
|
_count: {
|
||||||
|
answers: number;
|
||||||
|
comments: number;
|
||||||
|
};
|
||||||
|
encounters: Array<{
|
||||||
|
company: Company | null;
|
||||||
|
location: string;
|
||||||
|
role: string;
|
||||||
|
seenAt: Date;
|
||||||
|
}>;
|
||||||
|
user: {
|
||||||
|
name: string | null;
|
||||||
|
} | null;
|
||||||
|
votes: Array<QuestionsQuestionVote>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function createQuestionWithAggregateData(
|
||||||
|
data: QuestionWithAggregatableData,
|
||||||
|
): Question {
|
||||||
|
const votes: number = data.votes.reduce(
|
||||||
|
(previousValue: number, currentValue) => {
|
||||||
|
let result: number = previousValue;
|
||||||
|
|
||||||
|
switch (currentValue.vote) {
|
||||||
|
case Vote.UPVOTE:
|
||||||
|
result += 1;
|
||||||
|
break;
|
||||||
|
case Vote.DOWNVOTE:
|
||||||
|
result -= 1;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
0,
|
||||||
|
);
|
||||||
|
|
||||||
|
const companyCounts: Record<string, number> = {};
|
||||||
|
const locationCounts: Record<string, number> = {};
|
||||||
|
const roleCounts: Record<string, number> = {};
|
||||||
|
|
||||||
|
let latestSeenAt = data.encounters[0].seenAt;
|
||||||
|
|
||||||
|
for (const encounter of data.encounters) {
|
||||||
|
latestSeenAt =
|
||||||
|
latestSeenAt < encounter.seenAt ? encounter.seenAt : latestSeenAt;
|
||||||
|
|
||||||
|
if (!(encounter.company!.name in companyCounts)) {
|
||||||
|
companyCounts[encounter.company!.name] = 0;
|
||||||
|
}
|
||||||
|
companyCounts[encounter.company!.name] += 1;
|
||||||
|
|
||||||
|
if (!(encounter.location in locationCounts)) {
|
||||||
|
locationCounts[encounter.location] = 0;
|
||||||
|
}
|
||||||
|
locationCounts[encounter.location] += 1;
|
||||||
|
|
||||||
|
if (!(encounter.role in roleCounts)) {
|
||||||
|
roleCounts[encounter.role] = 0;
|
||||||
|
}
|
||||||
|
roleCounts[encounter.role] += 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
const question: Question = {
|
||||||
|
aggregatedQuestionEncounters: {
|
||||||
|
companyCounts,
|
||||||
|
latestSeenAt,
|
||||||
|
locationCounts,
|
||||||
|
roleCounts,
|
||||||
|
},
|
||||||
|
content: data.content,
|
||||||
|
id: data.id,
|
||||||
|
numAnswers: data._count.answers,
|
||||||
|
numComments: data._count.comments,
|
||||||
|
numVotes: votes,
|
||||||
|
receivedCount: data.encounters.length,
|
||||||
|
seenAt: data.encounters[0].seenAt,
|
||||||
|
type: data.questionType,
|
||||||
|
updatedAt: data.updatedAt,
|
||||||
|
user: data.user?.name ?? '',
|
||||||
|
};
|
||||||
|
return question;
|
||||||
|
}
|
||||||
Loading…
Reference in new issue