feat(ui): added org context and user context

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<TOrgContext | null>(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<TOrgContext>(
+    () => ({
+      org: userOrgs,
+      currentOrg: (userOrgs || []).find(({ _id }) => _id === currentWsOrgID),
+      isLoading
+    }),
+    [currentWsOrgID, userOrgs, isLoading]
+  );
+
+  return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
+};
+
+export const useOrgnization = () => {
+  const ctx = useContext(OrgContext);
+  if (!ctx) {
+    throw new Error('useOrgnization to be used within <OrgContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/OrganizationContext/index.tsx

@@ -0,0 +1 @@
+export { OrgProvider, useOrgnization } from './OrganizationContext';

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<TUserContext | null>(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<TUserContext>(() => {
+    return {
+      user: data!,
+      isLoading
+    };
+  }, [data, isLoading]);
+
+  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
+};
+
+export const useUser = () => {
+  const ctx = useContext(UserContext);
+  if (!ctx) {
+    throw new Error('useUser has to be used within <UserContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/UserContext/index.tsx

@@ -0,0 +1 @@
+export { UserProvider, useUser } from './UserContext';

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<TWorkspaceContext>(() => {
+    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]);

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';