WebSVN – LeadersLinked - Antes de SPA – Diff – /react-webpack/dashboard/components/share-modal/ShareModal.js

 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react"
-import { connect } from "react-redux";
+import { connect } from "react-redux"
-import Modal from "react-bootstrap/Modal";
+import Modal from "react-bootstrap/Modal"
-import Button from "react-bootstrap/Button";
+import Button from "react-bootstrap/Button"
-import { useForm } from "react-hook-form";
+import { useForm } from "react-hook-form"
-import styled from "styled-components";
+import styled from "styled-components"
-import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
+import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback"
-import Spinner from "../../../shared/loading-spinner/Spinner";
+import Spinner from "../../../shared/loading-spinner/Spinner"
-import { addNotification } from "../../../redux/notification/notification.actions";
+import { addNotification } from "../../../redux/notification/notification.actions"
-import {
-  closeShareModal,
-  openShareModal,
-  setModalType,
-} from "../../../redux/share-modal/shareModal.actions";
+import { closeShareModal, openShareModal, setModalType } from "../../../redux/share-modal/shareModal.actions"
-import { addFeed, fetchFeeds } from "../../../redux/feed/feed.actions";
+import { addFeed, fetchFeeds } from "../../../redux/feed/feed.actions"
-import DropzoneComponent from "../../../shared/dropzone/DropzoneComponent";
+import DropzoneComponent from "../../../shared/dropzone/DropzoneComponent"
-import { shareModalTypes } from "../../../redux/share-modal/shareModal.types";
+import { shareModalTypes } from "../../../redux/share-modal/shareModal.types"
-import { feedTypes } from "../../../redux/feed/feed.types";
+import { feedTypes } from "../../../redux/feed/feed.types"
-import { CKEditor } from "ckeditor4-react";
+import { CKEditor } from "ckeditor4-react"
-import { axios, CKEDITOR_OPTIONS } from "../../../utils";
+import { axios, CKEDITOR_OPTIONS } from "../../../utils"
-import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal";
+import ConfirmModal from "../../../shared/confirm-modal/ConfirmModal"
 const StyledSpinnerContainer = styled.div`
-  position: absolute;
+  position: absolute
-  left: 0;
+  left: 0
-  top: 0;
+  top: 0
-  width: 100%;
+  width: 100%
-  height: 100%;
+  height: 100%
-  background: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.4)
-  display: flex;
+  display: flex
-  justify-content: center;
+  justify-content: center
-  align-items: center;
+  align-items: center
-  z-index: 300;
+  z-index: 300
 `;
 const ShareModal = (props) => {
   // Redux State Destructuring
     feedType,
     fetchFeeds,
     currentPage,
     timelineUrl,
     feedSharedId
-  } = props;
+  } = props
   // Redux dispatch Destructuring
-  const { closeShareModal, addNotification, addFeed, openShareModal } = props;
+  const { closeShareModal, addNotification, addFeed, openShareModal } = props
   // states
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
-  const [isCKEditorLoading, setIsCKEditorLoading] = useState(true);
+  const [isCKEditorLoading, setIsCKEditorLoading] = useState(true)
-  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const [showConfirmModal, setShowConfirmModal] = useState(false)
   const {
     register,
     unregister,
   } = useForm({
     defaultValues: {
       description: "",
       share_width: "",
     },
-  });
+  })
   useEffect(() => {
     register("description", {
       required: { value: "true", message: "El campo es requerido" },
-    });
+    })
-    register("posted_or_shared");
+    register("posted_or_shared")
     if (
       modalType !== shareModalTypes.POST &&
       modalType !== shareModalTypes.SHARE
     ) {
       register("file", {
         required: { value: "true", message: "El campo es requerido" },
-      });
+      })
     } else {
-      if (!getValues("file")) unregister("file");
+      if (!getValues("file")) unregister("file")
     }
