diff --git a/frontend/src/context/OrganizationContext/OrganizationContext.tsx b/frontend/src/context/OrganizationContext/OrganizationContext.tsx new file mode 100644 index 000000000..6f5a1562e --- /dev/null +++ b/frontend/src/context/OrganizationContext/OrganizationContext.tsx @@ -0,0 +1,46 @@ +import { createContext, ReactNode, useContext, useMemo } from 'react'; + +import { useGetOrganization } from '@app/hooks/api'; +import { Organization } from '@app/hooks/api/types'; + +import { useWorkspace } from '../WorkspaceContext'; + +type TOrgContext = { + orgs?: Organization[]; + currentOrg?: Organization; + isLoading: boolean; +}; + +const OrgContext = createContext(null); + +type Props = { + children: ReactNode; +}; + +export const OrgProvider = ({ children }: Props): JSX.Element => { + const { currentWorkspace } = useWorkspace(); + const { data: userOrgs, isLoading } = useGetOrganization(); + + const currentWsOrgID = currentWorkspace?.organization; + + // memorize the workspace details for the context + const value = useMemo( + () => ({ + org: userOrgs, + currentOrg: (userOrgs || []).find(({ _id }) => _id === currentWsOrgID), + isLoading + }), + [currentWsOrgID, userOrgs, isLoading] + ); + + return {children}; +}; + +export const useOrgnization = () => { + const ctx = useContext(OrgContext); + if (!ctx) { + throw new Error('useOrgnization to be used within '); + } + + return ctx; +}; diff --git a/frontend/src/context/OrganizationContext/index.tsx b/frontend/src/context/OrganizationContext/index.tsx new file mode 100644 index 000000000..8f21078cb --- /dev/null +++ b/frontend/src/context/OrganizationContext/index.tsx @@ -0,0 +1 @@ +export { OrgProvider, useOrgnization } from './OrganizationContext'; diff --git a/frontend/src/context/UserContext/UserContext.tsx b/frontend/src/context/UserContext/UserContext.tsx new file mode 100644 index 000000000..0c6ce9549 --- /dev/null +++ b/frontend/src/context/UserContext/UserContext.tsx @@ -0,0 +1,38 @@ +import { createContext, ReactNode, useContext, useMemo } from 'react'; + +import { useGetUser } from '@app/hooks/api'; +import { User } from '@app/hooks/api/types'; + +type TUserContext = { + user: User; + isLoading: boolean; +}; + +const UserContext = createContext(null); + +type Props = { + children: ReactNode; +}; + +export const UserProvider = ({ children }: Props): JSX.Element => { + const { data, isLoading } = useGetUser(); + + // memorize the workspace details for the context + const value = useMemo(() => { + return { + user: data!, + isLoading + }; + }, [data, isLoading]); + + return {children}; +}; + +export const useUser = () => { + const ctx = useContext(UserContext); + if (!ctx) { + throw new Error('useUser has to be used within '); + } + + return ctx; +}; diff --git a/frontend/src/context/UserContext/index.tsx b/frontend/src/context/UserContext/index.tsx new file mode 100644 index 000000000..44aa26a3b --- /dev/null +++ b/frontend/src/context/UserContext/index.tsx @@ -0,0 +1 @@ +export { UserProvider, useUser } from './UserContext'; diff --git a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx index 4edef8e6a..f2876d996 100644 --- a/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx +++ b/frontend/src/context/WorkspaceContext/WorkspaceContext.tsx @@ -23,9 +23,10 @@ export const WorkspaceProvider = ({ children }: Props): JSX.Element => { // memorize the workspace details for the context const value = useMemo(() => { + const wsId = workspaceId || localStorage.getItem('projectData.id'); return { workspaces: ws || [], - currentWorkspace: (ws || []).find(({ _id: id }) => id === workspaceId), + currentWorkspace: (ws || []).find(({ _id: id }) => id === wsId), isLoading }; }, [ws, workspaceId, isLoading]); diff --git a/frontend/src/context/index.tsx b/frontend/src/context/index.tsx index 1bf59f9ac..31c7f7985 100644 --- a/frontend/src/context/index.tsx +++ b/frontend/src/context/index.tsx @@ -1,2 +1,5 @@ +export { AuthProvider } from './AuthContext'; +export { OrgProvider, useOrgnization } from './OrganizationContext'; export { SubscriptionProvider, useSubscription } from './SubscriptionContext'; +export { UserProvider, useUser } from './UserContext'; export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';