From 5eba5c1ffcdaee9a81e965f0570b00dd26bb38c6 Mon Sep 17 00:00:00 2001
From: ilyayudovin <ilyayudovin123@gmail.com>
Date: Thu, 29 Oct 2020 21:28:52 +0300
Subject: Wait till modal slide right on close

---
 src/components/AvatarCrop/AvatarCrop.tsx     |  9 +++++++--
 src/components/ModalScreen/ModalScreen.tsx   | 12 ++++++++----
 src/containers/PollCreation/PollCreation.tsx |  8 +++++++-
 src/containers/Profile/ProfileInfo.tsx       |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/components/AvatarCrop/AvatarCrop.tsx b/src/components/AvatarCrop/AvatarCrop.tsx
index e344edd..ef6d9c8 100644
--- a/src/components/AvatarCrop/AvatarCrop.tsx
+++ b/src/components/AvatarCrop/AvatarCrop.tsx
@@ -6,8 +6,8 @@ import ModalScreen from "../ModalScreen/ModalScreen";
 import { getCroppedImg } from './canvasUtils'
 
 interface PropTypes {
-  location?: any;
   avatarToCrop: string;
+  setAvatarToCrop: (src: string) => void;
   callback: (file: File) => void;
 }
 
@@ -23,7 +23,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const AvatarCrop: React.FC<PropTypes> = ({location, avatarToCrop, callback}) => {
+const AvatarCrop: React.FC<PropTypes> = ({ avatarToCrop, setAvatarToCrop, callback }) => {
   const classes = useStyles();
   const [crop, setCrop] = useState({x: 0, y: 0});
   const [zoom, setZoom] = useState(1);
@@ -42,12 +42,17 @@ const AvatarCrop: React.FC<PropTypes> = ({location, avatarToCrop, callback}) =>
     }
   }, [avatarToCrop, croppedAreaPixels]);
 
+  const handleCloseModal = useCallback( () => {
+    setAvatarToCrop('');
+  },[]);
+
   return (
     <ModalScreen
       title="Choose area"
       actionIcon={<SendIcon />}
       handleAction={handleLoadCroppedImage}
       isActionDisabled={false}
+      handleCloseModal={handleCloseModal}
     >
       <div className={classes.cropContainer}>
         <Cropper
diff --git a/src/components/ModalScreen/ModalScreen.tsx b/src/components/ModalScreen/ModalScreen.tsx
index 0f2c96f..61cf44a 100644
--- a/src/components/ModalScreen/ModalScreen.tsx
+++ b/src/components/ModalScreen/ModalScreen.tsx
@@ -20,6 +20,7 @@ interface PropTypes {
   actionIcon?: JSX.Element;
   handleAction?: () => void;
   isActionDisabled?: boolean;
+  handleCloseModal: ()=> void;
 }
 
 const useStyles = makeStyles(theme => ({
@@ -42,24 +43,27 @@ const Transition = React.forwardRef((
   ref: React.Ref<unknown>
 ) => <Slide direction="left" ref={ref} {...props} />);
 
-const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, children }) => {
+const ModalScreen: React.FC<PropTypes> = ({ title, actionIcon, handleAction, isActionDisabled, handleCloseModal, children }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const classes = useStyles();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const history = useHistory();
 
-  const handleClose = useCallback(() => history.goBack(), [history]);
+
+  const handleClose = useCallback(() => setIsOpen(false), [setIsOpen]);
+  const onExited = useCallback(handleCloseModal, [history, handleAction]);
 
   const handleClickAction = useCallback(async () => {
     if (handleAction) await handleAction();
-    return window.location.pathname.includes('/profile') ? null : handleClose();
+    return handleClose();
   }, [handleAction, handleClose]);
 
   return (
     <Dialog
-      open={true}
+      open={isOpen}
       onClose={handleClose}
+      onExited={onExited}
       TransitionComponent={Transition}
       PaperProps={{ className: classes.root }}
       fullScreen={isMobile}
diff --git a/src/containers/PollCreation/PollCreation.tsx b/src/containers/PollCreation/PollCreation.tsx
index b761c73..46ab28d 100644
--- a/src/containers/PollCreation/PollCreation.tsx
+++ b/src/containers/PollCreation/PollCreation.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState, useMemo } from 'react';
+import React, {ChangeEvent, useState, useMemo, useCallback} from 'react';
 import Bluebird from 'bluebird';
 import { makeStyles } from '@material-ui/core/styles';
 import { Card, Container, LinearProgress, InputBase, Typography } from '@material-ui/core';
@@ -13,6 +13,7 @@ import UserStrip from '../../components/UserStrip/UserStrip';
 import { post } from '../../requests';
 import { useFeed, useProfile } from '../../hooks/APIClient';
 import { useAuth } from '../../hooks/useAuth';
+import {useHistory} from "react-router";
 
 const useStyles = makeStyles(theme => ({
   images: {
@@ -32,6 +33,7 @@ const useStyles = makeStyles(theme => ({
 const PollCreation: React.FC = () => {
   const [description, setDescription] = useState<string>('');
   const classes = useStyles();
+  const history = useHistory();
   const { enqueueSnackbar } = useSnackbar();
   const { user } = useAuth();
   const { mutate: updateFeed } = useFeed();
@@ -71,6 +73,9 @@ const PollCreation: React.FC = () => {
     }
   };
 
+  const handleClose = useCallback(() => history.goBack(), [history]);
+
+
   const isSubmitting = useMemo(() => leftProgress + rightProgress > 0, [leftProgress, rightProgress]);
 
   return (
@@ -79,6 +84,7 @@ const PollCreation: React.FC = () => {
       actionIcon={<SendIcon />}
       handleAction={handleSubmit}
       isActionDisabled={!(left && right) || isSubmitting}
+      handleCloseModal={handleClose}
     >
       <Container maxWidth="sm" disableGutters>
         <Card elevation={3}>
diff --git a/src/containers/Profile/ProfileInfo.tsx b/src/containers/Profile/ProfileInfo.tsx
index 763a077..b71e6db 100644
--- a/src/containers/Profile/ProfileInfo.tsx
+++ b/src/containers/Profile/ProfileInfo.tsx
@@ -129,7 +129,7 @@ const ProfileInfo: React.FC<PropTypes> = ({
   return (
     <div className={classes.root}>
       {
-        avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} callback={handleUpdateAvatar}/>
+        avatarToCrop && <AvatarCrop avatarToCrop={avatarToCrop} setAvatarToCrop={setAvatarToCrop} callback={handleUpdateAvatar}/>
       }
       {
         !userInfo
-- 
cgit v1.2.3