fonctionnalités de la page Profile user

2026-07-09 15:08:06 +00:00 · 2023-03-27 23:41:10 +02:00
parent 2def92dc25
commit e3344c5103
9 changed files with 416 additions and 204 deletions
@@ -1,56 +1,57 @@
-import {Grid, GridItem, Text, Box} from '@chakra-ui/react';
-import {useSession} from 'next-auth/react';
-import {useRouter} from 'next/router';
+import { Grid, GridItem, Text, Box } from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";

-import type {Session} from '@/models/auth/Session';
-import CardUser from '../components/layout/dashboard/card_user/CardUser';
-import LeftPanel from '../components/layout/dashboard/left_panel/LeftPanel';
-import Head from 'next/head';
-import {websiteName} from '@/lib/constants';
-import Navbar from '@/components/Navbar';
+import type { Session } from "@/models/auth/Session";
+import CardUser from "../components/layout/dashboard/card_user/CardUser";
+import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
+import Head from "next/head";
+import { websiteName } from "@/lib/constants";
+import Navbar from "@/components/Navbar";

 export default function Dashboard() {
  const router = useRouter();
-  const {data: session, status} = useSession();
+  const { data: session, status } = useSession();

-  if (status === 'loading') return <Text>Loading...</Text>;
-  if (status === 'unauthenticated') router.push('/login');
+  if (status === "loading") return <Text>Loading...</Text>;
+  if (status === "unauthenticated") router.push("/login");

-  if (status === 'authenticated') {
-    const {user} = session as unknown as Session;
+  if (status === "authenticated") {
+    const { user } = session as unknown as Session;

    // il faudra l'enlever
    const refinedUser = {
      ...user,
      age: 21,
-      aPropos: 'Je suis la personne fictive la plus fictive',
-      images: ['135538.webp'],
-      passions: ['Sport', 'Voiture', 'Cuisine'],
+      aPropos: "Je suis la personne fictive la plus fictive",
+      images: ["135538.webp"],
+      passions: ["Sport", "Voiture", "Cuisine"],
    };

    return (
-        <>
-          <Head><title>{websiteName} | Dashboard</title></Head>
+      <>
+        <Head>
+          <title>{websiteName} | Dashboard</title>
+        </Head>

-
-          <Grid templateColumns={'repeat(5, 1fr)'}
-                templateRows={'repeat(2, 1fr)'} gap={5} minH={'100vh'}>
-            <GridItem area={'1 / 1 / 3 / 2'}>
-              <LeftPanel user={refinedUser}/>
-            </GridItem>
-            <GridItem area={'1 / 2 / 3 / 4'}>
-              <Box py={3}>
-                <CardUser user={refinedUser}/>
-              </Box>
-            </GridItem>
-            <GridItem area={'1 / 4 / 2 / 6'}>
-              {/*Right top*/}
-            </GridItem>
-            <GridItem area={'2 / 4 / 3 / 6'}>
-              {/*Right Bottom*/}
-            </GridItem>
-          </Grid>
-        </>
+        <Grid
+          templateColumns={"repeat(5, 1fr)"}
+          templateRows={"repeat(2, 1fr)"}
+          gap={5}
+          minH={"100vh"}
+        >
+          <GridItem area={"1 / 1 / 3 / 2"}>
+            <LeftPanel user={refinedUser} />
+          </GridItem>
+          <GridItem area={"1 / 2 / 3 / 4"}>
+            <Box py={3}>
+              <CardUser user={refinedUser} />
+            </Box>
+          </GridItem>
+          <GridItem area={"1 / 4 / 2 / 6"}>{/*Right top*/}</GridItem>
+          <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
+        </Grid>
+      </>
    );
  }
-}
+}
@@ -1,120 +1,206 @@
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
-import type {Session} from '@/models/auth/Session';
+import type { Session } from "@/models/auth/Session";
 import Carousel from "@/components/Carousel";
-import { Box, Button, Center, Container, Divider, Editable, EditableInput, EditablePreview, EditableTextarea, Flex, Spacer, Text, useToast } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Center,
+  Container,
+  Divider,
+  Editable,
+  EditableInput,
+  EditablePreview,
+  EditableTextarea,
+  Flex,
+  Spacer,
+  Text,
+  useDisclosure,
+  useToast,
+} from "@chakra-ui/react";

