editSchool

package.json

@@ -13,6 +13,7 @@
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "autoprefixer": "10.4.14",
+    "csv-parser": "^3.0.0",
     "eslint": "8.39.0",
     "eslint-config-next": "13.3.1",
     "formidable": "^2.1.1",

src/pages/edit-school.jsx

@@ -1,71 +1,74 @@
 import NavBar from '../components/NavBar'
 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'
-import PhoneInput from 'react-phone-number-input'
 import { useRouter } from 'next/router'
 
 
 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)
-  }
-  const router = useRouter()
-  let sid= router.query.school
-
 
  
-  if(sid){
+  const router = useRouter()
+  // const sid= router.query.school
+  // const query = useQuery();
+
+ 
     const [school, setSchool] = useState([]);
-    const fetchData = async () => {
+    // if(sid){console.log(sid)}
-      const response = await fetch("https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school="+sid);
+    // const getSchoolData = async (sid) => {
-      const data = await response.json();
+     
-      return setSchool(data.data);
+      
+    //     let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
+    //     console.log(sid)
+    //     const response = await fetch(getSchoolApi);
+    //     const data = await response.json();
+    //     let schoolData = data && data.length > 0 
+    //     return setSchool(schoolData.data);
+      
+    // }
+    // console.log(sid)
+  //  useEffect(() => {
+  //   // async function getSchoolData() {
+  //   //   // You can await here
+  //   //   const response = await MyAPI.getData(someId);
+  //   //   // ...
+  //   // }
+  //   // getSchoolData();
+  //   // if(!router.isReady) return;
+  //   // const { sid } = router.query;
+  //   // console.log(sid);
+  //   // // getSchoolData();
+  //   // let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
+  //   // console.log(sid)
+  //   // await fetch(getSchoolApi);
+  //   if (!query) {
+  //     return;
+  //   }
+  //   fetch(`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`)
+  //   .then(res => res.json())
+  //     .then(data => {
+  //       console.log("handleSelectAllStates:", data, options)
+  //       let newData = data && data.length > 0 
+  //       setSchool(newData)
+  //     })
+  // },[]) 
+  useEffect(()=>{
+    // if(router.query.school<1) {
+    // const { sid } = router.query;
+    // setSchool(sid)
+    if(router.query.school && router.query.school>1 ){
+  fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
+    .then(res => res.json())
+      .then(data => {
+        
+        // console.log("handleSelectAllStates:", data, options)
+        // let newData = data && data.length > 0 
+         console.log(router.query.school); setSchool(data)
+      })
     }
-    console.log(school)
   
-    useEffect(() => {
+  }, [router.query.school]);
-      fetchData();
+
-    },[])
+  console.log(school);
-  }
-    
     // console.log(phoneValue)
     // const selectCountry = countryValue => {
     //         setCountryValue(countryValue)
@@ -126,32 +129,22 @@ export default function addSchoolForm() {
                     </div>
                     <div className='flex flex-col w-full'>
                 <label htmlFor="country" className='text-xl font-bold'>Country</label>
-                <Select
+                <input type="text" name="country" />
-                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+
-                  name="country" instanceId={useId()} options={options} value={countryValue}
-                  onChange={selectCountry}/>
               </div>
-              {allStates && allStates.length > 0 && 
               <div className='flex flex-col w-full'>
                 <label htmlFor="state" className='text-xl font-bold'>State</label>
-                <Select
+                <input type="text" name="state"  />
-                  className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+
-                  name="state" options={allStates} value={allStates[0].name}
+              </div>
-                  onChange={handleSelectAllStates}/>
-              </div>}
-              {
-                allCities && allCities.length > 0 && 
                 <div className='flex flex-col w-full'>
                   <label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
-                  <Select
+                  <input type="text" name="cities" />
-                    className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
+                  
-                    name="cities" options={allCities} value={allCities[0].name}
+                </div>
-                    // onChange={() => {}}
-                  />
-                </div>}
                     <div className='flex flex-col w-full'>
                         <label htmlFor="phone" className='text-xl font-bold'> Phone</label>
-                        <PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
+                        <input type="text" name="phone" />
                     </div>
                     <div className='flex flex-col w-full pt-4'>
                         <label htmlFor="anual" className='text-xl font-bold'>Anual</label>

yarn.lock

@@ -933,6 +933,13 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
+csv-parser@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-3.0.0.tgz#b88a6256d79e090a97a1b56451f9327b01d710e7"
+  integrity sha512-s6OYSXAK3IdKqYO33y09jhypG/bSDHPuyCme/IdEHfWpLf/jKcpitVFyOC6UemgGk8v7Q5u2XE0vvwmanxhGlQ==
+  dependencies:
+    minimist "^1.2.0"
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"