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