From 936d6410901dc8ffe3364fab3a79e2ce3cb9de7c Mon Sep 17 00:00:00 2001
From: "Puzio, Wojciech" <wpuzio@estee.com>
Date: Fri, 12 Jan 2024 17:11:18 +0100
Subject: [PATCH] feat(app) refactor and add components for nice edit

---
 src/app/dodajProdukt/page.tsx                 | 108 ++++--------------
 src/app/edycjaProduktu/page.tsx               |  64 +----------
 src/app/usunProdukt/page.tsx                  |   1 -
 src/components/CustomInput/CustomInput.tsx    |   4 +-
 src/components/CustomInput/ICustomInput.ts    |   8 +-
 .../CustomTextarea/CustomtextArea.tsx         |   2 +-
 .../CustomUploadCarousel.tsx                  |  49 ++++++++
 .../CutomDropZone/CustomDropZone.tsx          |  40 +++++++
 src/components/LoginModal/LoginModal.tsx      |  10 +-
 src/components/ProductCard/ProductCard.tsx    |   3 +-
 src/components/StickyNavbar/StickyNavbar.tsx  |  25 +---
 src/providers/Provider.tsx                    |   2 +-
 src/providers/axios-client.ts                 |   3 +-
 13 files changed, 136 insertions(+), 183 deletions(-)
 create mode 100644 src/components/CustomUploadCarousel/CustomUploadCarousel.tsx
 create mode 100644 src/components/CutomDropZone/CustomDropZone.tsx

