From de663b84a7453c7b9fd49e89d66c9ba8fc290bed Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 12 Jul 2023 16:55:52 +0530
Subject: [PATCH 1/2] fix: cycle date select in the modal

---
 apps/app/components/cycles/form.tsx      |  29 +++++--
 apps/app/components/cycles/modal.tsx     | 104 +++++++----------------
 apps/app/components/ui/date.tsx          |  18 +++-
 apps/app/pages/[workspaceSlug]/index.tsx |   8 +-
 apps/app/services/cycles.service.ts      |   7 +-
 apps/app/types/cycles.d.ts               |   6 ++
 6 files changed, 84 insertions(+), 88 deletions(-)

diff --git a/apps/app/components/cycles/form.tsx b/apps/app/components/cycles/form.tsx
index 8ff2b20d014..83414aecd61 100644
--- a/apps/app/components/cycles/form.tsx
+++ b/apps/app/components/cycles/form.tsx
@@ -29,16 +29,13 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
     handleSubmit,
     control,
     reset,
+    watch,
   } = useForm<ICycle>({
     defaultValues,
   });
 
   const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
     await handleFormSubmit(formData);
-
-    reset({
-      ...defaultValues,
-    });
   };
 
   useEffect(() => {
@@ -48,6 +45,15 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
     });
   }, [data, reset]);
 
+  const startDate = watch("start_date");
+  const endDate = watch("end_date");
+
+  const minDate = startDate ? new Date(startDate) : new Date();
+  minDate.setDate(minDate.getDate() + 1);
+
+  const maxDate = endDate ? new Date(endDate) : null;
+  maxDate?.setDate(maxDate.getDate() - 1);
+
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
       <div className="space-y-5">
@@ -91,7 +97,13 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                 control={control}
                 name="start_date"
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect label="Start date" value={value} onChange={(val) => onChange(val)} />
+                  <DateSelect
+                    label="Start date"
+                    value={value}
+                    onChange={(val) => onChange(val)}
+                    minDate={new Date()}
+                    maxDate={maxDate ?? undefined}
+                  />
                 )}
               />
             </div>
@@ -100,7 +112,12 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                 control={control}
                 name="end_date"
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} />
+                  <DateSelect
+                    label="End date"
+                    value={value}
+                    onChange={(val) => onChange(val)}
+                    minDate={minDate}
+                  />
                 )}
               />
             </div>
diff --git a/apps/app/components/cycles/modal.tsx b/apps/app/components/cycles/modal.tsx
index 3af8b1cec2b..d2dd717ec73 100644
--- a/apps/app/components/cycles/modal.tsx
+++ b/apps/app/components/cycles/modal.tsx
@@ -13,9 +13,9 @@ import useToast from "hooks/use-toast";
 // components
 import { CycleForm } from "components/cycles";
 // helper
-import { getDateRangeStatus, isDateGreaterThanToday } from "helpers/date-time.helper";
+import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
-import type { ICurrentUserResponse, ICycle } from "types";
+import type { CycleDateCheckData, ICurrentUserResponse, ICycle } from "types";
 // fetch keys
 import {
   COMPLETED_CYCLES_LIST,
@@ -65,7 +65,6 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
         }
         mutate(INCOMPLETE_CYCLES_LIST(projectId.toString()));
         mutate(CYCLES_LIST(projectId.toString()));
-        handleClose();
 
         setToastAlert({
           type: "success",
@@ -121,8 +120,6 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           }
         }
 
-        handleClose();
-
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -138,19 +135,16 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
       });
   };
 
