Issue 1542/refactor to task hooks

src/features/campaigns/components/ActivitiesOverview/items/TaskOverviewListItem.tsx

@@ -3,8 +3,7 @@ import { CheckBoxOutlined, People } from '@mui/icons-material';
 
 import OverviewListItem from './OverviewListItem';
 import { TaskActivity } from 'features/campaigns/models/CampaignActivitiesModel';
-import TaskModel from 'features/tasks/models/TaskModel';
-import useModel from 'core/useModel';
+import useTaskStats from 'features/tasks/hooks/useTaskStats';
 import ZUIStackedStatusBar from 'zui/ZUIStackedStatusBar';
 
 interface TasksOverviewListItemProps {
@@ -17,11 +16,7 @@ const TaskOverviewListItem: FC<TasksOverviewListItemProps> = ({
   focusDate,
 }) => {
   const task = activity.data;
-  const model = useModel(
-    (env) => new TaskModel(env, task.organization.id, task.id)
-  );
-
-  const stats = model.getTaskStats().data;
+  const { data: stats } = useTaskStats(task.organization.id, task.id);
 
   return (
     <OverviewListItem

src/features/campaigns/components/ActivityList/items/TaskListItem.tsx

@@ -2,8 +2,8 @@ import { CheckBoxOutlined, People } from '@mui/icons-material';
 
 import ActivityListItemWithStats from './ActivityListItemWithStats';
 import { STATUS_COLORS } from './ActivityListItem';
-import TaskModel from 'features/tasks/models/TaskModel';
-import useModel from 'core/useModel';
+import useTask from 'features/tasks/hooks/useTask';
+import useTaskStats from 'features/tasks/hooks/useTaskStats';
 import getTaskStatus, { TASK_STATUS } from 'features/tasks/utils/getTaskStatus';
 
 interface TaskListItemProps {
@@ -12,9 +12,8 @@ interface TaskListItemProps {
 }
 
 const TaskListItem = ({ orgId, taskId }: TaskListItemProps) => {
-  const model = useModel((env) => new TaskModel(env, orgId, taskId));
-  const task = model.getTask().data;
-  const stats = model.getTaskStats().data;
+  const { data: task } = useTask(orgId, taskId);
+  const { data: stats, isLoading: statsLoading } = useTaskStats(orgId, taskId);
 
   if (!task) {
     return null;
@@ -31,8 +30,6 @@ const TaskListItem = ({ orgId, taskId }: TaskListItemProps) => {
     color = STATUS_COLORS.BLUE;
   }
 
-  const statsLoading = model.getTaskStats().isLoading;
-
   return (
     <ActivityListItemWithStats
       blueChipValue={stats?.assigned}

src/features/tasks/hooks/useTask.ts

@@ -0,0 +1,30 @@
+import { useSelector } from 'react-redux';
+
+import { loadItemIfNecessary } from 'core/caching/cacheUtils';
+import { RootState } from 'core/store';
+import { ZetkinTask } from '../components/types';
+import { taskLoad, taskLoaded } from '../store';
+import { useApiClient, useEnv } from 'core/hooks';
+
+interface UseTaskReturn {
+  data: ZetkinTask | null;
+}
+
+export default function useTask(orgId: number, taskId: number): UseTaskReturn {
+  const apiClient = useApiClient();
+  const env = useEnv();
+  const tasks = useSelector((state: RootState) => state.tasks);
+
+  const item = tasks.tasksList.items.find((item) => item.id === taskId);
+
+  const taskFuture = loadItemIfNecessary(item, env.store, {
+    actionOnLoad: () => taskLoad(taskId),
+    actionOnSuccess: (data) => taskLoaded(data),
+    loader: () =>
+      apiClient.get<ZetkinTask>(`/api/orgs/${orgId}/tasks/${taskId}`),
+  });
+
+  return {
+    data: taskFuture.data,
+  };
+}

src/features/tasks/hooks/useTaskStats.ts

@@ -0,0 +1,34 @@
+import { useSelector } from 'react-redux';
+
+import { loadItemIfNecessary } from 'core/caching/cacheUtils';
+import { RootState } from 'core/store';
+import getStats, { TaskStats } from '../rpc/getTaskStats';
+import { statsLoad, statsLoaded } from '../store';
+import { useApiClient, useEnv } from 'core/hooks';
+
+interface UseTaskStatsReturn {
+  data: TaskStats | null;
+  isLoading: boolean;
+}
+
+export default function useTaskStats(
+  orgId: number,
+  taskId: number
+): UseTaskStatsReturn {
+  const apiClient = useApiClient();
+  const env = useEnv();
+  const tasks = useSelector((state: RootState) => state.tasks);
+
+  const item = tasks.statsById[taskId!];
+
+  const taskStatsFuture = loadItemIfNecessary(item, env.store, {
+    actionOnLoad: () => statsLoad(taskId!),
+    actionOnSuccess: (data) => statsLoaded([taskId!, data]),
+    loader: () => apiClient.rpc(getStats, { orgId, taskId }),
+  });
+
+  return {
+    data: taskStatsFuture.data,
+    isLoading: taskStatsFuture.isLoading,
+  };
+}

src/features/tasks/hooks/useTasks.ts

@@ -0,0 +1,28 @@
+import { useSelector } from 'react-redux';
+
+import { IFuture } from 'core/caching/futures';
+import { loadListIfNecessary } from 'core/caching/cacheUtils';
+import { RootState } from 'core/store';
+import { ZetkinTask } from '../components/types';
+import { tasksLoad, tasksLoaded } from '../store';
+import { useApiClient, useEnv } from 'core/hooks';
+
+interface UseTasksReturn {
+  tasksFuture: IFuture<ZetkinTask[]>;
+}
+
+export default function useTasks(orgId: number): UseTasksReturn {
+  const taskList = useSelector((state: RootState) => state.tasks.tasksList);
+  const env = useEnv();
+  const apiClient = useApiClient();
+
+  const tasksFuture = loadListIfNecessary(taskList, env.store, {
+    actionOnLoad: () => tasksLoad(),
+    actionOnSuccess: (data) => tasksLoaded(data),
+    loader: () => apiClient.get<ZetkinTask[]>(`/api/orgs/${orgId}/tasks/`),
+  });
+
+  return {
+    tasksFuture,
+  };
+}

src/features/tasks/repos/TasksRepo.ts

@@ -1,21 +1,10 @@
 import Environment from 'core/env/Environment';
 import IApiClient from 'core/api/client/IApiClient';
 import { IFuture } from 'core/caching/futures';
+import { loadListIfNecessary } from 'core/caching/cacheUtils';
 import { Store } from 'core/store';
 import { ZetkinTask } from '../components/types';
-import getStats, { TaskStats } from '../rpc/getTaskStats';
-import {
-  loadItemIfNecessary,
-  loadListIfNecessary,
-} from 'core/caching/cacheUtils';
-import {
-  statsLoad,
-  statsLoaded,
-  taskLoad,
-  taskLoaded,
-  tasksLoad,
-  tasksLoaded,
-} from '../store';
+import { tasksLoad, tasksLoaded } from '../store';
 
 export default class TasksRepo {
   private _apiClient: IApiClient;
@@ -26,28 +15,6 @@ export default class TasksRepo {
     this._store = env.store;
   }
 
-  getTask(orgId: number, taskId: number): IFuture<ZetkinTask> {
-    const state = this._store.getState();
-    const item = state.tasks.tasksList.items.find((item) => item.id === taskId);
-
-    return loadItemIfNecessary(item, this._store, {
-      actionOnLoad: () => taskLoad(taskId),
-      actionOnSuccess: (data) => taskLoaded(data),
-      loader: () =>
-        this._apiClient.get<ZetkinTask>(`/api/orgs/${orgId}/tasks/${taskId}`),
-    });
-  }
-
-  getTaskStats(orgId: number, taskId: number): IFuture<TaskStats> {
-    const state = this._store.getState();
-    const item = state.tasks.statsById[taskId];
-    return loadItemIfNecessary(item, this._store, {
-      actionOnLoad: () => statsLoad(taskId),
-      actionOnSuccess: (data) => statsLoaded([taskId, data]),
-      loader: () => this._apiClient.rpc(getStats, { orgId, taskId }),
-    });
-  }
-
   getTasks(orgId: number): IFuture<ZetkinTask[]> {
     const state = this._store.getState();
     const taskList = state.tasks.tasksList;