Skip to content

Commit

Permalink
Merge pull request #69 from heyyakash/new
Browse files Browse the repository at this point in the history 
added required fields
  • Loading branch information
@heyyakash
heyyakash authored Nov 27, 2023
2 parents 756d8ea + 756678b commit cacc60e
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 73 deletions.
120 changes: 58 additions & 62 deletions src/components/Form/Form.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import Hero2 from '../sections/Hero2';

import SectionHeader from '../sections/partials/SectionHeader';
import { useForm } from 'react-hook-form';
import {supabase} from '../../utils/supabase';
import toast , {Toaster} from 'react-hot-toast';
import { supabase } from '../../utils/supabase';
import toast, { Toaster } from 'react-hot-toast';
import branches from "../../branches.json"

const Form = () => {
Expand All @@ -14,113 +14,109 @@ const Form = () => {
};

const [mode, setMode] = useState(false)
const [usnInput,setUsnInput] = useState("")
const [usnInput, setUsnInput] = useState("")
const [regInput, setRegInput] = useState("")
const [display, setDisplay] = useState(false)
const [inputValue, setInputValue] = useState('');
const usnRegex = /^1DS\w{7}$/
const phoneRegex = /^\d{10}$/
const admnRegex = /^23UGDS\w{4}$/

const changeMode = (e) => {
console.log(e.target.value)
if (e.target.value === "1") setMode(false)
else if (e.target.value === "Select year") {
console.log("Select Year")
setDisplay(false)
}
else setMode(true)
setDisplay(true)
}

const { register, handleSubmit,reset } = useForm()
const { register, handleSubmit, reset } = useForm()

const onSubmit = async (dataa) => {
const {usn,whatsapp,branch, year} = dataa
if(branch === "Select Branch") {
toast.error("Enter Your Branch",{duration:2500})
const { usn, whatsapp, branch, year } = dataa
if (branch === "Select Branch") {
toast.error("Enter Your Branch", { duration: 2500 })
return
}
if(year === "Select year") {
toast.error("Enter Your Year",{duration:2500})
if (year === "Select year") {
toast.error("Enter Your Year", { duration: 2500 })
return
}
if(!phoneRegex.test(whatsapp)){
toast.error("Please enter a valid 10 digit phone no.",{duration:3000})
if (!phoneRegex.test(whatsapp)) {
toast.error("Please enter a valid 10 digit phone no.", { duration: 3000 })
return
}
let db,regValue,regField;
if(dataa.year === '1'){
if(!admnRegex.test(dataa.regno)){
toast.error("Please Enter correct Admission No.", {duration:2500})
return
}
db='First';
regValue=dataa.regno;
regField='RegNo'
}
else if(dataa.year === '2')
{
if(!usnRegex.test(usn)){
toast.error("Please enter a valid USN",{duration:2500})
if (dataa.year === '1') {
if (!admnRegex.test(dataa.regno)) {
toast.error("Please Enter correct Admission No.", { duration: 2500 })
return
}
db='Second';
regValue=dataa.usn;
regField='USN';

}
else{
if(!usnRegex.test(usn)){
toast.error("Please enter a valid USN",{duration:3500})
else {
if (!usnRegex.test(usn)) {
toast.error("Please enter a valid USN", { duration: 3500 })
return
}
db='Third'
regValue=dataa.usn;
regField='USN';

}
let savingToast = toast.loading("Saving Data");
const {data,error} = await supabase.from(`${db}_Years`).insert({[regField]:regValue,Name:dataa.name,Branch:dataa.branch,Bio:dataa.bio,Year:dataa.year,Email:dataa.email,WhatsApp_No:dataa.whatsapp});
const data = await fetch("https://h1so0s7f9i.execute-api.us-east-1.amazonaws.com/Prod/", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(dataa)
})
const res = await data.json()
console.log(res)
toast.dismiss(savingToast)
if(!error){
toast.success(`Data Saved ! Good Luck for the Test`,{duration:3000});
if (!res) {
toast.success(`Data Saved ! Good Luck for the Test`, { duration: 3000 });
}
else if (error.code ==="23505"){
else if (res?.code === "23505") {
toast.error("Uh-oh!! It seems you have already registered before")
}
else
toast.error(`Uh-Oh! ${error.details}`,{duration:3000});
reset()
setDisplay(false);
toast.error(`Uh-Oh! ${res?.details}`, { duration: 3000 });
setUsnInput("")
setRegInput("")
reset()
setDisplay(false);

}

return (
<>

<Hero2 className="illustration-section-01" />

<div className="container">
<SectionHeader style={{ marginTop: "-30px" }} data={sectionHeader} className="center-content" />
<Toaster position='top-right'/>
<Toaster position='top-right' />
<form onSubmit={handleSubmit(onSubmit)} className='form'>

<div className='flex flex-col flex-center form-container'>

<div className='flex flex-col flex-center form-container'>
<div><span style = {{color:"red"}}>*</span> Fields are required</div>
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="name">Full Name</label>
<label className='form-label' htmlFor="name">Full Name <span style = {{color:"red"}}>*</span></label>
<input placeholder='Enter your full name' required {...register("name")} type="text" className='input-box' />
</div>
<div className="flex " style={{ width:"100%", gap: "1rem" }}>
<div className="flex " style={{ width: "100%", gap: "1rem" }}>
<div className='flex flex-col w-full' style={{ gap: "0.5rem" }}>
<label className='form-label' htmlFor="name">Branch</label>
<label className='form-label' htmlFor="name">Branch <span style = {{color:"red"}}>*</span></label>
<select required {...register("branch")} className='input-box'>
<option selected disabled>Select Branch</option>
{branches.map((branch, index)=> <option key = {index} className='option' value = {branch.value}>{branch.name}</option>)}
<option selected >Select Branch</option>
{branches.map((branch, index) => <option key={index} className='option' value={branch.value}>{branch.name}</option>)}

</select>
</div>
<div className='flex flex-col w-full' style={{ gap: "0.5rem" }}>
<label className='form-label' htmlFor="name">Year</label>
<label className='form-label' htmlFor="name">Year <span style = {{color:"red"}}>*</span></label>
<select required {...register("year")} onChange={(e) => changeMode(e)} className='input-box'>
<option selected disabled>Select year</option>
<option selected >Select year</option>
<option className='option' value="1">1</option>
<option className='option' value="2">2</option>
<option className='option' value="3">3</option>
Expand All @@ -131,28 +127,28 @@ const Form = () => {
{display && (<>
{mode === true ? (<>
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="usn">USN</label>
<input placeholder='Enter USN' required {...register("usn")} type="text" className='input-box' onChange={(e)=>setUsnInput(e.target.value.toUpperCase())} value={usnInput}/>
<label className='form-label' htmlFor="usn">USN <span style = {{color:"red"}}>*</span></label>
<input placeholder='Enter USN' required {...register("usn")} type="text" className='input-box' onChange={(e) => setUsnInput(e.target.value.toUpperCase())} value={usnInput} />
</div>
</>) : (<>
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="regno">Admission No. (For 1st Years)</label>
<input placeholder='Enter Admission No. (23UGDS...)' required {...register("regno")} type="text" className='input-box' onChange={(e)=>setRegInput(e.target.value.toUpperCase())} value={regInput} />
<label className='form-label' htmlFor="regno">Admission No. (For 1st Years) <span style = {{color:"red"}}>*</span></label>
<input placeholder='Enter Admission No. (23UGDS...)' required {...register("regno")} type="text" className='input-box' onChange={(e) => setRegInput(e.target.value.toUpperCase())} value={regInput} />
</div>
</>)}</>)}
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="email">Email</label>
<label className='form-label' htmlFor="email">Email <span style = {{color:"red"}}>*</span></label>
<input placeholder='Enter your email' required {...register("email")} type="email" className='input-box' />
</div>
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="whatsapp">Whatsapp No.</label>
<label className='form-label' htmlFor="whatsapp">Whatsapp No. <span style = {{color:"red"}}>*</span></label>
<input placeholder='Enter your whatsapp number' required {...register("whatsapp")} type="tel" className='input-box' />
</div>
<div className='flex flex-col' style={{ gap: "0.5rem", width: "100%" }}>
<label className='form-label' htmlFor="whatsapp">Tell us something about yourself {"("}max 100 words{"}"}</label>
<label className='form-label' htmlFor="whatsapp">Tell us something about yourself {"("}max 150 words{"}"} <span style = {{color:"red"}}>*</span></label>
<textarea placeholder='I am a....' rows={6} required {...register("bio")} type="tel" className='input-box' />
</div>
<button type = "submit" className='form-btn'>Submit</button>
<button type="submit" className='form-btn'>Submit</button>
</div>

</form>
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const Header = ({

<li>
<a
href={'https://forms.gle/yCwMHcn2iatnk9mW6'}
href={'mailto:[email protected]'}

className='button button-primary button-wide-mobile button-sm'
onClick={closeMenu}
Expand Down
2 changes: 1 addition & 1 deletion src/components/layout/partials/FooterNav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const FooterNav = ({ className, ...props }) => {
</li>
<li>
<a
href='https://forms.gle/yCwMHcn2iatnk9mW6'
href='mailto:[email protected]'
target='_blank'
>
Contact Us
Expand Down
6 changes: 3 additions & 3 deletions src/components/layout/partials/FooterSocial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const FooterSocial = ({ className, ...props }) => {
<div {...props} className={classes}>
<ul className='list-reset'>
<li>
<a href='https://www.facebook.com/PBDSCE/'>
<a target = "_blank" href='https://twitter.com/pointblank_dsce'>
<svg
clip-rule='evenodd'
fill-rule='evenodd'
Expand All @@ -28,7 +28,7 @@ const FooterSocial = ({ className, ...props }) => {
</a>
</li>
<li>
<a href='https://www.linkedin.com/company/point-blank-d/mycompany/'>
<a target = "_blank" href='https://www.linkedin.com/company/point-blank-d/mycompany/'>
<svg
height='30'
width='30'
Expand All @@ -49,7 +49,7 @@ const FooterSocial = ({ className, ...props }) => {
</a>
</li>
<li>
<a href='https://www.instagram.com/pointblank_dsce/'>
<a target = "_blank" href='https://www.instagram.com/pointblank_dsce/'>
<svg
width='30'
height='30'
Expand Down
6 changes: 0 additions & 6 deletions src/utils/supabase.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +0,0 @@
import {createClient} from '@supabase/supabase-js';

const supabaseUrl = "https://zrqthmvuigrisuvfwzrl.supabase.co";
const supabaseAnon = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InpycXRobXZ1aWdyaXN1dmZ3enJsIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDA3NzAzNzksImV4cCI6MjAxNjM0NjM3OX0.3N1wnp2gURw4_Jf95lLz2zIuN1N8jvA-VU5_tC9FFqM";

export const supabase = createClient(supabaseUrl,supabaseAnon);

0 comments on commit cacc60e

Please sign in to comment.