feat: react-datepicker added (#210)

* fix: issue description form

* fix: build errors

* feat: react-datepicker added
This commit is contained in:
Aaryan Khandelwal 2023-01-30 23:16:02 +05:30 committed by GitHub
parent fcf23b985b
commit 0ff5f363ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 409 additions and 251 deletions

View file

@ -13,7 +13,7 @@ import cyclesService from "services/cycles.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { Loader } from "components/ui";
import { Loader, CustomDatePicker } from "components/ui";
//progress-bar
import { CircularProgressbar } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
@ -23,7 +23,7 @@ import { groupBy } from "helpers/array.helper";
// types
import { CycleIssueResponse, ICycle } from "types";
// fetch-keys
import { CYCLE_DETAIL } from "constants/fetch-keys";
import { CYCLE_LIST } from "constants/fetch-keys";
type Props = {
cycle: ICycle | undefined;
@ -38,9 +38,7 @@ const defaultValues: Partial<ICycle> = {
const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) => {
const router = useRouter();
const {
query: { workspaceSlug, projectId },
} = router;
const { workspaceSlug, projectId, cycleId } = router.query;
const { setToastAlert } = useToast();
@ -60,11 +58,21 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
const submitChanges = (data: Partial<ICycle>) => {
if (!workspaceSlug || !projectId || !module) return;
mutate<ICycle[]>(
projectId && CYCLE_LIST(projectId as string),
(prevData) =>
(prevData ?? []).map((tempCycle) => {
if (tempCycle.id === cycleId) return { ...tempCycle, ...data };
return tempCycle;
}),
false
);
cyclesService
.patchCycle(workspaceSlug as string, projectId as string, cycle?.id ?? "", data)
.then((res) => {
console.log(res);
mutate(CYCLE_DETAIL);
mutate(CYCLE_LIST(projectId as string));
})
.catch((e) => {
console.log(e);
@ -160,16 +168,17 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
<Controller
control={control}
name="start_date"
render={({ field: { value, onChange } }) => (
<input
type="date"
id="cycleStartDate"
value={value ?? ""}
onChange={(e: any) => {
submitChanges({ start_date: e.target.value });
onChange(e.target.value);
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
submitChanges({
start_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
isClearable={false}
/>
)}
/>
@ -184,16 +193,17 @@ const CycleDetailSidebar: React.FC<Props> = ({ cycle, isOpen, cycleIssues }) =>
<Controller
control={control}
name="end_date"
render={({ field: { value, onChange } }) => (
<input
type="date"
id="moduleEndDate"
value={value ?? ""}
onChange={(e: any) => {
submitChanges({ end_date: e.target.value });
onChange(e.target.value);
render={({ field: { value } }) => (
<CustomDatePicker
value={value}
onChange={(val: Date) => {
submitChanges({
end_date: val
? `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
: null,
});
}}
className="w-full cursor-pointer rounded-md border bg-transparent px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
isClearable={false}
/>
)}
/>