Skip to content

Instantly share code, notes, and snippets.

@ibrahimBanat
Created September 21, 2021 06:40
Show Gist options
  • Save ibrahimBanat/1107563d711e453a8ceef3da76c99982 to your computer and use it in GitHub Desktop.
Save ibrahimBanat/1107563d711e453a8ceef3da76c99982 to your computer and use it in GitHub Desktop.
import React, {useEffect, useState} from 'react';
import Options from './Options';
import axios from 'axios';
import { useHistory } from 'react-router';
const Form = () => {
const history = useHistory();
const [isChecked, setIsChecked] = useState({
'none' : false,
'javascript': false,
'c++': false,
'java': false,
'python': false,
'c#': false,
});
const [formHandle, setFormHandle] = useState({
name: '',
email: '',
phone: '',
birth: '',
country: '',
university: '',
programmingLanguage: '',
});
let countriesArray = [
'Afghanistan',
'Albania',
'Algeria',
'Andorra',
'Angola',
'Anguilla',
'Antigua & Barbuda',
'Argentina',
'Armenia',
'Aruba',
'Australia',
'Austria',
'Azerbaijan',
'Bahamas',
'Bahrain',
'Bangladesh',
'Barbados',
'Belarus',
'Belgium',
'Belize',
'Benin',
'Bermuda',
'Bhutan',
'Bolivia',
'Bosnia & Herzegovina',
'Botswana',
'Brazil',
'British Virgin Islands',
'Brunei',
'Bulgaria',
'Burkina Faso',
'Burundi',
'Cambodia',
'Cameroon',
'Cape Verde',
'Cayman Islands',
'Chad',
'Chile',
'China',
'Colombia',
'Congo',
'Cook Islands',
'Costa Rica',
'Cote D Ivoire',
'Croatia',
'Cruise Ship',
'Cuba',
'Cyprus',
'Czech Republic',
'Denmark',
'Djibouti',
'Dominica',
'Dominican Republic',
'Ecuador',
'Egypt',
'El Salvador',
'Equatorial Guinea',
'Estonia',
'Ethiopia',
'Falkland Islands',
'Faroe Islands',
'Fiji',
'Finland',
'France',
'French Polynesia',
'French West Indies',
'Gabon',
'Gambia',
'Georgia',
'Germany',
'Ghana',
'Gibraltar',
'Greece',
'Greenland',
'Grenada',
'Guam',
'Guatemala',
'Guernsey',
'Guinea',
'Guinea Bissau',
'Guyana',
'Haiti',
'Honduras',
'Hong Kong',
'Hungary',
'Iceland',
'India',
'Indonesia',
'Iran',
'Iraq',
'Ireland',
'Isle of Man',
'Israel',
'Italy',
'Jamaica',
'Japan',
'Jersey',
'Jordan',
'Kazakhstan',
'Kenya',
'Kuwait',
'Kyrgyz Republic',
'Laos',
'Latvia',
'Lebanon',
'Lesotho',
'Liberia',
'Libya',
'Liechtenstein',
'Lithuania',
'Luxembourg',
'Macau',
'Macedonia',
'Madagascar',
'Malawi',
'Malaysia',
'Maldives',
'Mali',
'Malta',
'Mauritania',
'Mauritius',
'Mexico',
'Moldova',
'Monaco',
'Mongolia',
'Montenegro',
'Montserrat',
'Morocco',
'Mozambique',
'Namibia',
'Nepal',
'Netherlands',
'Netherlands Antilles',
'New Caledonia',
'New Zealand',
'Nicaragua',
'Niger',
'Nigeria',
'Norway',
'Oman',
'Pakistan',
'Palestine',
'Panama',
'Papua New Guinea',
'Paraguay',
'Peru',
'Philippines',
'Poland',
'Portugal',
'Puerto Rico',
'Qatar',
'Reunion',
'Romania',
'Russia',
'Rwanda',
'Saint Pierre & Miquelon',
'Samoa',
'San Marino',
'Satellite',
'Saudi Arabia',
'Senegal',
'Serbia',
'Seychelles',
'Sierra Leone',
'Singapore',
'Slovakia',
'Slovenia',
'South Africa',
'South Korea',
'Spain',
'Sri Lanka',
'St Kitts & Nevis',
'St Lucia',
'St Vincent',
'St. Lucia',
'Sudan',
'Suriname',
'Swaziland',
'Sweden',
'Switzerland',
'Syria',
'Taiwan',
'Tajikistan',
'Tanzania',
'Thailand',
"Timor L'Este",
'Togo',
'Tonga',
'Trinidad & Tobago',
'Tunisia',
'Turkey',
'Turkmenistan',
'Turks & Caicos',
'Uganda',
'Ukraine',
'United Arab Emirates',
'United Kingdom',
'Uruguay',
'Uzbekistan',
'Venezuela',
'Vietnam',
'Virgin Islands (US)',
'Yemen',
'Zambia',
'Zimbabwe',
];
let programmingLanguages = ['none','c#', 'python', 'javascript', 'java', 'c++'];
useEffect(() => {
console.log('ischeked', isChecked)
const identifiers = Object.keys(isChecked);
let filtered = identifiers.filter((identifier)=> {
console.log('a', isChecked[identifier] === true)
return isChecked[identifier] === true;
});
setFormHandle({...formHandle, programmingLanguages: [...filtered]});
},[isChecked])
const submit = (event) => {
event.preventDefault();
axios({
method: 'POST',
url: 'https://form-backend-dev.herokuapp.com/form',
data: formHandle
}).then(response => {
history.push('/successfully');
console.log(response.data);
}).catch(err => {
alert('error' + err);
})
}; // method
const handleCheck = (lang) => {
setIsChecked({...isChecked, [lang]: !isChecked.lang });
}
return (
<form onSubmit={(event)=> submit(event)} >
<div class='bg-white rounded-lg shadow sm:max-w-md sm:w-full sm:mx-auto sm:overflow-hidden'>
<div class='px-4 py-8 sm:px-10'>
{console.log(formHandle)}
<div class='relative mt-6'>
<div class='absolute inset-0 flex items-center'>
<div class='w-full border-t border-gray-300'></div>
</div>
<div class='relative flex justify-center text-sm leading-5'>
<span class='px-2 text-gray-500 bg-white'>Fill the form below</span>
</div>
</div>
<div class='mt-6'>
<div class='w-full space-y-6'>
<div class='w-full'>
<div class=' relative '>
<input
required
pattern="\b\w+\b(?:.*?\b\w+\b){2}"
type='text'
id='name'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Name from three parts'
onChange={event => {
setFormHandle({
...formHandle,
name: event.target.value,
});
}}
/>
</div>
</div>
<div class='w-full'>
<div class=' relative '>
<input
name = "email"
required
type='email'
id='email'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Email'
onChange={event => {
setFormHandle({
...formHandle,
email: event.target.value,
});
}}
/>
</div>
</div>
<div class='w-full'>
<div class=' relative '>
<input
type='tel'
id='search-form-price'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Phone Number start with international code'
onChange={event => {
setFormHandle({
...formHandle,
phone: event.target.value,
});
}}
/>
</div>
</div>
<div class='w-full'>
<div class=' relative '>
<input
required
type='date'
id='search-form-price'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Birth Date'
onChange={event => {
setFormHandle({
...formHandle,
birth: event.target.value,
});
}}
/>
</div>
</div>
<div class='w-full'>
<div class=' relative '>
<Options
required
label={'Country'}
options={countriesArray}
setFormHandle={setFormHandle}
formHandle={formHandle}
attribute={'country'}
/>
{/* <input
type='text'
id='search-form-price'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Country/State'
/> */}
</div>
</div>
<div class='w-full'>
<div class=' relative '>
<input
type='text'
id='search-form-location'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='University'
onChange={event => {
setFormHandle({
...formHandle,
university: event.target.value,
});
}}
/>
</div>
</div>
<div class='w-full'>
<div class=' relative '>
{/*<Options*/}
{/*required*/}
{/* label={'Country'}*/}
{/* options={programmingLanguages}*/}
{/* attribute={'programmingLanguage'}*/}
{/* setFormHandle={setFormHandle}*/}
{/* formHandle={formHandle}*/}
{/*/>*/}
{/* <input
type='text'
id='search-form-name'
class=' rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent'
placeholder='Programming Language'
/> */}
<p className="text-gray-500">select your programming languages: </p>
{programmingLanguages.map((lang,index) => {
return (
<div className="block">
<input value={lang} id={lang} checked={isChecked.lang} type={'checkbox'} className="mr-4" onChange={()=>handleCheck(lang)} key={`checked ${index}`}/>
<label htmlFor={lang}>{lang}</label>
</div>
)
})}
</div>
<div class=' relative '>
</div>
</div>
<div>
<span class='block w-full rounded-md shadow-sm'>
<button
type='submit'
class='py-2 px-4 bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 focus:ring-offset-indigo-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg '
>
Submit
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</form>
);
};
export default Form;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment