From f2d34873c7d327c9444dbd06d32493eb9e8180fe Mon Sep 17 00:00:00 2001
From: "bastien.ollier@etu.uca.fr" <bastien.ollier@etu.uca.fr>
Date: Mon, 2 Jan 2023 16:27:45 +0100
Subject: [PATCH] =?UTF-8?q?add=20pr=C3=A9visualisation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Configurations/ConfigurationDuProfil.js   |  1 -
 Site Web/client/src/components/Post/Post.js   | 35 +++++++++++++++----
 2 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js
index 564c8173..e95586f0 100644
--- a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
+++ b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import PP  from "../../assets/img/unknown.png";
 import { NavLink } from "react-router-dom";
-import { useSelector } from 'react-redux';
 
 
 const ConfigurationDuProfil = ()=>{
diff --git a/Site Web/client/src/components/Post/Post.js b/Site Web/client/src/components/Post/Post.js
index dbe13a19..296a3002 100644
--- a/Site Web/client/src/components/Post/Post.js	
+++ b/Site Web/client/src/components/Post/Post.js	
@@ -6,15 +6,38 @@ import { dateParser, isEmpty } from '../Utils';
 import ButtonLike from './ButtonLike';
 
 
+const LinkPreview = ({ link }) => {
+    const [preview, setPreview] = useState({ image: '', title: '', description: '' });
+
+    useEffect(() => {
+        const key = '9f24d981b6f0ddfce993ce4a20d58867';
+        const fullLink = `http://api.linkpreview.net/?key=${key}&q=${link}`;
+
+        axios
+            .get(fullLink)
+            .then((res) => setPreview(res.data))
+            .catch((err) => console.error(err));
+    }, [link]);
+
+    return (
+        <div>
+            <a href={link}>
+                <img id="imageLien" src={preview.image} alt={preview.title} />
+            </a>
+            <a id="url" href={link}>
+                {link}
+            </a>
+            <p>{preview.description}</p>
+        </div>
+    );
+};
+
 //e.preventDefaul(); pour ne pas recharcher la page
 const Post = ( { post } ) => {
     const [isLoading, setIsLoading] = useState(true);
     const usersData = useSelector((state) => state.users.users);
     const userData = useSelector((state) => state.user.user);
 
-
-    
-
     useEffect(() => {
         !isEmpty(usersData[0]) && setIsLoading(false)
     })
@@ -50,11 +73,9 @@ const Post = ( { post } ) => {
                         <div>{dateParser(post.createdAt)}</div>
                     </div>
 
-                    <div id="contenuePoste">
-                        /*utliser leakpreview*/
-                    </div>
 
                     <div id="contenuePoste">
+                        <LinkPreview link="https://www.bbc.com/news/uk-politics-63335671" />
                         <p>{post.message}</p>
                     </div>
 
@@ -75,5 +96,7 @@ const Post = ( { post } ) => {
     );
 };
 
+
+
 //ce qui écrit dans le input est récuperé par le state
 export default Post;
\ No newline at end of file