From 2e8e9e337eb8ccae44ca5f3a5e8c3a5cdbe4e35a Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sat, 10 Jun 2023 01:58:10 +0200 Subject: [PATCH 1/8] new message --- .../react/src/components/Messages/Chats.jsx | 63 +++++++++++-------- .../react/src/components/Messages/Message.jsx | 4 +- containers/react/src/styles/Messages.css | 34 +++++++++- containers/react/src/styles/chat.css | 6 +- 4 files changed, 74 insertions(+), 33 deletions(-) diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx index ac19b416..f703df2e 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -12,6 +12,7 @@ import Message from "./Message" import { TbSend } from 'react-icons/tb'; import { ImBlocked } from 'react-icons/im'; import { MdOutlineGroupAdd } from 'react-icons/md'; +import { GrAdd } from 'react-icons/gr' const TouchDiv = styled.div` @@ -228,7 +229,7 @@ function Chats(){ return (
-
+ {/*
profile {isLoading ? ( @@ -238,7 +239,7 @@ function Chats(){ //

{user.username}

)} -
+
*/} @@ -260,25 +261,38 @@ function Chats(){
- {conversations.map(c=> ( -
setCurrentChat(c)}> - - User -
- {c.name} - Desc? +
+
+ + +
+ + New Message
- + + {conversations.map(c=> ( +
setCurrentChat(c)}> + + User +
+ {c.name} + Desc? +
+ +
+ + ))}
- ))} { currentChat ? ( - <> + <>
- {messages.map(m=>( - - ))} +
+ {messages.map(m=>( + + ))} +
{/* */}
setNewMessage(e.target.value)} value={newMessages} - /> + />
@@ -295,19 +309,14 @@ function Chats(){
) : ( - Open a conversation)} +
+ Open a conversation +
+ )} +
//
- ); - - - - - - - - - + ); } export default Chats \ No newline at end of file diff --git a/containers/react/src/components/Messages/Message.jsx b/containers/react/src/components/Messages/Message.jsx index cd10f4e1..f333e267 100644 --- a/containers/react/src/components/Messages/Message.jsx +++ b/containers/react/src/components/Messages/Message.jsx @@ -19,10 +19,10 @@ import DefaultPicture from '../../assets/profile.jpg' import '../../styles/Messages.css' const MeStyleP = styled.p` - background-color: lightgray; + background-color: #5843e4; padding 10px 20px; border-radius 10px 0px 10px 10px; - color: black; + color: white; margin-right: 20px; ` diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index b72d5208..f62c2860 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -1,12 +1,38 @@ .home{ background-color: black; - height: 90vh; + height: 10vh; display: flex; align-items: center; justify-content: center; } +.scroll{ + overflow: scroll; +} + +.newMessage{ + color: white; + font-size: 18px; +} + +.contact{ + background-color: rgb(46, 46, 46); + align-items: left; + /* width: 2rem; */ + /* height: 4rem; */ +} + +.messages_box{ + background-color: black; + /* height: 90vh; */ + display: flex; + align-items: center; + justify-content: center; + /* position:relative; */ + +} + .container{ border-color: #FFFFFF ; border-radius: 50%; @@ -65,8 +91,9 @@ } .messages{ - background-color: #349b83; - height: calc(100% - 118px); + background-color: black; + /* height: calc(100% - 118px); */ + width: 40rem; overflow: scroll; } @@ -115,4 +142,5 @@ input{ display: flex; flex-direction: row-reverse; padding: 20px; + color: lightgrey; } \ No newline at end of file diff --git a/containers/react/src/styles/chat.css b/containers/react/src/styles/chat.css index 0fde8fdb..cf81842f 100644 --- a/containers/react/src/styles/chat.css +++ b/containers/react/src/styles/chat.css @@ -38,9 +38,13 @@ .chat { width: 100%; height: 100vh; - display: flex; + display:inline-block; align-items: center; } + +.chat_2{ + display:flex; +} .chat__sidebar { height: 100%; background-color: #f9f5eb; From 71ab9d2b01456f4fa60c400425a41905fb1733d2 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sat, 10 Jun 2023 22:30:06 +0200 Subject: [PATCH 2/8] ajout cote message --- .../src/components/Messages/AddSelectTag.jsx | 37 ++++++ .../react/src/components/Messages/Chats.jsx | 27 +++-- .../react/src/components/Messages/Modal.jsx | 107 ++++++++++++++++++ containers/react/src/styles/Messages.css | 51 ++++++++- 4 files changed, 213 insertions(+), 9 deletions(-) create mode 100644 containers/react/src/components/Messages/AddSelectTag.jsx create mode 100644 containers/react/src/components/Messages/Modal.jsx diff --git a/containers/react/src/components/Messages/AddSelectTag.jsx b/containers/react/src/components/Messages/AddSelectTag.jsx new file mode 100644 index 00000000..07f6c70e --- /dev/null +++ b/containers/react/src/components/Messages/AddSelectTag.jsx @@ -0,0 +1,37 @@ +import React, { useState } from "react"; +import { Rank } from "../../DataBase/DataRank"; + +const AddSelectTag = () => { + // const [selectCount, setSelectCount] = useState(0); + // const [selectValues, setSelectValues] = useState([]); + + // const handleAddSelect = () => { + // setSelectCount((selectCount) => selectCount + 1); + // setSelectCount((selectValues) =>[...selectValues, `select${selectCount + 1}`] ); + // }; + + return ( +
+ {/* +
+ {selectValues.map((selectName, index) => ( + + ))} +
*/} + */} + + ) + })} + +
+ ) +} + +export default AddSelectTag; \ 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 f703df2e..10cf2e10 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -4,6 +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 Modal from "./Modal"; import Message from "./Message" // import Input from "./Input"; @@ -214,6 +216,10 @@ function Chats(){ } } + const [modalOpen, setModalOpen] = useState(false); + const close = () => setModalOpen(false); + const open = () => setModalOpen(true); + // console.log(`data user1= ${user.username}`) // while (user === null) @@ -265,13 +271,20 @@ function Chats(){
-
- - New Message -
+ (modalOpen ? close() : open())} + + > + + New Conversation + + {modalOpen && } + - {conversations.map(c=> ( -
setCurrentChat(c)}> + {conversations.map((c, index ) => { + return ( +
setCurrentChat(c)}> User
@@ -281,7 +294,7 @@ function Chats(){
- ))} + )})}
{ diff --git a/containers/react/src/components/Messages/Modal.jsx b/containers/react/src/components/Messages/Modal.jsx new file mode 100644 index 00000000..02293aa9 --- /dev/null +++ b/containers/react/src/components/Messages/Modal.jsx @@ -0,0 +1,107 @@ +import { motion } from "framer-motion"; +import Backdrop from "../Sidebar/Backdrop"; +import { Rank } from "../../DataBase/DataRank" +import '../../styles/Messages.css' +import { useState } from "react"; +import { GrAdd } from "react-icons/gr"; +import { Link } from "react-router-dom"; +import AddSelectTag from "./AddSelectTag"; + +const dropIn = { + hidden:{y:"-100vh", + opacity: 0,}, + visible:{y: "0", + opacity: 0, + transotion:{ + duration:0.1, + type:"spring", + damping: 100, + stiffness: 500, + }}, + exit:{y: "100vh", + opacity: 0,}, + +}; + +const Modal = ({handleClose, text}) => { + const [multi, setMulti] = useState(false); + // const addButton = document.getElementById('addButton'); + // const selectContainer = document.getElementById('selectContainer'); + // let selectCount = 0; + // function addSelectTag(){ + // selectCount++; + // const select = document.createElement('select'); + // select.name = `select${selectCount}`; + + // const opt1 = document.createElement('option'); + // opt1.value = 'opt1'; + // opt1.text = 'opt1'; + + // const opt2 = document.createElement('option'); + // opt2.value = 'opt2'; + // opt2.text = 'opt2'; + + // select.appendChild(opt1); + // select.appendChild(opt2); + + // selectContainer.appendChild(select); + // } + function try_me() + { + + for (let i = 0; i < 2; i++) + { + AddSelectTag(); + } + } + return ( + + e.stopPropagation()} + className="modal" + variant={dropIn} + initial="hidden" + animate="visible" + exit="exit" + > +

New Convewrstion

+ +{/* First selection */} + + + +{/* Second selection */} + + */} + + ) + })} + + {/* */} + {/* addButton.addEventListener('click', addSelectTag); */} +
(try_me())}> + {multi === true ? : " "} +
+
+ Submit + + Cancel +
+ + + + ) +} + +export default Modal \ No newline at end of file diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index f62c2860..ecc0bd30 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -1,12 +1,39 @@ .home{ background-color: black; - height: 10vh; + height: 90vh; display: flex; align-items: center; justify-content: center; } +select{ + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + background: black; + color: white; + box-shadow: none; + appearance: none; + outline: 0; + border: 0!important; + margin: 5px; + font-size: 18px; + border-radius: 6px; +} + +.modal{ + width: clamp(50%, 700px, 90%); + height: min(50%, 300px); + + margin: auto; + padding: 2rem; + border-radius: 12px; + display: flex; + flex-direction: column; + align-items: center; +} + .scroll{ overflow: scroll; } @@ -61,9 +88,11 @@ .navbar{ display: flex; align-items: center; - background-color: #000c66; + /* background-color: yellow; */ + background-image: linear-gradient(90deg, #5843e4, #5a0760); color: white; padding: 3px; + border-radius: 10px 10px 0px 0px; } .pic{ @@ -143,4 +172,22 @@ input{ flex-direction: row-reverse; padding: 20px; color: lightgrey; +} + +.submit{ + display: inline-block; + color: white; + background-color: #5843e4; + border-radius: 10px; + padding: 5px; + font-size: 1.2rem; + text-decoration: none; + font-weight:lighter; +} + +.div_submit { + flex-direction: row; + align-items: center; + /* margin-left: 4px; + margin-right: 4px; */ } \ No newline at end of file From 779e9373103c2cd698b949ca551415725b1f8cc5 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 11 Jun 2023 16:49:05 +0200 Subject: [PATCH 3/8] debloque sur l'ajout de tag select --- .../src/components/Messages/AddSelectTag.jsx | 29 +++++-- .../react/src/components/Messages/Modal.jsx | 78 ++++++++++++------- 2 files changed, 72 insertions(+), 35 deletions(-) diff --git a/containers/react/src/components/Messages/AddSelectTag.jsx b/containers/react/src/components/Messages/AddSelectTag.jsx index 07f6c70e..320bd040 100644 --- a/containers/react/src/components/Messages/AddSelectTag.jsx +++ b/containers/react/src/components/Messages/AddSelectTag.jsx @@ -1,7 +1,8 @@ import React, { useState } from "react"; import { Rank } from "../../DataBase/DataRank"; +import { GrAdd } from "react-icons/gr"; -const AddSelectTag = () => { +function AddSelectTag ({number, array, new_name}) { // const [selectCount, setSelectCount] = useState(0); // const [selectValues, setSelectValues] = useState([]); @@ -9,7 +10,11 @@ const AddSelectTag = () => { // setSelectCount((selectCount) => selectCount + 1); // setSelectCount((selectValues) =>[...selectValues, `select${selectCount + 1}`] ); // }; - + // function insertInArray (number, array, new_name) { + // return ( + // array[number] = new_name + // ); + // }; return (
{/* @@ -21,15 +26,25 @@ const AddSelectTag = () => { ))}
*/} - {Rank.map((item, index) => { return ( - ) - })} - + {/* */} + {/* ) */} + {/* // })} */} + {/* // */} + {/*
}> */} +
+ + {/*

{new_name}

*/} +
+ {/* {number != 0 ? ( +
+

{array[number]}

+
+ ) : ("")} */}
) } diff --git a/containers/react/src/components/Messages/Modal.jsx b/containers/react/src/components/Messages/Modal.jsx index 02293aa9..1af38a66 100644 --- a/containers/react/src/components/Messages/Modal.jsx +++ b/containers/react/src/components/Messages/Modal.jsx @@ -25,27 +25,26 @@ const dropIn = { const Modal = ({handleClose, text}) => { const [multi, setMulti] = useState(false); - // const addButton = document.getElementById('addButton'); - // const selectContainer = document.getElementById('selectContainer'); - // let selectCount = 0; - // function addSelectTag(){ - // selectCount++; - // const select = document.createElement('select'); - // select.name = `select${selectCount}`; + const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]); + const [selectedOptionArray, setSelectedOptionArray] = useState([]); - // const opt1 = document.createElement('option'); - // opt1.value = 'opt1'; - // opt1.text = 'opt1'; + const handleOptionChange = (selectId, selectedOption) => { + setSelectTag((prevTags) => + prevTags.map((tag) => + tag.id === selectId ? { ...tag, selectedOption } : tag + ) + ); + }; - // const opt2 = document.createElement('option'); - // opt2.value = 'opt2'; - // opt2.text = 'opt2'; + const addNewSelectedTag = () => { + const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1; + setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]); + }; - // select.appendChild(opt1); - // select.appendChild(opt2); - - // selectContainer.appendChild(select); - // } + const saveSelectedOptions = () => { + const selectedOptions = selectTags.map((tag) => tag.selectedOption); + setSelectedOptionArray(selectedOptions); + } function try_me() { @@ -54,6 +53,10 @@ const Modal = ({handleClose, text}) => { AddSelectTag(); } } + let new_name; + let number; + let array; + // const [nickname, setNickname] = useState(""); return ( { {/* Second selection */} + {selectTags.map((selectTag) =>( +
- handleOptionChange(selectTag.id, a.target.value)}> {Rank.map((item, index) => { return ( - + <> + + + ) })} - - {/* */} - {/* addButton.addEventListener('click', addSelectTag); */} -
(try_me())}> - {multi === true ? : " "} + +
+ )) + } + {/* + */} +
+

