migrate(sdk): teams page api

sdks/js/packages/core/react/components/organization/teams/add.tsx

@@ -14,6 +14,9 @@ import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import cross from '~/react/assets/cross.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useMutation } from '@connectrpc/connect-query';
+import { FrontierServiceQueries, CreateGroupRequestSchema } from '@raystack/proton/frontier';
+import { create } from '@bufbuild/protobuf';
 import styles from '../organization.module.css';
 
 const teamSchema = yup
@@ -35,30 +38,40 @@ type FormData = yup.InferType<typeof teamSchema>;
 
 export const AddTeam = () => {
   const {
-    reset,
-    control,
     handleSubmit,
     formState: { errors, isSubmitting },
     register
   } = useForm({
     resolver: yupResolver(teamSchema)
   });
   const navigate = useNavigate({ from: '/members/modal' });
-  const { client, activeOrganization: organization } = useFrontier();
+  const { activeOrganization: organization } = useFrontier();
 
-  async function onSubmit(data: FormData) {
-    if (!client) return;
-    if (!organization?.id) return;
-
-    try {
-      await client.frontierServiceCreateGroup(organization?.id, data);
+  // Create team using Connect RPC
+  const createTeamMutation = useMutation(FrontierServiceQueries.createGroup, {
+    onSuccess: () => {
       toast.success('Team added');
       navigate({ to: '/teams' });
-    } catch ({ error }: any) {
+    },
+    onError: (error) => {
       toast.error('Something went wrong', {
         description: error.message
       });
     }
+  });
+
+  function onSubmit(data: FormData) {
+    if (!organization?.id) return;
+
+    const request = create(CreateGroupRequestSchema, {
+      orgId: organization.id,
+      body: {
+        title: data.title,
+        name: data.name
+      }
+    });
+
+    createTeamMutation.mutate(request);
   }
 
   return (
@@ -105,7 +118,7 @@ export const AddTeam = () => {
               <Button
                 type="submit"
                 data-test-id="frontier-sdk-add-team-btn"
-                loading={isSubmitting}
+                loading={createTeamMutation.isPending || isSubmitting}
                 loaderText="Adding..."
               >
                 Add team

sdks/js/packages/core/react/components/organization/teams/delete.tsx

@@ -17,7 +17,9 @@ import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 import cross from '~/react/assets/cross.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
-import { V1Beta1Group } from '~/src';
+import { useMutation, useQuery } from '@connectrpc/connect-query';
+import { FrontierServiceQueries, DeleteGroupRequestSchema, GetGroupRequestSchema } from '@raystack/proton/frontier';
+import { create } from '@bufbuild/protobuf';
 import styles from '../organization.module.css';
 
 const teamSchema = yup
@@ -38,52 +40,54 @@ export const DeleteTeam = () => {
   });
   let { teamId } = useParams({ from: `/teams/$teamId/delete` });
   const navigate = useNavigate();
-  const [team, setTeam] = useState<V1Beta1Group>();
-  const [isTeamLoading, setIsTeamLoading] = useState(false);
   const [isAcknowledged, setIsAcknowledged] = useState(false);
 
-  const { client, activeOrganization: organization } = useFrontier();
+  const { activeOrganization: organization } = useFrontier();
 
+  // Get team details using Connect RPC
+  const { data: teamData, isLoading: isTeamLoading, error: teamError } = useQuery(
+    FrontierServiceQueries.getGroup,
+    create(GetGroupRequestSchema, { id: teamId || '', orgId: organization?.id || '' }),
+    { enabled: !!organization?.id && !!teamId }
+  );
+
+  const team = teamData?.group;
+
+  // Handle team error
   useEffect(() => {
-    async function getTeamDetails() {
-      if (!organization?.id || !teamId) return;
+    if (teamError) {
+      toast.error('Something went wrong', {
+        description: teamError.message
+      });
+    }
+  }, [teamError]);
 
-      try {
-        setIsTeamLoading(true);
-        const {
-          // @ts-ignore
-          data: { group }
-        } = await client?.frontierServiceGetGroup(organization?.id, teamId);
-        setTeam(group);
-      } catch ({ error }: any) {
-        toast.error('Something went wrong', {
-          description: error.message
-        });
-      } finally {
-        setIsTeamLoading(false);
-      }
+  // Delete team using Connect RPC
+  const deleteTeamMutation = useMutation(FrontierServiceQueries.deleteGroup, {
+    onSuccess: () => {
+      toast.success('team deleted');
+      navigate({ to: '/teams' });
+    },
+    onError: (error) => {
+      toast.error('Something went wrong', {
+        description: error.message
+      });
     }
-    getTeamDetails();
-  }, [client, organization?.id, teamId]);
+  });
 
-  async function onSubmit(data: any) {
+  function onSubmit(data: { name?: string }) {
     if (!organization?.id) return;
     if (!teamId) return;
-    if (!client) return;
 
     if (data.name !== team?.name)
       return setError('name', { message: 'team name is not same' });
 
-    try {
-      await client.frontierServiceDeleteGroup(organization.id, teamId);
-      toast.success('team deleted');
+    const request = create(DeleteGroupRequestSchema, {
+      id: teamId,
+      orgId: organization.id
+    });
 
-      navigate({ to: '/teams' });
-    } catch ({ error }: any) {
-      toast.error('Something went wrong', {
-        description: error.message
-      });
-    }
+    deleteTeamMutation.mutate(request);
   }
 
   const name = watch('name', '');
@@ -158,7 +162,7 @@ export const DeleteTeam = () => {
                     type="submit"
                     style={{ width: '100%' }}
                     data-test-id="frontier-sdk-delete-team-btn-general"
-                    loading={isSubmitting}
+                    loading={deleteTeamMutation.isPending || isSubmitting}
                     loaderText="Deleting..."
                   >
                     Delete this team

sdks/js/packages/core/react/components/organization/teams/general/index.tsx

@@ -14,11 +14,12 @@ import { useNavigate, useParams } from '@tanstack/react-router';
 import { useEffect, useMemo } from 'react';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
-import { useFrontier } from '~/react/contexts/FrontierContext';
 import { usePermissions } from '~/react/hooks/usePermissions';
-import { V1Beta1Group, V1Beta1Organization } from '~/src';
 import { PERMISSIONS, shouldShowComponent } from '~/utils';
 import { AuthTooltipMessage } from '~/react/utils';
+import { useMutation } from '@connectrpc/connect-query';
+import { FrontierServiceQueries, UpdateGroupRequestSchema, type Group, type Organization } from '@raystack/proton/frontier';
+import { create } from '@bufbuild/protobuf';
 
 const teamSchema = yup
   .object({
@@ -30,8 +31,8 @@ const teamSchema = yup
 type FormData = yup.InferType<typeof teamSchema>;
 
 interface GeneralTeamProps {
-  team?: V1Beta1Group;
-  organization?: V1Beta1Organization;
+  team?: Group;
+  organization?: Organization;
   isLoading?: boolean;
 }
 
@@ -50,7 +51,6 @@ export const General = ({
   });
 
   let { teamId } = useParams({ from: '/teams/$teamId' });
-  const { client } = useFrontier();
 
   useEffect(() => {
     reset(team);
@@ -91,19 +91,32 @@ export const General = ({
 
   const isLoading = isTeamLoading || isPermissionsFetching;
 
-  async function onSubmit(data: FormData) {
-    if (!client) return;
-    if (!organization?.id) return;
-    if (!teamId) return;
-
-    try {
-      await client.frontierServiceUpdateGroup(organization?.id, teamId, data);
+  // Update team using Connect RPC
+  const updateTeamMutation = useMutation(FrontierServiceQueries.updateGroup, {
+    onSuccess: () => {
       toast.success('Team updated');
-    } catch ({ error }: any) {
+    },
+    onError: (error) => {
       toast.error('Something went wrong', {
-        description: error.message
+        description: error.message || 'Failed to update team'
       });
     }
+  });
+
+  function onSubmit(data: FormData) {
+    if (!organization?.id) return;
+    if (!teamId) return;
+
+    const request = create(UpdateGroupRequestSchema, {
+      id: teamId,
+      orgId: organization.id,
+      body: {
+        title: data.title,
+        name: data.name
+      }
+    });
+
+    updateTeamMutation.mutate(request);
   }
 
   return (
@@ -148,7 +161,7 @@ export const General = ({
                 type="submit"
                 disabled={!canUpdateGroup}
                 data-test-id="frontier-sdk-update-team-btn"
-                loading={isSubmitting}
+                loading={updateTeamMutation.isPending || isSubmitting}
                 loaderText="Updating..."
               >
                 Update team