feat: filter, sort issues, command as shortcut for mac device

apps/app/lib/hooks/useIssuesFilter.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+// hooks
+import useTheme from "./useTheme";
+import useUser from "./useUser";
+// commons
+import { groupBy, orderArrayBy } from "constants/common";
+
+// types
+import type { IssueResponse, IIssue, NestedKeyOf } from "types";
+
+const PRIORITIES = ["high", "medium", "low"];
+
+const useIssuesFilter = (projectIssues?: IssueResponse) => {
+  const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme();
+
+  const [orderBy, setOrderBy] = useState<NestedKeyOf<IIssue> | null>(null);
+
+  const [filterIssue, setFilterIssue] = useState<"activeIssue" | "backlogIssue" | null>(null);
+
+  const { states } = useUser();
+
+  let groupedByIssues: {
+    [key: string]: IIssue[];
+  } = {
+    ...(groupByProperty === "state_detail.name"
+      ? Object.fromEntries(
+          states
+            ?.sort((a, b) => a.sequence - b.sequence)
+            ?.map((state) => [
+              state.name,
+              projectIssues?.results.filter((issue) => issue.state === state.name) ?? [],
+            ]) ?? []
+        )
+      : groupByProperty === "priority"
+      ? Object.fromEntries(
+          PRIORITIES.map((priority) => [
+            priority,
+            projectIssues?.results.filter((issue) => issue.priority === priority) ?? [],
+          ])
+        )
+      : {}),
+    ...groupBy(projectIssues?.results ?? [], groupByProperty ?? ""),
+  };
+
+  if (orderBy !== null) {
+    groupedByIssues = Object.fromEntries(
+      Object.entries(groupedByIssues).map(([key, value]) => [key, orderArrayBy(value, orderBy)])
+    );
+  }
+
+  if (filterIssue !== null) {
+    if (filterIssue === "activeIssue") {
+      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
+        const value = groupedByIssues[key];
+        const filteredValue = value.filter(
+          (issue) =>
+            issue.state_detail.group === "started" || issue.state_detail.group === "unstarted"
+        );
+        if (filteredValue.length > 0) {
+          acc[key] = filteredValue;
+        }
+        return acc;
+      }, {} as typeof groupedByIssues);
+    } else if (filterIssue === "backlogIssue") {
+      groupedByIssues = Object.keys(groupedByIssues).reduce((acc, key) => {
+        const value = groupedByIssues[key];
+        const filteredValue = value.filter(
+          (issue) =>
+            issue.state_detail.group === "backlog" || issue.state_detail.group === "cancelled"
+        );
+        if (filteredValue.length > 0) {
+          acc[key] = filteredValue;
+        }
+        return acc;
+      }, {} as typeof groupedByIssues);
+    }
+  }
+
+  return {
+    groupedByIssues,
+    issueView,
+    setIssueView,
+    groupByProperty,
+    setGroupByProperty,
+    orderBy,
+    setOrderBy,
+    filterIssue,
+    setFilterIssue,
+  } as const;
+};
+
+export default useIssuesFilter;

apps/app/lib/hooks/useIssuesProperties.tsx

@@ -1,4 +1,4 @@
-import { useState, useContext, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback } from "react";
 // swr
 import useSWR from "swr";
 // api routes
@@ -80,7 +80,22 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
     [workspaceSlug, projectId, issueProperties, user]
   );
 
-  return [properties, updateIssueProperties] as const;
+  const newProperties = Object.keys(properties).reduce((obj: any, key) => {
+    if (
+      key !== "children" &&
+      key !== "name" &&
+      key !== "parent" &&
+      key !== "project" &&
+      key !== "description" &&
+      key !== "attachments" &&
+      key !== "sequence_id"
+    ) {
+      obj[key] = properties[key as keyof Properties];
+    }
+    return obj;
+  }, {});
+
+  return [newProperties, updateIssueProperties] as const;
 };
 
 export default useIssuesProperties;