adding profile detail edit modal

2025-02-14 12:39:17 +00:00 · 2022-08-17 22:54:37 -07:00 · 2022-08-17 22:54:37 -07:00 · 4b6b981d3d
commit 4b6b981d3d
parent 9d048e5e5d
5 changed files with 145 additions and 20 deletions
--- a/net/web/src/session/profile/Profile.jsx
+++ b/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>
-        <EditOutlined />
-      </div>
-      { state.node && (
-        <div class="location">
-          <DatabaseOutlined />
-          <div class="data">{ state.node }</div>
+        <div class="icon">
+          <EditOutlined />
        </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>
-    </EditImageFooter>
+      <Button key="save" type="primary" onClick={saveImage} loading={state.busy}>Save</Button>
+    </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>
  );
 }
--- a/net/web/src/session/profile/Profile.styled.js
+++ b/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;

--- a/net/web/src/session/profile/profileDetails/ProfileDetails.jsx
+++ b/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>
+  );
+}
+
--- a/net/web/src/session/profile/profileDetails/ProfileDetails.styled.js
+++ b/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;
+  }
+`;
+
--- a/net/web/src/session/profile/useProfile.hook.js
+++ b/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 {