refactor: replace moment with dayjs

This commit is contained in:
Nurseiit Abdimomyn
2020-10-02 01:17:43 +06:00
committed by Jordan Knott
parent a288e06123
commit 92493deedf
9 changed files with 54 additions and 156 deletions

View File

@ -5,7 +5,6 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
import Input from 'shared/components/ControlledInput';
import { Popup, usePopup } from 'shared/components/PopupMenu';
import produce from 'immer';
import moment from 'moment';
import { mixin } from 'shared/utils/styles';
import Member from 'shared/components/Member';

View File

@ -8,15 +8,28 @@ import { HttpLink } from 'apollo-link-http';
import { onError } from 'apollo-link-error';
import { enableMapSet } from 'immer';
import { ApolloLink, Observable, fromPromise } from 'apollo-link';
import moment from 'moment';
import dayjs from 'dayjs';
import updateLocale from 'dayjs/plugin/updateLocale';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import isBetween from 'dayjs/plugin/isBetween';
import weekday from 'dayjs/plugin/weekday';
import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
import cache from './App/cache';
import App from './App';
// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
dayjs.extend(isSameOrAfter);
dayjs.extend(weekday);
dayjs.extend(isBetween);
dayjs.extend(customParseFormat);
enableMapSet();
moment.updateLocale('en', {
dayjs.extend(updateLocale);
dayjs.updateLocale('en', {
week: {
dow: 1, // First day of week is Monday
doy: 7, // First week of year must contain 1 January (7 + 1 - 1)

View File

@ -1,5 +1,5 @@
import React, { useState, useEffect, forwardRef } from 'react';
import moment from 'moment';
import dayjs from 'dayjs';
import styled from 'styled-components';
import DatePicker from 'react-datepicker';
import _ from 'lodash';
@ -110,12 +110,12 @@ const HeaderActions = styled.div`
`;
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
const now = moment();
const now = dayjs();
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
const [startDate, setStartDate] = useState(new Date());
useEffect(() => {
const newDate = moment(startDate).format('YYYY-MM-DD');
const newDate = dayjs(startDate).format('YYYY-MM-DD');
setValue('endDate', newDate);
}, [startDate]);
@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
'December',
];
const saveDueDate = (data: any) => {
const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
if (newDate.isValid()) {
onDueDateChange(task, newDate.toDate());
}

View File

@ -10,7 +10,7 @@ import {
getNewDraggablePosition,
getAfterDropDraggableList,
} from 'shared/utils/draggables';
import moment from 'moment';
import dayjs from 'dayjs';
import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
import { Container, BoardContainer, BoardWrapper } from './Styles';
@ -51,7 +51,7 @@ export type TaskStatusFilter = {
export interface TaskMetaFilterName {
meta: TaskMeta;
value?: string | moment.Moment | null;
value?: string | dayjs.Dayjs | null;
id?: string | null;
}
@ -104,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
return true;
}
if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
const completedAt = moment(task.completedAt);
const REFERENCE = moment(); // fixed just for testing, use moment();
const completedAt = dayjs(task.completedAt);
const REFERENCE = dayjs();
switch (filter.since) {
case TaskSince.TODAY:
const TODAY = REFERENCE.clone().startOf('day');
return completedAt.isSame(TODAY, 'd');
case TaskSince.YESTERDAY:
const YESTERDAY = REFERENCE.clone()
.subtract(1, 'days')
.subtract(1, 'day')
.startOf('day');
return completedAt.isSameOrAfter(YESTERDAY, 'd');
case TaskSince.ONE_WEEK:
const ONE_WEEK = REFERENCE.clone()
.subtract(7, 'days')
.subtract(7, 'day')
.startOf('day');
return completedAt.isSameOrAfter(ONE_WEEK, 'd');
case TaskSince.TWO_WEEKS:
const TWO_WEEKS = REFERENCE.clone()
.subtract(14, 'days')
.subtract(14, 'day')
.startOf('day');
return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
case TaskSince.THREE_WEEKS:
const THREE_WEEKS = REFERENCE.clone()
.subtract(21, 'days')
.subtract(21, 'day')
.startOf('day');
return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
default:
@ -353,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
task.dueDate
? {
isPastDue: false,
formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
}
: undefined
}

View File

@ -1,5 +1,5 @@
import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
import moment from 'moment';
import dayjs from 'dayjs';
enum ShouldFilter {
NO_FILTER,
@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
}
if (task.dueDate) {
const taskDueDate = moment(task.dueDate);
const today = moment();
const taskDueDate = dayjs(task.dueDate);
const today = dayjs();
let start;
let end;
switch (filters.dueDate.type) {
@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
taskDueDate.isBefore(
today
.clone()
.add(1, 'days')
.add(1, 'day')
.endOf('day'),
),
);
@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
start = today
.clone()
.weekday(0)
.add(7, 'days')
.add(7, 'day')
.startOf('day');
end = today
.clone()
.weekday(6)
.add(7, 'days')
.add(7, 'day')
.endOf('day');
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
break;
@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
start = today.clone().startOf('day');
end = today
.clone()
.add(7, 'days')
.add(7, 'day')
.endOf('day');
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
break;
@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
start = today.clone().startOf('day');
end = today
.clone()
.add(14, 'days')
.add(14, 'day')
.endOf('day');
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
break;
@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
start = today.clone().startOf('day');
end = today
.clone()
.add(21, 'days')
.add(21, 'day')
.endOf('day');
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
break;

View File

@ -17,7 +17,7 @@ import dark from 'shared/utils/editorTheme';
import styled from 'styled-components';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import moment from 'moment';
import dayjs from 'dayjs';
import Task from 'shared/icons/Task';
import {
@ -182,7 +182,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
}}
>
{task.dueDate ? (
<SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
<SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
) : (
<SidebarButtonText>No due date</SidebarButtonText>
)}

View File

@ -1,4 +1,4 @@
import moment from 'moment';
import dayjs from 'dayjs';
export enum TaskSortingType {
NONE,
@ -46,7 +46,7 @@ export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
if (b.dueDate && !a.dueDate) {
return 1;
}
return moment(a.dueDate).diff(moment(b.dueDate));
return dayjs(a.dueDate).diff(dayjs(b.dueDate));
}
if (taskSorting.type === TaskSortingType.COMPLETE) {
if (a.complete && !b.complete) {