diff --git a/ui/src/timespan/TimeSpan.tsx b/ui/src/timespan/TimeSpan.tsx index 8655c6f..277e866 100644 --- a/ui/src/timespan/TimeSpan.tsx +++ b/ui/src/timespan/TimeSpan.tsx @@ -16,13 +16,14 @@ import Menu from '@material-ui/core/Menu'; import MenuItem from '@material-ui/core/MenuItem'; import {RemoveTimeSpan, RemoveTimeSpanVariables} from '../gql/__generated__/RemoveTimeSpan'; import {useStateAndDelegateWithDelayOnChange} from '../utils/hooks'; +import {TimeSpans} from '../gql/__generated__/TimeSpans'; import {isSameDate} from '../utils/time'; +import {Trackers} from '../gql/__generated__/Trackers'; import {addTimeSpanToCache, removeFromTrackersCache} from '../gql/utils'; import {StartTimer, StartTimerVariables} from '../gql/__generated__/StartTimer'; import {RelativeTime, RelativeToNow} from '../common/RelativeTime'; import ShowNotesIcon from '@material-ui/icons/KeyboardArrowDown'; import HideNotesIcon from '@material-ui/icons/KeyboardArrowUp'; -import {removeTimeSpanOptions} from './mutations'; interface Range { from: moment.Moment; @@ -81,10 +82,40 @@ export const TimeSpan: React.FC = React.memo( clearTimeout(note.current.handle); return updateTimeSpan({variables: {...variables, note: note.current.value}}); }; - const [removeTimeSpan] = useMutation( - gqlTimeSpan.RemoveTimeSpan, - removeTimeSpanOptions - ); + const [removeTimeSpan] = useMutation(gqlTimeSpan.RemoveTimeSpan, { + update: (cache, {data}) => { + let oldData: TimeSpans | null = null; + try { + oldData = cache.readQuery({query: gqlTimeSpan.TimeSpans}); + } catch (e) {} + + const oldTrackers = cache.readQuery({query: gqlTimeSpan.Trackers}); + if (!data || !data.removeTimeSpan) { + return; + } + const removedId = data.removeTimeSpan.id; + if (oldTrackers) { + cache.writeQuery({ + query: gqlTimeSpan.Trackers, + data: { + timers: (oldTrackers.timers || []).filter((tracker) => tracker.id !== removedId), + }, + }); + } + if (oldData) { + cache.writeQuery({ + query: gqlTimeSpan.TimeSpans, + data: { + timeSpans: { + __typename: 'PagedTimeSpans', + timeSpans: oldData.timeSpans.timeSpans.filter((ts) => ts.id !== removedId), + cursor: oldData.timeSpans.cursor, + }, + }, + }); + } + }, + }); const updateNote = (newValue: string) => { window.clearTimeout(note.current.handle); diff --git a/ui/src/timespan/calendar/CalendarPage.tsx b/ui/src/timespan/calendar/CalendarPage.tsx index 297d5e3..5a4efc0 100644 --- a/ui/src/timespan/calendar/CalendarPage.tsx +++ b/ui/src/timespan/calendar/CalendarPage.tsx @@ -38,8 +38,6 @@ import {timeRunningCalendar} from '../timeutils'; import {stripTypename} from '../../utils/strip'; import {TimeSpansInRange, TimeSpansInRangeVariables} from '../../gql/__generated__/TimeSpansInRange'; import {ExtendedEventSourceInput} from '@fullcalendar/core/structs/event-source'; -import {RemoveTimeSpan, RemoveTimeSpanVariables} from '../../gql/__generated__/RemoveTimeSpan'; -import {removeTimeSpanOptions} from '../mutations'; const toMoment = (date: Date): moment.Moment => { return moment(date).tz('utc'); @@ -74,10 +72,6 @@ export const CalendarPage: React.FC = () => { refetchQueries: [{query: gqlTimeSpan.Trackers}], }); const [updateTimeSpanMutation] = useMutation(gqlTimeSpan.UpdateTimeSpan); - const [removeTimeSpan] = useMutation( - gqlTimeSpan.RemoveTimeSpan, - removeTimeSpanOptions - ); const [currentDate, setCurrentDate] = React.useState(moment()); const [stopTimer] = useMutation(gqlTimeSpan.StopTimer, { update: (cache, {data}) => { @@ -99,26 +93,11 @@ export const CalendarPage: React.FC = () => { window.__TRAGGO_CALENDAR = {}; return () => (window.__TRAGGO_CALENDAR = undefined); }); - - const fullCalendarRef = React.useRef(null); - const unselectCalenderItem = () => { - const instance = fullCalendarRef.current; - if (instance) { - const calendar = instance.getApi(); - if (calendar) { - calendar.unselect(); - } - } - }; - const [ignore, setIgnore] = React.useState(false); const [selected, setSelected] = React.useState<{selected: HTMLElement | null; data: TimeSpans_timeSpans_timeSpans | null}>({ selected: null, data: null, }); - - const [lastCreatedTimeSpanId, setLastCreatedTimeSpanId] = React.useState(null); - const [addTimeSpan] = useMutation(gqlTimeSpan.AddTimeSpan, { update: (cache, {data}) => { if (!data || !data.createTimeSpan) { @@ -126,7 +105,6 @@ export const CalendarPage: React.FC = () => { } addTimeSpanInRangeToCache(cache, data.createTimeSpan, timeSpansResult.variables); addTimeSpanToCache(cache, data.createTimeSpan); - unselectCalenderItem(); }, }); @@ -198,8 +176,8 @@ export const CalendarPage: React.FC = () => { }, }); }; - const onSelect: OptionsInput['select'] = async (data) => { - const result = await addTimeSpan({ + const onSelect: OptionsInput['select'] = (data) => { + addTimeSpan({ variables: { start: moment(data.start).format(), end: moment(data.end).format(), @@ -207,10 +185,6 @@ export const CalendarPage: React.FC = () => { note: '', }, }); - - if (result.data && result.data.createTimeSpan) { - setLastCreatedTimeSpanId(result.data.createTimeSpan.id); - } }; const onClick: OptionsInput['eventClick'] = (data) => { data.jsEvent.preventDefault(); @@ -223,7 +197,6 @@ export const CalendarPage: React.FC = () => { // tslint:disable-next-line:no-any setSelected({data: data.event.extendedProps.ts, selected: data.jsEvent.target as any}); - setLastCreatedTimeSpanId(null); }; if (trackersResult.data && !(trackersResult.data.timers || []).length) { const startTimerEvent: ExtendedEventSourceInput = { @@ -238,57 +211,10 @@ export const CalendarPage: React.FC = () => { values.push(startTimerEvent); } - React.useEffect(() => { - let deletingSelected = false; - - const onKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Escape') { - e.preventDefault(); - setSelected({selected: null, data: null}); - unselectCalenderItem(); - } - - if ( - !deletingSelected && - lastCreatedTimeSpanId && - (e.key === 'Delete' || e.key === 'Backspace' || e.key === 'Escape') - ) { - e.preventDefault(); - removeFromTimeSpanInRangeCache(apollo.cache, lastCreatedTimeSpanId, timeSpansResult.variables); - removeTimeSpan({variables: {id: lastCreatedTimeSpanId}}).finally(() => { - deletingSelected = false; - }); - setSelected({selected: null, data: null}); - setLastCreatedTimeSpanId(null); - unselectCalenderItem(); - return; - } - - if (!deletingSelected && selected.data && (e.key === 'Delete' || e.key === 'Backspace')) { - e.preventDefault(); - setSelected({selected: null, data: selected.data}); - removeFromTimeSpanInRangeCache(apollo.cache, selected.data.id, timeSpansResult.variables); - removeTimeSpan({variables: {id: selected.data.id}}).finally(() => { - deletingSelected = false; - }); - setSelected({selected: null, data: null}); - unselectCalenderItem(); - return; - } - }; - - document.addEventListener('keydown', onKeyDown); - - return () => { - document.removeEventListener('keydown', onKeyDown); - }; - }, [selected, lastCreatedTimeSpanId, apollo.cache, removeTimeSpan, timeSpansResult.variables]); - return ( { @@ -304,7 +230,7 @@ export const CalendarPage: React.FC = () => { events={values} allDaySlot={false} selectable={true} - selectMirror={false} + selectMirror={true} handleWindowResize={true} height={'parent'} selectMinDistance={20} diff --git a/ui/src/timespan/mutations.ts b/ui/src/timespan/mutations.ts deleted file mode 100644 index 99d9645..0000000 --- a/ui/src/timespan/mutations.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {RemoveTimeSpan, RemoveTimeSpanVariables} from '../gql/__generated__/RemoveTimeSpan'; -import * as gqlTimeSpan from '../gql/timeSpan'; -import {TimeSpans} from '../gql/__generated__/TimeSpans'; -import {Trackers} from '../gql/__generated__/Trackers'; -import {MutationHookOptions} from '@apollo/react-hooks/lib/types'; - -export const removeTimeSpanOptions: MutationHookOptions = { - update: (cache, {data}) => { - let oldData: TimeSpans | null = null; - try { - oldData = cache.readQuery({query: gqlTimeSpan.TimeSpans}); - } catch (e) {} - - const oldTrackers = cache.readQuery({query: gqlTimeSpan.Trackers}); - if (!data || !data.removeTimeSpan) { - return; - } - const removedId = data.removeTimeSpan.id; - if (oldTrackers) { - cache.writeQuery({ - query: gqlTimeSpan.Trackers, - data: { - timers: (oldTrackers.timers || []).filter((tracker) => tracker.id !== removedId), - }, - }); - } - if (oldData) { - cache.writeQuery({ - query: gqlTimeSpan.TimeSpans, - data: { - timeSpans: { - __typename: 'PagedTimeSpans', - timeSpans: oldData.timeSpans.timeSpans.filter((ts) => ts.id !== removedId), - cursor: oldData.timeSpans.cursor, - }, - }, - }); - } - }, -};