@ -1,6 +1,7 @@
import { startOfMonth } from 'date-fns' ; import { startOfMonth } from 'date-fns' ;
import { use State } from 'react' ; import { use Effect, use State } from 'react' ;
import { Controller , useForm } from 'react-hook-form' ; import { Controller , useForm } from 'react-hook-form' ;
import { ArrowPathIcon } from '@heroicons/react/20/solid' ;
import type { QuestionsQuestionType } from '@prisma/client' ; import type { QuestionsQuestionType } from '@prisma/client' ;
import { import {
Button ,
Button ,
@ -15,7 +16,9 @@ import {
useFormRegister ,
useFormRegister ,
useSelectRegister ,
useSelectRegister ,
} from '~/utils/questions/useFormRegister' ; } from '~/utils/questions/useFormRegister' ;
import { trpc } from '~/utils/trpc' ;
import SimilarQuestionCard from '../card/question/SimilarQuestionCard' ;
import CompanyTypeahead from '../typeahead/CompanyTypeahead' ; import CompanyTypeahead from '../typeahead/CompanyTypeahead' ;
import LocationTypeahead from '../typeahead/LocationTypeahead' ; import LocationTypeahead from '../typeahead/LocationTypeahead' ;
import RoleTypeahead from '../typeahead/RoleTypeahead' ; import RoleTypeahead from '../typeahead/RoleTypeahead' ;
@ -45,18 +48,39 @@ export default function ContributeQuestionForm({
control ,
control ,
register : formRegister ,
register : formRegister ,
handleSubmit ,
handleSubmit ,
watch ,
} = useForm < ContributeQuestionData > ( {
} = useForm < ContributeQuestionData > ( {
defaultValues : {
defaultValues : {
date : startOfMonth ( new Date ( ) ) ,
date : startOfMonth ( new Date ( ) ) ,
} ,
} ,
} ) ;
} ) ;
const [ contentToCheck , setContentToCheck ] = useState ( '' ) ;
const { data : similarQuestions } = trpc . useQuery (
[
'questions.questions.getRelatedQuestionsByContent' ,
{ content : contentToCheck } ,
] ,
{
keepPreviousData : true ,
} ,
) ;
const questionContent = watch ( 'questionContent' ) ;
const register = useFormRegister ( formRegister ) ;
const register = useFormRegister ( formRegister ) ;
const selectRegister = useSelectRegister ( formRegister ) ;
const selectRegister = useSelectRegister ( formRegister ) ;
const [ canSubmit , setCanSubmit ] = useState < boolean > ( false ) ;
const [ c heckedSimilar, setCheckedSimilar ] = useState < boolean > ( false ) ;
const handleCheckSimilarQuestions = ( checked : boolean ) = > {
const handleCheckSimilarQuestions = ( checked : boolean ) = > {
setCanSubmit ( checked ) ;
setC heckedSimilar ( checked ) ;
} ;
} ;
useEffect ( ( ) = > {
if ( questionContent !== contentToCheck ) {
setCheckedSimilar ( false ) ;
}
} , [ questionContent , contentToCheck ] ) ;
return (
return (
< div className = "flex flex-col justify-between gap-4" >
< div className = "flex flex-col justify-between gap-4" >
< form
< form
@ -153,35 +177,55 @@ export default function ContributeQuestionForm({
/ >
/ >
< / div >
< / div >
< / div >
< / div >
{ / * < d i v c l a s s N a m e = " w - f u l l " >
< div className = "w-full" >
< HorizontalDivider / >
< HorizontalDivider / >
< / div >
< / div >
< h1 className = "mb-3" >
< h2
Are these questions the same as yours ? TODO :Change to list
className = " text - primary - 900 mb - 3
< / h1 >
text - lg font - semibold
< div >
" >
< SimilarQuestionCard
Are these questions the same as yours ?
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"
< / h2 >
location = "Menlo Park, CA"
< Button
receivedCount = { 0 }
addonPosition = "start"
role = "Senior Engineering Manager"
disabled = { questionContent === contentToCheck }
timestamp = "Today"
icon = { ArrowPathIcon }
onSimilarQuestionClick = { ( ) = > {
label = "Refresh similar questions"
// eslint-disable-next-line no-console
variant = "primary"
console . log ( 'hi!' ) ;
onClick = { ( ) = > {
setContentToCheck ( questionContent ) ;
} }
} }
/ >
/ >
< / div > * / }
< div className = "flex flex-col gap-y-2" >
{ similarQuestions ? . map ( ( question ) = > (
< SimilarQuestionCard
key = { question . id }
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"
questionId = { question . id }
timestamp = "Today"
type = "CODING"
onSimilarQuestionClick = { ( ) = > {
// eslint-disable-next-line no-console
console . log ( 'hi!' ) ;
} }
/ >
) ) }
< / div >
< div
< div
className = "bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
className = "bg-primary-50 flex w-full flex-col gap-y-2 py-3 shadow-[0_0_0_100vmax_theme(colors.primary.50)] sm:flex-row sm:justify-between"
style = { {
style = { {
// Hack to make the background bleed outside the container
// Hack to make the background bleed outside the container
clipPath : 'inset(0 -100vmax)' ,
clipPath : 'inset(0 -100vmax)' ,
} } >
} } >
< div className = "my-2 flex sm:my-0" >
< div className = "my-2 flex items-center sm:my-0">
< CheckboxInput
< CheckboxInput
label = "I have checked that my question is new"
disabled = { questionContent !== contentToCheck }
value = { canSubmit }
label = {
questionContent !== contentToCheck
? 'I have checked that my question is new (Refresh similar questions to proceed)'
: 'I have checked that my question is new'
}
value = { checkedSimilar }
onChange = { handleCheckSimilarQuestions }
onChange = { handleCheckSimilarQuestions }
/ >
/ >
< / div >
< / div >
@ -194,7 +238,7 @@ export default function ContributeQuestionForm({
< / button >
< / button >
< 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-slate-400 sm:ml-3 sm:w-auto sm:text-sm"
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-slate-400 sm:ml-3 sm:w-auto sm:text-sm"
disabled = { ! c anSubmit }
disabled = { ! c heckedSimilar }
label = "Contribute"
label = "Contribute"
type = "submit"
type = "submit"
variant = "primary" > < / Button >
variant = "primary" > < / Button >
Jeff Sieu
3 years ago