so pra ve

pagina.jsx

import React, { useState, useEffect } from "react";
import { toaster, Label, TextInput } from "evergreen-ui";
import ReactQuill from "react-quill";
import styled from "styled-components";
import Dropzone from "react-dropzone";
import { Formik } from "formik";

import { useStore, useActions } from "../../configureStore";
import { Upload } from "../../utils/upload";
import "../../../node_modules/react-quill/dist/quill.snow.css";

export default function InfoRecipe({ edit }) {
  const setReceita = useActions(state => state.recipe.setReceita);
  const receita = useStore(state => state.recipe.receita);

  const [listImage, setListImage] = useState([]);
  const [mixing, setMixing] = useState([]);
  const [mainImage, setMainImage] = useState([]);

  useEffect(() => {
    if (edit) {
      let galleryImage = [];
      if (receita.gallery_image1) {
        galleryImage.push({ name: receita.gallery_image1 });
      }
      if (receita.gallery_image2) {
        galleryImage.push({ name: receita.gallery_image2 });
      }
      if (receita.gallery_image3) {
        galleryImage.push({ name: receita.gallery_image3 });
      }
      if (receita.gallery_image4) {
        galleryImage.push({ name: receita.gallery_image4 });
      }
      if (receita.gallery_image5) {
        galleryImage.push({ name: receita.gallery_image5 });
      }
      setListImage(galleryImage);
      if (receita.image) {
        setMainImage([{ name: receita.image }]);
      }
    }
  }, [receita]);

  function perpareHandleChange(value) {
    setReceita({ prepare: value });
  }

  function obsHandleChange(value) {
    setReceita({ observation: value });
  }

  function infoHandleChange(value) {
    setReceita({ information: value });
  }

  function mixingHandleChange(value) {
    setMixing(value);
    setReceita({ mixing: value });
  }

  return (
    <Wrapper>
      <Formik
        initialValues={{
          video_url: receita.video_url
        }}
        enableReinitialize
      >
        {({ values, handleChange, handleSubmit }) => (
          <Form onSubmit={handleSubmit}>
            {receita.type >= 5 && (
              <ContainerTextArea>
                <Label
                  htmlFor={45}
                  size={500}
                  display="block"
                  marginBottom={3}
                  style={{
                    padding: "8px 0 0 8px",
                    backgroundColor: "#faf8f3",
                    verticalAlign: "baseline",
                    height: "35px",
                    boxShadow: " inset 0 2px 3px rgba(67, 90, 111, 0.14)"
                  }}
                >
                  MÉTODO DE MISTURA
                </Label>
                <ReactQuill
                  value={mixing}
                  theme="snow"
                  onChange={e => mixingHandleChange(e)}
                />
              </ContainerTextArea>
            )}
            <ContainerTextArea>
              <Label
                htmlFor={45}
                size={500}
                display="block"
                marginBottom={3}
                style={{
                  padding: "8px 0 0 8px",
                  backgroundColor: "#faf8f3",
                  verticalAlign: "baseline",
                  height: "35px",
                  boxShadow: " inset 0 2px 3px rgba(67, 90, 111, 0.14)"
                }}
              >
                PREPARO
              </Label>
              <ReactQuill
                paddingTop={5}
                value={receita.prepare}
                theme="snow"
                onChange={e => perpareHandleChange(e)}
              />
            </ContainerTextArea>
            <ContainerTextArea>
              <Label
                htmlFor={45}
                size={500}
                display="block"
                marginBottom={3}
                style={{
                  padding: "8px 0 0 8px",
                  backgroundColor: "#faf8f3",
                  verticalAlign: "baseline",
                  height: "35px",
                  boxShadow: " inset 0 2px 3px rgba(67, 90, 111, 0.14)"
                }}
              >
                INFORMAÇŌES ADICIONAIS
              </Label>
              <ReactQuill
                value={receita.information}
                theme="snow"
                onChange={e => infoHandleChange(e)}
              />
            </ContainerTextArea>
            <ContainerTextArea>
              <Label
                htmlFor={45}
                size={500}
                display="block"
                marginBottom={3}
                style={{
                  padding: "8px 0 0 8px",
                  backgroundColor: "#faf8f3",
                  verticalAlign: "baseline",
                  height: "35px",
                  boxShadow: " inset 0 2px 3px rgba(67, 90, 111, 0.14)"
                }}
              >
                OBSERVAÇÕES
              </Label>
              <ReactQuill
                value={receita.observation}
                theme="snow"
                onChange={e => obsHandleChange(e)}
              />
            </ContainerTextArea>
            <ContainerMedia>
              <BoxImages>
                <Dropzone
                  onDrop={async acceptedFiles => {
                    if (acceptedFiles.length > 1) {
                      toaster.warning("Limite 1 imagem");
                      return;
                    }
                    const files = [];
                    for (const file of acceptedFiles) {
                      const fileName = await Upload("receitas", file);
                      files.push({ name: fileName });
                    }

                    files.forEach(item => {
                      setReceita({ image: item.name });
                    });

                    setMainImage(files);
                  }}
                >
                  {({ getRootProps, getInputProps }) => (
                    <SectionGallery>
                      <div {...getRootProps()}>
                        <input {...getInputProps()} />
                        {mainImage.length === 0 && (
                          <p> #1 Selecione a imagem principal</p>
                        )}
                        {mainImage.map((item, idx) => (
                          <img
                            key={idx}
                            src={`${process.env.REACT_APP_ASSETS_BUCKET}/receitas/${item.name}`}
                            width="100px"
                            height="100px"
                          />
                        ))}
                      </div>
                    </SectionGallery>
                  )}
                </Dropzone>
                <Dropzone
                  onDrop={async acceptedFiles => {
                    if (acceptedFiles.length > 4) {
                      toaster.warning("Limite 4 imagens");
                      return;
                    }

                    const filesGallery = listImage;
                    for (const file of acceptedFiles) {
                      const fileName = await Upload("receitas", file);
                      filesGallery.push({ name: fileName });
                    }

                    filesGallery.forEach((item, idx) => {
                      if (!item.isSaved) {
                        setReceita({ [`gallery_image${idx + 1}`]: item.name });
                        item.isSaved = true;
                      }
                    });

                    setListImage(filesGallery);
                  }}
                >
                  {({ getRootProps, getInputProps }) => (
                    <SectionGallery>
                      <div {...getRootProps()}>
                        <input {...getInputProps()} />
                        {listImage.length === 0 && (
                          <p> #2 Selecione as imagens da galeria</p>
                        )}
                        {listImage.map((item, idx) => (
                          <img
                            key={idx}
                            src={`${process.env.REACT_APP_ASSETS_BUCKET}/receitas/${item.name}`}
                            width="100px"
                            height="100px"
                          />
                        ))}
                      </div>
                    </SectionGallery>
                  )}
                </Dropzone>
              </BoxImages>
              <ContainerInput>
                <Label
                  htmlFor={45}
                  size={500}
                  display="block"
                  marginBottom={5}
                  marginTop={20}
                  style={{
                    padding: "8px 0 0 8px",
                    backgroundColor: "#faf8f3",
                    verticalAlign: "baseline",
                    height: "35px",
                    boxShadow: " inset 0 2px 3px rgba(67, 90, 111, 0.14)"
                  }}
                >
                  Youtube
                </Label>
                <TextInput
                  width="100%"
                  height={35}
                  name="video_url"
                  placeholder="Nome"
                  onChange={e => {
                    setReceita({ video_url: e.target.value });
                    handleChange(e);
                  }}
                  value={values.video_url}
                  type="text"
                  autoComplete={"off"}
                />
              </ContainerInput>
            </ContainerMedia>
          </Form>
        )}
      </Formik>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding: 15px 15px 15px 15px;
`;

const ContainerTextArea = styled.div`
  display: flex;
  flex-direction: column;
  margin: 35px 0 0 0;
`;

const ContainerMedia = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 20px;
`;

const BoxImages = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
`;

const SectionGallery = styled.div`
  height: 140px;
  border: 2px solid #eee;
  border-style: dashed;
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  outline: 0;

  p {
    height: 130px;
    margin: 0;
    padding-top: 10px;
    outline: 0;
  }

  img {
    margin: 20px 10px;
  }
`;

const ContainerInput = styled.div`
  display: flex;
  flex-direction: column;
  flex: 0.32;
`;

const Form = styled.form`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  width: 100%;
`;