Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
kinou-p 2023-06-14 01:45:06 +02:00
parent c02f42ce23
commit f678d37739
10 changed files with 208 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
containers/api/src/app.controller.ts
View File

@ -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);
}

1
containers/api/src/auth/login42.ts
View File

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

11
containers/api/src/model/chat.entity.ts
View File

@ -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 })
banned: string;// arry ??? one to many ???
@Column('text', { array: true, nullable: true })
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;

3
containers/api/src/model/user.entity.ts
View File

@ -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[];

12
containers/api/src/users/users.service.ts
View File

@ -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() {

2
containers/react/src/components/Alert/GreenAlert.jsx
View File

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

2
containers/react/src/components/Alert/RedAlert.jsx
View File

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

128
containers/react/src/components/Messages/Chats.jsx
View File

@ -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 => {
setFriend(e.target.value)
};
// const closeAddFriend = () => setAddFriend(false);
// 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)
// };
const handleFriend = (event) => {
setFriend(event.target.value);
};
// console.log(`data user1= ${user.username}`)
// 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">

102
containers/react/src/components/Messages/Modal.jsx
View File

@ -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 */}
{selectTags.map((selectTag) =>(
<div key={selectTag.id}>
<select
value={selectTag.selectedOption}
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>
<div>
<GrAdd onClick={addNewSelectedTag}/>
</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>
<Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
</div>
</motion.div>
</Backdrop>

12
containers/react/src/styles/chat.css
View File

@ -156,4 +156,14 @@
bottom: 50px;
font-size: 13px;
font-style: italic;
}
}
/* Messages.css */
/* import '../../styles/Messages.css' */
/* General styles */
/* Messages.css */
/* import '../../styles/Messages.css' */
/* General styles