diff --git a/Site Web/client/src/components/MiniProfil.js b/Site Web/client/src/components/MiniProfil.js index 721561b4..f48f0f58 100644 --- a/Site Web/client/src/components/MiniProfil.js +++ b/Site Web/client/src/components/MiniProfil.js @@ -22,10 +22,12 @@ const MiniProfil = ({uid} ) => { } return ( -
-
- - {userData.pseudo} +
+
+ +
+
+ {userData.pseudo}
); diff --git a/Site Web/client/src/components/UserProfil/SuggestFriends.js b/Site Web/client/src/components/UserProfil/SuggestFriends.js index d4651c7b..2ceee84c 100644 --- a/Site Web/client/src/components/UserProfil/SuggestFriends.js +++ b/Site Web/client/src/components/UserProfil/SuggestFriends.js @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { isEmpty } from '../Utils'; import FollowHandler from './FollowHandler'; +import MiniProfil from "../MiniProfil"; const SuggestFriends = () => { const userData = useSelector((state) => state.user.user); @@ -79,8 +80,7 @@ const SuggestFriends = () => { if(user === usersData[i]._id){ return (
- img -

{usersData[i].pseudo}

+
); diff --git a/Site Web/client/src/pages/Profil.js b/Site Web/client/src/pages/Profil.js index 4d4632f1..bf6f41f3 100644 --- a/Site Web/client/src/pages/Profil.js +++ b/Site Web/client/src/pages/Profil.js @@ -1,4 +1,4 @@ -import React,{useEffect, useState} from 'react'; +import React, {useContext, useEffect, useState} from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useParams } from 'react-router-dom' @@ -9,15 +9,19 @@ import PostPersonnels from '../components/UserProfil/NavigationProfil/PostsPerso import DossierPersonnels from '../components/UserProfil/NavigationProfil/DossiersPersonnels'; import PostsLikes from '../components/UserProfil/NavigationProfil/PostsLikes'; import MiniProfil from "../components/MiniProfil"; +import SuggestFriends from "../components/UserProfil/SuggestFriends"; +import {UidContext} from "../components/AppContext"; const Profil = () => { const { uid } = useParams(); const [userData, setUserData] = useState(null); const [followingPopup, setFollowingPopup] = useState(false); + const [uidS, setUidS] = useState(false); const [followerPopup, setFollowerPopup] = useState(false); const [dossierPersonnels,setdossierPersonnels ] = useState(false); const [postPersonnels,setpostPersonnels ] = useState(true); - const [postLikes,setpostLikes ] = useState(false) + const [postLikes,setpostLikes ] = useState(false); + const uidU= useContext(UidContext); useEffect(() => { async function fetchData() { @@ -26,6 +30,9 @@ const Profil = () => { setUserData(data); } fetchData(); + if(uidU === uid){ + setUidS(true); + } }, [uid]); @@ -50,8 +57,8 @@ const Profil = () => { } return ( - <> - +
+ {/*

Compte créé le : {dateParser(userData.createdAt)}

@@ -134,8 +141,8 @@ const Profil = () => {
*/} -
-
+
+
@@ -145,7 +152,7 @@ const Profil = () => { {/*

suuu

*/}
- Suivre + + { uidS && Suivre +}
setFollowingPopup(true)}> @@ -211,7 +218,7 @@ const Profil = () => {
-
+
-
- {dossierPersonnels &&} - {postPersonnels &&} - {postLikes &&} + {dossierPersonnels &&} + {postPersonnels &&} + {postLikes &&}
-
-
-
- Vous pourriez suivre -
-
-
- - UtiT - Suivre -
-
- - UtiT - Suivre -
-
- - UtiT - Suivre -
-
- -
- +
+ {uid && }
- - -
-
- +
+
+
) }; diff --git a/Site Web/client/src/pages/SearchBar.js b/Site Web/client/src/pages/SearchBar.js index 9eb2c557..b8c21c6c 100644 --- a/Site Web/client/src/pages/SearchBar.js +++ b/Site Web/client/src/pages/SearchBar.js @@ -3,6 +3,7 @@ import { useSelector } from 'react-redux'; import Navbar from '../components/Navbar'; import Post from '../components/Post/Post'; import { isEmpty } from '../components/Utils'; +import MiniProfil from "../components/MiniProfil"; const SearchBar = () => { const [searchValue, setSearchValue] = useState(""); @@ -12,7 +13,6 @@ const SearchBar = () => { const posts = useSelector((state) => state.post.post); const users = useSelector((state) => state.users.users); - const filteredResultsPosts = posts.filter(function(item) { return item.tags.some(function(tag) { return tag.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1; @@ -31,9 +31,9 @@ const SearchBar = () => { console.log("Recherche pour : " + input); if(searchUsers && searchValue !== "") - setSearchResults(filteredResultsUsers); + setSearchResults(filteredResultsUsers); else if(searchPosts && searchValue !== "") - setSearchResults(filteredResultsPosts); + setSearchResults(filteredResultsPosts); } const handleModals = (e) => { @@ -41,54 +41,60 @@ const SearchBar = () => { setSearchUsers(true); setSearchPosts(false); if(searchValue !== "") - setSearchResults(filteredResultsUsers); + setSearchResults(filteredResultsUsers); } else { setSearchPosts(true); setSearchUsers(false); if(searchValue !== "") - setSearchResults(filteredResultsPosts); + setSearchResults(filteredResultsPosts); } }; - return ( -
- -
-
-
- setSearchValue(e.target.value)} placeholder="Rechercher..." /> - -
-
- - { searchUsers && -
    - {searchResults.map((result) => ( -
  • {result.pseudo}
    • - ))} -
- } - { searchPosts && -
    - {searchResults.length !== 0 && searchResults.map((result) => ( - - ))} -
- } -
-
-
-
- ); + try { + return ( +
+ +
+
+
+ setSearchValue(e.target.value)} + placeholder="Rechercher..."/> + +
+
+ + {searchUsers && +
    + {searchResults.map((result) => ( + + ))} +
+ } + {searchPosts && +
    + {searchResults.length !== 0 && searchResults.map((result) => ( + + ))} +
+ } +
+
+
+
+ ); + } + catch (error){ + return

Loading...

; + } }; export default SearchBar; \ No newline at end of file diff --git a/Site Web/client/src/styles/_settings.scss b/Site Web/client/src/styles/_settings.scss index d6033ff7..59598602 100644 --- a/Site Web/client/src/styles/_settings.scss +++ b/Site Web/client/src/styles/_settings.scss @@ -39,6 +39,5 @@ body{ width: 180px; height: 180px; clip-path:circle(50%); - } diff --git a/Site Web/client/src/styles/component/_miniProfil.scss b/Site Web/client/src/styles/component/_miniProfil.scss new file mode 100644 index 00000000..d8fd92df --- /dev/null +++ b/Site Web/client/src/styles/component/_miniProfil.scss @@ -0,0 +1,21 @@ +.miniProfil{ + display: flex; + align-content: start; +} + +.infoMiniProfil{ + margin-left: 10px; +} + +.miniProfilLien{ + +} + +.miniProfilImage{ + + object-fit: cover; + background-size: cover; + width: 25px; + height: 25px; + clip-path:circle(50%); +} \ No newline at end of file diff --git a/Site Web/client/src/styles/index.scss b/Site Web/client/src/styles/index.scss index 37461681..8d5b3679 100644 --- a/Site Web/client/src/styles/index.scss +++ b/Site Web/client/src/styles/index.scss @@ -9,7 +9,8 @@ @import'./component/configurationDuCompte.scss'; @import'./component/politiqueDeConfidentialite'; @import './component/newPoste'; -@import'./component/postNouvelleAffichage'; +@import './component/postNouvelleAffichage'; +@import './component/miniProfil'; @import './pages/searchBar'; diff --git a/Site Web/client/src/styles/pages/_profil.scss b/Site Web/client/src/styles/pages/_profil.scss index 3049b746..f1b2f74a 100644 --- a/Site Web/client/src/styles/pages/_profil.scss +++ b/Site Web/client/src/styles/pages/_profil.scss @@ -313,7 +313,7 @@ margin-top: 1%; .divMenu { margin: 0%; background-color: #cccaca; - width: 75%; + width: 1000px; height: 500px; border-radius: 25px; } @@ -351,14 +351,13 @@ scrollbar-gutter: stable both-edges; } .basDePage { -display: flex; - flex-direction: row ; - justify-content: space-around; + display: flex; + justify-content: space-between; } .recoDiv { -width: 20%; + width: 250px; } .UtiReco {