Merge branch 'master' of https://codefirst.iut.uca.fr/git/noan.randon/Favor
continuous-integration/drone/push Build was killed
Details
continuous-integration/drone/push Build was killed
Details
commit
554b75c3cc
@ -0,0 +1,25 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectTasksOptions">
|
||||
<TaskOptions isEnabled="true">
|
||||
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
|
||||
<option name="checkSyntaxErrors" value="true" />
|
||||
<option name="description" />
|
||||
<option name="exitCodeBehavior" value="ERROR" />
|
||||
<option name="fileExtension" value="sass" />
|
||||
<option name="immediateSync" value="true" />
|
||||
<option name="name" value="Sass" />
|
||||
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
|
||||
<option name="outputFilters">
|
||||
<array />
|
||||
</option>
|
||||
<option name="outputFromStdout" value="false" />
|
||||
<option name="program" value="sass" />
|
||||
<option name="runOnExternalChanges" value="true" />
|
||||
<option name="scopeName" value="Project Files" />
|
||||
<option name="trackOnlyRoot" value="true" />
|
||||
<option name="workingDir" value="$FileDir$" />
|
||||
<envs />
|
||||
</TaskOptions>
|
||||
</component>
|
||||
</project>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 19 KiB |
@ -1,51 +1,169 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import PP from "../../assets/img/unknown.png";
|
||||
import PLUS from "../../assets/img/plus.png";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import axios from "axios";
|
||||
import { uploadPicture } from '../../actions/user.actions';
|
||||
|
||||
|
||||
|
||||
const ConfigurationDuProfil = ()=>{
|
||||
const userData = useSelector((state) => state.userReducer)
|
||||
return(
|
||||
|
||||
const userData = useSelector((state) => state.user.user);
|
||||
const [pseudo, setPseudo] = useState(userData.pseudo);
|
||||
const[userPicture, setUserPicture] = useState(userData.picture);
|
||||
const [tmpImage, setTmpImage] =useState(PLUS);
|
||||
const [displayAdd, setDisplayAdd] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleValidationPopup =(e)=>{
|
||||
setUserPicture(tmpImage);
|
||||
setDisplayAdd(false);
|
||||
}
|
||||
const handleLoadFile=(e)=>{
|
||||
const file=e.target.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => {
|
||||
setTmpImage({
|
||||
data: reader.result,
|
||||
contentType: file.type,
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleTPM =()=> {
|
||||
console.log("test");
|
||||
console.log(tmpImage);
|
||||
}
|
||||
const handleUpdate = async (e) => {
|
||||
console.log(userPicture)
|
||||
e.preventDefault();
|
||||
const data = new FormData();
|
||||
data.append("pseudo", pseudo);
|
||||
data.append("userId", userData._id);
|
||||
data.append("file",userPicture);
|
||||
|
||||
dispatch(uploadPicture(data,userData._id));
|
||||
//const pseudoError = document.querySelector(".pseudo.error");
|
||||
/* const pictureError =document.querySelector(".picture.error");
|
||||
await axios({
|
||||
method: "post",
|
||||
url: `${process.env.REACT_APP_API_URL}api/user/upload`,
|
||||
data: {
|
||||
// pseudo,
|
||||
userPicture,
|
||||
|
||||
}
|
||||
,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.errors) {
|
||||
//pseudoError.innerHTML = res.data.errors.pseudo;
|
||||
pictureError.innerHTML = res.data.errors.picture;
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err));*/
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
return(
|
||||
<div className='modificationDuProfilBackgroud'>
|
||||
<h2 className='ligneHorizontal' >Modifucation du Profil</h2>
|
||||
|
||||
<h2 className='ligneHorizontal' >Modification des informations du Profil</h2>
|
||||
<form action='' onSubmit={handleUpdate} >
|
||||
<div className='modificationDuProfil' >
|
||||
<img src={PP} className="imageDeProfil"/>
|
||||
<>
|
||||
<button className='imageDeProfilConfigurationPlus imageDeProfil' >
|
||||
<img src={PLUS} className="plusButton "/>
|
||||
<img src={userPicture} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
|
||||
</button>
|
||||
<div className='picture error'></div>
|
||||
</>
|
||||
<div className='modificationDuProfilText alignementText'>
|
||||
<span>Pseudo: </span>
|
||||
<div className='modificationDuProfilText'>
|
||||
<div className="inputbox">
|
||||
<input
|
||||
type="pseudo"
|
||||
name="pseudo"
|
||||
id="pseudo"
|
||||
value={userData.pseudo}
|
||||
onChange={(e) => setPseudo (e.target.value)}
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className='modificationDuProfilText'>
|
||||
|
||||
<input className='inputConfiguration'
|
||||
type="pseudo"
|
||||
name="pseudo"
|
||||
id="pseudo"
|
||||
value={pseudo}
|
||||
onChange={(e) => setPseudo (e.target.value)}
|
||||
/>
|
||||
{/* <div className='pseudo error'></div>*/}
|
||||
|
||||
</div>
|
||||
<div className="inputbox">
|
||||
<span>Nom d'utilisateur</span>
|
||||
<input
|
||||
type="nomUtilisateur"
|
||||
name="nomUtilisateur"
|
||||
id="nomUtilisateur"
|
||||
onChange={(e) => setNomUtilisateur (e.target.value)}
|
||||
value={userData.pseudo}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<button type='submit' className='buttonValidationChangements' id='update' value='update' >Valider</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h2 className='ligneHorizontal' >Acces au dossiers personnel</h2>
|
||||
<div className='accesDossiersPerso'>
|
||||
<input type="checkbox" id="accesDossiersPerso" name='cocher' />
|
||||
<label for="cocher">Cocher si oui</label>
|
||||
<div className='accesDossiersPersoValidation'>
|
||||
<input type="checkbox" name='cocher' />
|
||||
<label for="cocher" className='textAccesDossiersPerso'>Cocher si oui</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{displayAdd && (
|
||||
<div className='popup-modificationProfil'>
|
||||
<div className="modal">
|
||||
<div className='imagesPopup'>
|
||||
<div className='imageModifSpace'>
|
||||
<img src={userPicture} className=" imageDeProfil "/>
|
||||
</div>
|
||||
<div className='profile-pic '>
|
||||
<label className="-label" for="file">
|
||||
<span className="camera"></span>
|
||||
<span>Changer</span>
|
||||
</label>
|
||||
<input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/> {/*onChange={handleLoadFile} onChange={(e)=> setTmpImage(e.target.files[0].name)} */}
|
||||
<img src={tmpImage} className="imageDeProfil"id="output" />
|
||||
</div>
|
||||
</div >
|
||||
<div className='buttonPopup'>
|
||||
<button onClick={()=>setDisplayAdd(false)}>Retour</button>
|
||||
<button onClick={handleTPM()} >Valider</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default ConfigurationDuProfil;
|
||||
export default ConfigurationDuProfil;
|
||||
@ -1,33 +0,0 @@
|
||||
#suivreAussi{
|
||||
font-size: 8px;
|
||||
text-align: center;
|
||||
border: 2px solid;
|
||||
border-radius: 30px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#listeCompteASuivre{
|
||||
border-top: 2px solid;
|
||||
|
||||
}
|
||||
|
||||
.infoPersonne{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.name{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.arobase{
|
||||
color:gray;
|
||||
}
|
||||
|
||||
.PhotoProfile{
|
||||
margin: 10px 15px 0px 20px;
|
||||
width: 40px;
|
||||
height:40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ma page de test</title>
|
||||
<link rel="stylesheet" href="SuivreAussi.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="suivreAussi">
|
||||
<h1>Suivre aussi</h1>
|
||||
<div id="listeCompteASuivre">
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 448 B |
|
Before Width: | Height: | Size: 336 B |
|
Before Width: | Height: | Size: 226 B |
@ -1,165 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Titre du document</title>
|
||||
<style>
|
||||
|
||||
#likeCommentaire{
|
||||
background-color: white;
|
||||
position:fixed;
|
||||
|
||||
margin-left:33%;
|
||||
margin-right: 33%;
|
||||
border: 2px solid #666;
|
||||
border-radius:10px;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
#divButton{
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#divButton > div{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
#buttonLike,#buttonCommentaire {
|
||||
margin-top:10px;
|
||||
background-color: white;
|
||||
border:none;
|
||||
width:100%;
|
||||
height:25px;
|
||||
}
|
||||
|
||||
#buttonLike{
|
||||
border-bottom:solid 5px black;
|
||||
}
|
||||
|
||||
#like{
|
||||
display: block;
|
||||
|
||||
}
|
||||
|
||||
#buttonCommentaire{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#commentaire{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*like et commentaire*/
|
||||
#like, #commentaire{
|
||||
font-size: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#listeCompteASuivre{
|
||||
border-top: 2px solid;
|
||||
}
|
||||
|
||||
.infoPersonne{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.name{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.arobase{
|
||||
color:gray;
|
||||
}
|
||||
|
||||
.PhotoProfile{
|
||||
margin: 10px 15px 0px 20px;
|
||||
width: 40px;
|
||||
height:40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="likeCommentaire">
|
||||
<div id="divButton">
|
||||
|
||||
<div><button type="button" id="buttonLike" onclick="openLike()">like</button></div>
|
||||
<div><button type="button" id="buttonCommentaire" onclick="openCommentaire()">commentaire</button></div>
|
||||
</div>
|
||||
|
||||
<div id="like">
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="commentaire">
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
<h4>texte du commantaire</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
<h4>texte du commantaire</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="infoPersonne">
|
||||
<img class="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<div class="cadreName">
|
||||
<h2 class="name">personne 1</h2>
|
||||
<h3 class="arobase">@personne1</h3>
|
||||
<h4>texte du commantaire</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
<script>
|
||||
function openLike() {
|
||||
document.getElementById("like").style.display = "block";
|
||||
document.getElementById("buttonLike").style.borderBottom = "solid 5px black";
|
||||
document.getElementById("commentaire").style.display = "none";
|
||||
document.getElementById("buttonCommentaire").style.borderBottom = "none";
|
||||
}
|
||||
|
||||
function openCommentaire() {
|
||||
document.getElementById("like").style.display = "none";
|
||||
document.getElementById("buttonLike").style.borderBottom = "none";
|
||||
document.getElementById("commentaire").style.display = "block";
|
||||
document.getElementById("buttonCommentaire").style.borderBottom = "solid 5px black";
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,111 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Titre du document</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
font-family: Roboto, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.form-popup {
|
||||
background-color: white;
|
||||
display: none;
|
||||
position:fixed;
|
||||
|
||||
margin-left:33%;
|
||||
margin-right: 33%;
|
||||
border: 2px solid #666;
|
||||
border-radius:10px;
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
/* Largeur complète pour les champs de saisie */
|
||||
.form-container input[name="lien"],
|
||||
.form-container textarea[name="description"],
|
||||
.form-container label{
|
||||
width: 80%;
|
||||
margin: 10px 10% 50px 10%;
|
||||
}
|
||||
|
||||
textarea{
|
||||
resize: none;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
input[name="lien"],
|
||||
textarea[name="description"]{
|
||||
margin-left: 100px;
|
||||
border: none;
|
||||
background: #D9D9D9;
|
||||
}
|
||||
|
||||
.input{
|
||||
margin-top:20px;
|
||||
}
|
||||
|
||||
#buttonForm{
|
||||
margin-left:10%;
|
||||
margin-right:10%;
|
||||
margin-bottom:10px;
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Forme Popup</h2>
|
||||
<p>Cliquez sur le bouton "Ouvrir la forme" pour ouvrir la fdbjfndbfhbdbnfhdbfnbdhbfhbdhbfhdbfhdhbfhdbhfforme Popup.</p>
|
||||
|
||||
|
||||
<div class="open-btn">
|
||||
<button class="open-button" onclick="openForm()"><strong>Ouvrir la forme</strong></button>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="form-popup" id="popupFormulaireCreationPoste">
|
||||
<form action="/action_page.php" class="form-container">
|
||||
|
||||
<div class="input">
|
||||
<label for="lien">Lien:</label>
|
||||
<input type="text" name="lien" required />
|
||||
</div>
|
||||
|
||||
<div class="input">
|
||||
<label for="description">Description:</label>
|
||||
<textarea name="description" row =250></textarea>
|
||||
</div>
|
||||
|
||||
<div id="buttonForm">
|
||||
<div>
|
||||
<button type="button" class="btn cancel" onclick="closeForm()">retour</button>
|
||||
</div>
|
||||
<div>
|
||||
<button type="submit" class="btn">Poster</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
function openForm() {
|
||||
document.getElementById("popupFormulaireCreationPoste").style.display = "block";
|
||||
}
|
||||
|
||||
function closeForm() {
|
||||
document.getElementById("popupFormulaireCreationPoste").style.display = "none";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,32 +0,0 @@
|
||||
#PhotoProfile{
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 150px;
|
||||
height:150px;
|
||||
border-radius: 80px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
#blocAbonnement{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
#blocAbonnement div{
|
||||
margin-left: 80px;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
#blocName{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nombre{
|
||||
color:black;
|
||||
}
|
||||
|
||||
.texteNombre{
|
||||
color:grey;
|
||||
}
|
||||
@ -1,28 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ma page de test</title>
|
||||
<link rel="stylesheet" href="pagePerso.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="image">
|
||||
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
</div>
|
||||
<div id="blocName">
|
||||
<h1>Lena 1er</h1>
|
||||
<h2 class="subdo">@Lena1er</h2>
|
||||
<div>
|
||||
<div id="blocAbonnement">
|
||||
<div>
|
||||
<div class="nombre">10k</div>
|
||||
<div class="texteNombre">Abonnement</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="nombre">10k</div>
|
||||
<div class="texteNombre">Abonnée</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
body{
|
||||
background: green;
|
||||
|
||||
}
|
||||
|
||||
#cadrePoste{
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
width: 40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/*haut du poste*/
|
||||
/*
|
||||
#cadreInfoPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
}
|
||||
|
||||
#PhotoProfile{
|
||||
margin: 10px 15px 0px 20px;
|
||||
width: 40px;
|
||||
height:40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
#NomProfile{
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
|
||||
}*/
|
||||
|
||||
#hautPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
#cadreInfoPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
|
||||
}
|
||||
#PhotoProfile{
|
||||
margin: 10px 15px 0px 20px;
|
||||
width: 40px;
|
||||
height:40px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid #555;
|
||||
}
|
||||
|
||||
#NomProfile{
|
||||
font-family: arial;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
|
||||
/*bas poste*/
|
||||
#basPoste{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#like, #commentaire{
|
||||
display: flex;
|
||||
align-items:center;
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Ma page de test</title>
|
||||
<link rel="stylesheet" href="poste.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!--<div id="cadrePoste">
|
||||
<div id="cadreInfoPoste">
|
||||
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<h6 id="NomProfile">Lena 1er</h6>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div id="cadrePoste">
|
||||
<div id="hautPoste">
|
||||
<div id="cadreInfoPoste">
|
||||
<img id="PhotoProfile" src="https://i.pinimg.com/originals/5c/a0/cf/5ca0cf624647dced23ec5329ed0cde6f.png"/>
|
||||
<h6 id="NomProfile">Lena 1er</h6>
|
||||
</div>
|
||||
<div>6 jours</div>
|
||||
</div>
|
||||
|
||||
<div id="contenuePoste">
|
||||
/*utliser leakpreview*/
|
||||
</div>
|
||||
|
||||
<div id="basPoste">
|
||||
<div id="like">
|
||||
<img src="coeurs.png">
|
||||
<div>10k</div>
|
||||
</div>
|
||||
<div id="commentaire"> </>
|
||||
<img src="commentaire.png">
|
||||
<div>10k</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -0,0 +1,35 @@
|
||||
import React, {useEffect,useState} from 'react';
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {getPosts} from "../actions/post.actions";
|
||||
import {getUserTemp} from "../actions/user.actions";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {isEmpty} from "./Utils";
|
||||
import FollowHandler from "./UserProfil/FollowHandler";
|
||||
|
||||
const MiniProfil = ({uid} ) => {
|
||||
const [userData, setUserData] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
const response = await fetch(`${process.env.REACT_APP_API_URL}api/user/${uid}`);
|
||||
const data = await response.json();
|
||||
setUserData(data);
|
||||
}
|
||||
fetchData();
|
||||
}, [uid]);
|
||||
|
||||
if (!userData) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="ListReco">
|
||||
<div className="UtiReco">
|
||||
<img className="image" src={userData.picture}/>
|
||||
<a href={`/Profil/${uid}`}>{userData.pseudo}</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MiniProfil;
|
||||
@ -0,0 +1,31 @@
|
||||
import React, {useEffect,useState} from 'react';
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
import {getPosts} from "../actions/post.actions";
|
||||
import {getUserTemp} from "../actions/user.actions";
|
||||
import MiniProfil from "./MiniProfil";
|
||||
|
||||
const Notif = ({notification} ) => {
|
||||
console.log('notification',notification)
|
||||
|
||||
|
||||
const MessageNotif = (notification) =>{
|
||||
if(notification.typeNotif == 'like') {
|
||||
return "a like votre post";
|
||||
}
|
||||
else if(notification.typeNotif == 'commente') {
|
||||
return "a commenter votre post";
|
||||
}
|
||||
return 'vous follow'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='conteneur_notif' key={notification._id}>
|
||||
<MiniProfil uid={notification.id_user}></MiniProfil>
|
||||
<div className={'contenue_notif'}>
|
||||
{ MessageNotif(notification) }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Notif;
|
||||
@ -0,0 +1,69 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { deleteComment, editComment } from '../../actions/post.actions';
|
||||
import { UidContext } from '../AppContext';
|
||||
|
||||
|
||||
const ActionComment = ( { commentaire , postId}) => {
|
||||
const [createur, setCreateur] = useState(false);
|
||||
const [edit, setEdit] = useState(false);
|
||||
const [message,setMessage] = useState('');
|
||||
const uid = useContext(UidContext);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleEdit = (e) => {
|
||||
e.preventDefault();
|
||||
if(message){
|
||||
dispatch(editComment(postId, commentaire._id, message));
|
||||
setMessage('');
|
||||
setEdit(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = () => {
|
||||
dispatch(deleteComment(postId, commentaire._id));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const verifCreateur = () => {
|
||||
if(uid === commentaire.commentId){
|
||||
setCreateur(true);
|
||||
}
|
||||
}
|
||||
console.log(commentaire);
|
||||
verifCreateur();
|
||||
console.log(createur);
|
||||
}, [uid, commentaire.commenterId]);
|
||||
|
||||
return (
|
||||
<div className="edit-comment">
|
||||
{createur && edit === false && (
|
||||
<span onClick={() => setEdit(!edit)}>
|
||||
<i className='fas fa-edit'></i>
|
||||
</span>
|
||||
)}
|
||||
{createur && edit && (
|
||||
<form action="" onSubmit={handleEdit}
|
||||
className="edit-comment-form">
|
||||
<label htmlFor='text' onClick={() => setEdit(!edit)}>Modifier le commentaire</label>
|
||||
|
||||
<input type="text" name="text" onChange={(e) => setMessage(e.target.value)} defaultValue={commentaire.text}/>
|
||||
<br/>
|
||||
<div className="btn">
|
||||
<span onClick={() => {
|
||||
if(window.confirm("Etes-vous sur de supprimer ce commentaire ?")){
|
||||
handleDelete();
|
||||
}
|
||||
}}>
|
||||
<i className="fas fa-trash-alt"></i>
|
||||
</span>
|
||||
</div>
|
||||
<input type="submit" value="Modifier"/>
|
||||
</form>
|
||||
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionComment;
|
||||
@ -0,0 +1,88 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { addComment, getPosts } from '../../actions/post.actions';
|
||||
import FollowHandler from '../UserProfil/FollowHandler';
|
||||
import { isEmpty, timestampParser } from '../Utils';
|
||||
import ActionComment from './ActionComment';
|
||||
|
||||
const Comment = ({ post }) => {
|
||||
const [message, setMessage] = useState("");
|
||||
const usersData = useSelector((state) => state.users.users);
|
||||
const userData = useSelector((state) => state.user.user);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const handleComment = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (message) {
|
||||
dispatch(addComment(post._id, userData._id, message, userData.pseudo))
|
||||
.then(() => dispatch(getPosts()))
|
||||
.then(() => setMessage(''));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="comments-container">
|
||||
{post.comments.map((comment) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
comment.commenterId === userData._id
|
||||
? "comment-container client"
|
||||
: "comment-container"
|
||||
}
|
||||
key={comment._id}
|
||||
>
|
||||
<div className="left-part">
|
||||
<img
|
||||
src={
|
||||
!isEmpty(usersData[0]) &&
|
||||
usersData
|
||||
.map((user) => {
|
||||
if (user._id === comment.commenterId) return user.picture;
|
||||
else return null;
|
||||
})
|
||||
.join("")
|
||||
}
|
||||
alt="commenter-pic"
|
||||
/>
|
||||
</div>
|
||||
<div className="right-part">
|
||||
<div className="comment-header">
|
||||
<div className="pseudo">
|
||||
<h3>{comment.commenterPseudo}</h3>
|
||||
{comment.commenterId !== userData._id && (
|
||||
<FollowHandler
|
||||
idToFollow={comment.commenterId}
|
||||
type={"suggest"}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<span>{timestampParser(comment.timestamp)}</span>
|
||||
</div>
|
||||
<p>{comment.text}</p>
|
||||
<ActionComment commentaire={comment} postId={post._id} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{userData._id && (
|
||||
<form action="" onSubmit={handleComment} className="comment-form">
|
||||
<input
|
||||
type="text"
|
||||
name="text"
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
value={message}
|
||||
placeholder="Laisser un commentaire"
|
||||
/>
|
||||
<br />
|
||||
<input type="submit" value="Envoyer" />
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default Comment;
|
||||
@ -0,0 +1,32 @@
|
||||
import { current } from '@reduxjs/toolkit';
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getPosts } from '../../../actions/post.actions';
|
||||
import { isEmpty } from "../../Utils";
|
||||
import Post from '../PostNouvelleAffichage';
|
||||
import { UidContext } from '../../AppContext';
|
||||
|
||||
const DiplayPostDossier = () => {
|
||||
const postsData = useSelector((state) => state.post.post);
|
||||
const uid = useContext(UidContext);
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(getPosts());
|
||||
},[dispatch])
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{!isEmpty(postsData[0]) &&
|
||||
postsData.map((post) => {
|
||||
if(post.postedId === uid){
|
||||
return <Post post={post} key={post._id}/>
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DiplayPostDossier;
|
||||
@ -0,0 +1,33 @@
|
||||
import { current } from '@reduxjs/toolkit';
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getPosts } from '../../../actions/post.actions';
|
||||
import { isEmpty } from "../../Utils";
|
||||
import Post from '../PostNouvelleAffichage';
|
||||
import { UidContext } from '../../AppContext';
|
||||
|
||||
const DisplayPostLikeProfil = () => {
|
||||
const postsData = useSelector((state) => state.post.post);
|
||||
const uid = useContext(UidContext);
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(getPosts());
|
||||
},[dispatch])
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{!isEmpty(postsData[0]) &&
|
||||
postsData.filter(post => post.likers.includes(uid))
|
||||
.map((post) => {
|
||||
return <Post post={post} key={post._id}/>
|
||||
})
|
||||
}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DisplayPostLikeProfil;
|
||||
@ -0,0 +1,31 @@
|
||||
import { current } from '@reduxjs/toolkit';
|
||||
import React, { useEffect, useState, useContext } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getPosts } from '../../../actions/post.actions';
|
||||
import { isEmpty } from "../../Utils";
|
||||
import Post from '../PostNouvelleAffichage';
|
||||
import { UidContext } from '../../AppContext';
|
||||
|
||||
const NouveauDisplayPosts = () => {
|
||||
const postsData = useSelector((state) => state.post.post);
|
||||
const uid = useContext(UidContext);
|
||||
const dispatch = useDispatch();
|
||||
useEffect(() => {
|
||||
dispatch(getPosts());
|
||||
},[dispatch])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{!isEmpty(postsData[0]) &&
|
||||
postsData.map((post) => {
|
||||
if(post.postedId === uid){
|
||||
return <Post post={post} key={post._id}/>
|
||||
}
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NouveauDisplayPosts;
|
||||
@ -0,0 +1,45 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { getPosts } from '../../actions/post.actions';
|
||||
import { isEmpty } from "../Utils";
|
||||
import Post from './PostNouvelleAffichage';
|
||||
|
||||
const NouveauDisplayPosts = () => {
|
||||
const [loadPost, setLoadPost] = useState(true);
|
||||
const [count , setCount] = useState(5);
|
||||
const dispatch = useDispatch();
|
||||
const postsData = useSelector((state) => state.post.post);
|
||||
|
||||
const loadMore = () => {
|
||||
if (window.innerHeight + document.documentElement.scrollTop + 1 > document.scrollingElement.scrollHeight){
|
||||
setLoadPost(true);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (loadPost) {
|
||||
dispatch(getPosts(count));
|
||||
setLoadPost(false);
|
||||
setCount(count + 5);
|
||||
}
|
||||
window.addEventListener('scroll', loadMore);
|
||||
return () => window.removeEventListener('scroll',loadMore);
|
||||
}, [loadPost,dispatch,count])
|
||||
|
||||
if (loadPost || (postsData === null || isEmpty(postsData)) ) {
|
||||
return <p>Loading...</p>;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{ postsData === null && !isEmpty(postsData[0]) && postsData.map((post) => {
|
||||
return <Post post={post} key={post._id}/>
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NouveauDisplayPosts;
|
||||
@ -0,0 +1,92 @@
|
||||
import axios from 'axios';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import FollowHandler from '../UserProfil/FollowHandler';
|
||||
import { dateParser, isEmpty } from '../Utils';
|
||||
import ButtonLike from './ButtonLike';
|
||||
import Comment from './Comment';
|
||||
|
||||
|
||||
const LinkPreview = ({ link }) => {
|
||||
const [preview, setPreview] = useState({ image: '', title: '' });
|
||||
|
||||
useEffect(() => {
|
||||
//const key = '9f24d981b6f0ddfce993ce4a20d58867';
|
||||
const key = '2865b6b9d9571dc00bf940fad5728248';
|
||||
|
||||
const fullLink = `http://api.linkpreview.net/?key=${key}&q=${link}`;
|
||||
|
||||
axios
|
||||
.get(fullLink)
|
||||
.then((res) => setPreview(res.data))
|
||||
.catch((err) => console.error(err));
|
||||
}, [link]);
|
||||
|
||||
if(preview.image === "") {
|
||||
return (<div className='PreviewPostNouvelleAffichage'><a href={link}>{link}</a></div>);
|
||||
}
|
||||
else {
|
||||
return (
|
||||
<div>
|
||||
<a href={link}>
|
||||
<img id="imageLien" className='PreviewPostNouvelleAffichage' src={preview.image} alt={preview.title}/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
//e.preventDefaul(); pour ne pas recharcher la page
|
||||
const PostNouvelleAffichage = ( { post } ) => {
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const usersData = useSelector((state) => state.users.users);
|
||||
const [updated,setUpdate] = useState(false);
|
||||
const [message, setMessage] = useState(null);
|
||||
const [comments, setComments] = useState(false);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
!isEmpty(usersData[0]) && setIsLoading(false)
|
||||
})
|
||||
|
||||
if(!isLoading){
|
||||
return <p></p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<li className='PostesProfilConteneur' key={post._id}>
|
||||
{isLoading ? (
|
||||
<i className='fas fa-spinner fa-spin'></i>
|
||||
):(
|
||||
<>
|
||||
<div className="unPosteNouvelleAffichage">
|
||||
<div className="dateDePublicationDuPost">
|
||||
<div>{dateParser(post.createdAt)}</div>
|
||||
</div>
|
||||
<div className="LienDunPosteNouvelleAffichage">
|
||||
<LinkPreview link={post.lien}/>
|
||||
<p>{post.message}</p>
|
||||
</div>
|
||||
<div className='informationDunPosteNouvelleAffichage'>
|
||||
<div id="like">
|
||||
<ButtonLike post={post}/>
|
||||
{/* <img src="coeurs.png"/> */}
|
||||
<div>{post.likers.length}</div>
|
||||
</div>
|
||||
<div id="commentaire">
|
||||
<img src="commentaire.png" onClick={() => setComments(!comments)}/>
|
||||
<div >{post.comments.length}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{comments && <Comment className="CommentaireProfil" post={post} />}
|
||||
</>
|
||||
) }
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
//ce qui écrit dans le input est récuperé par le state
|
||||
export default PostNouvelleAffichage;
|
||||
@ -0,0 +1,18 @@
|
||||
import DiplayPostDossier from "../../Post/DisplayPost/DiplayPostDossier";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const DossiersPersonnels=()=>{
|
||||
|
||||
return(
|
||||
<div className='dossierPersonnel'>
|
||||
<DiplayPostDossier/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default DossiersPersonnels;
|
||||
@ -0,0 +1,20 @@
|
||||
import DisplayPostLikeProfil from "../../Post/DisplayPost/DisplayPostLikeProfil";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const PostLikes=()=>{
|
||||
|
||||
|
||||
return(
|
||||
|
||||
<div className='postPersonnel'>
|
||||
<DisplayPostLikeProfil/>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default PostLikes;
|
||||
@ -0,0 +1,20 @@
|
||||
import NouveauDisplayPosts from "../../Post/DisplayPost/NouveauDisplayPosts";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const PostPersonnels=()=>{
|
||||
|
||||
return(
|
||||
<div className='postPersonnel'>
|
||||
<NouveauDisplayPosts/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
export default PostPersonnels;
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,98 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { isEmpty } from '../Utils';
|
||||
import FollowHandler from './FollowHandler';
|
||||
|
||||
const SuggestFriends = () => {
|
||||
const userData = useSelector((state) => state.user.user);
|
||||
const usersData = useSelector((state) => state.users.users);
|
||||
const [chargement,setChargement] = useState(true);
|
||||
const [change, setChange] = useState(true);
|
||||
const [friends, setFriends] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const stateFriend = () => {
|
||||
let array = [];
|
||||
usersData.map((user) => {
|
||||
if(user._id !== userData._id && user.followers.includes(userData._id)){
|
||||
return array.push(user._id);
|
||||
}
|
||||
})
|
||||
//mettre dans un ordre aléatoire
|
||||
array.sort(() => 0.5 - Math.random());
|
||||
if(window.innerHeight > 780){
|
||||
array.length = 5;
|
||||
}
|
||||
if(window.innerHeight > 720){
|
||||
array.length = 4;
|
||||
}
|
||||
if(window.innerHeight > 660){
|
||||
array.length = 3;
|
||||
}
|
||||
if(window.innerHeight > 600){
|
||||
array.length = 2;
|
||||
}
|
||||
if(window.innerHeight > 540){
|
||||
array.length = 1;
|
||||
}else {
|
||||
array.length = 0;
|
||||
}
|
||||
setFriends(array);
|
||||
}
|
||||
|
||||
const stateTopFollowers = () => {
|
||||
let array = [];
|
||||
let obj = JSON.parse(JSON.stringify(usersData));
|
||||
obj.sort((a, b) => b.followers.length - a.followers.length);
|
||||
obj.map((user) => {
|
||||
if(user._id !== userData._id && !user.followers.includes(userData._id)){
|
||||
return array.push(user._id);
|
||||
}
|
||||
})
|
||||
console.log(array);
|
||||
array = array.splice(0, 5);
|
||||
setFriends(array);
|
||||
}
|
||||
|
||||
if(change && !isEmpty(usersData[0]) && userData!=null){
|
||||
if(userData.followers.length === 0){
|
||||
stateTopFollowers();
|
||||
}else{
|
||||
stateFriend();
|
||||
}
|
||||
setChargement(false);
|
||||
setChange(false);
|
||||
}
|
||||
}, [userData, usersData, change])
|
||||
|
||||
return (
|
||||
<div className="recoDiv">
|
||||
<div className="reco">
|
||||
<span>Vous pourriez suivre</span>
|
||||
<hr/>
|
||||
{chargement ? (
|
||||
<i className='fas fa-spinner fa-pulse'></i>
|
||||
) : (
|
||||
<div className="ListReco" >
|
||||
{friends && friends.map((user) => {
|
||||
for(let i = 0; i < usersData.length; i++){
|
||||
if(user === usersData[i]._id){
|
||||
return (
|
||||
<div className="UtiReco" key={user}>
|
||||
<img src={usersData[i].picture} alt="img"/>
|
||||
<p>{usersData[i].pseudo}</p>
|
||||
<FollowHandler idToFollow={usersData[i]._id} type={"card"}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
})}
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SuggestFriends;
|
||||
@ -0,0 +1,83 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import Navbar from '../components/Navbar';
|
||||
|
||||
const SearchBar = () => {
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [searchUsers, setSearchUsers] = useState(true);
|
||||
const [searchPosts, setSearchPosts] = useState(false);
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const postsData = useSelector((state) => state.post.post);
|
||||
const usersData = useSelector((state) => state.users.users);
|
||||
|
||||
function handleSearch() {
|
||||
const input = searchValue.toLowerCase();
|
||||
console.log("Recherche pour : " + input);
|
||||
|
||||
const filteredResultsUsers = usersData.filter(function(item) {
|
||||
return item.pseudo.toLowerCase().indexOf(input) !== -1;
|
||||
});
|
||||
|
||||
const filteredResultsPosts = postsData.filter(function(item) {
|
||||
return item.message.toLowerCase().indexOf(input) !== -1;
|
||||
});
|
||||
|
||||
if(searchUsers)
|
||||
setSearchResults(filteredResultsUsers);
|
||||
|
||||
if(searchPosts)
|
||||
setSearchResults(filteredResultsPosts);
|
||||
|
||||
console.log(searchResults);
|
||||
}
|
||||
|
||||
const handleModals = (e) => {
|
||||
if (e.target.id === "Users") {
|
||||
setSearchUsers(true);
|
||||
setSearchPosts(false);
|
||||
} else {
|
||||
setSearchPosts(true);
|
||||
setSearchUsers(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Navbar />
|
||||
<main>
|
||||
<form>
|
||||
<input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..." />
|
||||
<button type="button" onClick={handleSearch}>Rechercher</button>
|
||||
</form>
|
||||
<div class="divMenu">
|
||||
<nav role="navigation" class="navProfil">
|
||||
<ul class="navItemsProfil">
|
||||
<li class="navItemProfil">
|
||||
<a class="navLinkProfil" onClick={handleModals} id="Users" >Utilisateur</a>
|
||||
</li>
|
||||
<li class="navItemProfil">
|
||||
<a class="navLinkProfil" onClick={handleModals} id="Posts" >Postes</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
{ searchUsers &&
|
||||
<ul>
|
||||
{searchResults.map((result) => (
|
||||
<li key={result.pseudo}>{result.pseudo}</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
{ searchPosts &&
|
||||
<ul>
|
||||
{searchResults.map((result) => (
|
||||
<li key={result.message}>{result.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchBar;
|
||||
@ -1,9 +1,28 @@
|
||||
import React from 'react';
|
||||
import React, {useState} from 'react';
|
||||
import Navbar from '../components/Navbar';
|
||||
import Notif from '../components/Notif';
|
||||
import {useSelector} from "react-redux";
|
||||
|
||||
|
||||
const Trends = () => {
|
||||
const [setLoadNotif] = useState(true);
|
||||
const userData = useSelector((state) => state.user.user);
|
||||
|
||||
return (
|
||||
<Navbar />
|
||||
<div id={'listeNotif'}>
|
||||
<Navbar />
|
||||
<h1>Notification</h1>
|
||||
{
|
||||
userData.notif != null && userData.notif.map((notif) => {
|
||||
return (
|
||||
<li>
|
||||
<Notif key={notif._id} notification={notif}/>
|
||||
</li>
|
||||
);
|
||||
})
|
||||
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
|
||||
.modificationDuProfilBackgroud{
|
||||
// background: $color-6;
|
||||
|
||||
}
|
||||
|
||||
.modificationDuProfil{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.modificationDuProfilText{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left:5%;
|
||||
width: 88%;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
span{
|
||||
margin: 1%;
|
||||
|
||||
}
|
||||
|
||||
.imageDeProfil{
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.accesDossiersPerso{
|
||||
display: flex;
|
||||
align-items: row;
|
||||
margin-left:10%;
|
||||
width:80% ;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
input{
|
||||
margin-right: 0.5%;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
|
||||
.ModifucationInformationDuCompte{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.ModificationInformationDuCompteText{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left:5%;
|
||||
font-size: medium;
|
||||
|
||||
}
|
||||
|
||||
.buttonSuppressionCompte{
|
||||
display: flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
button{
|
||||
padding: 1%;
|
||||
margin-bottom: 1%;
|
||||
margin-top: 2%;
|
||||
margin-left: 6%;
|
||||
width: 16%;
|
||||
max-width: 160px;
|
||||
min-width: 120px;
|
||||
background-color: $color-3;
|
||||
border: 2px solid $color-4;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.buttonSuppressionText{
|
||||
margin-left: 2%;
|
||||
max-width: 400px;
|
||||
min-width: 200px;
|
||||
width: 35%;
|
||||
font-style: italic;
|
||||
color: red;
|
||||
opacity: 70%;
|
||||
background-color: $color-3;
|
||||
height: fit-content;
|
||||
padding: 1%;
|
||||
|
||||
|
||||
}
|
||||
button:hover {
|
||||
background-color: $color-1;
|
||||
border-color: black;
|
||||
|
||||
}
|
||||
span{
|
||||
padding-left: 40px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,225 @@
|
||||
@mixin object-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modificationDuProfil{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
.modificationDuProfilText{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left:5%;
|
||||
font-size: medium;
|
||||
span{
|
||||
|
||||
margin-bottom: 4%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.plusButton{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.imageDeProfilConfigurationPlus {
|
||||
position: relative;
|
||||
|
||||
width: 15%;
|
||||
max-width: 200px;
|
||||
min-width: 150px;
|
||||
border: none;
|
||||
|
||||
}
|
||||
|
||||
.imageDeProfilConfigurationPlus:hover .plusButton {
|
||||
opacity:0.70;
|
||||
|
||||
}
|
||||
|
||||
.imageDeProfilConfiguration:hover{
|
||||
filter: blur(1px);
|
||||
opacity: 0.2;
|
||||
transition: opacity 1s;
|
||||
|
||||
}
|
||||
|
||||
.accesDossiersPerso{
|
||||
display: flex;
|
||||
align-items: row;
|
||||
margin-left:10%;
|
||||
width:80% ;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
input{
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.accesDossiersPerso{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
.accesDossiersPersoValidation{
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.textAccesDossiersPerso{
|
||||
margin-left:18px;
|
||||
font-size: medium;
|
||||
font-style: italic;
|
||||
opacity: 70%;
|
||||
|
||||
}
|
||||
|
||||
.popup-modificationProfil{
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
animation: popup 1s forwards;
|
||||
|
||||
@keyframes popup {
|
||||
to {
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 50%;
|
||||
transform: translate(-100%);
|
||||
background: $color-2;
|
||||
padding: 25px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 0 2px rgba(131, 130, 130, 0.356);
|
||||
overflow: auto;
|
||||
transform: scaleY(0);
|
||||
transform-origin: center;
|
||||
animation: modal .5s forwards;
|
||||
max-width: 650px;
|
||||
min-width: 500px;
|
||||
border: 2px solid $color-4;
|
||||
border-bottom-right-radius: 50px;
|
||||
|
||||
@keyframes modal {
|
||||
to {
|
||||
transform: scale(1) translate(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.imagesPopup{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
.imageModifSpace{
|
||||
margin-right: 18%;
|
||||
img{
|
||||
max-width: initial;
|
||||
}
|
||||
}
|
||||
.profile-pic {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
color: transparent;
|
||||
transition: all .3s ease;
|
||||
@include object-center;
|
||||
input{
|
||||
display:none;
|
||||
}
|
||||
|
||||
img{
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
}
|
||||
.-label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.-label {
|
||||
@include object-center;
|
||||
background-color: rgba(0,0,0,.8);
|
||||
z-index: 10;
|
||||
color: rgb(255,255,255);
|
||||
transition: background-color .2s ease-in-out;
|
||||
border-radius: 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-flex;
|
||||
padding: .2em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.buttonPopup {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 5%;
|
||||
margin-left: 8%;
|
||||
margin-right: 8%;
|
||||
button{
|
||||
background: $color-4;
|
||||
border-radius: 20px;
|
||||
|
||||
&:hover {
|
||||
color: $color-3;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.buttonValidationChangements{
|
||||
position: relative;
|
||||
margin-top: 2%;
|
||||
border-radius: 20px;
|
||||
min-width: 80px;
|
||||
background-color: $color-7;
|
||||
color: white;
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
|
||||
.camera{
|
||||
background: url("./../../assets/img/Photo-Video-Camera-icon.png");
|
||||
}
|
||||
|
||||
.alignementText{
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
.conteneur_notif {
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content: start;
|
||||
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
|
||||
|
||||
.contenue_notif:nth-child(2) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@ -0,0 +1,49 @@
|
||||
|
||||
.PolitiqueDeConfidentialiteText{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 0.2%;
|
||||
margin-left: 5%;
|
||||
text-indent: 1%;
|
||||
text-align: justify;
|
||||
|
||||
|
||||
background-color: $color-8;
|
||||
border: 0.2px solid $color-5;
|
||||
max-width:85% ;
|
||||
min-width: 380px;
|
||||
height: 550px;
|
||||
overflow-y: scroll;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
|
||||
p{
|
||||
animation-duration: 1s;
|
||||
animation-name: slide;
|
||||
margin: 1.5%;
|
||||
|
||||
|
||||
@keyframes slide {
|
||||
from {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
to {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
.PostesProfilConteneur{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.unPosteNouvelleAffichage{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
min-height:50px ;
|
||||
background: $color-8;
|
||||
border: 0.3px solid $color-5;
|
||||
margin: 0.2% 1%;
|
||||
padding: 1% 3%;
|
||||
border-radius: 10px;
|
||||
.dateDePublicationDuPost{
|
||||
flex: 0 0 22%;
|
||||
}
|
||||
.LienDunPosteNouvelleAffichage{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-flow: row wrap;
|
||||
flex: 0.9 0 60%;
|
||||
margin-left: 3%;
|
||||
p{
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
}
|
||||
.informationDunPosteNouvelleAffichage{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding-left: 10%;
|
||||
flex: 0.5 0.4 auto;
|
||||
}
|
||||
|
||||
}
|
||||
.CommentaireProfil{
|
||||
background: $color-8;
|
||||
border: 0.3px solid $color-5;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.PreviewPostNouvelleAffichage{
|
||||
width: 80%;
|
||||
max-height: 48px;
|
||||
}
|
||||
|
||||
|
||||
.postPersonnel .dossierPersonnel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
#listeNotif{
|
||||
margin: 2%;
|
||||
margin-left: 20%;
|
||||
padding:1%;
|
||||
border-color: $color-5;
|
||||
border-style:solid;
|
||||
border-width: 0.3px;
|
||||
min-width: 410px;
|
||||
width: 60%;
|
||||
background: $color-8;
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
const UserModel = require("../models/user.model");
|
||||
const PostModel = require("../models/post.model");
|
||||
|
||||
module.exports.addNotification = async (userId, notification) => {
|
||||
await UserModel.findByIdAndUpdate(
|
||||
userId,
|
||||
{ $addToSet: { notif: notification } },
|
||||
{ new: true, upsert: true }
|
||||
);
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Loading…
Reference in new issue