[bugfix/frontend] fix typo and other oddness in patchRemoteEmojis (#2281)v0.12.0

* fix emoji test model

* found the bug!

* remove unused 'current' import

* comment useChecklistReducer

* wah

* lint

* fix cleaner tests

1 files changed, 11 insertions, 113 deletions

diff --git a/web/source/settings/lib/form/check-list.tsx b/web/source/settings/lib/form/check-list.tsx
index c08e5022f..e44daefff 100644
--- a/web/source/settings/lib/form/check-list.tsx
+++ b/web/source/settings/lib/form/check-list.tsx
@@ -18,15 +18,12 @@
 */
 
 import {
-	useReducer,
 	useRef,
 	useEffect,
 	useCallback,
 	useMemo,
 } from "react";
 
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-
 import type {
 	Checkable,
 	ChecklistInputHook,
@@ -34,106 +31,12 @@ import type {
 	HookOpts,
 } from "./types";
 
-// https://immerjs.github.io/immer/installation#pick-your-immer-version
-import { enableMapSet } from "immer";
-enableMapSet();
-
-interface ChecklistState {
-	entries: { [k: string]: Checkable },
-	selectedEntries: Set<string>,
-}
-
-const initialState: ChecklistState = {
-	entries: {},
-	selectedEntries: new Set(),
-};
-
-const { reducer, actions } = createSlice({
-	name: "checklist",
-	initialState, // not handled by slice itself
-	reducers: {
-		updateAll: (state, { payload: checked }: PayloadAction<boolean>) => {
-			const selectedEntries = new Set<string>();
-			const entries = Object.fromEntries(
-				Object.values(state.entries).map((entry) => {
-					if (checked) {
-						// Cheekily add this to selected
-						// entries while we're here.
-						selectedEntries.add(entry.key);
-					}
-
-					return [entry.key, { ...entry, checked } ];
-				})
-			);
-			
-			return { entries, selectedEntries };
-		},
-		update: (state, { payload: { key, value } }: PayloadAction<{key: string, value: Checkable}>) => {
-			if (value.checked !== undefined) {
-				if (value.checked === true) {
-					state.selectedEntries.add(key);
-				} else {
-					state.selectedEntries.delete(key);
-				}
-			}
-
-			state.entries[key] = {
-				...state.entries[key],
-				...value
-			};
-		},
-		updateMultiple: (state, { payload }: PayloadAction<Array<[key: string, value: Checkable]>>) => {
-			payload.forEach(([key, value]) => {
-				if (value.checked !== undefined) {
-					if (value.checked === true) {
-						state.selectedEntries.add(key);
-					} else {
-						state.selectedEntries.delete(key);
-					}
-				}
-
-				state.entries[key] = {
-					...state.entries[key],
-					...value
-				};
-			});
-		}
-	}
-});
-
-function initialHookState({
-	entries,
-	uniqueKey,
-	initialValue,
-}: {
-	entries: Checkable[],
-	uniqueKey: string,
-	initialValue: boolean,
-}): ChecklistState {
-	const selectedEntries = new Set<string>();
-	const mappedEntries = Object.fromEntries(
-		entries.map((entry) => {
-			const key = entry[uniqueKey];
-			const checked = entry.checked ?? initialValue;
-			
-			if (checked) {
-				selectedEntries.add(key);
-			} else {
-				selectedEntries.delete(key);
-			}
-		
-			return [ key, { ...entry, key, checked } ];
-		})
-	);
-
-	return {
-		entries: mappedEntries,
-		selectedEntries
-	};
-}
+import {
+	useChecklistReducer,
+	actions,
+} from "../../redux/checklist";
 
 const _default: { [k: string]: Checkable } = {};
-
 export default function useCheckListInput(
 	/* eslint-disable no-unused-vars */
 	{ name, Name }: CreateHookNames,
@@ -143,12 +46,7 @@ export default function useCheckListInput(
 		initialValue = false,
 	}: HookOpts<boolean>
 ): ChecklistInputHook {
-	const [state, dispatch] = useReducer(
-		reducer,
-		initialState,
-		(_) => initialHookState({ entries, uniqueKey, initialValue }) // initial state
-	);
-
+	const [state, dispatch] = useChecklistReducer(entries, uniqueKey, initialValue);
 	const toggleAllRef = useRef<any>(null);
 
 	useEffect(() => {
@@ -167,17 +65,17 @@ export default function useCheckListInput(
 
 	const reset = useCallback(
 		() => dispatch(actions.updateAll(initialValue)),
-		[initialValue]
+		[initialValue, dispatch]
 	);
 
 	const onChange = useCallback(
-		(key, value) => dispatch(actions.update({ key, value })),
-		[]
+		(key: string, value: Checkable) => dispatch(actions.update({ key, value })),
+		[dispatch]
 	);
 
 	const updateMultiple = useCallback(
-		(entries) => dispatch(actions.updateMultiple(entries)),
-		[]
+		(entries: [key: string, value: Partial<Checkable>][]) => dispatch(actions.updateMultiple(entries)),
+		[dispatch]
 	);
 
 	return useMemo(() => {
@@ -215,5 +113,5 @@ export default function useCheckListInput(
 				onChange: toggleAll
 			}
 		});
-	}, [state, reset, name, onChange, updateMultiple]);
+	}, [state, reset, name, onChange, updateMultiple, dispatch]);
 }