martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-04-22 01:25:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

dismissing listing component

Browse Source
This commit is contained in:
Roland Osborne 2022-08-17 11:18:20 -07:00
parent bdf4df5844
commit 0b7be9bf0c
5 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
net/web/src/context/useViewportContext.hook.js
View File

@ -27,7 +27,9 @@ export function useViewportContext() {
};
useEffect(() => {
setTimeout(handleResize, 1000); //cludge for my mobile browser
for (let i = 0; i < 10; i++) {
setTimeout(handleResize, 100 * i); //cludge for my mobile browser
}
handleResize();
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);

10
net/web/src/session/Session.jsx
View File

@ -94,9 +94,9 @@ console.log(state);
<div class="reframe">
<Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
<Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
onClose={actions.closeListing} getContainer={false} height={'80%'}
onClose={actions.closeListing} getContainer={false} height={'100%'}
style={{ position: 'absolute', overflow: 'hidden' }}>
<Listing openContact={actions.openContact} />
<Listing closeListing={actions.closeListing} openContact={actions.openContact} />
</Drawer>
</div>
)}
@ -133,9 +133,9 @@ console.log(state);
<Cards closeCards={closeCards} openContact={actions.openContact} openListing={actions.openListing} />
)}
<Drawer bodyStyle={{ padding: 0 }} placement="bottom" closable={false} visible={state.listing}
onClose={actions.closeListing} getContainer={false} height={'80%'}
onClose={actions.closeListing} getContainer={false} height={'100%'}
style={{ overflow: 'hidden', position: 'absolute' }}>
<Listing openContact={actions.openContact} />
<Listing closeListing={actions.closeListing} openContact={actions.openContact} />
</Drawer>
<Drawer bodyStyle={{ padding: 0 }} width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
{ state.contact && (
@ -174,7 +174,7 @@ console.log(state);
)}
{ state.listing && (
<div class="reframe">
<Listing openContact={actions.openContact} />
<Listing closeListing={actions.closeListing} openContact={actions.openContact} />
</div>
)}
{ state.contact && (

2
net/web/src/session/cards/Cards.jsx
View File

@ -27,7 +27,7 @@ export function Cards({ closeCards, openContact, openListing }) {
</div>
{ state.display === 'small' && (
<div class="inline">
<div class="add">
<div class="add" onClick={openListing}>
<UserOutlined />
<div class="label">New</div>
</div>

12
net/web/src/session/listing/Listing.jsx
View File

@ -1,10 +1,10 @@
import { Modal, Button, Drawer, Input, List } from 'antd';
import { ListingWrapper } from './Listing.styled';
import { DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
import { DownOutlined, CloseOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
import { useListing } from './useListing.hook';
import { ListingItem } from './listingItem/ListingItem';
export function Listing({ openContact }) {
export function Listing({ closeListing, openContact }) {
const { state, actions } = useListing();
@ -32,6 +32,14 @@ export function Listing({ openContact }) {
<div class="inline">
<Button type="text" icon={<SearchOutlined />} loading={state.busy} onClick={getListing}></Button>
</div>
<div class="inline">
{ state.display !== 'small' && (
<Button type="text" icon={<DownOutlined />} onClick={closeListing}></Button>
)}
{ state.display === 'small' && (
<Button type="text" icon={<CloseOutlined />} onClick={closeListing}></Button>
)}
</div>
</div>
<div class="view">
<List local={{ emptyText: '' }} itemLayout="horizontal" dataSource={state.contacts} gutter="0"

10
net/web/src/session/listing/useListing.hook.js
View File

@ -1,5 +1,6 @@
import { useContext, useState, useEffect } from 'react';
import { ProfileContext } from 'context/ProfileContext';
import { ViewportContext } from 'context/ViewportContext';
import { getListing } from 'api/getListing';
export function useListing() {
@ -9,9 +10,11 @@ export function useListing() {
node: null,
busy: false,
disabled: true,
display: null,
});
const profile = useContext(ProfileContext);
const viewport = useContext(ViewportContext);
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
@ -25,16 +28,13 @@ export function useListing() {
updateState({ busy: true });
try {
let contacts = await getListing(state.node);
console.log(contacts);
let filtered = contacts.filter(contact => (contact.guid !== profile.state.profile.guid));
console.log(filtered);
let sorted = filtered.sort((a, b) => {
if (a?.name < b?.name) {
return -1;
}
return 1;
});
console.log(sorted);
updateState({ busy: false, contacts: sorted });
}
catch (err) {
@ -50,5 +50,9 @@ console.log(sorted);
updateState({ disabled: node == null || node == '', node });
}, [profile]);
useEffect(() => {
updateState({ display: viewport.state.display });
}, [viewport]);
return { state, actions };
}