saving json:

aloxe · Jul 23, 2024 · 32e84a8 · 32e84a8
1 parent 25eef60
commit 32e84a8
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 22 deletions.
diff --git a/public/datavelo/api/uploadjson.php b/public/datavelo/api/uploadjson.php
@@ -15,16 +15,16 @@
         $fp = fopen($filename, "w") or die("Données non écrites");
         $write = fwrite($fp, $encodedJSON);
 
-        $data = array('status' => 201, 'message' => '🐝 File written \o/ ('.$filename.')', 'title' => $title);
+        $data = array('status' => 201, 'message' => '🐝 File written', 'title' => $title, 'filename' => $filename);
 
         fclose($fp);
         chmod($filename, 0777);
     } else {
-        $data = array("status"=> '0', "message"=> '☹ File NOT written (wrong type) '.$slug);
+        $data = array("status"=> '0', "message"=> '🐛 File NOT written (wrong type) '.$slug);
     }
 } else {
-    $data = array("status"=> '0', "message"=> '☹ File NOT written :o( '.$slug);
+    $data = array("status"=> '0', "message"=> '🐛 File NOT written '.$slug);
 }
 
 echo json_encode($data);
-?>
+?>
diff --git a/src/components/FileUpload.jsx b/src/components/FileUpload.jsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
 import Dropzone from "react-dropzone";
-import { loadGeoJson, uploadFile } from "../helpers/gpxUtil";
-import './FileUpload.css'
+import {getDistance, loadGeoJson, uploadFile, uploadJson } from "../helpers/gpxUtil";
 import { toSlug } from "../helpers/strings";
+import './FileUpload.css'
+
 
 // https://www.bezkoder.com/react-hooks-file-upload/
 
@@ -11,7 +12,7 @@ const FileUpload = () => {
     const [currentName, setcurrentName] = useState(undefined);
     const [currentGeoJson, setCurrentGeoJson] = useState(undefined);
     const [progress, setProgress] = useState(0);
-
+    const [message, setMessage] = useState("")
     const [form, setForm] = useState({
       date: '',
       title: '',
@@ -44,7 +45,12 @@ const FileUpload = () => {
         const fileName = await uploadFile(currentGpx, (event) => {
           setProgress(Math.round((100 * event.loaded) / event.total));
         })
-            setcurrentName(fileName)
+        if (fileName) {
+          setcurrentName(fileName)
+          setMessage(`💾 ${fileName} téléversé`)
+        } else {
+          setMessage('💢💢💢 PAS SAUVÉ')
+        } 
       };
 
       if (currentGpx) {
@@ -59,13 +65,20 @@ const FileUpload = () => {
     };
 
       const uploadjson = async () => {
-        console.log("CLICK!");
-        console.log("geojson", currentGeoJson);
-        // geojson.date = getDate(url)
-        // geojson.title = getTitle(url)
-        // geojson.countries = getCountries(url)
-        // geojson.distance = getDistance(geojson)
-        // geojson.slug = geojson.date + toSlug(geojson.title)
+        currentGeoJson.date = form.date;
+        currentGeoJson.title = form.title;
+        currentGeoJson.countries = form.countries;
+        currentGeoJson.distance = getDistance(currentGeoJson)
+        currentGeoJson.slug = `${currentGeoJson.date}-${toSlug(currentGeoJson.title)}`
+        const saved = await uploadJson(currentGeoJson)
+        if (saved.status === 201) {
+          setMessage(`💾 ${saved.filename}`)
+        } else {
+          setMessage(`💢💢💢 ${saved.filename} PAS SAUVÉ`)
+        }
+        setcurrentGpx(null)
+        setcurrentName("")
+        setCurrentGeoJson(null)
       };
 
       const updateName = async (e) => {
@@ -92,6 +105,10 @@ const FileUpload = () => {
                Upload GPX
             </div>
             )}
+            {message && (
+              <div className="message">
+                {message}
+              </div>)}
           </div>
         </section>
       )}

diff --git a/src/helpers/gpxUtil.js b/src/helpers/gpxUtil.js
@@ -59,15 +59,16 @@ export const loadGeoJson = async (url) => {
 export const uploadJson = async (geodata) => {
   const body = JSON.stringify(geodata)
   console.log("uploadJson", body);
-  const response = await axios.post('https://alix.guillard.fr/data/velo/api/upload.php', body, {
+  const response = await axios.post('https://alix.guillard.fr/data/velo/api/uploadjson.php', body, {
     headers: { 'Content-Type': 'application/json' }
 });
   const { data } = response;
-  if (data.status === 201) {
-    console.log("💾 " + data.title)
-  } else {
-    console.error("💢💢💢 " + data.title + " PAS SAUVÉ")
-  }
+  // if (data.status === 201) {
+  //   console.log("💾 " + data.title)
+  // } else {
+  //   console.error("💢💢💢 " + data.title + " PAS SAUVÉ")
+  // }
+  return data;
 }
 
 export const uploadFile = async (file, onUploadProgress) => {

diff --git a/src/helpers/strings.js b/src/helpers/strings.js
@@ -12,7 +12,7 @@ const sansAccent = (str) => {
   }
 
   export const toSlug = (str) => {
-    return sansAccent(str).toLowerCase()
+    return sansAccent(str.trim()).toLowerCase()
       .replace(/[ ._']/g, "-")
       .replace(/[^\w-]+/g, "")
       .replace(/-[-]+/g, "-");