feat(ui): global workspace and subscription context

frontend/src/context/SubscriptionContext/SubscriptionContext.tsx

@@ -0,0 +1,47 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react';
+
+import { useGetOrgSubscription } from '@app/hooks/api';
+import { GetSubscriptionPlan } from '@app/hooks/api/types';
+
+import { useWorkspace } from '../WorkspaceContext';
+// import { Subscription } from '@app/hooks/api/workspace/types';
+
+type TSubscriptionContext = {
+  subscription?: GetSubscriptionPlan;
+  subscriptionPlan: string;
+  isLoading: boolean;
+};
+
+const SubscriptionContext = createContext<TSubscriptionContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const SubscriptionProvider = ({ children }: Props): JSX.Element => {
+  const { currentWorkspace } = useWorkspace();
+  const { data, isLoading } = useGetOrgSubscription({
+    orgID: currentWorkspace?.organization || ''
+  });
+
+  // memorize the workspace details for the context
+  const value = useMemo<TSubscriptionContext>(
+    () => ({
+      subscription: data,
+      subscriptionPlan: data?.data?.[0]?.plan?.product || '',
+      isLoading
+    }),
+    [data, isLoading]
+  );
+
+  return <SubscriptionContext.Provider value={value}>{children}</SubscriptionContext.Provider>;
+};
+
+export const useSubscription = () => {
+  const ctx = useContext(SubscriptionContext);
+  if (!ctx) {
+    throw new Error('useSubscription has to be used within <SubscriptionContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/SubscriptionContext/index.tsx

@@ -0,0 +1 @@
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';

frontend/src/context/WorkspaceContext/WorkspaceContext.tsx

@@ -0,0 +1,52 @@
+import { createContext, ReactNode, useContext, useEffect, useMemo } from 'react';
+import { useRouter } from 'next/router';
+
+import { useGetUserWorkspaces } from '@app/hooks/api';
+import { Workspace } from '@app/hooks/api/workspace/types';
+
+type TWorkspaceContext = {
+  workspaces: Workspace[];
+  currentWorkspace?: Workspace;
+  isLoading: boolean;
+};
+
+const WorkspaceContext = createContext<TWorkspaceContext | null>(null);
+
+type Props = {
+  children: ReactNode;
+};
+
+export const WorkspaceProvider = ({ children }: Props): JSX.Element => {
+  const { data: ws, isLoading } = useGetUserWorkspaces();
+  const router = useRouter();
+  const workspaceId = router.query.id;
+
+  // memorize the workspace details for the context
+  const value = useMemo<TWorkspaceContext>(() => {
+    return {
+      workspaces: ws || [],
+      currentWorkspace: (ws || []).find(({ _id: id }) => id === workspaceId),
+      isLoading
+    };
+  }, [ws, workspaceId, isLoading]);
+
+  useEffect(() => {
+    // not loading and current workspace is empty
+    // ws empty means user has no access to the ws
+    // push to the first workspace
+    if (!isLoading && !value?.currentWorkspace?._id) {
+      router.push(`/dashboard/${value.workspaces?.[0]?._id}`);
+    }
+  }, [value?.currentWorkspace?._id, isLoading, value.workspaces?.[0]?._id, router.pathname]);
+
+  return <WorkspaceContext.Provider value={value}>{children}</WorkspaceContext.Provider>;
+};
+
+export const useWorkspace = () => {
+  const ctx = useContext(WorkspaceContext);
+  if (!ctx) {
+    throw new Error('useWorkspace has to be used within <WorkspaceContext.Provider>');
+  }
+
+  return ctx;
+};

frontend/src/context/WorkspaceContext/index.tsx

@@ -0,0 +1 @@
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';

frontend/src/context/index.tsx

@@ -0,0 +1,2 @@
+export { SubscriptionProvider, useSubscription } from './SubscriptionContext';
+export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';