adding profile detail edit modal

net/web/src/session/profile/Profile.jsx

@@ -1,8 +1,9 @@
 import { useRef } from 'react';
 import { Modal, Button, Checkbox } from 'antd';
-import { ProfileWrapper, EditImageFooter } from './Profile.styled';
+import { ProfileWrapper, EditFooter } from './Profile.styled';
 import { useProfile } from './useProfile.hook';
 import { ProfileImage } from './profileImage/ProfileImage';
+import { ProfileDetails } from './profileDetails/ProfileDetails';
 import { Logo } from 'logo/Logo';
 import { LogoutOutlined, DatabaseOutlined, LockOutlined, RightOutlined, EditOutlined, BookOutlined, EnvironmentOutlined } from '@ant-design/icons';
 
@@ -33,6 +34,20 @@ export function Profile({ closeProfile }) {
     }
   }
 
+  const saveDetails = async () => {
+    try {
+      await actions.setProfileDetails();
+      actions.clearEditProfileDetails();
+    }
+    catch(err) {
+      console.log(err);
+      Modal.error({
+        title: 'Failed to Save',
+        content: 'Please try again.',
+      });
+    }
+  }
+
   const saveSearchable = async (e) => {
     try {
       await actions.setSearchable(e.target.checked);
@@ -59,7 +74,7 @@ export function Profile({ closeProfile }) {
 
   const Image = (
     <div class="logo" onClick={actions.setEditProfileImage}>
-      <Logo url={state.url} width={'100%'} radius={8} />
+      <Logo url={state.url} width={'100%'} radius={4} />
       <div class="edit">
         <EditOutlined />
       </div>
@@ -68,16 +83,12 @@ export function Profile({ closeProfile }) {
 
   const Details = (
     <div class="details">
-      <div class="name">
+      <div class="name" onClick={actions.setEditProfileDetails}>
         <div class="data">{ state.name }</div>
+        <div class="icon">
           <EditOutlined />
         </div>
-      { state.node && (
-        <div class="location">
-          <DatabaseOutlined />
-          <div class="data">{ state.node }</div>
       </div>
-      )}
       <div class="location">
         <EnvironmentOutlined />
         <div class="data">{ state.location }</div>
@@ -90,14 +101,22 @@ export function Profile({ closeProfile }) {
   );
 
   const editImageFooter = (
-    <EditImageFooter>
+    <EditFooter>
       <input type='file' id='file' accept="image/*" ref={imageFile} onChange={e => selected(e)} style={{display: 'none'}}/>
       <div class="select">
         <Button key="select" class="select" onClick={() => imageFile.current.click()}>Select Image</Button>
       </div>
       <Button key="back" onClick={actions.clearEditProfileImage}>Cancel</Button>
-      <Button key="save" type="primary" onClick={saveImage}>Save</Button>
+      <Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button>
-    </EditImageFooter>
+    </EditFooter>
+  );
+
+  const editDetailsFooter = (
+    <EditFooter>
+      <div class="select"></div>
+      <Button key="back" onClick={actions.clearEditProfileDetails}>Cancel</Button>
+      <Button key="save" type="primary" onClick={saveDetails} loading={state.busy}>Save</Button>
+    </EditFooter>
   );
 
   return (
@@ -145,6 +164,10 @@ export function Profile({ closeProfile }) {
           onCancel={actions.clearEditProfileImage}>
         <ProfileImage state={state} actions={actions} />
       </Modal>
+      <Modal title="Profile Details" centered visible={state.editProfileDetails} footer={editDetailsFooter}
+          onCancel={actions.clearEditProfileDetails}>
+        <ProfileDetails state={state} actions={actions} />
+      </Modal>
     </ProfileWrapper>
   );
 }

net/web/src/session/profile/Profile.styled.js

@@ -57,7 +57,8 @@ export const ProfileWrapper = styled.div`
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 8px;
+        border-top-left-radius: 4px;
+        border-bottom-right-radius: 4px;
         width: 24px;
         height: 24px;
         bottom: 0;
@@ -76,9 +77,22 @@ export const ProfileWrapper = styled.div`
         display: flex;
         flex-direction: row;
         align-items: center;
+        cursor: pointer;
+
+        &:hover .icon {
+          border: 1px solid ${Colors.grey};
+          background-color: ${Colors.white};
+        }  
+ 
+        .icon {
+          padding-left: 4px;
+          padding-right: 4px;
+          border: 1px solid ${Colors.profileForm};
+          border-raidus: 4px;
+        }
 
         .data {
-          padding-right: 8px;
+          padding-right: 4px;
           font-size: 24px;
           font-weight: bold;
         }
@@ -136,7 +150,8 @@ export const ProfileWrapper = styled.div`
         display: flex;
         align-items: center;
         justify-content: center;
-        border-radius: 8px;
+        border-top-left-radius: 4px;
+        border-bottom-right-radius: 4px;
         width: 24px;
         height: 24px;
         bottom: 0;
@@ -156,9 +171,22 @@ export const ProfileWrapper = styled.div`
         display: flex;
         flex-direction: row;
         align-items: center;
+        cursor: pointer;
+ 
+        &:hover .icon {
+          border: 1px solid ${Colors.grey};
+          background-color: ${Colors.white};
+        }
+
+        .icon {
+          padding-left: 4px;
+          padding-right: 4px;
+          border: 1px solid ${Colors.profileForm};
+          border-radius: 4px;
+        }  
  
         .data {
-          padding-right: 8px;
+          padding-right: 4px;
           font-size: 24px;
           font-weight: bold;
         }
@@ -237,7 +265,7 @@ export const ProfileWrapper = styled.div`
     }
   }
 `
-export const EditImageFooter = styled.div`
+export const EditFooter = styled.div`
   width: 100%;
   display: flex;
 

net/web/src/session/profile/profileDetails/ProfileDetails.jsx

@@ -0,0 +1,22 @@
+import { Input } from 'antd';
+import { ProfileDetailsWrapper } from './ProfileDetails.styled';
+
+export function ProfileDetails({ state, actions }) {
+  return (
+    <ProfileDetailsWrapper>
+      <div class="info">
+        <Input placeholder="Name" spellCheck="false" onChange={(e) => actions.setEditName(e.target.value)}
+            defaultValue={state.name} autocapitalizate="word" />
+      </div>
+      <div class="info">
+        <Input placeholder="Location" spellCheck="false" onChange={(e) => actions.setEditLocation(e.target.value)}
+            defaultValue={state.location} autocapitalizate="word" />
+      </div>
+      <div class="info">
+        <Input.TextArea placeholder="Description" onChange={(e) => actions.setEditDescription(e.target.value)}
+            spellCheck="false" defaultValue={state.description} autoSize={{ minRows: 2, maxRows: 6 }} />
+      </div>
+    </ProfileDetailsWrapper>
+  );
+}
+

net/web/src/session/profile/profileDetails/ProfileDetails.styled.js

@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+
+export const ProfileDetailsWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  .info {
+    width: 100%;
+    padding: 8px;
+  }
+`;
+

net/web/src/session/profile/useProfile.hook.js

@@ -10,7 +10,13 @@ export function useProfile() {
   const [state, setState] = useState({
     init: false,
     editProfileImage: false,
+    name: null,
+    location: null,
+    description: null,
     editImage: null,
+    editName: null,
+    editLocation: null,
+    editDescription: null,
     crop: { w: 0, h: 0, x: 0, y: 0 },
     busy: false,
     searchable: null,
@@ -56,9 +62,24 @@ export function useProfile() {
     clearEditProfileImage: () => {
       updateState({ editProfileImage: false });
     },
+    setEditProfileDetails: () => {
+      updateState({ editProfileDetails: true });
+    },
+    clearEditProfileDetails: () => {
+      updateState({ editProfileDetails: false });
+    },
     setEditImageCrop: (w, h, x, y) => {
       updateState({ crop: { w, h, x, y }});
     },
+    setEditName: (editName) => {
+      updateState({ editName });
+    },
+    setEditLocation: (editLocation) => {
+      updateState({ editLocation });
+    },
+    setEditDescription: (editDescription) => {
+      updateState({ editDescription });
+    },
     setProfileImage: async () => {
       if(!state.busy) {
         updateState({ busy: true });
@@ -95,6 +116,23 @@ export function useProfile() {
         throw new Error('save in progress');
       }
     },
+    setProfileDetails: async () => {
+      if(!state.busy) {
+        try {
+          updateState({ busy: true });
+          await profile.actions.setProfileData(state.editName, state.editLocation, state.editDescription);
+          updateState({ busy: false });
+        }
+        catch(err) {
+          console.log(err);
+          updateState({ busy: false });
+          throw new Error('failed to save profile details');
+        }
+      }
+      else {
+        throw new Error('save in progress');
+      }
+    },
     setSearchable: async (flag) => {
       if (!state.busy) {
         try {