Merge pull request #1558 from zetkin/issue-1542/refactor-tags-hook

Issue 1542/refactor tags hook

src/features/tags/hooks/useTag.ts

@@ -0,0 +1,30 @@
+import { useSelector } from 'react-redux';
+
+import { IFuture } from 'core/caching/futures';
+import { loadItemIfNecessary } from 'core/caching/cacheUtils';
+import { RootState } from 'core/store';
+import { ZetkinTag } from 'utils/types/zetkin';
+import { tagLoad, tagLoaded } from '../store';
+import { useApiClient, useEnv } from 'core/hooks';
+
+interface UseTagReturn {
+  tagFuture: IFuture<ZetkinTag>;
+}
+export default function useTag(orgId: number, tagId: number): UseTagReturn {
+  const apiClient = useApiClient();
+  const tags = useSelector((state: RootState) => state.tags);
+  const env = useEnv();
+
+  const item = tags.tagList.items.find((item) => item.id == tagId);
+
+  const tagFuture = loadItemIfNecessary(item, env.store, {
+    actionOnLoad: () => tagLoad(tagId),
+    actionOnSuccess: (tag) => tagLoaded(tag),
+    loader: () =>
+      apiClient.get<ZetkinTag>(`/api/orgs/${orgId}/people/tags/${tagId}`),
+  });
+
+  return {
+    tagFuture,
+  };
+}

src/features/tags/hooks/useTagMutation.ts

@@ -0,0 +1,39 @@
+import { useStore } from 'react-redux';
+
+import { useApiClient } from 'core/hooks';
+import { ZetkinTag } from 'utils/types/zetkin';
+import { tagAssigned, tagUnassigned } from '../store';
+
+interface UseTagMutationReturn {
+  assignToPerson: (personId: number, value?: string) => void;
+  removeFromPerson: (personId: number) => Promise<void>;
+}
+export default function useTagMutation(
+  orgId: number,
+  tagId: number
+): UseTagMutationReturn {
+  const apiClient = useApiClient();
+
+  const store = useStore();
+
+  const assignToPerson = async (personId: number, value?: string) => {
+    const data = value ? { value } : undefined;
+    const tag = await apiClient.put<ZetkinTag>(
+      `/api/orgs/${orgId}/people/${personId}/tags/${tagId}`,
+      data
+    );
+    store.dispatch(tagAssigned([personId, tag]));
+  };
+
+  const removeFromPerson = async (personId: number) => {
+    await apiClient.delete(
+      `/api/orgs/${orgId}/people/${personId}/tags/${tagId}`
+    );
+    store.dispatch(tagUnassigned([personId, tagId]));
+  };
+
+  return {
+    assignToPerson,
+    removeFromPerson,
+  };
+}

src/features/tags/repos/TagsRepo.ts

@@ -1,10 +1,9 @@
 import Environment from 'core/env/Environment';
 import IApiClient from 'core/api/client/IApiClient';
-import { IFuture } from 'core/caching/futures';
-import { loadItemIfNecessary } from 'core/caching/cacheUtils';
+
 import { Store } from 'core/store';
 import { ZetkinTag } from 'utils/types/zetkin';
-import { tagAssigned, tagLoad, tagLoaded, tagUnassigned } from '../store';
+import { tagAssigned, tagUnassigned } from '../store';
 
 export default class TagsRepo {
   private _apiClient: IApiClient;
@@ -29,19 +28,6 @@ export default class TagsRepo {
     this._apiClient = env.apiClient;
   }
 
-  getTag(orgId: number, tagId: number): IFuture<ZetkinTag> {
-    const state = this._store.getState();
-    const item = state.tags.tagList.items.find((item) => item.id == tagId);
-    return loadItemIfNecessary(item, this._store, {
-      actionOnLoad: () => tagLoad(tagId),
-      actionOnSuccess: (tag) => tagLoaded(tag),
-      loader: () =>
-        this._apiClient.get<ZetkinTag>(
-          `/api/orgs/${orgId}/people/tags/${tagId}`
-        ),
-    });
-  }
-
   async removeTagFromPerson(orgId: number, personId: number, tagId: number) {
     await this._apiClient.delete(
       `/api/orgs/${orgId}/people/${personId}/tags/${tagId}`

src/features/views/components/ViewDataTable/columnTypes/PersonTagColumnType.tsx

@@ -10,9 +10,9 @@ import {
 
 import { IColumnType } from '.';
 import TagChip from 'features/tags/components/TagManager/components/TagChip';
-import TagModel from 'features/tags/models/TagModel';
 import useAccessLevel from 'features/views/hooks/useAccessLevel';
-import useModel from 'core/useModel';
+import useTag from 'features/tags/hooks/useTag';
+import useTagMutation from 'features/tags/hooks/useTagMutation';
 import ViewDataModel from 'features/views/models/ViewDataModel';
 import { ZetkinObjectAccess } from 'core/api/types';
 import { ZetkinTag } from 'utils/types/zetkin';
@@ -123,7 +123,9 @@ const Cell: FC<{
   // TODO: Find a way to share a model between cells in a column
   const query = useRouter().query;
   const orgId = parseInt(query.orgId as string);
-  const model = useModel((env) => new TagModel(env, orgId, tagId));
+  const { tagFuture } = useTag(orgId, tagId);
+  const { assignToPerson, removeFromPerson } = useTagMutation(orgId, tagId);
+
   const styles = useStyles();
 
   const [isRestricted] = useAccessLevel();
@@ -134,7 +136,7 @@ const Cell: FC<{
     return (
       <TagChip
         onDelete={() => {
-          model.removeFromPerson(personId);
+          removeFromPerson(personId);
         }}
         tag={cell}
       />
@@ -145,12 +147,12 @@ const Cell: FC<{
       // likely that a user in restricted mode will not have access to assign
       // (or even retrieve) the tag.
       return (
-        <ZUIFuture future={model.getTag()}>
+        <ZUIFuture future={tagFuture}>
           {(tag) => (
             <Box
               className={styles.ghostContainer}
               onClick={() => {
-                model.assignToPerson(personId);
+                assignToPerson(personId);
               }}
             >
               <Box className={styles.ghost}>