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

alert

Browse Source
This commit is contained in:
Little Dipper 2023-06-13 19:53:36 +02:00
parent 8e7500c7cb
commit fcd7fdc905
6 changed files with 216 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
containers/react/src/components/Alert/GreenAlert.jsx Normal file
View File

@ -0,0 +1,39 @@
import Backdrop from "../Sidebar/Backdrop"
import { motion } from 'framer-motion'
import { AiOutlineCheckCircle } from "react-icons/ai";
import '../../styles/Messages.css'
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
function GreenAlert ({handleClose, text}){
return(
<Backdrop>
<motion.div
onClick={(e) => e.stopPropagation()}
className="greenAlert"
variant={dropIn}
initial="hidden"
animate="visible"
exit="exit"
>
<AiOutlineCheckCircle/>
<p>{text}</p>
</motion.div>
{setTimeout(handleClose, 3000)}
</Backdrop>
)
}
export default GreenAlert

38
containers/react/src/components/Alert/RedAlert.jsx Normal file
View File

@ -0,0 +1,38 @@
import Backdrop from "../Sidebar/Backdrop"
import { motion } from 'framer-motion'
import { BiErrorCircle } from "react-icons/bi";
import '../../styles/Messages.css'
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
function RedAlert ({handleClose, text}) {
return(
<Backdrop>
<motion.div
onClick={(e) => e.stopPropagation()}
className="redAlert"
variant={dropIn}
initial="hidden"
animate="visible"
exit="exit"
>
<BiErrorCircle/>
<p>{text}</p>
</motion.div>
{setTimeout(handleClose, 3000)}
</Backdrop>
)
}
export default RedAlert

37
containers/react/src/components/Alert/YellowAlert.jsx Normal file
View File

@ -0,0 +1,37 @@
import Backdrop from "../Sidebar/Backdrop"
import { motion } from 'framer-motion'
import { GrTrophy } from "react-icons/gr";
import '../../styles/Messages.css'
const dropIn = {
hidden: {
y: "-100vh",
},
visible: {
y: "0",
},
exit: {
y: "-100vh",
},
};
function YellowAlert ({handleClose, text}) {
return(
<Backdrop>
<motion.div
onClick={(e) => e.stopPropagation()}
className="yellowAlert"
variant={dropIn}
initial="hidden"
animate="visible"
exit="exit"
>
<GrTrophy/>
<p>{text}</p>
</motion.div>
{setTimeout(handleClose, 3000)}
</Backdrop>
)
}
export default YellowAlert

13
containers/react/src/components/Messages/Alert.jsx
View File

@ -1,13 +0,0 @@
// import Alert from '@mui/material/Alert';
// import Stack from '@mui/material/Stack';
function BasicAlert () {
return(
<></>
// <Stack sx={{width: '100%'}} spacing={2}>
// <Alert severity="success">Check this out</Alert>
// </Stack>
)
}
export default BasicAlert

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

@ -4,9 +4,8 @@ import '../../styles/Messages.css'
import styled from "styled-components";
import DefaultPic from '../../assets/profile.jpg'
import api from '../../script/axiosApi';
import { motion } from "framer-motion";
import { motion , AnimatePresence} from "framer-motion";
import Modal from "./Modal";
import { NavLink } from "react-router-dom";
import Message from "./Message"
// import Input from "./Input";
@ -18,7 +17,9 @@ import { MdOutlineGroupAdd } from 'react-icons/md';
import { GrAdd } from 'react-icons/gr';
import { Rank } from "../../DataBase/DataRank";
import BasicAlert from "./Alert";
import GreenAlert from "../Alert/GreenAlert";
import RedAlert from "../Alert/RedAlert";
import YellowAlert from "../Alert/YellowAlert";
const TouchDiv = styled.div`
@ -225,27 +226,31 @@ function Chats(){
const [friend, setFriend] = useState("");
const [modalOpen, setModalOpen] = useState(false);
const [find, setFind] = useState(false);
const [addFriend, setAddFriend] = useState(false);
const [block, setBlock] = 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 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 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}`)
@ -288,13 +293,31 @@ function Chats(){
<div className="end">
<input className="lookForFriends" type="text" value={friend} onChange={handleFriend}/>
<TouchDiv>
<div onClick={findValue}>
<motion.div
onClick={() => (addFriend ? setAddFriend(false) : setAddFriend(true))}>
<MdOutlineGroupAdd/>
{find ? ("<BasicAlert/>") : ("")}
</div>
{/* {console.log("find = ",find) && setFind(true)} */}
</motion.div>
<AnimatePresence
initial={false}
onExitComplete={() => null}
>
{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
onClick={() => (block ? setBlock(false) : setBlock(true))}
>
<ImBlocked/>
<AnimatePresence
initial={false}
onExitComplete={() => null}
>
{block && <RedAlert handleClose={closeBlock} text={friend + " was successfuly blocked"}/>}
</AnimatePresence>
</motion.div>
</TouchDiv>
</div>
</div>
@ -304,7 +327,6 @@ function Chats(){
<motion.div className="newMessage"
onClick={() => (modalOpen ? close() : open())}
>
<GrAdd/>
<span>New Conversation</span>

60
containers/react/src/styles/Messages.css
View File

@ -202,4 +202,62 @@ input{
width: 11rem;
height: 1.5rem;
margin-top: 1rem;
}
}
.greenAlert{
width: clamp(50%, 500px, 90%);
height: min(50%, 100px);
margin: auto;
padding: 1rem;
border-radius: 12px;
/* display: flex; */
flex-direction: row;
align-items: center;
background-color: rgba(0, 86, 27, 0.7);
font-size: 25px;
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;
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);
margin: auto;
padding: 1rem;
border-radius: 12px;
flex-direction: row;
align-items: center;
background-color: rgba(133, 6, 6, 0.7);
font-size: 25px;
color: rgba(255, 255, 255, 1);
}
.yellowAlert{
width: clamp(50%, 500px, 90%);
height: min(50%, 100px);
margin: auto;
padding: 1rem;
border-radius: 12px;
flex-direction: row;
align-items: center;
background-color: rgba(212, 175, 55, 0.7);
font-size: 25px;
color: rgba(255, 255, 255, 1);
}