From a6cf4a0c7ae8288012e2e2db75524f45504ee2c0 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Wed, 7 Sep 2022 20:13:24 +0530
Subject: [PATCH 1/6] refactor: use date input type

---
 src/components/QuestionSubmissionForm.tsx | 32 +++++++++--------------
 supabase.sql                              | 15 +++++++++++
 2 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index b31901a..e3a068d 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -4,10 +4,10 @@ interface QuestionSubmissionFormInputs {
 	company: string;
 	position: string;
 	location: string;
-	recency: string;
+	asked_date: Date;
 	question: string;
-	'question-details': string;
-	'stay-anonymous': boolean;
+	question_details: string;
+	stay_anonymous: boolean;
 }
 
 export function QuestionSubmissionForm() {
@@ -72,22 +72,16 @@ export function QuestionSubmissionForm() {
 							</div>
 
 							<div className='sm:col-span-3'>
-								<label htmlFor='recency' className='block text-sm font-medium text-gray-700'>
-									How recently was this asked?
+								<label htmlFor='asked-date' className='block text-sm font-medium text-gray-700'>
+									When was this asked?
 								</label>
 								<div className='mt-1'>
-									<select
-										id='recency'
-										{...register('recency', { required: true })}
-										className='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
-									>
-										<option>Within the past week</option>
-										<option>Within the past month</option>
-										<option>1-2 months ago</option>
-										<option>3-6 months ago</option>
-										<option>7-12 months ago</option>
-										<option>1+ year ago</option>
-									</select>
+									<input
+										type='date'
+										{...register('asked_date', { required: true })}
+										id='asked-date'
+										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'
+									/>
 								</div>
 							</div>
 
@@ -112,7 +106,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={''}
@@ -124,7 +118,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'
 								/>
diff --git a/supabase.sql b/supabase.sql
index 51fb9f2..6ae2be6 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -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,
+  asked_date date,
+  question text,
+  question_details text,
+  stay_anonymous boolean,
+  position text,
+  is_approved boolean default false
+);

From 165ff33c7d4ccf6120311c7c154476606fd4fa57 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Sat, 10 Sep 2022 13:43:54 +0530
Subject: [PATCH 2/6] feat: add input fields for asked month and year

---
 src/components/QuestionSubmissionForm.tsx | 95 +++++++++++++++++------
 supabase.sql                              |  3 +-
 2 files changed, 75 insertions(+), 23 deletions(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index e3a068d..7d10698 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -4,15 +4,31 @@ interface QuestionSubmissionFormInputs {
 	company: string;
 	position: string;
 	location: string;
-	asked_date: Date;
+	asked_month: string;
+	asked_year: number;
 	question: string;
 	question_details: string;
 	stay_anonymous: boolean;
 }
 
+const months = [
+	'January',
+	'February',
+	'March',
+	'April',
+	'May',
+	'June',
+	'July',
+	'August',
+	'September',
+	'October',
+	'November',
+	'December',
+] as const;
+
 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);
@@ -20,7 +36,7 @@ export function QuestionSubmissionForm() {
 	};
 
 	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>
@@ -29,73 +45,108 @@ 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'>
-								<label htmlFor='asked-date' className='block text-sm font-medium text-gray-700'>
-									When was this asked?
-								</label>
-								<div className='mt-1'>
-									<input
-										type='date'
-										{...register('asked_date', { required: true })}
-										id='asked-date'
-										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'
-									/>
+							<fieldset className='sm:col-span-6'>
+								<legend>When was this asked?</legend>
+								<div className='mt-2 flex flex-row gap-x-1'>
+									<div className='w-2/3 flex-auto'>
+										<label htmlFor='asked-month' className='block text-xs font-medium text-gray-500'>
+											Month
+										</label>
+										<div className='mt-1 flex flex-col gap-y-1'>
+											<select
+												{...register('asked_month', { required: true })}
+												id='asked-month'
+												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'
+											>
+												<option hidden={true} value=''>
+													Select
+												</option>
+												{months.map(m => (
+													<option key={m}>{m}</option>
+												))}
+											</select>
+											{formState.errors.asked_month && <span className='text-xs text-red-500'>Month is required</span>}
+										</div>
+									</div>
+									<div className='w-1/3 flex-auto'>
+										<label htmlFor='asked-year' className='block text-xs font-medium text-gray-500'>
+											Year
+										</label>
+										<div className='mt-1 flex flex-col gap-y-1'>
+											<input
+												type='tel'
+												{...register('asked_year', { required: true, pattern: /^\d{4}$/, valueAsNumber: true })}
+												id='asked-year'
+												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.asked_year && formState.errors.asked_year.type === 'required' && (
+												<span className='text-xs text-red-500'>Year is required</span>
+											)}
+											{formState.errors.asked_year && formState.errors.asked_year.type === 'pattern' && (
+												<span className='text-xs text-red-500'>Not a valid year</span>
+											)}
+										</div>
+									</div>
 								</div>
