Fix(sdk): styling and rerendring issues (#407)

* chore: update team and project create form error message * chore: remove privacy column from project list * fix: reduce sdk rerendering * fix: remove tailwind classes * chore: update apsara version * fix: prevent redundant calls in delete route * feat: add options to switch between user teams and org teams for admin * fix: forward ref warning in select field * fix: reduce component rerendering
raystack · Oct 31, 2023 · e00fe93 · e00fe93
1 parent 853427e
commit e00fe93
Show file tree

Hide file tree

Showing 16 changed files with 648 additions and 166 deletions.
diff --git a/sdks/js/packages/core/package.json b/sdks/js/packages/core/package.json
@@ -71,7 +71,7 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.1",
-    "@raystack/apsara": "^0.11.5",
+    "@raystack/apsara": "^0.11.7",
     "@tanstack/react-router": "0.0.1-beta.174",
     "axios": "^1.5.0",
     "class-variance-authority": "^0.7.0",

diff --git a/sdks/js/packages/core/react/components/organization/create.tsx b/sdks/js/packages/core/react/components/organization/create.tsx
@@ -11,7 +11,6 @@ import { Container } from '../Container';
 // @ts-ignore
 import styles from './organization.module.css';
 
-
 type CreateOrganizationProps = ComponentPropsWithRef<typeof Container> & {
   title?: string;
   description?: string;
@@ -88,7 +87,6 @@ export const CreateOrganization = ({
                     {...field}
                     // @ts-ignore
                     size="medium"
-                    label="Workspace URL"
                     placeholder="raystack.org/"
                   />
                 )}

diff --git a/sdks/js/packages/core/react/components/organization/members/invite.tsx b/sdks/js/packages/core/react/components/organization/members/invite.tsx
@@ -192,35 +192,38 @@ export const InviteMember = () => {
                 <Skeleton height={'25px'} />
               ) : (
                 <Controller
-                  render={({ field }) => (
-                    <Select {...field} onValueChange={field.onChange}>
-                      <Select.Trigger className="w-[180px]">
-                        <Select.Value placeholder="Select a role" />
-                      </Select.Trigger>
-                      <Select.Content
-                        style={{
-                          width: '100% !important',
-                          minWidth: '180px',
-                          zIndex: 65
-                        }}
-                      >
-                        <Select.Group>
-                          {!roles.length && (
-                            <Select.Label
-                              style={{ color: 'var(--foreground-base)' }}
-                            >
-                              No roles available
-                            </Select.Label>
-                          )}
-                          {roles.map(role => (
-                            <Select.Item value={role.id} key={role.id}>
-                              {role.title || role.name}
-                            </Select.Item>
-                          ))}
-                        </Select.Group>
-                      </Select.Content>
-                    </Select>
-                  )}
+                  render={({ field }) => {
+                    const { ref, onChange, ...rest } = field;
+                    return (
+                      <Select {...rest} onValueChange={onChange}>
+                        <Select.Trigger className="w-[180px]" ref={ref}>
+                          <Select.Value placeholder="Select a role" />
+                        </Select.Trigger>
+                        <Select.Content
+                          style={{
+                            width: '100% !important',
+                            minWidth: '180px',
+                            zIndex: 65
+                          }}
+                        >
+                          <Select.Group>
+                            {!roles.length && (
+                              <Select.Label
+                                style={{ color: 'var(--foreground-base)' }}
+                              >
+                                No roles available
+                              </Select.Label>
+                            )}
+                            {roles.map(role => (
+                              <Select.Item value={role.id} key={role.id}>
+                                {role.title || role.name}
+                              </Select.Item>
+                            ))}
+                          </Select.Group>
+                        </Select.Content>
+                      </Select>
+                    );
+                  }}
                   control={control}
                   name="type"
                 />
@@ -235,35 +238,38 @@ export const InviteMember = () => {
                 <Skeleton height={'25px'} />
               ) : (
                 <Controller
-                  render={({ field }) => (
-                    <Select {...field} onValueChange={field.onChange}>
-                      <Select.Trigger className="w-[180px]" op>
-                        <Select.Value placeholder="Select a team" />
-                      </Select.Trigger>
-                      <Select.Content
-                        style={{
-                          width: '100% !important',
-                          minWidth: '180px',
-                          zIndex: 65
-                        }}
-                      >
-                        <Select.Group>
-                          {!teams.length && (
-                            <Select.Label
-                              style={{ color: 'var(--foreground-base)' }}
-                            >
-                              No teams available
-                            </Select.Label>
-                          )}
-                          {teams.map(t => (
-                            <Select.Item value={t.id} key={t.id}>
-                              {t.title}
-                            </Select.Item>
-                          ))}
-                        </Select.Group>
-                      </Select.Content>
-                    </Select>
-                  )}
+                  render={({ field }) => {
+                    const { ref, onChange, ...rest } = field;
+                    return (
+                      <Select {...rest} onValueChange={onChange}>
+                        <Select.Trigger className="w-[180px]" ref={ref}>
+                          <Select.Value placeholder="Select a team" />
+                        </Select.Trigger>
+                        <Select.Content
+                          style={{
+                            width: '100% !important',
+                            minWidth: '180px',
+                            zIndex: 65
+                          }}
+                        >
+                          <Select.Group>
+                            {!teams.length && (
+                              <Select.Label
+                                style={{ color: 'var(--foreground-base)' }}
+                              >
+                                No teams available
+                              </Select.Label>
+                            )}
+                            {teams.map(t => (
+                              <Select.Item value={t.id} key={t.id}>
+                                {t.title}
+                              </Select.Item>
+                            ))}
+                          </Select.Group>
+                        </Select.Content>
+                      </Select>
+                    );
+                  }}
                   control={control}
                   name="team"
                 />

diff --git a/sdks/js/packages/core/react/components/organization/preferences/index.tsx b/sdks/js/packages/core/react/components/organization/preferences/index.tsx
@@ -122,7 +122,7 @@ export const PreferencesSelection = ({
         </Text>
       </Flex>
       <Select onValueChange={onSelection} defaultValue={defaultValue}>
-        <Select.Trigger className="w-[180px]">
+        <Select.Trigger>
           <Select.Value placeholder={label} />
         </Select.Trigger>
         <Select.Content style={{ minWidth: '120px' }}>

diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -5,8 +5,9 @@ import {
   RouterProvider,
   Router,
   Route,
-  RootRoute,
-  createMemoryHistory
+  createMemoryHistory,
+  useRouterContext,
+  RouterContext
 } from '@tanstack/react-router';
 import { Toaster } from 'sonner';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -41,25 +42,60 @@ interface OrganizationProfileProps {
   defaultRoute?: string;
 }
 
-const rootRoute = new RootRoute({
-  component: () => {
-    return (
-      <ThemeProvider>
-        <SkeletonTheme
-          highlightColor="var(--background-base)"
-          baseColor="var(--background-base-hover)"
-        >
-          <Toaster richColors />
-          <Flex style={{ width: '100%', height: '100%' }}>
-            <Sidebar />
-            <Outlet />
-          </Flex>
-        </SkeletonTheme>
-      </ThemeProvider>
-    );
-  }
-});
+const RootRouter = () => {
+  const { organizationId } = useRouterContext({ from: '__root__' });
+  const { client, setActiveOrganization, setIsActiveOrganizationLoading } =
+    useFrontier();
+
+  const fetchOrganization = useCallback(async () => {
+    try {
+      setIsActiveOrganizationLoading(true);
+      const {
+        // @ts-ignore
+        data: { organization }
+      } = await client?.frontierServiceGetOrganization(organizationId);
+      setActiveOrganization(organization);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setIsActiveOrganizationLoading(false);
+    }
+  }, [
+    client,
+    organizationId,
+    setActiveOrganization,
+    setIsActiveOrganizationLoading
+  ]);
+
+  useEffect(() => {
+    if (organizationId) {
+      fetchOrganization();
+    } else {
+      setActiveOrganization(undefined);
+    }
+  }, [organizationId, fetchOrganization, setActiveOrganization]);
+
+  return (
+    <ThemeProvider>
+      <SkeletonTheme
+        highlightColor="var(--background-base)"
+        baseColor="var(--background-base-hover)"
+      >
+        <Toaster richColors />
+        <Flex style={{ width: '100%', height: '100%' }}>
+          <Sidebar />
+          <Outlet />
+        </Flex>
+      </SkeletonTheme>
+    </ThemeProvider>
+  );
+};
 
+const routerContext = new RouterContext<{ organizationId: string }>();
+
+const rootRoute = routerContext.createRootRoute({
+  component: RootRouter
+});
 const indexRoute = new Route({
   getParentRoute: () => rootRoute,
   path: '/',
@@ -203,48 +239,21 @@ const routeTree = rootRoute.addChildren([
   preferencesRoute
 ]);
 
-const router = new Router({ routeTree });
+const router = new Router({ routeTree, context: { organizationId: '' } });
 
 export const OrganizationProfile = ({
   organizationId,
   defaultRoute = '/'
 }: OrganizationProfileProps) => {
-  const { client, setActiveOrganization, setIsActiveOrganizationLoading } =
-    useFrontier();
-
-  const fetchOrganization = useCallback(async () => {
-    try {
-      setIsActiveOrganizationLoading(true);
-      const {
-        // @ts-ignore
-        data: { organization }
-      } = await client?.frontierServiceGetOrganization(organizationId);
-      setActiveOrganization(organization);
-    } catch (err) {
-      console.error(err);
-    } finally {
-      setIsActiveOrganizationLoading(false);
-    }
-  }, [
-    client,
-    organizationId,
-    setActiveOrganization,
-    setIsActiveOrganizationLoading
-  ]);
-
-  useEffect(() => {
-    if (organizationId) {
-      fetchOrganization();
-    } else {
-      setActiveOrganization(undefined);
-    }
-  }, [organizationId, fetchOrganization, setActiveOrganization]);
-
   const memoryHistory = createMemoryHistory({
     initialEntries: [defaultRoute]
   });
 
-  const memoryRouter = new Router({ routeTree, history: memoryHistory });
+  const memoryRouter = new Router({
+    routeTree,
+    history: memoryHistory,
+    context: { organizationId }
+  });
 
   return <RouterProvider router={memoryRouter} />;
 };

diff --git a/sdks/js/packages/core/react/components/organization/project/add.tsx b/sdks/js/packages/core/react/components/organization/project/add.tsx
@@ -29,7 +29,7 @@ const projectSchema = yup
       .max(50, 'name is not valid, Max 50 characters allowed')
       .matches(
         /^[a-zA-Z0-9_-]{3,50}$/,
-        "Only numbers, letters, '-', and '_' are allowed"
+        "Only numbers, letters, '-', and '_' are allowed. Spaces are not allowed."
       ),
     orgId: yup.string().required()
   })

diff --git a/sdks/js/packages/core/react/components/organization/project/delete.tsx b/sdks/js/packages/core/react/components/organization/project/delete.tsx
@@ -61,7 +61,6 @@ export const DeleteProject = () => {
   }, [client, projectId]);
 
   async function onSubmit(data: any) {
-    console.log('>', data);
     if (!organization?.id) return;
     if (!projectId) return;
     if (!client) return;
@@ -72,7 +71,6 @@ export const DeleteProject = () => {
     try {
       await client.frontierServiceDeleteProject(projectId);
       toast.success('project deleted');
-
       navigate({ to: '/projects' });
     } catch ({ error }: any) {
       toast.error('Something went wrong', {

diff --git a/sdks/js/packages/core/react/components/organization/project/members/invite.tsx b/sdks/js/packages/core/react/components/organization/project/members/invite.tsx
@@ -142,7 +142,7 @@ export const InviteProjectTeam = () => {
                 <Controller
                   render={({ field }) => (
                     <Select {...field} onValueChange={field.onChange}>
-                      <Select.Trigger className="w-[180px]">
+                      <Select.Trigger>
                         <Select.Value placeholder="Select a team" />
                       </Select.Trigger>
                       <Select.Content
@@ -184,7 +184,7 @@ export const InviteProjectTeam = () => {
                 <Controller
                   render={({ field }) => (
                     <Select {...field} onValueChange={field.onChange}>
-                      <Select.Trigger className="w-[180px]">
+                      <Select.Trigger>
                         <Select.Value placeholder="Select a role" />
                       </Select.Trigger>
                       <Select.Content

diff --git a/sdks/js/packages/core/react/components/organization/project/project.tsx b/sdks/js/packages/core/react/components/organization/project/project.tsx
@@ -7,7 +7,7 @@ import {
   useParams,
   useRouterState
 } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import backIcon from '~/react/assets/chevron-left.svg';
 import { useFrontier } from '~/react/contexts/FrontierContext';
@@ -26,9 +26,15 @@ export const ProjectPage = () => {
   let navigate = useNavigate({ from: '/projects/$projectId' });
   const routeState = useRouterState();
 
+  const isDeleteRoute = useMemo(() => {
+    return routeState.matches.some(
+      route => route.routeId === '/projects/$projectId/delete'
+    );
+  }, [routeState.matches]);
+
   useEffect(() => {
     async function getProjectDetails() {
-      if (!organization?.id || !projectId) return;
+      if (!organization?.id || !projectId || isDeleteRoute) return;
 
       try {
         const {
@@ -56,7 +62,13 @@ export const ProjectPage = () => {
       }
     }
     getProjectDetails();
-  }, [client, organization?.id, projectId, routeState.location.key]);
+  }, [
+    client,
+    organization?.id,
+    projectId,
+    routeState.location.key,
+    isDeleteRoute
+  ]);
 
   return (
     <Flex direction="column" style={{ width: '100%' }}>