From e14f4832aad1685435c09bea2e9ed2743623352c Mon Sep 17 00:00:00 2001 From: William Grant Date: Mon, 26 Sep 2022 14:53:56 +1000 Subject: [PATCH] feat: added primaryColor to the redux store --- ts/components/SessionInboxView.tsx | 2 ++ .../settings/SettingsThemeSwitcher.tsx | 19 ++++------- ts/mains/main_renderer.tsx | 4 ++- ts/state/actions.ts | 2 ++ ts/state/ducks/index.ts | 2 ++ ts/state/ducks/primaryColor.tsx | 34 +++++++++++++++++++ ts/state/reducer.ts | 5 ++- ts/state/selectors/index.ts | 2 ++ ts/state/selectors/primaryColor.ts | 4 +++ ts/themes/switchPrimaryColor.ts | 9 ----- ts/themes/switchPrimaryColor.tsx | 11 ++++++ 11 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 ts/state/ducks/primaryColor.tsx create mode 100644 ts/state/selectors/primaryColor.ts delete mode 100644 ts/themes/switchPrimaryColor.ts create mode 100644 ts/themes/switchPrimaryColor.tsx diff --git a/ts/components/SessionInboxView.tsx b/ts/components/SessionInboxView.tsx index 165704e3a..f4408d539 100644 --- a/ts/components/SessionInboxView.tsx +++ b/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 { defaultRooms: initialDefaultRoomState, search: initialSearchState, theme: initialThemeState, + primaryColor: initialPrimaryColorState, onionPaths: initialOnionPathState, modals: initialModalState, userConfig: initialUserConfigState, diff --git a/ts/components/settings/SettingsThemeSwitcher.tsx b/ts/components/settings/SettingsThemeSwitcher.tsx index 17ade5869..6e4753ab7 100644 --- a/ts/components/settings/SettingsThemeSwitcher.tsx +++ b/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 = () => { { + // 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 ( @@ -184,8 +180,7 @@ export const SettingsThemeSwitcher = () => { ariaLabel={item.ariaLabel} color={item.color} onClick={() => { - switchPrimaryColor(item.id); - setSelectedPrimaryColor(item.id); + switchPrimaryColor(item.id, dispatch); }} /> ); diff --git a/ts/mains/main_renderer.tsx b/ts/mains/main_renderer.tsx index fb3661793..f748c2bd4 100644 --- a/ts/mains/main_renderer.tsx +++ b/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; } } diff --git a/ts/state/actions.ts b/ts/state/actions.ts index cdb018772..04c6d720d 100644 --- a/ts/state/actions.ts +++ b/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 ), diff --git a/ts/state/ducks/index.ts b/ts/state/ducks/index.ts index 87baeb130..443edb61e 100644 --- a/ts/state/ducks/index.ts +++ b/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, diff --git a/ts/state/ducks/primaryColor.tsx b/ts/state/ducks/primaryColor.tsx new file mode 100644 index 000000000..ea00fcf65 --- /dev/null +++ b/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, +}; diff --git a/ts/state/reducer.ts b/ts/state/reducer.ts index 91315fd67..f113900dd 100644 --- a/ts/state/reducer.ts +++ b/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, diff --git a/ts/state/selectors/index.ts b/ts/state/selectors/index.ts index 1709ef3e3..42b6bfca9 100644 --- a/ts/state/selectors/index.ts +++ b/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, diff --git a/ts/state/selectors/primaryColor.ts b/ts/state/selectors/primaryColor.ts new file mode 100644 index 000000000..9829eba6e --- /dev/null +++ b/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; diff --git a/ts/themes/switchPrimaryColor.ts b/ts/themes/switchPrimaryColor.ts deleted file mode 100644 index c3cf0c115..000000000 --- a/ts/themes/switchPrimaryColor.ts +++ /dev/null @@ -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 -} diff --git a/ts/themes/switchPrimaryColor.tsx b/ts/themes/switchPrimaryColor.tsx new file mode 100644 index 000000000..4ae7e673f --- /dev/null +++ b/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)); +}