ajout des commentaires

server.js

@@ -9,6 +9,8 @@ const server = http.createServer(app);
 const socketio = require('socket.io');
 const { compareSync } = require('bcrypt');
 
+
+// Socket CORS
 const io = socketio(server, {
     cors: {
         origin: "http://localhost:3000",
@@ -17,25 +19,25 @@ const io = socketio(server, {
 })
 
 
-// 1er essaie de l'utilisation de socket.io fonctionnel
+// fonctions du WebSocket
 io.on("connection", (socket) => {
     console.log("new client connected");
-    socket.on('joinRoom', room => {
+    socket.on('joinRoom', room => { // récupère les infos du nouvel utilisateur qui a rejoint une room
         console.log("the room in join : ", room);
-        const test = userLeave(socket.id);
-        const user = userJoin(socket.id, room);
-        socket.join(user.room);
+        const test = userLeave(socket.id); // fait quitter le user dans la room
+        const user = userJoin(socket.id, room); // fait rejoindre le user dans la room
+        socket.join(user.room); // fait rejoindre le user dans la room
         console.log(users)
-        socket.broadcast.to(user.room).emit('info', "has joined the chat" + room);
+        socket.broadcast.to(user.room).emit('info', "has joined the chat" + room); // renvois le fait qu'une nouvelle personne est présente dans la room à toute les personnes présente dans la room
     });
 
-    socket.on("sendmessage", (data) => {
+    socket.on("sendmessage", (data) => { // récupère le message qui a été envois par un utilisateur
         console.log("data of send message : ", data.message, data.room)
-        const user = getRoomUsers(data.room);
+        const user = getRoomUsers(data.room); // récupere la room de l'utilsateur
         console.log(user, data.message)
         let lastmessageid
-        Groupe.updateOne({
-            _id: data.room
+        Groupe.updateOne({ // modifie le groupe de discution et ajoute le message
+            _id: data.room // l'id de la room est l'id du groupe dans la base de donnée
         }, {
             $push: {
                 message: {
@@ -51,27 +53,27 @@ io.on("connection", (socket) => {
                     if (err) {
                         console.log(err)
                     } else {
-                        let lastmessage = docs.message.pop()
-                        lastmessageid = lastmessage._id
+                        let lastmessage = docs.message.pop() // récupere le dernier message
+                        lastmessageid = lastmessage._id // récupère l'id du dernier message
                         console.log("last mess : ", lastmessage)
-                        const search = users.filter(people => people.room === data.room)
+                        const search = users.filter(people => people.room === data.room) // récupère le nombre de personne présente dans la room
                         console.log("test", search.length)
-                        if (search.length > 1) {
-                            io.to(data.room).emit('message', { _id: lastmessageid, text: data.message, author: data.author })
+                        if (search.length > 1) { // s'il y a plus d'une personne dans la room :
+                            io.to(data.room).emit('message', { _id: lastmessageid, text: data.message, author: data.author }) // envois le message à toute les personnes présente dans la room
                         } else {
-                            socket.emit('message', { _id: lastmessageid, text: data.message, author: data.author })
+                            socket.emit('message', { _id: lastmessageid, text: data.message, author: data.author }) // et si l'utilisateur est seul dans la room alors envoyé le message juste à lui même
                         }
                     }
                 })
             }
         })
     })
-    socket.on('getMessageToDelete', (data) => {
+    socket.on('getMessageToDelete', (data) => { // recupère le message qui doit être suprimé et le suprime
         console.log('the value and the room:', data.value, data.room)
-        Groupe.updateOne({
+        Groupe.updateOne({ // modifie le groupe de discution dans la bade de donnée
             _id: data.room
         }, {
-            $pull: {
+            $pull: { // surpime le message grâce à son id
                 message: {
                     _id: data.value
                 }
@@ -85,40 +87,40 @@ io.on("connection", (socket) => {
 
 
         })
-        io.to(data.room).emit('messageDelete', data.value)
+        io.to(data.room).emit('messageDelete', data.value) // envois à toute les personnes présente dans la room le message suprimé
     })
     socket.on('leave', () => {
-        const user = userLeave(socket.id);
+        const user = userLeave(socket.id); // fait quitter le user de la room
         if (user) {
             // Send users and room info
-            io.to(user.room).emit('info', "il a été deconnecté");
+            io.to(user.room).emit('info', "il a été deconnecté"); // envois l'info à tout les personnes dans la room qu'il est plus présente dans la room
         }
     })
-    socket.on('disconnect', () => {
+    socket.on('disconnect', () => { // lorsque la séssion socket se déconnecte
         const user = userLeave(socket.id);
         if (user) {
             // Send users and room info
-            io.to(user.room).emit('info', "il a été deconnecté");
+            io.to(user.room).emit('info', "il a été deconnecté"); // envois a tout les personnes dans la room l'info que l'utilisateur a été déconnecté
         }
     });
 })
 const users = [];
 
-function userJoin(id, room) {
+function userJoin(id, room) { // fonction lorsque il y a un nouveau user qui rejoint une room
     const user = { id, room };
     users.push(user);
     return user;
 }
 
-function userLeave(id) {
+function userLeave(id) { // fonction pour faire quitter un user de la room
     const index = users.findIndex(user => user.id === id);
 
     if (index !== -1) {
         return users.splice(index, 1)[0];
     }
 }
 
-function getRoomUsers(room) {
+function getRoomUsers(room) { // récupère la room celon le user
     return users.filter(user => user.room === room);
 }
 

src/App.jsx

@@ -21,7 +21,7 @@ class App extends Component {
             <Route path="/" exact component={Home}/>
             <Route path="/signup" component={Signup} />
             <Route path="/login" component={Login} />
-            {/*withAuth permet de renvoyer le composant "Application" si la vérification des cookies est validé par le server*/}
+            {/*withAuth permet de renvoyer le composant voulu si la vérification des cookies est validé par le server*/}
             <Route path="/app/friendlist" component={withAuth(Friendsliste)} />
             <Route path="/app2/:id" component={withAuth(Application2)}/>
             <Route path="/app/parametre" component={withAuth(Parametre)}/>

src/Home.jsx

@@ -16,7 +16,7 @@ import { BrowserRouter, Route, Router, Link, Switch } from "react-router-dom"
 import './style/Home.css';
 import './style/responsive.css'
 
-// page de présentation du projet, le style n'est pas a jour
+// page de présentation du projet
 
 function Home() {
   return (

src/application2.jsx

@@ -11,7 +11,7 @@ import Barreamisgauche from './barre-amis-gauche';
 export default class Application2 extends Component {
 
 
-      // création du State "friend"
+      // création des states
       constructor(props) {
         super(props)
         this.state = {
@@ -31,15 +31,14 @@ export default class Application2 extends Component {
         });
       }
 
-      // fonction permettant de faire une requête POST au serveur et d'envoyer les données
+      // fonction permettant de faire une requête POST au serveur et d'envoyer les données pour ajouter un amis
     onSubmit = (event) => {
         event.preventDefault();
         console.log("state envois demande amis : ",this.state)
         // requête POST
         fetch('https://ichatt.herokuapp.com/app/newfriend', {
           method: 'POST',
-          // credentials : include permet d'intégrer les cookie avec la requête
-          credentials: 'include', 
+          credentials: 'include', // credentials : include permet d'intégrer les cookie avec la requête
           body: JSON.stringify({
             new_friend: this.state.friend
           }),
@@ -59,6 +58,8 @@ export default class Application2 extends Component {
           }
         })
       }
+
+      // fonction permettant de faire une requête GET au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur
       componentDidMount(){
         fetch('https://ichatt.herokuapp.com/app/friendlist', {
           method: 'GET',
@@ -70,13 +71,10 @@ export default class Application2 extends Component {
           }
         })
         .then(response => response.json())
-        .then(response => {
-          //console.log(response)
-          this.setState({amislist:response.friends})
-          this.setState({user_nom:response.pseudo})
-          this.setState({firstFriend:response.firstFriend})
-          //let test = this.state.amislist
-
+        .then(response => { // récupère la reponsse du serveur
+          this.setState({amislist:response.friends}) // stoque la list d'ami dans le state "amislist"
+          this.setState({user_nom:response.pseudo}) // stoque le pseudo du user dans le state "user_nom"
+          this.setState({firstFriend:response.firstFriend}) // stoque le première ami du user dans le state "firstFriend"
         })
       }
 
@@ -86,10 +84,10 @@ export default class Application2 extends Component {
       return (
       <div className="corps"> 
         <div className="colone-gauche">
-          <Barregauche firstFriend={this.state.firstFriend}/>
-          <Barreamisgauche/>
+          <Barregauche firstFriend={this.state.firstFriend}/> {/* Barre ne navigation */}
+          <Barreamisgauche/> {/*Menu où il y a les différents amis */}
       </div>
-      <Chat valeur={id} nom={this.state.user_nom}/>
+      <Chat valeur={id} nom={this.state.user_nom}/> {/*Le chate */}
     </div>
       ); 
     }

src/barre-amis-gauche.jsx

@@ -5,6 +5,7 @@ import './style/barre-amis-gauche.css';
 
 
 export default class barregaucheamis extends Component {
+  // création des states
     constructor(props) {
         super(props)
         this.state = {
@@ -17,7 +18,7 @@ export default class barregaucheamis extends Component {
 
 
     componentDidMount(){
-          fetch('https://ichatt.herokuapp.com/app/friendlist', {
+          fetch('https://ichatt.herokuapp.com/app/friendlist', { // fonction permettant de faire une requête GET au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur
             method: 'GET',
             // credentials : include permet d'intégrer les cookie avec la requête
             credentials: 'include', 
@@ -29,17 +30,17 @@ export default class barregaucheamis extends Component {
           .then(response => response.json())
           .then(response => {
             console.log(response)
-            this.setState({amislist:response.data})
-            this.setState({user_nom:response.pseudo})
+            this.setState({amislist:response.data}) // stoque la liste d'amis dans le state "amislist"
+            this.setState({user_nom:response.pseudo}) // stoque le pseudo du user dans le state "user_nom"
           })
       }
 
-    render(){
+    render(){ // fait le rendu de la page
        return(
          <div class="liste-amis-gauche">
            <div class="friend-list-gauche">
         <div >
-          {this.state.amislist.map((amis)=>(
+          {this.state.amislist.map((amis)=>( // map chaque ami de la liste pour créer des boutton pour naviguer entre chaque groupe de discution
             <Link to={"/app2/"+amis.id} >
               <div className="friend-list-gauche-amis" name={amis.pseudo}>
                   <p>{amis.pseudo}</p>

src/barre-gauche.jsx

@@ -10,13 +10,14 @@ import rockets from './image/rockets.png'
 import './style/barre-gauche-responsive.css';
 
 export default class barregauche extends Component {
-
+// création des states 
     constructor(props) {
         super(props)
         this.state = {
             firstFriend:""
         };
       }
+    // fonction permettant de faire une requête POST au serveur et d'envoyer les données pour récupérer la liste d'ami de l'utilisateur 
     componentDidMount(){
         fetch('https://ichatt.herokuapp.com/app/friendlist', {
           method: 'GET',
@@ -29,20 +30,20 @@ export default class barregauche extends Component {
         })
         .then(response => response.json())
         .then(response => {
-          this.setState({firstFriend:response.firstFriend})
+          this.setState({firstFriend:response.firstFriend}) // stoque le première amis dans le state "firstFriend"
         })
     }
 
-     render(){
+     render(){ // fait le rendu de la page 
         return(
             <div>
                 <div className="nav-barre-gauche">
                     <div className="profil-users">
                         <img className="profil"  src={profil} alt="photo de profil"/>
                     </div>
-                    <div className="bouton-part ">
-                        <Link to={'/app2/'+this.state.firstFriend}>
-                            <img  className="logo-message" src={envelope} alt="message"/>
+                    <div className="bouton-part "> {/*Lien entre les différents onglets */}
+                        <Link to={'/app2/'+this.state.firstFriend}> {/* renvois vers le groupe de message du première amis */}
+                            <img  className="logo-message" src={envelope} alt="message"/> 
                         </Link>
                         <Link to='/app/friendlist'>
                             <img  className="logo-users"src={users} alt="amis"/>
@@ -56,7 +57,7 @@ export default class barregauche extends Component {
                     </div>
                     <Link to='/'>
                         <div className="deconextion">
-                            <img  onClick={this.OnSubmit} className="logo-deconextion" src={logout} alt="déconextion"/>
+                            <img  onClick={this.OnSubmit} className="logo-deconextion" src={logout} alt="déconextion"/> {/* quitte l'application et fait un retour vers le menu */}
                         </div>
                     </Link>
                 </div>

src/components/button.jsx

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 
 
-
 export default class button extends Component {
-    render(){
+    render(){ // fait le rendu d'un bouton avec une valeur
         return(
             <button className={this.props.className} onClick={this.props.onClick} value={this.props.value}>
                 <p>{this.props.value}</p>