Skip to content

@msflib/react-tasks

Tasks module built on TanStack Query for the LMS backend.

Install

pnpm add @msflib/react-tasks

Usage

Wrap your app with TasksProvider inside QueryClientProvider.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { TasksProvider, useGetTask, useTasks } from '@msflib/react-tasks';

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <TasksProvider options={{ enableAdminAccess: true }}>
        {children}
      </TasksProvider>
    </QueryClientProvider>
  );
}

When the provider is used in a route that should not load admin task flows, keep enableAdminAccess off. Turn it on only for instructor/admin surfaces that need promotions and demotions.

Tasks and submissions

The provider automatically loads:

  • GET /tasks?offset=0&limit=100
  • GET /submissions?offset=0&limit=100
  • GET /submissions/scores?offset=0&limit=100
  • GET /tasks/admin/promotions?offset=0&limit=100 when enableAdminAccess is on
  • GET /tasks/admin/demotions?offset=0&limit=100 when enableAdminAccess is on

It also exposes actions for:

  • listTasks
  • getTask
  • createTask
  • updateTask
  • listSubmissions
  • listSubmissionScores
  • listPromotions
  • promoteTask
  • listDemotions
  • demoteTask
  • submitTask
  • gradeTask

Downloading query results

useTasks() returns the current tasks list and submissions list from the provider, plus the mutation-style methods above for manual fetches and writes.

Admin task promotion flow

The tasks API also includes the admin promotion and demotion routes used for task review workflows. The provider exposes the data and actions directly:

const {
  promotions,
  demotions,
  listPromotions,
  promoteTask,
  listDemotions,
  demoteTask,
} = useTasks();

These methods accept the same query/payload style as the rest of the module, so consumers can keep their own filtering and action wiring simple.

Reading one task by id

Use useGetTask(taskId) when you want a single task without wiring your own effect. It returns a standard TanStack Query result object:

const { data: task, isLoading, error, refetch } = useGetTask(taskId);

This uses React Query under the hood, so it handles caching, loading, errors, and refetching automatically. The query is disabled (no request fired) while taskId is undefined.