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

Merge branch 'ereali' into reborn

Browse Source
This commit is contained in:
Lara REALI 2023-06-25 00:39:05 +02:00
commit 007dbe1832
4 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
containers/react/src/components/Social/FriendRequest.tsx
View File

@ -15,7 +15,7 @@ const UserChat = styled.div `
gap: 5px; gap: 5px;
color: white; color: white;
cursor: pointer; cursor: pointer;
margin-top: 10px;
&:hover{ &:hover{
background-color: #3e3c61; background-color: #3e3c61;
} }
@ -37,7 +37,7 @@ export default function Friend({currentUser}: UserProps)
const [request, setRequest] = useState<User>(); //user who invite const [request, setRequest] = useState<User>(); //user who invite
const [clickEvent, setClickEvent] = useState(false); const [clickEvent, setClickEvent] = useState(false);
// const [user, setUser] = useState(null); // const [user, setUser] = useState(null);
useEffect(() => { useEffect(() => {
const fetchProfilePicture = async () => { const fetchProfilePicture = async () => {
try { try {
@ -54,12 +54,12 @@ export default function Friend({currentUser}: UserProps)
console.error('Error fetching profile picture:', error); console.error('Error fetching profile picture:', error);
} }
}; };
fetchProfilePicture(); fetchProfilePicture();
}, [clickEvent]) }, [clickEvent])
const handleButtonClick = (user: User) => { const handleButtonClick = (user: User) => {
let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`; let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
// history(path, { replace: true }); // history(path, { replace: true });
// window.location.replace(path); // window.location.replace(path);
window.history.pushState({}, '', path); window.history.pushState({}, '', path);
@ -101,13 +101,14 @@ export default function Friend({currentUser}: UserProps)
<img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" /> <img className="pic-user" src={DefaultPicture} alt="Default Profile Picture" />
)} )}
{request ? ( {request ? (
<div className="infoSideBar"> <div className="end">
<span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span> <span onClick={() => handleButtonClick(currentUser)}>{currentUser.nickname}</span>
<RxCheckCircled onClick={() => Accept(request)} color={'green'}/> <div className="end">
<RxCircleBackslash onClick={() => Refuse(request)} color={'red'}/> <RxCheckCircled className="friendRequest" onClick={() => Accept(request)} color={'green'}/>
<RxCircleBackslash className="friendRequest" onClick={() => Refuse(request)} color={'red'}/>
</div>
</div> </div>
) : ( "" )} ) : ( "" )}
</UserChat> </UserChat>
) )
} }

25
containers/react/src/components/Social/Social.tsx
View File

@ -7,6 +7,7 @@ import styled from "styled-components";
import Friend from './Friend.tsx'; import Friend from './Friend.tsx';
import FriendRequest from './FriendRequest.tsx'; import FriendRequest from './FriendRequest.tsx';
import {IoMdPeople} from 'react-icons/io'
import { ImBlocked } from 'react-icons/im'; import { ImBlocked } from 'react-icons/im';
import { MdOutlineGroupAdd } from 'react-icons/md'; import { MdOutlineGroupAdd } from 'react-icons/md';
import {User} from "../../../interfaces.tsx" import {User} from "../../../interfaces.tsx"
@ -25,7 +26,7 @@ const TouchDiv = styled.div`
margin-top: 21px; margin-top: 21px;
cursor: pointer; cursor: pointer;
justify-content: space-around; justify-content: space-around;
&:hover { &:hover {
color: #F4F3EF; color: #F4F3EF;
} }
@ -42,7 +43,7 @@ function Social (){
useEffect(()=> { useEffect(()=> {
const getFriend = async ()=>{ const getFriend = async ()=>{
try{ try{
const tmpFriends = await api.get("/friends") const tmpFriends = await api.get("/friends")
const tmpUser = await api.get("/profile") const tmpUser = await api.get("/profile")
const tmpInv = await api.get("/inviteRequest") const tmpInv = await api.get("/inviteRequest")
const pic = await api.post("/getPicture", {username: tmpUser.data.username}) const pic = await api.post("/getPicture", {username: tmpUser.data.username})
@ -88,26 +89,15 @@ function Social (){
<div> <div>
<div className='navbar'> <div className='navbar'>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */} {/* <img src={DefaultPic} alt="profile" className="pic"/> */}
{profilePicture ? ( <IoMdPeople className="catchat"/>
<img className="pic" src={`data:image/jpeg;base64,${profilePicture}`} />
) : (
<img className="pic" src={DefaultPicture} alt="Default Profile Picture" />
)}
<span> <span>
{isLoading || !user ? ( {isLoading || !user ? (
<h4>Loading...</h4> <h4>Loading...</h4>
) : ( ) : (
<h4>{user.nickname}</h4> <h2>Social</h2>
)} )}
</span> </span>
<div className="end">
<TouchDiv>
<MdOutlineGroupAdd/>
</TouchDiv>
<TouchDiv>
<ImBlocked/>
</TouchDiv>
</div>
</div> </div>
{/* map with fiend request */} {/* map with fiend request */}
@ -119,8 +109,9 @@ function Social (){
{friends.map(c=> ( {friends.map(c=> (
<Friend currentUser={c}/> <Friend currentUser={c}/>
))} ))}
</div> </div>
) )
} }
export default Social export default Social

2
containers/react/src/pages/QrCode.tsx
View File

@ -156,7 +156,7 @@ function QrCode () {
/> />
</> </>
) : ( ) : (
<button onClick={handleDesactivate}>Desactivate 2FA</button> <button className="desactivate" onClick={handleDesactivate}>Desactivate 2FA</button>
)} )}
</> </>

19
containers/react/src/styles/App.css
View File

@ -15,9 +15,20 @@ input.qr{
border-radius: 5px; border-radius: 5px;
background-color: rgb(0, 0, 0); background-color: rgb(0, 0, 0);
margin : 1%; margin : 1%;
color:white; color:rgb(42, 41, 41);
border-style: solid;
border-width: 1px;
} }
.desactivate {
margin: 40vh;
color: ghostwhite;
outline: 0;
border-radius: 20px;
padding: 20px;
background-image: linear-gradient(90deg, #5843e4, #5a0760);
border: 0;
}
.App-logo { .App-logo {
height: 40vmin; height: 40vmin;
pointer-events: none; pointer-events: none;
@ -52,3 +63,9 @@ input.qr{
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.friendRequest {
margin-left: 4vh;
stroke-width: 0.5;
font-size: x-large;
}