Skip to content
This repository has been archived by the owner on Jan 20, 2024. It is now read-only.

style: improve question submission form UI #164

Merged
merged 6 commits into from
Sep 19, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 18 additions & 14 deletions src/components/QuestionSubmissionForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,21 @@ interface QuestionSubmissionFormInputs {
location: string;
recency: string;
question: string;
'question-details': string;
'stay-anonymous': boolean;
question_details: string;
stay_anonymous: boolean;
}

export function QuestionSubmissionForm() {
// reference: https://react-hook-form.com/get-started#Quickstart
const { register, handleSubmit, reset } = useForm<QuestionSubmissionFormInputs>();
const { register, handleSubmit, reset, formState } = useForm<QuestionSubmissionFormInputs>();

const onSubmit: SubmitHandler<QuestionSubmissionFormInputs> = data => {
console.log(data);
reset();
};

return (
<div className='w-full bg-white p-4 shadow-lg sm:w-4/5 md:w-2/3 lg:w-1/2'>
<div className='w-full rounded-md bg-white p-4 shadow-md sm:w-4/5 md:w-2/3 lg:w-1/2'>
<form className='space-y-8 divide-y divide-gray-200' onSubmit={handleSubmit(onSubmit)}>
<div className='space-y-8 divide-y divide-gray-200'>
<div>
Expand All @@ -29,49 +29,52 @@ export function QuestionSubmissionForm() {
</div>

<div className='mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6'>
<div className='sm:col-span-4'>
<div className='sm:col-span-6'>
<label htmlFor='company' className='block text-sm font-medium text-gray-700'>
Company
</label>
<div className='mt-1 flex rounded-md shadow-sm'>
<div className='mt-1 flex flex-col gap-y-1'>
<input
type='text'
id='company'
className='block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
{...register('company', { required: true })}
/>
{formState.errors.company && <span className='text-xs text-red-500'>Company is required</span>}
</div>
</div>

<div className='sm:col-span-4'>
<div className='sm:col-span-6'>
<label htmlFor='position' className='block text-sm font-medium text-gray-700'>
Position
</label>
<div className='mt-1 flex rounded-md shadow-sm'>
<div className='mt-1 flex flex-col gap-y-1'>
<input
type='text'
{...register('position', { required: true })}
id='position'
className='block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
/>
{formState.errors.position && <span className='text-xs text-red-500'>Position is required</span>}
</div>
</div>

<div className='sm:col-span-4'>
<div className='sm:col-span-6'>
<label htmlFor='location' className='block text-sm font-medium text-gray-700'>
Location
</label>
<div className='mt-1 flex rounded-md shadow-sm'>
<div className='mt-1 flex flex-col gap-y-1'>
<input
type='text'
{...register('location', { required: true })}
id='location'
className='block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
/>
{formState.errors.location && <span className='text-xs text-red-500'>Location is required</span>}
</div>
</div>

<div className='sm:col-span-3'>
<div className='sm:col-span-6'>
<label htmlFor='recency' className='block text-sm font-medium text-gray-700'>
How recently was this asked?
</label>
Expand All @@ -95,13 +98,14 @@ export function QuestionSubmissionForm() {
<label htmlFor='question' className='block text-sm font-medium text-gray-700'>
Question
</label>
<div className='mt-1 flex rounded-md shadow-sm'>
<div className='mt-1 flex flex-col gap-y-1'>
<input
type='text'
{...register('question', { required: true })}
id='question'
className='block w-full min-w-0 flex-1 rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
/>
{formState.errors.question && <span className='text-xs text-red-500'>Question is required</span>}
</div>
</div>

Expand All @@ -112,7 +116,7 @@ export function QuestionSubmissionForm() {
<div className='mt-1'>
<textarea
id='question-details'
{...register('question-details')}
{...register('question_details')}
rows={3}
className='block w-full rounded-md border border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
defaultValue={''}
Expand All @@ -124,7 +128,7 @@ export function QuestionSubmissionForm() {
<div className='flex h-5 items-center'>
<input
id='stay-anonymous'
{...register('stay-anonymous')}
{...register('stay_anonymous')}
type='checkbox'
className='h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500'
/>
Expand Down
15 changes: 15 additions & 0 deletions supabase.sql
Original file line number Diff line number Diff line change
Expand Up @@ -51,3 +51,18 @@ $$;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();

-- Create a table for questions
create table questions (
id uuid default uuid_generate_v4() primary key,
created_at timestamp with time zone default timezone('utc'::text, now()) not null,
created_by uuid references auth.users(id) not null,
company text,
location text,
estimated_asked_date date,
question text,
question_details text,
stay_anonymous boolean,
position text,
is_approved boolean default false
);