From 98f9e08de9c06047098d628c5d4b5a50a8d72c55 Mon Sep 17 00:00:00 2001
From: Pierre Ferreira <p.ferreira1@outlook.fr>
Date: Thu, 23 Nov 2023 16:40:50 +0100
Subject: [PATCH] ajout de la gestion de la pdp sur a page de profile :zap:

---
 .gitignore                                    |   6 +-
 .../src/Components/ProfilePDP.tsx             |  41 ++++++++++++
 cryptide_project/src/Pages/Profile.css        |  63 ++++++++++++++++++
 cryptide_project/src/Pages/Profile.tsx        |  23 ++-----
 cryptide_project/src/server/db/socialgraph.db | Bin 28672 -> 28672 bytes
 5 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 cryptide_project/src/Components/ProfilePDP.tsx
 create mode 100644 cryptide_project/src/Pages/Profile.css

diff --git a/.gitignore b/.gitignore
index 74524a9..253262c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,4 +41,8 @@ bower_components
 
 psd
 thumb
-sketch
\ No newline at end of file
+sketch
+
+### modules ###
+yarn.lock
+package-lock.json
\ No newline at end of file
diff --git a/cryptide_project/src/Components/ProfilePDP.tsx b/cryptide_project/src/Components/ProfilePDP.tsx
new file mode 100644
index 0000000..23105e1
--- /dev/null
+++ b/cryptide_project/src/Components/ProfilePDP.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import '../Pages/Profile.css'
+import dl from '../res/icon/download.png'
+import defaultImg from '../res/img/Person.png'
+
+const ProfilePDP = () => {
+    const [selectedFile, setSelectedFile] = useState(null);
+
+    // @ts-ignore
+    const handleFileChange = (event) => {
+        let file = event.target.files[0];
+        // Validez la taille, le format, etc.
+        // if (file == null){
+        //     file = defaultImg;
+        // }
+        setSelectedFile(file);
+    };
+
+    return (
+        <div className='mainPDPContainer'>
+                {selectedFile && (
+                    <div >
+                    {/* @ts-ignore */}
+                    {/* <p>Selected File: {selectedFile.name}</p> */}
+                    <img src={URL.createObjectURL(selectedFile)} alt="Preview" className='imgContainer' width='100px' height='100px' />
+                    </div>
+                )}
+                <div className="parent">
+                    <div className="file-upload">
+                        <img src={dl} alt="upload" width='25px' height='25px'/>
+                        {/* <h6>Cliquer ici pour ajouter une image</h6> */}
+                        <p>Taille recommandée : 100px</p>
+                        <input type="file" accept="image/*" onChange={handleFileChange}/>
+                    </div>
+                </div>
+                {/* <input type="file" accept="image/*" onChange={handleFileChange} /> */}
+            </div>
+    );
+};
+
+export default ProfilePDP;
diff --git a/cryptide_project/src/Pages/Profile.css b/cryptide_project/src/Pages/Profile.css
new file mode 100644
index 0000000..65f032d
--- /dev/null
+++ b/cryptide_project/src/Pages/Profile.css
@@ -0,0 +1,63 @@
+.mainContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 50px;
+}
+
+.mainPDPContainer{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid whitesmoke;
+    border-radius: 15px;
+
+    background-color: white;
+
+    margin: 10px;
+}
+
+.imgContainer{
+    border: 5px solid black;
+    border-radius: 50px;
+    margin: 15px;
+}
+
+
+
+/*File upload*/
+.parent {
+    /* width: 250px; */
+    /* margin: auto; */
+    margin: 2rem;
+    background: #ffffff;
+    border-radius: 25px;
+    /* box-shadow: 7px 20px 20px rgb(210, 227, 244); */
+}
+.file-upload {
+    text-align: center;
+    border: 3px dashed rgb(210, 227, 244);
+    /* padding: 1.5rem; */
+    position: relative;
+    cursor: pointer;
+    max-width: 100px;
+    max-height: 50px;
+}
+.file-upload p {
+    font-size: 0.5rem;
+    /* margin-top: 10px; */
+    color: #bbcada;
+}
+.file-upload input {
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/cryptide_project/src/Pages/Profile.tsx b/cryptide_project/src/Pages/Profile.tsx
index 521209b..023a373 100644
--- a/cryptide_project/src/Pages/Profile.tsx
+++ b/cryptide_project/src/Pages/Profile.tsx
@@ -1,25 +1,12 @@
 import React, { useState } from 'react';
+import ProfilePDP from '../Components/ProfilePDP';
 
-const ProfilePictureUploader = () => {
-  const [selectedFile, setSelectedFile] = useState(null);
-
-  // @ts-ignore
-  const handleFileChange = (event) => {
-    const file = event.target.files[0];
-    // Validez la taille, le format, etc.
-    setSelectedFile(file);
-  };
+import './Profile.css'
 
+const ProfilePictureUploader = () => {
   return (
-    <div>
-      <input type="file" accept="image/*" onChange={handleFileChange} />
-      {selectedFile && (
-        <div>
-          {/* @ts-ignore */}
-          <p>Selected File: {selectedFile.name}</p>
-          <img src={URL.createObjectURL(selectedFile)} alt="Preview" />
-        </div>
-      )}
+    <div className='mainContainer'>
+      <ProfilePDP/>
     </div>
   );
 };
diff --git a/cryptide_project/src/server/db/socialgraph.db b/cryptide_project/src/server/db/socialgraph.db
index fda2b9c52293a764ea92fcb897c512f2e773242f..d53b462e857d1cd0f3a5199d57be6a46a592520f 100644
GIT binary patch
delta 351
zcmZp8z}WDBae_3X;Y1l{M#GH>OZfR%`M4SQ7w|js-QvsP<K8SN@RK(&o|}__SG<wc
zn31t0wYa22#VAR|&_E^4Cq2?L&AHM&H$X3-#3MI7)7z^c)ibi(Fey3QEW;<SIHl0j
zwcIPB#KX<K)ZIMA%h;{d$iT>0*U(Vc$XLP9#LCpv%GivZeRGc73`Ray{(TJmC-~p<
zf9Jo?zi+dk!Ww=qPG)h4o!pa8=-U8Yw~c|{ihmz}4c`yGZ9pYU_$L3b<1r)4DcqZX
z*xeCeWS@N1UtW%#lM!fDX>n>%F*h#*0|P7nWd@)_-tj->zr%ldvtYnMeol6FHU<t3
R4o2?Dcj7gG&c&}n1ptF2Xomm*

delta 162
zcmZp8z}WDBae_3X?nD`9M%|4GOZa(M_;MKd7w|js-QvsHtf&yfw>d{{1|ts({|N^E
z6a4S_zw_VUEa<R>e_{a3<P-WfK=nTu_^tT&@z?PE0IGk%xA}+N9RWtR$yfd5W!N|w
rnZ+4Pi&Kk=xp)~E7+Co4FaS+>$N!Z74#boR5|i)5YXFVMDxm@Zen>Vx