fix(disconnect from map issue): require to be connected to reach /map

This commit is contained in:
Laurian-Dufrechou
2023-05-18 17:31:54 +02:00
parent b1b5c8720c
commit 61df566dcf
4 changed files with 65 additions and 49 deletions
+44 -38
View File
@@ -6,70 +6,76 @@ import {
Button, Button,
Image, Image,
Link, Link,
} from '@chakra-ui/react'; } from "@chakra-ui/react";
import {useRouter} from 'next/router'; import { useRouter } from "next/router";
import {signOut, useSession} from 'next-auth/react'; import { signOut, useSession } from "next-auth/react";
type Props = { type Props = {
variant: 'static' | 'fixed'; variant: "static" | "fixed";
}; };
export default function Navbar({variant = 'fixed'}: Props) { export default function Navbar({ variant = "fixed" }: Props) {
const router = useRouter(); const router = useRouter();
const {data: session, status} = useSession(); const { data: session, status } = useSession();
const MiddleSection = () => { const MiddleSection = () => {
const authenticatedLinks = ( const authenticatedLinks = (
<> <>
<Link href={'/dashboard'}>Tableau de bord</Link> <Link href={"/dashboard"}>Tableau de bord</Link>
<Link href={'/profile'}>Profile</Link> <Link href={"/profile"}>Profile</Link>
<Link href={'/map'}>Carte</Link> <Link href={"/map"}>Carte</Link>
</> </>
); );
return ( return (
<Flex gap={5} justify={'center'} flexBasis={'100%'}> <Flex gap={5} justify={"center"} flexBasis={"100%"}>
{status === 'authenticated' && authenticatedLinks} {status === "authenticated" && authenticatedLinks}
</Flex> </Flex>
); );
}; };
const RightSection = () => { const RightSection = () => {
const authenticatedButtons = ( const authenticatedButtons = (
<Button onClick={() => signOut()}>Déconnexion</Button> <Button onClick={() => signOut()}>Déconnexion</Button>
); );
const unauthenticatedButtons = ( const unauthenticatedButtons = (
<> <>
<Button onClick={() => router.push('/register')}>Inscription</Button> <Button onClick={() => router.push("/register")}>Inscription</Button>
<Button onClick={() => router.push('/login')}>Connexion</Button> <Button onClick={() => router.push("/login")}>Connexion</Button>
</> </>
); );
return ( return (
<Flex justify={'right'} flexBasis={'100%'}> <Flex justify={"right"} flexBasis={"100%"}>
<ButtonGroup> <ButtonGroup>
{status === 'authenticated' {status === "authenticated"
? authenticatedButtons ? authenticatedButtons
: unauthenticatedButtons : unauthenticatedButtons}
} </ButtonGroup>
</ButtonGroup> </Flex>
</Flex>
); );
}; };
return ( return (
<Box position={variant} zIndex={9999} top={0} width={'100vw'} <Box
backdropFilter={'auto'} backdropBlur={'20px'} px={10} py={2}> position={variant}
<Flex align={'center'}> zIndex={9999}
<Box flexBasis={'100%'}> top={0}
<Image src={'/logo.svg'} h={'3rem'} objectFit={'contain'}/> width={"100vw"}
</Box> backdropFilter={"auto"}
backdropBlur={"20px"}
px={10}
py={2}
>
<Flex align={"center"}>
<Box flexBasis={"100%"}>
<Image src={"/logo.svg"} h={"3rem"} objectFit={"contain"} />
</Box>
<MiddleSection/> <MiddleSection />
<RightSection/> <RightSection />
</Flex> </Flex>
</Box> </Box>
); );
} }
@@ -5,7 +5,8 @@ import {
FormHelperText, FormHelperText,
FormLabel, FormLabel,
UseEditableProps, UseEditableProps,
} from '@chakra-ui/react'; Link,
} from "@chakra-ui/react";
type CustomEditableProps = { type CustomEditableProps = {
id: string; id: string;
@@ -14,16 +15,25 @@ type CustomEditableProps = {
} & UseEditableProps; } & UseEditableProps;
export default function CustomEditable(props: CustomEditableProps) { export default function CustomEditable(props: CustomEditableProps) {
const {label, id, helperText = '', ...UseEditableProps} = props; const { label, id, helperText = "", ...UseEditableProps } = props;
return ( return (
<FormControl> <FormControl>
<FormLabel as="legend" htmlFor={id}>{label}</FormLabel> <FormLabel as="legend" htmlFor={id}>
<Editable{...UseEditableProps} fontWeight="bold" isDisabled={true} {label}
placeholder={'Non renseigné'} color={'gray.500'}> </FormLabel>
<EditablePreview/> <Editable
</Editable> {...UseEditableProps}
fontWeight="bold"
isDisabled={true}
placeholder={"Non renseigné"}
color={"gray.500"}
>
<EditablePreview />
</Editable>
<Link href={"/map"}>
<FormHelperText>{helperText}</FormHelperText> <FormHelperText>{helperText}</FormHelperText>
</FormControl> </Link>
</FormControl>
); );
} }
+1 -1
View File
@@ -23,7 +23,7 @@ export default function Map() {
]); ]);
const [geolocationError, setGeolocationError] = useState(false); const [geolocationError, setGeolocationError] = useState(false);
const { data: session, status } = useSession(); const { data: session, status } = useSession({ required: true });
const [listBars, setListBars] = useState({} as unknown as any); const [listBars, setListBars] = useState({} as unknown as any);
const { const {
+1 -1
View File
@@ -244,7 +244,7 @@ export default function UserProfile() {
} }
label={"Adresse :"} label={"Adresse :"}
helperText={ helperText={
"Ce champ est modifié automatiquement depuis la carte" "Ce champ est automatiquement modifié depuis la carte"
} }
/> />
</Box> </Box>