Skip to content

Commit

Permalink
Peer representation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Raduc4
Raduc4 committed Aug 24, 2023
1 parent 371656e commit dc5cb78
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 61 deletions.
58 changes: 29 additions & 29 deletions components/common/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { ApiProvider } from '@framework/index';
import { Fragment, useState } from 'react';
import { Dialog, Menu, Transition } from '@headlessui/react';
Expand All @@ -10,7 +10,6 @@ import {
Cog6ToothIcon,
DocumentDuplicateIcon,
FolderIcon,
HomeIcon,
UsersIcon,
XMarkIcon,
} from '@heroicons/react/24/outline';
Expand All @@ -22,6 +21,7 @@ import classNames from 'classnames';
import WorkspaceBar from '@components/ui/workspacesBar/WorkspaceBar';
import Link from 'next/link';
import AddServerModal from '@components/ui/AddServer';
import { useAppSelector } from 'framework/redux/store';

const navigation = [
{ name: 'Team', href: '#', icon: UsersIcon, current: false },
Expand All @@ -34,11 +34,7 @@ const navigation = [
current: false,
},
];
const teams = [
{ id: 1, name: 'Radu Cazacu', href: '#', initial: 'R', current: false },
{ id: 2, name: 'Thomas Braun', href: '#', initial: 'T', current: false },
{ id: 3, name: 'Jiahang Li', href: '#', initial: 'J', current: false },
];

