useEffect callaback user42 and icon chat

VallienneDiane · Apr 5, 2023 · 3c265b4 · 3c265b4
1 parent 12acfe6
commit 3c265b4
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 20 deletions.
diff --git a/.env b/.env
@@ -16,5 +16,5 @@ UID_42API=u-s4t2ud-1a615688dd073d243be0d59bf7ff2953367300048cd88c855c08d4f2dd0ef
 SECRET_42API=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
 
 API_CALLBACK_URL=http://localhost:8000/callback
-API_KEY=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
+API_KEY=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
 API_UID=u-s4t2ud-1a615688dd073d243be0d59bf7ff2953367300048cd88c855c08d4f2dd0efe4c
diff --git a/back/nest_project/src/auth/auth.controller.ts b/back/nest_project/src/auth/auth.controller.ts
@@ -24,7 +24,6 @@ export class AuthController {
   @Get('/callback')
   async callback(@Query('code') code: string) {
     const tokenApi42 = await this.authService.validateFortyTwo(code);
-    console.log(tokenApi42);
     const response = await fetch('https://api.intra.42.fr/v2/me/', {
       method: 'GET',
       headers: {
@@ -41,9 +40,8 @@ export class AuthController {
         twoFactorSecret: <string>null,
         isTwoFactorEnabled: <boolean>null,
         qrCode: <string>null,
-        avatarSvg: data.image.link,
+        avatarSvg: data.image?.link,
       };
-      console.log("create user42", newUser42, "image ? ", data.image.link);
       await this.userService.create(newUser42);
     }
     const access_token = await this.authService.genToken(data.login);

diff --git a/back/nest_project/src/chat/chat.service.ts b/back/nest_project/src/chat/chat.service.ts
@@ -107,7 +107,7 @@ export class ChatService {
     public connectEvent(client: Socket, login: string, chatNamespace: Namespace, roomHandler: UserRoomHandler, logger: Logger) {
         chatNamespace.sockets.set(login, client);
         roomHandler.addUser(login, client, "general", true, false, false);
-        console.log(login);
+        console.log("login chat service : ", login);
         client.emit("changeLocChannel", "general", []);
         chatNamespace.sockets.forEach( (socket) => {
             socket.emit('userConnected', login);
@@ -153,7 +153,7 @@ export class ChatService {
                     if (!dest.isChannel && dest.room == login)
                         dest.socket.emit("newMessage", toSend);
                     else
-                        dest.socket.emit("pingedBy", login);
+                        dest.socket.emit("pingedBy", login, true);
                 }
             }
         }

diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/react_project/src/components/Callback.tsx b/front/react_project/src/components/Callback.tsx
@@ -20,9 +20,10 @@ const Callback: React.FC = () => {
     const params = new URLSearchParams(window.location.search);
     const code = params.get('code');
 
-    if (code) {
-        accountService.callback(code)
+    useEffect(() => {
+        accountService.callback(code!)
         .then(response => {
+            console.log("dans le useffect de callback");
             accountService.is2faActive(response.data.login)
             .then(response_2fa => {
                 if(response_2fa.data.is2faActive == true) {
@@ -42,6 +43,9 @@ const Callback: React.FC = () => {
         .catch(error => {
             console.log(error);
         });
+    }, [code])
+
+    if (code) {
     }
 
     return (

diff --git a/front/react_project/src/components/ChatModule/ChatModule.tsx b/front/react_project/src/components/ChatModule/ChatModule.tsx
@@ -9,31 +9,39 @@ import { Header, SidebarUser, SidebarChannel } from "./ChatSidebar";
 import SearchChat from "./ChatSearch";
 import { SendMessageForm, MessageList } from "./ChatMessages";
 import '../../styles/ChatModule.scss'
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+// import { faCommentDots } from '@fortawesome/free-solid-svg-icons';
 
 class ChannelDMList extends React.Component<{socket: Socket}, {
     channels: string[],
-    dms: {login: string, connected: boolean}[], 
+    // waitingMsg: boolean,
+    dms: {login: string, connected: boolean } [],
     me: JwtPayload}> {
     constructor(props: {socket: Socket}) {
         super(props);
         this.state = {channels: [], dms: [], me: accountService.readPayload()!};
+        // this.state = {channels: [], dms: [], waitingMsg: false, me: accountService.readPayload()!};
         this.changeLoc = this.changeLoc.bind(this);
         this.initList = this.initList.bind(this);
         this.checkOnline = this.checkOnline.bind(this);
         this.checkOffline = this.checkOffline.bind(this);
     }
 
     changeLoc(channel: IDest) {
-        this.props.socket!.emit('changeLoc', channel);  
+        this.props.socket!.emit('changeLoc', channel);
+        // this.setState({ waitingMsg: false });
     }
 
     initList() {
         this.props.socket!.emit('myChannels');
         this.props.socket!.on('listMyChannels', (strs: string[]) => { 
             this.setState({ channels: strs }) }); 
         this.props.socket!.emit('myDM');
-        this.props.socket!.on('listMyDM', (strs: {login: string, connected: boolean}[]) => { 
+        this.props.socket!.on('listMyDM', (strs: {login: string, connected: boolean} []) => { 
             this.setState({ dms: strs }) });
+        this.props.socket!.on('pingedBy', (login: string) => {
+            // this.setState({ waitingMsg: true });
+        })
     }
 
     checkOnline() {
@@ -121,11 +129,22 @@ class ChannelDMList extends React.Component<{socket: Socket}, {
                 <React.Fragment>
                     <h2>DMs</h2>
                     <ul className="channelList">
-                        { this.state.dms.map((dm, id) => { 
-                           if (this.state.me.login != dm.login)
-                           { return (<li key={id}><button onClick={() => this.changeLoc({Loc: dm.login, isChannel: false})}>{dm.login}</button><div className={dm.connected? "circle online" : "circle offline"}></div></li> ) }
-                        })}
-                    </ul>
+                    {this.state.dms.map((dm, id) => {
+                    if (this.state.me.login !== dm.login) {
+                        return (
+                        <li key={id}>
+                            <button onClick={() => this.changeLoc({Loc: dm.login, isChannel: false})}>
+                            {/* <button onClick={() => this.changeLoc({Loc: dm.login, isChannel: false})} className={this.state.waitingMsg ? "waitingMsg" : ""}> */}
+                                {dm.login}
+                                {/* { this.state.waitingMsg ? <FontAwesomeIcon id="msg" icon={faCommentDots} /> : ""  } */}
+                            </button>
+                            <div className={dm.connected? "circle online" : "circle offline"}></div>
+                        </li>
+                        );
+                    }
+                    return null;
+                    })}
+                </ul>
                 </React.Fragment>
             )}
         </div>

diff --git a/front/react_project/src/styles/Base.css b/front/react_project/src/styles/Base.css
@@ -14,11 +14,11 @@
     --text-color: #ffe5db;
     --ball-color: #f4a261; */
 
-    --prim-color: #ffffff;
-    --second-color: #eb1a6a;
+    --prim-color: #495374;
+    --second-color: #068688;
     --third-color: #4a214a;
-    --text-color: #081742;
-    --ball-color: #f4a261;
+    --text-color: #ffffff;
+    --ball-color: #fd5000;
 
     /* --prim-color: #5f0f40;
     --second-color: #1d8ca8;

diff --git a/front/react_project/src/styles/ChatModule.scss b/front/react_project/src/styles/ChatModule.scss
@@ -242,8 +242,17 @@
 						justify-content: space-between;
 						padding: 0.2rem 0.5rem;
 						& button {
+							width: 100%;
+							text-align: left;
 							cursor: pointer;
+							& #msg {
+								padding-left: 0.5em;
+							}
 						}
+						& .waitingMsg {
+							font-style: bold;
+						}
+
 						& .circle {
 							width: 8px;
 							height: 8px;