1 files changed, 57 insertions, 0 deletions
diff --git a/src/containers/AvatarCropModal/AvatarCropModal.tsx b/src/containers/AvatarCropModal/AvatarCropModal.tsx
new file mode 100644
index 0000000..4decdfb
--- /dev/null
+++ b/src/containers/AvatarCropModal/AvatarCropModal.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import SendIcon from "@material-ui/icons/Send";
+import { getCroppedImg } from './canvasUtils'
+
+import ImageCropAreaSelect from '../../components/ImageCropAreaSelect/ImageCropAreaSelect';
+import ModalScreen from '../../components/ModalScreen/ModalScreen';
+
+interface Area {
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+}
+
+interface PropTypes {
+  avatar: string;
+  callback: (file: File) => void;
+}
+
+const useStyles = makeStyles(theme => ({
+  cropContainer: {
+    position: 'relative',
+    width: '100%',
+    // height: '100vh',
+    // background: '#333',
+    [theme.breakpoints.up('sm')]: {
+      // height: 400,
+    },
+  }
+}));
+
+const AvatarCropModal: React.FC<PropTypes> = ({ avatar, callback }) => {
+  const classes = useStyles();
+  const [area, setArea] = useState<Area>({ x: 0, y: 0 });
+
+  const handleAction = async () => getCroppedImg(avatar, area)
+    .then(croppedImage => callback(croppedImage));
+
+  return (
+    <ModalScreen
+      title="Choose area"
+      actionIcon={<SendIcon />}
+      handleAction={handleAction}
+      isActionDisabled={false}
+    >
+      <div className={classes.cropContainer}>
+        <ImageCropAreaSelect
+          image={avatar}
+          setArea={setArea}
+        />
+      </div>
+    </ModalScreen>
+  )
+};
+
+export default AvatarCropModal;