Merge pull request #1705 from Bilb/fix-onion-path-light-orange

fix onion path status light for orange color

ts/components/OnionStatusDialog.tsx

@@ -19,6 +19,11 @@ import { useTheme } from 'styled-components';
 import { useNetwork } from '../hooks/useNetwork';
 import { Snode } from '../data/data';
 import { onionPathModal } from '../state/ducks/modalDialog';
+import {
+  getFirstOnionPath,
+  getFirstOnionPathLength,
+  getOnionPathsCount,
+} from '../state/selectors/onions';
 
 export type StatusLightType = {
   glowStartDelay: number;
@@ -27,8 +32,7 @@ export type StatusLightType = {
 };
 
 const OnionPathModalInner = () => {
-  const onionNodes = useSelector((state: StateType) => state.onionPaths.snodePath);
-  const onionPath = onionNodes;
+  const onionPath = useSelector(getFirstOnionPath);
   // including the device and destination in calculation
   const glowDuration = onionPath.length + 2;
 
@@ -36,7 +40,7 @@ const OnionPathModalInner = () => {
     {
       label: window.i18n('device'),
     },
-    ...onionNodes,
+    ...onionPath,
     {
       label: window.i18n('destination'),
     },
@@ -125,29 +129,21 @@ export const ActionPanelOnionStatusLight = (props: {
 }) => {
   const { isSelected, handleClick } = props;
 
-  let iconColor;
   const theme = useTheme();
-  const firstOnionPath = useSelector((state: StateType) => state.onionPaths.snodePath);
-  const hasOnionPath = firstOnionPath.length > 2;
+  const onionPathsCount = useSelector(getOnionPathsCount);
+  const firstPathLength = useSelector(getFirstOnionPathLength);
+  const isOnline = useNetwork();
 
   // Set icon color based on result
   const red = theme.colors.destructive;
   const green = theme.colors.accent;
   const orange = theme.colors.warning;
 
-  iconColor = hasOnionPath ? theme.colors.accent : theme.colors.destructive;
-  const onionState = useSelector((state: StateType) => state.onionPaths);
-
-  iconColor = red;
-  const isOnline = useNetwork();
-  if (!(onionState && onionState.snodePath) || !isOnline) {
-    iconColor = red;
-  } else {
-    const onionSnodePath = onionState.snodePath;
-    if (onionState && onionSnodePath && onionSnodePath.length > 0) {
-      const onionNodeCount = onionSnodePath.length;
-      iconColor = onionNodeCount > 2 ? green : onionNodeCount > 1 ? orange : red;
-    }
+  // start with red
+  let iconColor = red;
+  //if we are not online or the first path is not valid, we keep red as color
+  if (isOnline && firstPathLength > 1) {
+    iconColor = onionPathsCount > 2 ? green : onionPathsCount > 1 ? orange : red;
   }
 
   return (

ts/session/onions/onionPath.ts

@@ -136,7 +136,7 @@ export async function getOnionPath(toExclude?: Snode): Promise<Array<Snode>> {
   if (onionPaths.length <= 0) {
     window.inboxStore?.dispatch(updateOnionPaths([]));
   } else {
-    window.inboxStore?.dispatch(updateOnionPaths(onionPaths[0]));
+    window.inboxStore?.dispatch(updateOnionPaths(onionPaths));
   }
 
   const onionPathsWithoutExcluded = toExclude

ts/state/ducks/onion.tsx

@@ -2,11 +2,11 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Snode } from '../../data/data';
 
 export type OnionState = {
-  snodePath: Array<Snode>;
+  snodePaths: Array<Array<Snode>>;
 };
 
 export const initialOnionPathState = {
-  snodePath: new Array<Snode>(),
+  snodePaths: new Array<Array<Snode>>(),
 };
 
 /**
@@ -16,8 +16,8 @@ const onionSlice = createSlice({
   name: 'onionPaths',
   initialState: initialOnionPathState,
   reducers: {
-    updateOnionPaths(state: OnionState, action: PayloadAction<Array<Snode>>) {
-      return { snodePath: action.payload };
+    updateOnionPaths(state: OnionState, action: PayloadAction<Array<Array<Snode>>>) {
+      return { snodePaths: action.payload };
     },
   },
 });

ts/state/selectors/onions.ts

@@ -0,0 +1,23 @@
+import { createSelector } from 'reselect';
+
+import { StateType } from '../reducer';
+import { SectionType } from '../../components/session/ActionsPanel';
+import { OnionState } from '../ducks/onion';
+import { Snode } from '../../data/data';
+
+export const getOnionPaths = (state: StateType): OnionState => state.onionPaths;
+
+export const getOnionPathsCount = createSelector(
+  getOnionPaths,
+  (state: OnionState): SectionType => state.snodePaths.length
+);
+
+export const getFirstOnionPath = createSelector(
+  getOnionPaths,
+  (state: OnionState): Array<Snode> => state.snodePaths?.[0] || []
+);
+
+export const getFirstOnionPathLength = createSelector(
+  getFirstOnionPath,
+  (state: Array<Snode>): number => state.length || 0
+);