-  }, [modalType]);
+  }, [modalType])
   const recomendationText = () => {
     switch (modalType) {
       case shareModalTypes.IMAGE:
-        return "Tamaño recomendado: 720x720";
+        return "Tamaño recomendado: 720x720"
       case shareModalTypes.FILE:
-        return "solo documentos PDF";
+        return "solo documentos PDF"
       case shareModalTypes.VIDEO:
-        return "Video de extensión mp4, mpeg, webm";
+        return "Video de extensión mp4, mpeg, webm"
       default:
-        return "";
+        return ""
+    }
-  };
+  }
   useEffect(() => {
-    const postedOrShared = modalType === shareModalTypes.SHARE ? "s" : "p";
+    const postedOrShared = modalType === shareModalTypes.SHARE ? "s" : "p"
-    setValue("posted_or_shared", postedOrShared);
+    setValue("posted_or_shared", postedOrShared)
     if (getValues("file") || getValues("description")) {
       if (modalType !== lastModalType) {
-        closeShareModal();
+        closeShareModal()
-        handleShowConfirmModal();
+        handleShowConfirmModal()
       }
+    }
-  }, [modalType]);
+  }, [modalType])
   const hideDuplicatedModal = () => {
     setTimeout(() => {
-      const modals = document.getElementsByClassName('modal');
+      const modals = document.getElementsByClassName('modal')
       if (modals.length > 1 && modals[0].style.display !== 'none') {
-        const currentModal = modals[0];
+        const currentModal = modals[0]
-        currentModal.style.display = 'none';
+        currentModal.style.display = 'none'
         for (let index = 0; index < modals.length; index++) {
-          const element = modals[index];
+          const element = modals[index]
-          element.removeAttribute("tabindex");
+          element.removeAttribute("tabindex")
+        }
+      }
-    }, 3000);
+    }, 3000)
   }
   useEffect(() => {
-    clearErrors();
+    clearErrors()
-    hideDuplicatedModal();
+    hideDuplicatedModal()
-  }, [isOpen]);
+  }, [isOpen])
   const handleShowConfirmModal = () => {
-    setShowConfirmModal(!showConfirmModal);
+    setShowConfirmModal(!showConfirmModal)
-  };
+  }
   const handleModalAccept = () => {
-    setShowConfirmModal(false);
+    setShowConfirmModal(false)
-    setValue("description", "");
+    setValue("description", "")
-    setValue("file", "");
+    setValue("file", "")
-    openShareModal(postUrl, modalType, feedType);
+    openShareModal(postUrl, modalType, feedType)
-    clearErrors();
+    clearErrors()
-  };
+  }
   const handleModalCancel = () => {
-    setShowConfirmModal(false);
+    setShowConfirmModal(false)
-    closeShareModal();
+    closeShareModal()
-    setModalType(lastModalType);
+    setModalType(lastModalType)
-    openShareModal(postUrl, lastModalType, feedType);
-  };
+    openShareModal(postUrl, lastModalType, feedType)
+  }
-  const onSubmit = async (data, e) => {
-    setLoading(true);
+  const onSubmit = async (data, e) => {
-    const currentFormData = new FormData();
-    for (let input in data) {
+    setLoading(true)
-      currentFormData.append(input, data[input]);
+    const currentFormData = new FormData()
-      (`${input}:${data[input]}`);
+    for (let input in data) {
-    }
+      currentFormData.append(input, data[input])
-    await axios.post(postUrl, currentFormData).then((response) => {
+    }
-      const data = response.data;
+    await axios.post(postUrl, currentFormData).then((response) => {
-      const newFeed = data.data;
+      const data = response.data
-      (data);
+      const newFeed = data.data
       if (data.success) {
-        closeShareModal();
+        closeShareModal()
         // reset data
-        e.target.reset();
+        e.target.reset()
-        setValue("description", "");
+        setValue("description", "")
-        setValue("file", "");
+        setValue("file", "")
-        clearErrors();
+        clearErrors()
         addNotification({
           style: "success",
           msg: "La publicación ha sido compartida",
-        });
+        })
         if (feedSharedId) {
-          addFeed(newFeed, feedSharedId);
+          addFeed(newFeed, feedSharedId)
         } else {
-          addFeed(newFeed);
+          addFeed(newFeed)
         }
         if (currentPage && timelineUrl) {
           fetchFeeds(timelineUrl, currentPage)
+        }
       } else {
         if (data.data.description || data.data.file || data.data.share_width) {
           Object.entries(data.data).map(([key, value]) => {
-            setError(key, { type: "required", message: value });
+            setError(key, { type: "required", message: value })
-          });
+          })
         } else {
           addNotification({
             style: "danger",
             msg: data.data,
-          });
+          })
+        }
+      }
-    });
+    })
           modalType={modalType}
           onUploaded={onUploadedHandler}
           settedFile={getValues("file")}
           recomendationText={recomendationText()}
         />