-  const dateChecker = async (payload: any) => {
-    try {
-      const res = await cycleService.cycleDateCheck(
-        workspaceSlug as string,
-        projectId as string,
-        payload
-      );
-      console.log(res);
-      return res.status;
-    } catch (err) {
-      console.log(err);
-      return false;
-    }
+  const dateChecker = async (payload: CycleDateCheckData) => {
+    let status = false;
+
+    await cycleService
+      .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
+      .then((res) => {
+        status = res.status;
+      });
+
+    return status;
   };
 
   const handleFormSubmit = async (formData: Partial<ICycle>) => {
@@ -160,66 +154,34 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
       ...formData,
     };
 
-    if (payload.start_date && payload.end_date) {
-      if (!isDateGreaterThanToday(payload.end_date)) {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Unable to create cycle in past date. Please enter a valid date.",
-        });
-        handleClose();
-        return;
-      }
+    let isDateValid: boolean = true;
 
-      if (data?.start_date && data?.end_date) {
-        const isDateValidForExistingCycle = await dateChecker({
+    if (payload.start_date && payload.end_date) {
+      if (data?.start_date && data?.end_date)
+        isDateValid = await dateChecker({
           start_date: payload.start_date,
           end_date: payload.end_date,
           cycle_id: data.id,
         });
-
-        if (isDateValidForExistingCycle) {
-          await updateCycle(data.id, payload);
-          return;
-        } else {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message:
-              "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
-          });
-          handleClose();
-          return;
-        }
-      }
-
-      const isDateValid = await dateChecker({
-        start_date: payload.start_date,
-        end_date: payload.end_date,
-      });
-
-      if (isDateValid) {
-        if (data) {
-          await updateCycle(data.id, payload);
-        } else {
-          await createCycle(payload);
-        }
-      } else {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message:
-            "You have a cycle already on the given dates, if you want to create your draft cycle you can do that by removing dates",
+      else
+        isDateValid = await dateChecker({
+          start_date: payload.start_date,
+          end_date: payload.end_date,
         });
-        handleClose();
-      }
-    } else {
-      if (data) {
-        await updateCycle(data.id, payload);
-      } else {
-        await createCycle(payload);
-      }
     }
