[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