mirror of
https://github.com/yangshun/tech-interview-handbook.git
synced 2025-07-30 05:34:33 +08:00
[questions][ui] Full UI for questions/answer/comment (#346)
* [questions][ui] Add DiscardDraftModal * [questions][ui] add question draft dialog form * [questions][ui] refactor bottom contribute bar * [questions][ui] landing page * [questions][ui] add similar question card * [questions][ui] use TIH dialog for discard * [questions][ui] add aria-hidden for select label * [questions][ui] extract useFormRegister hook * [questions][ui] change landing page to component * [questions][ui] load filter from query param * [question][chore] add constants.ts * [questions][ui] add app logo * [questions][ui] remove form * [questions][ui] fix dialog closing * [questions][chore] minor changes * [questions][ui] radio button * [questions][ui] add vertical scrolling * [questions][ui] Question age url param change * [questions][chore] refactor and add in todo * [questions][ui] contribute card clickable * [questions][ui] landing page github stars * [questions][ui] edit css for question card * [question][ui] add question detail page * [questions][ui] remove navbar import * [questions][ui] css changes * [questions][ui] hide sidebar * [questions][ui] contribute questions form ui * [questions][ui] question page * [questions][bug] remove button * [questions][ui] voting button size * [questions][chore] add dummy data, refactor * [questions][ui] answer card * [questions][chore] add sample data * [questions][ui] add hover * [questions][ui] clean up old href * [questions][ui] add comments & commments page * [question][feat] cache filter options to localStorage * [questions][fix] fix index refreshing constantly * [questions][ui] set fixed sample date Co-authored-by: Jeff Sieu <jeffsy00@gmail.com>
This commit is contained in:
Ren Weilin
157
apps/portal/src/components/questions/ContributeQuestionForm.tsx
Normal file
157
apps/portal/src/components/questions/ContributeQuestionForm.tsx
Normal file
@ -0,0 +1,157 @@
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import {
|
||||
BuildingOffice2Icon,
|
||||
CalendarDaysIcon,
|
||||
// UserIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {
|
||||
Button,
|
||||
Collapsible,
|
||||
Select,
|
||||
// HorizontalDivider,
|
||||
TextArea,
|
||||
TextInput,
|
||||
} from '@tih/ui';
|
||||
|
||||
import { QUESTION_TYPES } from '~/utils/questions/constants';
|
||||
import {
|
||||
useFormRegister,
|
||||
useSelectRegister,
|
||||
} from '~/utils/questions/useFormRegister';
|
||||
|
||||
// Import SimilarQuestionCard from './card/SimilarQuestionCard';
|
||||
import Checkbox from './ui-patch/Checkbox';
|
||||
|
||||
export type ContributeQuestionData = {
|
||||
company: string;
|
||||
date: Date;
|
||||
location: string;
|
||||
position: string;
|
||||
questionContent: string;
|
||||
questionType: string;
|
||||
};
|
||||
|
||||
export type ContributeQuestionFormProps = {
|
||||
onDiscard: () => void;
|
||||
onSubmit: (data: ContributeQuestionData) => void;
|
||||
};
|
||||
|
||||
export default function ContributeQuestionForm({
|
||||
onSubmit,
|
||||
onDiscard,
|
||||
}: ContributeQuestionFormProps) {
|
||||
const { register: formRegister, handleSubmit } =
|
||||
useForm<ContributeQuestionData>();
|
||||
const register = useFormRegister(formRegister);
|
||||
const selectRegister = useSelectRegister(formRegister);
|
||||
|
||||
const [canSubmit, setCanSubmit] = useState<boolean>(false);
|
||||
const handleCheckSimilarQuestions = (checked: boolean) => {
|
||||
setCanSubmit(checked);
|
||||
};
|
||||
return (
|
||||
<form
|
||||
className=" flex flex-1 flex-col items-stretch justify-center pb-[50px]"
|
||||
onSubmit={handleSubmit(onSubmit)}>
|
||||
<TextArea
|
||||
label="Question Prompt"
|
||||
placeholder="Contribute a question"
|
||||
required={true}
|
||||
rows={5}
|
||||
{...register('questionContent')}
|
||||
/>
|
||||
<div className="mt-3 mb-1 flex flex-wrap items-end gap-2">
|
||||
<div className="mr-2 min-w-[113px] max-w-[113px] flex-1">
|
||||
<Select
|
||||
defaultValue="coding"
|
||||
label="Type"
|
||||
options={QUESTION_TYPES}
|
||||
required={true}
|
||||
{...selectRegister('questionType')}
|
||||
/>
|
||||
</div>
|
||||
<div className="min-w-[150px] max-w-[300px] flex-1">
|
||||
<TextInput
|
||||
label="Company"
|
||||
required={true}
|
||||
startAddOn={BuildingOffice2Icon}
|
||||
startAddOnType="icon"
|
||||
{...register('company')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-w-[150px] max-w-[300px] flex-1">
|
||||
<TextInput
|
||||
label="Date"
|
||||
required={true}
|
||||
startAddOn={CalendarDaysIcon}
|
||||
startAddOnType="icon"
|
||||
{...register('date')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Collapsible defaultOpen={true} label="Additional info">
|
||||
<div className="justify-left flex flex-wrap items-end gap-2">
|
||||
<div className="min-w-[150px] max-w-[300px] flex-1">
|
||||
<TextInput
|
||||
label="Location"
|
||||
startAddOn={CalendarDaysIcon}
|
||||
startAddOnType="icon"
|
||||
{...register('location')}
|
||||
/>
|
||||
</div>
|
||||
{/* <div className="min-w-[150px] max-w-[200px] flex-1">
|
||||
<TextInput
|
||||
label="Position <TODO>"
|
||||
startAddOn={UserIcon}
|
||||
startAddOnType="icon"
|
||||
{...register('position')}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
</Collapsible>
|
||||
{/* <div className="w-full">
|
||||
<HorizontalDivider />
|
||||
</div>
|
||||
<h1 className="mb-3">
|
||||
Are these questions the same as yours? TODO:Change to list
|
||||
</h1>
|
||||
<div>
|
||||
<SimilarQuestionCard
|
||||
content="Given an array of integers nums and an integer target, return indices of the two numbers such that they add up. Given an array of integers nums and an integer target, return indices"
|
||||
location="Menlo Park, CA"
|
||||
receivedCount={0}
|
||||
role="Senior Engineering Manager"
|
||||
timestamp="Today"
|
||||
onSimilarQuestionClick={() => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('hi!');
|
||||
}}
|
||||
/>
|
||||
</div> */}
|
||||
<div className="bg-primary-50 fixed bottom-0 left-0 w-full px-4 py-3 sm:flex sm:flex-row sm:justify-between sm:px-6">
|
||||
<div className="mb-1 flex">
|
||||
<Checkbox
|
||||
checked={canSubmit}
|
||||
label="I have checked that my question is new"
|
||||
onChange={handleCheckSimilarQuestions}></Checkbox>
|
||||
</div>
|
||||
<div className=" flex gap-x-2">
|
||||
<button
|
||||
className="inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
type="button"
|
||||
onClick={onDiscard}>
|
||||
Discard
|
||||
</button>
|
||||
<Button
|
||||
className="bg-primary-600 hover:bg-primary-700 focus:ring-primary-500 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:bg-gray-400 sm:ml-3 sm:w-auto sm:text-sm"
|
||||
disabled={!canSubmit}
|
||||
label="Contribute"
|
||||
type="submit"
|
||||
variant="primary"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user