From afbf9f0bea8aebf8d0e8fc167b7cf6203f188808 Mon Sep 17 00:00:00 2001
From: Theo DUPIN <Theo.DUPIN@etu.uca.fr>
Date: Sat, 7 Jan 2023 10:15:48 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20image=20base=20de=20donn=C3=A9es=20pas?=
 =?UTF-8?q?=20ok?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server-api/api.js                  |  12 +
 src/pages/Compte.js                |  77 +++-
 src/styles/components/_compte.scss | 679 ++++++++++++++---------------
 3 files changed, 410 insertions(+), 358 deletions(-)

diff --git a/server-api/api.js b/server-api/api.js
index d1d96a9..a06ba61 100644
--- a/server-api/api.js
+++ b/server-api/api.js
@@ -319,6 +319,18 @@ app.put('/User/Update/:id', (req, res) => {
     });
 });
 
+app.put('/User/Update/Image/:id', (req, res) => {
+    const id = req.params.id;
+    let form = req.body;
+
+    const sql = `UPDATE users SET image = ? WHERE (iduser = ?)`;
+    db.query(sql, [form.image, id], (err, result) => {
+        if (err) throw err;
+        console.log(result);
+        res.send('Post image update...');
+    });
+});
+
 app.put('/User/Update/Password/:id', (req, res) => {
 
     const id = req.params.id;
diff --git a/src/pages/Compte.js b/src/pages/Compte.js
index f7c77d1..1060453 100644
--- a/src/pages/Compte.js
+++ b/src/pages/Compte.js
@@ -5,6 +5,7 @@ import NavigationDashboard from '../components/NavigationDashboard';
 import img1 from '../img/logo_personEntouré.svg';
 import axios from 'axios'
 import Session from 'react-session-api';
+import { render } from '@testing-library/react';
 
 const api = axios.create({
     baseURL: 'http://localhost:8080'
@@ -15,7 +16,12 @@ function Compte() {
     const nomInputRef = useRef();
     const prenomInputRef = useRef();
     const [modification, setModification] = useState(false);
-    const convert2base64 = e => {
+    const [imageBase64, setImageBase64] = useState("");
+    const [selectedFile, setSelectedFile] = useState([]);
+    const [fileBase64String, setFileBase64String] = useState("");
+
+
+    const convert2base64 = (e) => {
         const file = e.target.files[0];
         const reader = new FileReader();
 
@@ -24,17 +30,43 @@ function Compte() {
         }
 
         reader.readAsDataURL(file);
+
+        encodeFileBase64(file);
+
+        setSelectedFile(e.target.files);
+        console.log(e.target.files[0])
+        console.log(e.target.files[0].name);
+        console.log(e.target.files[0].size);
+        console.log(e.target.files[0].type);
     };
 
+    const encodeFileBase64 = (file) => {
+        var reader = new FileReader();
+        if(file) {
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                var Base64 = reader.result;
+                console.log("Base64 : " + Base64);
+                setFileBase64String(Base64);
+            };
+            reader.onerror = (error) => {
+                console.log('Error: ', error);
+            };
+        }
+    }
+
+    // encodeFileBase64(selectedFile[0]);
+
+
+
     if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
         setTheme(localStorage.getItem("theme"))
     }
 
-    const [file, setFile] = useState();
+    /*const [file, setFile] = useState();
     function handleChange(e) {
-        console.log(e.target.files);
         setFile(URL.createObjectURL(e.target.files[0]));
-    }
+    }*/
 
     const modificationHandler = () => {
         setModification((modification) => !modification)
@@ -46,6 +78,8 @@ function Compte() {
     const [phone, setPhone] = useState("");
     const [mail, setMail] = useState("");
     const [image, setImage] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
 
     useEffect(() => {
         const apiString = '/User/Id/' + Session.get("idUser");
@@ -58,17 +92,26 @@ function Compte() {
         });
     }, []);
 
-    const handleImageAdding = (e) => {
-        const bdd = { image };
-
-        fetch('http://localhost:8080', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(bdd)
-        })
-            .then(() => {
-                console.log('Image ajoutée');
-            })
+    const handleAddingImage = e => {
+        console.log("handleAddingImage");
+        e.preventDefault();
+        setLoading(true);
+        setError(null);
+        
+        const formData = new FormData(convert2base64(e));
+        formData.append('image', image);
+
+        console.log("formData : " + formData);
+
+        api.put('User/Update/Image/'+Session.get("idUser"), formData).then(response => {
+            console.log(response.data)
+        // Traitez la réponse du serveur
+        setLoading(false);
+        }).catch(error => {
+        // Traitez l'erreur
+        setLoading(false);
+        setError(error);
+        });
     }
 
     function handleChangeLastName(event) {
@@ -112,8 +155,8 @@ function Compte() {
                         <div className="name_picture">
                             <div className="picture">
                                 <div id="display_image">
-                                    <img src={img1} srcSet={image} id="img" className="img" />
-                                    <div> <input id="fileUpload" type="file" onChange={e => { convert2base64(e); handleChange(e); handleImageAdding() }}></input></div>
+                                    <img src={image === "" ? img1 : image} id="img" className="img" />
+                                    <div> <input id="fileUpload" type="file" onChange={handleAddingImage}></input></div>
                                 </div>
                                 <label className="fileUpload" htmlFor="fileUpload">Ajoutez votre photo</label>
                             </div>
diff --git a/src/styles/components/_compte.scss b/src/styles/components/_compte.scss
index 7327ec3..bf0657f 100644
--- a/src/styles/components/_compte.scss
+++ b/src/styles/components/_compte.scss
@@ -45,407 +45,405 @@ body {
     }
 
 
-        .bas_de_page {
+    .bas_de_page {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: auto;
+        height: 86%;
+
+
+        .nav_bar_verticale {
             display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            width: auto;
-            height: 86%;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            width: 5%;
+            margin: 5px 5px 10px 10px;
+
+            background: rgba(255, 255, 255, 1);
+            border: 1px solid #cbd0dd;
 
+            border-radius: 5px;
+            backdrop-filter: blur(3px);
+            -webkit-backdrop-filter: blur(15px);
 
-            .nav_bar_verticale {
+            .parti_one {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                align-items: center;
+                width: 100%;
+                height: 18%;
+            }
+
+            .parti_two {
                 display: flex;
                 flex-direction: column;
                 justify-content: space-around;
                 align-items: center;
-                width: 5%;
-                margin: 5px 5px 10px 10px;
+                width: 100%;
+                height: 35%;
+            }
 
-                background: rgba(255, 255, 255, 1);
-                border: 1px solid #cbd0dd;
+            .parti_three {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                align-items: center;
+                margin-top: 15px;
+                width: 100%;
+                height: 18%;
+            }
 
-                border-radius: 5px;
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);
+            .parti_four {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                align-items: center;
+                width: 100%;
+                height: 18%;
+            }
 
-                .parti_one {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-around;
-                    align-items: center;
-                    width: 100%;
-                    height: 18%;
-                }
+            .button {
+                display: flex;
+                object-fit: cover;
+                background-color: transparent;
+                border: none;
+                cursor: pointer;
 
-                .parti_two {
+                .logo_nav_bar {
                     display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    align-items: center;
-                    width: 100%;
-                    height: 35%;
+                    margin: 10px;
+                    height: 50px;
+                    width: 50px;
                 }
+            }
+        }
+    }
 
-                .parti_three {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-around;
-                    align-items: center;
-                    margin-top: 15px;
-                    width: 100%;
-                    height: 18%;
-                }
 
-                .parti_four {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-around;
-                    align-items: center;
-                    width: 100%;
-                    height: 18%;
-                }
 
-                .button {
-                    display: flex;
-                    object-fit: cover;
-                    background-color: transparent;
-                    border: none;
-                    cursor: pointer;
-
-                    .logo_nav_bar  {
-                        display: flex;
-                        margin: 10px;
-                        height: 50px;
-                        width: 50px;
-                    }
-                }
-            }
-        }
 
+    .Compte {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        width: 94.3%;
+        height: auto;
+        margin: 5px 10px 10px 5px;
 
+        background: rgba(255, 255, 255, 1);
+        border: 1px solid #cbd0dd;
 
+        border-radius: 5px;
+        backdrop-filter: blur(3px);
+        -webkit-backdrop-filter: blur(15px);
 
-            .Compte {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-evenly;
-                width: 94.3%;
-                height: auto;
-                margin: 5px 10px 10px 5px;
+        .name_picture {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            margin: 13px;
+            width: auto;
+            height: 30%;
 
-                background: rgba(255, 255, 255, 1);
-                border: 1px solid #cbd0dd;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 5px;
+            backdrop-filter: blur(3px);
+            -webkit-backdrop-filter: blur(15px);
 
-                border-radius: 5px;
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);
+            .picture {
+                display: flex;
+                flex-direction: row;
+                justify-content: left;
+                margin-right: 25px;
+                margin-left: 25px;
+                border-bottom: 1px solid grey;
 
-                .name_picture {
+                #display_image {
                     display: flex;
-                    flex-direction: column;
-                    justify-content: space-evenly;
-                    margin: 13px;
-                    width: auto;
-                    height: 30%;
-
+                    margin-bottom: 5px;
+                    height: 135px;
+                    width: 135px;
                     background: rgba(255, 255, 255, 0.1);
-                    border-radius: 5px;
+                    border: 1px solid #cbd0dd;
+
+                    border-radius: 100px;
                     backdrop-filter: blur(3px);
                     -webkit-backdrop-filter: blur(15px);
 
-                    .picture {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: left;
-                        margin-right: 25px;
-                        margin-left: 25px;
-                        border-bottom: 1px solid grey;
-
-                        #display_image {
-                            display: flex;
-                            margin-bottom: 5px;
-                            height: 135px;
-                            width: 135px;
-                            background: rgba(255, 255, 255, 0.1);
-                            border: 1px solid #cbd0dd;
-
-                            border-radius: 100px;
-                            backdrop-filter: blur(3px);
-                            -webkit-backdrop-filter: blur(15px);
-
-                            .img {
-                                border-radius: 100px;
-                                object-fit: cover;
-                            }
-                        }
+                    .img {
+                        border-radius: 100px;
+                        object-fit: cover;
                     }
+                }
+            }
 
-                    .figure {
-                        width: 45%;
-                    }
+            .figure {
+                width: 45%;
+            }
 
 
-                    .img {
-                        width: 100%;
-                    }
-                }
+            .img {
+                width: 100%;
             }
         }
+    }
+}
 
 
 
-                        /*.bouton_submit {
-                            display: flex;
-                            margin-left: 30px;
-                            align-items: center;
-                            cursor: pointer;
-
-
-
-                            .fileUpload {
-                                color: #3874ff;
-                                border-color: #3874ff;
-                                background-color: transparent;
-                                border: 1px solid #004dff;
-                                border-radius: .375rem;
-                                gap: 1rem;
-                                font-size: 1rem;
-                                line-height: 1.5;
-                                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-                                &:hover {
-                                    color: #fff;
-                                    background-color: #3874ff;
-                                    border-color: #004dff;
-                                }
-
-                                &:focus {
-                                    color: #fff;
-                                    background-color: #3874ff;
-                                    border-color: #004dff;
-                                    box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
-                                }
-
-                                &:active {
-                                    color: #fff;
-                                    background-color: #3874ff;
-                                    border-color: #004dff;
-                                    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
-                                }
-
-                                &:disabled {
-                                    color: #3874ff;
-                                    background-color: transparent;
-                                    border-color: #3874ff;
-                                }
-                            }
-                    }
-                }
+.bouton_submit {
+    display: flex;
+    margin-left: 30px;
+    align-items: center;
+    cursor: pointer;
 
-                .name {
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: space-between;
-                    margin: 0 25px;
-
-                    .presentationNom {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-evenly;
-
-                        .def {
-                            display: flex;
-                            font-weight: bold;
-                        }
-
-                        .nom {
-                            display: flex;
-                            margin-left: 125px;
-                            ;
-                        }
-
-                        .texte {
-                            display: flex;
-                            flex-wrap: wrap;
-                            margin-left: 125px;
-                        }
-                    }
 
-                    .bouton_submit {
-                        display: flex;
-
-                        .bouton_modifierNom {
-                            width: 75px;
-                            height: 20px;
-                            background-color: rgb(190, 189, 189);
-                            border-radius: 5px;
-                            border-radius: 5px;
-                            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                            cursor: pointer;
-
-                            &:hover {
-                                background-color: lightgrey;
-                            }
-                        }
-                    }
-                }
-            }
 
+    .fileUpload {
+        color: #3874ff;
+        border-color: #3874ff;
+        background-color: transparent;
+        border: 1px solid #004dff;
+        border-radius: .375rem;
+        gap: 1rem;
+        font-size: 1rem;
+        line-height: 1.5;
+        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
-            .infoPerso {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-evenly;
-                margin-left: 13px;
-                margin-right: 13px;
-                width: auto;
-                height: 30%;
-
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);
-
-                .description {
-                    display: flex;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 10px 0;
-                    font-weight: bold;
-                }
+        &:hover {
+            color: #fff;
+            background-color: #3874ff;
+            border-color: #004dff;
+        }
 
-                .parti_mail {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 15px 0;
-
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
+        &:focus {
+            color: #fff;
+            background-color: #3874ff;
+            border-color: #004dff;
+            box-shadow: 0 0 0 0.2rem rgba(56, 116, 255, 0.5);
+        }
 
-                    .mail {
-                        display: flex;
-                        margin-left: 199px;
-                    }
-                }
+        &:active {
+            color: #fff;
+            background-color: #3874ff;
+            border-color: #004dff;
+            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0);
+        }
 
-                .parti_pays {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 15px 0;
-
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
+        &:disabled {
+            color: #3874ff;
+            background-color: transparent;
+            border-color: #3874ff;
+        }
+    }
+}
 
-                    .pays_region {
-                        display: flex;
-                        margin-left: 110px;
-                    }
-                }
 
-                .parti_tel {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
+.name {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 25px;
 
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
+    .presentationNom {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
 
-                    .tel {
-                        display: flex;
-                        margin-left: 207px;
-                    }
-                }
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .nom {
+            display: flex;
+            margin-left: 125px;
+            ;
+        }
+
+        .texte {
+            display: flex;
+            flex-wrap: wrap;
+            margin-left: 125px;
+        }
+    }
+
+    .bouton_submit {
+        display: flex;
+
+        .bouton_modifierNom {
+            width: 75px;
+            height: 20px;
+            background-color: rgb(190, 189, 189);
+            border-radius: 5px;
+            border-radius: 5px;
+            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            cursor: pointer;
+
+            &:hover {
+                background-color: lightgrey;
             }
+        }
+    }
+}
 
-            .infoEntreprise {
-                display: flex;
-                flex-direction: column;
-                justify-content: space-evenly;
-                margin: 13px;
-                width: auto;
-                height: 30%;
-
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 15px;
-                box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
-                backdrop-filter: blur(3px);
-                -webkit-backdrop-filter: blur(15px);
-
-                .description {
-                    display: flex;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 10px 0;
-                    font-weight: bold;
-                }
 
-                .parti_name {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 15px 0;
-
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
 
-                    .name {
-                        display: flex;
-                        margin-left: 92px;
-                    }
-                }
+.infoPerso {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    margin-left: 13px;
+    margin-right: 13px;
+    width: auto;
+    height: 30%;
+
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(15px);
+
+    .description {
+        display: flex;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 10px 0;
+        font-weight: bold;
+    }
 
-                .parti_secteurAct {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
-                    border-bottom: 1px solid grey;
-                    padding: 0 0 15px 0;
-
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
+    .parti_mail {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 15px 0;
 
-                    .secteurAct {
-                        display: flex;
-                        margin-left: 98px;
-                    }
-                }
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
 
-                .parti_nbClient {
-                    display: flex;
-                    flex-direction: row;
-                    margin: 0 25px;
+        .mail {
+            display: flex;
+            margin-left: 199px;
+        }
+    }
 
-                    .def {
-                        display: flex;
-                        font-weight: bold;
-                    }
+    .parti_pays {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 15px 0;
 
-                    .nbClient {
-                        display: flex;
-                        margin-left: 115px;
-                    }
-                }
-            }
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .pays_region {
+            display: flex;
+            margin-left: 110px;
+        }
+    }
+
+    .parti_tel {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .tel {
+            display: flex;
+            margin-left: 207px;
+        }
+    }
+}
+
+.infoEntreprise {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    margin: 13px;
+    width: auto;
+    height: 30%;
+
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(15px);
+
+    .description {
+        display: flex;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 10px 0;
+        font-weight: bold;
+    }
+
+    .parti_name {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 15px 0;
+
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .name {
+            display: flex;
+            margin-left: 92px;
+        }
+    }
+
+    .parti_secteurAct {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+        border-bottom: 1px solid grey;
+        padding: 0 0 15px 0;
+
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .secteurAct {
+            display: flex;
+            margin-left: 98px;
+        }
+    }
+
+    .parti_nbClient {
+        display: flex;
+        flex-direction: row;
+        margin: 0 25px;
+
+        .def {
+            display: flex;
+            font-weight: bold;
+        }
+
+        .nbClient {
+            display: flex;
+            margin-left: 115px;
         }
     }
 }
 
+
 #fileUpload[type="file"] {
     display: none;
 }
@@ -465,5 +463,4 @@ body {
     border-radius: 10px;
     background-color: $xiketic;
     cursor: pointer;
-}
 }
\ No newline at end of file