refactor: inbox & project related stores.

web/components/analytics/custom-analytics/select-bar.tsx

@@ -18,7 +18,7 @@ type Props = {
 export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
   const { control, setValue, params, fullScreen, isProjectLevel } = props;
 
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds: workspaceProjectIds } = useProject();
 
   return (
     <div
@@ -36,7 +36,7 @@ export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
               <SelectProject
                 value={value ?? undefined}
                 onChange={onChange}
-                projectIds={workspaceProjects ?? undefined}
+                projectIds={workspaceProjectIds ?? undefined}
               />
             )}
           />

web/components/analytics/custom-analytics/sidebar/sidebar.tsx

@@ -38,7 +38,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { setToastAlert } = useToast();
   // store hooks
   const { currentUser } = useUser();
-  const { workspaceProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, getProjectById } = useProject();
   const { fetchCycleDetails, getCycleById } = useCycle();
   const { fetchModuleDetails, getModuleById } = useModule();
 
@@ -136,7 +136,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
     fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
   }, [moduleId, moduleDetails, fetchModuleDetails, projectId, workspaceSlug]);
 
-  const selectedProjects = params.project && params.project.length > 0 ? params.project : workspaceProjects;
+  const selectedProjects = params.project && params.project.length > 0 ? params.project : workspaceProjectIds;
 
   return (
     <div

web/components/exporter/export-modal.tsx

@@ -32,11 +32,11 @@ export const Exporter: React.FC<Props> = observer((props) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
   // store hooks
-  const { workspaceProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, getProjectById } = useProject();
   // toast alert
   const { setToastAlert } = useToast();
 
-  const options = workspaceProjects?.map((projectId) => {
+  const options = workspaceProjectIds?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
 
     return {

web/components/headers/projects.tsx

@@ -16,7 +16,7 @@ export const ProjectsHeader = observer(() => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { workspaceProjects, searchQuery, setSearchQuery } = useProject();
+  const { workspaceProjectIds, searchQuery, setSearchQuery } = useProject();
 
   const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER;
 
@@ -34,7 +34,7 @@ export const ProjectsHeader = observer(() => {
         </div>
       </div>
       <div className="flex items-center gap-3">
-        {workspaceProjects && workspaceProjects?.length > 0 && (
+        {workspaceProjectIds && workspaceProjectIds?.length > 0 && (
           <div className="flex w-full items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
             <Search className="h-3.5 w-3.5" />
             <input

web/components/inbox/issues-list-sidebar.tsx

@@ -12,7 +12,7 @@ export const InboxIssuesListSidebar = observer(() => {
   const router = useRouter();
   const { inboxId, inboxIssueId } = router.query;
 
-  const { currentInboxIssues } = useInboxIssues();
+  const { currentInboxIssueIds: currentInboxIssues } = useInboxIssues();
 
   const issuesList = currentInboxIssues;
 

web/components/inbox/main-content.tsx

@@ -33,7 +33,7 @@ export const InboxMainContent: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
   // store hooks
-  const { currentInboxIssues, fetchIssueDetails, getIssueById, updateIssue } = useInboxIssues();
+  const { currentInboxIssueIds: currentInboxIssues, fetchIssueDetails, getIssueById, updateIssue } = useInboxIssues();
   const {
     currentUser,
     membership: { currentProjectRole },

web/components/integration/github/import-data.tsx

@@ -22,9 +22,9 @@ type Props = {
 export const GithubImportData: FC<Props> = observer((props) => {
   const { handleStepChange, integration, control, watch } = props;
   // store hooks
-  const { workspaceProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, getProjectById } = useProject();
 
-  const options = workspaceProjects?.map((projectId) => {
+  const options = workspaceProjectIds?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
 
     return {
@@ -70,7 +70,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
             <p className="text-xs text-custom-text-200">Select the project to import the issues to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
-            {workspaceProjects && (
+            {workspaceProjectIds && (
               <Controller
                 control={control}
                 name="project"

web/components/integration/jira/give-details.tsx

@@ -16,7 +16,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
     commandPalette: commandPaletteStore,
     eventTracker: { setTrackElement },
   } = useApplication();
-  const { workspaceProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, getProjectById } = useProject();
   // form info
   const {
     control,
@@ -173,8 +173,8 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                   </span>
                 }
               >
-                {workspaceProjects && workspaceProjects.length > 0 ? (
-                  workspaceProjects.map((projectId) => {
+                {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
+                  workspaceProjectIds.map((projectId) => {
                     const projectDetails = getProjectById(projectId);
 
                     if (!projectDetails) return;

web/components/issues/draft-issue-modal.tsx

@@ -66,7 +66,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = observer(
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
   // store
   const { user: userStore, projectDraftIssues: draftIssueStore } = useMobxStore();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds: workspaceProjects } = useProject();
   // derived values
   const projects = workspaceProjects;
   const user = userStore.currentUser;

web/components/issues/issue-layouts/empty-states/global-view.tsx

@@ -14,11 +14,11 @@ export const GlobalViewEmptyState: React.FC = observer(() => {
     commandPalette: { toggleCreateIssueModal, toggleCreateProjectModal },
     eventTracker: { setTrackElement },
   } = useApplication();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds } = useProject();
 
   return (
     <div className="grid h-full w-full place-items-center">
-      {!workspaceProjects || workspaceProjects?.length === 0 ? (
+      {!workspaceProjectIds || workspaceProjectIds?.length === 0 ? (
         <EmptyState
           image={emptyProject}
           title="No projects yet"

web/components/issues/issue-layouts/filters/header/filters/project.tsx

@@ -21,9 +21,9 @@ export const FilterProjects: React.FC<Props> = (props) => {
   const [itemsToRender, setItemsToRender] = useState(5);
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // store
-  const { getProjectById, workspaceProjects } = useProject();
+  const { getProjectById, workspaceProjectIds } = useProject();
   // derived values
-  const projects = workspaceProjects?.map((projectId) => getProjectById(projectId)!) ?? null;
+  const projects = workspaceProjectIds?.map((projectId) => getProjectById(projectId)!) ?? null;
   const appliedFiltersCount = appliedFilters?.length ?? 0;
   const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
 

web/components/issues/issue-layouts/utils.tsx

@@ -35,7 +35,7 @@ export const getGroupByColumns = (
 };
 
 const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined => {
-  const { workspaceProjects: projectIds, projectMap } = project;
+  const { workspaceProjectIds: projectIds, projectMap } = project;
 
   if (!projectIds) return;
 

web/components/issues/modal.tsx

@@ -84,7 +84,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
   } = useApplication();
   const { currentUser } = useUser();
   const { currentWorkspace } = useWorkspace();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds } = useProject();
 
   const issueStores = {
     [EProjectStore.PROJECT]: {
@@ -211,9 +211,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
 
     // if data is not present, set active project to the project
     // in the url. This has the least priority.
-    if (workspaceProjects && workspaceProjects.length > 0 && !activeProject)
-      setActiveProject(projectId ?? workspaceProjects?.[0] ?? null);
-  }, [data, projectId, workspaceProjects, isOpen, activeProject]);
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [data, projectId, workspaceProjectIds, isOpen, activeProject]);
 
   const addIssueToCycle = async (issue: IIssue, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
@@ -380,7 +380,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((prop
     if (onSubmit) await onSubmit(payload);
   };
 
-  if (!workspaceProjects || workspaceProjects.length === 0) return null;
+  if (!workspaceProjectIds || workspaceProjectIds.length === 0) return null;
 
   return (
     <>

web/components/issues/select/project.tsx

@@ -26,7 +26,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = observer((p
     placement: "bottom-start",
   });
   // store hooks
-  const { joinedProjects, getProjectById } = useProject();
+  const { joinedProjectIds: joinedProjects, getProjectById } = useProject();
 
   const selectedProject = getProjectById(value);
 

web/components/modules/modal.tsx

@@ -34,7 +34,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
   const {
     eventTracker: { postHogEventTracker },
   } = useApplication();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds } = useProject();
   const { createModule, updateModuleDetails } = useModule();
   // toast alert
   const { setToastAlert } = useToast();
@@ -135,9 +135,9 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
 
     // if data is not present, set active project to the project
     // in the url. This has the least priority.
-    if (workspaceProjects && workspaceProjects.length > 0 && !activeProject)
-      setActiveProject(projectId ?? workspaceProjects?.[0] ?? null);
-  }, [activeProject, data, projectId, workspaceProjects, isOpen]);
+    if (workspaceProjectIds && workspaceProjectIds.length > 0 && !activeProject)
+      setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
+  }, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>

web/components/page-views/workspace-dashboard.tsx

@@ -32,7 +32,7 @@ export const WorkspaceDashboardView = observer(() => {
     updateTourCompleted,
     membership: { currentProjectRole },
   } = useUser();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds } = useProject();
   // fetch user dashboard info
   useSWR(
     workspaceSlug ? `USER_WORKSPACE_DASHBOARD_${workspaceSlug}_${month}` : null,
@@ -68,8 +68,8 @@ export const WorkspaceDashboardView = observer(() => {
       <div className="space-y-8 p-8">
         {currentUser && <UserGreetingsView user={currentUser} />}
 
-        {workspaceProjects ? (
-          workspaceProjects.length > 0 ? (
+        {workspaceProjectIds ? (
+          workspaceProjectIds.length > 0 ? (
             <div className="flex flex-col gap-8">
               <IssuesStats data={workspaceDashboardInfo} />
               <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">

web/components/project/card-list.tsx

@@ -20,11 +20,11 @@ export const ProjectCardList = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { workspaceProjects, searchedProjects, getProjectById } = useProject();
+  const { workspaceProjectIds, searchedProjects, getProjectById } = useProject();
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
-  if (!workspaceProjects)
+  if (!workspaceProjectIds)
     return (
       <Loader className="grid grid-cols-3 gap-4">
         <Loader.Item height="100px" />
@@ -38,7 +38,7 @@ export const ProjectCardList = observer(() => {
 
   return (
     <>
-      {workspaceProjects.length > 0 ? (
+      {workspaceProjectIds.length > 0 ? (
         <div className="h-full w-full overflow-y-auto p-8">
           {searchedProjects.length == 0 ? (
             <div className="mt-10 w-full text-center text-custom-text-400">No matching projects</div>

web/components/project/sidebar-list.tsx

@@ -30,7 +30,7 @@ export const ProjectSidebarList: FC = observer(() => {
   const {
     membership: { currentWorkspaceRole },
   } = useUser();
-  const { joinedProjects, favoriteProjects, orderProjectsWithSortOrder, updateProjectView, projectMap } = useProject();
+  const { joinedProjectIds: joinedProjects, favoriteProjectIds: favoriteProjects, orderProjectsWithSortOrder, updateProjectView, projectMap } = useProject();
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;

web/pages/[workspaceSlug]/analytics.tsx

@@ -28,13 +28,13 @@ const AnalyticsPage: NextPageWithLayout = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { workspaceProjects } = useProject();
+  const { workspaceProjectIds } = useProject();
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserWorkspaceRoles.MEMBER;
 
   return (
     <>
-      {workspaceProjects && workspaceProjects.length > 0 ? (
+      {workspaceProjectIds && workspaceProjectIds.length > 0 ? (
         <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
           <Tab.Group as={Fragment}>
             <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">