fonctionnalités de la page Profile user

src/components/BottomBar.tsx

@@ -1,24 +1,30 @@
-import {
-    Box,
-    Flex,
-    Text,
-    Button,
-    Image,
-  } from '@chakra-ui/react';
-  
-  
-  export default function BottomBar(props) {
-    
-    const {variant, saveData} = props; 
-    
-    return (
-        <Box position={variant} zIndex={0} bottom={0}
-             backdropFilter={'auto'} px={10} py={2}>
-          <Flex align={'center'}>
-            <Button colorScheme={"purple"} onClick={() => saveData()}>Sauvegarder les modifications</Button>
-          </Flex>
-        </Box>
-    );
-  
-  }
-  
+import { Box, Flex, Text, Button, Image } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+export default function BottomBar(props) {
+  const router = useRouter();
+
+  const { variant, saveData } = props;
+
+  return (
+    <Box
+      position={variant}
+      zIndex={0}
+      bottom={0}
+      backdropFilter={"auto"}
+      px={10}
+      py={2}
+    >
+      <Flex align={"center"}>
+        <Button
+          colorScheme={"purple"}
+          onClick={() => {
+            saveData();
+          }}
+        >
+          Sauvegarder les modifications
+        </Button>
+      </Flex>
+    </Box>
+  );
+}

src/components/Carousel.tsx

@@ -1,45 +1,55 @@
-import {useState} from 'react';
-import {Flex, IconButton} from '@chakra-ui/react';
+import { useState } from "react";
+import { Flex, IconButton } from "@chakra-ui/react";
 import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
 
 interface Props {
-  images: string[]
+  images: string[];
   borderRadius?: string | number;
 }
 
-const Carousel = ({images, borderRadius: bRadius}: Props) => {
+const Carousel = ({ images, borderRadius: bRadius }: Props) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const handleClickPrevious = () => {
-    setCurrentIndex(
-        (currentIndex === 0)
-            ? images.length - 1 : currentIndex - 1,
-    );
+    setCurrentIndex(currentIndex === 0 ? images.length - 1 : currentIndex - 1);
   };
 
   const handleClickNext = () => {
-    setCurrentIndex(
-        (currentIndex === images.length - 1)
-            ? 0 : currentIndex + 1,
-    );
+    setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
   };
 
+  if (images.length === 0) images = ["blank_profile_picture.webp"];
+
   return (
-      <Flex px={2} align="center" borderRadius={bRadius} overflow={"hidden"} justify={'space-between'}
-            bgImage={images[currentIndex]} bgSize={'cover'} width={'100%'}
-            height={500}>
+    <Flex
+      px={2}
+      align="center"
+      borderRadius={bRadius}
+      overflow={"hidden"}
+      justify={"space-between"}
+      bgImage={images[currentIndex]}
+      bgSize={"cover"}
+      width={"100%"}
+      height={500}
+    >
+      <IconButton
+        aria-label="left-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        onClick={handleClickPrevious}
+      >
+        <BiLeftArrowAlt />
+      </IconButton>
 
-        <IconButton aria-label="left-arrow" colorScheme="purple"
-                    borderRadius="full" onClick={handleClickPrevious}>
-          <BiLeftArrowAlt/>
-        </IconButton>
-
-        <IconButton aria-label="left-arrow" colorScheme="purple"
-                    borderRadius="full" onClick={handleClickNext}>
-          <BiRightArrowAlt/>
-        </IconButton>
-
-      </Flex>
+      <IconButton
+        aria-label="left-arrow"
+        colorScheme="purple"
+        borderRadius="full"
+        onClick={handleClickNext}
+      >
+        <BiRightArrowAlt />
+      </IconButton>
+    </Flex>
   );
 };
 

src/components/ModalModifyImages.jsx

