navBar affichage pseudo

Site Web/client/package.json

@@ -3,16 +3,20 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.9.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.1.3",
     "dotenv": "^16.0.3",
+    "js-cookie": "^3.0.1",
     "node-sass": "^7.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "tachyons": "^4.12.0",
     "web-vitals": "^2.1.4"
   },

Site Web/client/src/App.js

@@ -2,11 +2,14 @@ import Routes from "./components/Routes";
 import { UidContext } from "./components/AppContext";
 import { useEffect, useState } from "react";
 import axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { setPictureData } from "./feature/pictures.slice";
 
 //useeffect controle le token de l'utilisateur 
 //les crochets dans le use effect permette de pas lancer la fonction à l'infini
 function App() {
   const [uid, setUid] = useState(null);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     const fetchToken = async() => {
@@ -19,7 +22,13 @@ function App() {
         .catch((err) => console.log("No Token"));
     };
     fetchToken();
-  }, [uid]);
+    if (uid){
+      axios
+      .get(`${process.env.REACT_APP_API_URL}api/user/${uid}`)
+      .then((res) => dispatch(setPictureData(res.data)))
+    };
+  
+  }, [uid, dispatch]);
 
   return (
     <UidContext.Provider value={uid}>

Site Web/client/src/app/store.js

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import picturesReducer from "../feature/pictures.slice";
+
+export default configureStore({
+    reducer: {
+        pictures: picturesReducer,
+    },
+});

Site Web/client/src/assets/img/param.svg

@@ -0,0 +1,3 @@
+<svg id="Flat" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+  <path d="M128,20A108,108,0,1,0,236,128,108.12186,108.12186,0,0,0,128,20Zm0,192a84,84,0,1,1,84-84A84.09562,84.09562,0,0,1,128,212Zm16-84a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,144,128Zm48,0a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,192,128Zm-96,0a16,16,0,1,1-16-16A16.01833,16.01833,0,0,1,96,128Z"/>
+</svg>

Site Web/client/src/components/Log/Inscription.js

@@ -62,7 +62,7 @@ const Inscription = () => {
                 </div>
             ) : ( 
                 <div className="formulaire">
-                    <form className="cadre" action='' onSubmit={handleRegister}>
+                    <form className="cadre" action='' onSubmit={handleRegister} >
                         <h1>Inscription</h1>
                         <div className="inputbox">
                             <input type="text"

Site Web/client/src/components/Log/index.js

@@ -21,7 +21,7 @@ const Log = ( props ) => {
         <div className="connection-form">
             <div className="form-container">
                 <div className="info-form-container">
-                    <ul>
+                    <ul className='ul-profil'>
                         <li className='info-form-right'>Bienvenue !</li>
                         <li className='info-form-right'>
                             <div className='description-type-connection'>

Site Web/client/src/components/Navbar.js

@@ -0,0 +1,93 @@
+import { NavLink } from "react-router-dom";
+import { UidContext } from "./AppContext";
+import React, { useContext } from 'react';
+import { useSelector } from "react-redux";
+import PP  from "../assets/img/unknown.png";
+import cookie from 'js-cookie';
+import axios from "axios";
+
+const Navbar = () => {
+    const uid = useContext( UidContext );
+    const userData = useSelector((state) => state.pictures.pictures);
+    
+    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 = "/Profil";
+
+    }
+
+    return (
+        <div>
+            {uid ? (
+                <header>
+                <nav>
+                    <ul className="partie-gauche-nav ul-navBar">
+                        <li className="logo">
+                            <img src=''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="/Trends" className='b'>
+                                { (userData==null) ? (<span></span>):(<span>{userData.pseudo}</span>)}
+                            </NavLink>
+                        </li>
+                    
+                        <li>
+                            <NavLink to="/Trends" className='b'>
+                                <img src={PP} alt='Logo' className="img-profile"/>
+                            </NavLink>
+                        </li>
+                    
+                        <li>
+                            <div onClick={logout} className='b'>
+                                <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>
+                        </li>
+                    
+                    </ul>
+                </nav>
+            </header>
+            ) : (<div>  </div>
+            )}
+        </div>
+    );
+};
+
+export default Navbar;

Site Web/client/src/components/Routes/index.js

@@ -1,12 +1,19 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Profil from '../../pages/Profil.js' 
+import Profil from '../../pages/Profil.js';
+import Home from '../../pages/Home.js';
+import Trends from '../../pages/Trends.js';
+import Discover from '../../pages/Discover.js';
 
 const index = () => {
     return (
             <BrowserRouter>
                 <Routes>
                     <Route path="/" element={<Profil/>} />
+                    <Route path="/home" element={<Home/>} />
+                    <Route path="/trends" element={<Trends/>} />
+                    <Route path="/discover" element={<Discover/>} />
+                    <Route path="*" element={<Profil/>} />
                 </Routes>
             </BrowserRouter>
     );

Site Web/client/src/feature/pictures.slice.js

@@ -0,0 +1,18 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export const picturesSlice = createSlice({
+    name: "pictures",
+    initialState: {
+        pictures: null,
+    },
+    reducers: {
+        setPictureData: (state,action) => {
+            state.pictures = action.payload;
+        },
+    },
+});
+
+export const {setPictureData} = picturesSlice.actions;
+export default picturesSlice.reducer;
+
+

Site Web/client/src/index.js

@@ -2,11 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import "./styles/index.scss";
+import { Provider } from 'react-redux';
+import store from './app/store';
+
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

Site Web/client/src/pages/Discover.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Discover = () => {
+    return (
+        <Navbar />
+    );
+};
+
+export default Discover;

Site Web/client/src/pages/Home.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Home = () => {
+    return (
+        <Navbar />
+    );
+};
+
+export default Home;

Site Web/client/src/pages/Profil.js

@@ -1,7 +1,10 @@
 import React, { useContext } from 'react';
 import { UidContext } from '../components/AppContext';
 import Log from '../components/Log'
-import '../styles/pages/_profil.scss'
+import '../styles/pages/_profil.scss';
+import Home from './Home';
+import { NavLink } from 'react-router-dom';
+//<Link to="/discover"/>
 
 const Profil = () => {
     const uid = useContext(UidContext);
@@ -9,7 +12,7 @@ const Profil = () => {
     return (
         <div className="profil-page">
             {uid ? (
-                <h1>UPDATE PAGE</h1>
+                < Home />
             ) : (
                 <div className="log-container">
                     <Log  signin={true} signup={false}/>

Site Web/client/src/pages/Trends.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Navbar from '../components/Navbar';
+
+const Trends = () => {
+    return (
+        <Navbar />
+    );
+};
+
+export default Trends;

Site Web/client/src/styles/index.scss

@@ -1,2 +1,5 @@
 @import './_settings.scss';
-@import './pages/profil';
+@import './pages/navbar';
+@import './pages/profil';
+@import './pages/profil';
+@import './pages/poste';

Site Web/client/src/styles/pages/_navbar.scss

@@ -0,0 +1,105 @@
+
+
+header {
+    height: 50px;
+    background-color: $color-2;
+    top: 0;
+    left: 0;
+    right: 0;
+    text-transform: uppercase;
+    color: #b9b9b9;
+    position: fixed;
+}
+
+nav{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo{
+    //margin-right: 250px;
+}
+
+
+
+.partie-droit-nav,.partie-gauche-nav{
+    width: 20%;
+}
+
+
+.svg-home{
+    height: 45px;
+    width: 45px;
+}
+
+.svg-param{
+    height: 42px;
+    width: 42px;
+}
+
+
+
+.ul-navBar{
+    display: flex;
+    li{
+        list-style-type: none;
+        padding-left: 1rem;
+        align-self: center;
+    }
+
+    .nav-active-menu {
+        padding-top: 50px;
+    }
+
+    .nav-active-tendances-decouvrir {
+        padding-bottom: 0.75rem;
+    }
+
+    .nav-active {
+        position: relative;
+  
+        &::after {
+          content: "";
+          height: 4px;
+          background: violet;
+          position: absolute;
+          border-radius: 10px;
+          bottom: 0px;
+          left: 50%;
+          transform: translateX(-50%);
+          -webkit-animation: anim 0.3s ease forwards;
+          animation: anim 0.6s ease forwards;
+  
+          @-webkit-keyframes anim {
+            to {
+              width: 100%;
+            }
+          }
+          @keyframes anim {
+            to {
+              width: 100%;
+            }
+          }
+        }
+    }
+}
+
+.img-profile{
+    height: 35px;
+    width: 35px;
+    border-radius: 20px;
+}
+
+.b{
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.n{
+    height: 0.95rem;
+    width: 0.95rem;
+    padding-top: 0.15rem;
+    overflow: hidden;
+    fill: #b9b9b9;
+}

Site Web/client/src/styles/pages/_poste.scss

@@ -0,0 +1,49 @@
+  
+#cadrePoste{
+    background: white;
+    border: 2px solid;
+    border-radius: 5px;
+    border-color: grey;
+    width: 40%;
+    margin-left: auto;
+    margin-right: auto;
+}
+    
+#hautPoste{
+    display: flex;
+    align-items:center;
+    justify-content: space-between;
+    margin-right: 15px;
+}
+    
+#cadreInfoPoste{
+    display: flex;
+    align-items:center;
+}
+
+#PProfile{
+    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;
+}

Site Web/client/src/styles/pages/_profil.scss

@@ -3,7 +3,7 @@ $color-2: #CCF2F4;
 $color-3: #F4F9F9;
 $color-4: #AAAAAA;
 
-ul{
+.ul-profil{
     list-style-type: none;
     display: flex;
     flex-direction: column;