From 18ce5f311b491758fe04a3247a2ca0878cd4cee0 Mon Sep 17 00:00:00 2001 From: Roland Osborne Date: Tue, 29 Mar 2022 12:23:07 -0700 Subject: [PATCH] added route for contact screen --- net/web/src/App.js | 8 +-- net/web/src/User/Contact/Contact.jsx | 21 ++++++++ net/web/src/User/Contact/Contact.styled.js | 52 +++++++++++++++++++ net/web/src/User/Contact/useContact.hook.js | 31 +++++++++++ .../src/User/SideBar/Contacts/Cards/Cards.jsx | 3 +- .../Contacts/Cards/Registry/Registry.jsx | 13 +++-- .../Cards/Registry/Registry.styled.js | 17 ++++-- .../Cards/Registry/useRegistry.hook.js | 5 +- .../src/User/SideBar/Contacts/Contacts.jsx | 4 +- 9 files changed, 139 insertions(+), 15 deletions(-) create mode 100644 net/web/src/User/Contact/Contact.jsx create mode 100644 net/web/src/User/Contact/Contact.styled.js create mode 100644 net/web/src/User/Contact/useContact.hook.js diff --git a/net/web/src/App.js b/net/web/src/App.js index d1bcfea3..24c6d6f1 100644 --- a/net/web/src/App.js +++ b/net/web/src/App.js @@ -5,6 +5,7 @@ import { Login } from './Login/Login'; import { Create } from './Create/Create'; import { User } from './User/User'; import { Profile } from './User/Profile/Profile'; +import { Contact } from './User/Contact/Contact'; import { HashRouter as Router, Routes, Route } from "react-router-dom"; import 'antd/dist/antd.min.css'; @@ -19,10 +20,11 @@ function App() { } /> - } /> - } /> - }> + } /> + } /> + }> } /> + } /> diff --git a/net/web/src/User/Contact/Contact.jsx b/net/web/src/User/Contact/Contact.jsx new file mode 100644 index 00000000..0e96a2e6 --- /dev/null +++ b/net/web/src/User/Contact/Contact.jsx @@ -0,0 +1,21 @@ +import React, { useState, useEffect, useRef } from 'react' +import { CloseOutlined } from '@ant-design/icons'; +import { useContact } from './useContact.hook'; +import { Button, Checkbox, Modal } from 'antd' +import { ContactWrapper, CloseButton } from './Contact.styled'; + +export function Contact({ match }) { + + const { state, actions } = useContact(); + + return ( + +
+
{ state.handle }
+ actions.close()} icon={} /> +
+
+ + ) +} + diff --git a/net/web/src/User/Contact/Contact.styled.js b/net/web/src/User/Contact/Contact.styled.js new file mode 100644 index 00000000..11aef2cb --- /dev/null +++ b/net/web/src/User/Contact/Contact.styled.js @@ -0,0 +1,52 @@ +import styled from 'styled-components'; +import { Button } from 'antd'; + +export const ContactWrapper = styled.div` + display: flex; + width: 100%; + height: 100%; + background-color: #f6f5ed; + flex-direction: column; + align-items: center; + overflow: hidden; + + .header { + display: flex; + width: 100%; + flex-direction: row; + align-items: center; + background-color: #dddddd; + height: 64px; + padding-right: 16px; + padding-left: 16px; + } + + .title { + height: 64px; + flex-grow: 1; + text-align: center; + font-size: 2em; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + } + + .close { + font-size: 24px; + color: #aaaaaa; + } + + .container { + display: flex; + flex-direction: row; + padding: 32px; + width: 100%; + overflow: auto; + } +`; + +export const CloseButton = styled(Button)` + font-size: 24px; + color: #aaaaaa; +`; diff --git a/net/web/src/User/Contact/useContact.hook.js b/net/web/src/User/Contact/useContact.hook.js new file mode 100644 index 00000000..2377c2f7 --- /dev/null +++ b/net/web/src/User/Contact/useContact.hook.js @@ -0,0 +1,31 @@ +import { useContext, useState, useEffect } from 'react'; +import { AppContext } from '../../AppContext/AppContext'; +import { useNavigate, useLocation, useParams } from "react-router-dom"; + +export function useContact() { + + const [state, setState] = useState({}); + + const data = useLocation(); + const { guid } = useParams(); + const navigate = useNavigate(); + const app = useContext(AppContext); + + console.log(data.state); + console.log(guid); + + const updateState = (value) => { + setState((s) => ({ ...s, ...value })); + } + + const actions = { + close: () => { + navigate('/user') + }, + }; + + useEffect(() => { + }, [app]) + + return { state, actions }; +} diff --git a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx index cf7f118a..c654c1a6 100644 --- a/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx +++ b/net/web/src/User/SideBar/Contacts/Cards/Cards.jsx @@ -6,7 +6,6 @@ import { Registry } from './Registry/Registry'; export function Cards({ showRegistry }) { useEffect(() => { - console.log("HERE", showRegistry); }, [showRegistry]); return ( @@ -18,7 +17,7 @@ export function Cards({ showRegistry }) { visible={showRegistry} getContainer={false} contentWrapperStyle={{ width: '100%' }} - bodyStyle={{ backgroundColor: '#f6f5ed', padding: 16 }} + bodyStyle={{ backgroundColor: '#f6f5ed', paddingLeft: 16, paddingRight: 16, paddingTop: 16, paddingBottom: 0 }} style={{ position: 'absolute' }} > diff --git a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.jsx b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.jsx index 0e6e60fe..9f62a4d5 100644 --- a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.jsx +++ b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { RegistryWrapper } from './Registry.styled'; +import { RegistryWrapper, RegistryItem } from './Registry.styled'; import { useRegistry } from './useRegistry.hook'; import { Button, Input, List } from 'antd'; import { Logo } from '../../../../../Logo/Logo'; @@ -9,6 +9,10 @@ export function Registry() { const { state, actions } = useRegistry(); + const onSelect = (item) => { + actions.select(item); + }; + return ( actions.setServer(e.target.Value)} @@ -18,19 +22,20 @@ export function Registry() { locale={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.profiles} + gutter="0" renderItem={item => ( - + onSelect(item)}>
- { item.name } { item.handle } + { item.name }
- + )} /> diff --git a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js index f993767a..c311976f 100644 --- a/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js +++ b/net/web/src/User/SideBar/Contacts/Cards/Registry/Registry.styled.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import { List } from 'antd'; export const RegistryWrapper = styled.div` position: relative; @@ -15,14 +16,13 @@ export const RegistryWrapper = styled.div` background-color: #fefefe; border-radius-bottom-right: 8px; border-radius-bottom-left: 8px; - height: calc(100vh - 174px); + height: calc(100vh - 175px); overflow: auto; } .item { width: 100%; display: flex; - padding-left: 16px; flex-direction: row; align-items: center; } @@ -36,7 +36,7 @@ export const RegistryWrapper = styled.div` display: flex; flex-direction: column; padding-left: 16px; - text-align: left; + text-align: right; flex-grow: 1; } @@ -51,3 +51,14 @@ export const RegistryWrapper = styled.div` `; +export const RegistryItem = styled(List.Item)` + padding-left: 16px; + padding-right: 16px; + padding-top: 4px; + padding-bottom: 4px; + cursor: pointer; + &:hover { + background-color: #eeeeee; + } +`; + diff --git a/net/web/src/User/SideBar/Contacts/Cards/Registry/useRegistry.hook.js b/net/web/src/User/SideBar/Contacts/Cards/Registry/useRegistry.hook.js index 02ab6e00..2e75867d 100644 --- a/net/web/src/User/SideBar/Contacts/Cards/Registry/useRegistry.hook.js +++ b/net/web/src/User/SideBar/Contacts/Cards/Registry/useRegistry.hook.js @@ -10,6 +10,7 @@ export function useRegistry() { profiles: [], }); + const navigate = useNavigate(); const app = useContext(AppContext); const updateState = (value) => { @@ -33,7 +34,6 @@ export function useRegistry() { try { let profiles = await app.actions.getRegistry(state.server) updateState({ profiles: profiles }); -console.log(profiles); } catch (err) { window.alert(err) @@ -42,6 +42,9 @@ console.log(profiles); } }, getRegistryImageUrl: (guid, revision) => app.actions.getRegistryImageUrl(state.server, guid, revision), + select: (contact) => { + navigate(`/user/contact/${contact.guid}`, { state: contact }); + } } return { state, actions }; diff --git a/net/web/src/User/SideBar/Contacts/Contacts.jsx b/net/web/src/User/SideBar/Contacts/Contacts.jsx index 5f422d87..e2f1b913 100644 --- a/net/web/src/User/SideBar/Contacts/Contacts.jsx +++ b/net/web/src/User/SideBar/Contacts/Contacts.jsx @@ -5,7 +5,7 @@ import { useContacts } from './useContacts.hook'; import { Tabs, Button, Tooltip } from 'antd'; import { Cards } from './Cards/Cards'; import { Channels } from './Channels/Channels'; -import { UserAddOutlined, CommentOutlined } from '@ant-design/icons'; +import { TeamOutlined, CommentOutlined } from '@ant-design/icons'; const { TabPane } = Tabs; @@ -23,7 +23,7 @@ export function Contacts() { const addUser = ( - onShowRegistry()} icon={} /> + onShowRegistry()} icon={} /> )