Selected Option:

+
    + {selectedOptionArray.map((option, index) => ( +
  • {option}
    • + ))} +
+
+
+ {/*

nickname = "{new_name}"

*/} + {multi === true ? ( + // + ) : " "}
- Submit + Submit Cancel
From be16915fbcc46e0d3957feb5c264c6ab1c70b54a Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Sun, 11 Jun 2023 23:12:48 +0200 Subject: [PATCH 4/8] remise en place des conversation --- .../src/components/Messages/AddSelectTag.jsx | 52 ------------------- .../react/src/components/Messages/Chats.jsx | 6 ++- .../react/src/components/Messages/Modal.jsx | 16 ------ containers/react/src/styles/Messages.css | 2 + 4 files changed, 7 insertions(+), 69 deletions(-) delete mode 100644 containers/react/src/components/Messages/AddSelectTag.jsx diff --git a/containers/react/src/components/Messages/AddSelectTag.jsx b/containers/react/src/components/Messages/AddSelectTag.jsx deleted file mode 100644 index 320bd040..00000000 --- a/containers/react/src/components/Messages/AddSelectTag.jsx +++ /dev/null @@ -1,52 +0,0 @@ -import React, { useState } from "react"; -import { Rank } from "../../DataBase/DataRank"; -import { GrAdd } from "react-icons/gr"; - -function AddSelectTag ({number, array, new_name}) { - // const [selectCount, setSelectCount] = useState(0); - // const [selectValues, setSelectValues] = useState([]); - - // const handleAddSelect = () => { - // setSelectCount((selectCount) => selectCount + 1); - // setSelectCount((selectValues) =>[...selectValues, `select${selectCount + 1}`] ); - // }; - // function insertInArray (number, array, new_name) { - // return ( - // array[number] = new_name - // ); - // }; - return ( -
- {/* -
- {selectValues.map((selectName, index) => ( - - ))} -
*/} - {/* */} - {/* */} - {/* ) */} - {/* // })} */} - {/* // */} - {/*
}> */} -
- - {/*

{new_name}

*/} -
- {/* {number != 0 ? ( -
-

{array[number]}

-
- ) : ("")} */} -
- ) -} - -export default AddSelectTag; \ 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 10cf2e10..bf0bfdb3 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -6,6 +6,7 @@ import DefaultPic from '../../assets/profile.jpg' import api from '../../script/axiosApi'; import { motion } from "framer-motion"; import Modal from "./Modal"; +import { NavLink } from "react-router-dom"; import Message from "./Message" // import Input from "./Input"; @@ -41,6 +42,9 @@ const UserChat = styled.div ` &:hover{ background-color: #3e3c61; } + &:active { + filter: black; + } ` // const SideSpan = styled.span` @@ -284,7 +288,7 @@ function Chats(){ {conversations.map((c, index ) => { return (
setCurrentChat(c)}> + onClick={() => setCurrentChat(c)}> User
diff --git a/containers/react/src/components/Messages/Modal.jsx b/containers/react/src/components/Messages/Modal.jsx index 1af38a66..4dea9b6e 100644 --- a/containers/react/src/components/Messages/Modal.jsx +++ b/containers/react/src/components/Messages/Modal.jsx @@ -5,7 +5,6 @@ import '../../styles/Messages.css' import { useState } from "react"; import { GrAdd } from "react-icons/gr"; import { Link } from "react-router-dom"; -import AddSelectTag from "./AddSelectTag"; const dropIn = { hidden:{y:"-100vh", @@ -45,18 +44,7 @@ const Modal = ({handleClose, text}) => { const selectedOptions = selectTags.map((tag) => tag.selectedOption); setSelectedOptionArray(selectedOptions); } - function try_me() - { - - for (let i = 0; i < 2; i++) - { - AddSelectTag(); - } - } let new_name; - let number; - let array; - // const [nickname, setNickname] = useState(""); return ( {
)) } - {/* - */}

