add to list dialog updates

frontends/api/src/hooks/learningResources/index.ts

@@ -5,7 +5,11 @@ import {
   useQuery,
   useQueryClient,
 } from "@tanstack/react-query"
-import { learningpathsApi, userListsApi } from "../../clients"
+import {
+  learningpathsApi,
+  learningResourcesApi,
+  userListsApi,
+} from "../../clients"
 import type {
   LearningResourcesApiLearningResourcesListRequest as LRListRequest,
   TopicsApiTopicsListRequest as TopicsListRequest,
@@ -28,6 +32,8 @@ import type {
   PlatformsApiPlatformsListRequest,
   FeaturedApiFeaturedListRequest as FeaturedListParams,
   PaginatedLearningResourceList,
+  LearningResourcesApiLearningResourcesUserlistsPartialUpdateRequest,
+  LearningResourcesApiLearningResourcesLearningPathsPartialUpdateRequest,
 } from "../../generated/v1"
 import learningResources, {
   invalidateResourceQueries,
@@ -319,6 +325,43 @@ const useUserListRelationshipCreate = () => {
   })
 }
 
+const useLearningResourceSetUserListRelationships = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (
+      params: LearningResourcesApiLearningResourcesUserlistsPartialUpdateRequest,
+    ) => learningResourcesApi.learningResourcesUserlistsPartialUpdate(params),
+    onSettled: (_response, _err, vars) => {
+      invalidateResourceQueries(queryClient, vars.id, {
+        skipFeatured: false,
+      })
+      vars.userlist_id?.forEach((userlistId) => {
+        invalidateUserListQueries(queryClient, userlistId)
+      })
+    },
+  })
+}
+
+const useLearningResourceSetLearningPathRelationships = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (
+      params: LearningResourcesApiLearningResourcesLearningPathsPartialUpdateRequest,
+    ) =>
+      learningResourcesApi.learningResourcesLearningPathsPartialUpdate(params),
+    onSettled: (_response, _err, vars) => {
+      invalidateResourceQueries(queryClient, vars.id, {
+        skipFeatured: false,
+      })
+      vars.learning_path_id?.forEach((learningPathId) => {
+        invalidateResourceQueries(queryClient, learningPathId, {
+          skipFeatured: false,
+        })
+      })
+    },
+  })
+}
+
 const useUserListRelationshipDestroy = () => {
   const queryClient = useQueryClient()
   return useMutation({
@@ -454,6 +497,8 @@ export {
   useLearningpathRelationshipCreate,
   useLearningpathRelationshipDestroy,
   useLearningResourcesSearch,
+  useLearningResourceSetUserListRelationships,
+  useLearningResourceSetLearningPathRelationships,
   useUserListList,
   useUserListsDetail,
   useUserListCreate,

frontends/api/src/test-utils/urls.ts

@@ -34,7 +34,15 @@ const { MITOL_API_BASE_URL: API_BASE_URL } = APP_SETTINGS
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const query = (params: any) => {
   if (!params || Object.keys(params).length === 0) return ""
-  return `?${new URLSearchParams(params).toString()}`
+  const queryString = new URLSearchParams()
+  for (const [key, value] of Object.entries(params)) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => queryString.append(key, String(v)))
+    } else {
+      queryString.append(key, String(value))
+    }
+  }
+  return `?${queryString.toString()}`
 }
 
 const queryify = (params: unknown) => {
@@ -67,6 +75,14 @@ const learningResources = {
     `${API_BASE_URL}/api/v1/learning_resources/${params.id}/`,
   featured: (params?: Params<FeaturedApi, "featuredList">) =>
     `${API_BASE_URL}/api/v1/featured/${query(params)}`,
+  setLearningPathRelationships: (
+    params?: Params<LRApi, "learningResourcesLearningPathsPartialUpdate">,
+  ) =>
+    `${API_BASE_URL}/api/v1/learning_resources/${params?.id}/learning_paths/${params?.learning_path_id ? query({ learning_path_id: params?.learning_path_id }) : ""}`,
+  setUserListRelationships: (
+    params?: Params<LRApi, "learningResourcesUserlistsPartialUpdate">,
+  ) =>
+    `${API_BASE_URL}/api/v1/learning_resources/${params?.id}/userlists/${params?.userlist_id ? query({ userlist_id: params?.userlist_id }) : ""}`,
 }
 
 const offerors = {

frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.test.tsx

@@ -154,7 +154,7 @@ const addToUserList = (
 describe.each([ListType.LearningPath, ListType.UserList])(
   "AddToListDialog",
   (listType: string) => {
-    test("List is checked iff resource is in list", async () => {
+    test("List is checked if resource is in list", async () => {
       const index = faker.number.int({ min: 0, max: 2 })
       if (listType === ListType.LearningPath) {
         setupLearningPaths({ inLists: [index] })
@@ -169,62 +169,57 @@ describe.each([ListType.LearningPath, ListType.UserList])(
       expect(checkboxes[2].checked).toBe(index === 2)
     })
 
-    test("Clicking an unchecked list adds item to that list", async () => {
+    test("Clicking an unchecked list and clicking save adds item to that list", async () => {
       let title = ""
-      let id = -1
-      let addToListUrl = ""
+      let setRelationshipsUrl = ""
       if (listType === ListType.LearningPath) {
         const { resource, lists } = setupLearningPaths()
         const list = faker.helpers.arrayElement(lists)
 
-        addToListUrl = urls.learningPaths.resources({
-          learning_resource_id: list.id,
-        })
+        setRelationshipsUrl =
+          urls.learningResources.setLearningPathRelationships({
+            id: resource.id,
+            learning_path_id: [list.id],
+          })
         const newRelationship = addToLearningPath(resource, list)
-        setMockResponse.post(addToListUrl, newRelationship)
+        setMockResponse.patch(setRelationshipsUrl, newRelationship)
         setMockResponse.get(
           urls.learningResources.details({ id: resource.id }),
           resource,
         )
         title = list.title
-        id = list.id
       } else if (listType === ListType.UserList) {
         const { resource, lists } = setupUserLists()
         const list = faker.helpers.arrayElement(lists)
 
-        addToListUrl = urls.userLists.resources({
-          userlist_id: list.id,
+        setRelationshipsUrl = urls.learningResources.setUserListRelationships({
+          id: resource.id,
+          userlist_id: [list.id],
         })
         const newRelationship = addToUserList(resource, list)
-        setMockResponse.post(addToListUrl, newRelationship)
+        setMockResponse.patch(setRelationshipsUrl, newRelationship)
         setMockResponse.get(
           urls.learningResources.details({ id: resource.id }),
           resource,
         )
         title = list.title
-        id = list.id
       }
 
-      const listButton = await screen.findByRole("button", { name: title })
-      const checkbox =
-        within(listButton).getByRole<HTMLInputElement>("checkbox")
+      const checkbox = await screen.findByLabelText<HTMLInputElement>(title)
 
       expect(checkbox.checked).toBe(false)
-      await user.click(listButton)
+      await user.click(checkbox)
 
-      expect(makeRequest).toHaveBeenCalledWith(
-        "post",
-        addToListUrl,
-        expect.objectContaining({
-          parent: id,
-        }),
-      )
+      const saveButton = await screen.findByRole("button", { name: "Save" })
+      await user.click(saveButton)
+
+      expect(makeRequest).toHaveBeenCalledWith("patch", setRelationshipsUrl, {})
     })
 
-    test("Clicking a checked list removes item from that list", async () => {
+    test("Clicking a checked list and clicking save removes item from that list", async () => {
       const index = faker.number.int({ min: 0, max: 2 })
       let title = ""
-      let removalUrl = ""
+      let setRelationshipUrl = ""
       if (listType === ListType.LearningPath) {
         const { resource, lists, parents } = setupLearningPaths({
           inLists: [index],
@@ -234,11 +229,12 @@ describe.each([ListType.LearningPath, ListType.UserList])(
         invariant(relationship)
 
         title = list.title
-        removalUrl = urls.learningPaths.resourceDetails({
-          id: relationship.id,
-          learning_resource_id: relationship.parent,
-        })
-        setMockResponse.delete(removalUrl)
+        setRelationshipUrl =
+          urls.learningResources.setLearningPathRelationships({
+            id: relationship.child,
+          })
+        setMockResponse.patch(setRelationshipUrl, relationship)
+
         setMockResponse.get(
           urls.learningResources.details({ id: resource.id }),
           resource,
@@ -252,28 +248,28 @@ describe.each([ListType.LearningPath, ListType.UserList])(
         invariant(relationship)
 
         title = list.title
-        removalUrl = urls.userLists.resourceDetails({
-          id: relationship.id,
-          userlist_id: relationship.parent,
+        setRelationshipUrl = urls.learningResources.setUserListRelationships({
+          id: relationship.child,
         })
-        setMockResponse.delete(removalUrl)
+        setMockResponse.patch(setRelationshipUrl, relationship)
         setMockResponse.get(
           urls.userLists.details({ id: resource.id }),
           resource,
         )
       }
 
-      const listButton = await screen.findByRole("button", { name: title })
-      const checkbox =
-        within(listButton).getByRole<HTMLInputElement>("checkbox")
+      const checkbox = await screen.findByLabelText<HTMLInputElement>(title)
 
       expect(checkbox.checked).toBe(true)
-      await user.click(listButton)
+      await user.click(checkbox)
+
+      const saveButton = await screen.findByRole("button", { name: "Save" })
+      await user.click(saveButton)
 
-      expect(makeRequest).toHaveBeenCalledWith("delete", removalUrl, undefined)
+      expect(makeRequest).toHaveBeenCalledWith("patch", setRelationshipUrl, {})
     })
 
-    test("Clicking 'Create a new list' opens the create list dialog", async () => {
+    test("Clicking 'Create New list' opens the create list dialog", async () => {
       let createList = null
       if (listType === ListType.LearningPath) {
         // Don't actually open the 'Create List' modal, or we'll need to mock API responses.
@@ -289,7 +285,7 @@ describe.each([ListType.LearningPath, ListType.UserList])(
         setupUserLists()
       }
       const button = await screen.findByRole("button", {
-        name: "Create a new list",
+        name: "Create New List",
       })
       expect(createList).not.toHaveBeenCalled()
       await user.click(button)