From de59d21671d3006327cca5f36092b557f5983e21 Mon Sep 17 00:00:00 2001
From: Elisee ADJIGUIDI <sadjigui@bess-f2r2s18.clusters.42paris.fr>
Date: Sat, 24 Jun 2023 00:37:20 +0200
Subject: [PATCH] change

---
 .../react/src/components/Messages/Chats.tsx   | 10 ++--
 .../react/src/components/Messages/Message.tsx |  6 +--
 .../react/src/components/Profile/EditName.tsx | 49 ++++++++++++++-----
 containers/react/src/pages/Home.tsx           |  8 +--
 containers/react/src/styles/Messages.css      |  9 ++++
 containers/react/src/styles/Profile.css       |  7 +++
 6 files changed, 64 insertions(+), 25 deletions(-)

diff --git a/containers/react/src/components/Messages/Chats.tsx b/containers/react/src/components/Messages/Chats.tsx
index 44328f1e..292df894 100644
--- a/containers/react/src/components/Messages/Chats.tsx
+++ b/containers/react/src/components/Messages/Chats.tsx
@@ -27,6 +27,7 @@ import PartyInvite from "./PartyInvite.tsx";
 
 // import {User, Conv, Message} from "../../../interfaces.tsx"
 import {User, Conv} from "../../../interfaces.tsx"