@@ -0,0 +1,94 @@
+import {
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { RiEditBoxLine } from "react-icons/ri";
+
+export default function ModalModifyImages(props) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { images, userData, setUserData } = props;
+  return (
+    <>
+      <Button
+        colorScheme={"purple"}
+        onClick={onOpen}
+        leftIcon={<RiEditBoxLine />}
+      >
+        Modifier les images
+      </Button>
+
+      <Modal
+        blockScrollOnMount={false}
+        size={"4xl"}
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior={"inside"}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modification des images</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Grid templateColumns={`repeat(${images.length + 1}, 1fr)`} gap={5}>
+              {images.map((image, index) => (
+                <GridItem key={index}>
+                  <Flex direction={"column"} gap={"1rem"}>
+                    <Image src={image} />
+                    <Button
+                      id={"" + index}
+                      colorScheme={"red"}
+                      onClick={(e) => {
+                        images.splice(index, 1);
+                        setUserData({
+                          ...userData,
+                          images: [...images],
+                        });
+                      }}
+                    >
+                      Supprimer l'image
+                    </Button>
+                  </Flex>
+                </GridItem>
+              ))}
+              {images.length < 5 ? (
+                <GridItem width={"100%"}>
+                  <Input
+                    type={"file"}
+                    height={"100%"}
+                    accept={"image/png, image/jpeg, image/webp"}
+                    onChange={(e) => {
+                      setUserData({
+                        ...userData,
+                        images: [...images, e.target.files[0].name],
+                      });
+                    }}
+                  ></Input>
+                </GridItem>
+              ) : (
+                <></>
+              )}
+            </Grid>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="purple" mr={3} onClick={onClose}>
+              Save
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}

src/components/layout/dashboard/left_panel/LeftPanel.jsx

@@ -1,53 +1,62 @@
-import {
-  Card,
-  Flex,
-  Box,
-  Image,
-  Text,
-  Spacer,
-} from '@chakra-ui/react';
-import {useRouter} from 'next/router';
+import { Card, Flex, Box, Image, Text, Spacer } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 
-import {AiFillMessage} from 'react-icons/ai';
-import {BsFillPersonFill} from 'react-icons/bs';
-import {BiLogOut} from 'react-icons/bi';
+import { AiFillMessage } from "react-icons/ai";
+import { BsFillPersonFill } from "react-icons/bs";
+import { BiLogOut } from "react-icons/bi";
 
-import LeftPanelButton
-  from '@/components/layout/dashboard/left_panel/LeftPanelButton';
-import {signOut} from 'next-auth/react';
+import LeftPanelButton from "@/components/layout/dashboard/left_panel/LeftPanelButton";
+import { signOut } from "next-auth/react";
 
 export default function LeftPanel(props) {
   const router = useRouter();
-  const {user} = props;
+  const { user } = props;
 
   return (
-    <Card width={'20vw'} height={'100%'} borderRadius={0} padding={'0px'} bg={'#faf9ff'}>
-      <Flex direction={'column'} height={'100%'} margin={'10%'}>
+    <Card
+      width={"20vw"}
+      height={"100%"}
+      borderRadius={0}
+      padding={"0px"}
+      bg={"#faf9ff"}
+    >
+      <Flex direction={"column"} height={"100%"} margin={"10%"}>
         <Box>
-          <Image src={user.images[0]} borderRadius={'1rem'}/>
-          <Box mt={'1vh'}>
-            <Text fontSize={'1.5rem'} fontWeight={'bold'}>
+          <Image src={user.images[0]} borderRadius={"1rem"} />
+          <Box mt={"1vh"}>
+            <Text fontSize={"1.5rem"} fontWeight={"bold"}>
               {user.firstName} {user.lastName}
             </Text>
-            <Text as="i" fontWeight={'bold'}>
+            <Text as="i" fontWeight={"bold"}>
               &quot;{user.aPropos}&quot;
             </Text>
           </Box>
         </Box>
-        <Spacer/>
-        <Flex gap={2} direction={'column'} mt={'1vh'} spacing={3.5}
-              alignContent={'bottom'}>
-
-          <LeftPanelButton leftIcon={<AiFillMessage/>}
-                           onClickHandler={() => router.push('/dashboard')}>
+        <Spacer />
+        <Flex
+          gap={2}
+          direction={"column"}
+          mt={"1vh"}
+          spacing={3.5}
+          alignContent={"bottom"}
+        >
+          <LeftPanelButton
+            leftIcon={<AiFillMessage />}
+            onClickHandler={() => router.push("/dashboard")}
+          >
             Messages
           </LeftPanelButton>
-          <LeftPanelButton leftIcon={<BsFillPersonFill/>}
-                           onClickHandler={() => router.push('/dashboard')}>
+          <LeftPanelButton
+            leftIcon={<BsFillPersonFill />}
+            onClickHandler={() => router.push("/userProfile")}
+          >
             Profile
           </LeftPanelButton>
-          <LeftPanelButton variant={"outline"} leftIcon={<BiLogOut/>}
-                           onClickHandler={() => signOut({callbackUrl: "/"})}>
+          <LeftPanelButton
+            variant={"outline"}
+            leftIcon={<BiLogOut />}
+            onClickHandler={() => signOut({ callbackUrl: "/" })}
+          >
             Deconnexion
           </LeftPanelButton>
         </Flex>

src/models/form/userData.ts

@@ -0,0 +1,11 @@
+export class UserData {
+  constructor(
+    public email: string = "",
+    public firstName: string = "",
+    public lastName: string = "",
+    public bio: string = "",
+    public location: string = "",
+    public images: string[] = [],
+    public birthdate: Date = new Date()
+  ) {}
+}

src/pages/dashboard.tsx

@@ -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>
+      </>
     );
   }
-}
+}

src/pages/userProfile.tsx

@@ -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>
     );
-  // }
-}
+  }
+}

yarn.lock

@@ -1050,14 +1050,9 @@
   dependencies:
     "glob" "7.1.7"
 
-"@next/swc-linux-x64-gnu@13.2.3":
-  "integrity" "sha512-w5MyxPknVvC9LVnMenAYMXMx4KxPwXuJRMQFvY71uXg68n7cvcas85U5zkdrbmuZ+JvsO5SIG8k36/6X3nUhmQ=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.2.3.tgz"
-  "version" "13.2.3"
-
-"@next/swc-linux-x64-musl@13.2.3":
-  "integrity" "sha512-CTeelh8OzSOVqpzMFMFnVRJIFAFQoTsI9RmVJWW/92S4xfECGcOzgsX37CZ8K982WHRzKU7exeh7vYdG/Eh4CA=="
-  "resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.2.3.tgz"
+"@next/swc-win32-x64-msvc@13.2.3":
+  "integrity" "sha512-aLG2MaFs4y7IwaMTosz2r4mVbqRyCnMoFqOcmfTi7/mAS+G4IMH0vJp4oLdbshqiVoiVuKrAfqtXj55/m7Qu1Q=="
+  "resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.2.3.tgz"
   "version" "13.2.3"
 
 "@nodelib/fs.scandir@2.1.5":