const userNavigation = [
{ name: 'Your profile', href: '#' },
{ name: 'Sign out', href: '#' },
Expand All @@ -50,10 +46,13 @@ type Props = {
export const Layout = ({ children }: Props) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const [addServerOpen, setAddServerOpen] = useState(false);
const currentUsedSessionCid: string = useAppSelector(
(state) => state.context.sessions.current_used_session_server
);

const [peers, setPeers] = useState<
Array<{ id: string; name: string; initial: string; current: boolean }>
>([]);
const current_sessions = useAppSelector(
(state) => state.context.sessions.current_sessions
);

return (
<ApiProvider>
Expand Down Expand Up @@ -115,13 +114,16 @@ export const Layout = ({ children }: Props) => {
<WorkspaceBar onOpen={setAddServerOpen} />

<div className="flex grow w-72 flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10">
<div className="flex h-16 shrink-0 items-center">
<Link
href={'/'}
className="flex h-16 shrink-0 items-center"
>
<img
className="h-8 w-auto"
src="https://github.com/Avarok-Cybersecurity/Citadel-Protocol/raw/master/resources/logo.png"
alt="Citadel Workspace"
/>
</div>
</Link>
<nav className="flex flex-1 flex-col">
<ul
role="list"
Expand Down Expand Up @@ -157,12 +159,12 @@ export const Layout = ({ children }: Props) => {
Your Peers
</div>
<ul role="list" className="-mx-2 mt-2 space-y-1">
{teams.map((team) => (
<li key={team.name}>
{Object.keys(current_sessions).map((key) => (
<li key={key}>
<a
href={team.href}
href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
className={classNames(
team.current
key
? 'bg-gray-800 text-white'
: 'text-gray-400 hover:text-white hover:bg-gray-800',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
Expand All @@ -176,9 +178,7 @@ export const Layout = ({ children }: Props) => {
/>
<span className="absolute bottom-0 right-0 block h-1.5 w-1.5 rounded-full bg-gray-300 ring-2 ring-white" />
</span>
<span className="truncate">
{team.name}
</span>
<span className="truncate">{key}</span>
</a>
</li>
))}
Expand Down Expand Up @@ -255,13 +255,13 @@ export const Layout = ({ children }: Props) => {
<WorkspaceBar onOpen={setAddServerOpen} />
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
<div className="flex h-16 shrink-0 items-center">
<Link href={'/'} className="flex h-16 shrink-0 items-center">
<img
className="h-8 mt-5 w-auto"
src="https://github.com/Avarok-Cybersecurity/Citadel-Protocol/raw/master/resources/logo.png"
alt="Citadel Workspace"
/>
</div>
</Link>
<nav className="flex flex-1 flex-col">
<ul role="list" className="flex flex-1 flex-col gap-y-7">
<li>
Expand Down Expand Up @@ -292,22 +292,22 @@ export const Layout = ({ children }: Props) => {
Your Peers
</div>
<ul role="list" className="-mx-2 mt-2 space-y-1">
{teams.map((team) => (
<li key={team.name}>
<a
href={team.href}
{Object.keys(current_sessions).map((key) => (
<li key={key}>
<Link
href={`/server/${currentUsedSessionCid}/${current_sessions[key]}`}
className={classNames(
team.current
key
? 'bg-gray-800 text-white'
: 'text-gray-400 hover:text-white hover:bg-gray-800',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
)}
>
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400 group-hover:text-white">
{team.initial}
{key[0]}
</span>
<span className="truncate">{team.name}</span>
</a>
<span className="truncate">{key}</span>
</Link>
</li>
))}
</ul>
Expand Down
1 change: 0 additions & 1 deletion components/ui/AddServer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ export default function AddServerModal({
username,
proposedPassword,
});
console.log(data);
onClose(false);
}}
>
Expand Down
33 changes: 26 additions & 7 deletions components/ui/workspacesBar/WorkspaceBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,31 @@
import { RootState, useAppSelector } from 'framework/redux/store';
import {
RootState,
useAppDispatch,
useAppSelector,
} from 'framework/redux/store';
import Link from 'next/link';
import React, { Dispatch, SetStateAction } from 'react';

import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
import { setCurrentServer } from 'framework/redux/slices/streamHandler.slice';
function WorkspaceBar({
onOpen,
}: {
onOpen: Dispatch<SetStateAction<boolean>>;
}) {
const sessions = useAppSelector((state: RootState) => state.context.sessions);
const sessions = useAppSelector(
(state: RootState) => state.context.sessions.current_sessions
);

const dispatch = useAppDispatch();
const [sessionsArr, setSessions] = useState<Array<any>>([]);

useEffect(() => {
for (const session in sessions) {
setSessions((prev) => {
if (prev.includes(session)) return prev; // if session already exists, don't add it
return [...prev, session];
});
}
}, [sessions]);

return (
<div
Expand All @@ -21,14 +39,15 @@ function WorkspaceBar({
>
<span className="text-xl font-medium leading-none text-white">+</span>
</span>
{sessions.map((el, i) => {
console.log(el);
{Object.keys(sessions).map((key, i) => {
const el = sessions[key];
return (
<Link
key={el.cid}
href={{
pathname: `/server/${el.cid}`,
pathname: `/server/${el}`,
}}
onClick={() => dispatch(setCurrentServer(el))}
>
<img
key={i}
Expand Down
38 changes: 28 additions & 10 deletions framework/redux/slices/streamHandler.slice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,26 @@ import { createSlice, current } from '@reduxjs/toolkit';

type Data = ServiceRegisterAccepted | ServiceTCPConnectionAccepted;

type Sessions = {
current_used_session_server: string;
current_sessions: {
[key: string]: { [key: string]: string };
};
};
export type ContextType = 'Register' | 'GetSession';

const initialState: {
context: {
[key: string]: ContextType;
};
sessions: Array<{ cid: string; peer_connections: { [key: string]: string } }>;
} = { context: {}, sessions: [] };
sessions: Sessions;
} = {
context: {},
sessions: {
current_used_session_server: '',
current_sessions: {},
},
};

const streamExecSlice = createSlice({
name: 'stram_handler',
Expand Down Expand Up @@ -43,20 +55,26 @@ const streamExecSlice = createSlice({
console.log('After', current(state));
},
setSessions: (state, action) => {
const activeSessions: Array<any> = action.payload;

const inactiveSession = state.sessions.filter((item) => {
return !activeSessions.includes(item);
});
const activeSessions: Array<{
cid: string;
peer_connections: {};
}> = action.payload;

state.sessions = activeSessions;
for (const session of activeSessions) {
const cid = session.cid;
const peer_connections = session.peer_connections;
state.sessions.current_sessions[cid] = peer_connections;
}

console.log('inactiveSession', inactiveSession);
console.log('active sessions', activeSessions);
console.log('Current state', current(state));
},
setCurrentServer: (state, action) => {
state.sessions.current_used_session_server = action.payload;
},
},
});

const { reducer, actions } = streamExecSlice;
export const { addToContext, setSessions } = actions;
export const { addToContext, setSessions, setCurrentServer } = actions;
export default reducer;
7 changes: 0 additions & 7 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,7 @@ function CustomApp({
const key = Object.keys(data).at(0)!;
const payload = data[key];

console.log('Stream_packet', payload);
const req_id = payload.request_id;
console.log('ReqID stream', req_id);
handlePacket(req_id, payload);
}
);
Expand All @@ -66,19 +64,14 @@ function CustomApp({
}, []);

const handlePacket = (req_id: string, payload: { [key: string]: any }) => {
console.log('ReqID', req_id);
console.log('Payload', payload);
const { context: map } = store.getState();
console.log('Map', map);
const context = map.context[req_id];
console.log('Context', context);

if (context) {
switch (context) {
case 'GetSession':
const activeSessions = payload.sessions as Array<number | string>;
store.dispatch(setSessions(activeSessions));
console.log('Active sessions', activeSessions);
break;
case 'Register':
const x = 1;
Expand Down
8 changes: 4 additions & 4 deletions pages/server/[server].tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ import { Layout } from '@components/common/Layout';
import React, { useEffect } from 'react';
import Chat from '@components/chat';
import { useRouter } from 'next/router';
import { useAppSelector } from 'framework/redux/store';

export default function SpecificServer({ connErr }: { connErr: string }) {
const router = useRouter();

useEffect(() => {
console.log(router.query.server);
return () => {};
}, []);
const current_used_session_server = useAppSelector(
(state) => state.context.sessions.current_used_session_server
);

return (
<>
Expand Down
3 changes: 0 additions & 3 deletions src-tauri/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ use std::sync::Arc;
use std::time::Duration;
use structs::ConnectionState;
use tauri::{Manager, State};
use tauri_specta::ts;
use tokio::net::TcpStream;
use tokio::time::timeout;
use uuid::Uuid;
Expand All @@ -42,12 +41,10 @@ fn send_response(
}

#[tauri::command]
#[specta::specta]
async fn open_tcp_conn(
conn_state: State<'_, ConnectionState>,
window: tauri::Window,
addr: String,
db: DbState<'_>,
) -> Result<Uuid, String> {
let connection = TcpStream::connect(addr);

Expand Down

0 comments on commit dc5cb78

Please sign in to comment.