From 98fe0a87d840987998f69dac3ea79a810c1164be Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Wed, 26 May 2021 09:56:40 +1000 Subject: [PATCH] WIP making changes to modal. --- package.json | 1 + ts/components/OnionStatusDialog.tsx | 10 ++++++-- ts/components/session/ActionsPanel.tsx | 7 +++--- ts/components/session/SessionWrapperModal.tsx | 25 ++++++++++++++++--- ts/state/ducks/onion.tsx | 1 - yarn.lock | 21 ++++++++++++++++ 6 files changed, 56 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index aeeae2bc1..b145ef67c 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "to-arraybuffer": "1.0.1", "typings-for-css-modules-loader": "^1.7.0", "underscore": "1.9.0", + "use-hooks": "^2.0.0-rc.5", "uuid": "3.3.2" }, "devDependencies": { diff --git a/ts/components/OnionStatusDialog.tsx b/ts/components/OnionStatusDialog.tsx index 227d0cb63..3daf9f4f8 100644 --- a/ts/components/OnionStatusDialog.tsx +++ b/ts/components/OnionStatusDialog.tsx @@ -187,6 +187,12 @@ export const StatusLight = (props: any) => { const [showModal, toggleShowModal] = useState(false); const { isSelected, color } = props; const theme = useSelector(getTheme); + + const openFAQPage = () => { + console.log('Opening FAQ Page'); + shell.openExternal('https://getsession.org/faq/#onion-routing'); + }; + const onClick = () => { toggleShowModal(!showModal); }; @@ -194,7 +200,7 @@ export const StatusLight = (props: any) => { return ( <> { /> {showModal ? ( - + ) : null} diff --git a/ts/components/session/ActionsPanel.tsx b/ts/components/session/ActionsPanel.tsx index 02e77c6ef..ee53e66f1 100644 --- a/ts/components/session/ActionsPanel.tsx +++ b/ts/components/session/ActionsPanel.tsx @@ -39,6 +39,7 @@ import { Constants } from '../../session'; import { StatusLight } from '../OnionStatusDialog'; import { StateType } from '../../state/reducer'; import _ from 'lodash'; +import { useNetwork } from '../../hooks/useNetwork'; // tslint:disable-next-line: no-import-side-effect no-submodule-imports @@ -102,7 +103,6 @@ const Section = (props: { type: SectionType; avatarPath?: string; hasOnionPath?: if (type === SectionType.PathIndicator) { // Set icon color based on result iconColor = hasOnionPath ? Constants.UI.COLORS.GREEN : Constants.UI.COLORS.DANGER; - console.log('Status Indicator Color', iconColor); } const unreadToShow = type === SectionType.Message ? unreadMessageCount : undefined; @@ -137,7 +137,8 @@ const Section = (props: { type: SectionType; avatarPath?: string; hasOnionPath?: const onionState = useSelector((state: StateType) => state.onionPaths); let statusColor = Constants.UI.COLORS.DANGER; - if (!(onionState && onionState.snodePath)) { + const isOnline = useNetwork(); + if (!(onionState && onionState.snodePath) || !isOnline) { return ; } else { @@ -293,7 +294,7 @@ export const ActionsPanel = () => { // dispatch(updateOnionPaths(testNode)); - console.log('Is Onion Path found -', hasOnionPath); + // console.log('Is Onion Path found -', hasOnionPath); setHasOnionPath(hasOnionPath); }; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 94b2d3c1b..7f00c71d8 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -1,10 +1,12 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import classNames from 'classnames'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton'; import { DefaultTheme } from 'styled-components'; +import { useKeyPress } from "use-hooks"; + interface Props { title: string; onClose: any; @@ -31,7 +33,23 @@ interface State { } export const SessionWrapperModal = (props: any) => { - const { onclick, showModal } = props; + const { onclick, showModal, title, onConfirm } = props; + + useEffect(() => { + window.addEventListener('keyup', upHandler); + + return () => { + window.removeEventListener('keyup', upHandler); + } + }, []) + + // TODO: warrick: typing + const upHandler = ({key}: any ) => { + if (key === 'Escape') { + props.onclick(); + } + } + return (
@@ -39,7 +57,8 @@ export const SessionWrapperModal = (props: any) => {
- Onion Nodes / Generic Title + {/* Onion Nodes / Generic Title {title} */} + {title}
diff --git a/ts/state/ducks/onion.tsx b/ts/state/ducks/onion.tsx index d7518b0d3..4db436752 100644 --- a/ts/state/ducks/onion.tsx +++ b/ts/state/ducks/onion.tsx @@ -28,7 +28,6 @@ const onionSlice = createSlice({ reducers: { // updateOnionPaths(state, action: PayloadAction) { updateOnionPaths(state, action: PayloadAction) { - console.log('@@@@ dispatching:: ', action); return { snodePath: action.payload } diff --git a/yarn.lock b/yarn.lock index 81af79e49..3cf263a94 100644 --- a/yarn.lock +++ b/yarn.lock @@ -695,6 +695,15 @@ "@types/prop-types" "*" csstype "^2.2.0" +"@types/react@^16.8.3": + version "16.14.7" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.7.tgz#b62bd8cc4675d6fe3976126cdd208deda267f1fb" + integrity sha512-JhbikeQ1i18ut9Sro3j/xvhN073zJA9sqGqbwJByhOfLPXxEJdqjal9piZd9tmVEC+LP6RN2dLvWx9Hbr0reTw== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/redux-logger@3.0.7": version "3.0.7" resolved "https://registry.yarnpkg.com/@types/redux-logger/-/redux-logger-3.0.7.tgz#163f6f6865c69c21d56f9356dc8d741718ec0db0" @@ -715,6 +724,11 @@ "@types/glob" "*" "@types/node" "*" +"@types/scheduler@*": + version "0.16.1" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275" + integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA== + "@types/semver@5.5.0": version "5.5.0" resolved "https://registry.yarnpkg.com/@types/semver/-/semver-5.5.0.tgz#146c2a29ee7d3bae4bf2fcb274636e264c813c45" @@ -11940,6 +11954,13 @@ url@^0.11.0, url@~0.11.0: punycode "1.3.2" querystring "0.2.0" +use-hooks@^2.0.0-rc.5: + version "2.0.0-rc.5" + resolved "https://registry.yarnpkg.com/use-hooks/-/use-hooks-2.0.0-rc.5.tgz#05bdfb89cf088ef49961858b529d090a15f48680" + integrity sha512-85OzZPao3Rk6GFJqaeTHRj5MluTFhzDxUikwytiwJYGR4+2tEeH86Ym1DMDM6NzJ3bwueaX7kc+rlF/5J074TA== + dependencies: + "@types/react" "^16.8.3" + use-strict@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0"