-      );
+      )
+    }
-  };
+  }
   const SharedWithSelectRender = () => {
     if (feedType === feedTypes.DASHBOARD) {
       return (
-        <React.Fragment>
+        <>
-          <select
-            // value={formData.shared_with}
+          <select
             name="shared_with"
             id="shared_with"
-            className="form-control"
-            // onChange={(e) => onInputChangeHandler(e)}
-            ref={register({
+            className="form-control"
-              required: "El campo es requerido",
-            })}
+            ref={register({ required: "El campo es requerido" })}
             defaultValue="p"
+          >
             <option disabled="disabled" value="" style={{ display: "none" }}>
               Compartir con
             </option>
             <option value="p">Público</option>
             <option value="c">Conexiones</option>
-          </select>
-          {errors.shared_with && (
+          </select>
-            <FormErrorFeedback>{errors.shared_with.message}</FormErrorFeedback>
+          {errors.shared_with && <FormErrorFeedback>{errors.shared_with.message}</FormErrorFeedback>}
-          )}
-        </React.Fragment>
+        </>
       );
     }
   };
   return (
     <React.Fragment>
           <Modal.Body>
             {SharedWithSelectRender()}
             <CKEditor
               data={watch("description")}
               onChange={(e) => {
-                const text = e.editor.getData();
+                const text = e.editor.getData()
-                setValue("description", text);
+                setValue("description", text)
                 if (errors.description && getValues('description')) clearErrors("description")
               }}
               config={CKEDITOR_OPTIONS}
               name="description"
               onBeforeLoad={() => {
-                setIsCKEditorLoading(false);
+                setIsCKEditorLoading(false)
               }}
+              onDialogShow={() => console.log('Show')}
             />
-            {isCKEditorLoading && (
+            {isCKEditorLoading &&
               <StyledSpinnerContainer>
                 <Spinner />
-              </StyledSpinnerContainer>
+              </StyledSpinnerContainer>}
-            )}
-            {errors.description && (
-              <FormErrorFeedback>
-                {errors.description.message}
+            {errors.description && <FormErrorFeedback>{errors.description.message}</FormErrorFeedback>}
-              </FormErrorFeedback>
-            )}
-            {dropZoneRender()}
-            {errors.file && (
+            {dropZoneRender()}
-              <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>
-            )}
+            {errors.file && <FormErrorFeedback>{errors.file.message}</FormErrorFeedback>}
           </Modal.Body>
           <Modal.Footer>
             <Button size="sm" type="submit">Enviar</Button>
             <Button color="danger" size="sm" variant="danger" onClick={closeShareModal}>
               Cancelar
             </Button>
           </Modal.Footer>
         </form>
-        {loading ? (
+        {loading &&
           <StyledSpinnerContainer>
             <Spinner />
-          </StyledSpinnerContainer>
-        ) : (
-          ""
-        )}
+          </StyledSpinnerContainer>}
       </Modal>
       <ConfirmModal
         show={showConfirmModal}
         onClose={handleModalCancel}
         onAccept={handleModalAccept}
         acceptLabel="Aceptar"
         message="¿No se ha compartido tu publicación , desea descartarlo?"
       />
     </React.Fragment>
-  );
+  )
 };
 const mapStateToProps = (state) => ({
   isOpen: state.shareModal.isOpen,
   postUrl: state.shareModal.postUrl,
   modalType: state.shareModal.modalType,
   lastModalType: state.shareModal.lastModalType,
   feedType: state.shareModal.feedType,
   feedSharedId: state.shareModal.feedSharedId,
-});
+})
 const mapDispatchToProps = {
   addNotification: (notification) => addNotification(notification),
   closeShareModal: () => closeShareModal(),
   openShareModal: (postUrl, modalType, feedType) => openShareModal(postUrl, modalType, feedType),
   setModalType: (modalType) => setModalType(modalType),
   addFeed: (feed, feedSharedId) => addFeed(feed, feedSharedId),

Proyectos de Subversion LeadersLinked - Antes de SPA

(root)/react-webpack/dashboard/components/share-modal/ShareModal.js – Rev 4945 → 4987