Fixed organization issues for switcher , delete wallet and schema list

nextjs/src/app/organizations/schemas/create/page.tsx

@@ -1,9 +1,12 @@
 import CreateSchema from '@/features/schemas/components/Create'
+import PageContainer from '@/components/layout/page-container'
 import React from 'react'
 
 const page = (): React.JSX.Element => (
   <div>
-    <CreateSchema />
+    <PageContainer>
+      <CreateSchema />
+    </PageContainer>
   </div>
 )
 

nextjs/src/components/layout/header.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { currentPageNumber, itemPerPage } from '@/config/CommonConstant'
 import { setOrgId, setOrgInfo } from '@/lib/orgSlice'
@@ -13,19 +15,16 @@ import { getOrganizations } from '@/app/api/organization'
 
 export default function Header(): React.JSX.Element {
   const dispatch = useAppDispatch()
-  const [currentPage] = useState(currentPageNumber)
-  const [pageSize] = useState(itemPerPage)
-  const [searchTerm] = useState('')
   const [orgList, setOrgList] = useState<Organisation[]>([])
   const tenantId = useAppSelector((state) => state.organization.orgId)
 
   useEffect(() => {
     const fetchOrganizations = async (): Promise<void> => {
       try {
         const response = await getOrganizations(
-          currentPage,
-          pageSize,
-          searchTerm,
+          currentPageNumber,
+          itemPerPage,
+          '',
           '',
         )
         if (
@@ -63,7 +62,7 @@ export default function Header(): React.JSX.Element {
     }
 
     fetchOrganizations()
-  }, [dispatch, currentPage, pageSize, searchTerm, tenantId])
+  }, [])
 
   const handleSwitchTenant = (orgId: string): void => {
     const selected = orgList.find((org) => org.id === orgId)

nextjs/src/components/org-switcher.tsx

@@ -9,16 +9,17 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
-import React, { useEffect } from 'react'
 import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar'
-import { setOrgId, setOrgRoles, setSelectedOrgId } from '@/lib/orgSlice'
+import { setOrgRoles, setSelectedOrgId, setTenantData } from '@/lib/orgSlice'
 import { useAppDispatch, useAppSelector } from '@/lib/hooks'
 
 import { AxiosResponse } from 'axios'
+import React from 'react'
+import { RootState } from '@/lib/store'
 import { apiStatusCodes } from '@/config/CommonConstant'
 import { getOrganizationRoles } from '@/app/api/organization'
 import { useRouter } from 'next/navigation'
@@ -29,22 +30,22 @@ interface Tenant {
   logoUrl?: string
 }
 
-export function OrgSwitcher({
+const OrgSwitcherInner = ({
   tenants,
   defaultTenant,
   onTenantSwitch,
 }: {
   tenants: Tenant[]
   defaultTenant?: Tenant
   onTenantSwitch?: (tenantId: string) => void
-}): React.ReactElement {
-  const [selectedTenant, setSelectedTenant] = React.useState<
-    Tenant | undefined
-  >(defaultTenant ?? tenants[0])
+}): React.ReactElement => {
+  const selectedTenant =
+    useAppSelector((state: RootState) => state.organization.selectedTenant) ??
+    defaultTenant ??
+    tenants[0]
 
   const dispatch = useAppDispatch()
   const router = useRouter()
-
   const selectedOrgId = useAppSelector((state) => state.organization.orgId)
 
   const currentTenant = React.useMemo(() => {
@@ -73,9 +74,8 @@ export function OrgSwitcher({
   }
 
   const handleTenantSwitch = (tenant: Tenant): void => {
-    dispatch(setOrgId(tenant.id))
     dispatch(setSelectedOrgId(tenant.id))
-    setSelectedTenant(tenant)
+    dispatch(setTenantData(tenant))
     getRoles(tenant.id)
     if (onTenantSwitch) {
       onTenantSwitch(tenant.id)
@@ -91,21 +91,6 @@ export function OrgSwitcher({
       .toUpperCase()
   }
 
-  useEffect(() => {
-    if (selectedOrgId) {
-      getRoles(selectedOrgId)
-    }
-  }, [selectedOrgId])
-
-  useEffect(() => {
-    if (selectedOrgId && tenants.length > 0) {
-      const found = tenants.find((item) => item.id === selectedOrgId)
-      if (found) {
-        setSelectedTenant(found)
-      }
-    }
-  }, [selectedOrgId, tenants])
-
   return (
     <SidebarMenu>
       <SidebarMenuItem>
@@ -214,3 +199,5 @@ export function OrgSwitcher({
     </SidebarMenu>
   )
 }
+
+export const OrgSwitcher = React.memo(OrgSwitcherInner)

nextjs/src/features/organization/components/DeleteOrganization.tsx

@@ -102,7 +102,6 @@ export default function DeleteOrganizationPage(): React.JSX.Element {
     try {
       const response = await getOrganizationReferences(orgId)
       const { data } = response as AxiosResponse
-
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
         const orgData = data?.data
         setOrganizationData(orgData)
@@ -201,14 +200,10 @@ export default function DeleteOrganizationPage(): React.JSX.Element {
       // Assuming deleteOrganizationWallet needs orgId
       const response = await deleteOrganizationWallet(orgId as string)
       const { data } = response as AxiosResponse
-
       if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
         toast.success(data?.message)
         setIsWalletPresent(false)
         await fetchOrganizationReferences()
-        setTimeout(() => {
-          window.location.reload()
-        }, 3000)
         setShowPopup(false)
       } else {
         setError(response as string)
@@ -342,7 +337,7 @@ export default function DeleteOrganizationPage(): React.JSX.Element {
                 title={card.title}
                 description={card.description}
                 count={card.count}
-                isDisabled={card.isDisabled}
+                isDisabled={card.isDisabled || deleteLoading || loading}
                 onDeleteClick={() => {
                   setShowPopup(true)
                   setDeleteAction(() => card.deleteFunc)

nextjs/src/features/organization/components/OrganizationList.tsx

@@ -10,7 +10,7 @@ import {
   PaginationPrevious,
 } from '@/components/ui/pagination'
 import React, { useEffect, useState } from 'react'
-import { setOrgId, setOrgInfo } from '@/lib/orgSlice'
+import { setOrgId, setOrgInfo, setTenantData } from '@/lib/orgSlice'
 
 import { AxiosResponse } from 'axios'
 import { Button } from '@/components/ui/button'
@@ -97,7 +97,13 @@ export const OrganizationList = (): React.JSX.Element => {
 
     if (selectedOrg) {
       dispatch(setOrgId(selectedOrg.id))
-
+      dispatch(
+        setTenantData({
+          id: selectedOrg.id,
+          name: selectedOrg.name,
+          logoUrl: selectedOrg.logoUrl,
+        }),
+      )
       const orgRoles = selectedOrg?.userOrgRoles
 
       dispatch(

nextjs/src/lib/orgSlice.ts

@@ -1,6 +1,10 @@
 // src/lib/orgSlice.ts
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
-
+interface Tenant {
+  id: string
+  name: string
+  logoUrl?: string
+}
 interface OrgInfo {
   id?: string
   name?: string
@@ -15,6 +19,7 @@ interface OrgState {
   selectedOrgId: string
   orgInfo: OrgInfo | null
   orgRoles: string[]
+  selectedTenant: Tenant | null
 }
 
 const initialState: OrgState = {
@@ -23,6 +28,7 @@ const initialState: OrgState = {
   selectedOrgId: '',
   orgInfo: null,
   orgRoles: [],
+  selectedTenant: null,
 }
 
 const orgSlice = createSlice({
@@ -44,6 +50,9 @@ const orgSlice = createSlice({
     setOrgRoles: (state, action: PayloadAction<string[]>) => {
       state.orgRoles = action.payload
     },
+    setTenantData: (state, action: PayloadAction<Tenant>) => {
+      state.selectedTenant = action.payload
+    },
     clearOrgId: (state) => {
       state.orgId = ''
     },
@@ -67,5 +76,6 @@ export const {
   clearLedgerId,
   clearOrgInfo,
   resetOrgState,
+  setTenantData,
 } = orgSlice.actions
 export default orgSlice.reducer