From ce88b4e163cb3920d2dcb00a14984e0a7b43f19e Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Wed, 14 Jun 2023 01:52:58 +0200
Subject: [PATCH 1/3] api/chat

---
 containers/api/src/chat/chat.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/containers/api/src/chat/chat.service.ts b/containers/api/src/chat/chat.service.ts
index 5cfa25a3..eb07634a 100644
--- a/containers/api/src/chat/chat.service.ts
+++ b/containers/api/src/chat/chat.service.ts
@@ -31,7 +31,7 @@ export class ChatService {
 //  import { createConnection } from 'typeorm';
  
   async getConv(username: string): Promise<Conv[]>{
-	// username = "apommier"
+	username = "sadjigui"
 	const convs = await this.chatRepository.query("SELECT * FROM \"conv\" WHERE $1 = ANY (ARRAY[members]);", [username])
 	console.log(`convs= ${convs}`)
 	return convs;

From 196f2a5e8800130adc1e091316414c84081a46d8 Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Fri, 16 Jun 2023 19:04:55 +0200
Subject: [PATCH 2/3] dimension, ajout params conv, retrait bar scroll

---
 .../react/src/components/Messages/Chats.jsx   |  20 +++
 .../src/components/Messages/ModalSetting.jsx  | 158 ++++++++++++++++++
 containers/react/src/styles/Messages.css      |  56 ++++++-
 containers/react/src/styles/Win_Loss.css      |   4 +
 4 files changed, 232 insertions(+), 6 deletions(-)
 create mode 100644 containers/react/src/components/Messages/ModalSetting.jsx

diff --git a/containers/react/src/components/Messages/Chats.jsx b/containers/react/src/components/Messages/Chats.jsx
index 0fbf3230..b70b604a 100644
--- a/containers/react/src/components/Messages/Chats.jsx
+++ b/containers/react/src/components/Messages/Chats.jsx
@@ -15,11 +15,13 @@ 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 { RiListSettingsLine } from 'react-icons/ri'
 
 import { Rank } from "../../DataBase/DataRank";
 import GreenAlert from "../Alert/GreenAlert";
 import RedAlert from "../Alert/RedAlert";
 import YellowAlert from "../Alert/YellowAlert";
+import ModalSetting from "./ModalSetting";
 
 
 const TouchDiv = styled.div`
@@ -228,10 +230,12 @@ function Chats(){
 	const [modalOpen, setModalOpen] = useState(false);
 	const [addFriend, setAddFriend] = useState(false);
 	const [block, setBlock] = useState(false);
+	const [setting, setSetting] = useState(false);
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
 	const closeAddFriend = () => setAddFriend(false);
 	const closeBlock = () => setBlock(false);
+	const closeSetting = () => setSetting(false);
 
 
 	const handleFriend = e => {
@@ -319,6 +323,22 @@ function Chats(){
 						</AnimatePresence>
 						</motion.div>
 					</TouchDiv>
+					{currentChat ? (
+
+						<TouchDiv>
+						<motion.div 
+						onClick={() => (setting ? setSetting(false) : setSetting(true))}
+						>
+						<RiListSettingsLine/>
+						<AnimatePresence
+							initial={false}
+							onExitComplete={() => null}
+							>
+							{setting && <ModalSetting handleClose={closeSetting}/>}
+						</AnimatePresence>
+						</motion.div>
+					</TouchDiv>
+					):("")}
 				</div>
 			</div>
 			<div className="messages_box">
diff --git a/containers/react/src/components/Messages/ModalSetting.jsx b/containers/react/src/components/Messages/ModalSetting.jsx
new file mode 100644
index 00000000..d642cd21
--- /dev/null
+++ b/containers/react/src/components/Messages/ModalSetting.jsx
@@ -0,0 +1,158 @@
+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";
+
+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 ModalSetting = ({handleClose, text}) => {
+    const [password, setPassword] = useState(false);
+
+    const handleCheckpass = (e) => {
+        setPassword(e.target.checked);
+    }
+    const [multi, setMulti] = useState(false);
+    const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
+    const [selectedOptionArray, setSelectedOptionArray] = useState([]);
+
+    const handleOptionChange = (selectId, selectedOption) => {
+        setSelectTag((prevTags) => 
+            prevTags.map((tag) =>
+                tag.id === selectId ? { ...tag, selectedOption } : tag
+            )
+        );
+    };
+
+    const addNewSelectedTag = () => {
+        const newSelectedId = Math.max (...selectTags.map((tag) => tag.id)) + 1;
+        setSelectTag([...selectTags, { id: newSelectedId, selectedOption: ''}]);
+    };
+
+    const saveSelectedOptions = () => {
+        const selectedOptions = selectTags.map((tag) => tag.selectedOption);
+        setSelectedOptionArray(selectedOptions);
+    }
+    let new_name;
+    return (
+        <Backdrop>
+            <motion.div
+                onClick={(e) => e.stopPropagation()}
+                className="modalSetting"
+                variant={dropIn}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+            >
+                {/* <p>New Convewrstion</p> */}
+
+{/* First selection  */}
+                <div className="settingFirstPart">
+                    <div>
+                        <p className="checkbox">Private  <input class="check"type="checkbox" value="private"/></p>
+                        <p className="checkbox">PassW <input type="checkbox" value="password" checked={password} onChange={handleCheckpass}/> </p>
+                        {password ? (<input type="text" className="in" placeholder="password"/>):("")}
+                    </div>
+                    <div className="forName">
+                        <input type="text" className="in" placeholder="group name"/>
+                    </div>
+                </div>
+
+                {/* <select
+                onChange={(e) => {
+                    const selection = e.target.value;
+                    selection === "group" ? setMulti(true) : setMulti(false)
+                }}>
+                    <option value="1v1">1v1</option>
+                    <option value="group">Group</option>
+                </select> */}
+
+{/* Second selection  */}
+                
+                <div className="settingSecondPart">
+                    <Link to="#" className="submit" onClick={handleClose}>Send</Link>
+
+                    {selectTags.map((selectTag) =>(
+                    <div key={selectTag.id}>
+
+                    <select 
+                        value={selectTag.selectedOption}
+                        onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
+                    {Rank.map((item, index) => {
+                        return (
+                            <>
+                            <option >Select a name</option>
+                            <option value={new_name}>{item.name}</option>
+                            
+                            </>
+                        )
+                    })}
+                    </select>           
+                    </div>
+                ))
+                }
+                <div>
+                    <Link to="#" className="submit">Ban</Link>
+                    <Link to="#" className="submit">Mute</Link>
+                    <Link to="#" className="submit">Admin</Link>
+                </div>
+
+                </div>
+                {/* {selectTags.map((selectTag) =>(
+                    <div key={selectTag.id}>
+
+                    <select 
+                        value={selectTag.selectedOption}
+                        onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}>
+                    {Rank.map((item, index) => {
+                        return (
+                            <>
+                            <option value={new_name}>{item.name}</option>
+                            
+                            </>
+                        )
+                    })}
+                    </select>           
+                    </div>
+                ))
+                }
+                <div>
+                    <h3>Selected Option:</h3>
+                    <ul>
+                        {selectedOptionArray.map((option, index) => (
+                            <li key={index}>{option}</li>
+                        ))}
+                    </ul>
+                </div>
+                <div>
+                    {multi === true ? (
+                    <GrAdd onClick={addNewSelectedTag}/>) : " "}
+                </div>
+                <div className="div_submit">
+                    <Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
+                    
+                    <Link to="#" className="submit" onClick={handleClose}>Cancel</Link>
+                </div> */}
+
+            </motion.div>
+        </Backdrop>
+    )
+}
+
+export default ModalSetting
\ No newline at end of file
diff --git a/containers/react/src/styles/Messages.css b/containers/react/src/styles/Messages.css
index 37c84b40..0d201718 100644
--- a/containers/react/src/styles/Messages.css
+++ b/containers/react/src/styles/Messages.css
@@ -1,5 +1,5 @@
 .home{
-	background-color: black;
+	background-color: rgb(0, 0, 0);
 	height: 90vh;
 	display: flex;
 	align-items: center;
@@ -38,6 +38,10 @@ select{
 	overflow: scroll;
 }
 
+::-webkit-scrollbar{
+	display:none;
+}
+
 .newMessage{
 	color: white;
 	font-size: 18px;
@@ -46,14 +50,14 @@ select{
 .contact{
 	background-color: rgb(46, 46, 46);
 	align-items: left;
-	height: 29.7rem;
+	height: 30.2rem;
 	overflow: scroll;
 	/* width: 2rem; */
 	/* height: 4rem; */
 }
 
 .messages_box{
-	background-color: black;
+	background-color: rgb(0, 0, 0);
 	/* height: 90vh; */
 	display: flex;
 	align-items: center;
@@ -73,7 +77,7 @@ select{
 .sidebar{
 	flex:1;
 	border-right: 1px solid #3e3c61;
-	background-color: #060b26;
+	background-color: #a2a3ac;
 	color: white;
 }
 
@@ -95,6 +99,7 @@ select{
 	color: white;
 	padding: 3px;
 	border-radius: 10px 10px 0px 0px;
+	margin-top: 0px;
 }
 
 .pic{
@@ -122,9 +127,9 @@ select{
 }
 
 .messages{
-	background-color: black;
+	background-color: rgb(26, 26, 26);
 	/* height: calc(100% - 118px); */
-	width: 40rem;
+	width: 70%;
 	overflow: scroll;
 }
 
@@ -185,6 +190,7 @@ input{
 	font-size: 1.2rem;
 	text-decoration: none;
 	font-weight:lighter;
+	margin: 1%;
 }
 
 .div_submit {
@@ -261,3 +267,41 @@ input{
 	color: rgba(255, 255, 255, 1);
 }
 
+.modalSetting{
+	width: clamp(50%, 700px, 90%);
+	height: min(50%, 300px);
+
+	margin: auto;
+	padding: 2rem;
+	border-radius: 12px;
+	display: flex;
+	/* flex-direction: column; */
+	/* align-items: center; */
+	background-color: #3e3c61;
+}
+
+.settingFirstPart{
+	margin-top: 10%;
+	margin-left: 15%;
+}
+
+.settingSecondPart{
+	margin-top: 10%;
+	margin-left: 10%;
+
+	/* margin-left: 20%; */
+}
+
+.checkbox{
+	display:flex;
+	flex-direction:row;
+}
+
+input.in{
+	margin-top: 5%;
+	margin-left: 0px;
+	background-color: black;
+	color: white;
+	border-radius: 12px;
+	width: 70%;
+}
\ No newline at end of file
diff --git a/containers/react/src/styles/Win_Loss.css b/containers/react/src/styles/Win_Loss.css
index 068b1a68..fdb3df72 100644
--- a/containers/react/src/styles/Win_Loss.css
+++ b/containers/react/src/styles/Win_Loss.css
@@ -15,6 +15,10 @@
 	overflow: scroll;
 }
 
+.scroll::-webkit-scrollbar{
+	display:none;
+}
+
 .elements {
 	/* display: flex; */
 	border-width:1px;

From 6571db859c25482d3bb476fd428e0f43ccc1e51d Mon Sep 17 00:00:00 2001
From: Little Dipper <little_dipper@rayman.rayman.virtualbox.org>
Date: Sat, 17 Jun 2023 21:30:19 +0200
Subject: [PATCH 3/3] qr code fonction incomplete

---
 containers/react/package-lock.json      | 44 ++++++++++++++++-
 containers/react/package.json           |  1 +
 containers/react/src/components/App.jsx |  2 +
 containers/react/src/pages/QrCode.jsx   | 66 +++++++++++++++++++++++++
 containers/react/src/styles/App.css     |  8 +++
 5 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 containers/react/src/pages/QrCode.jsx

diff --git a/containers/react/package-lock.json b/containers/react/package-lock.json
index 62a68fbb..6d4d5b38 100644
--- a/containers/react/package-lock.json
+++ b/containers/react/package-lock.json
@@ -14,6 +14,7 @@
         "axios": "^1.3.5",
         "framer-motion": "^10.12.8",
         "npm": "^9.6.6",
+        "qr-code-styling": "^1.6.0-rc.1",
         "query-string": "^8.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6140,6 +6141,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7510,7 +7512,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -8840,6 +8843,7 @@
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-10.12.8.tgz",
       "integrity": "sha512-ylobYq3tGFjjAmRdBs5pL/R1+4AmOm69g/JbF5DcNETfRe8L9CjaX4acG83MjYdIsbsTGJmtR5qKx4glNmXO4A==",
       "dependencies": {
+        "@emotion/is-prop-valid": "^0.8.2",
         "tslib": "^2.4.0"
       },
       "optionalDependencies": {
@@ -10715,6 +10719,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.3.2",
         "graceful-fs": "^4.2.9",
         "jest-regex-util": "^27.5.1",
         "jest-serializer": "^27.5.1",
@@ -12271,6 +12276,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -13770,6 +13776,7 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
+        "@colors/colors": "1.5.0",
         "string-width": "^4.2.0"
       },
       "engines": {
@@ -14306,7 +14313,8 @@
       "inBundle": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
+        "@isaacs/cliui": "^8.0.2",
+        "@pkgjs/parseargs": "^0.11.0"
       },
       "engines": {
         "node": ">=14"
@@ -14592,6 +14600,7 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
+        "encoding": "^0.1.13",
         "minipass": "^5.0.0",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.1.2"
@@ -14971,6 +14980,7 @@
       "inBundle": true,
       "license": "MIT",
       "dependencies": {
+        "encoding": "^0.1.13",
         "minipass": "^3.1.6",
         "minipass-sized": "^1.0.3",
         "minizlib": "^2.1.2"
@@ -17958,6 +17968,19 @@
         "teleport": ">=0.2.0"
       }
     },
+    "node_modules/qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "dependencies": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "node_modules/qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "node_modules/qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -18306,6 +18329,7 @@
         "eslint-webpack-plugin": "^3.1.1",
         "file-loader": "^6.2.0",
         "fs-extra": "^10.0.0",
+        "fsevents": "^2.3.2",
         "html-webpack-plugin": "^5.5.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^27.4.3",
@@ -18742,6 +18766,9 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
+      "dependencies": {
+        "fsevents": "~2.3.2"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -33695,6 +33722,19 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
     },
+    "qr-code-styling": {
+      "version": "1.6.0-rc.1",
+      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
+      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
+      "requires": {
+        "qrcode-generator": "^1.4.3"
+      }
+    },
+    "qrcode-generator": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+    },
     "qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
diff --git a/containers/react/package.json b/containers/react/package.json
index 3635d98d..0f333105 100644
--- a/containers/react/package.json
+++ b/containers/react/package.json
@@ -9,6 +9,7 @@
     "axios": "^1.3.5",
     "framer-motion": "^10.12.8",
     "npm": "^9.6.6",
+    "qr-code-styling": "^1.6.0-rc.1",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/containers/react/src/components/App.jsx b/containers/react/src/components/App.jsx
index 204d2a28..2a0e4389 100644
--- a/containers/react/src/components/App.jsx
+++ b/containers/react/src/components/App.jsx
@@ -8,6 +8,7 @@ import PlayButton from "./Game/PlayButton.js";
 import Field from "../pages/Field";
 import Login42 from "../pages/Login42.js";
 import Messages from "../pages/Messages.jsx";
+import QrCode from '../pages/QrCode.jsx'
 import { useLocation } from "react-router-dom";
 import {AnimatePresence} from "framer-motion";
 
@@ -28,6 +29,7 @@ function AnimatedRoute () {
 				<Route exact path="/" element={<HomeLogin/>}/>
 				<Route exact path="/profile" element={<Home/>}/>
 				<Route exact path="/profile/:username" element={<Home/>}/>
+				<Route exact path="/qr" element={<QrCode/>}/>
 				
 				<Route exact path="/2fa" element={<DoubleAuth/>}/>
 				<Route exact path="/Social" element={<Social/>}/>
diff --git a/containers/react/src/pages/QrCode.jsx b/containers/react/src/pages/QrCode.jsx
new file mode 100644
index 00000000..d8f2c664
--- /dev/null
+++ b/containers/react/src/pages/QrCode.jsx
@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from "react";
+import "../styles/App.css";
+import QRCodeStyling from "qr-code-styling";
+import { motion } from 'framer-motion'
+import api from '../script/axiosApi';
+
+
+const qrCode = new QRCodeStyling({
+    width: 300,
+    height: 300,
+    // image: "../assets/profile.jpg",
+    dotsOptions: {
+        color: "black",
+        type: "rounded"
+    },
+    backgroundOptions: {
+        color: "#5843e4",
+    },
+    imageOptions: {
+        crossOrigin: "anonymous",
+        margin: 20
+    }
+    });
+
+function QrCode () {
+    const url = "https://www.youtube.com";
+    const ref = useRef(null);
+
+    useEffect(() => {
+        qrCode.append(ref.current);
+    }, []);
+
+    useEffect(() => {
+        qrCode.update({
+        data: url
+        });
+    }, [url]);
+
+    const getConv = async ()=>{
+        try{
+            const convs = await api.get("/user")
+            // const tmpUser = await api.get("/profile")
+            console.log("test")
+            console.table(convs);
+        }
+        catch(err){
+            console.log(err);
+        }
+    };
+    getConv();
+    return (
+		<motion.div className="page"
+		initial={{opacity: -1}}
+		animate={{opacity: 1}}
+		exit={{opacity: -1}}>
+            <h1>QrCode</h1>
+            <h3>Your code is: 231 31 31</h3>
+            <div ref={ref} />
+            <input type="text" className="qr" placeholder="type the secret"/>
+            {}
+
+		</motion.div>
+    )
+}
+
+export default QrCode
\ No newline at end of file
diff --git a/containers/react/src/styles/App.css b/containers/react/src/styles/App.css
index 31d4b88e..d2a7c169 100644
--- a/containers/react/src/styles/App.css
+++ b/containers/react/src/styles/App.css
@@ -6,6 +6,14 @@
   height: 100%;
 }
 
+input.qr{
+  width: 20%;
+  border-radius: 5px;
+  background-color: rgb(66, 66, 66);
+  margin : 1%;
+  color:white;
+}
+
 .App-logo {
   height: 40vmin;
   pointer-events: none;