Issue #39 Port over useSortAlphabetically reducer hook

Add use-sorted-alphabetically.ts

Author: brandongregoryscott

src/hooks/use-sorted-alphabetically.test.tsx

@@ -0,0 +1,79 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import { act } from "react-dom/test-utils";
+import { useSortedAlphabetically } from "./use-sorted-alphabetically";
+
+describe("useSortedAlphabetically", () => {
+    const testSelector = (s: string) => s;
+
+    test("when initialState is not sorted, then returns sorted array", () => {
+        // Arrange
+        const unsortedList = ["C", "A", "D", "B"];
+        const sortedList = ["A", "B", "C", "D"];
+
+        const TestApp = () => {
+            const [values, setValues] = useSortedAlphabetically(
+                unsortedList,
+                testSelector
+            );
+
+            return (
+                <React.Fragment>
+                    {values.map((value: string) => (
+                        <p key={value} title="item">
+                            {value}
+                        </p>
+                    ))}
+                </React.Fragment>
+            );
+        };
+
+        // Act
+        const { getAllByTitle } = render(<TestApp />);
+        const items = getAllByTitle("item").map(
+            (el: HTMLElement) => el.innerHTML
+        );
+
+        // Assert
+        expect(items).toStrictEqual(sortedList);
+    });
+
+    test("when setValues is called with unsorted array, then values is set to a sorted array", () => {
+        // Arrange
+        const unsortedList = ["C", "A", "D", "B"];
+        const sortedList = ["A", "B", "C", "D"];
+
+        const TestApp = () => {
+            const [values, setValues] = useSortedAlphabetically(
+                [],
+                testSelector
+            );
+
+            return (
+                <React.Fragment>
+                    {values.map((value: string) => (
+                        <p key={value} title="item">
+                            {value}
+                        </p>
+                    ))}
+                    <button
+                        onClick={() => setValues(unsortedList)}
+                        title="testButton"
+                        type="button"
+                    />
+                </React.Fragment>
+            );
+        };
+
+        // Act
+        const { getAllByTitle, getByTitle } = render(<TestApp />);
+        const button = getByTitle("testButton");
+        act(() => button.click());
+        const items = getAllByTitle("item").map(
+            (el: HTMLElement) => el.innerHTML
+        );
+
+        // Assert
+        expect(items).toStrictEqual(sortedList);
+    });
+});

src/hooks/use-sorted-alphabetically.ts

@@ -0,0 +1,44 @@
+import { CollectionUtils } from "andculturecode-javascript-core";
+import {
+    Dispatch,
+    Reducer,
+    ReducerAction,
+    ReducerState,
+    useReducer,
+} from "react";
+
+// -----------------------------------------------------------------------------------------
+// #region Hook
+// -----------------------------------------------------------------------------------------
+
+/**
+ * Create a stateful array value which is always sorted alphabetically.
+ * @param initialValue the initial value of the array. Does not need to be sorted, the hook will sort it before setting the value.
+ * @param sortBySelector a function which takes an array element, and returns a string property by which to sort alphabetically.
+ */
+function useSortedAlphabetically<T>(
+    initialValue: Array<T>,
+    sortBySelector: (value: T) => string
+): [
+    ReducerState<Reducer<Array<T>, Array<T>>>,
+    Dispatch<ReducerAction<Reducer<Array<T>, Array<T>>>>
+] {
+    const [values, setValues] = useReducer<Reducer<Array<T>, Array<T>>>(
+        // first parameter prevState is unused, replace with discard _
+        (_: Array<T>, newState: Array<T>) =>
+            CollectionUtils.sortByString(newState, sortBySelector),
+        CollectionUtils.sortByString(initialValue, sortBySelector)
+    );
+
+    return [values, setValues];
+}
+
+// #endregion Hook
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { useSortedAlphabetically };
+
+// #endregion Exports

src/index.ts

@@ -33,6 +33,7 @@ export { useDebounce } from "./hooks/use-debounce";
 export { useLocalization } from "./hooks/use-localization";
 export { useOnClickOutside } from "./hooks/use-onclick-outside";
 export { usePageErrors } from "./hooks/use-page-errors";
+export { useSortedAlphabetically } from "./hooks/use-sorted-alphabetically";
 export { useTextOverflow } from "./hooks/use-text-overflow";
 export { useWindow } from "./hooks/use-window";