martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

preparing session layout

Browse Source
This commit is contained in:
Roland Osborne 2022-08-05 15:06:53 -07:00
parent bdd7ecee5a
commit e20c6cf6fb
11 changed files with 208 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,22 @@
import { useEffect, useContext } from 'react';
import { Drawer } from 'antd';
import { useNavigate } from 'react-router-dom';
import { SessionWrapper } from './Session.styled';
import { Button } from 'antd';
import { AppContext } from 'context/AppContext';
import { ViewportContext } from 'context/ViewportContext';
import { useSession } from './useSession.hook';
import { Conversation } from './conversation/Conversation';
import { Details } from './details/Details';
import { Identity } from './identity/Identity';
import { Channels } from './channels/Channels';
import { Cards } from './cards/Cards';
import { Contact } from './contact/Contact';
import { Profile } from './profile/Profile';
import { Welcome } from './welcome/Welcome';
export function Session() {
const { state, actions } = useSession();
const app = useContext(AppContext);
const viewport = useContext(ViewportContext);
const navigate = useNavigate();
@ -23,17 +33,108 @@ export function Session() {
<SessionWrapper>
{ (viewport.state.display === 'xlarge') && (
<div class="desktop-layout">
<Button type="primary" onClick={app.actions.logout}>Logout</Button>
<div class="left">
<Identity />
<Channels />
</div>
<div class="center">
{ state.conversation && (
<div class="reframe">
<Conversation cardId={state.cardId} conversationId={state.conversationId} />
</div>
)}
{ state.contact && (
<div class="reframe">
<Contact guid={state.contactGuid} />
</div>
)}
{ state.profile && (
<div class="reframe">
<Profile />
</div>
)}
</div>
<div class="right">
<Welcome />
{ state.conversation && (
<div class="reframe">
<Details cardId={state.cardId} conversationId={state.conversationId} />
</div>
)}
{ state.cards && (
<div class="reframe">
<Cards />
</div>
)}
</div>
</div>
)}
{ (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
<div class="tablet-layout">
<Button type="primary" onClick={app.actions.logout}>Logout</Button>
<div class="left">
<Identity />
<Channels />
</div>
<div class="right">
<Welcome />
{ state.conversation && (
<div class="reframe">
<Conversation cardId={state.cardId} conversationId={state.conversationId} />
</div>
)}
<Drawer width={'33%'} closable={false} onClose={actions.closeDetails} visible={state.details} zIndex={10}>
{ state.details && (
<Details cardId={state.cardId} conversationId={state.conversationId} />
)}
</Drawer>
<Drawer width={'33%'} closable={false} onClose={actions.closeCards} visible={state.cards} zIndex={20}>
{ state.cards && (
<Cards />
)}
<Drawer width={'33%'} closable={false} onClose={actions.closeContact} visible={state.contact} zIndex={30}>
{ state.contact && (
<Contact guid={state.contactGuid} />
)}
</Drawer>
</Drawer>
<Drawer width={'33%'} closable={false} onClose={actions.closeProfile} visible={state.profile} zIndex={40}>
{ state.profile && (
<Profile />
)}
</Drawer>
</div>
</div>
)}
{ (viewport.state.display === 'small') && (
<div class="mobile-layout">
<Button type="primary" onClick={app.actions.logout}>Logout</Button>
<div class="center">
<Channels />
{ state.conversation && (
<div class="reframe">
<Conversation cardId={state.cardId} conversationId={state.conversationId} />
</div>
)}
{ state.details && (
<div class="reframe">
<Details cardId={state.cardId} conversation={state.conversationId} />
</div>
)}
{ state.cards && (
<div class="reframe">
<Cards />
</div>
)}
{ state.contact && (
<div class="reframe">
<Contact guid={state.contactGuid} />
</div>
)}
{ state.profile && (
<div class="reframe">
<Profile />
</div>
)}
</div>
</div>
)}
</SessionWrapper>

18
net/web/src/session/Session.styled.js
View File

@ -4,12 +4,30 @@ export const SessionWrapper = styled.div`
height: 100%;
width: 100%;
.reframe {
position: absolute;
width: 100%;
height: 100%;
}
.desktop-layout {
.left {
}
.center {
}
.right {
}
}
.tablet-layout {
.left {
}
.right {
}
}
.mobile-layout {
.center {
}
}
`;

4
net/web/src/session/cards/Cards.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Cards() {
return <div>CARDS</div>
}

4
net/web/src/session/channels/Channels.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Channels() {
return <></>
}

4
net/web/src/session/contact/Contact.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Contact() {
return <div>CONTACT</div>
}

4
net/web/src/session/conversation/Conversation.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Conversation() {
return <></>
}

4
net/web/src/session/details/Details.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Details() {
return <></>
}

11
net/web/src/session/identity/Identity.jsx Normal file
View File

@ -0,0 +1,11 @@
import { useContext } from 'react';
import { AppContext } from 'context/AppContext';
import { Button } from 'antd';
export function Identity() {
const app = useContext(AppContext);
return <Button type="primary" onClick={() => app.actions.logout()}>Logout</Button>
}

4
net/web/src/session/profile/Profile.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Profile() {
return <></>
}

46
net/web/src/session/useSession.hook.js Normal file
View File

@ -0,0 +1,46 @@
import { useState, useEffect } from 'react';
export function useSession() {
const [state, setState] = useState({
conversation: false,
details: false,
cards: false,
contact: false,
profile: false,
});
const updateState = (value) => {
setState((s) => ({ ...s, ...value }));
}
useEffect(() => {
setTimeout(() => {
updateState({ cards: true });
}, 1000);
setTimeout(() => {
updateState({ contact: true });
}, 2000);
}, []);
const actions = {
closeDetails: () => {
updateState({ details: false });
},
closeCards: () => {
updateState({ cards: false });
},
closeContact: () => {
updateState({ contact: false });
},
closeProfile: () => {
updateState({ profile: false });
},
closeConversation: () => {
updateState({ conversation: false });
},
};
return { state, actions };
}

4
net/web/src/session/welcome/Welcome.jsx Normal file
View File

@ -0,0 +1,4 @@
export function Welcome() {
return <></>;
}