feat: scope support in usePreferences hook (#1405)

Author: rohanchkrabrty

.gitignore

@@ -24,3 +24,5 @@ resource_config
 /dist
 __debug_*
 *.local.*
+node_modules/
+.next/

web/pnpm-lock.yaml

@@ -66,11 +66,13 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
+    "@radix-ui/react-form": "^0.0.2",
     "@radix-ui/react-icons": "^1.3.2",
     "@raystack/apsara": "^0.56.2",
     "@raystack/eslint-config": "workspace:^",
     "@raystack/frontier-tsconfig": "workspace:^",
     "@size-limit/preset-small-lib": "^8.2.6",
+    "@stitches/react": "^1.2.8",
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.17",
     "@types/node": "^20.19.0",
@@ -85,16 +87,14 @@
     "np": "^7.7.0",
     "patch-package": "^8.0.1",
     "prettier": "^2.8.8",
+    "react-loading-skeleton": "^3.4.0",
     "release-it": "^16.3.0",
     "semver": "^7.7.2",
     "size-limit": "^8.2.6",
+    "sonner": "^1.4.41",
     "ts-jest": "^29.3.4",
     "tsup": "^6.7.0",
     "typescript": "^5.8.3",
-    "@radix-ui/react-form": "^0.0.2",
-    "@stitches/react": "^1.2.8",
-    "react-loading-skeleton": "^3.4.0",
-    "sonner": "^1.4.41",
     "usehooks-ts": "^3.1.1",
     "zod": "^3.22.3"
   },
@@ -104,7 +104,7 @@
     "@connectrpc/connect-query": "2.1.1",
     "@connectrpc/connect-web": "^2.0.2",
     "@hookform/resolvers": "^3.10.0",
-    "@raystack/proton": "0.1.0-b1687af73f994fa9612a023c850aa97c35735af8",
+    "@raystack/proton": "0.1.0-330c7558f34570056814d418f99730fb45cfe80f",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-router": "1.58.17",
     "axios": "^1.9.0",
@@ -144,4 +144,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

web/sdk/package.json

@@ -1,12 +1,14 @@
 import { useQuery, useMutation, createConnectQueryKey, useTransport } from '@connectrpc/connect-query';
-import { useQueryClient } from '@tanstack/react-query';
+import { UseMutationResult, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { create } from '@bufbuild/protobuf';
-import { FrontierServiceQueries, CreateCurrentUserPreferencesRequestSchema } from '@raystack/proton/frontier';
+import { FrontierServiceQueries, CreateCurrentUserPreferencesRequestSchema, ListCurrentUserPreferencesRequestSchema } from '@raystack/proton/frontier';
 import { useCallback, useMemo } from 'react';
 
 type Preference = {
   name?: string;
   value?: string;
+  scopeType?: string;
+  scopeId?: string;
   [key: string]: any;
 };
 
@@ -21,6 +23,8 @@ export interface UsePreferences {
   updatePreferences: (
     preferences: Preference[]
   ) => Promise<void>;
+  fetchPreferencesStatus: UseQueryResult['status'];
+  updatePreferencesStatus: UseMutationResult['status'];
 }
 
 function getFormattedData(preferences: Preference[] = []): Preferences {
@@ -31,20 +35,28 @@ function getFormattedData(preferences: Preference[] = []): Preferences {
 }
 
 export function usePreferences({
-  autoFetch = true
+  autoFetch = true,
+  scopeType,
+  scopeId
 }: {
   autoFetch?: boolean;
+  scopeType?: string;
+  scopeId?: string;
 } = {}): UsePreferences {
   const queryClient = useQueryClient();
   const transport = useTransport();
 
   const {
     data: preferencesData,
     isLoading: isFetchingPreferences,
-    refetch
+    refetch,
+    status: fetchPreferencesStatus
   } = useQuery(
     FrontierServiceQueries.listCurrentUserPreferences,
-    {},
+create(ListCurrentUserPreferencesRequestSchema, {
+      scopeType,
+      scopeId
+    }),
     {
       enabled: autoFetch
     }
@@ -54,14 +66,14 @@ export function usePreferences({
 
   const {
     mutateAsync: updatePreferencesMutation,
-    isPending: isUpdatingPreferences
+    isPending: isUpdatingPreferences,
+    status: updatePreferencesStatus
   } = useMutation(FrontierServiceQueries.createCurrentUserPreferences, {
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: createConnectQueryKey({
           schema: FrontierServiceQueries.listCurrentUserPreferences,
           transport,
-          input: {},
           cardinality: 'finite'
         })
       });
@@ -101,6 +113,8 @@ export function usePreferences({
     isLoading: isUpdatingPreferences,
     isFetching: isFetchingPreferences,
     fetchPreferences: refetch,
-    updatePreferences
+    updatePreferences,
+    updatePreferencesStatus,
+    fetchPreferencesStatus
   };
 }

web/sdk/react/hooks/usePreferences.ts

@@ -1,15 +1,32 @@
 {
   "extends": "@raystack/frontier-tsconfig/react-library.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "target": "ES2015",
-    "lib": ["ES2020", "DOM"],
+    "lib": [
+      "ES2020",
+      "DOM"
+    ],
     "paths": {
-      "~/*": ["./*"],
-      "~hooks": ["./hooks/index.ts"]
+      "~/*": [
+        "./*"
+      ],
+      "~hooks": [
+        "./hooks/index.ts"
+      ]
     },
-    "types": ["jest"]
+    "types": [
+      "jest"
+    ]
   },
-  "include": ["."],
-  "exclude": ["dist", "react/dist", "hooks/dist", "node_modules"]
-}
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "dist",
+    "react/dist",
+    "hooks/dist",
+    "node_modules"
+  ]
+}