thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: update time in real-time in dashboard and profile sidebar (#3489)

Browse Source 
* chore: update dashboard and profile time in realtime

* chore: remove seconds

* fix: cycle and module sidebar datepicker
This commit is contained in:
Aaryan Khandelwal 2024-01-29 15:42:57 +05:30 committed by GitHub
parent b3393f5c48
commit 3c9679dff9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 280 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/components/cycles/sidebar.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { useForm } from "react-hook-form";
@ -46,6 +46,11 @@ type Props = {
handleClose: () => void;
};
const defaultValues: Partial<ICycle> = {
start_date: null,
end_date: null,
};
// services
const cycleService = new CycleService();
@ -54,6 +59,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { cycleId, handleClose } = props;
// states
const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
// refs
const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug, projectId, peekCycle } = router.query;
@ -70,11 +78,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const { setToastAlert } = useToast();
const defaultValues: Partial<ICycle> = {
start_date: new Date().toString(),
end_date: new Date().toString(),
};
const { setValue, reset, watch } = useForm({
defaultValues,
});
@ -120,6 +123,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleStartDateChange = async (date: string) => {
setValue("start_date", date);
if (!watch("end_date") || watch("end_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
setToastAlert({
@ -127,6 +133,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!",
message: "Unable to create cycle in past date. Please enter a valid date.",
});
reset({ ...cycleDetails });
return;
}
@ -147,7 +154,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Success!",
message: "Cycle updated successfully.",
});
return;
} else {
setToastAlert({
type: "error",
@ -155,8 +161,10 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
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",
});
return;
}
reset({ ...cycleDetails });
return;
}
const isDateValid = await dateChecker({
@ -181,6 +189,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
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",
});
reset({ ...cycleDetails });
}
}
};
@ -188,6 +197,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleEndDateChange = async (date: string) => {
setValue("end_date", date);
if (!watch("start_date") || watch("start_date") === "") startDateButtonRef.current?.click();
if (watch("start_date") && watch("end_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("end_date")}`)) {
setToastAlert({
@ -195,6 +206,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!",
message: "Unable to create cycle in past date. Please enter a valid date.",
});
reset({ ...cycleDetails });
return;
}
@ -215,7 +227,6 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Success!",
message: "Cycle updated successfully.",
});
return;
} else {
setToastAlert({
type: "error",
@ -223,8 +234,9 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
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",
});
return;
}
reset({ ...cycleDetails });
return;
}
const isDateValid = await dateChecker({
@ -249,6 +261,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
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",
});
reset({ ...cycleDetails });
}
}
};
@ -387,11 +400,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" />
<span className="text-base">Start Date</span>
<span className="text-base">Start date</span>
</div>
<div className="relative flex w-1/2 items-center rounded-sm">
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
{({ close }) => (
<>
<Popover.Button
ref={startDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
@ -422,6 +438,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
if (val) {
setTrackElement("CYCLE_PAGE_SIDEBAR_START_DATE_BUTTON");
handleStartDateChange(val);
close();
}
}}
startDate={watch("start_date") ?? watch("end_date") ?? null}
@ -431,6 +448,8 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div>
@ -438,12 +457,14 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarCheck2 className="h-4 w-4" />
<span className="text-base">Target Date</span>
<span className="text-base">Target date</span>
</div>
<div className="relative flex w-1/2 items-center rounded-sm">
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
{({ close }) => (
<>
<Popover.Button
ref={endDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
@ -474,6 +495,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
if (val) {
setTrackElement("CYCLE_PAGE_SIDEBAR_END_DATE_BUTTON");
handleEndDateChange(val);
close();
}
}}
startDate={watch("start_date") ?? watch("end_date") ?? null}
@ -484,6 +506,7 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div>

53
web/components/modules/sidebar.tsx
View File

@ -1,20 +1,8 @@
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/router";
import { observer } from "mobx-react-lite";
import { Controller, useForm } from "react-hook-form";
import { Disclosure, Popover, Transition } from "@headlessui/react";
// hooks
import { useModule, useUser } from "hooks/store";
// hooks
import useToast from "hooks/use-toast";
// components
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
// ui
import { CustomRangeDatePicker } from "components/ui";
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
// icon
import {
AlertCircle,
CalendarCheck2,
@ -27,6 +15,17 @@ import {
Trash2,
UserCircle2,
} from "lucide-react";
// hooks
import { useModule, useUser } from "hooks/store";
import useToast from "hooks/use-toast";
// components
import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart";
import { ProjectMemberDropdown } from "components/dropdowns";
// ui
import { CustomRangeDatePicker } from "components/ui";
import { CustomMenu, Loader, LayersIcon, CustomSelect, ModuleStatusIcon, UserGroupIcon } from "@plane/ui";
// helpers
import { isDateGreaterThanToday, renderFormattedPayloadDate, renderFormattedDate } from "helpers/date-time.helper";
import { copyUrlToClipboard } from "helpers/string.helper";
@ -35,7 +34,6 @@ import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
// constant
import { MODULE_STATUS } from "constants/module";
import { EUserProjectRoles } from "constants/project";
import { ProjectMemberDropdown } from "components/dropdowns";
const defaultValues: Partial<IModule> = {
lead: "",
@ -57,6 +55,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
const [moduleLinkModal, setModuleLinkModal] = useState(false);
const [selectedLinkToUpdate, setSelectedLinkToUpdate] = useState<ILinkDetails | null>(null);
// refs
const startDateButtonRef = useRef<HTMLButtonElement | null>(null);
const endDateButtonRef = useRef<HTMLButtonElement | null>(null);
// router
const router = useRouter();
const { workspaceSlug, projectId, peekModule } = router.query;
@ -164,6 +165,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleStartDateChange = async (date: string) => {
setValue("start_date", date);
if (!watch("target_date") || watch("target_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({
@ -171,6 +174,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.",
});
reset({
...moduleDetails,
});
return;
}
@ -189,6 +195,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
const handleEndDateChange = async (date: string) => {
setValue("target_date", date);
if (!watch("start_date") || watch("start_date") === "") endDateButtonRef.current?.click();
if (watch("start_date") && watch("target_date") && watch("start_date") !== "" && watch("start_date") !== "") {
if (!isDateGreaterThanToday(`${watch("target_date")}`)) {
setToastAlert({
@ -196,6 +204,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
title: "Error!",
message: "Unable to create module in past date. Please enter a valid date.",
});
reset({
...moduleDetails,
});
return;
}
@ -355,11 +366,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarClock className="h-4 w-4" />
<span className="text-base">Start Date</span>
<span className="text-base">Start date</span>
</div>
<div className="relative flex w-1/2 items-center rounded-sm">
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
{({ close }) => (
<>
<Popover.Button
ref={startDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
@ -389,6 +403,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
onChange={(val) => {
if (val) {
handleStartDateChange(val);
close();
}
}}
startDate={watch("start_date") ?? watch("target_date") ?? null}
@ -398,6 +413,8 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div>
@ -405,12 +422,14 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
<div className="flex items-center justify-start gap-1">
<div className="flex w-1/2 items-center justify-start gap-2 text-custom-text-300">
<CalendarCheck2 className="h-4 w-4" />
<span className="text-base">Target Date</span>
<span className="text-base">Target date</span>
</div>
<div className="relative flex w-1/2 items-center rounded-sm">
<Popover className="flex h-full w-full items-center justify-center rounded-lg">
{({ close }) => (
<>
<Popover.Button
ref={endDateButtonRef}
className={`w-full cursor-pointer rounded-sm text-sm font-medium text-custom-text-300 hover:bg-custom-background-80 ${
isEditingAllowed ? "cursor-pointer" : "cursor-not-allowed"
}`}
@ -440,6 +459,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
onChange={(val) => {
if (val) {
handleEndDateChange(val);
close();
}
}}
startDate={watch("start_date") ?? watch("target_date") ?? null}
@ -450,6 +470,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = observer((props) => {
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
</div>

4
web/components/profile/index.ts
View File

@ -1,5 +1,5 @@
export * from "./overview";
export * from "./navbar";
export * from "./sidebar";
export * from "./profile-issues-filter";
export * from "./sidebar";
export * from "./time";

18
web/components/profile/sidebar.tsx
View File

@ -7,6 +7,8 @@ import { observer } from "mobx-react-lite";
import { useUser } from "hooks/store";
// services
import { UserService } from "services/user.service";
// components
import { ProfileSidebarTime } from "./time";
// ui
import { Loader, Tooltip } from "@plane/ui";
// icons
@ -34,16 +36,6 @@ export const ProfileSidebar = observer(() => {
: null
);
// Create a date object for the current time in the specified timezone
const currentTime = new Date();
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: userProjectsData?.user_data.user_timezone,
hour12: false, // Use 24-hour format
hour: "2-digit",
minute: "2-digit",
});
const timeString = formatter.format(currentTime);
const userDetails = [
{
label: "Joined on",
@ -51,11 +43,7 @@ export const ProfileSidebar = observer(() => {
},
{
label: "Timezone",
value: (
<span>
{timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
</span>
),
value: <ProfileSidebarTime timeZone={userProjectsData?.user_data.user_timezone} />,
},
];

27
web/components/profile/time.tsx Normal file
View File

@ -0,0 +1,27 @@
// hooks
import { useCurrentTime } from "hooks/use-current-time";
type Props = {
timeZone: string | undefined;
};
export const ProfileSidebarTime: React.FC<Props> = (props) => {
const { timeZone } = props;
// current time hook
const { currentTime } = useCurrentTime();
// Create a date object for the current time in the specified timezone
const formatter = new Intl.DateTimeFormat("en-US", {
timeZone: timeZone,
hour12: false, // Use 24-hour format
hour: "2-digit",
minute: "2-digit",
});
const timeString = formatter.format(currentTime);
return (
<span>
{timeString} <span className="text-custom-text-200">{timeZone}</span>
</span>
);
};

7
web/components/user/user-greetings.tsx
View File

@ -1,4 +1,7 @@
import { FC } from "react";
// hooks
import { useCurrentTime } from "hooks/use-current-time";
// types
import { IUser } from "@plane/types";
export interface IUserGreetingsView {
@ -7,8 +10,8 @@ export interface IUserGreetingsView {
export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
const { user } = props;
const currentTime = new Date();
// current time hook
const { currentTime } = useCurrentTime();
const hour = new Intl.DateTimeFormat("en-US", {
hour12: false,

17
web/hooks/use-current-time.tsx Normal file
View File

@ -0,0 +1,17 @@
import { useEffect, useState } from "react";
export const useCurrentTime = () => {
const [currentTime, setCurrentTime] = useState(new Date());
// update the current time every second
useEffect(() => {
const intervalId = setInterval(() => {
setCurrentTime(new Date());
}, 1000);
return () => clearInterval(intervalId);
}, []);
return {
currentTime,
};
};