refactor: user profile store setup and bug fixes (#2586)

* fix: autorun not working when filters are changed

* fix: filter/display on overview page

* refactor: store implementation & loader in 'created' & 'subscribed' page

web/components/profile/navbar.tsx

@@ -8,6 +8,7 @@ import { ProfileIssuesFilter } from "components/profile";
 
 type Props = {
   isAuthorized: boolean;
+  showProfileIssuesFilter?: boolean;
 };
 
 const viewerTabs = [
@@ -36,7 +37,9 @@ const adminTabs = [
   },
 ];
 
-export const ProfileNavbar: React.FC<Props> = ({ isAuthorized }) => {
+export const ProfileNavbar: React.FC<Props> = (props) => {
+  const { isAuthorized, showProfileIssuesFilter } = props;
+
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
 
@@ -59,7 +62,7 @@ export const ProfileNavbar: React.FC<Props> = ({ isAuthorized }) => {
           </Link>
         ))}
       </div>
-      <ProfileIssuesFilter />
+      {showProfileIssuesFilter && <ProfileIssuesFilter />}
     </div>
   );
 };

web/components/profile/profile-issues-filter.tsx

@@ -10,8 +10,16 @@ import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 export const ProfileIssuesFilter = observer(() => {
   const { workspace: workspaceStore, profileIssueFilters: profileIssueFiltersStore }: RootStore = useMobxStore();
 
-  const handleLayoutChange = (_layout: string) =>
+  const handleLayoutChange = (_layout: string) => {
-    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", { layout: _layout });
+    const payload = {
+      layout: _layout,
+      group_by: profileIssueFiltersStore.userDisplayFilters.group_by
+        ? profileIssueFiltersStore.userDisplayFilters.group_by
+        : "state_detail.group",
+    };
+
+    profileIssueFiltersStore.handleIssueFilters("userDisplayFilters", payload);
+  };
 
   const handleFilters = (key: any, value: any) => {
     let updatesFilters: any = profileIssueFiltersStore?.userFilters;

web/layouts/profile-layout/layout.tsx

@@ -10,12 +10,15 @@ import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 type Props = {
   children: React.ReactNode;
   className?: string;
+  showProfileIssuesFilter?: boolean;
 };
 
 // services
 const workspaceService = new WorkspaceService();
 
-export const ProfileAuthWrapper: React.FC<Props> = ({ children, className }) => {
+export const ProfileAuthWrapper: React.FC<Props> = (props) => {
+  const { children, className, showProfileIssuesFilter } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
@@ -30,7 +33,7 @@ export const ProfileAuthWrapper: React.FC<Props> = ({ children, className }) =>
     <div className="h-full w-full md:flex md:flex-row-reverse md:overflow-hidden">
       <ProfileSidebar />
       <div className="md:h-full w-full flex flex-col md:overflow-hidden">
-        <ProfileNavbar isAuthorized={isAuthorized} />
+        <ProfileNavbar isAuthorized={isAuthorized} showProfileIssuesFilter={showProfileIssuesFilter} />
         {isAuthorized ? (
           <div className={`md:h-full w-full overflow-hidden ${className}`}>{children}</div>
         ) : (

web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx

@@ -30,7 +30,7 @@ const ProfileAssignedIssues: NextPage = observer(() => {
     userId: string;
   };
 
-  useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
+  const { isLoading } = useSWR(`PROFILE_ISSUES_${workspaceSlug}_${userId}`, async () => {
     if (workspaceSlug && userId) {
       // workspace labels
       workspaceStore.setWorkspaceSlug(workspaceSlug);
@@ -46,8 +46,8 @@ const ProfileAssignedIssues: NextPage = observer(() => {
 
   return (
     <AppLayout header={<UserProfileHeader />}>
-      <ProfileAuthWrapper>
+      <ProfileAuthWrapper showProfileIssuesFilter>
-        {profileIssuesStore.loader ? (
+        {isLoading ? (
           <div>Loading...</div>
         ) : (
           <div className="w-full h-full relative overflow-auto -z-1">

web/pages/[workspaceSlug]/profile/[userId]/created.tsx

@@ -1,20 +1,61 @@
 import React from "react";
-
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
-import { ProfileIssuesView } from "components/profile";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
 // types
 import type { NextPage } from "next";
 
-const ProfileCreatedIssues: NextPage = () => (
+const ProfileCreatedIssues: NextPage = () => {
-  <AppLayout header={<UserProfileHeader />}>
+  const {
-    <ProfileAuthWrapper>
+    workspace: workspaceStore,
-      <ProfileIssuesView />
+    project: projectStore,
-    </ProfileAuthWrapper>
+    profileIssueFilters: profileIssueFiltersStore,
-  </AppLayout>
+    profileIssues: profileIssuesStore,
-);
+  } = useMobxStore();
 
-export default ProfileCreatedIssues;
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_CREATED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "created");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <AppLayout header={<UserProfileHeader />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <div className="w-full h-full relative overflow-auto -z-1">
+            {activeLayout === "list" ? (
+              <ProfileIssuesListLayout />
+            ) : activeLayout === "kanban" ? (
+              <ProfileIssuesKanBanLayout />
+            ) : null}
+          </div>
+        )}
+      </ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileCreatedIssues);

web/pages/[workspaceSlug]/profile/[userId]/subscribed.tsx

@@ -1,20 +1,61 @@
 import React from "react";
-
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// store
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
 import { AppLayout } from "layouts/app-layout";
 import { ProfileAuthWrapper } from "layouts/profile-layout";
 // components
 import { UserProfileHeader } from "components/headers";
-import { ProfileIssuesView } from "components/profile";
+import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
+import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
 // types
 import type { NextPage } from "next";
 
-const ProfileSubscribedIssues: NextPage = () => (
+const ProfileSubscribedIssues: NextPage = () => {
-  <AppLayout header={<UserProfileHeader />}>
+  const {
-    <ProfileAuthWrapper>
+    workspace: workspaceStore,
-      <ProfileIssuesView />
+    project: projectStore,
-    </ProfileAuthWrapper>
+    profileIssueFilters: profileIssueFiltersStore,
-  </AppLayout>
+    profileIssues: profileIssuesStore,
-);
+  } = useMobxStore();
 
-export default ProfileSubscribedIssues;
+  const router = useRouter();
+  const { workspaceSlug, userId } = router.query;
+
+  const { isLoading } = useSWR(`PROFILE_ISSUES_SUBSCRIBED_${workspaceSlug}_${userId}`, async () => {
+    if (workspaceSlug && userId) {
+      // workspace labels
+      workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+      await workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString());
+      await projectStore.fetchProjects(workspaceSlug.toString());
+
+      //profile issues
+      await profileIssuesStore.fetchIssues(workspaceSlug.toString(), userId.toString(), "subscribed");
+    }
+  });
+
+  const activeLayout = profileIssueFiltersStore.userDisplayFilters.layout;
+
+  return (
+    <AppLayout header={<UserProfileHeader />}>
+      <ProfileAuthWrapper showProfileIssuesFilter>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <div className="w-full h-full relative overflow-auto -z-1">
+            {activeLayout === "list" ? (
+              <ProfileIssuesListLayout />
+            ) : activeLayout === "kanban" ? (
+              <ProfileIssuesKanBanLayout />
+            ) : null}
+          </div>
+        )}
+      </ProfileAuthWrapper>
+    </AppLayout>
+  );
+};
+
+export default observer(ProfileSubscribedIssues);

web/store/profile-issues/issue_filters.store.ts

@@ -67,7 +67,7 @@ export class ProfileIssueFilterStore implements IProfileIssueFilterStore {
       if (this.userFilters || this.userDisplayFilters || this.userDisplayProperties) {
         const workspaceSlug = this.rootStore.workspace.workspaceSlug;
         const userId = this.rootStore.profileIssues?.userId;
-        if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab) {
+        if (workspaceSlug && userId && this.rootStore.profileIssues.currentProfileTab && this.appliedFilters) {
           console.log("autorun triggered");
           this.rootStore.profileIssues.fetchIssues(
             workspaceSlug,