chore: new workspace endpoint (#504)

* chore: new workspace dashboard endpoint

* chore: overdue and upcoming issues

apps/app/components/workspace/activity-graph.tsx

@@ -1,33 +1,23 @@
 import { useEffect, useRef, useState } from "react";
 
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import userService from "services/user.service";
 // ui
 import { Tooltip } from "components/ui";
 // helpers
 import { renderDateFormat, renderShortNumericDateFormat } from "helpers/date-time.helper";
-// fetch-keys
-import { USER_ACTIVITY } from "constants/fetch-keys";
+// types
+import { IUserActivity } from "types";
 // constants
 import { DAYS, MONTHS } from "constants/project";
 
-export const ActivityGraph = () => {
+type Props = {
+  activities: IUserActivity[] | undefined;
+};
+
+export const ActivityGraph: React.FC<Props> = ({ activities }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const [width, setWidth] = useState(0);
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: userActivity } = useSWR(
-    workspaceSlug ? USER_ACTIVITY(workspaceSlug as string) : null,
-    workspaceSlug ? () => userService.userActivity(workspaceSlug as string) : null
-  );
-
   const today = new Date();
   const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1);
   const twoMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 2, 1);
@@ -112,7 +102,7 @@ export const ActivityGraph = () => {
             ref={ref}
           >
             {recentDates.map((date) => {
-              const isActive = userActivity?.find((a) => a.created_date === date);
+              const isActive = activities?.find((a) => a.created_date === date);
 
               return (
                 <Tooltip

apps/app/components/workspace/issues-list.tsx

@@ -7,12 +7,12 @@ import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
-import { IIssue } from "types";
+import { IIssueLite } from "types";
 import { Loader } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 
 type Props = {
-  issues: IIssue[] | undefined;
+  issues: IIssueLite[] | undefined;
   type: "overdue" | "upcoming";
 };
 
@@ -53,7 +53,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
 
                 return (
                   <Link
-                    href={`/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`}
+                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
                     key={issue.id}
                   >
                     <a>

apps/app/components/workspace/issues-pie-chart.tsx

@@ -2,52 +2,18 @@ import { useCallback, useState } from "react";
 
 // recharts
 import { Cell, Legend, Pie, PieChart, ResponsiveContainer, Sector } from "recharts";
-// helpers
-import { groupBy } from "helpers/array.helper";
 // types
-import { IIssue } from "types";
+import { IUserStateDistribution } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
 type Props = {
-  issues: IIssue[] | undefined;
+  groupedIssues: IUserStateDistribution[] | undefined;
 };
 
-export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
+export const IssuesPieChart: React.FC<Props> = ({ groupedIssues }) => {
   const [activeIndex, setActiveIndex] = useState(0);
 
-  const groupedIssues = {
-    backlog: [],
-    unstarted: [],
-    started: [],
-    cancelled: [],
-    completed: [],
-    ...groupBy(issues ?? [], "state_detail.group"),
-  };
-
-  const data = [
-    {
-      name: "Backlog",
-      value: groupedIssues.backlog.length,
-    },
-    {
-      name: "Unstarted",
-      value: groupedIssues.unstarted.length,
-    },
-    {
-      name: "Started",
-      value: groupedIssues.started.length,
-    },
-    {
-      name: "Cancelled",
-      value: groupedIssues.cancelled.length,
-    },
-    {
-      name: "Completed",
-      value: groupedIssues.completed.length,
-    },
-  ];
-
   const onPieEnter = useCallback(
     (_: any, index: number) => {
       setActiveIndex(index);
@@ -80,8 +46,8 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
 
     return (
       <g>
-        <text x={cx} y={cy} dy={8} textAnchor="middle" fill={fill}>
-          {payload.name}
+        <text x={cx} y={cy} dy={8} className="capitalize" textAnchor="middle" fill={fill}>
+          {payload.state_group}
         </text>
         <Sector
           cx={cx}
@@ -117,9 +83,9 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
         <ResponsiveContainer width="100%" height={250}>
           <PieChart>
             <Pie
-              data={data}
-              dataKey="value"
-              nameKey="name"
+              data={groupedIssues}
+              dataKey="state_count"
+              nameKey="state_group"
               cx="50%"
               cy="50%"
               fill="#8884d8"
@@ -129,8 +95,11 @@ export const IssuesPieChart: React.FC<Props> = ({ issues }) => {
               activeShape={renderActiveShape}
               onMouseEnter={onPieEnter}
             >
-              {data.map((cell: any) => (
-                <Cell key={cell.name} fill={STATE_GROUP_COLORS[cell.name.toLowerCase()]} />
+              {groupedIssues?.map((cell) => (
+                <Cell
+                  key={cell.state_group}
+                  fill={STATE_GROUP_COLORS[cell.state_group.toLowerCase()]}
+                />
               ))}
             </Pie>
             <Legend layout="vertical" verticalAlign="middle" align="right" height={36} />

apps/app/components/workspace/issues-stats.tsx

@@ -1,54 +1,70 @@
 // components
+import { Loader } from "components/ui";
 import { ActivityGraph } from "components/workspace";
 // helpers
 import { groupBy } from "helpers/array.helper";
 // types
-import { IIssue } from "types";
+import { IUserWorkspaceDashboard } from "types";
 
 type Props = {
-  issues: IIssue[] | undefined;
+  data: IUserWorkspaceDashboard | undefined;
 };
 
-export const IssuesStats: React.FC<Props> = ({ issues }) => {
-  const groupedIssues = {
-    backlog: [],
-    unstarted: [],
-    started: [],
-    cancelled: [],
-    completed: [],
-    ...groupBy(issues ?? [], "state_detail.group"),
-  };
-
-  return (
-    <div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
-      {issues ? (
-        <>
-          <div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0">
-            <div className="pb-4">
-              <h4>Issues assigned to you</h4>
-              <h5 className="mt-2 text-2xl font-semibold">{issues.length}</h5>
-            </div>
-            <div className="pb-4">
-              <h4>Pending issues</h4>
-              <h5 className="mt-2 text-2xl font-semibold">
-                {issues.length - groupedIssues.completed.length}
-              </h5>
-            </div>
-            <div className="pb-4">
-              <h4>Completed issues</h4>
-              <h5 className="mt-2 text-2xl font-semibold">{groupedIssues.completed.length}</h5>
-            </div>
-            <div className="pb-4">
-              <h4>Issues due by this week</h4>
-              <h5 className="mt-2 text-2xl font-semibold">24</h5>
-            </div>
-          </div>
-          <div className="p-4 lg:col-span-2">
-            <h3 className="mb-2 font-semibold capitalize">Activity Graph</h3>
-            <ActivityGraph />
-          </div>
-        </>
-      ) : null}
+export const IssuesStats: React.FC<Props> = ({ data }) => (
+  <div className="grid grid-cols-1 rounded-[10px] border bg-white lg:grid-cols-3">
+    <div className="grid grid-cols-2 gap-4 border-b p-4 lg:border-r lg:border-b-0">
+      <div className="pb-4">
+        <h4>Issues assigned to you</h4>
+        <h5 className="mt-2 text-2xl font-semibold">
+          {data ? (
+            data.assigned_issues_count
+          ) : (
+            <Loader>
+              <Loader.Item height="25px" width="50%" />
+            </Loader>
+          )}
+        </h5>
+      </div>
+      <div className="pb-4">
+        <h4>Pending issues</h4>
+        <h5 className="mt-2 text-2xl font-semibold">
+          {data ? (
+            data.pending_issues_count
+          ) : (
+            <Loader>
+              <Loader.Item height="25px" width="50%" />
+            </Loader>
+          )}
+        </h5>
+      </div>
+      <div className="pb-4">
+        <h4>Completed issues</h4>
+        <h5 className="mt-2 text-2xl font-semibold">
+          {data ? (
+            data.completed_issues_count
+          ) : (
+            <Loader>
+              <Loader.Item height="25px" width="50%" />
+            </Loader>
+          )}
+        </h5>
+      </div>
+      <div className="pb-4">
+        <h4>Issues due by this week</h4>
+        <h5 className="mt-2 text-2xl font-semibold">
+          {data ? (
+            data.issues_due_week_count
+          ) : (
+            <Loader>
+              <Loader.Item height="25px" width="50%" />
+            </Loader>
+          )}
+        </h5>
+      </div>
     </div>
-  );
-};
+    <div className="p-4 lg:col-span-2">
+      <h3 className="mb-2 font-semibold capitalize">Activity Graph</h3>
+      <ActivityGraph activities={data?.issue_activities} />
+    </div>
+  </div>
+);

apps/app/constants/fetch-keys.ts

@@ -79,6 +79,8 @@ export const STATE_DETAIL = "STATE_DETAILS";
 
 export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
 export const USER_ACTIVITY = (workspaceSlug: string) => `USER_ACTIVITY_${workspaceSlug}`;
+export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
+  `USER_WORKSPACE_DASHBOARD_${workspaceSlug}`;
 export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;

apps/app/pages/[workspaceSlug]/index.tsx

@@ -2,10 +2,14 @@ import React from "react";
 
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
 // lib
 import { requiredAuth } from "lib/auth";
 // layouts
 import AppLayout from "layouts/app-layout";
+// services
+import userService from "services/user.service";
 // hooks
 import useIssues from "hooks/use-issues";
 // components
@@ -15,10 +19,10 @@ import {
   IssuesPieChart,
   IssuesStats,
 } from "components/workspace";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
 import type { NextPage, GetServerSidePropsContext } from "next";
+// fetch-keys
+import { USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
 
 const WorkspacePage: NextPage = () => {
   const router = useRouter();
@@ -26,23 +30,9 @@ const WorkspacePage: NextPage = () => {
 
   const { myIssues } = useIssues(workspaceSlug as string);
 
-  const overdueIssues = orderArrayBy(
-    myIssues?.filter(
-      (i) =>
-        i.target_date &&
-        i.target_date !== "" &&
-        !i.completed_at &&
-        new Date(i.target_date) < new Date()
-    ) ?? [],
-    "target_date",
-    "descending"
-  );
-
-  const incomingIssues = orderArrayBy(
-    myIssues?.filter(
-      (i) => i.target_date && i.target_date !== "" && new Date(i.target_date) > new Date()
-    ) ?? [],
-    "target_date"
+  const { data: workspaceDashboardData } = useSWR(
+    workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
+    workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string) : null
   );
 
   return (
@@ -68,11 +58,11 @@ const WorkspacePage: NextPage = () => {
               </a>
             </div>
           </div>
-          <IssuesStats issues={myIssues} />
+          <IssuesStats data={workspaceDashboardData} />
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-            <IssuesList issues={overdueIssues} type="overdue" />
-            <IssuesList issues={incomingIssues} type="upcoming" />
-            <IssuesPieChart issues={myIssues} />
+            <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
+            <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
+            <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
             <CompletedIssuesGraph issues={myIssues} />
           </div>
         </div>

apps/app/services/user.service.ts

@@ -1,6 +1,6 @@
 // services
 import APIService from "services/api.service";
-import type { IUser, IUserActivity } from "types";
+import type { IUser, IUserActivity, IUserWorkspaceDashboard } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -57,6 +57,14 @@ class UserService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async userWorkspaceDashboard(workspaceSlug: string): Promise<IUserWorkspaceDashboard> {
+    return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 export default new UserService();

apps/app/types/issues.d.ts

@@ -150,6 +150,7 @@ export interface IIssueComment {
   workspace: string;
   issue: string;
 }
+
 export type IssuePriorities = {
   id: string;
   created_at: Date;
@@ -207,6 +208,14 @@ export interface IIssueActivity {
   actor: string;
 }
 
+export interface IIssueLite {
+  id: string;
+  name: string;
+  project_id: string;
+  target_date: string;
+  workspace__slug: string;
+}
+
 export interface IIssueFilterOptions {
   type: "active" | "backlog" | null;
   assignees: string[] | null;

apps/app/types/users.d.ts

@@ -1,4 +1,4 @@
-import { IIssue, IWorkspace, NestedKeyOf, Properties } from "./";
+import { IIssue, IIssueLite, IWorkspace, NestedKeyOf, Properties } from "./";
 
 export interface IUser {
   id: readonly string;
@@ -41,6 +41,22 @@ export interface IUserActivity {
   activity_count: number;
 }
 
+export interface IUserStateDistribution {
+  state_group: string;
+  state_count: number;
+}
+
+export interface IUserWorkspaceDashboard {
+  assigned_issues_count: number;
+  completed_issues_count: number;
+  issue_activities: IUserActivity[];
+  issues_due_week_count: number;
+  overdue_issues: IIssueLite[];
+  pending_issues_count: number;
+  state_distribution: IUserStateDistribution[];
+  upcoming_issues: IIssueLite[];
+}
+
 export type UserAuth = {
   isMember: boolean;
   isOwner: boolean;