From a187e7765ccd79bbb6d3e5e448fddee52ef9210f Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 26 Sep 2023 18:08:01 +0530
Subject: [PATCH] fix: user dashboard greeting timezone (#2267)

* chore: user greeting timezone

* fix: group by labels not working on workspace level
---
 .../core/filters/issues-view-filter.tsx       |  6 +-
 .../core/views/board-view/board-header.tsx    | 20 +++++-
 .../core/views/list-view/single-list.tsx      | 40 +++++++++---
 .../my-issues/my-issues-view-options.tsx      |  2 +-
 .../profile/profile-issues-view-options.tsx   |  2 +-
 web/pages/[workspaceSlug]/index.tsx           | 62 +++++++++++++------
 6 files changed, 97 insertions(+), 35 deletions(-)

diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index f5b0f477a..2ad165dd8 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -93,7 +93,9 @@ export const IssuesFilterView: React.FC = () => {
             <Tooltip
               key={option.type}
               tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
+                <span className="capitalize">
+                  {replaceUnderscoreIfSnakeCase(option.type)} Layout
+                </span>
               }
               position="bottom"
             >
@@ -318,7 +320,7 @@ export const IssuesFilterView: React.FC = () => {
                       displayFilters.layout !== "spreadsheet" &&
                       displayFilters.layout !== "gantt_chart" && (
                         <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show empty states</h4>
+                          <h4 className="text-custom-text-200">Show empty groups</h4>
                           <div className="w-28">
                             <ToggleSwitch
                               value={displayFilters.show_empty_groups ?? true}
diff --git a/web/components/core/views/board-view/board-header.tsx b/web/components/core/views/board-view/board-header.tsx
index 9913ce733..1c2bef60f 100644
--- a/web/components/core/views/board-view/board-header.tsx
+++ b/web/components/core/views/board-view/board-header.tsx
@@ -20,7 +20,7 @@ import { renderEmoji } from "helpers/emoji.helper";
 // types
 import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -59,6 +59,15 @@ export const BoardHeader: React.FC<Props> = ({
       : null
   );
 
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug && displayFilters?.group_by === "labels"
+      ? WORKSPACE_LABELS(workspaceSlug.toString())
+      : null,
+    workspaceSlug && displayFilters?.group_by === "labels"
+      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      : null
+  );
+
   const { data: members } = useSWR(
     workspaceSlug &&
       projectId &&
@@ -82,7 +91,10 @@ export const BoardHeader: React.FC<Props> = ({
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
       case "labels":
-        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        title =
+          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
+            (label) => label.id === groupTitle
+          )?.name ?? "None";
         break;
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -137,7 +149,9 @@ export const BoardHeader: React.FC<Props> = ({
         break;
       case "labels":
         const labelColor =
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
+            (label) => label.id === groupTitle
+          )?.color ?? "#000000";
         icon = (
           <span
             className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
index 50ca596c0..0c77c5222 100644
--- a/web/components/core/views/list-view/single-list.tsx
+++ b/web/components/core/views/list-view/single-list.tsx
@@ -34,7 +34,7 @@ import {
   UserAuth,
 } from "types";
 // fetch-keys
-import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
+import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -86,16 +86,33 @@ export const SingleList: React.FC<Props> = (props) => {
 
   const { displayFilters, groupedIssues } = viewProps;
 
-  const { data: issueLabels } = useSWR<IIssueLabels[]>(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+  const { data: issueLabels } = useSWR(
+    workspaceSlug && projectId && displayFilters?.group_by === "labels"
+      ? PROJECT_ISSUE_LABELS(projectId.toString())
+      : null,
+    workspaceSlug && projectId && displayFilters?.group_by === "labels"
+      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  const { data: workspaceLabels } = useSWR(
+    workspaceSlug && displayFilters?.group_by === "labels"
+      ? WORKSPACE_LABELS(workspaceSlug.toString())
+      : null,
+    workspaceSlug && displayFilters?.group_by === "labels"
+      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
       : null
   );
 
   const { data: members } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
+    workspaceSlug &&
+      projectId &&
+      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
+      ? PROJECT_MEMBERS(projectId as string)
+      : null,
+    workspaceSlug &&
+      projectId &&
+      (displayFilters?.group_by === "created_by" || displayFilters?.group_by === "assignees")
       ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
@@ -110,7 +127,10 @@ export const SingleList: React.FC<Props> = (props) => {
         title = addSpaceIfCamelCase(currentState?.name ?? "");
         break;
       case "labels":
-        title = issueLabels?.find((label) => label.id === groupTitle)?.name ?? "None";
+        title =
+          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
+            (label) => label.id === groupTitle
+          )?.name ?? "None";
         break;
       case "project":
         title = projects?.find((p) => p.id === groupTitle)?.name ?? "None";
@@ -164,7 +184,9 @@ export const SingleList: React.FC<Props> = (props) => {
         break;
       case "labels":
         const labelColor =
-          issueLabels?.find((label) => label.id === groupTitle)?.color ?? "#000000";
+          [...(issueLabels ?? []), ...(workspaceLabels ?? [])]?.find(
+            (label) => label.id === groupTitle
+          )?.color ?? "#000000";
         icon = (
           <span
             className="h-3 w-3 flex-shrink-0 rounded-full"
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
index 549a00df2..8c8bd9dc7 100644
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ b/web/components/issues/my-issues/my-issues-view-options.tsx
@@ -234,7 +234,7 @@ export const MyIssuesViewOptions: React.FC = () => {
                       displayFilters?.layout !== "spreadsheet" && (
                         <>
                           <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Show empty states</h4>
+                            <h4 className="text-custom-text-200">Show empty groups</h4>
                             <div className="w-28">
                               <ToggleSwitch
                                 value={displayFilters?.show_empty_groups ?? true}
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index 30dcb8df4..272a5e47f 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -266,7 +266,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                       displayFilters?.layout !== "spreadsheet" && (
                         <>
                           <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Show empty states</h4>
+                            <h4 className="text-custom-text-200">Show empty groups</h4>
                             <div className="w-28">
                               <ToggleSwitch
                                 value={displayFilters?.show_empty_groups ?? true}
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
index 79e9571b7..a629f50a5 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -31,15 +31,53 @@ import { BoltOutlined, GridViewOutlined } from "@mui/icons-material";
 import emptyDashboard from "public/empty-state/dashboard.svg";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
-// helpers
-import { render12HourFormatTime, renderShortDate } from "helpers/date-time.helper";
 // types
 import { ICurrentUserResponse } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { CURRENT_USER, USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
-// constants
-import { DAYS } from "constants/project";
+
+const Greeting = ({ user }: { user: ICurrentUserResponse | undefined }) => {
+  const currentTime = new Date();
+
+  const hour = new Intl.DateTimeFormat("en-US", {
+    hour12: false,
+    hour: "numeric",
+  }).format(currentTime);
+
+  const date = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+  }).format(currentTime);
+
+  const weekDay = new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+  }).format(currentTime);
+
+  const timeString = new Intl.DateTimeFormat("en-US", {
+    timeZone: user?.user_timezone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(currentTime);
+
+  const greeting =
+    parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        Good {greeting}, {user?.first_name} {user?.last_name}
+      </h3>
+      <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
+        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+        <div>
+          {weekDay}, {date} {timeString}
+        </div>
+      </h6>
+    </div>
+  );
+};
 
 const WorkspacePage: NextPage = () => {
   const [month, setMonth] = useState(new Date().getMonth() + 1);
@@ -58,10 +96,6 @@ const WorkspacePage: NextPage = () => {
     workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null
   );
 
-  const today = new Date();
-  const greeting =
-    today.getHours() < 12 ? "morning" : today.getHours() < 18 ? "afternoon" : "evening";
-
   useEffect(() => {
     if (!workspaceSlug) return;
 
@@ -128,17 +162,7 @@ const WorkspacePage: NextPage = () => {
         </div>
       )}
       <div className="p-8 space-y-8">
-        <div>
-          <h3 className="text-2xl font-semibold">
-            Good {greeting}, {user?.first_name} {user?.last_name}
-          </h3>
-          <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
-            <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
-            <div>
-              {DAYS[today.getDay()]}, {renderShortDate(today)} {render12HourFormatTime(today)}
-            </div>
-          </h6>
-        </div>
+        <Greeting user={user} />
 
         {projects ? (
           projects.length > 0 ? (