- 
+ = ({ files, onSelectedChange, propagateDelete}) => {
+const FileList: React.FC = ({
+ files,
+ onSelectedChange,
+ propagateDelete,
+}) => {
const [selectedFile, setSelectedFile] = useState(null);
- const handleSelectFile = (file: File|null, index: number) => {
+ const handleSelectFile = (file: File | null) => {
setSelectedFile(file);
- onSelectedChange(file)
+ onSelectedChange(file);
};
- const handleDelete = (file: File, index:number)=>{
- if(selectedFile===file){
- setSelectedFile(null)
- propagateDelete(file, false)
- }else{
- propagateDelete(file, files[files.length-1]===file);
+ const handleDelete = (file: File) => {
+ if (selectedFile === file) {
+ setSelectedFile(null);
+ propagateDelete(file, false);
+ } else {
+ propagateDelete(file, files[files.length - 1] === file);
}
-
- }
+ };
return (
selected ? handleSelectFile(file, index): handleSelectFile(null,-1)}
- onDelete={()=>handleDelete(file, index)}
+ onClick={(selected) =>
+ selected ? handleSelectFile(file) : handleSelectFile(null)
+ }
+ onDelete={() => handleDelete(file)}
/>
))}
diff --git a/src/Pages/HomePage/HomePage.css b/src/Pages/HomePage/HomePage.css
index 4e9cb87c..24e041d1 100644
--- a/src/Pages/HomePage/HomePage.css
+++ b/src/Pages/HomePage/HomePage.css
@@ -29,4 +29,4 @@
.submit-btn{
margin-top:50px;
grid-area: c;
-}
\ No newline at end of file
+}
diff --git a/src/Pages/HomePage/HomePage.tsx b/src/Pages/HomePage/HomePage.tsx
index 240cdeeb..6600123a 100644
--- a/src/Pages/HomePage/HomePage.tsx
+++ b/src/Pages/HomePage/HomePage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEvent } from "react";
+import { useState } from "react";
import "./HomePage.css";
import DragDropFileInput from "../../Components/DragDropFileInput/DragDropFileInput";
import FileList from "../../Components/FileList/FileList";
@@ -7,51 +7,7 @@ import { useNavigate } from "react-router-dom";
function HomePage() {
const [files, setFiles] = useState([]);
-const [form, setForm] = useState({
- company_name: "",
- company_address: "",
- company_website: "",
- company_phone_number: "",
- manufacturer_name: "",
- manufacturer_address: "",
- manufacturer_website: "",
- manufacturer_phone_number: "",
- fertiliser_name: "",
- fertiliser_registration_number: "",
- fertiliser_lot_number: "",
- fertiliser_npk: "",
- fertiliser_precautionary_fr: "",
- fertiliser_precautionary_en: "",
- fertiliser_instructions_fr: "",
- fertiliser_instructions_en: "",
- fertiliser_ingredients_fr: "",
- fertiliser_ingredients_en: "",
- fertiliser_specifications_fr: "",
- fertiliser_specifications_en: "",
- fertiliser_cautions_fr: "",
- fertiliser_cautions_en: "",
- fertiliser_recommendation_fr: "",
- fertiliser_recommendation_en: "",
- fertiliser_first_aid_fr: "",
- fertiliser_first_aid_en: "",
- fertiliser_warranty_fr: "",
- fertiliser_warranty_en: "",
- fertiliser_danger_fr: "",
- fertiliser_danger_en: "",
- fertiliser_guaranteed_analysis: "",
- nutrient_in_guaranteed_analysis: "",
- percentage_in_guaranteed_analysis: "",
- fertiliser_weight: "",
- fertiliser_density: "",
- fertiliser_volume: "",
- fertiliser_label_all_other_text_fr: "",
- all_other_text_fr_1: "",
- all_other_text_fr_2: "",
- fertiliser_label_all_other_text_en: "",
- all_other_text_en_1: "",
- all_other_text_en_2: "",
- });
- const [toShow, setShow] = useState("")
+ const [toShow, setShow] = useState("");
const reader = new FileReader();
reader.onload = (e) => {
@@ -59,48 +15,53 @@ const [form, setForm] = useState({
setShow(newFile);
};
-
- const handleChange = (e: ChangeEvent) => {
+ /**
+ const handleChange = (e: React.ChangeEvent) => {
const field = e.target! as HTMLInputElement;
setForm({ ...form, [field.name]: field.value });
};
-
+ */
const handlePhotoChange = (newFiles: File[]) => {
if (newFiles!.length > 0) {
setFiles([...files, ...newFiles]);
reader.readAsDataURL(newFiles[0]!);
- }else{
+ } else {
setShow("");
}
-
};
- const handleSelectedChange = (selection: File|null)=>{
- if(selection){
+ const handleSelectedChange = (selection: File | null) => {
+ if (selection) {
reader.readAsDataURL(selection);
- }else{
+ } else {
setShow("");
}
- }
+ };
const navigate = useNavigate();
- const Submit = ()=>{
- navigate('/Json',{state:{data:files}});
- }
+ const Submit = () => {
+ navigate("/Json", { state: { data: files } });
+ };
- const handleDeletion = (toDelete:File, wasShown:boolean)=>{
- setFiles(files.filter(file=>file!==toDelete))
- if(wasShown){
- setShow("")
+ const handleDeletion = (toDelete: File, wasShown: boolean) => {
+ setFiles(files.filter((file) => file !== toDelete));
+ if (wasShown) {
+ setShow("");
}
- }
+ };
return (
(null);
+ const location = useLocation();
+ const files: File[] = location.state.data;
+ const [uploadStarted, startUpload] = useState(false);
-function JsonPage(){
- const [loading, setLoading] = useState(true)
- const [form, setForm]=useState({})
- const [fetchError, setError]=useState(null)
- const location = useLocation();
- const files:File[] = location.state.data;
- const [uploadStarted, startUpload] = useState(false);
-
-
- const api_url = "https://shiny-goggles-75q6p5xj4wwfp6gg-5000.app.github.dev/"
- const upload_all = async ()=>{
- const res = []
- for(let i=0; i {
+ const res = [];
+ for (let i = 0; i < files.length; i++) {
+ const formData = new FormData();
+ formData.append("file", files[i]);
+ res.push(
+ await fetch(api_url + "/upload", {
+ method: "POST",
+ headers: {
+ // if needed, add headers here
+ },
+ body: formData,
+ }),
+ );
}
- useEffect(()=>{
- if(!uploadStarted){
- startUpload(true);
- upload_all().then(()=>{
- fetch(api_url+"/analyze",{
- method:'GET',
- headers:{
-
- }
- }).then((response:Response)=>{
- response.json().then((data)=>{
- setForm(data)
- setLoading(false)
- }).catch(e=>{
- setLoading(false)
- setError(e)
- console.log(e)
- })
- })
+ return res;
+ };
+ useEffect(() => {
+ if (!uploadStarted) {
+ startUpload(true);
+ upload_all().then(() => {
+ fetch(api_url + "/analyze", {
+ method: "GET",
+ headers: {},
+ }).then((response: Response) => {
+ response
+ .json()
+ .then((data) => {
+ setForm(data);
+ setLoading(false);
})
- }
- },[])
- return (
-
+
diff --git a/src/Components/FileList/FileList.css b/src/Components/FileList/FileList.css
index f7fecb6d..bd05c158 100644
--- a/src/Components/FileList/FileList.css
+++ b/src/Components/FileList/FileList.css
@@ -56,4 +56,3 @@
.overlay.active {
visibility: visible; /* Show overlay when an image is selected */
}
-
\ No newline at end of file
diff --git a/src/Components/FileList/FileList.tsx b/src/Components/FileList/FileList.tsx
index a1ae1f9c..8d76b123 100644
--- a/src/Components/FileList/FileList.tsx
+++ b/src/Components/FileList/FileList.tsx
@@ -1,43 +1,48 @@
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
import "./FileList.css";
import FileElement from "./FileElement/FileElement";
interface FileListProps {
files: File[];
- onSelectedChange: (file:File|null)=>void;
- propagateDelete: (file:File, wasShown:boolean)=>void;
+ onSelectedChange: (file: File | null) => void;
+ propagateDelete: (file: File, wasShown: boolean) => void;
}
-const FileList: React.FC{file.name}
No element to show
- {[...files].map((file: File, index: number, array: File[]) => (
+ {[...files].map((file: File, index: number) => (
-
- );
+ .catch((e) => {
+ setLoading(false);
+ setError(e);
+ console.log(e);
+ });
+ });
+ });
+ }
+ }, []);
+ return (
+
-
-
- - Votre fichier est en cours d'analyse - Your file is being analyzed -
-{(fetchError ? {fetchError.message}
: JSON.stringify(form, null, 2))}
-
+
+ );
}
-export default JsonPage
\ No newline at end of file
+export default JsonPage;
diff --git a/src/assets/6.svg b/src/assets/6.svg
index 971841cb..de98ddc9 100644
--- a/src/assets/6.svg
+++ b/src/assets/6.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/assets/react.svg b/src/assets/react.svg
index 6c87de9b..8e0e0f15 100644
--- a/src/assets/react.svg
+++ b/src/assets/react.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/src/index.css b/src/index.css
index aef1e4c3..36278edd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,4 +82,4 @@ button:focus-visible {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-}
\ No newline at end of file
+}
+
+
+ Votre fichier est en cours d'analyse Your file is being analyzed
+
+ {fetchError ? (
+ {fetchError.message}
+ ) : (
+ JSON.stringify(form, null, 2)
+ )}
+
+