add create conv in front, work ! and set good alert for add friend and add blocked, backend for friend and blocked still to do

containers/api/src/app.controller.ts

@@ -76,6 +76,15 @@ export class AppController {
 	return await this.userService.addFriend(user, data.username);
   }
 
+  @UseGuards(JwtAuthGuard)
+  @Post('/block')
+  async newBlocked(@Request() req, @Body() data: any) {
+	// return await this.userService.getFriends(req.user.username);
+	console.log(`user= ${req.user.username}`)
+	const user = await this.userService.findOne(req.user.username)
+	return await this.userService.addBlocked(user, data.username);
+  }
+
   @UseGuards(JwtAuthGuard)
   @Get('/invite')
   async getInvite(@Request() req) {
@@ -317,13 +326,20 @@ export class AppController {
 //========================================================================================================
 //========================================================================================================
 
+  @UseGuards(JwtAuthGuard)
   @Post('/conv')
   async createConv(@Request() req, @Body() data: any) {
 	///create conv and return it ? id?
 	console.log(`data post /conv= ${data}`);
 	console.log(`data post /conv= ${data.members}`);
 	console.log(`data post /conv= ${data.name}`);
+
+	// const param = data;
+	const amIhere = data.members.includes(req.user.username);
+	if (!amIhere)
+		data.members.push(req.user.username)
 	// let test = {id: 2, members: "cc"};
+	data.owner = req.user.username
 	return await this.chatService.createConv(data);
 	// res.json(messages);
   }

containers/api/src/auth/login42.ts

@@ -73,6 +73,7 @@ export class loginClass {
 				otp_verified: false,
 				friendRequest: null,
 				friends: null,
+				blocked: null,
 				photo: null,
 			  };
 			await this.usersService.create(user);

containers/api/src/model/chat.entity.ts

@@ -8,7 +8,7 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
 	@Column('text', { array: true, nullable: true })
 	members: string[];
 
-	@Column({ nullable: true })
+	@Column({ default: "Unnamed Conv" })
     name: string
 
 	@Column({ nullable: true })
@@ -17,11 +17,14 @@ import { Entity, Column, PrimaryGeneratedColumn, CreateDateColumn, BaseEntity }
 	// @Column()
 	// members: string;// arry ??? one to many ???
 
-	@Column({ nullable: true })
+	@Column('text', { array: true, nullable: true })
-	banned: string;// arry ??? one to many ???
+	banned: string[];
+
+	@Column('text', { array: true, nullable: true })
+	admin: string[];
 
 	@Column({ nullable: true })
-	admin: string;// arry ??? one to many ???
+	owner: string;
 	
 	@Column({ nullable: true })
 	messages: string;

containers/api/src/model/user.entity.ts

@@ -68,6 +68,9 @@ export class User {
 	@Column('text', { array: true, nullable: true })
 	friends: string[];
 
+	@Column('text', { array: true, nullable: true })
+	blocked: string[];
+
 	@OneToMany(() => MatchLog, (child) => child.parent, { eager: true })
 	children: MatchLog[];
 

containers/api/src/users/users.service.ts

@@ -79,9 +79,21 @@ export class UsersService {
 	}
 
 	async addFriend(user: User, username: string) {
+		if (!(await this.findOne(username)))
+			return (0);
 		user.friends = user.friends || [];
 		user.friends.push(username);
 		this.save(user);
+		return (1);
+	}
+
+	async addBlocked(user: User, username: string) {
+		if (!(await this.findOne(username)))
+			return (0);
+		user.blocked = user.blocked || [];
+		user.blocked.push(username);
+		this.save(user);
+		return (1);
 	}
 
 	async getRanking() {

containers/react/src/components/Alert/GreenAlert.jsx

@@ -31,7 +31,7 @@ function GreenAlert ({handleClose, text}){
                 <AiOutlineCheckCircle/>
                <p>{text}</p>
             </motion.div>
-               {setTimeout(handleClose, 3000)}
+               {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

containers/react/src/components/Alert/RedAlert.jsx

@@ -30,7 +30,7 @@ function RedAlert ({handleClose, text}) {
             <BiErrorCircle/>
             <p>{text}</p>
             </motion.div>
-            {setTimeout(handleClose, 3000)}
+            {setTimeout(handleClose, 1500)}
         </Backdrop>
     )
 }

containers/react/src/components/Messages/Chats.jsx

@@ -224,38 +224,75 @@ function Chats(){
 		}
 	}
 
+
+	
 	const [friend, setFriend] = useState("");
 	const [modalOpen, setModalOpen] = useState(false);
 	const [addFriend, setAddFriend] = useState(false);
 	const [block, setBlock] = useState(false);
+	
+	const [showAddFriendAlert, setShowAddFriendAlert] = useState(false);
+	const [showBlockAlert, setShowBlockAlert] = useState(false);
+	
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
-	const closeAddFriend = () => setAddFriend(false);
-	const closeBlock = () => setBlock(false);
 
 
-	const handleFriend = e => {
+	// const closeAddFriend = () => setAddFriend(false);
-		setFriend(e.target.value)
+	// const closeBlock = () => setBlock(false);
-	};
 
-	// const findValue = () => {
-	// 	// setFind(false);
-	// 	console.log(friend);
-	// 	Rank.map((tab) => {
-	// 		if (tab.name === friend)
-	// 		{
-	// 			console.log("ok bon");
-	// 			setFind(true);
-	// 		}
-	// 	})
-	// 	console.log(find);
-	// 	// if (!find)
-	// }; 
 
-	// console.log(`data user1= ${user.username}`)
+	const handleFriend = (event) => {
+		setFriend(event.target.value);
+	  };
 	
-	// while (user === null)
+	  const handleAddFriend = async () => {
-		// ;
+		try{
+			const res = await api.post("/friend", {username: friend})
+			// if (res.data === 1)
+			// console.log("res in friend= ", res)
+			console.log("res in friend= ", res.data)
+			if(res.data === 1)
+			{
+			  setAddFriend(true);
+			  setBlock(false); // Reset block state
+			  setShowBlockAlert(false);
+			}
+			else
+				setAddFriend(false);
+			setShowAddFriendAlert(true);
+		} catch(err) {
+			console.log(err)
+		}
+	  };
+	
+	  const handleBlockFriend = async () => {
+		try{
+			const res = await api.post("/block", {username: friend})
+			// if(1)
+			if (res.data === 1)
+			{
+				setBlock(true);
+				setAddFriend(false); // Reset addFriend state
+				setShowAddFriendAlert(false);
+			}
+			else
+				setBlock(false);
+			setShowBlockAlert(true);
+		} catch(err) {
+			console.log(err)
+		}
+	  };
+	
+	  const closeAddFriend = () => {
+		setAddFriend(false);
+		setShowAddFriendAlert(false);
+	  };
+	
+	  const closeBlock = () => {
+		setBlock(false);
+		setShowBlockAlert(false);
+	  };
 
 
 //========================================================================================================
@@ -290,13 +327,17 @@ function Chats(){
         				<h4>{user.nickname}</h4>
       				)}
 	  			</span>
-				<div className="end">
+
+
+
+				{/* work here bitch */}
+
+				{/* <div className="end">
 					<input className="lookForFriends" type="text" value={friend} onChange={handleFriend}/>
 					<TouchDiv>
 						<motion.div
 						onClick={() => (addFriend ? setAddFriend(false) : setAddFriend(true))}>
 							<MdOutlineGroupAdd/>
-							{/* {console.log("find = ",find) && setFind(true)} */}
 						</motion.div>
 						<AnimatePresence
 							initial={false}
@@ -304,7 +345,6 @@ function Chats(){
 						>
 							{addFriend && <GreenAlert handleClose={closeAddFriend} text={friend + " was successfuly added"}/>}
 						</AnimatePresence>
-							{/* {console.log("find2 = ", find) && find && <BasicAlert modalOpen={find} handleClose={setFind(false)}/>} */}
 					</TouchDiv>
 					<TouchDiv>
 						<motion.div 
@@ -319,7 +359,43 @@ function Chats(){
 						</AnimatePresence>
 						</motion.div>
 					</TouchDiv>
-				</div>
+				</div> */}
+    <div className="end">
+      <input className="lookForFriends" type="text" value={friend} onChange={handleFriend} />
+      <TouchDiv>
+        <motion.div onClick={handleAddFriend}>
+          <MdOutlineGroupAdd />
+        </motion.div>
+        <AnimatePresence initial={false} onExitComplete={() => null}>
+			{showAddFriendAlert && addFriend && (
+				<GreenAlert handleClose={closeAddFriend} text={friend + ' was successfully added'} />
+			)}
+          {showAddFriendAlert && !addFriend && (
+			  <RedAlert handleClose={closeAddFriend} text={friend + ' was not found'} />
+			  )}
+        </AnimatePresence>
+      </TouchDiv>
+      <TouchDiv>
+        <motion.div onClick={handleBlockFriend}>
+          <ImBlocked />
+        </motion.div>
+        <AnimatePresence initial={false} onExitComplete={() => null}>
+          {showBlockAlert && block && (
+            <GreenAlert handleClose={closeBlock} text={friend + ' was successfully blocked'} />
+          )}
+          {showBlockAlert && !block && (
+            <RedAlert handleClose={closeBlock} text={friend + ' was not found'} />
+          )}
+        </AnimatePresence>
+      </TouchDiv>
+    </div>
+				
+
+
+
+
+
+
 			</div>
 			<div className="messages_box">
 				<div className="contact">

containers/react/src/components/Messages/Modal.jsx

@@ -5,6 +5,7 @@ import '../../styles/Messages.css'
 import { useState } from "react";
 import { GrAdd } from "react-icons/gr";
 import { Link } from "react-router-dom";
+import api from "../../script/axiosApi";
 
 const dropIn = {
     hidden:{y:"-100vh",
@@ -23,11 +24,12 @@ const dropIn = {
 };
 
 const Modal = ({handleClose, text}) => {
-    const [multi, setMulti] = useState(false);
+    // const [multi, setMulti] = useState(false);
     const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
     const [selectedOptionArray, setSelectedOptionArray] = useState([]);
 
     const handleOptionChange = (selectId, selectedOption) => {
+		console.log("selected Option=", selectedOption)
         setSelectTag((prevTags) => 
             prevTags.map((tag) =>
                 tag.id === selectId ? { ...tag, selectedOption } : tag
@@ -38,11 +40,27 @@ const Modal = ({handleClose, text}) => {
     const addNewSelectedTag = () => {
         const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
         setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
+		console.log(selectTags)
     };
 
     const saveSelectedOptions = () => {
-        const selectedOptions = selectTags.map((tag) => tag.selectedOption);
+        // const selectedOptions = selectTags.map((tag) => tag.selectedOption);
+		const selectedOptions = selectTags.map((tag) => tag.selectedOption).filter((option) => option !== '');
+
+		console.log("selected= ", selectedOptions);
+		//do db stuff here
+		const data = {
+			members: selectedOptions,
+			name: "prout"
+		}
+		try{
+			api.post("/conv", data);
+			handleClose();
+		} catch(err) {
+			console.log(err);
+		}
         setSelectedOptionArray(selectedOptions);
+
     }
     let new_name;
     return (
@@ -55,55 +73,43 @@ const Modal = ({handleClose, text}) => {
                 animate="visible"
                 exit="exit"
             >
-                <p>New Convewrstion</p>
+                {/* <p>New Conversation</p> */}
 
-{/* First selection  */}
+				{selectTags.map((selectTag) => (
+				  <div key={selectTag.id}>
+				    <select
+				      value={selectTag.selectedOption}
+				      onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
+				    >
+				      <option value="">{
+				        selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
+				      }</option>
+				      {Rank.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.name)).map((item, index) => (
+				        <option key={index} value={item.name}>
+				          {item.name}
+				        </option>
+				      ))}
+				    </select>
+				  </div>
+				))}
 
-                <select className="custom-select"
-                onChange={(e) => {
-                    const selection = e.target.value;
-                    selection === "group" ? setMulti(true) : setMulti(false)
-                }}>
-                    <option value="1v1">1v1</option>
-                    <option value="group">Group</option>
-                </select>
 
-{/* Second selection  */}
+            	<div>
-                {selectTags.map((selectTag) =>(
+            	    <GrAdd onClick={addNewSelectedTag}/>
-                    <div key={selectTag.id}>
+            	</div>
+            	<div>
+            	    <h3>Selected Option:</h3>
+            	    <ul>
+            	        {selectedOptionArray.map((option, index) => (
+            	            <li key={index}>{option}</li>
+            	        ))}
+            	    </ul>
+            	</div>
+            	<div className="div_submit">
+            	    <Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
 						
-                    <select 
+            	    <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
-                        value={selectTag.selectedOption}
+            	</div>
-                        onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
-                    {Rank.map((item, index) => {
-                        return (
-                            <>
-                            <option value={new_name}>{item.name}</option>
-                            
-                            </>
-                        )
-                    })}
-                    </select>           
-                    </div>
-                ))
-                }
-                <div>
-                    <h3>Selected Option:</h3>
-                    <ul>
-                        {selectedOptionArray.map((option, index) => (
-                            <li key={index}>{option}</li>
-                        ))}
-                    </ul>
-                </div>
-                <div>
-                    {multi === true ? (
-                    <GrAdd onClick={addNewSelectedTag}/>) : " "}
-                </div>
-                <div className="div_submit">
-                    <Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
-                    
-                    <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
-                </div>
 
             </motion.div>
         </Backdrop>

containers/react/src/styles/chat.css

@@ -157,3 +157,13 @@
   font-size: 13px;
   font-style: italic;
 } 
+
+
+/* Messages.css */
+/* import '../../styles/Messages.css' */
+
+/* General styles */
+/* Messages.css */
+/* import '../../styles/Messages.css' */
+
+/* General styles