From 6627d42cb6a3d43a1f3435490f8ab80c61575113 Mon Sep 17 00:00:00 2001 From: suvodip ghosh Date: Fri, 12 May 2023 19:01:16 +0530 Subject: [PATCH] work-on-file-upload --- src/pages/add-school-form.jsx | 89 ++++++++++-- src/pages/add-user-form.jsx | 13 +- src/pages/add-user-form3.jsx | 213 ----------------------------- src/pages/countrySelector.jsx | 16 --- src/pages/{index.tsx => index.jsx} | 0 src/pages/sampleform.jsx | 32 +++++ src/pages/sampleform2.jsx | 37 +++++ src/pages/school-list.tsx | 1 - src/pages/user-list.tsx | 1 - 9 files changed, 152 insertions(+), 250 deletions(-) delete mode 100644 src/pages/add-user-form3.jsx delete mode 100644 src/pages/countrySelector.jsx rename src/pages/{index.tsx => index.jsx} (100%) create mode 100644 src/pages/sampleform.jsx create mode 100644 src/pages/sampleform2.jsx diff --git a/src/pages/add-school-form.jsx b/src/pages/add-school-form.jsx index b6677bd..dd9ae09 100644 --- a/src/pages/add-school-form.jsx +++ b/src/pages/add-school-form.jsx @@ -1,8 +1,5 @@ -// import React, { useState } from 'react'; -// import Image from 'next/image' import NavBar from '../components/NavBar' - -import { useId,useState, useEffect,useMemo } from 'react'; +import { useId, useState, useEffect, useMemo } from 'react'; import Select from 'react-select' import countryList from 'react-select-country-list' import 'react-phone-number-input/style.css' @@ -12,23 +9,61 @@ export default function addSchoolForm() { const [countryValue, setCountryValue] = useState('') const options = useMemo(() => countryList().getData(), []) const [phoneValue, setphoneValue] = useState() + const [allStates, setAllStates] = useState([]) + const [allCities, setAllCities] = useState([]) + + const handleSelectAllStates = stateCode => { + setAllCities([]) + fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`) + .then(res => res.json()) + .then(data => { + console.log("handleSelectAllStates:", data, options) + let newData = data && data.length > 0 && data.map(n => { + return { + label: n.name, + value: n.name + } + }) + setAllCities(newData) + }) + } + const selectCountry = countryValue => { + setAllStates([]) + fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`) + .then(res => res.json()) + .then(data => { + console.log("countryValue:", data, options) + let newData = data && data.length > 0 && data.map(n => { + return { + label: n.name, + value: n.iso2 + } + }) + setAllStates(newData) + setAllCities([]) + }) + setCountryValue(countryValue) + } // console.log(phoneValue) - const selectCountry = countryValue => { - setCountryValue(countryValue) - } + // const selectCountry = countryValue => { + // setCountryValue(countryValue) + // } const handleSubmit = async (event) => { event.preventDefault() const data = { "status":"published", name: event.target.schoolName.value, country: event.target.country.value, + state: event.target.state.value, + cities: event.target.cities.value, anual: event.target.anual.value, toddlers: event.target.toddlers.value, early_start_programme: event.target.early_start_programme.value, interakto: event.target.interakto.value, - // school_agreement: event.target.school_agreement, - // school_contact_number : event.target.school_contact_number, - // school_email_id : event.target.school_email_id, + agreement_expiry_date: event.target.agreement_expiry_date.value, + school_agreement: event.target.school_agreement.value, + school_contact_number: event.target.school_contact_number.value, + school_email_id: event.target.school_email_id.value, } const JSONdata = JSON.stringify(data) @@ -47,6 +82,7 @@ export default function addSchoolForm() { // alert(`Is this your full name: ${result.data}`) alert(`School Saved`) } + return (
@@ -64,12 +100,33 @@ export default function addSchoolForm() {
- +
- - +
+ {allStates && allStates.length > 0 && +
+ + {}} + /> +
}
@@ -145,6 +202,10 @@ export default function addSchoolForm() {
+
+ + +
diff --git a/src/pages/add-user-form.jsx b/src/pages/add-user-form.jsx index 635d0c7..843a1ce 100644 --- a/src/pages/add-user-form.jsx +++ b/src/pages/add-user-form.jsx @@ -76,9 +76,10 @@ export default function addUserForm() { } const [school, setSchool] = useState(null); useEffect(() => { - fetch(`https://management.beanstalkedu.com/items/school`).then(res => res.json()) + fetch(`https://management.beanstalkedu.com/items/school`) + .then(res => res.json()) .then(data => { - setSchool(data) + setSchool(data) }) }, []) @@ -99,7 +100,7 @@ export default function addUserForm() { start_month: event.target.start_month.value, start_date: event.target.start_date.value, end_date: event.target.end_date.value, - anual: event.target.anual, + anual: event.target.anual.value, } const JSONdata = JSON.stringify(data) const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user' @@ -186,7 +187,8 @@ export default function addUserForm() { name="country" instanceId={useId()} options={options} value={countryValue} onChange={selectCountry}/>
- {allStates && allStates.length > 0 &&
+ {allStates && allStates.length > 0 && +
{ - fetch(`https://management.beanstalkedu.com/items/school`). - then(res => res.json()) - .then(data => {setSchool(data.data) - }) - }, []) - console.log(typeof school); - const handleFormsubmit = async (event) => { - event.preventDefault() - const data = { - "status":"published", - user: event.target.user.value, - // user: event.target.user.value, - } - const JSONdata = JSON.stringify(data) - const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user' - const options = { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSONdata, - } - const response = await fetch(endpoint, options) - const result = await response.json() - alert(`Is this your full name: ${result.data}`) - } - return ( -
-
- -
-
-
- -

User Registration Form

-
-
-
- - -
-
- - - - -
- {/*
- - -
*/} -
- - -
-
- - -
-
- - -
-
- -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
- -
-
- {/*
- - -
*/} -
- -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
- -
- {/* */} -
-
- - -
-
- - -
-
- - -
-
- - {/* */} -
-
-
-
-
-
- ) -} diff --git a/src/pages/countrySelector.jsx b/src/pages/countrySelector.jsx deleted file mode 100644 index 1795bf7..0000000 --- a/src/pages/countrySelector.jsx +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useState, useMemo } from 'react' -import Select from 'react-select' -import countryList from 'react-select-country-list' - -function CountrySelector() { - const [value, setValue] = useState('') - const options = useMemo(() => countryList().getData(), []) - - const changeHandler = value => { - setValue(value) - } - - return this.upload(e)} name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' /> +
+
+ ); + } +} +export default App; \ No newline at end of file diff --git a/src/pages/sampleform2.jsx b/src/pages/sampleform2.jsx new file mode 100644 index 0000000..7396a27 --- /dev/null +++ b/src/pages/sampleform2.jsx @@ -0,0 +1,37 @@ +import React from "react"; +import { useState } from "react"; + +function FileUpload(){ + const [file, setFile] = useState() + + function handleFile(event) { + setFile(event.target.files[0]) + } + function handleUpload() { + const formData = new FormData() + formData.append('file', file) + fetch('https://management.beanstalkedu.com/items/school', { + method: "POST", + body: formData + }) + .then((respons)=> respons.json()) + .then((result)=>{ + console.log('success', result) + }) + .catch(error => { + console.error("Error:", error) + }) + } + return ( +
+
+
+ + + +
+
+
+ ) +} +export default FileUpload; \ No newline at end of file diff --git a/src/pages/school-list.tsx b/src/pages/school-list.tsx index 71c8ee3..e613e8c 100644 --- a/src/pages/school-list.tsx +++ b/src/pages/school-list.tsx @@ -65,4 +65,3 @@ const fetchData = async () => { ) } - diff --git a/src/pages/user-list.tsx b/src/pages/user-list.tsx index 3504831..fc66ad4 100644 --- a/src/pages/user-list.tsx +++ b/src/pages/user-list.tsx @@ -66,4 +66,3 @@ const fetchData = async () => { ) } -