alert

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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

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

@@ -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 = () => {
+	// const findValue = () => {
-		setFind(false);
+	// 	// setFind(false);
-		console.log(friend);
+	// 	console.log(friend);
-		Rank.map((tab) => {
+	// 	Rank.map((tab) => {
-			if (tab.name === friend)
+	// 		if (tab.name === friend)
-			{
+	// 		{
-				console.log("ok bon");
+	// 			console.log("ok bon");
-				setFind(true);
+	// 			setFind(true);
-			}
+	// 		}
-		})
+	// 	})
-		console.log(find);
+	// 	console.log(find);
-		// if (!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/>") : ("")}
+							{/* {console.log("find = ",find) && setFind(true)} */}
-						</div>
+						</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>

containers/react/src/styles/Messages.css

@@ -203,3 +203,61 @@ input{
 	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);
+}
+