Revert "Add hotkeys for unslecting and deleting timespans (#148)"

This reverts commit 6842b5c.

Author: jmattheis

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<TimeSpanProps> = React.memo(
             clearTimeout(note.current.handle);
             return updateTimeSpan({variables: {...variables, note: note.current.value}});
         };
-        const [removeTimeSpan] = useMutation<RemoveTimeSpan, RemoveTimeSpanVariables>(
-            gqlTimeSpan.RemoveTimeSpan,
-            removeTimeSpanOptions
-        );
+        const [removeTimeSpan] = useMutation<RemoveTimeSpan, RemoveTimeSpanVariables>(gqlTimeSpan.RemoveTimeSpan, {
+            update: (cache, {data}) => {
+                let oldData: TimeSpans | null = null;
+                try {
+                    oldData = cache.readQuery<TimeSpans>({query: gqlTimeSpan.TimeSpans});
+                } catch (e) {}
+
+                const oldTrackers = cache.readQuery<Trackers>({query: gqlTimeSpan.Trackers});
+                if (!data || !data.removeTimeSpan) {
+                    return;
+                }
+                const removedId = data.removeTimeSpan.id;
+                if (oldTrackers) {
+                    cache.writeQuery<Trackers>({
+                        query: gqlTimeSpan.Trackers,
+                        data: {
+                            timers: (oldTrackers.timers || []).filter((tracker) => tracker.id !== removedId),
+                        },
+                    });
+                }
+                if (oldData) {
+                    cache.writeQuery<TimeSpans>({
+                        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);

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<UpdateTimeSpan, UpdateTimeSpanVariables>(gqlTimeSpan.UpdateTimeSpan);
-    const [removeTimeSpan] = useMutation<RemoveTimeSpan, RemoveTimeSpanVariables>(
-        gqlTimeSpan.RemoveTimeSpan,
-        removeTimeSpanOptions
-    );
     const [currentDate, setCurrentDate] = React.useState(moment());
     const [stopTimer] = useMutation<StopTimer, StopTimerVariables>(gqlTimeSpan.StopTimer, {
         update: (cache, {data}) => {
@@ -99,34 +93,18 @@ export const CalendarPage: React.FC = () => {
         window.__TRAGGO_CALENDAR = {};
         return () => (window.__TRAGGO_CALENDAR = undefined);
     });
-
-    const fullCalendarRef = React.useRef<FullCalendar | null>(null);
-    const unselectCalenderItem = () => {
-        const instance = fullCalendarRef.current;
-        if (instance) {
-            const calendar = instance.getApi();
-            if (calendar) {
-                calendar.unselect();
-            }
-        }
-    };
-
     const [ignore, setIgnore] = React.useState<boolean>(false);
     const [selected, setSelected] = React.useState<{selected: HTMLElement | null; data: TimeSpans_timeSpans_timeSpans | null}>({
         selected: null,
         data: null,
     });
-
-    const [lastCreatedTimeSpanId, setLastCreatedTimeSpanId] = React.useState<number | null>(null);
-
     const [addTimeSpan] = useMutation<AddTimeSpan, AddTimeSpanVariables>(gqlTimeSpan.AddTimeSpan, {
         update: (cache, {data}) => {
             if (!data || !data.createTimeSpan) {
                 return;
             }
             addTimeSpanInRangeToCache(cache, data.createTimeSpan, timeSpansResult.variables);
             addTimeSpanToCache(cache, data.createTimeSpan);
-            unselectCalenderItem();
         },
     });
 
@@ -198,19 +176,15 @@ 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(),
                 tags: [],
                 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 (
         <Paper style={{padding: 10, bottom: 10, top: 80, position: 'absolute'}} color="red">
             <FullCalendarStyling>
                 <FullCalendar
-                    ref={fullCalendarRef}
                     defaultView="timeGridWeek"
                     rerenderDelay={30}
                     datesRender={(x) => {
@@ -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}