Merge pull request #4 from AdmitHub/persist-skin-tone

Persist skin tone
AdmitHub · Jan 10, 2023 · db60c6d · db60c6d
2 parents a12ab17 + 046bed2
commit db60c6d
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 10 deletions.
diff --git a/src/components/context/PickerContext.tsx b/src/components/context/PickerContext.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { useDefaultSkinToneConfig } from '../../config/useConfig';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
+import { getSkinTone, setSkinTone } from '../../dataUtils/skinTone';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { useDisallowedEmojis } from '../../hooks/useDisallowedEmojis';
 import { FilterDict } from '../../hooks/useFilter';
@@ -61,7 +62,7 @@ const PickerContext = React.createContext<{
   searchTerm: [string, (term: string) => Promise<string>];
   suggestedUpdateState: [number, (term: number) => void];
   activeCategoryState: ReactState<ActiveCategoryState>;
-  activeSkinTone: ReactState<SkinTones>;
+  activeSkinTone: [SkinTones, (skinTone: SkinTones) => void];
   emojisThatFailedToLoadState: ReactState<Set<string>>;
   isPastInitialLoad: boolean;
   emojiVariationPickerState: ReactState<DataEmoji | null>;
@@ -71,18 +72,18 @@ const PickerContext = React.createContext<{
   disallowMouseRef: React.MutableRefObject<boolean>;
   disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
 }>({
-  activeCategoryState: [null, () => {}],
-  activeSkinTone: [SkinTones.NEUTRAL, () => {}],
+  activeCategoryState: [null, () => { }],
+  activeSkinTone: [getSkinTone(), (skinTone) => setSkinTone(skinTone)],
   disallowClickRef: { current: false },
   disallowMouseRef: { current: false },
   disallowedEmojisRef: { current: {} },
-  emojiVariationPickerState: [null, () => {}],
-  emojisThatFailedToLoadState: [new Set(), () => {}],
+  emojiVariationPickerState: [null, () => { }],
+  emojisThatFailedToLoadState: [new Set(), () => { }],
   filterRef: { current: {} },
   isPastInitialLoad: true,
   searchTerm: ['', () => new Promise<string>(() => undefined)],
-  skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}]
+  skinToneFanOpenState: [false, () => { }],
+  suggestedUpdateState: [Date.now(), () => { }]
 });
 
 type Props = Readonly<{

diff --git a/src/components/header/SkinTonePicker.tsx b/src/components/header/SkinTonePicker.tsx
@@ -6,6 +6,7 @@ import { useSkinTonesDisabledConfig } from '../../config/useConfig';
 import skinToneVariations, {
   skinTonesNamed
 } from '../../data/skinToneVariations';
+import { setSkinTone } from '../../dataUtils/skinTone';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../hooks/useFocus';
 import { SkinTones } from '../../types/exposedTypes';
@@ -82,6 +83,7 @@ export function SkinTonePicker({
               onClick={() => {
                 if (isOpen) {
                   setActiveSkinTone(skinToneVariation);
+                  setSkinTone(skinToneVariation)
                   focusSearchInput();
                 } else {
                   setIsOpen(true);
@@ -94,9 +96,8 @@ export function SkinTonePicker({
               })}
               tabIndex={isOpen ? 0 : -1}
               aria-pressed={active}
-              aria-label={`Skin tone ${
-                skinTonesNamed[skinToneVariation as SkinTones]
-              }`}
+              aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]
+                }`}
             ></Button>
           );
         })}

diff --git a/src/config/config.ts b/src/config/config.ts
@@ -1,5 +1,6 @@
 import { GetEmojiUrl } from '../components/emoji/Emoji';
 import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
+import { getSkinTone } from '../dataUtils/skinTone';
 import {
   EmojiClickData,
   EmojiStyle,
@@ -30,13 +31,16 @@ export function mergeConfig(
     suggestionMode: config.suggestedEmojisMode
   });
 
+  const activeSkinTone = getSkinTone()
+
   const skinTonePickerLocation = config.searchDisabled
     ? SkinTonePickerLocation.PREVIEW
     : config.skinTonePickerLocation;
 
   return {
     ...config,
     categories,
+    defaultSkinTone: activeSkinTone,
     previewConfig,
     skinTonePickerLocation
   };

diff --git a/src/dataUtils/skinTone.ts b/src/dataUtils/skinTone.ts
@@ -0,0 +1,25 @@
+import { SkinTones } from '../types/exposedTypes';
+
+const SKINTONE_LS_KEY = 'epr_skin_tone';
+
+
+export function getSkinTone(): SkinTones {
+  try {
+    if (!window?.localStorage) {
+      return SkinTones.NEUTRAL;
+    }
+
+    return JSON.parse(window?.localStorage.getItem(SKINTONE_LS_KEY) ?? SkinTones.NEUTRAL)
+  } catch {
+    return SkinTones.NEUTRAL;
+  }
+}
+
+export function setSkinTone(skinTone: SkinTones) {
+  try {
+    window?.localStorage.setItem(SKINTONE_LS_KEY, JSON.stringify(skinTone));
+    // Prevents the change from being seen immediately.
+  } catch {
+    // ignore
+  }
+}