diff --git a/net/web/src/admin/Admin.jsx b/net/web/src/admin/Admin.jsx
index f9cf6a89..d940e001 100644
--- a/net/web/src/admin/Admin.jsx
+++ b/net/web/src/admin/Admin.jsx
@@ -1,5 +1,20 @@
+import { UserOutlined } from '@ant-design/icons';
+import { AdminWrapper } from './Admin.styled';
+import { useAdmin } from './useAdmin.hook';
export function Admin() {
- return <>
+
+ const { state, actions } = useAdmin();
+
+ return (
+
+
+
Databag
+
actions.onUser()}>
+
+
+
+ );
}
diff --git a/net/web/src/admin/Admin.styled.js b/net/web/src/admin/Admin.styled.js
new file mode 100644
index 00000000..71613309
--- /dev/null
+++ b/net/web/src/admin/Admin.styled.js
@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import Colors from 'constants/Colors';
+
+export const AdminWrapper = styled.div`
+ max-width: 400px;
+ width: 90%;
+ height: 90%;
+ display: flex;
+ flex-direction: column;
+
+ .app-title {
+ font-size: 24px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex: 1;
+ color: ${Colors.grey};
+
+ .user {
+ color: ${Colors.grey};
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ font-size: 20px;
+ cursor: pointer;
+ margin: 16px;
+ }
+ }
+`;
+
+
diff --git a/net/web/src/admin/useAdmin.hook.js b/net/web/src/admin/useAdmin.hook.js
new file mode 100644
index 00000000..65939be9
--- /dev/null
+++ b/net/web/src/admin/useAdmin.hook.js
@@ -0,0 +1,25 @@
+import { useContext, useState } from 'react';
+import { AppContext } from 'context/AppContext';
+import { useNavigate } from "react-router-dom";
+
+export function useAdmin() {
+
+ const [state, setState] = useState({
+ });
+
+ const navigate = useNavigate();
+ const app = useContext(AppContext);
+
+ const updateState = (value) => {
+ setState((s) => ({ ...s, ...value }));
+ }
+
+ const actions = {
+ onUser: () => {
+ navigate('/login');
+ },
+ };
+
+ return { state, actions };
+}
+
diff --git a/net/web/src/context/useConversationContext.hook.js b/net/web/src/context/useConversationContext.hook.js
index a4270318..3a0a8f43 100644
--- a/net/web/src/context/useConversationContext.hook.js
+++ b/net/web/src/context/useConversationContext.hook.js
@@ -89,7 +89,7 @@ export function useConversationContext() {
members.add(conversation.guid);
}
for (let member of conversation.data.channelDetail.members) {
- if (profile.state.profile.guid != member) {
+ if (profile.state.profile.guid !== member) {
members.add(member);
}
}
@@ -132,7 +132,7 @@ export function useConversationContext() {
const setTopicDelta = async (delta, curView) => {
for (let topic of delta) {
if (topic.data == null) {
- if (curView == view.current) {
+ if (curView === view.current) {
topics.current.delete(topic.id);
}
}
@@ -141,7 +141,7 @@ export function useConversationContext() {
if (cur == null) {
cur = { id: topic.id, data: {} };
}
- if (topic.data.detailRevision != cur.data.detailRevision) {
+ if (topic.data.detailRevision !== cur.data.detailRevision) {
if(topic.data.topicDetail) {
cur.data.topicDetail = topic.data.topicDetail;
cur.data.detailRevision = topic.data.detailRevision;
@@ -153,7 +153,7 @@ export function useConversationContext() {
}
}
cur.revision = topic.revision;
- if (curView == view.current) {
+ if (curView === view.current) {
topics.current.set(topic.id, cur);
}
}
@@ -163,7 +163,7 @@ export function useConversationContext() {
const setTopics = async (ev) => {
const curView = view.current;
try {
- if (ev.type == EVENT_OPEN) {
+ if (ev.type === EVENT_OPEN) {
const { cardId, channelId } = ev.data;
channelView.current.cardId = cardId;
channelView.current.channelId = channelId;
@@ -175,7 +175,7 @@ export function useConversationContext() {
channelView.current.revision = delta.revision;
channelView.current.begin = delta.marker;
}
- else if (ev.type == EVENT_MORE) {
+ else if (ev.type === EVENT_MORE) {
if (channelView.current.init) {
channelView.current.batch += 1;
let delta = await getTopicDelta(null, channelView.current.batch * TOPIC_BATCH, null, channelView.current.begin);
@@ -183,16 +183,16 @@ export function useConversationContext() {
channelView.current.begin = delta.marker;
}
}
- else if (ev.type == EVENT_UPDATE || ev.type == EVENT_RESYNC) {
+ else if (ev.type === EVENT_UPDATE || ev.type === EVENT_RESYNC) {
let deltaRevision = getChannelRevision();
- if (channelView.current.init && deltaRevision != channelView.current.revision) {
+ if (channelView.current.init && deltaRevision !== channelView.current.revision) {
let delta = await getTopicDelta(channelView.current.revision, null, channelView.current.begin, null);
await setTopicDelta(delta.topics, curView);
channelView.current.revision = delta.revision;
}
}
- if (curView == view.current) {
+ if (curView === view.current) {
let chan = getChannel();
let subject = getSubject(chan);
let contacts = getContacts(chan);
@@ -211,7 +211,7 @@ export function useConversationContext() {
catch (err) {
console.log(err);
updateState({ error: true });
- if (ev.type == EVENT_RESYNC) {
+ if (ev.type === EVENT_RESYNC) {
window.alert("failed to syncrhonize conversation");
}
}
@@ -222,14 +222,14 @@ export function useConversationContext() {
return;
}
- if (serialize.current == 0) {
+ if (serialize.current === 0) {
serialize.current++;
while (events.current.length > 0) {
// collapse updates
while (events.current.length > 1) {
- if(events.current[0].type == EVENT_UPDATE && events.current[1].type == EVENT_UPDATE) {
+ if(events.current[0].type === EVENT_UPDATE && events.current[1].type === EVENT_UPDATE) {
events.current.shift();
}
else {
diff --git a/net/web/src/session/Session.jsx b/net/web/src/session/Session.jsx
index 9451c342..daf90673 100644
--- a/net/web/src/session/Session.jsx
+++ b/net/web/src/session/Session.jsx
@@ -1,5 +1,42 @@
+import { useEffect, useContext } from 'react';
+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';
export function Session() {
- return <>
+
+ const app = useContext(AppContext);
+ const viewport = useContext(ViewportContext);
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (app.state) {
+ if (!app.state.access) {
+ navigate('/');
+ }
+ }
+ }, [app, navigate]);
+
+ return (
+
+ { (viewport.state.display === 'xlarge') && (
+
+
+
+ )}
+ { (viewport.state.display === 'large' || viewport.state.display === 'medium') && (
+
+
+
+ )}
+ { (viewport.state.display === 'small') && (
+
+
+
+ )}
+
+ );
}
diff --git a/net/web/src/session/Session.styled.js b/net/web/src/session/Session.styled.js
new file mode 100644
index 00000000..775e438a
--- /dev/null
+++ b/net/web/src/session/Session.styled.js
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const SessionWrapper = styled.div`
+ height: 100%;
+ width: 100%;
+
+ .desktop-layout {
+ }
+
+ .tablet-layout {
+ }
+
+ .mobile-layout {
+ }
+`;
+