-							</div>
+							</fieldset>
 
 							<div className='sm:col-span-6'>
 								<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>
 
diff --git a/supabase.sql b/supabase.sql
index 6ae2be6..6cdebd4 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -59,7 +59,8 @@ create table questions (
   created_by uuid references auth.users(id) not null,
   company text,
   location text,
-  asked_date date,
+  asked_month text,
+	asked_year smallint,
   question text,
   question_details text,
   stay_anonymous boolean,

From ebbf87057f181cb16d5ebcf08cdf5ed4e04d0c37 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Sun, 11 Sep 2022 11:05:11 +0530
Subject: [PATCH 3/6] feat: pre-populate month and year fields

---
 src/components/QuestionSubmissionForm.tsx | 29 ++++++++++++++++-------
 supabase.sql                              |  2 +-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index 7d10698..7d22d78 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -4,7 +4,7 @@ interface QuestionSubmissionFormInputs {
 	company: string;
 	position: string;
 	location: string;
-	asked_month: string;
+	asked_month: number;
 	asked_year: number;
 	question: string;
 	question_details: string;
@@ -99,15 +99,15 @@ export function QuestionSubmissionForm() {
 										</label>
 										<div className='mt-1 flex flex-col gap-y-1'>
 											<select
-												{...register('asked_month', { required: true })}
+												{...register('asked_month', { required: true, valueAsNumber: true })}
 												id='asked-month'
+												defaultValue={new Date().getMonth()}
 												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'
 											>
-												<option hidden={true} value=''>
-													Select
-												</option>
-												{months.map(m => (
-													<option key={m}>{m}</option>
+												{months.map((month, index) => (
+													<option key={month} value={index}>
+														{month}
+													</option>
 												))}
 											</select>
 											{formState.errors.asked_month && <span className='text-xs text-red-500'>Month is required</span>}
@@ -120,14 +120,25 @@ export function QuestionSubmissionForm() {
 										<div className='mt-1 flex flex-col gap-y-1'>
 											<input
 												type='tel'
-												{...register('asked_year', { required: true, pattern: /^\d{4}$/, valueAsNumber: true })}
+												defaultValue={new Date().getFullYear()}
+												{...register('asked_year', {
+													required: true,
+													validate: value => {
+														const valueAsString = value.toString();
+														if (!valueAsString) return false;
+														const matches = valueAsString.match(/^\d{4}$/);
+														if (!matches) return false;
+														return matches.length > 0;
+													},
+													valueAsNumber: true,
+												})}
 												id='asked-year'
 												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.asked_year && formState.errors.asked_year.type === 'required' && (
 												<span className='text-xs text-red-500'>Year is required</span>
 											)}
-											{formState.errors.asked_year && formState.errors.asked_year.type === 'pattern' && (
+											{formState.errors.asked_year && formState.errors.asked_year.type === 'validate' && (
 												<span className='text-xs text-red-500'>Not a valid year</span>
 											)}
 										</div>
diff --git a/supabase.sql b/supabase.sql
index 6cdebd4..95a6572 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -59,7 +59,7 @@ create table questions (
   created_by uuid references auth.users(id) not null,
   company text,
   location text,
-  asked_month text,
+  asked_month smallint,
 	asked_year smallint,
   question text,
   question_details text,

From 183bcbf522accc0a118ef99774d9a1a342185d32 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Tue, 13 Sep 2022 09:04:34 +0530
Subject: [PATCH 4/6] feat: add computed_asked_date field

---
 src/components/QuestionSubmissionForm.tsx | 2 +-
 supabase.sql                              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index 7d22d78..c74aee8 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -31,7 +31,7 @@ export function QuestionSubmissionForm() {
 	const { register, handleSubmit, reset, formState } = useForm<QuestionSubmissionFormInputs>();
 
 	const onSubmit: SubmitHandler<QuestionSubmissionFormInputs> = data => {
-		console.log(data);
+		console.log({ computed_asked_date: new Date(data.asked_year, data.asked_month, 1), ...data });
 		reset();
 	};
 
diff --git a/supabase.sql b/supabase.sql
index 95a6572..878251f 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -61,6 +61,7 @@ create table questions (
   location text,
   asked_month smallint,
 	asked_year smallint,
+	computed_asked_date date,
   question text,
   question_details text,
   stay_anonymous boolean,

From dbe71e4af5fa904a562f6a57ac2f7581eaa57420 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Sat, 17 Sep 2022 12:55:51 +0530
Subject: [PATCH 5/6] refactor: rename computed_asked_date field to
 estimated_asked_date

---
 src/components/QuestionSubmissionForm.tsx | 4 +++-
 supabase.sql                              | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index c74aee8..e3e5c31 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -9,6 +9,7 @@ interface QuestionSubmissionFormInputs {
 	question: string;
 	question_details: string;
 	stay_anonymous: boolean;
+	estimated_asked_date: Date;
 }
 
 const months = [
@@ -31,7 +32,8 @@ export function QuestionSubmissionForm() {
 	const { register, handleSubmit, reset, formState } = useForm<QuestionSubmissionFormInputs>();
 
 	const onSubmit: SubmitHandler<QuestionSubmissionFormInputs> = data => {
-		console.log({ computed_asked_date: new Date(data.asked_year, data.asked_month, 1), ...data });
+		data.estimated_asked_date = new Date(data.asked_year, data.asked_month, 1);
+		console.log(data);
 		reset();
 	};
 
diff --git a/supabase.sql b/supabase.sql
index 878251f..0b0a7ff 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -61,7 +61,7 @@ create table questions (
   location text,
   asked_month smallint,
 	asked_year smallint,
-	computed_asked_date date,
+	estimated_asked_date date,
   question text,
   question_details text,
   stay_anonymous boolean,

From cf819e55d9b4a62cc80e929148953a4a708c7b38 Mon Sep 17 00:00:00 2001
From: Shubham Parihar <shubhamparihar391@gmail.com>
Date: Sun, 18 Sep 2022 12:34:13 +0530
Subject: [PATCH 6/6] refactor: add back recency

---
 src/components/QuestionSubmissionForm.tsx | 92 +++++------------------
 supabase.sql                              |  2 -
 2 files changed, 19 insertions(+), 75 deletions(-)

diff --git a/src/components/QuestionSubmissionForm.tsx b/src/components/QuestionSubmissionForm.tsx
index e3e5c31..7ee4c6c 100644
--- a/src/components/QuestionSubmissionForm.tsx
+++ b/src/components/QuestionSubmissionForm.tsx
@@ -4,35 +4,17 @@ interface QuestionSubmissionFormInputs {
 	company: string;
 	position: string;
 	location: string;
-	asked_month: number;
-	asked_year: number;
+	recency: string;
 	question: string;
 	question_details: string;
 	stay_anonymous: boolean;
-	estimated_asked_date: Date;
 }
 
-const months = [
-	'January',
-	'February',
-	'March',
-	'April',
-	'May',
-	'June',
-	'July',
-	'August',
-	'September',
-	'October',
-	'November',
-	'December',
-] as const;
-
 export function QuestionSubmissionForm() {
 	// reference: https://react-hook-form.com/get-started#Quickstart
 	const { register, handleSubmit, reset, formState } = useForm<QuestionSubmissionFormInputs>();
 
 	const onSubmit: SubmitHandler<QuestionSubmissionFormInputs> = data => {
-		data.estimated_asked_date = new Date(data.asked_year, data.asked_month, 1);
 		console.log(data);
 		reset();
 	};
@@ -92,61 +74,25 @@ export function QuestionSubmissionForm() {
 								</div>
 							</div>
 
-							<fieldset className='sm:col-span-6'>
-								<legend>When was this asked?</legend>
-								<div className='mt-2 flex flex-row gap-x-1'>
-									<div className='w-2/3 flex-auto'>
-										<label htmlFor='asked-month' className='block text-xs font-medium text-gray-500'>
-											Month
-										</label>
-										<div className='mt-1 flex flex-col gap-y-1'>
-											<select
-												{...register('asked_month', { required: true, valueAsNumber: true })}
-												id='asked-month'
-												defaultValue={new Date().getMonth()}
-												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'
-											>
-												{months.map((month, index) => (
-													<option key={month} value={index}>
-														{month}
-													</option>
-												))}
-											</select>
-											{formState.errors.asked_month && <span className='text-xs text-red-500'>Month is required</span>}
-										</div>
-									</div>
-									<div className='w-1/3 flex-auto'>
-										<label htmlFor='asked-year' className='block text-xs font-medium text-gray-500'>
-											Year
-										</label>
-										<div className='mt-1 flex flex-col gap-y-1'>
-											<input
-												type='tel'
-												defaultValue={new Date().getFullYear()}
-												{...register('asked_year', {
-													required: true,
-													validate: value => {
-														const valueAsString = value.toString();
-														if (!valueAsString) return false;
-														const matches = valueAsString.match(/^\d{4}$/);
-														if (!matches) return false;
-														return matches.length > 0;
-													},
-													valueAsNumber: true,
-												})}
-												id='asked-year'
-												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.asked_year && formState.errors.asked_year.type === 'required' && (
-												<span className='text-xs text-red-500'>Year is required</span>
-											)}
-											{formState.errors.asked_year && formState.errors.asked_year.type === 'validate' && (
-												<span className='text-xs text-red-500'>Not a valid year</span>
-											)}
-										</div>
-									</div>
+							<div className='sm:col-span-6'>
+								<label htmlFor='recency' className='block text-sm font-medium text-gray-700'>
+									How recently was this asked?
+								</label>
+								<div className='mt-1'>
+									<select
+										id='recency'
+										{...register('recency', { required: true })}
+										className='block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm'
+									>
+										<option>Within the past week</option>
+										<option>Within the past month</option>
+										<option>1-2 months ago</option>
+										<option>3-6 months ago</option>
+										<option>7-12 months ago</option>
+										<option>1+ year ago</option>
+									</select>
 								</div>
-							</fieldset>
+							</div>
 
 							<div className='sm:col-span-6'>
 								<label htmlFor='question' className='block text-sm font-medium text-gray-700'>
diff --git a/supabase.sql b/supabase.sql
index 0b0a7ff..82a8d6a 100644
--- a/supabase.sql
+++ b/supabase.sql
@@ -59,8 +59,6 @@ create table questions (
   created_by uuid references auth.users(id) not null,
   company text,
   location text,
-  asked_month smallint,
-	asked_year smallint,
 	estimated_asked_date date,
   question text,
   question_details text,