feat(sdk): show user preferences and allow user to switch themes (#662)

* refactor: remove `temp` from sdk options and create function to get userNavItems * feat: add flag to show preferneces page * feat: hide sidebar options from user preferences
raystack · Jul 4, 2024 · 2c0f3a5 · 2c0f3a5
1 parent 0955545
commit 2c0f3a5
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 33 deletions.
diff --git a/sdks/js/packages/core/react/components/organization/preferences/index.tsx b/sdks/js/packages/core/react/components/organization/preferences/index.tsx
@@ -75,20 +75,20 @@ export default function UserPreferences() {
           label="Theme"
           text="Customise your interface color scheme."
           name="theme"
-          defaultValue="light"
+          defaultValue={theme}
           values={themeOptions}
           onSelection={value => setTheme(value)}
         />
         <Separator></Separator>
-        <PreferencesSelection
+        {/* <PreferencesSelection
           label="Sidebar"
           text="Select the default state of product sidebar."
           name="sidebar"
           defaultValue="open"
           values={sidebarOptions}
           onSelection={value => console.log(value)}
         />
-        <Separator></Separator>
+        <Separator></Separator> */}
       </Flex>
     </Flex>
   );

diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -45,15 +45,20 @@ import ConfirmPlanChange from './plans/confirm-change';
 interface OrganizationProfileProps {
   organizationId: string;
   defaultRoute?: string;
-  tempShowBilling?: boolean;
-  tempShowTokens?: boolean;
+  showBilling?: boolean;
+  showTokens?: boolean;
+  showPreferences?: boolean;
   hideToast?: boolean;
 }
 
 const routerContext = new RouterContext<
   Pick<
     OrganizationProfileProps,
-    'organizationId' | 'tempShowBilling' | 'tempShowTokens' | 'hideToast'
+    | 'organizationId'
+    | 'showBilling'
+    | 'showTokens'
+    | 'hideToast'
+    | 'showPreferences'
   >
 >();
 
@@ -296,14 +301,20 @@ const routeTree = rootRoute.addChildren([
 
 const router = new Router({
   routeTree,
-  context: { organizationId: '', tempShowBilling: false, tempShowTokens: false }
+  context: {
+    organizationId: '',
+    showBilling: false,
+    showTokens: false,
+    showPreferences: false
+  }
 });
 
 export const OrganizationProfile = ({
   organizationId,
   defaultRoute = '/',
-  tempShowBilling = false,
-  tempShowTokens = false,
+  showBilling = false,
+  showTokens = false,
+  showPreferences = false,
   hideToast = false
 }: OrganizationProfileProps) => {
   const memoryHistory = createMemoryHistory({
@@ -313,9 +324,14 @@ export const OrganizationProfile = ({
   const memoryRouter = new Router({
     routeTree,
     history: memoryHistory,
-    context: { organizationId, tempShowBilling, tempShowTokens, hideToast }
+    context: {
+      organizationId,
+      showBilling,
+      showTokens,
+      hideToast,
+      showPreferences
+    }
   });
-
   return <RouterProvider router={memoryRouter} />;
 };
 

diff --git a/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts b/sdks/js/packages/core/react/components/organization/sidebar/helpers.ts
@@ -8,11 +8,15 @@ export type NavigationItemsTypes = {
 };
 
 interface getOrganizationNavItemsOptions {
-  tempShowBilling?: boolean;
-  tempShowTokens?: boolean;
+  showBilling?: boolean;
+  showTokens?: boolean;
   canSeeBilling?: boolean;
 }
 
+interface getUserNavItemsOptions {
+  showPreferences?: boolean;
+}
+
 export const getOrganizationNavItems = (
   options: getOrganizationNavItemsOptions = {}
 ) =>
@@ -45,27 +49,30 @@ export const getOrganizationNavItems = (
     {
       name: 'Billing',
       to: '/billing',
-      show: options?.tempShowBilling && options?.canSeeBilling
+      show: options?.showBilling && options?.canSeeBilling
     },
     {
       name: 'Tokens',
       to: '/tokens',
-      show: options?.tempShowTokens
+      show: options?.showTokens
     },
     {
       name: 'Plans',
       to: '/plans',
-      show: options?.tempShowBilling
+      show: options?.showBilling
     }
   ].filter(nav => nav.show) as NavigationItemsTypes[];
 
-export const userNavItems = [
-  {
-    name: 'Profile',
-    to: '/profile'
-  }
-  // {
-  //   name: 'Preferences',
-  //   to: '/preferences'
-  // }
-] as NavigationItemsTypes[];
+export const getUserNavItems = (options: getUserNavItemsOptions = {}) =>
+  [
+    {
+      name: 'Profile',
+      to: '/profile',
+      show: true
+    },
+    {
+      name: 'Preferences',
+      to: '/preferences',
+      show: options?.showPreferences
+    }
+  ].filter(nav => nav.show) as NavigationItemsTypes[];
diff --git a/sdks/js/packages/core/react/components/organization/sidebar/index.tsx b/sdks/js/packages/core/react/components/organization/sidebar/index.tsx
@@ -10,7 +10,7 @@ import { Link, useRouterContext, useRouterState } from '@tanstack/react-router';
 import React, { useCallback, useMemo, useState } from 'react';
 import organization from '~/react/assets/organization.png';
 import user from '~/react/assets/user.png';
-import { getOrganizationNavItems, userNavItems } from './helpers';
+import { getOrganizationNavItems, getUserNavItems } from './helpers';
 
 // @ts-ignore
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
@@ -21,9 +21,10 @@ import styles from './sidebar.module.css';
 export const Sidebar = () => {
   const [search, setSearch] = useState('');
   const routerState = useRouterState();
-  const { organizationId, tempShowBilling, tempShowTokens } = useRouterContext({
-    from: '__root__'
-  });
+  const { organizationId, showBilling, showTokens, showPreferences } =
+    useRouterContext({
+      from: '__root__'
+    });
 
   const isActive = useCallback(
     (path: string) =>
@@ -61,11 +62,19 @@ export const Sidebar = () => {
   const organizationNavItems = useMemo(
     () =>
       getOrganizationNavItems({
-        tempShowBilling: tempShowBilling,
+        showBilling: showBilling,
         canSeeBilling: canSeeBilling,
-        tempShowTokens: tempShowTokens
+        showTokens: showTokens
       }),
-    [tempShowBilling, canSeeBilling, tempShowTokens]
+    [showBilling, canSeeBilling, showTokens]
+  );
+
+  const userNavItems = useMemo(
+    () =>
+      getUserNavItems({
+        showPreferences: showPreferences
+      }),
+    []
   );
 
   return (