You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
8.7 KiB
199 lines
8.7 KiB
import { NavLink } from "react-router-dom";
|
|
import { UidContext } from "./AppContext";
|
|
import React, { useContext } from 'react';
|
|
import { useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import PP from "../assets/img/unknown.png";
|
|
import cookie from 'js-cookie';
|
|
import axios from "axios";
|
|
import Logo from "../assets/img/logo.png";
|
|
import { addPost, getPosts } from "../actions/post.actions";
|
|
|
|
const Navbar = () => {
|
|
const uid = useContext( UidContext );
|
|
const userData = useSelector((state) => state.user.user);
|
|
const [displayAdd, setDisplayAdd] = useState(false);
|
|
const [lien, setLien] = useState("");
|
|
const [description, setDescription] = useState("");
|
|
const dispatch = useDispatch();
|
|
|
|
const handlePost = () => {
|
|
if ((description || lien) ){
|
|
const data = new FormData();
|
|
data.append('postedId', userData._id);
|
|
data.append('message', description);
|
|
data.append('lien', lien);
|
|
//console.log("test",data);
|
|
putData(data);
|
|
console.log(data);
|
|
cancelPost();
|
|
setDisplayAdd(false)
|
|
}else {
|
|
alert("Veuillez compléter tous les champs.")
|
|
}
|
|
};
|
|
|
|
const putData = async(data) => {
|
|
axios
|
|
.post(`${process.env.REACT_APP_API_URL}api/post/`, { postedId: userData._id, message: description, lien: lien}
|
|
)
|
|
.then((res) => {
|
|
console.log(data,"test");
|
|
// if (res.data.errors) {
|
|
// dispatch(setPostError({payload: res.data.errors }));
|
|
// } else {
|
|
// dispatch(setPostError({payload: "" }));
|
|
// }
|
|
})};
|
|
|
|
|
|
const cancelPost = () => {
|
|
setDescription("");
|
|
setLien("");
|
|
};
|
|
|
|
const isValidUrl = (url) => {
|
|
try {
|
|
new URL(url);
|
|
return true;
|
|
}catch {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
const removeCookie = (key) => {
|
|
if(window !== "undefined"){
|
|
cookie.remove(key, {expires: 1} );
|
|
}
|
|
}
|
|
|
|
const logout = async () => {
|
|
await axios({
|
|
method: 'get',
|
|
url: `${process.env.REACT_APP_API_URL}api/user/logout`,
|
|
withCredentials: true,
|
|
})
|
|
.then(() => removeCookie('jwt'))
|
|
.catch((err) => console.log(err));
|
|
window.location = "/";
|
|
|
|
}
|
|
console.log("uid:", uid);
|
|
return (
|
|
<div>
|
|
{uid ? (
|
|
|
|
<nav className="navbar">
|
|
<ul className="navbar-menu">
|
|
<li className="navbar-item logo">
|
|
<NavLink to="/Home" className="navbar-link">
|
|
<span className="navbar-title">Favor</span>
|
|
<i className="fas fa-chevron-right navbar-icon"></i>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<NavLink to="/Home" className="navbar-link">
|
|
<i className="fas fa-home navbar-icon"></i>
|
|
<span className="navbar-title">Home</span>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<NavLink to="/Discover" className="navbar-link">
|
|
<i className="fas fa-bullseye navbar-icon"></i>
|
|
<span className="navbar-title">Découvrir</span>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<NavLink to="/Trends" className="navbar-link">
|
|
<i className="fas fa-bell navbar-icon"></i>
|
|
<span className="navbar-title">Notifications</span>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<NavLink to={`/Profil/${uid}`} className="navbar-link">
|
|
<i className="fas fa-user navbar-icon"></i>
|
|
<span className="navbar-title">Me</span>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<NavLink to="/Configuration" className="navbar-link">
|
|
<i className="fas fa-cog navbar-icon"></i>
|
|
<span className="navbar-title">Paramètre</span>
|
|
</NavLink>
|
|
</li>
|
|
<li className="navbar-item">
|
|
<a onClick={logout} className="navbar-link">
|
|
<i className="fas fa-sign-out-alt navbar-icon"></i>
|
|
<span className="navbar-title">Déconnexion</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
// <header>
|
|
// <nav>
|
|
// <ul className="partie-gauche-nav ul-navBar">
|
|
// <li className="logo">
|
|
// <img src={Logo} height="30px" alt='Logo'/>
|
|
// </li>
|
|
// </ul>
|
|
// <ul className="ul-navBar">
|
|
// <li>
|
|
// <NavLink to="/Discover" className={((nav) => (nav.isActive ? "nav-active b nav-active-tendances-decouvrir" : "b"))}>
|
|
// <span>Découvrir</span>
|
|
// </NavLink>
|
|
// </li>
|
|
|
|
// <li>
|
|
// <NavLink to="/Home" className={((nav) => (nav.isActive ? "nav-active b nav-active-menu" : "b"))}>
|
|
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" className="svg-home">
|
|
// <path stroke="black" fill='black' d="M256 73.825a182.18 182.18 0 0 0-182.18 182.18c0 100.617 81.567 182.17 182.18 182.17a182.175 182.175 0 1 0 0-364.35zm76.636 161.579h-12.037v91.503a18.908 18.908 0 0 1-18.896 18.904h-26.78v-53.56a6.299 6.299 0 0 0-6.297-6.294H232.4a6.3 6.3 0 0 0-6.302 6.294v53.56h-26.771a18.91 18.91 0 0 1-18.906-18.904v-91.503h-11.97a7.879 7.879 0 0 1-5.071-13.905l82.055-69.039a7.89 7.89 0 0 1 10.142 0l81.479 68.547a7.88 7.88 0 0 1-4.421 14.396z" data-name="Home"/>
|
|
// </svg>
|
|
// </NavLink>
|
|
// </li>
|
|
|
|
|
|
// <li>
|
|
// <NavLink to="/Trends" className={((nav) => (nav.isActive ? "nav-active b nav-active-tendances-decouvrir" : "b"))}>
|
|
// <span>Tendances</span>
|
|
// </NavLink>
|
|
// </li>
|
|
// </ul>
|
|
// <ul className="partie-droit-nav ul-navBar">
|
|
// <li >
|
|
// <NavLink to="/Profil" className='b'>
|
|
// { (userData==null) ? (<span></span>):(<span>{userData.pseudo}</span>)}
|
|
// </NavLink>
|
|
// </li>
|
|
|
|
// <li>
|
|
// <NavLink to="/Profil" className='b'>
|
|
// <img src={PP} alt='Logo' className="img-profile"/>
|
|
// </NavLink>
|
|
// </li>
|
|
|
|
// <li>
|
|
// <div className='b more'>
|
|
// <div className="menu-deroulant">
|
|
// <svg xmlns="http://www.w3.org/2000/svg" className="svg-param" viewBox="0 0 256 256">
|
|
// <path d="M128,24A104,104,0,1,0,232,128,104.11791,104.11791,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.09957,88.09957,0,0,1,128,216Zm12-88a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,140,128Zm48,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,188,128Zm-96,0a12,12,0,1,1-12-12A12.01375,12.01375,0,0,1,92,128Z"/>
|
|
// </svg>
|
|
// </div>
|
|
// <div className="more-menu">
|
|
// <NavLink className='element-menu-deroulant' to="/Configuration">Configurations</NavLink>
|
|
// <a onClick={() => setDisplayAdd(true)} className='element-menu-deroulant'>Élement 2</a>
|
|
// <NavLink className='element-menu-deroulant' onClick={logout}>Élement 3</NavLink>
|
|
// </div>
|
|
// </div>
|
|
// </li>
|
|
|
|
// </ul>
|
|
// </nav>
|
|
// </header>
|
|
) : (<div> </div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar; |