refactor: module store (#3202)

makeplane · Dec 20, 2023 · fa05df7 · fa05df7
1 parent f3398ec
commit fa05df7
Show file tree

Hide file tree

Showing 5 changed files with 136 additions and 221 deletions.
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
@@ -63,7 +63,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
     projectMember: { projectMembers },
     moduleIssuesFilter: { issueFilters, updateFilters },
   } = useMobxStore();
-  const { projectModules, getModuleById } = useModule();
+  const { projectModuleIds, getModuleById } = useModule();
   const {
     commandPalette: { toggleCreateIssueModal },
     eventTracker: { setTrackElement },
@@ -180,7 +180,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                   width="auto"
                   placement="bottom-start"
                 >
-                  {projectModules?.map((moduleId) => (
+                  {projectModuleIds?.map((moduleId) => (
                     <ModuleDropdownOption moduleId={moduleId} />
                   ))}
                 </CustomMenu>

diff --git a/web/components/issues/select/module.tsx b/web/components/issues/select/module.tsx
@@ -22,7 +22,7 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // store hooks
-  const { projectModules, getModuleById, fetchModules } = useModule();
+  const { projectModuleIds, getModuleById, fetchModules } = useModule();
   // popper-js
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
@@ -34,7 +34,7 @@ export const IssueModuleSelect: React.FC<IssueModuleSelectProps> = observer((pro
 
   const selectedModule = value ? getModuleById(value) : null;
 
-  const options = projectModules?.map((moduleId) => {
+  const options = projectModuleIds?.map((moduleId) => {
     const moduleDetails = getModuleById(moduleId);
 
     return {

diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
@@ -28,7 +28,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
   const {
     moduleIssues: { removeIssueFromModule, addIssueToModule },
   } = useMobxStore();
-  const { projectModules, getModuleById } = useModule();
+  const { projectModuleIds, getModuleById } = useModule();
 
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -64,7 +64,7 @@ export const SidebarModuleSelect: React.FC<Props> = observer((props) => {
       });
   };
 
-  const options = projectModules?.map((moduleId) => {
+  const options = projectModuleIds?.map((moduleId) => {
     const moduleDetail = getModuleById(moduleId);
     return {
       value: moduleId,

diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx
@@ -23,13 +23,13 @@ export const ModulesListView: React.FC = observer(() => {
   const {
     membership: { currentProjectRole },
   } = useUser();
-  const { projectModules } = useModule();
+  const { projectModuleIds } = useModule();
 
   const { storedValue: modulesView } = useLocalStorage("modules_view", "grid");
 
   const isEditingAllowed = !!currentProjectRole && currentProjectRole >= EUserProjectRoles.MEMBER;
 
-  if (!projectModules)
+  if (!projectModuleIds)
     return (
       <Loader className="grid grid-cols-3 gap-4 p-8">
         <Loader.Item height="176px" />
@@ -43,13 +43,13 @@ export const ModulesListView: React.FC = observer(() => {
 
   return (
     <>
-      {projectModules.length > 0 ? (
+      {projectModuleIds.length > 0 ? (
         <>
           {modulesView === "list" && (
             <div className="h-full overflow-y-auto">
               <div className="flex h-full w-full justify-between">
                 <div className="flex h-full w-full flex-col overflow-y-auto">
-                  {projectModules.map((moduleId) => (
+                  {projectModuleIds.map((moduleId) => (
                     <ModuleListItem key={moduleId} moduleId={moduleId} />
                   ))}
                 </div>
@@ -70,7 +70,7 @@ export const ModulesListView: React.FC = observer(() => {
                       : "lg:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4"
                   } auto-rows-max transition-all `}
                 >
-                  {projectModules.map((moduleId) => (
+                  {projectModuleIds.map((moduleId) => (
                     <ModuleCardItem key={moduleId} moduleId={moduleId} />
                   ))}
                 </div>