From 56bd22fd7609e8963bc4449a5f6b6055d7f9b029 Mon Sep 17 00:00:00 2001 From: Lucas Phang Date: Fri, 14 May 2021 15:44:42 +1000 Subject: [PATCH] Refactor Onion Path rendering logic --- stylesheets/_modal.scss | 15 +- ts/components/OnionStatusDialog.tsx | 391 ++++------------------------ 2 files changed, 55 insertions(+), 351 deletions(-) diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss index ced43ad30..85da952a3 100644 --- a/stylesheets/_modal.scss +++ b/stylesheets/_modal.scss @@ -338,19 +338,6 @@ .dotContainer:not(:last-child) { padding-bottom: 2em; - - // .dot:after { - // z-index: 1; - // content: ''; - // position: relative; - // top: 15px; - // bottom: 0; - // left: 7px; - // @include themify($themes) { - // border-left: 1px solid themed('textColor'); - // } - // height: 2em; - // } } .dotContainer { @@ -358,7 +345,7 @@ align-items: center; width: 100%; - .nodeText { + p { margin-bottom: 0 !important; margin-top: 0; margin-left: 2em; diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 43104001c..633bab27e 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -1,27 +1,9 @@ import React, { useState } from 'react'; -import classNames from 'classnames'; -import { QRCode } from 'react-qr-svg'; - -import { Avatar, AvatarSize } from './Avatar'; - import { SessionButton, SessionButtonColor, SessionButtonType } from './session/SessionButton'; - -import { SessionIconButton, SessionIconSize, SessionIconType } from './session/icon'; import { SessionModal } from './session/SessionModal'; -import { PillDivider } from './session/PillDivider'; -import { ToastUtils, UserUtils } from '../session/utils'; import { DefaultTheme } from 'styled-components'; -import { MAX_USERNAME_LENGTH } from './session/registration/RegistrationTabs'; -import { SessionSpinner } from './session/SessionSpinner'; import electron from 'electron'; const { shell } = electron; -interface State { - profileName: string; - setProfileName: string; - avatar: string; - mode: 'default' | 'edit' | 'qr'; - loading: boolean; -} interface Props { theme: DefaultTheme; @@ -29,7 +11,37 @@ interface Props { onClose: any; } +interface Node { + ip?: string; + label: string; +} + +const OnionPath = (props: { nodes: Node[] }) => { + const { nodes } = props; + return ( +
+ { + nodes.map((node) => { + return ( +
+
+

+ {node.label} + {node.ip && ( + <> +
+ {node.ip} + + )} +

+
+ ) + }) + } +
+ ) +} export const OnionStatusDialog = (props: Props) => { const { theme, onClose } = props; @@ -38,6 +50,29 @@ export const OnionStatusDialog = (props: Props) => { console.log("Opening FAQ Page") shell.openExternal('https://getsession.org/faq/#onion-routing'); } + + const nodes: Node[] = [ + { + label: 'You' + }, + { + ip: '100', + label: 'Entry Node' + }, + { + ip: '100', + label: 'Service Node' + }, + { + ip: '100', + label: 'Service Node' + }, + { + ip: '100', + label: 'Destination' + }, + ] + return ( {

{window.i18n('onionPathIndicatorDescription')}

- {/*
-
-
*/} - {/* TODO: Figure out how to add a line */} -
- - -
-
-

You

-
- - -
-
-

Entry Node
Malaysia

-
- - {/*
*/} -
-
-

Service Node
- United States -

-
- - {/*
*/} - -
-
-

Service Node
- Australia -

-
- - {/*
*/} - -
-
-

Destination

-
-
+ { ); } - -// export class OnionStatusDialog extends React.Component { -// private readonly inputEl: any; - -// constructor(props: any) { -// super(props); - -// this.onNameEdited = this.onNameEdited.bind(this); -// this.closeDialog = this.closeDialog.bind(this); -// this.onClickOK = this.onClickOK.bind(this); -// this.onKeyUp = this.onKeyUp.bind(this); -// this.onFileSelected = this.onFileSelected.bind(this); -// this.fireInputEvent = this.fireInputEvent.bind(this); - -// this.state = { -// profileName: this.props.profileName, -// setProfileName: this.props.profileName, -// avatar: this.props.avatarPath, -// mode: 'default', -// loading: false, -// }; - -// this.inputEl = React.createRef(); - -// window.addEventListener('keyup', this.onKeyUp); -// } - -// public render() { -// const i18n = this.props.i18n; - -// const viewDefault = this.state.mode === 'default'; -// const viewEdit = this.state.mode === 'edit'; -// const viewQR = this.state.mode === 'qr'; - -// const sessionID = UserUtils.getOurPubKeyStrFromCache(); - -// const backButton = -// viewEdit || viewQR -// ? [ -// { -// iconType: SessionIconType.Chevron, -// iconRotation: 90, -// onClick: () => { -// this.setState({ mode: 'default' }); -// }, -// }, -// ] -// : undefined; - -// return ( -// -//
- -// {viewQR && this.renderQRView(sessionID)} -// {viewDefault && this.renderDefaultView()} -// {viewEdit && this.renderEditView()} - -//
-// -//

{sessionID}

- -//
-// - -// {viewDefault || viewQR ? ( -// { -// this.copySessionID(sessionID); -// }} -// /> -// ) : ( -// !this.state.loading && ( -// -// ) -// )} - -//
-//
-// -// ); -// } - -// private renderProfileHeader() { -// return ( -// <> -//
-//
-// {this.renderAvatar()} -//
-// -//
-// { -// this.setState({ mode: 'qr' }); -// }} -// theme={this.props.theme} -// /> -//
-//
-//
-// -// ); -// } - -// private fireInputEvent() { -// this.setState({ mode: 'edit' }, () => { -// const el = this.inputEl.current; -// if (el) { -// el.click(); -// } -// }); -// } - -// private renderDefaultView() { -// return ( -// <> -// {this.renderProfileHeader()} - -//
-//

{this.state.setProfileName}

-// { -// this.setState({ mode: 'edit' }); -// }} -// theme={this.props.theme} -// /> -//
-// -// ); -// } - -// private renderEditView() { -// const placeholderText = window.i18n('displayName'); - -// return ( -// <> -// {this.renderProfileHeader()} -//
-// -//
-// -// ); -// } - -// private renderQRView(sessionID: string) { -// const bgColor = '#FFFFFF'; -// const fgColor = '#1B1B1B'; - -// return ( -//
-// -//
-// ); -// } - -// private onFileSelected() { -// const file = this.inputEl.current.files[0]; -// const url = window.URL.createObjectURL(file); - -// this.setState({ -// avatar: url, -// }); -// } - -// private renderAvatar() { -// const { avatar, profileName } = this.state; -// const { pubkey } = this.props; -// const userName = profileName || pubkey; - -// return ; -// } - -// private onNameEdited(event: any) { -// const newName = event.target.value.replace(window.displayNameRegex, ''); - -// this.setState(state => { -// return { -// ...state, -// profileName: newName, -// }; -// }); -// } - -// private onKeyUp(event: any) { -// switch (event.key) { -// case 'Enter': -// if (this.state.mode === 'edit') { -// this.onClickOK(); -// } -// break; -// case 'Esc': -// case 'Escape': -// this.closeDialog(); -// break; -// default: -// } -// } - -// private copySessionID(sessionID: string) { -// window.clipboard.writeText(sessionID); -// ToastUtils.pushCopiedToClipBoard(); -// } - -// private onClickOK() { -// const newName = this.state.profileName.trim(); - -// if (newName.length === 0 || newName.length > MAX_USERNAME_LENGTH) { -// return; -// } - -// const avatar = -// this.inputEl && -// this.inputEl.current && -// this.inputEl.current.files && -// this.inputEl.current.files.length > 0 -// ? this.inputEl.current.files[0] -// : null; - -// this.setState( -// { -// loading: true, -// }, -// async () => { -// await this.props.onOk(newName, avatar); -// this.setState({ -// loading: false, - -// mode: 'default', -// setProfileName: this.state.profileName, -// }); -// } -// ); -// } - -// private closeDialog() { -// window.removeEventListener('keyup', this.onKeyUp); - -// this.props.onClose(); -// } -// }