From 81450eedc7032f6a1d90c68d327c7b294f99787f Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Wed, 23 Mar 2022 15:10:46 -0700
Subject: [PATCH] loading profile image to crop

---
 net/web/src/User/Profile/Profile.jsx                   | 4 ++--
 net/web/src/User/Profile/ProfileImage/ProfileImage.jsx | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/net/web/src/User/Profile/Profile.jsx b/net/web/src/User/Profile/Profile.jsx
index 2415084d..65aa4586 100644
--- a/net/web/src/User/Profile/Profile.jsx
+++ b/net/web/src/User/Profile/Profile.jsx
@@ -68,7 +68,7 @@ export function Profile(props) {
         <div class="select">
           <Button key="select" class="select" onClick={() => onSelectImage()}>Select Image</Button>
         </div>
-        <Button key="select" onClick={() => setLogoVisible(false)}>Cancel</Button>
+        <Button key="back" onClick={() => setLogoVisible(false)}>Cancel</Button>
         <Button key="save" type="primary" onClick={() => setLogoVisible(false)}>Save</Button>
       </ModalFooter>
     );
@@ -97,7 +97,7 @@ export function Profile(props) {
           onOk={() => onProfileSave()} onCancel={() => setInfoVisible(false)}>
         <ProfileInfo state={state} actions={actions} />
       </Modal>
-      <Modal title="Profile Image" centered visible={logoVisible} footer={Footer}>
+      <Modal title="Profile Image" centered visible={logoVisible} footer={Footer} onCancel={() => setLogoVisible(false)}>
         <ProfileImage state={state} actions={actions} />
       </Modal>
     </ProfileWrapper>
diff --git a/net/web/src/User/Profile/ProfileImage/ProfileImage.jsx b/net/web/src/User/Profile/ProfileImage/ProfileImage.jsx
index 4eaa604a..99337443 100644
--- a/net/web/src/User/Profile/ProfileImage/ProfileImage.jsx
+++ b/net/web/src/User/Profile/ProfileImage/ProfileImage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useCallback } from 'react';
 import Cropper from 'react-easy-crop'
 import { UserOutlined } from '@ant-design/icons';
 import { ProfileImageWrapper, ProfileDefaultImage } from './ProfileImage.styled';
@@ -8,9 +8,9 @@ export function ProfileImage({ state, actions }) {
   const [crop, setCrop] = useState({ x: 0, y: 0 })
   const [zoom, setZoom] = useState(1)
 
-  const onCropComplete = (croppedArea, croppedAreaPixels) => {
+  const onCropComplete = useCallback((croppedArea, croppedAreaPixels) => {
     console.log("crop complete");
-  };
+  });
 
   const Logo = () => {
     if (state.modalImage == null) {