Selected Option:

    @@ -110,9 +96,7 @@ const Modal = ({handleClose, text}) => {
- {/*

nickname = "{new_name}"

*/} {multi === true ? ( - // ) : " "}
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index ecc0bd30..96d437a2 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -46,6 +46,8 @@ select{ .contact{ background-color: rgb(46, 46, 46); align-items: left; + height: 29.7rem; + overflow: scroll; /* width: 2rem; */ /* height: 4rem; */ } From a776ac48d86938c45f00bc89e4260b2eb339fd70 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Mon, 12 Jun 2023 13:59:59 +0200 Subject: [PATCH 5/8] changement secret --- containers/api/src/auth/login42.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/containers/api/src/auth/login42.ts b/containers/api/src/auth/login42.ts index 4d0adea4..0ec25ef8 100644 --- a/containers/api/src/auth/login42.ts +++ b/containers/api/src/auth/login42.ts @@ -25,7 +25,7 @@ export class loginClass { const data = { grant_type: 'authorization_code', client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41', - client_secret: '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', + client_secret: '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', code: code, redirect_uri: 'http://localhost:80/api/auth/login', }; From 69d48df0fa5d99c029388c4bb741b0b630f7b388 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Tue, 13 Jun 2023 00:21:52 +0200 Subject: [PATCH 6/8] input look for friends --- .../react/src/components/Messages/Chats.jsx | 25 +++++++++++++++++-- containers/react/src/styles/Messages.css | 10 ++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx index bf0bfdb3..6922509e 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -15,7 +15,10 @@ import Message from "./Message" import { TbSend } from 'react-icons/tb'; import { ImBlocked } from 'react-icons/im'; import { MdOutlineGroupAdd } from 'react-icons/md'; -import { GrAdd } from 'react-icons/gr' +import { GrAdd } from 'react-icons/gr'; + +import { Rank } from "../../DataBase/DataRank"; +import BasicAlert from "./Alert"; const TouchDiv = styled.div` @@ -220,10 +223,24 @@ function Chats(){ } } + const [friend, setFriend] = useState(""); const [modalOpen, setModalOpen] = useState(false); + const [find, setFind] = useState(false); const close = () => setModalOpen(false); const open = () => setModalOpen(true); + const handleFriend = e => { + setFriend(e.target.value) + }; + + const findValue = () => { + setFind(false); + Rank.map((tab) => { + if (tab.name === friend) + setFind(true); + }) + }; + // console.log(`data user1= ${user.username}`) // while (user === null) @@ -263,8 +280,12 @@ function Chats(){ )}
+ - +
+ + {find ? () : ("")} +
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css index 96d437a2..5735f1b4 100644 --- a/containers/react/src/styles/Messages.css +++ b/containers/react/src/styles/Messages.css @@ -192,4 +192,14 @@ input{ align-items: center; /* margin-left: 4px; margin-right: 4px; */ +} + +.lookForFriends{ + color: rgba(255, 255, 255, 0.5);; + backdrop-filter: sepia(90%); + background-color: rgba(0, 0, 0, 0.3); + border-radius: 4px; + width: 11rem; + height: 1.5rem; + margin-top: 1rem; } \ No newline at end of file From 8e7500c7cbaacdb8eac3b48e338023113c868a13 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Tue, 13 Jun 2023 13:36:01 +0200 Subject: [PATCH 7/8] error components --- containers/react/src/components/Messages/Alert.jsx | 13 +++++++++++++ containers/react/src/components/Messages/Chats.jsx | 8 +++++++- 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 containers/react/src/components/Messages/Alert.jsx diff --git a/containers/react/src/components/Messages/Alert.jsx b/containers/react/src/components/Messages/Alert.jsx new file mode 100644 index 00000000..79a269ba --- /dev/null +++ b/containers/react/src/components/Messages/Alert.jsx @@ -0,0 +1,13 @@ +// 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 6922509e..01d6d6ee 100644 --- a/containers/react/src/components/Messages/Chats.jsx +++ b/containers/react/src/components/Messages/Chats.jsx @@ -235,10 +235,16 @@ function Chats(){ 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}`) @@ -284,7 +290,7 @@ function Chats(){
- {find ? () : ("")} + {find ? ("") : ("")}
From fcd7fdc9056a872733c238938f16d19d512b3d43 Mon Sep 17 00:00:00 2001 From: Little Dipper Date: Tue, 13 Jun 2023 19:53:36 +0200 Subject: [PATCH 8/8] 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); +} +