-import {RiEditBoxLine} from "react-icons/ri"
+import { RiEditBoxLine } from "react-icons/ri";
 import BottomBar from "@/components/BottomBar";
+import ModalModifyImages from "@/components/ModalModifyImages";
+
 import { useState } from "react";

 export default function UserProfile() {
  const router = useRouter();
-  const {data: session, status} = useSession();
+  const toast = useToast();
+  const { data: session, status } = useSession();
  const [isLoading, setIsLoading] = useState(false);
+  const { isOpen, onOpen, onClose } = useDisclosure();

  // faire un model avec toutes les infos de user
-  const [loginData, setLoginData] = useState(new userData());
-  
-  
-  const toast = useToast();
+  const [userData, setUserData] = useState({});

-  // if (status === 'unauthenticated') router.push('/login');
-
-  // if (status === 'authenticated') {
-    // const {user} = session as unknown as Session;
+  if (status === "unauthenticated") router.push("/login");

+  if (status === "authenticated") {
+    const { user } = session as unknown as Session;

    const saveData = () => {
-      // let {email, firstName, lastName, password, confirmPassword} = registerData;
-      toast({
-        title: `Modifications effectuées`,
-        status: "success",
-        isClosable: true,
-      })
-      // const options = {
-      //   method: 'POST',
-      //   headers: {'Content-Type': 'application/json'},
-      //   body: JSON.stringify(userData),
-      // };
-  
-      // setIsLoading(true);
-      // fetch('/api/users', options).then(() => {
-      //   setIsLoading(false)
-      //   toast({
-      //     title: `Modifications effectuées`,
-      //     status: "success",
-      //     isClosable: true,
-      //   })
+      const options = {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(userData),
+      };

-      // }).catch(() => {
-      //   setIsLoading(false);
-      //   toast({
-      //     title: `Erreur lors de l'envoi des modifications`,
-      //     status: "error",
-      //     isClosable: true,
-      //   })
-      // });
+      setIsLoading(true);
+
+      fetch(`/api/users/${user.id}`, options)
+        .then(() => {
+          setIsLoading(false);
+          toast({
+            title: `Modifications effectuées`,
+            status: "success",
+            isClosable: true,
+          });
+          router.reload();
+        })
+        .catch(() => {
+          setIsLoading(false);
+          toast({
+            title: `Erreur lors de l'envoi des modifications`,
+            status: "error",
+            isClosable: true,
+          });
+        });
    };

    const formateDate = (dateString: string) => {
-      var options = { year: 'numeric', month: 'long', day: 'numeric' };
-      return new Date(dateString).toLocaleDateString([],options);
-    }
-    
-    var dateString = "2018-05-18T04:00:00.000Z"
-    console.log(formateDate(dateString));
-
-
-    const refinedUser = {
-      // ...user,
-      firstName: "Jean",
-      lastName: "Dujardin",
-      birthdate: formateDate(new Date),
-      aPropos: 'Je suis la personne fictive la plus fictive',
-      images: ['135538.webp'],
-      passions: ['Sport', 'Voiture', 'Cuisine'],
+      var options = { year: "numeric", month: "long", day: "numeric" };
+      return new Date(dateString).toLocaleDateString([], options);
    };

+    // const refinedUser = {
+    //   // ...user,
+    //   firstName: "Jean",
+    //   lastName: "Dujardin",
+    //   birthdate: formateDate(new Date().toString()),
+    //   aPropos: "Je suis la personne fictive la plus fictive",
+    //   images: ["135538.webp"],
+    //   passions: ["Sport", "Voiture", "Cuisine"],
+    // };
+
    return (
      <Box bgColor={"purple.50"}>
-        <Container justifyContent={"center"} maxWidth={"70rem"} mt={"1rem"} bgColor={"purple.50"}>
-          
-          <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}> 
-            <Box width={"50%"} >
-              <Carousel images = {refinedUser.images} borderRadius = {"1rem"}></Carousel>
+        <Container
+          justifyContent={"center"}
+          maxWidth={"70rem"}
+          mt={"1rem"}
+          bgColor={"purple.50"}
+        >
+          <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
+            <Box width={"50%"}>
+              <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
            </Box>
-            <Button colorScheme={"purple"} leftIcon={<RiEditBoxLine />}>Modifier les images</Button>    
+            {/* {modal} */}
+            {!userData.images ? (
+              <ModalModifyImages
+                setUserData={setUserData}
+                userData={userData}
+                images={user.images}
+              />
+            ) : (
+              <ModalModifyImages
+                setUserData={setUserData}
+                userData={userData}
+                images={userData.images}
+              />
+            )}
            <Divider />
-            <Text align={"center"} as="i" color={"grey"}>Modifiez les champs en les selectionnants</Text>
-            <Box width={"100%"} mb={"1rem"}>
-              <Flex justify={"space-between"}>
-                <Flex gap={"1rem"}>
+            <Text align={"center"} as="i" color={"grey"}>
+              Modifiez les champs en les selectionnants
+            </Text>
+            <Box width={"100%"}>
+              <Flex justify={"space-between"} mb={"1rem"}>
+                <Flex gap={"0.5rem"}>
                  <Text margin={"auto"}>Prénom : </Text>
-                  <Editable id={'lastName'} as="b" defaultValue={refinedUser.lastName} onSubmit={(value) => {value = refinedUser.lastName}}>
+                  <Editable
+                    id={"lastName"}
+                    as="b"
+                    defaultValue={
+                      user.lastName === null || user.lastName === ""
+                        ? "Non renseigné"
+                        : user.lastName
+                    }
+                    onSubmit={(value) => {
+                      setUserData({ ...userData, lastName: value });
+                    }}
+                  >
                    <EditablePreview />
                    <EditableInput />
                  </Editable>
                </Flex>
-                <Flex gap={"1rem"}>
+                <Flex gap={"0.5rem"}>
                  <Text margin={"auto"}>Nom : </Text>
-                  <Editable id={'firstName'} defaultValue={refinedUser.firstName}  onSubmit={(value) => refinedUser.firstName = value}>
+                  <Editable
+                    id={"firstName"}
+                    as="b"
+                    defaultValue={
+                      user.firstName === null || user.firstName === ""
+                        ? "Non renseigné"
+                        : user.firstName
+                    }
+                    onSubmit={(value) => {
+                      setUserData({ ...userData, firstName: value });
+                    }}
+                  >
                    <EditablePreview />
                    <EditableInput />
                  </Editable>
                </Flex>
-                <Flex gap={"1rem"}>
+                <Flex gap={"0.5rem"}>
                  <Text margin={"auto"}>Date de naissance : </Text>
-                  <Text margin={"auto"} id={'birthdate'} as="b" color={"grey"} >
-                    {refinedUser.birthdate}
+                  <Text margin={"auto"} id={"birthdate"} as="b" color={"grey"}>
+                    {user.birthdate === null
+                      ? "Non renseigné"
+                      : formateDate(user.birthdate.toString())}
+                  </Text>
+                </Flex>
+                <Flex gap={"0.5rem"}>
+                  <Text>Ville : </Text>
+                  <Text id={"location"} as="b" color={"grey"}>
+                    {user.location === null || user.location === ""
+                      ? "Non renseigné"
+                      : user.location}
+                  </Text>
+                </Flex>
+                <Flex>
+                  <Text>Adresse mail : </Text>
+                  <Text id={"email"} as="b" color={"grey"}>
+                    {user.email}
                  </Text>
                </Flex>
              </Flex>
+              <Flex gap={"0.5rem"}>
+                <Text width={"100%"} align={"right"} margin={"auto"}>
+                  À propos :
+                </Text>
+                <Editable
+                  id={"bio"}
+                  as="b"
+                  width={"100%"}
+                  defaultValue={
+                    user.bio === null || user.bio === ""
+                      ? "Non renseigné"
+                      : user.bio
+                  }
+                  onSubmit={(value) => {
+                    setUserData({ ...userData, bio: value });
+                  }}
+                >
+                  <EditablePreview />
+                  <EditableTextarea />
+                </Editable>
+              </Flex>
            </Box>
-            <BottomBar variant={"fixed"} saveData={saveData}/>
+            <BottomBar variant={"fixed"} saveData={saveData} />
          </Flex>
        </Container>
      </Box>
    );
-  // }
-}
+  }
+}