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

Commit

Permalink
style: improve question submission form UI (#164)
Browse files Browse the repository at this point in the history 
* refactor: use date input type

* feat: add input fields for asked month and year

* feat: pre-populate month and year fields

* feat: add computed_asked_date field

* refactor: rename computed_asked_date field to estimated_asked_date

* refactor: add back recency
  • Loading branch information
@iShibi
iShibi authored Sep 19, 2022
1 parent bcdb1be commit bd83c19
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 14 deletions.
32 changes: 18 additions & 14 deletions src/components/QuestionSubmissionForm.tsx
View file
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
View file
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
);

1 comment on commit bd83c19

@vercel
Copy link

@vercel vercel bot commented on bd83c19 Sep 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

defaang – ./

defaang-ykdojo.vercel.app
defaang.vercel.app
defaang-git-main-ykdojo.vercel.app

Please sign in to comment.