diff --git a/src/pages/add-user-form.jsx b/src/pages/add-user-form.jsx index 55d926f..5dbc29e 100644 --- a/src/pages/add-user-form.jsx +++ b/src/pages/add-user-form.jsx @@ -1,6 +1,6 @@ // https://management.beanstalkedu.com/items/school // import React from 'react'; -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' @@ -10,139 +10,199 @@ import PhoneInput from 'react-phone-number-input' import NavBar from '../components/NavBar'; // import { Inter } from 'next/font/google' -export default function addUserForm (){ - const [countryValue, setCountryValue] = useState('') - const options = useMemo(() => countryList().getData(), []) - const [phoneValue, setphoneValue] = useState() - let [individualValue=true, setindividualValue] = useState() +const typeParent = "parent" + +export default function addUserForm() { + const [allLanguage, setLanguage] = useState([ + {lang: "Assamese", value:false}, + {lang: "Bengali", value:false}, + {lang: "English", value:false}, + {lang: "Hindi", value:false}, + {lang: "telegu", value:false}, + {lang: "Punjabi", value:false}, + {lang: "malayalam", value:false}, + {lang: "tamil", value:false}, + {lang: "kannada", value:false}, + {lang: "gujrati", value:false}, + ]) + const [currentType, setCurrentType] = useState(typeParent) + const [countryValue, setCountryValue] = useState('') + const options = useMemo(() => countryList().getData(), []) + const [phoneValue, setphoneValue] = useState() + let [individualValue = true, setindividualValue] = useState() // console.log(phoneValue) - const selectCountry = countryValue => { - setCountryValue(countryValue) + const selectCountry = countryValue => { + setCountryValue(countryValue) + } + + const individual = (event) => { + // console.log(event.target.schoolID.value) + + setindividualValue(individualValue = false) + } + const [school, setSchool] = useState(null); + useEffect(() => { + fetch(`https://management.beanstalkedu.com/items/school`).then(res => res.json()) + .then(data => { + setSchool(data) + + }) + }, []) + // console.log(school); + + const handleFormsubmit = async (event) => { + event.preventDefault() + const data = { + "status": "published", + type: event.target.type.value, + name: event.target.name.value, + user: event.target.email.value, + country: event.target.country.value, + phone: event.target.phone.value, + school: event.target.schoolID.value, + class: event.target.class.value, + lang: event.target.lang.value, + 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, } - - const individual = (event) => { - // console.log(event.target.schoolID.value) - - setindividualValue(individualValue=false) + 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 [school, setSchool] = useState(null); - useEffect(() => { - fetch(`https://management.beanstalkedu.com/items/school`). - then(res => res.json()) - .then(data => { - setSchool(data) - - }) - }, []) - // console.log(school); + const response = await fetch(endpoint, options) + const result = await response.json() + alert(`Is this your full name: ${result.data}`) + } + const handleOnLanguageChange = (e, v) => { + let idx = allLanguage.findIndex(o => o.lang === e.target.value); + let newAllLang = [...allLanguage] + newAllLang[idx].value = true - const handleFormsubmit = async (event) => { - event.preventDefault() - const data = { - "status":"published", - type: event.target.type.value, - name: event.target.name.value, - user: event.target.email.value, - country: event.target.country.value, - phone: event.target.phone.value, - school: event.target.schoolID.value, - class: event.target.class.value, - lang: event.target.lang.value, - 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, + + if ([typeParent, "teacher"].includes(currentType)) { + let counter = 0 + newAllLang.forEach((n, idx) => { + if (n.value) { + counter++ } - 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}`) + }) + if (counter >= 2) { + newAllLang.forEach((n, idx) => { + newAllLang[idx].disabled = true + }) } + } + setLanguage(newAllLang) + } + const handleTypeOnChange = (e) => { + let newAllLang = [...allLanguage] + newAllLang.forEach((n, idx) => { + newAllLang[idx].value = false + newAllLang[idx].disabled = false + }) + setLanguage(newAllLang) + setCurrentType(e.target.value) + } return ( -
-
- +
+
+
-
-
- -

User Registration Form

-
-
-
- - + + + + + +
+
+ + +
+
+ + +
+
+ + + + {school && school.data.map(data => + + )} + +
+
+ + +
+ {individualValue && +
+
+ + -
-
- - -
-
- - -
-
- - - - {school && school.data.map(data=> - - )} - -
-
- - -
- { individualValue && -
-
- - -
- {/*
+
+ {/*
@@ -163,86 +223,64 @@ export default function addUserForm (){
*/} -
- -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-   - -
-
-
-
- - -
-
- - -
-
- - -
+
+ +
+ {allLanguage && allLanguage.length && allLanguage.map(n => { + return ( +
+   + +
+ ) + })}
- } -
- - {/* */} +
+
+ + +
+
+ + +
+
+ + +
- -
+ } +
+ + {/* */} +
+ +
-
+
) }