responsive pages/game nickname already Taken/Nickname too short
This commit is contained in:
Elisee ADJIGUIDI
parent
de59d21671
commit
44fb3cdecd
@ -1,8 +1,8 @@
|
||||
import {motion} from "framer-motion"
|
||||
import { AnimatePresence, motion } from "framer-motion"
|
||||
// import Backdrop from "../Sidebar/Backdrop"
|
||||
import {Link} from 'react-router-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
// import { UserProfile } from "../../DataBase/DataUserProfile";
|
||||
import {useState} from 'react';
|
||||
import { useState } from 'react';
|
||||
import "../../styles/Profile.css"
|
||||
|
||||
import api from '../../script/axiosApi.tsx';
|
||||
@ -22,61 +22,60 @@ const dropIn = {
|
||||
}
|
||||
|
||||
// const changeName = ({handleclose, name}) => {
|
||||
// return (
|
||||
// UserProfile.UserName = name
|
||||
// return (
|
||||
// UserProfile.UserName = name
|
||||
// )
|
||||
// }
|
||||
|
||||
const ModalEdit = ( handleClose ) => {
|
||||
const ModalEdit = (handleClose) => {
|
||||
// let new_name = "";
|
||||
const [nickname, setNickname] = useState("");
|
||||
const [closeModal, setModalClose] = useState(false);
|
||||
const [err, setErr] = useState(false);
|
||||
const close = () => setErr(false);
|
||||
|
||||
const handler = e =>
|
||||
{
|
||||
const [errTaken, setErrTaken] = useState(false);
|
||||
const closeTaken = () => setErrTaken(false);
|
||||
const [errTooShort, setErrTooShort] = useState(false);
|
||||
const closeTooShort = () => setErrTooShort(false);
|
||||
|
||||
const handler = e => {
|
||||
setNickname(e.target.value);
|
||||
console.log("testeeeee")
|
||||
const postNickname = async ()=>{
|
||||
try{
|
||||
await api.post("/nickname", {nickname: nickname})
|
||||
// setUser(tmpUser.data);
|
||||
// setIsLoading(false)
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
const postNickname = async () => {
|
||||
// try{
|
||||
// await api.post("/nickname", {nickname: nickname})
|
||||
// // setUser(tmpUser.data);
|
||||
// // setIsLoading(false)
|
||||
// }
|
||||
// catch(err){
|
||||
// console.log(err);
|
||||
// }
|
||||
};
|
||||
postNickname();
|
||||
}
|
||||
|
||||
const handlePostNickname = async () =>
|
||||
{
|
||||
console.log("nickname=" ,nickname)
|
||||
try{
|
||||
const ret = await api.post("/nickname", {nickname: nickname});
|
||||
|
||||
const handlePostNickname = async () => {
|
||||
console.log("nickname=", nickname)
|
||||
try {
|
||||
const ret = await api.post("/nickname", { nickname: nickname });
|
||||
// console.log("cest ici = ",ret);
|
||||
// if (!ret)
|
||||
console.log("test ret =",ret.data);
|
||||
if(ret.data)
|
||||
{
|
||||
console.log ("ici error = ", ret.data);
|
||||
// window.location.reload();
|
||||
console.log("test ret =", ret.data);
|
||||
if (nickname.length < 3) {
|
||||
setErrTooShort(true);
|
||||
}
|
||||
else if (!ret.data)
|
||||
{
|
||||
console.log ("nickname already set = ", ret.data);
|
||||
else if (ret.data) {
|
||||
console.log("ici error = ", ret.data);
|
||||
window.location.reload();
|
||||
}
|
||||
else {
|
||||
console.log("nickname already set = ", ret.data);
|
||||
|
||||
setErr(true);
|
||||
setModalClose(true);
|
||||
setErrTaken(true);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// setUser(tmpUser.data);
|
||||
// setIsLoading(false)
|
||||
}
|
||||
catch(err){
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
@ -86,29 +85,35 @@ const ModalEdit = ( handleClose ) => {
|
||||
// //do nothing
|
||||
// }
|
||||
return (
|
||||
<motion.div
|
||||
className="modal"
|
||||
variants={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler}/>
|
||||
<div>
|
||||
<div className="button" onClick={handlePostNickname}>
|
||||
change
|
||||
{/* <Link className="button" to={""}>change</Link> */}
|
||||
</div>
|
||||
<motion.div
|
||||
className="modal"
|
||||
variants={dropIn}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit">
|
||||
<h2>Type your new name</h2>
|
||||
<input className="text" minLength={2} maxLength={10} type="text" value={nickname} onChange={handler} />
|
||||
<div>
|
||||
<div className="button" onClick={handlePostNickname}>
|
||||
change
|
||||
{/* <Link className="button" to={""}>change</Link> */}
|
||||
</div>
|
||||
<AnimatePresence initial={false} onExitComplete={() => null}>
|
||||
{
|
||||
err ? (
|
||||
<RedAlert handleClose={close} text="Nickname already taken"/>
|
||||
errTaken ? (
|
||||
<RedAlert handleClose={closeTaken} text="Error: Nickname already taken" />
|
||||
) : ("")
|
||||
}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalEdit
|
||||
{
|
||||
errTooShort ? (
|
||||
<RedAlert handleClose={closeTooShort} text="Error: Nickname it too short" />
|
||||
) : ("")
|
||||
}
|
||||
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ModalEdit
|
||||
@ -6,7 +6,7 @@
|
||||
/* By: sadjigui <sadjigui@student.42.fr> +#+ +:+ +#+ */
|
||||
/* +#+#+#+#+#+ +#+ */
|
||||
/* Created: 2023/06/09 08:19:04 by apommier #+# #+# */
|
||||
/* Updated: 2023/06/23 22:46:23 by sadjigui ### ########.fr */
|
||||
/* Updated: 2023/06/24 14:31:22 by sadjigui ### ########.fr */
|
||||
/* */
|
||||
/* ************************************************************************** */
|
||||
|
||||
@ -20,7 +20,7 @@ import { motion, AnimatePresence } from 'framer-motion'
|
||||
// import { GrClose } from 'react-icons/gr'
|
||||
import { Link } from "react-router-dom";
|
||||
import ModalEdit from "../components/Profile/EditName.tsx";
|
||||
import {AiOutlineHistory} from 'react-icons/ai'
|
||||
import {AiOutlineCloseCircle, AiOutlineHistory} from 'react-icons/ai'
|
||||
import { MdQrCodeScanner, MdOutlinePhotoLibrary } from 'react-icons/md';
|
||||
import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
|
||||
|
||||
@ -274,7 +274,7 @@ function Home () {
|
||||
className="div_history"
|
||||
// className="history"
|
||||
onClick={ () => setmove(!move)}>
|
||||
<Link to="#" className="history"><AiOutlineHistory/> Match History</Link>
|
||||
<Link to="#" className="history"> {move ? (<AiOutlineCloseCircle/>):(<AiOutlineHistory/>)} Match History</Link>
|
||||
</motion.div>
|
||||
<AnimatePresence initial={false} onExitComplete={() => null}>
|
||||
{successQr ? (
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
margin: 50px;
|
||||
}
|
||||
|
||||
|
||||
.rank_elements {
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
@ -25,4 +26,14 @@
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 755px){
|
||||
.game{
|
||||
display: grid;
|
||||
height: 20vh;
|
||||
}
|
||||
.scroll{
|
||||
height: 20vh;
|
||||
}
|
||||
}
|
||||
@ -11,6 +11,10 @@
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
.inside_checkbox{
|
||||
height : 70%;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.field {
|
||||
background-color: rgb(249, 249, 249);
|
||||
@ -65,6 +69,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.responsive{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* @media screen and (max-width: 350px){
|
||||
.responsive{
|
||||
display:list-item;
|
||||
flex-direction: column;
|
||||
}
|
||||
} */
|
||||
|
||||
#myCanvas {
|
||||
background-color: rgb(124, 47, 47);
|
||||
/* position: absolute; */
|
||||
|
||||
Loading…
Reference in New Issue
Block a user