Skip to content

Commit

Permalink
Revert "Add hotkeys for unslecting and deleting timespans (#148)"
Browse files Browse the repository at this point in the history 
This reverts commit 6842b5c.
  • Loading branch information
@jmattheis
jmattheis committed Mar 8, 2024
1 parent 4e90096 commit 0078ba8
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 122 deletions.
41 changes: 36 additions & 5 deletions ui/src/timespan/TimeSpan.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
80 changes: 3 additions & 77 deletions ui/src/timespan/calendar/CalendarPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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}) => {
Expand All @@ -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();
},
});

Expand Down Expand Up @@ -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();
Expand All @@ -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 = {
Expand All @@ -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) => {
Expand All @@ -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}
Expand Down
40 changes: 0 additions & 40 deletions ui/src/timespan/mutations.ts
View file

This file was deleted.

0 comments on commit 0078ba8

Please sign in to comment.