From fcd7fdc9056a872733c238938f16d19d512b3d43 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Tue, 13 Jun 2023 19:53:36 +0200 Subject: [PATCH] alert --- .../react/src/components/Alert/GreenAlert.jsx | 39 +++++++++++ .../react/src/components/Alert/RedAlert.jsx | 38 +++++++++++ .../src/components/Alert/YellowAlert.jsx | 37 +++++++++++ .../react/src/components/Messages/Alert.jsx | 13 ---- .../react/src/components/Messages/Chats.jsx | 64 +++++++++++++------ containers/react/src/styles/Messages.css | 60 ++++++++++++++++- 6 files changed, 216 insertions(+), 35 deletions(-) create mode 100644 containers/react/src/components/Alert/GreenAlert.jsx create mode 100644 containers/react/src/components/Alert/RedAlert.jsx create mode 100644 containers/react/src/components/Alert/YellowAlert.jsx delete mode 100644 containers/react/src/components/Messages/Alert.jsx diff --git a/containers/react/src/components/Alert/GreenAlert.jsx b/containers/react/src/components/Alert/GreenAlert.jsx new file mode 100644 index 00000000..cded387b --- /dev/null +++ b/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( + + e.stopPropagation()} + className="greenAlert" + variant={dropIn} + initial="hidden" + animate="visible" + exit="exit" + > + +

{text}

+ + {setTimeout(handleClose, 3000)} + + ) +} + +export default GreenAlert \ No newline at end of file diff --git a/containers/react/src/components/Alert/RedAlert.jsx b/containers/react/src/components/Alert/RedAlert.jsx new file mode 100644 index 00000000..3a9104b1 --- /dev/null +++ b/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( + + e.stopPropagation()} + className="redAlert" + variant={dropIn} + initial="hidden" + animate="visible" + exit="exit" + > + +

{text}

+ + {setTimeout(handleClose, 3000)} + + ) +} + +export default RedAlert \ No newline at end of file diff --git a/containers/react/src/components/Alert/YellowAlert.jsx b/containers/react/src/components/Alert/YellowAlert.jsx new file mode 100644 index 00000000..bbedcdca --- /dev/null +++ b/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( + + e.stopPropagation()} + className="yellowAlert" + variant={dropIn} + initial="hidden" + animate="visible" + exit="exit" + > + +

{text}

+ + {setTimeout(handleClose, 3000)} + + ) +} + +export default YellowAlert \ No newline at end of file diff --git a/containers/react/src/components/Messages/Alert.jsx b/containers/react/src/components/Messages/Alert.jsx deleted file mode 100644 index 79a269ba..00000000 --- a/containers/react/src/components/Messages/Alert.jsx +++ /dev/null @@ -1,13 +0,0 @@ -// import Alert from '@mui/material/Alert'; -// import Stack from '@mui/material/Stack'; - -function BasicAlert () { - return( - <> - // - // Check this out - // - ) -} - -export default BasicAlert \ No newline at end of file diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx index 01d6d6ee..0fbf3230 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/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 = () => { - 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(){
-
+ (addFriend ? setAddFriend(false) : setAddFriend(true))}> - {find ? ("") : ("")} -
+ {/* {console.log("find = ",find) && setFind(true)} */} + + null} + > + {addFriend && } + + {/* {console.log("find2 = ", find) && find && } */} + (block ? setBlock(false) : setBlock(true))} + > + null} + > + {block && } + +
@@ -304,7 +327,6 @@ function Chats(){ (modalOpen ? close() : open())} - > New Conversation diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 5735f1b4..37c84b40 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -202,4 +202,62 @@ input{ width: 11rem; height: 1.5rem; margin-top: 1rem; -} \ No newline at end of file +} + +.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); +} +