Fix userlist stale data (#2501)

* fix type mismatch

* oops

* invalidate more things

Author: ChristopherChudzicki

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

@@ -97,7 +97,16 @@ const useLearningResourceSetUserListRelationships = () => {
       params: LearningResourcesApiLearningResourcesUserlistsPartialUpdateRequest,
     ) => learningResourcesApi.learningResourcesUserlistsPartialUpdate(params),
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: userlistKeys.membershipList() })
+      /**
+       * We need to invalidate:
+       * - membership check
+       * - list of user lists (count has changed)
+       * - userlist detail annd listing for any lists we modified
+       *
+       * That's a lot. Let's just invalidate root.
+       * Additionally, the lists we've removed from the resource are not easily available.
+       */
+      queryClient.invalidateQueries({ queryKey: userlistKeys.root })
     },
   })
 }
@@ -110,9 +119,16 @@ const useLearningResourceSetLearningPathRelationships = () => {
     ) =>
       learningResourcesApi.learningResourcesLearningPathsPartialUpdate(params),
     onSettled: () => {
-      queryClient.invalidateQueries({
-        queryKey: learningPathKeys.membershipList(),
-      })
+      /**
+       * We need to invalidate:
+       * - membership check
+       * - list of user lists (count has changed)
+       * - userlist detail annd listing for any lists we modified
+       *
+       * That's a lot. Let's just invalidate root.
+       * Additionally, the lists we've removed from the resource are not easily available.
+       */
+      queryClient.invalidateQueries({ queryKey: learningPathKeys.root })
     },
   })
 }

frontends/main/src/app/dashboard/my-lists/[id]/page.tsx

@@ -1,14 +1,15 @@
 import React from "react"
 import { UserListDetailsContent } from "@/app-pages/DashboardPage/UserListDetailsContent"
-import { PageParams } from "@/app/types"
 import invariant from "tiny-invariant"
+import { PageParams } from "@/app/types"
 
-const Page: React.FC<PageParams<object, { id: number }>> = async ({
+const Page: React.FC<PageParams<never, { id: string }>> = async ({
   params,
 }) => {
-  const resolved = await params
-  invariant(resolved?.id, "id is required")
-  return <UserListDetailsContent userListId={resolved.id} />
+  const resolved = await params!
+  const id = Number(resolved.id)
+  invariant(id, "id is required")
+  return <UserListDetailsContent userListId={id} />
 }
 
 export default Page