+import { IoLogoOctocat } from "react-icons/io5";
 
 const TouchDiv = styled.div`
 	margin-left: 10px;
@@ -388,12 +389,13 @@ function Chats(){
 		<div className="chat">
 		
 			<div className='navbar'>
-				<img src={DefaultPic} alt="profile" className="pic"/>
+				{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
+				<IoLogoOctocat className="catchat"/>
 				<span>
 					{isLoading || !user ? (
         				<h4>Loading...</h4>
       				) : (
-        				<h4>{user.nickname}</h4>
+        				<h2>Chat</h2>
       				)}
 	  			</span>
 				{/* <div className="end">
@@ -462,7 +464,7 @@ function Chats(){
 				))}
       	<TouchDiv>
         <motion.div onClick={handleAddFriend}>
-          <MdOutlineGroupAdd />
+          <MdOutlineGroupAdd className="catchat"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
 			{showAddFriendAlert && addFriend && (
@@ -475,7 +477,7 @@ function Chats(){
       </TouchDiv>
       <TouchDiv>
         <motion.div onClick={handleBlockFriend}>
-          <ImBlocked />
+          <ImBlocked  className="block"/>
         </motion.div>
         <AnimatePresence initial={false} onExitComplete={() => null}>
           {showBlockAlert && block && (
diff --git a/containers/react/src/components/Messages/Message.tsx b/containers/react/src/components/Messages/Message.tsx
index da8479ad..458453ea 100644
--- a/containers/react/src/components/Messages/Message.tsx
+++ b/containers/react/src/components/Messages/Message.tsx
@@ -6,11 +6,7 @@
 /*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/01 18:24:46 by apommier          #+#    #+#             */
-<<<<<<< HEAD
-/*   Updated: 2023/06/23 19:33:40 by sadjigui         ###   ########.fr       */
-=======
-/*   Updated: 2023/06/20 19:05:10 by apommier         ###   ########.fr       */
->>>>>>> apommier
+/*   Updated: 2023/06/23 21:14:59 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
diff --git a/containers/react/src/components/Profile/EditName.tsx b/containers/react/src/components/Profile/EditName.tsx
index 35123169..c3f058f0 100644
--- a/containers/react/src/components/Profile/EditName.tsx
+++ b/containers/react/src/components/Profile/EditName.tsx
@@ -1,12 +1,13 @@
 import {motion} from "framer-motion"
 // import Backdrop from "../Sidebar/Backdrop"
 import {Link} from 'react-router-dom';
-import { UserProfile } from "../../DataBase/DataUserProfile";
+// import { UserProfile } from "../../DataBase/DataUserProfile";
 import {useState} from 'react';
 import "../../styles/Profile.css"
 
 import api from '../../script/axiosApi.tsx';
 import React from "react";
+import RedAlert from "../Alert/RedAlert.tsx";
 
 const dropIn = {
 	hidden: {
@@ -21,14 +22,17 @@ const dropIn = {
 }
 
 // const changeName = ({handleclose, name}) => {
-// 	return (
-// 		UserProfile.UserName = name
+	// 	return (
+		// 		UserProfile.UserName = name
 // 	)
 // }
 
 const ModalEdit = ( handleClose ) => {
 	// let new_name = "";
 	const [nickname, setNickname] = useState("");
+	const [closeModal, setModalClose] = useState(false);
+	const [err, setErr] = useState(false);
+	const close = () => setErr(false);
 	
 	const handler = e =>
 	{
@@ -46,13 +50,29 @@ const ModalEdit = ( handleClose ) => {
 		};
 		postNickname();
 	}
-
+	
 	const handlePostNickname = async () => 
 	{
 		console.log("nickname=" ,nickname)
 		try{
-			await api.post("/nickname", {nickname: nickname})
-			window.location.reload();
+			const ret = await api.post("/nickname", {nickname: nickname});
+			// console.log("cest ici = ",ret);
+			// if (!ret)
+			console.log("test ret =",ret.data);
+			if(ret.data)
+			{
+				console.log ("ici error = ", ret.data);
+				// window.location.reload();
+			}
+			else if (!ret.data)
+			{
+				console.log ("nickname already set = ", ret.data);
+
+				setErr(true);
+				setModalClose(true);
+			}
+			
+			
 			// setUser(tmpUser.data);
 			// setIsLoading(false)
 		}
@@ -73,17 +93,22 @@ const ModalEdit = ( handleClose ) => {
 						animate="visible"
 						exit="exit">
 				<h2>Type your new name</h2>
-				<input className="text" maxLength="10" type="text" value={nickname} onChange={handler} handleClose/>
+				<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler}/>
 				<div>
-					<div className="button" onClick={ () => handlePostNickname()}>
+					<div className="button" onClick={handlePostNickname}> 
 						change
 						{/* <Link className="button" to={""}>change</Link> */}
 					</div>
+				{
+					err ? (
+						<RedAlert handleClose={close} text="Nickname already taken"/>
+					) : ("")
+				}
 				</div>
 			</motion.div>
 			
+			
+			)
+		}
 		
-	)
-}
-
-export default ModalEdit
\ No newline at end of file
+		export default ModalEdit
\ No newline at end of file
diff --git a/containers/react/src/pages/Home.tsx b/containers/react/src/pages/Home.tsx
index ecfbc71e..2e2dba72 100644
--- a/containers/react/src/pages/Home.tsx
+++ b/containers/react/src/pages/Home.tsx
@@ -3,10 +3,10 @@
 /*                                                        :::      ::::::::   */
 /*   Home.tsx                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
+/*   By: sadjigui <sadjigui@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/06/09 08:19:04 by apommier          #+#    #+#             */
-/*   Updated: 2023/06/20 15:27:00 by apommier         ###   ########.fr       */
+/*   Updated: 2023/06/23 22:46:23 by sadjigui         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -178,7 +178,7 @@ function Profile () {
 					{isLoading || !user ? (
         				<h1>Loading...</h1>
       				) : (
-        				<h1>{user.nickname}</h1>
+        				<h1 className='user_name'>{user.nickname}</h1>
       				)}
 	  		</span>
 
@@ -242,7 +242,7 @@ function Home () {
 			}
 		};
 		fetchSuccess();
-	})
+	},[])
 
     return (
 		<motion.div className="page"
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index dead8106..48f4f5b8 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -373,3 +373,12 @@ input.in_howLong{
 	margin-left: 10px; 
 }
 
+.catchat{
+	font-size: 30px;
+	margin-left: 12px;
+}
+
+.block{
+	font-size: 25px;
+	margin-left: 12px;
+}
diff --git a/containers/react/src/styles/Profile.css b/containers/react/src/styles/Profile.css
index e1b76a49..7d8506ad 100644
--- a/containers/react/src/styles/Profile.css
+++ b/containers/react/src/styles/Profile.css
@@ -154,6 +154,13 @@
 	text-decoration: none;
 	font-weight: bold;
 }
+
+.user_name{
+	/* background-image: linear-gradient(90deg, #5843e4, #5a0760); */
+	background: -webkit-linear-gradient(60deg, #5843e4, #5a0760);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 /* canvas {
 	margin-top: 20px;
     border: solid 0px #ccc;