no comment
This commit is contained in:
Elisee ADJIGUIDI
parent
44183cd1b5
commit
b609c7a9d7
@ -3,10 +3,10 @@
|
||||
/* ::: :::::::: */
|
||||
/* Friend.tsx :+: :+: :+: */
|
||||
/* +:+ +:+ +:+ */
|
||||
/* By: apommier <apommier@student.42.fr> +#+ +:+ +#+ */
|
||||
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2023/06/09 08:18:58 by apommier #+# #+# */
|
||||
/* Updated: 2023/06/23 17:12:07 by apommier ### ########.fr */
|
||||
/* Updated: 2023/06/26 11:34:53 by sadjigui ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -16,7 +16,6 @@ import DefaultPicture from '../../assets/profile.jpg'
|
||||
import styled from "styled-components";
|
||||
|
||||
import { RxCircle } from "react-icons/rx";
|
||||
import { CgFontSpacing } from "react-icons/cg";
|
||||
import React from "react";
|
||||
import {User} from "../../../interfaces.tsx"
|
||||
|
||||
@ -34,16 +33,10 @@ const UserChat = styled.div `
|
||||
}
|
||||
`
|
||||
|
||||
const SideP = styled.p`
|
||||
font-size: 14px;
|
||||
color: lightgray;
|
||||
margin-left: 15px;
|
||||
`
|
||||
interface UserProps {
|
||||
currentUser: User
|
||||
}
|
||||
|
||||
// export default function Friend({currentUser})
|
||||
export default function Friend({currentUser}: UserProps)
|
||||
{
|
||||
const [profilePicture, setProfilePicture] = useState('');
|
||||
@ -51,10 +44,7 @@ export default function Friend({currentUser}: UserProps)
|
||||
useEffect(() => {
|
||||
const fetchProfilePicture = async () => {
|
||||
try {
|
||||
// const user = await api.get("/profile");
|
||||
const pic = await api.post("/getPicture", {username: currentUser.username})
|
||||
// console.log(`user naem profile pic222= ${currentUser.username}`)
|
||||
// console.log(` profile pic222= ${pic.data}`)
|
||||
setProfilePicture(pic.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile picture:', error);
|
||||
@ -80,17 +70,8 @@ export default function Friend({currentUser}: UserProps)
|
||||
return statusColor;
|
||||
}
|
||||
|
||||
const handleSpectate = (user: User) => {
|
||||
//socket connection and add to party with one with username
|
||||
console.log(`spectate hehe`)
|
||||
console.log(`user= ${user}`)
|
||||
};
|
||||
|
||||
const handleButtonClick = (user: User) => {
|
||||
let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
|
||||
console.log("path= ", path)
|
||||
// history(path, { replace: true });
|
||||
// window.location.replace(path);
|
||||
window.history.pushState({}, '', path);
|
||||
window.location.reload();
|
||||
};
|
||||
@ -111,9 +92,3 @@ export default function Friend({currentUser}: UserProps)
|
||||
</UserChat>
|
||||
)
|
||||
}
|
||||
// spectate visible
|
||||
// {getStatus(currentUser) !== 'blue' ? (
|
||||
// <></>
|
||||
// ) : (
|
||||
// <button className="friendRequest" onClick={() => handleSpectate(currentUser)} >Spectate</button>
|
||||
// )}
|
||||
|
||||
@ -21,12 +21,6 @@ const UserChat = styled.div `
|
||||
}
|
||||
`
|
||||
|
||||
const SideP = styled.p`
|
||||
font-size: 14px;
|
||||
color: lightgray;
|
||||
margin-left: 15px;
|
||||
`
|
||||
|
||||
interface UserProps {
|
||||
currentUser: User
|
||||
}
|
||||
@ -34,21 +28,15 @@ interface UserProps {
|
||||
export default function Friend({currentUser}: UserProps)
|
||||
{
|
||||
const [profilePicture, setProfilePicture] = useState('');
|
||||
const [request, setRequest] = useState<User>(); //user who invite
|
||||
const [request, setRequest] = useState<User>();
|
||||
const [clickEvent, setClickEvent] = useState(false);
|
||||
// const [user, setUser] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchProfilePicture = async () => {
|
||||
try {
|
||||
// const user = await api.get("/profile");\
|
||||
// const tmpUser = await api.get("/profile")
|
||||
const pic = await api.post("/getPicture", {username: currentUser.username})
|
||||
const tmpRequest = await api.post("/user", {username: currentUser.username})
|
||||
// setUser(tmpUser.data);
|
||||
setRequest(tmpRequest.data);
|
||||
// console.log(`user naem profile pic222= ${currentUser.username}`)
|
||||
// console.log(` profile pic222= ${pic.data}`)
|
||||
setProfilePicture(pic.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching profile picture:', error);
|
||||
@ -60,8 +48,6 @@ export default function Friend({currentUser}: UserProps)
|
||||
|
||||
const handleButtonClick = (user: User) => {
|
||||
let path = `http://` + process.env.REACT_APP_BASE_URL + `/profile/${user.username}`;
|
||||
// history(path, { replace: true });
|
||||
// window.location.replace(path);
|
||||
window.history.pushState({}, '', path);
|
||||
window.location.reload();
|
||||
};
|
||||
@ -73,8 +59,6 @@ export default function Friend({currentUser}: UserProps)
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
}
|
||||
console.log("accept")
|
||||
console.log(`request = ${request}`)
|
||||
}
|
||||
|
||||
const Refuse = async (request: User) => {
|
||||
@ -84,13 +68,10 @@ export default function Friend({currentUser}: UserProps)
|
||||
} catch(err) {
|
||||
console.log(err);
|
||||
}
|
||||
console.log("refuse")
|
||||
console.log(`request = ${request}`)
|
||||
}
|
||||
|
||||
// Vérifier si le contenu doit être caché
|
||||
if (clickEvent) {
|
||||
return null; // Rendre null pour ne pas afficher le contenu
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import DefaultPicture from '../../assets/profile.jpg'
|
||||
import api from '../../script/axiosApi.tsx';
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
@ -8,37 +7,14 @@ import Friend from './Friend.tsx';
|
||||
import FriendRequest from './FriendRequest.tsx';
|
||||
|
||||
import {IoMdPeople} from 'react-icons/io'
|
||||
import { ImBlocked } from 'react-icons/im';
|
||||
import { MdOutlineGroupAdd } from 'react-icons/md';
|
||||
import {User} from "../../../interfaces.tsx"
|
||||
|
||||
// import React from "react";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
|
||||
|
||||
|
||||
const TouchDiv = styled.div`
|
||||
margin-left: 10px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 21px;
|
||||
margin-top: 21px;
|
||||
cursor: pointer;
|
||||
justify-content: space-around;
|
||||
|
||||
&:hover {
|
||||
color: #F4F3EF;
|
||||
}
|
||||
`
|
||||
|
||||
function Social (){
|
||||
|
||||
const [friends, setFriends] = useState([]);
|
||||
const [invite, setInvite] = useState([]);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [user, setUser] = useState<User>();
|
||||
const [profilePicture, setProfilePicture] = useState('');
|
||||
|
||||
useEffect(()=> {
|
||||
const getFriend = async ()=>{
|
||||
@ -49,10 +25,8 @@ function Social (){
|
||||
const pic = await api.post("/getPicture", {username: tmpUser.data.username})
|
||||
|
||||
setInvite(tmpInv.data);
|
||||
setProfilePicture(pic.data);
|
||||
setUser(tmpUser.data);
|
||||
setFriends(tmpFriends.data);
|
||||
// return tmpUser;
|
||||
console.log(`user= ${tmpUser.data.username}`);
|
||||
setIsLoading(false)
|
||||
|
||||
@ -65,30 +39,9 @@ function Social (){
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// const { status } = this.props;
|
||||
// let statusColor = '';
|
||||
// // let statusIcon = RxCircle;
|
||||
// let status = 0
|
||||
|
||||
// if (status === 0) {
|
||||
// // statusIcon = faCircle;
|
||||
// statusColor = 'green';
|
||||
// } else if (status === 1) {
|
||||
// // statusIcon = faCircle;
|
||||
// statusColor = 'red';
|
||||
// } else if (status === 2) {
|
||||
// // statusIcon = faCircle;
|
||||
// statusColor = 'blue';
|
||||
// }
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='navbarSocial'>
|
||||
{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
|
||||
<IoMdPeople className="catchat"/>
|
||||
<span>
|
||||
{isLoading || !user ? (
|
||||
@ -100,8 +53,6 @@ function Social (){
|
||||
|
||||
</div>
|
||||
|
||||
{/* map with fiend request */}
|
||||
|
||||
{invite.map(c=> (
|
||||
<FriendRequest currentUser={c}/>
|
||||
))}
|
||||
|
||||
@ -7,7 +7,6 @@
|
||||
.rank_elements {
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
/* background-color: #5843e4; */
|
||||
border-color: grey;
|
||||
/* overflow: scroll; */
|
||||
padding: 5px 100px;
|
||||
@ -15,16 +14,12 @@
|
||||
}
|
||||
|
||||
.scroll {
|
||||
/* border:3px; */
|
||||
/* background-color: #5843e4; */
|
||||
/* border-color: white; */
|
||||
overflow: scroll;
|
||||
height: 68vh;
|
||||
}
|
||||
|
||||
.profilePic{
|
||||
margin-left: 10px;
|
||||
/* margin-top: 10px; */
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
|
||||
@ -1,10 +1,7 @@
|
||||
.Header {
|
||||
background-image: linear-gradient(90deg, #5843e4, #5a0760);
|
||||
/* background-color: blue; */
|
||||
|
||||
height: 80px;
|
||||
display: flex;
|
||||
/* justify-content: start; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -25,10 +22,6 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: 350ms;
|
||||
/* margin-top: 10px; */
|
||||
|
||||
/* left: -100%; */
|
||||
/* transition: 850ms; */
|
||||
}
|
||||
|
||||
.nav-menu.active {
|
||||
@ -38,10 +31,8 @@
|
||||
|
||||
.nav-text {
|
||||
display: flex;
|
||||
/* justify-content: start; */
|
||||
align-items: center;
|
||||
padding: 8px 0px 8px 16px;
|
||||
|
||||
list-style: none;
|
||||
height: 60px;
|
||||
}
|
||||
@ -54,9 +45,7 @@
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* padding: 0 16px; */
|
||||
padding: 8px 8px 8px 8px;
|
||||
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@ -73,7 +62,6 @@
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
/* justify-content: start; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@ -92,17 +80,12 @@ span {
|
||||
.success {
|
||||
height: 2%;
|
||||
width: 2%;
|
||||
/* border: solid; */
|
||||
margin-top: 1%;
|
||||
margin: 3vh;
|
||||
/* margin-bottom: -12vh; */
|
||||
/* border-color: black; */
|
||||
/* border-radius: 50%; */
|
||||
}
|
||||
|
||||
.header-pic{
|
||||
text-align: end;
|
||||
/* id: right; */
|
||||
}
|
||||
|
||||
.footer {
|
||||
@ -122,7 +105,6 @@ span {
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* background: #000000e1; */
|
||||
backdrop-filter: blur(1.5rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -56,18 +56,13 @@ select{
|
||||
width: 30%;
|
||||
overflow: scroll;
|
||||
border-radius: 0px 0px 0px 10px;
|
||||
/* width: 2rem; */
|
||||
/* height: 4rem; */
|
||||
}
|
||||
|
||||
.messages_box{
|
||||
background-color: rgb(0, 0, 0);
|
||||
/* height: 90vh; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* position:relative; */
|
||||
|
||||
}
|
||||
|
||||
.container{
|
||||
@ -96,11 +91,8 @@ select{
|
||||
}
|
||||
|
||||
.navbar{
|
||||
/* width: clamp(50%, 500px, 20%); */
|
||||
/* height: min(50%, 100px); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* background-color: yellow; */
|
||||
background-image: linear-gradient(90deg, #5843e4, #5a0760);
|
||||
color: white;
|
||||
padding: 3px;
|
||||
@ -109,11 +101,8 @@ select{
|
||||
}
|
||||
|
||||
.navbarSocial{
|
||||
/* width: clamp(50%, 500px, 20%); */
|
||||
/* height: min(50%, 100px); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* background-color: yellow; */
|
||||
margin: 10px;
|
||||
background-image: linear-gradient(90deg, #5843e4, #5a0760);
|
||||
color: white;
|
||||
@ -142,14 +131,10 @@ select{
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
|
||||
.messages{
|
||||
/* background-color: rgb(26, 26, 26); */
|
||||
/* height: calc(100% - 118px); */
|
||||
width: 70%;
|
||||
/* height: 300px; */
|
||||
border-radius: 0px 0px 10px 0px;
|
||||
overflow: scroll;
|
||||
}
|
||||
@ -247,8 +232,6 @@ p {
|
||||
.div_submit {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
/* margin-left: 4px;
|
||||
margin-right: 4px; */
|
||||
}
|
||||
|
||||
.lookForFriends{
|
||||
@ -268,7 +251,6 @@ p {
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
/* display: flex; */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 86, 27, 0.7);
|
||||
@ -276,21 +258,6 @@ p {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
/* .redAlert{
|
||||
width: clamp(50%, 500px, 90%);
|
||||
height: min(50%, 100px);
|
||||
|
||||
margin: auto;
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background-color: rgba(133, 6, 6, 0.7);
|
||||
font-size: 25px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
} */
|
||||
|
||||
.redAlert{
|
||||
width: clamp(50%, 500px, 90%);
|
||||
height: min(50%, 100px);
|
||||
@ -300,7 +267,6 @@ p {
|
||||
border-radius: 12px;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
/* align-items: center; */
|
||||
background-color: rgba(133, 6, 6, 0.7);
|
||||
font-size: 25px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -335,8 +301,6 @@ p {
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
/* align-items: center; */
|
||||
background-color: #3e3c61;
|
||||
overflow: scroll;
|
||||
}
|
||||
@ -354,8 +318,6 @@ p {
|
||||
.settingSecondPart{
|
||||
margin-top: 10%;
|
||||
margin-left: 5%;
|
||||
|
||||
/* margin-left: 20%; */
|
||||
}
|
||||
|
||||
.checkbox{
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
/* Container style */
|
||||
.file-upload-container {
|
||||
|
||||
margin-left: 2rem;
|
||||
font-size: 1.7rem;
|
||||
/* background: #5843e4; */
|
||||
/* color:#f5f5f5; */
|
||||
margin: 0 16px;
|
||||
text-decoration: none;
|
||||
padding: 10px 16px;
|
||||
@ -15,11 +11,8 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* File input style */
|
||||
.file-input {
|
||||
/* background: #5843e4; */
|
||||
/* color:#f5f5f5; */
|
||||
display: none; /* Hide the default file input */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-label {
|
||||
|
||||
@ -1,17 +1,8 @@
|
||||
.tab{
|
||||
/* display: flex; */
|
||||
/* flex-direction: column; */
|
||||
/* background-color: red; */
|
||||
height: 60vh;
|
||||
/* padding: 15px; */
|
||||
/* overflow: scroll; */
|
||||
|
||||
}
|
||||
|
||||
.scroll {
|
||||
/* border:3px; */
|
||||
/* background-color: #5843e4; */
|
||||
/* border-color: white; */
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
@ -20,26 +11,20 @@
|
||||
}
|
||||
|
||||
.elements {
|
||||
/* display: flex; */
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
/* background-color: #5843e4; */
|
||||
border-color: grey;
|
||||
/* overflow: scroll; */
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #5843e4;
|
||||
/* font-size: 22px; */
|
||||
font-weight: bold;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.content {
|
||||
color: white;
|
||||
/* font-size: 22px; */
|
||||
font-weight: bold;
|
||||
/* display: flex; */
|
||||
flex-direction: column;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@ -48,11 +33,8 @@
|
||||
display:inline;
|
||||
flex-direction: row;
|
||||
color: white;
|
||||
/* font-size: 22px; */
|
||||
font-weight: bold;
|
||||
flex-direction: row;
|
||||
/* text-align: justify; */
|
||||
/* margin-bottom: 5px; */
|
||||
}
|
||||
|
||||
.me {
|
||||
|
||||
@ -157,13 +157,3 @@
|
||||
font-size: 13px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
/* Messages.css */
|
||||
/* import '../../styles/Messages.css' */
|
||||
|
||||
/* General styles */
|
||||
/* Messages.css */
|
||||
/* import '../../styles/Messages.css' */
|
||||
|
||||
/* General styles
|
||||
@ -18,32 +18,22 @@
|
||||
|
||||
.field {
|
||||
background-color: rgb(249, 249, 249);
|
||||
/* border-radius: 5vh; */
|
||||
/* color: rgb(100, 42, 42); */
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 5vh;
|
||||
/* padding: 2vh 5vw; */
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
/* font-size: 300%; */
|
||||
}
|
||||
|
||||
.clicked{
|
||||
/* justify-content: center; */
|
||||
/* display: flex;
|
||||
justify-content: center; */
|
||||
background-color: rgb(0, 0, 0);
|
||||
width: 70vw;
|
||||
/* height: 70vh; */
|
||||
margin:auto;
|
||||
margin-right: 15vw;
|
||||
margin-left: 15vw;
|
||||
margin-top: 10vh;
|
||||
position: relative;
|
||||
padding-top: 35%;
|
||||
/* padding-top: 25; */
|
||||
/* padding-top: 177.77% */
|
||||
}
|
||||
@media screen and (max-width: 900px){
|
||||
.playButton{
|
||||
@ -74,36 +64,9 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* @media screen and (max-width: 350px){
|
||||
.responsive{
|
||||
display:list-item;
|
||||
flex-direction: column;
|
||||
}
|
||||
} */
|
||||
|
||||
#myCanvas {
|
||||
background-color: rgb(124, 47, 47);
|
||||
/* position: absolute; */
|
||||
/* top: 0; */
|
||||
/* left: 0; */
|
||||
/* cursor: none; */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* @media screen and (max-width: 768px) { */
|
||||
/* #canvas_container { */
|
||||
/* width: 50%; */
|
||||
/* transform: rotate(90deg);
|
||||
transform-origin: top right;
|
||||
position: relative;
|
||||
/* margin-right: 100vw; */
|
||||
/* height: 100vw; */
|
||||
/* width: 100vh; */
|
||||
/* } */
|
||||
/* #myCanvas {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
} */
|
||||
/* } */
|
||||
@ -5,7 +5,6 @@ body {
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* height: 100%; */
|
||||
}
|
||||
|
||||
code {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
body {
|
||||
/* display: flex; */
|
||||
margin: 0%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
@ -20,7 +19,6 @@ footer {
|
||||
width: 7vw;
|
||||
max-height: 7vh;
|
||||
max-width: 7vh;
|
||||
/* max-width: ; */
|
||||
border-radius: 50%;
|
||||
border: 5px solid rgb(255, 255, 255);
|
||||
}
|
||||
@ -66,7 +64,6 @@ input{
|
||||
}
|
||||
|
||||
.username {
|
||||
/* justify-content: center; */
|
||||
margin-right: 1vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -90,7 +87,6 @@ input{
|
||||
.menu {
|
||||
margin-left: 2vw;
|
||||
color: aqua;
|
||||
/* font-size: 4vh; */
|
||||
font-size: 2vw;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -111,9 +107,7 @@ input{
|
||||
display:flex;
|
||||
max-width: 33%;
|
||||
height: 100%;
|
||||
/* font-size: 50px; */
|
||||
color:blueviolet;
|
||||
/* font-size: 10vw; */
|
||||
font-size: min(10vw, 10vh);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user