rendering public profile

net/web/src/Create/Create.jsx

@@ -24,7 +24,7 @@ export function Create() {
           <span>Create Account</span>
         </CreateEnter>
       </div>
-      <CreateLogin type="link" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
+      <CreateLogin type="text" onClick={() => actions.onLogin()}>Account Sign In</CreateLogin>
       <CreateSpin size="large" spinning={state.spinning} />
     </CreateWrapper>
   )

net/web/src/Login/Login.jsx

@@ -28,7 +28,7 @@ export function Login(props) {
           <span>Sign In</span>
         </LoginEnter>
       </div>
-      <LoginCreate type="link" onClick={() => actions.onCreate()} disabled={!state.available}>
+      <LoginCreate type="text" onClick={() => actions.onCreate()} disabled={!state.available}>
         <span>Create Account</span>
       </LoginCreate>
       <LoginSpin size="large" spinning={state.spinning} />

net/web/src/User/Profile/Profile.jsx

@@ -1,16 +1,63 @@
 import React from 'react'
-import { ProfileWrapper } from './Profile.styled';
+import { ProfileWrapper, CloseButton } from './Profile.styled';
-import { CloseOutlined } from '@ant-design/icons';
+import { UserOutlined, CloseOutlined, EditOutlined } from '@ant-design/icons';
 import { useProfile } from './useProfile.hook';
+import { Button } from 'antd'
 
 export function Profile(props) {
 
   const { state, actions } = useProfile();
 
+  const Logo = () => {
+    if (state.imageUrl != null) {
+      if (state.imageUrl === '') {
+        return <div class="logo"><UserOutlined /></div>
+      }
+      return <img class="logo" src={ state.imageUrl } alt="" />
+    }
+    return <></>
+  }
+
+  const Name = () => {
+    if (state.name == '' || state.name == null) {
+      return <span class="unset">Name</span>
+    }
+    return <span>{ state.name }</span>
+  }
+
+  const Location = () => {
+    if (state.location == '' || state.location == null) {
+      return <span class="unset">Location</span>
+    }
+    return <span>{ state.location }</span>
+  }
+
+  const Description = () => {
+    if (state.description == '' || state.description == null) {
+      return <span class="unset">Description</span>
+    }
+    return <span>{ state.description }</span>
+  }
+
   return (
     <ProfileWrapper>
-      <div class="close" onClick={() => actions.close()}>
+      <div class="header">
-        <CloseOutlined />
+        <div class="title">{ state.handle }</div>
+        <CloseButton type="text" class="close" size={'large'} onClick={() => actions.close()} icon={<CloseOutlined />} />
+      </div>
+      <div class="profile">
+        <div class="avatar">
+          <Logo />
+        </div>
+        <div class="logoedit">
+          <EditOutlined />
+        </div>
+        <div class="details">
+          <div class="name"><Name /></div>
+          <div class="location"><Location /></div>
+          <div class="description"><Description /></div>
+          <Button type="text" icon={<EditOutlined />} />
+        </div>
       </div>
     </ProfileWrapper>
   )

net/web/src/User/Profile/Profile.styled.js

@@ -6,16 +6,97 @@ export const ProfileWrapper = styled.div`
   width: 100%;
   height: 100%;
   background-color: #f6f5ed;
-  border-radius: 8px;
+  border-radius: 2px;
+  flex-direction: column;
+  padding: 16px;
+  align-items: center;
+
+  .header {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    padding-bottom: 3em;
+  }
+
+  .title {
+    flex-grow: 1;
+    text-align: center;
+    font-size: 2em;
+    font-weight: bold;
+  }
 
   .close {
-    position: absolute;
+    font-size: 24px;
-    right: 0px;
+    color: #aaaaaa;
-    padding-right: 16px;
+  }
-    padding-top: 8px;
+
-    font-size: 1.5em;
+  .profile {
-    color: #888;
+    display: flex;
+    flex-direction: row;
+    padding: 1em;
+    width: 66%;
+  }
+
+  .logo {
+    width: 100%;
+    height: 100%;
+    width: 200px;
+    height: 200px;
+    border: 1px solid #dddddd;
+    border-radius: 8px;
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+  }
+
+  .avatar {
+    color: #888888;
+    font-size: 8em;
+    justify-content: center;
+  }
+
+  .logoedit {
+    align-self: flex-end;
+    font-size: 16px;
+    position: relative;
+    left: -24px;
     cursor: pointer;
   }
+
+  .detailedit {
+    font-size: 16px;
+  }
+
+  .unset {
+    font-style: italic;
+    color: #dddddd;
+  }
+
+  .details {
+    padding-left: 2em;
+    margin-left: 2em;
+    border-left: 0.5px solid #aaaaaa;
+  }
+
+  .name {
+    font-size: 1.5em;
+    padding-left: 8px;
+  }
+
+  .location {
+    font-size: 1.2em;
+    padding-left: 8px;
+  }
+
+  .description {
+    font-size: 1em;
+    padding-left: 8px;
+  }
 `;
- 
+
+export const CloseButton = styled(Button)`
+  font-size: 24px;
+  color: #aaaaaa;
+`;
+

net/web/src/User/Profile/useProfile.hook.js

@@ -4,11 +4,21 @@ import { useNavigate } from "react-router-dom";
 
 export function useProfile() {
   
-  const [state, setState] = useState({});
+  const [state, setState] = useState({
+    name: '',
+    handle: '',
+    description: '',
+    location: '',
+    imageUrl: null
+  });
 
   const navigate = useNavigate();
   const app = useContext(AppContext);
 
+  const updateState = (value) => {
+    setState((s) => ({ ...s, ...value }));
+  }
+
   const actions = {
     close: () => {
       navigate('/user')
@@ -16,6 +26,18 @@ export function useProfile() {
   };
 
   useEffect(() => {
+    if (app?.state?.Data?.profile) {
+      let profile = app.state.Data.profile;
+      if (profile.image != null) {
+        updateState({ imageUrl: app.actions.profileImageUrl() })
+      } else {
+        updateState({ imageUrl: '' })
+      }
+      updateState({ name: profile.name });
+      updateState({ handle: profile.handle });
+      updateState({ description: profile.description });
+      updateState({ location: profile.location });
+    }
   }, [app])
 
   return { state, actions };

net/web/src/User/SideBar/Identity/Identity.jsx

@@ -1,6 +1,6 @@
 import { Avatar, Image } from 'antd';
 import React from 'react'
-import { IdentityWrapper } from './Identity.styled';
+import { IdentityWrapper, MenuWrapper } from './Identity.styled';
 import { RightOutlined, EditOutlined, UserOutlined } from '@ant-design/icons';
 import { useIdentity } from './useIdentity.hook';
 import { Menu, Dropdown } from 'antd';
@@ -20,17 +20,14 @@ export function Identity() {
   }
 
   const menu = (
-    <Menu>
+    <MenuWrapper>
       <Menu.Item key="0">
         <div onClick={() => actions.editProfile()}>Edit Profile</div>
       </Menu.Item>
-      <Menu.Item key="1">
-        <div onClick={() => actions.editLabels()}>Manage Labels</div>
-      </Menu.Item>
       <Menu.Item key="2">
         <div onClick={() => actions.logout()}>Sign Out</div>
       </Menu.Item>
-    </Menu>
+    </MenuWrapper>
   );
 
   return (

net/web/src/User/SideBar/Identity/Identity.styled.js

@@ -1,4 +1,4 @@
-import { Button } from 'antd';
+import { Menu, Button } from 'antd';
 import styled from 'styled-components';
 
 export const IdentityWrapper = styled.div`
@@ -57,5 +57,9 @@ export const IdentityWrapper = styled.div`
     color: #444444;
     font-weight: bold;
   }
-
 `;
+
+export const MenuWrapper = styled(Menu)`
+  border-radius: 4px;
+`;
+