From 16bc012e29d02dcbccfd51012619cf42a0c94849 Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Mon, 1 Mar 2021 11:34:14 +0200
Subject: [PATCH] fix: EditInformationModal fixes

---
 .../components/PostList/PostListRow/index.jsx |  2 +-
 .../GeneralTab/EditInformationModal/index.jsx | 31 +++++++++++--------
 .../GeneralTab/EditInformationModal/style.css |  4 +++
 3 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/style.css

diff --git a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
index b27cf8a..ee438cb 100644
--- a/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
+++ b/packages/concordia-app/src/components/PostList/PostListRow/index.jsx
@@ -14,12 +14,12 @@ import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/Contrac
 import { POSTS_DATABASE, USER_DATABASE } from 'concordia-shared/src/constants/orbit/OrbitDatabases';
 import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
 import { breeze } from '../../../redux/store';
-import './styles.css';
 import determineKVAddress from '../../../utils/orbitUtils';
 import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import ProfileImage from '../../ProfileImage';
 import PostVoting from '../PostVoting';
 import targetBlank from '../../../utils/markdownUtils';
+import './styles.css';
 
 const { orbit } = breeze;
 
diff --git a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
index 46c44ca..25ba65e 100644
--- a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
+++ b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
@@ -2,7 +2,7 @@ import React, {
   useCallback, useEffect, useMemo, useState,
 } from 'react';
 import {
-  Button, Form, Icon, Image, Input, Message, Modal,
+  Button, Form, Input, Message, Modal,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,8 @@ import checkUrlValid from '../../../../utils/urlUtils';
 import { USER_LOCATION, USER_PROFILE_PICTURE } from '../../../../constants/orbit/UserDatabaseKeys';
 import { breeze, drizzle } from '../../../../redux/store';
 import UsernameSelector from '../../../../components/UsernameSelector';
+import ProfileImage from '../../../../components/ProfileImage';
+import './style.css';
 
 const { orbit: { stores } } = breeze;
 const { contracts: { [FORUM_CONTRACT]: { methods: { updateUsername } } } } = drizzle;
@@ -88,11 +90,6 @@ const EditInformationModal = (props) => {
     }
   }, []);
 
-  const profilePicture = useMemo(() => (profilePictureInput.length > 0 && profilePictureUrlValid
-    ? (<Image size="medium" src={profilePictureInput} wrapped />)
-    : (<Icon name="user circle" size="massive" inverted color="black" />)
-  ), [profilePictureInput, profilePictureUrlValid]);
-
   const handleSubmit = useCallback(() => {
     const keyValuesToStore = [];
 
@@ -141,7 +138,13 @@ const EditInformationModal = (props) => {
       >
           <Modal.Header>{t('edit.information.modal.title')}</Modal.Header>
           <Modal.Content image>
-              {profilePicture}
+              <div id="edit-info-profile-image">
+                  <ProfileImage
+                    profileUsername={usernameInput}
+                    avatarUrl={profilePictureUrlValid ? profilePictureInput : null}
+                    size="120"
+                  />
+              </div>
               <Modal.Description>
                   <Form>
                       <UsernameSelector
@@ -179,8 +182,9 @@ const EditInformationModal = (props) => {
                   </Form>
                   {error === true && (
                     errorMessages
-                      .map((errorMessage) => (
+                      .map((errorMessage, index) => (
                           <Message
+                            key={`edit-info-error-message-${{ index }}`}
                             error
                             header={t('edit.information.modal.form.error.message.header')}
                             content={errorMessage}
@@ -189,6 +193,7 @@ const EditInformationModal = (props) => {
                   )}
                   {usernameError === true && (
                       <Message
+                        key="edit-info-username-error-message"
                         error
                         header={t('edit.information.modal.form.error.message.header')}
                         content={usernameErrorMessage}
@@ -212,11 +217,11 @@ const EditInformationModal = (props) => {
               />
           </Modal.Actions>
       </Modal>
-  ), [
-    error, errorMessages, handleInputChange, handleSubmit, handleUsernameErrorChange, initialUsername, locationInput,
-    onCancel, open, profilePicture, profilePictureInput, t, usernameChecked, usernameError, usernameErrorMessage,
-    usernameInput,
-  ]);
+  ), [error, errorMessages, handleInputChange,
+    handleSubmit, handleUsernameErrorChange,
+    initialUsername, locationInput, onCancel,
+    open, profilePictureInput, profilePictureUrlValid, t,
+    usernameChecked, usernameError, usernameErrorMessage, usernameInput]);
 };
 
 EditInformationModal.defaultProps = {
diff --git a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/style.css b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/style.css
new file mode 100644
index 0000000..dbaa3df
--- /dev/null
+++ b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/style.css
@@ -0,0 +1,4 @@
+#edit-info-profile-image {
+    padding-top: 0.3rem;
+    padding-right: 2rem;
+}