chore: subscribed by me tab on my issues page (#1800)

* chore: add subscribed by me tab in my issues

* chore: update tab titles

* fix: build error

apps/app/components/issues/my-issues/my-issues-view.tsx

@@ -200,7 +200,7 @@ export const MyIssuesView: React.FC<Props> = ({
     [makeIssueCopy, handleEditIssue, handleDeleteIssue]
   );
 
-  const filtersToDisplay = { ...filters, assignees: null, created_by: null };
+  const filtersToDisplay = { ...filters, assignees: null, created_by: null, subscriber: null };
 
   const nullFilters = Object.keys(filtersToDisplay).filter(
     (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null
@@ -264,7 +264,11 @@ export const MyIssuesView: React.FC<Props> = ({
         disableUserActions={disableUserActions}
         dragDisabled={groupBy !== "priority"}
         emptyState={{
-          title: "You don't have any issue assigned to you yet",
+          title: filters.assignees
+            ? "You don't have any issue assigned to you yet"
+            : filters.created_by
+            ? "You have not created any issue yet."
+            : "You have not subscribed to any issue yet.",
           description: "Keep track of your work in a single place.",
           primaryButton: {
             icon: <PlusIcon className="h-4 w-4" />,

apps/app/constants/fetch-keys.ts

@@ -38,11 +38,12 @@ const inboxParamsToKey = (params: any) => {
 };
 
 const myIssuesParamsToKey = (params: any) => {
-  const { assignees, created_by, labels, priority, state_group, target_date } = params;
+  const { assignees, created_by, labels, priority, state_group, subscriber, target_date } = params;
 
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
   let stateGroupKey = state_group ? state_group.split(",") : [];
+  let subscriberKey = subscriber ? subscriber.split(",") : [];
   let priorityKey = priority ? priority.split(",") : [];
   let labelsKey = labels ? labels.split(",") : [];
   const targetDateKey = target_date ?? "";
@@ -54,10 +55,11 @@ const myIssuesParamsToKey = (params: any) => {
   assigneesKey = assigneesKey.sort().join("_");
   createdByKey = createdByKey.sort().join("_");
   stateGroupKey = stateGroupKey.sort().join("_");
+  subscriberKey = subscriberKey.sort().join("_");
   priorityKey = priorityKey.sort().join("_");
   labelsKey = labelsKey.sort().join("_");
 
-  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}`;
+  return `${assigneesKey}_${createdByKey}_${stateGroupKey}_${subscriberKey}_${priorityKey}_${type}_${groupBy}_${orderBy}_${labelsKey}_${targetDateKey}`;
 };
 
 export const CURRENT_USER = "CURRENT_USER";
@@ -317,9 +319,7 @@ export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId:
 export const USER_PROFILE_ISSUES = (workspaceSlug: string, userId: string, params: any) => {
   const paramsKey = myIssuesParamsToKey(params);
 
-  const subscriberKey = params.subscriber ? params.subscriber.toUpperCase() : "NULL";
-
-  return `USER_PROFILE_ISSUES_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${paramsKey}_${subscriberKey}`;
+  return `USER_PROFILE_ISSUES_${workspaceSlug.toUpperCase()}_${userId.toUpperCase()}_${paramsKey}`;
 };
 
 // reactions

apps/app/contexts/issue-view.context.tsx

@@ -92,6 +92,7 @@ export const initialState: StateType = {
     labels: null,
     state: null,
     state_group: null,
+    subscriber: null,
     created_by: null,
     target_date: null,
   },

apps/app/contexts/profile-issues-context.tsx

@@ -19,7 +19,7 @@ type IssueViewProps = {
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
   showSubIssues: boolean;
-  filters: IIssueFilterOptions & { subscriber: string | null };
+  filters: IIssueFilterOptions;
   properties: Properties;
 };
 
@@ -41,7 +41,7 @@ type ContextType = IssueViewProps & {
   setOrderBy: (property: TIssueOrderByOptions) => void;
   setShowEmptyGroups: (property: boolean) => void;
   setShowSubIssues: (value: boolean) => void;
-  setFilters: (filters: Partial<IIssueFilterOptions & { subscriber: string | null }>) => void;
+  setFilters: (filters: Partial<IIssueFilterOptions>) => void;
   setProperties: (key: keyof Properties) => void;
   setIssueView: (property: TIssueViewOptions) => void;
 };
@@ -52,7 +52,7 @@ type StateType = {
   orderBy: TIssueOrderByOptions;
   showEmptyGroups: boolean;
   showSubIssues: boolean;
-  filters: IIssueFilterOptions & { subscriber: string | null };
+  filters: IIssueFilterOptions;
   properties: Properties;
 };
 type ReducerFunctionType = (state: StateType, action: ReducerActionType) => StateType;

apps/app/hooks/my-issues/use-my-issues-filter.tsx

@@ -25,6 +25,7 @@ const initialValues: IWorkspaceViewProps = {
     labels: null,
     priority: null,
     state_group: null,
+    subscriber: null,
     target_date: null,
     type: null,
   },

apps/app/hooks/my-issues/use-my-issues.tsx

@@ -26,6 +26,7 @@ const useMyIssues = (workspaceSlug: string | undefined) => {
     order_by: orderBy,
     priority: filters?.priority ? filters?.priority.join(",") : undefined,
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
+    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     type: filters?.type ? filters?.type : undefined,
   };

apps/app/hooks/use-profile-issues.tsx

@@ -46,7 +46,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
     state_group: filters?.state_group ? filters?.state_group.join(",") : undefined,
     target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
     type: filters?.type ? filters?.type : undefined,
-    subscriber: filters?.subscriber ? filters?.subscriber : undefined,
+    subscriber: filters?.subscriber ? filters?.subscriber.join(",") : undefined,
   };
 
   const { data: userProfileIssues, mutate: mutateProfileIssues } = useSWR(
@@ -93,7 +93,7 @@ const useProfileIssues = (workspaceSlug: string | undefined, userId: string | un
     }
 
     if (router.pathname.includes("subscribed") && filters.subscriber === null) {
-      setFilters({ subscriber: userId });
+      setFilters({ subscriber: [userId] });
       return;
     }
   }, [filters, router, setFilters, userId]);

apps/app/pages/[workspaceSlug]/me/my-issues.tsx

@@ -22,7 +22,6 @@ const MyIssuesPage: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { projects } = useProjects();
   const { user } = useUser();
 
   const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
@@ -30,23 +29,37 @@ const MyIssuesPage: NextPage = () => {
   const tabsList = [
     {
       key: "assigned",
-      label: "Assigned to me",
+      label: "Assigned",
       selected: (filters?.assignees ?? []).length > 0,
       onClick: () => {
         setFilters({
           assignees: [user?.id ?? ""],
           created_by: null,
+          subscriber: null,
         });
       },
     },
     {
       key: "created",
-      label: "Created by me",
+      label: "Created",
       selected: (filters?.created_by ?? []).length > 0,
       onClick: () => {
         setFilters({
-          created_by: [user?.id ?? ""],
           assignees: null,
+          created_by: [user?.id ?? ""],
+          subscriber: null,
+        });
+      },
+    },
+    {
+      key: "subscribed",
+      label: "Subscribed",
+      selected: (filters?.subscriber ?? []).length > 0,
+      onClick: () => {
+        setFilters({
+          assignees: null,
+          created_by: null,
+          subscriber: [user?.id ?? ""],
         });
       },
     },
@@ -55,7 +68,7 @@ const MyIssuesPage: NextPage = () => {
   useEffect(() => {
     if (!filters || !user) return;
 
-    if (!filters.assignees && !filters.created_by) {
+    if (!filters.assignees && !filters.created_by && !filters.subscriber) {
       setFilters({
         assignees: [user.id],
       });

apps/app/types/issues.d.ts

@@ -229,6 +229,7 @@ export interface IIssueFilterOptions {
   target_date: string[] | null;
   state: string[] | null;
   state_group: TStateGroups[] | null;
+  subscriber: string[] | null;
   labels: string[] | null;
   priority: string[] | null;
   created_by: string[] | null;