+
+    if (isDateValid) {
+      if (data) await updateCycle(data.id, payload);
+      else await createCycle(payload);
+
+      handleClose();
+    } else
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message:
+          "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
+      });
   };
 
   return (
diff --git a/apps/app/components/ui/date.tsx b/apps/app/components/ui/date.tsx
index abfd9a17142..a4f7a5e0e01 100644
--- a/apps/app/components/ui/date.tsx
+++ b/apps/app/components/ui/date.tsx
@@ -11,11 +11,21 @@ type Props = {
   value: string | null;
   onChange: (val: string | null) => void;
   label: string;
+  minDate?: Date;
+  maxDate?: Date;
+  closeOnSelect?: boolean;
 };
 
-export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
+export const DateSelect: React.FC<Props> = ({
+  value,
+  onChange,
+  label,
+  minDate,
+  maxDate,
+  closeOnSelect = true,
+}) => (
   <Popover className="relative flex items-center justify-center  rounded-lg">
-    {({ open }) => (
+    {({ close }) => (
       <>
         <Popover.Button className="flex cursor-pointer items-center rounded-md border border-custom-border-100 text-xs shadow-sm duration-300 hover:bg-custom-background-80">
           <span className="flex items-center justify-center gap-2 px-2 py-1 text-xs text-custom-text-200">
@@ -50,8 +60,12 @@ export const DateSelect: React.FC<Props> = ({ value, onChange, label }) => (
               onChange={(val) => {
                 if (!val) onChange("");
                 else onChange(renderDateFormat(val));
+
+                if (closeOnSelect) close();
               }}
               dateFormat="dd-MM-yyyy"
+              minDate={minDate}
+              maxDate={maxDate}
               inline
             />
           </Popover.Panel>
diff --git a/apps/app/pages/[workspaceSlug]/index.tsx b/apps/app/pages/[workspaceSlug]/index.tsx
index 5a478a6ac92..d3117bafca1 100644
--- a/apps/app/pages/[workspaceSlug]/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/index.tsx
@@ -69,21 +69,21 @@ const WorkspacePage: NextPage = () => {
         projects.length > 0 ? (
           <div className="p-8">
             <div className="flex flex-col gap-8">
-              <div className="text-custom-text-200 flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
+              <div className="flex flex-col justify-between gap-x-2 gap-y-6 rounded-lg border border-custom-border-100 bg-custom-background-100 px-4 py-6 md:flex-row md:items-center md:py-3">
                 <p className="font-semibold">
                   Plane is open source, support us by starring us on GitHub.
                 </p>
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 text-custom-text-200">
                   <button
                     onClick={() => setIsProductUpdatesModalOpen(true)}
-                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm hover:text-custom-text-100 font-medium duration-300"
                   >
                     {`What's New?`}
                   </button>
                   <a
                     href="https://github.com/makeplane/plane"
                     target="_blank"
-                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm font-medium duration-300"
+                    className="rounded-md border-2 border-custom-border-100 px-3 py-1.5 text-sm hover:text-custom-text-100 font-medium duration-300"
                     rel="noopener noreferrer"
                   >
                     Star us on GitHub
diff --git a/apps/app/services/cycles.service.ts b/apps/app/services/cycles.service.ts
index c8af558d269..89cd50a2fcc 100644
--- a/apps/app/services/cycles.service.ts
+++ b/apps/app/services/cycles.service.ts
@@ -3,7 +3,7 @@ import APIService from "services/api.service";
 import trackEventServices from "services/track-event.service";
 
 // types
-import type { ICurrentUserResponse, ICycle, IIssue, IIssueViewOptions } from "types";
+import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IIssue } from "types";
 
 const { NEXT_PUBLIC_API_BASE_URL } = process.env;
 
@@ -148,10 +148,7 @@ class ProjectCycleServices extends APIService {
   async cycleDateCheck(
     workspaceSlug: string,
     projectId: string,
-    data: {
-      start_date: string;
-      end_date: string;
-    }
+    data: CycleDateCheckData
   ): Promise<any> {
     return this.post(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`,
diff --git a/apps/app/types/cycles.d.ts b/apps/app/types/cycles.d.ts
index a7de8fa534f..878e9c060e6 100644
--- a/apps/app/types/cycles.d.ts
+++ b/apps/app/types/cycles.d.ts
@@ -85,3 +85,9 @@ export type SelectCycleType =
   | undefined;
 
 export type SelectIssue = (IIssue & { actionType: "edit" | "delete" | "create" }) | null;
+
+export type CycleDateCheckData = {
+  start_date: string;
+  end_date: string;
+  cycle_id?: string;
+};

From a17d7f61736a7eb1de1826e8758792fc092bfdc8 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sun, 23 Jul 2023 22:38:34 +0530
Subject: [PATCH 2/2] chore: update remove assignee issue activity

---
 apps/app/components/issues/activity.tsx | 31 +++++++++++++------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/apps/app/components/issues/activity.tsx b/apps/app/components/issues/activity.tsx
index 958a707d89b..81b25366920 100644
--- a/apps/app/components/issues/activity.tsx
+++ b/apps/app/components/issues/activity.tsx
@@ -27,22 +27,23 @@ const activityDetails: {
     icon: React.ReactNode;
   };
 } = {
-  assignee: {
-    message: (activity) => (
-      <>
-        removed the assignee{" "}
-        <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
-      </>
-    ),
-    icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
-  },
   assignees: {
-    message: (activity) => (
-      <>
-        added a new assignee{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
-      </>
-    ),
+    message: (activity) => {
+      if (activity.old_value === "")
+        return (
+          <>
+            added a new assignee{" "}
+            <span className="font-medium text-custom-text-100">{activity.new_value}</span>.
+          </>
+        );
+      else
+        return (
+          <>
+            removed the assignee{" "}
+            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+          </>
+        );
+    },
     icon: <Icon iconName="group" className="!text-sm" aria-hidden="true" />,
   },
   archived_at: {