WIP: Onion path modal using redux state and refactored modals.
Warrick Corfe-Tan
4 years ago
parent
8374cbab08
commit
d7b22e13e1
@ -0,0 +1,164 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
|
||||||
|
import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
|
||||||
|
import { DefaultTheme } from 'styled-components';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
onClose: any;
|
||||||
|
showExitIcon?: boolean;
|
||||||
|
showHeader?: boolean;
|
||||||
|
headerReverse?: boolean;
|
||||||
|
//Maximum of two icons or buttons in header
|
||||||
|
headerIconButtons?: Array<{
|
||||||
|
iconType: SessionIconType;
|
||||||
|
iconRotation: number;
|
||||||
|
onClick?: any;
|
||||||
|
}>;
|
||||||
|
headerButtons?: Array<{
|
||||||
|
buttonType: SessionButtonType;
|
||||||
|
buttonColor: SessionButtonColor;
|
||||||
|
text: string;
|
||||||
|
onClick?: any;
|
||||||
|
}>;
|
||||||
|
theme: DefaultTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface State {
|
||||||
|
isVisible: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SessionWrapperModal = (props: any) => {
|
||||||
|
const { onclick, showModal } = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="loki-dialog session-confirm-wrapper modal">
|
||||||
|
<div className="session-confirm-wrapper">
|
||||||
|
<div className="session-modal">
|
||||||
|
<div className="session-modal__header">
|
||||||
|
<div className="session-modal__header__title">
|
||||||
|
Onion Nodes / Generic Title
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="session-modal__body">
|
||||||
|
<div className="session-modal__centered">
|
||||||
|
{props.children}
|
||||||
|
<div className="session-modal__button-group">
|
||||||
|
<SessionButton onClick={props.onclick}>Close</SessionButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// export class SessionModal extends React.PureComponent<Props, State> {
|
||||||
|
// public static defaultProps = {
|
||||||
|
// showExitIcon: true,
|
||||||
|
// showHeader: true,
|
||||||
|
// headerReverse: false,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// private node: HTMLDivElement | null;
|
||||||
|
|
||||||
|
// constructor(props: any) {
|
||||||
|
// super(props);
|
||||||
|
// this.state = {
|
||||||
|
// isVisible: true,
|
||||||
|
// };
|
||||||
|
|
||||||
|
// this.close = this.close.bind(this);
|
||||||
|
// this.onKeyUp = this.onKeyUp.bind(this);
|
||||||
|
// this.node = null;
|
||||||
|
|
||||||
|
// window.addEventListener('keyup', this.onKeyUp);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public componentDidMount() {
|
||||||
|
// document.addEventListener('mousedown', this.handleClick, false);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public componentWillUnmount() {
|
||||||
|
// document.removeEventListener('mousedown', this.handleClick, false);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public handleClick = (e: any) => {
|
||||||
|
// if (this.node && this.node.contains(e.target)) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// this.close();
|
||||||
|
// };
|
||||||
|
|
||||||
|
// public render() {
|
||||||
|
// const { title, headerIconButtons, showExitIcon, showHeader, headerReverse } = this.props;
|
||||||
|
// const { isVisible } = this.state;
|
||||||
|
|
||||||
|
// return isVisible ? (
|
||||||
|
// <div ref={node => (this.node = node)} className={'session-modal'}>
|
||||||
|
// {showHeader ? (
|
||||||
|
// <>
|
||||||
|
// <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
|
||||||
|
// <div className="session-modal__header__close">
|
||||||
|
// {showExitIcon ? (
|
||||||
|
// <SessionIconButton
|
||||||
|
// iconType={SessionIconType.Exit}
|
||||||
|
// iconSize={SessionIconSize.Small}
|
||||||
|
// onClick={this.close}
|
||||||
|
// theme={this.props.theme}
|
||||||
|
// />
|
||||||
|
// ) : null}
|
||||||
|
// </div>
|
||||||
|
// <div className="session-modal__header__title">{title}</div>
|
||||||
|
// <div className="session-modal__header__icons">
|
||||||
|
// {headerIconButtons
|
||||||
|
// ? headerIconButtons.map((iconItem: any) => {
|
||||||
|
// return (
|
||||||
|
// <SessionIconButton
|
||||||
|
// key={iconItem.iconType}
|
||||||
|
// iconType={iconItem.iconType}
|
||||||
|
// iconSize={SessionIconSize.Large}
|
||||||
|
// iconRotation={iconItem.iconRotation}
|
||||||
|
// onClick={iconItem.onClick}
|
||||||
|
// theme={this.props.theme}
|
||||||
|
// />
|
||||||
|
// );
|
||||||
|
// })
|
||||||
|
// : null}
|
||||||
|
// </div>
|
||||||
|
// </div>
|
||||||
|
// </>
|
||||||
|
// ) : null}
|
||||||
|
|
||||||
|
// <div className="session-modal__body">{this.props.children}</div>
|
||||||
|
// </div>
|
||||||
|
// ) : null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public close() {
|
||||||
|
// this.setState({
|
||||||
|
// isVisible: false,
|
||||||
|
// });
|
||||||
|
|
||||||
|
// window.removeEventListener('keyup', this.onKeyUp);
|
||||||
|
// document.removeEventListener('mousedown', this.handleClick, false);
|
||||||
|
|
||||||
|
// if (this.props.onClose) {
|
||||||
|
// this.props.onClose();
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// public onKeyUp(event: any) {
|
||||||
|
// switch (event.key) {
|
||||||
|
// case 'Esc':
|
||||||
|
// case 'Escape':
|
||||||
|
// this.close();
|
||||||
|
// break;
|
||||||
|
// default:
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
|
||||||
|
// import { OpenGroupV2InfoJoinable } from '../../opengroup/opengroupV2/ApiUtil';
|
||||||
|
|
||||||
|
// export type DefaultRoomsState = Array<OpenGroupV2InfoJoinable>;
|
||||||
|
|
||||||
|
export type OnionState = {
|
||||||
|
nodes: Array<OnionPathNodeType>;
|
||||||
|
// ip?: string;
|
||||||
|
// label?: string;
|
||||||
|
// isConnected?: boolean;
|
||||||
|
// isAttemptingConnect?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState: OnionState = {
|
||||||
|
nodes: new Array<OnionPathNodeType>(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// const initialState: OnionState = {
|
||||||
|
// ip: '',
|
||||||
|
// label: '',
|
||||||
|
// isConnected: false,
|
||||||
|
// isAttemptingConnect: false
|
||||||
|
// };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Payload to dispatch to update the base64 data of a default room
|
||||||
|
*/
|
||||||
|
export type Base64Update = {
|
||||||
|
base64Data: string;
|
||||||
|
roomId: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Type for a singular onion node to be used in the onion redux state.
|
||||||
|
*/
|
||||||
|
export type OnionPathNodeType = {
|
||||||
|
ip?: string;
|
||||||
|
label?: string;
|
||||||
|
isConnected?: boolean;
|
||||||
|
isAttemptingConnect?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Payload to dispatch an update of the onion node paths
|
||||||
|
*/
|
||||||
|
export type OnionUpdate = {
|
||||||
|
nodes: Array<OnionPathNodeType>;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This slice is the one holding the default joinable rooms fetched once in a while from the default opengroup v2 server.
|
||||||
|
*/
|
||||||
|
const onionSlice = createSlice({
|
||||||
|
name: 'onionPaths',
|
||||||
|
initialState,
|
||||||
|
reducers: {
|
||||||
|
updateOnionPaths(state, action: PayloadAction<OnionUpdate>) {
|
||||||
|
window.log.warn('updating default rooms', action.payload);
|
||||||
|
return action.payload as OnionState;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// destructures
|
||||||
|
const { actions, reducer } = onionSlice;
|
||||||
|
export const { updateOnionPaths } = actions;
|
||||||
|
export const defaultOnionReducer = reducer;
|
||||||
Loading…
Reference in New Issue