diff --git a/src/app/dodajProdukt/page.tsx b/src/app/dodajProdukt/page.tsx
index cb10551..f433c5c 100644
--- a/src/app/dodajProdukt/page.tsx
+++ b/src/app/dodajProdukt/page.tsx
@@ -1,22 +1,15 @@
 'use client';
 import { useState } from 'react';
 import { AdjustmentsVerticalIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid';
-import { ErrorMessage, Form, Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import * as Yup from 'yup';
 
-import Image from 'next/image';
-import {
-  Alert,
-  Button,
-  Card,
-  Carousel,
-  Textarea,
-  Typography,
-} from '@material-tailwind/react';
+import { Alert, Button, Card, Typography } from '@material-tailwind/react';
 
-import CustomArrow from '@/components/CustomArrow/CustomArrow';
 import CustomInput from '@/components/CustomInput/CustomInput';
-import UploadIcon from '@/dodajProdukt/UploadIcon';
+import CustomTextarea from '@/components/CustomTextarea/CustomtextArea';
+import CustomUploadCarousel from '@/components/CustomUploadCarousel/CustomUploadCarousel';
+import CustomDropZone from '@/components/CutomDropZone/CustomDropZone';
 import ApiClient from '@/providers/axios-client';
 
 const ProductSchema = Yup.object().shape({
@@ -24,6 +17,17 @@ const ProductSchema = Yup.object().shape({
   body: Yup.string().required('Opis produktu jest wymagany'),
   price: Yup.number().positive('Cena musi być liczbą dodatnią').required('Cena jest wymagana'),
   amount: Yup.number().positive('Ilość musi być liczbą dodatnią').required('Ilość jest wymagana'),
+  image: Yup.mixed()
+    .test('fileSize', 'Plik jest zbyt duży. Maksymalny rozmiar to 800x400px.', (value) => {
+      if (!value) return true;
+      // @ts-ignore
+      return value.size <= 800 * 400;
+    })
+    .test('fileType', 'Dozwolone formaty plików to JPG, PNG, SVG, GIF.', (value) => {
+      if (!value) return true;
+      // @ts-ignore
+      return ['image/jpeg', 'image/png', 'image/svg+xml', 'image/gif'].includes(value.type);
+    }),
 });
 
 export default function Home() {
@@ -75,16 +79,16 @@ export default function Home() {
               setSubmissionStatus('success');
               resetForm();
               setImagePreviews([]);
+              return response;
             } catch (error) {
               setSubmissionStatus('error');
-              console.error('Error:', error);
             } finally {
               setSubmitting(false);
             }
           }}
         >
           {({ setFieldValue, isSubmitting, handleChange, values, handleBlur }) => (
-            <Form className="mt-8 mb-2 w-80 w-full sm:w-96">
+            <Form className="mt-8 mb-2 w-full sm:w-96">
               <div className="mb-1 flex flex-col gap-6">
                 <CustomInput
                   label="Nazwa Produktu"
@@ -94,14 +98,13 @@ export default function Home() {
                   value={values.title}
                   onChange={handleChange}
                 />
-                <Textarea
-                  label="Opis Produktu"
-                  name="body"
+                <CustomTextarea
+                  label={'Opis produktu'}
+                  name={'body'}
                   onBlur={handleBlur}
                   value={values.body}
                   onChange={handleChange}
                 />
-                <ErrorMessage name="body" component="div" />
                 <CustomInput
                   label="Cena"
                   name="price"
@@ -121,73 +124,8 @@ export default function Home() {
                   value={values.amount}
                   onChange={handleChange}
                 />
-                {imagePreviews && (
-                  <div>
-                    <Typography variant="small">
-                      Podgląd obrazków został dostosowany do szerokości formularza
-                    </Typography>
-                    <Carousel
-                      className="rounded-xl"
-                      prevArrow={({ handlePrev, firstIndex }) => (
-                        <CustomArrow
-                          onClick={handlePrev}
-                          direction="prev"
-                          isDisabled={firstIndex}
-                        />
-                      )}
-                      nextArrow={({ handleNext, activeIndex }) => (
-                        <CustomArrow
-                          onClick={handleNext}
-                          direction="next"
-                          isDisabled={activeIndex === imagePreviews.length - 1}
-                        />
-                      )}
-                    >
-                      {imagePreviews.map((img, i) => {
-                        return (
-                          // eslint-disable-next-line @next/next/no-img-element
-                          <Image
-                            width={0}
-                            height={0}
-                            sizes="100vw"
-                            style={{ width: '100%' }}
-                            src={img}
-                            alt={'image-' + i}
-                            key={i}
-                            className="object-cover h-48 w-96"
-                          />
-                        );
-                      })}
-                    </Carousel>
-                  </div>
-                )}
-
-                <div className="flex items-center justify-center w-full">
-                  <label
-                    htmlFor="dropzone-file"
-                    className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
-                  >
-                    <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
-                      <UploadIcon />
-                      <p className="text-sm mb-2 text-gray-500 dark:text-gray-400 text-center">
-                        <span className="font-semibold">Kliknij by dodać obrazek</span> albo
-                        przeciągnij i upuść
-                      </p>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
-                        SVG, PNG, JPG bądź GIF (MAX. 800x400px)
-                      </p>
-                    </div>
-                    <input
-                      onChange={(e) => onSelectFile(setFieldValue, e)}
-                      id="dropzone-file"
-                      name="image"
-                      type="file"
-                      className="hidden"
-                      accept=".jpg,.png,.svg,.gif"
-                      // multiple
-                    />
-                  </label>
-                </div>
+                {imagePreviews && <CustomUploadCarousel imagePreviews={imagePreviews} />}
+                <CustomDropZone onSelectFile={(e) => onSelectFile(setFieldValue, e)} name="image" />
               </div>
               <Button className="mt-6" fullWidth type="submit" disabled={isSubmitting}>
                 {isSubmitting ? 'Przetwarzanie...' : 'Dodaj Produkt'}
diff --git a/src/app/edycjaProduktu/page.tsx b/src/app/edycjaProduktu/page.tsx
index bb22cff..ea21b23 100644
--- a/src/app/edycjaProduktu/page.tsx
+++ b/src/app/edycjaProduktu/page.tsx
@@ -1,11 +1,9 @@
 'use client';
-import React, { FunctionComponent } from 'react';
 import { CurrencyDollarIcon } from '@heroicons/react/24/solid';
 
 import {
   Button,
   Card,
-  IconButton,
   Input,
   Option,
   Select,
@@ -13,73 +11,14 @@ import {
   Typography,
 } from '@/providers/ThemeProvider';
 
-interface IButtonIcon {
-  onClick?: () => void;
-  direction: 'prev' | 'next';
-  isDisabled?: boolean;
-}
-
-const CustomArrow: FunctionComponent<IButtonIcon> = ({ onClick, direction, isDisabled }) => (
-  <IconButton
-    variant="text"
-    color="gray"
-    size="lg"
-    onClick={onClick}
-    className={`!absolute top-2/4 ${
-      direction === 'prev' ? 'left-4' : '!right-4'
-    } -translate-y-2/4 backdrop-blur-sm bg-white/30 ${isDisabled ? 'cursor-not-allowed' : ''}`}
-    disabled={isDisabled}
-  >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={2}
-      stroke="currentColor"
-      className="h-6 w-6"
-    >
-      {direction === 'prev' ? (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-        />
-      ) : (
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
-        />
-      )}
-    </svg>
-  </IconButton>
-);
-
 export default function Home() {
-  const [selectedFiles, setSelectedFiles] = React.useState<FileList | null>(null);
-  const [imagePreviews, setImagePreviews] = React.useState<string[] | []>([]);
-
-  const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const images = [];
-    const files = e.target.files;
-
-    if (files) {
-      for (let i = 0; i < files.length; i++) {
-        images.push(URL.createObjectURL(files[i]));
-      }
-
-      setSelectedFiles(files);
-      setImagePreviews(images);
-    }
-  };
-
   return (
     <main className="container mx-auto py-8 px-8">
       <Card color="transparent" shadow={false}>
         <Typography variant="h4" color="blue-gray">
           Edycja Produktu
         </Typography>
-        <form className="mt-8 mb-2 w-80 w-full sm:w-96" action="#send">
+        <form className="mt-8 mb-2 w-full sm:w-96">
           <div className="mb-1 flex flex-col gap-6">
             <Input variant="static" size="lg" label="Nazwa Produktu" crossOrigin="" />
             <Textarea label="Opis Produktu" />
@@ -90,6 +29,7 @@ export default function Home() {
             </Select>
             <Input label="Cena" icon={<CurrencyDollarIcon />} crossOrigin="" />
             <div>
+              {/* eslint-disable-next-line @next/next/no-img-element */}
               <img
                 src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
                 alt=""
diff --git a/src/app/usunProdukt/page.tsx b/src/app/usunProdukt/page.tsx
index f314fed..c2b0009 100644
--- a/src/app/usunProdukt/page.tsx
+++ b/src/app/usunProdukt/page.tsx
@@ -1,5 +1,4 @@
 'use client';
-import React from 'react';
 
 import { Card, Typography } from '@material-tailwind/react';
 
diff --git a/src/components/CustomInput/CustomInput.tsx b/src/components/CustomInput/CustomInput.tsx
index c29c0c3..4ca8c92 100644
--- a/src/components/CustomInput/CustomInput.tsx
+++ b/src/components/CustomInput/CustomInput.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import { FC } from 'react';
 import { ErrorMessage } from 'formik';
 
 import { Input } from '@material-tailwind/react';
 
 import { ICustomInput } from '@/components/CustomInput/ICustomInput';
 
-const CustomInput: React.FC<ICustomInput> = ({
+const CustomInput: FC<ICustomInput> = ({
   label,
   name,
   type = 'text',
diff --git a/src/components/CustomInput/ICustomInput.ts b/src/components/CustomInput/ICustomInput.ts
index 2fd7e2e..652ed78 100644
--- a/src/components/CustomInput/ICustomInput.ts
+++ b/src/components/CustomInput/ICustomInput.ts
@@ -1,12 +1,12 @@
-import React from 'react';
+import { ChangeEvent, FocusEvent, ReactNode } from 'react';
 
 export interface ICustomInput {
   label: string;
   name: string;
   type?: string;
-  icon?: React.ReactNode;
+  icon?: ReactNode;
   step?: string;
-  onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur: (e: FocusEvent<HTMLInputElement>) => void;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
diff --git a/src/components/CustomTextarea/CustomtextArea.tsx b/src/components/CustomTextarea/CustomtextArea.tsx
index c5b4c9a..479e3c1 100644
--- a/src/components/CustomTextarea/CustomtextArea.tsx
+++ b/src/components/CustomTextarea/CustomtextArea.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent,FC,FocusEvent } from 'react';
+import { ChangeEvent, FC, FocusEvent } from 'react';
 import { ErrorMessage } from 'formik';
 
 import { Textarea } from '@material-tailwind/react';
diff --git a/src/components/CustomUploadCarousel/CustomUploadCarousel.tsx b/src/components/CustomUploadCarousel/CustomUploadCarousel.tsx
new file mode 100644
index 0000000..b09d654
--- /dev/null
+++ b/src/components/CustomUploadCarousel/CustomUploadCarousel.tsx
@@ -0,0 +1,49 @@
+import { FC } from 'react';
+
+import Image from 'next/image';
+import { Carousel } from '@material-tailwind/react';
+
+import CustomArrow from '@/components/CustomArrow/CustomArrow';
+import { Typography } from '@/providers/ThemeProvider';
+
+export interface IImageCarousel {
+  imagePreviews: string[]; // Assuming imagePreviews is an array of strings (URLs)
+}
+
+const CustomUploadCarousel: FC<IImageCarousel> = ({ imagePreviews }) => {
+  return (
+    <div>
+      <Typography variant="small">
+        Podgląd obrazków został dostosowany do szerokości formularza
+      </Typography>
+      <Carousel
+        className="rounded-xl"
+        prevArrow={({ handlePrev, firstIndex }) => (
+          <CustomArrow onClick={handlePrev} direction="prev" isDisabled={firstIndex} />
+        )}
+        nextArrow={({ handleNext, activeIndex }) => (
+          <CustomArrow
+            onClick={handleNext}
+            direction="next"
+            isDisabled={activeIndex === imagePreviews.length - 1}
+          />
+        )}
+      >
+        {imagePreviews.map((img, i) => (
+          <Image
+            width={0}
+            height={0}
+            sizes="100vw"
+            style={{ width: '100%' }}
+            src={img}
+            alt={'image-' + i}
+            key={i}
+            className="object-cover h-48 w-96"
+          />
+        ))}
+      </Carousel>
+    </div>
+  );
+};
+
+export default CustomUploadCarousel;
diff --git a/src/components/CutomDropZone/CustomDropZone.tsx b/src/components/CutomDropZone/CustomDropZone.tsx
new file mode 100644
index 0000000..fa630f7
--- /dev/null
+++ b/src/components/CutomDropZone/CustomDropZone.tsx
@@ -0,0 +1,40 @@
+import { ChangeEvent, FC } from 'react';
+import { ErrorMessage } from 'formik';
+
+import UploadIcon from '@/dodajProdukt/UploadIcon';
+
+interface IDropzone {
+  name?: string;
+  onSelectFile: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const Dropzone: FC<IDropzone> = ({ name = '', onSelectFile }) => (
+  <div className="flex flex-wrap items-center justify-center ">
+    <ErrorMessage name={name} component="div" className="w-full" />
+    <label
+      htmlFor="dropzone-file"
+      className="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600"
+    >
+      <div className="flex flex-col items-center justify-center pt-5 pb-6 ">
+        <UploadIcon />
+        <p className="text-sm mb-2 text-gray-500 dark:text-gray-400 text-center">
+          <span className="font-semibold">Kliknij by dodać obrazek</span> albo przeciągnij i upuść
+        </p>
+        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
+          SVG, PNG, JPG bądź GIF (MAX. 800x400px)
+        </p>
+      </div>
+      <input
+        onChange={(e) => onSelectFile(e)}
+        id="dropzone-file"
+        name={name}
+        type="file"
+        className="hidden"
+        accept=".jpg,.png,.svg,.gif"
+        // multiple
+      />
+    </label>
+  </div>
+);
+
+export default Dropzone;
diff --git a/src/components/LoginModal/LoginModal.tsx b/src/components/LoginModal/LoginModal.tsx
index 85aade0..8bc85f5 100644
--- a/src/components/LoginModal/LoginModal.tsx
+++ b/src/components/LoginModal/LoginModal.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent, useState } from 'react';
 
 import type { DialogProps } from '@material-tailwind/react';
 import {
@@ -75,11 +75,11 @@ async function authorize(credentials: ILoginCredentials): Promise<IAuthorization
 }
 
 const LoginModal: FunctionComponent<ILoginModal> = ({ popupStateHandler, popupOpenState }) => {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   const handleOpen = () => setOpen(!open);
-  const [email, setEmail] = React.useState('');
-  const [password, setPassword] = React.useState('');
-  const [isLoading, setIsLoading] = React.useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const handleClick = async () => {
     setIsLoading(true);
diff --git a/src/components/ProductCard/ProductCard.tsx b/src/components/ProductCard/ProductCard.tsx
index 9caf59c..c5db4df 100644
--- a/src/components/ProductCard/ProductCard.tsx
+++ b/src/components/ProductCard/ProductCard.tsx
@@ -10,10 +10,11 @@ import {
   Typography,
 } from '@material-tailwind/react';
 
-const ProductCard: FunctionComponent<{}> = ({}) => {
+const ProductCard: FunctionComponent = ({}) => {
   return (
     <Card className="w-full md:w-96">
       <CardHeader shadow={false} floated={false} className="h-96">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src="https://images.unsplash.com/photo-1629367494173-c78a56567877?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80"
           alt="card-image"
diff --git a/src/components/StickyNavbar/StickyNavbar.tsx b/src/components/StickyNavbar/StickyNavbar.tsx
index 86a8635..8c519a7 100644
--- a/src/components/StickyNavbar/StickyNavbar.tsx
+++ b/src/components/StickyNavbar/StickyNavbar.tsx
@@ -1,13 +1,11 @@
 'use client';
-import React from 'react';
+import { useEffect, useState } from 'react';
 import { ShoppingCartIcon } from '@heroicons/react/24/solid';
 
 import Image from 'next/image';
 import Link from 'next/link';
 import { signIn, signOut, useSession } from 'next-auth/react';
 
-import LoginModal from '@/components/LoginModal/LoginModal';
-
 import {
   Badge,
   Button,
@@ -37,7 +35,7 @@ const MenuLinksItemsLogged: MenuItem = [
     href: '/edycjaProduktu',
   },
   {
-    name: 'Usun Produkt',
+    name: 'Usuń Produkt',
     href: '/usunProdukt',
   },
 ];
@@ -49,30 +47,17 @@ const MenuLinksItemsGuest: MenuItem = [
   },
 ];
 
-const MenuButtonList: MenuItem = [
-  {
-    name: 'Logowanie',
-    href: '/logowanie',
-  },
-  {
-    name: 'Dołacz',
-    href: '/rejestracja',
-  },
-];
-
 export function StickyNavbar() {
-  const [openNav, setOpenNav] = React.useState(false);
-  const [popupVisible, setPopupVisible] = React.useState(false);
+  const [openNav, setOpenNav] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     window.addEventListener('resize', () => window.innerWidth >= 960 && setOpenNav(false));
   }, []);
 
-  const { data: session, status } = useSession();
+  const { data: session } = useSession();
   console.log(useSession());
 
   const menuLinksItemsLogged = session ? MenuLinksItemsLogged : MenuLinksItemsGuest;
-  const toggleLoginPopup = () => setPopupVisible(!popupVisible);
 
   const navList = (
     <ul className="mt-2 mb-4 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
diff --git a/src/providers/Provider.tsx b/src/providers/Provider.tsx
index e3ff70b..cc50214 100644
--- a/src/providers/Provider.tsx
+++ b/src/providers/Provider.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import { SessionProvider } from 'next-auth/react';
 
diff --git a/src/providers/axios-client.ts b/src/providers/axios-client.ts
index 891a9d1..10643ed 100644
--- a/src/providers/axios-client.ts
+++ b/src/providers/axios-client.ts
@@ -25,7 +25,8 @@ const ApiClient = () => {
       return response;
     },
     (error) => {
-      console.log(`error`, error);
+      console.log('error', error);
+      return Promise.reject(error);
     },
   );