feat: added primaryColor to the redux store

ts/components/SessionInboxView.tsx

@@ -19,6 +19,7 @@ import { initialSearchState } from '../state/ducks/search';
 import { initialSectionState } from '../state/ducks/section';
 import { getEmptyStagedAttachmentsState } from '../state/ducks/stagedAttachments';
 import { initialThemeState } from '../state/ducks/theme';
+import { initialPrimaryColorState } from '../state/ducks/primaryColor';
 import { TimerOptionsArray } from '../state/ducks/timerOptions';
 import { initialUserConfigState } from '../state/ducks/userConfig';
 import { StateType } from '../state/reducer';
@@ -107,6 +108,7 @@ export class SessionInboxView extends React.Component<any, State> {
       defaultRooms: initialDefaultRoomState,
       search: initialSearchState,
       theme: initialThemeState,
+      primaryColor: initialPrimaryColorState,
       onionPaths: initialOnionPathState,
       modals: initialModalState,
       userConfig: initialUserConfigState,

ts/components/settings/SettingsThemeSwitcher.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { switchThemeTo } from '../../session/utils/Theme';
@@ -6,13 +6,9 @@ import { getTheme } from '../../state/selectors/theme';
 import { SessionRadio, SessionRadioPrimaryColors } from '../basic/SessionRadio';
 import { SpacerLG, SpacerMD } from '../basic/Text';
 import { StyledDescriptionSettingsItem, StyledTitleSettingsItem } from './SessionSettingListItem';
-import {
-  getPrimaryColors,
-  PrimaryColorStateType,
-  THEMES,
-  ThemeStateType,
-} from '../../themes/colors';
+import { getPrimaryColors, THEMES, ThemeStateType } from '../../themes/colors';
 import { switchPrimaryColor } from '../../themes/switchPrimaryColor';
+import { getPrimaryColor } from '../../state/selectors/primaryColor';
 
 // tslint:disable: use-simple-attributes
 
@@ -140,6 +136,7 @@ const Themes = () => {
         <ThemeContainer
           key={theme.id}
           onClick={() => {
+            // TODO Change to switchTheme function
             void switchThemeTo(theme.id, dispatch);
           }}
         >
@@ -160,9 +157,8 @@ const Themes = () => {
 };
 
 export const SettingsThemeSwitcher = () => {
-  const [selectedPrimaryColor, setSelectedPrimaryColor] = useState<
-    PrimaryColorStateType | undefined
-  >(undefined);
+  const selectedPrimaryColor = useSelector(getPrimaryColor);
+  const dispatch = useDispatch();
 
   return (
     <StyledSwitcherContainer>
@@ -184,8 +180,7 @@ export const SettingsThemeSwitcher = () => {
               ariaLabel={item.ariaLabel}
               color={item.color}
               onClick={() => {
-                switchPrimaryColor(item.id);
-                setSelectedPrimaryColor(item.id);
+                switchPrimaryColor(item.id, dispatch);
               }}
             />
           );

ts/mains/main_renderer.tsx

@@ -100,8 +100,10 @@ function mapOldThemeToNew(theme: string) {
       return 'classic-dark';
     case 'android':
     case 'ios':
-    default:
+    case '':
       return 'classic-light';
+    default:
+      return theme;
   }
 }
 

ts/state/actions.ts

@@ -6,6 +6,7 @@ import { actions as user } from './ducks/user';
 import { actions as sections } from './ducks/section';
 import { actions as theme } from './ducks/theme';
 import { actions as modalDialog } from './ducks/modalDialog';
+import { actions as primaryColor } from './ducks/primaryColor';
 
 export function mapDispatchToProps(dispatch: Dispatch): Object {
   return {
@@ -17,6 +18,7 @@ export function mapDispatchToProps(dispatch: Dispatch): Object {
         ...theme,
         ...sections,
         ...modalDialog,
+        ...primaryColor,
       },
       dispatch
     ),

ts/state/ducks/index.ts

@@ -3,6 +3,7 @@ import * as conversationDucks from './conversations';
 import * as defaultRoomDucks from './defaultRooms';
 import * as DialogsDucks from './modalDialog';
 import * as OnionDucks from './onion';
+import * as PrimaryColorDucks from './primaryColor';
 import * as SearchDucks from './search';
 import * as SectionDucks from './section';
 import * as StagedAttachmentDucks from './stagedAttachments';
@@ -15,6 +16,7 @@ export {
   CallDucks,
   DialogsDucks,
   OnionDucks,
+  PrimaryColorDucks,
   SearchDucks,
   SectionDucks,
   StagedAttachmentDucks,

ts/state/ducks/primaryColor.tsx

@@ -0,0 +1,34 @@
+import { PrimaryColorStateType } from '../../themes/colors';
+
+export const APPLY_PRIMARY_COLOR = 'APPLY_PRIMARY_COLOR';
+
+export const applyPrimaryColor = (color: PrimaryColorStateType) => {
+  return {
+    type: APPLY_PRIMARY_COLOR,
+    payload: color,
+  };
+};
+
+export const initialPrimaryColorState: PrimaryColorStateType = 'green';
+
+export const reducer = (
+  state: any = initialPrimaryColorState,
+  {
+    type,
+    payload,
+  }: {
+    type: string;
+    payload: PrimaryColorStateType;
+  }
+): PrimaryColorStateType => {
+  switch (type) {
+    case APPLY_PRIMARY_COLOR:
+      return payload;
+    default:
+      return state;
+  }
+};
+
+export const actions = {
+  applyPrimaryColor,
+};

ts/state/reducer.ts

@@ -4,6 +4,7 @@ import { reducer as search, SearchStateType } from './ducks/search';
 import { ConversationsStateType, reducer as conversations } from './ducks/conversations';
 import { reducer as user, UserStateType } from './ducks/user';
 import { reducer as theme } from './ducks/theme';
+import { reducer as primaryColor } from './ducks/primaryColor';
 import { reducer as section, SectionStateType } from './ducks/section';
 import { defaultRoomReducer as defaultRooms, DefaultRoomsState } from './ducks/defaultRooms';
 import { callReducer as call, CallStateType } from './ducks/call';
@@ -16,13 +17,14 @@ import {
   reducer as stagedAttachments,
   StagedAttachmentsStateType,
 } from './ducks/stagedAttachments';
-import { ThemeStateType } from '../themes/colors';
+import { PrimaryColorStateType, ThemeStateType } from '../themes/colors';
 
 export type StateType = {
   search: SearchStateType;
   user: UserStateType;
   conversations: ConversationsStateType;
   theme: ThemeStateType;
+  primaryColor: PrimaryColorStateType;
   section: SectionStateType;
   defaultRooms: DefaultRoomsState;
   onionPaths: OnionState;
@@ -38,6 +40,7 @@ export const reducers = {
   conversations,
   user,
   theme,
+  primaryColor,
   section,
   defaultRooms,
   onionPaths,

ts/state/selectors/index.ts

@@ -2,6 +2,7 @@ import * as CallSelectors from './call';
 import * as ConversationSelectors from './conversations';
 import * as ModalSelectors from './modal';
 import * as OnionsSelectors from './onions';
+import * as PrimaryColorSelectors from './primaryColor';
 import * as SearchSelectors from './search';
 import * as SectionSelectors from './section';
 import * as StagedAttachmentSelectors from './stagedAttachments';
@@ -15,6 +16,7 @@ export {
   ConversationSelectors,
   ModalSelectors,
   OnionsSelectors,
+  PrimaryColorSelectors,
   SearchSelectors,
   SectionSelectors,
   StagedAttachmentSelectors,

ts/state/selectors/primaryColor.ts

@@ -0,0 +1,4 @@
+import { PrimaryColorStateType } from '../../themes/colors';
+import { StateType } from '../reducer';
+
+export const getPrimaryColor = (state: StateType): PrimaryColorStateType => state.primaryColor;

ts/themes/switchPrimaryColor.ts

@@ -1,9 +0,0 @@
-import { COLORS, PrimaryColorStateType } from './colors';
-
-export function switchPrimaryColor(color: PrimaryColorStateType) {
-  document.documentElement.style.setProperty(
-    '--primary-color',
-    (COLORS.PRIMARY as any)[`${color.toUpperCase()}`]
-  );
-  // TODO Store in Database
-}

ts/themes/switchPrimaryColor.tsx

@@ -0,0 +1,11 @@
+import { Dispatch } from 'redux';
+import { applyPrimaryColor } from '../state/ducks/primaryColor';
+import { COLORS, PrimaryColorStateType } from './colors';
+
+export function switchPrimaryColor(color: PrimaryColorStateType, dispatch: Dispatch | null) {
+  document.documentElement.style.setProperty(
+    '--primary-color',
+    (COLORS.PRIMARY as any)[`${color.toUpperCase()}`]
+  );
+  dispatch?.(applyPrimaryColor(color));
+}