Implement adding/removing counters from user collections

src/client/hooks/useUserCollections.ts

@@ -97,12 +97,62 @@ function useUserCollections(): HookResults {
     USER_COLLECTIONS_STORAGE.setValue(state.collections);
   }, [state.collections]);
 
+  // Build a utility function that generates a field mutator for UserCounterCollections
+  // (the general case for functions).
+  const mutateCollectionField = useCallback(
+    (
+      collectionId: string,
+      generate: (current: SerializedUserCollection) => SerializedUserCollection
+    ): Promise<void> => {
+      return new Promise((resolve, reject) => {
+        setState(
+          (current): InternalState => {
+            const index = current.collections.findIndex(
+              ({ id }) => id === collectionId
+            );
+            if (index < 0) {
+              return {
+                callbacks: [
+                  ...current.callbacks,
+                  () => reject(new Error("This collection no longer exists")),
+                ],
+                collections: current.collections,
+              };
+            }
+
+            // Create a new container array and a new instance of the
+            // collection object
+            const nextCollections = [...current.collections];
+            nextCollections[index] = generate(nextCollections[index]);
+
+            return {
+              callbacks: [...current.callbacks, resolve],
+              collections: nextCollections,
+            };
+          }
+        );
+      });
+    },
+    []
+  );
+
   // Convert our serialized data structures into our client types
   const userCollections = useMemo(
     (): readonly UserCounterCollection[] =>
       state.collections.map(
         (collection): UserCounterCollection => ({
           ...collection,
+          addCounter: (counterId) =>
+            mutateCollectionField(collection.id, (current) => {
+              if (current.counterIds.includes(counterId)) {
+                return current;
+              }
+
+              return {
+                ...current,
+                counterIds: [...current.counterIds, counterId],
+              };
+            }),
           delete: () =>
             new Promise((resolve, reject) => {
               setState(
@@ -130,42 +180,29 @@ function useUserCollections(): HookResults {
                 }
               );
             }),
-          rename: (name) =>
-            new Promise((resolve, reject) => {
-              setState(
-                (current): InternalState => {
-                  const index = current.collections.findIndex(
-                    ({ id }) => id === collection.id
-                  );
-                  if (index < 0) {
-                    return {
-                      callbacks: [
-                        ...current.callbacks,
-                        () =>
-                          reject(new Error("This collection no longer exists")),
-                      ],
-                      collections: current.collections,
-                    };
-                  }
-
-                  // Create a new container array and a new instance of the
-                  // collection object
-                  const nextCollections = [...current.collections];
-                  nextCollections[index] = {
-                    ...nextCollections[index],
-                    name,
-                  };
-
-                  return {
-                    callbacks: [...current.callbacks, resolve],
-                    collections: nextCollections,
-                  };
-                }
-              );
+          removeCounter: (counterId) =>
+            mutateCollectionField(collection.id, (current) => {
+              const index = current.counterIds.indexOf(counterId);
+              if (index < 0) {
+                return current;
+              }
+
+              const nextCounters = [...current.counterIds];
+              nextCounters.splice(index, 1);
+
+              return {
+                ...current,
+                counterIds: nextCounters,
+              };
             }),
+          rename: (name) =>
+            mutateCollectionField(collection.id, (current) => ({
+              ...current,
+              name,
+            })),
         })
       ),
-    [state.collections]
+    [state.collections, mutateCollectionField]
   );
 
   // Create a memoized function to create new user collections

src/client/interfaces/index.ts

@@ -213,6 +213,18 @@ export interface UserCounterCollection extends CounterCollection {
    * Deletes this collection, resolving after the change has taken place.
    */
   delete: () => Promise<void>;
+
+  /**
+   * Adds a counter to this collection, resolving after the change has
+   * taken place.
+   */
+  addCounter: (counterId: string) => Promise<void>;
+
+  /**
+   * Removes a counter from this collection, resolving after the change has
+   * taken place.
+   */
+  removeCounter: (counterId: string) => Promise<void>;
 }
 
 /**

src/client/ui/modules/explore/ExplorePage.tsx

@@ -3,8 +3,8 @@ import { Route, Switch } from "react-router-dom";
 
 import { PageComponentProps } from "@jyosuushi/ui/types";
 
-import useExploreRoutes from "./hooks/useExploreRoutes";
 import LandingView from "./pages/landing/LandingView";
+import useExploreRoutes from "./useExploreRoutes";
 
 function ExplorePage({
   createUserCollection,