{name}
diff --git a/ui/src/timespan/RefreshTimespans.tsx b/ui/src/timespan/RefreshTimespans.tsx
index 1d336b1d..b3efd7b6 100644
--- a/ui/src/timespan/RefreshTimespans.tsx
+++ b/ui/src/timespan/RefreshTimespans.tsx
@@ -1,15 +1,15 @@
import * as React from 'react';
-import {useQuery} from '@apollo/react-hooks';
-import {TimeSpans, TimeSpansVariables} from '../gql/__generated__/TimeSpans';
+import {useQuery} from '@apollo/client';
+import {TimeSpansQuery, TimeSpansQueryVariables} from '../gql/__generated__';
import * as gqlTimeSpan from '../gql/timeSpan';
import {useSnackbar} from 'notistack';
import {isSameDate} from '../utils/time';
import moment from 'moment';
-import {Fab, Zoom} from '@material-ui/core';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import {Fab, Zoom} from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
export const RefreshTimeSpans: React.FC = () => {
- const {refetch, data} = useQuery
(gqlTimeSpan.TimeSpans, {
+ const {refetch, data} = useQuery(gqlTimeSpan.TimeSpans, {
variables: {cursor: {pageSize: 30}},
});
const {enqueueSnackbar, closeSnackbar} = useSnackbar();
diff --git a/ui/src/timespan/TimeSpan.tsx b/ui/src/timespan/TimeSpan.tsx
index b70ba9a2..84e15a1e 100644
--- a/ui/src/timespan/TimeSpan.tsx
+++ b/ui/src/timespan/TimeSpan.tsx
@@ -2,25 +2,32 @@ import * as React from 'react';
import {TagSelectorEntry, toInputTags} from '../tag/tagSelectorEntry';
import {TagSelector} from '../tag/TagSelector';
import moment from 'moment';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
import {DateTimeSelector} from '../common/DateTimeSelector';
-import {Button, TextField, Typography, makeStyles} from '@material-ui/core';
+import {Button, TextField, Typography} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
import {inUserTz} from './timeutils';
-import {useMutation} from '@apollo/react-hooks';
-import {StopTimer, StopTimerVariables} from '../gql/__generated__/StopTimer';
+import {useMutation} from '@apollo/client';
+import {
+ StopTimerMutation,
+ StopTimerMutationVariables,
+ UpdateTimeSpanMutation,
+ UpdateTimeSpanMutationVariables,
+ RemoveTimeSpanMutation,
+ RemoveTimeSpanMutationVariables,
+ TimeSpansQuery,
+ TrackersQuery,
+ StartTimerMutation,
+ StartTimerMutationVariables,
+} from '../gql/__generated__';
import * as gqlTimeSpan from '../gql/timeSpan';
-import {UpdateTimeSpan, UpdateTimeSpanVariables} from '../gql/__generated__/UpdateTimeSpan';
-import IconButton from '@material-ui/core/IconButton';
-import {MoreVert} from '@material-ui/icons';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import {RemoveTimeSpan, RemoveTimeSpanVariables} from '../gql/__generated__/RemoveTimeSpan';
+import IconButton from '@mui/material/IconButton';
+import {MoreVert} from '@mui/icons-material';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
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';
interface Range {
@@ -65,6 +72,11 @@ const useStyles = makeStyles(() => ({
},
timeSelection: {
display: 'inline-flex',
+ // flex-end (not center): the start/end pickers have a floating label above their value,
+ // making them taller than the plain duration text - centering both as whole boxes leaves
+ // the duration vertically centered in the row while the picker's actual value text (below
+ // its label) sits lower, looking misaligned. Aligning bottoms lines up the value baselines.
+ alignItems: 'flex-end',
'@media (max-width: 750px)': {
justifyContent: 'space-evenly',
width: '100%',
@@ -104,7 +116,7 @@ export const TimeSpan: React.FC = React.memo(
const [openMenu, setOpenMenu] = useStateAndDelegateWithDelayOnChange(null, (o) =>
dateSelectorOpen(!!o)
);
- const [stopTimer] = useMutation(gqlTimeSpan.StopTimer, {
+ const [stopTimer] = useMutation(gqlTimeSpan.StopTimer, {
update: (cache, {data}) => {
if (!data || !data.stopTimeSpan) {
return;
@@ -113,48 +125,51 @@ export const TimeSpan: React.FC = React.memo(
addTimeSpanToCache(cache, data.stopTimeSpan);
},
});
- const [startTimer] = useMutation(gqlTimeSpan.StartTimer, {
+ const [startTimer] = useMutation(gqlTimeSpan.StartTimer, {
refetchQueries: [{query: gqlTimeSpan.Trackers}],
});
- const [updateTimeSpan] = useMutation(gqlTimeSpan.UpdateTimeSpan);
- const noteAwareUpdateTimeSpan = ({variables}: {variables: Omit}) => {
+ const [updateTimeSpan] = useMutation(gqlTimeSpan.UpdateTimeSpan);
+ const noteAwareUpdateTimeSpan = ({variables}: {variables: Omit}) => {
clearTimeout(note.current.handle);
return updateTimeSpan({variables: {...variables, note: note.current.value}});
};
- const [removeTimeSpan] = useMutation(gqlTimeSpan.RemoveTimeSpan, {
- update: (cache, {data}) => {
- let oldData: TimeSpans | null = null;
- try {
- oldData = cache.readQuery({query: gqlTimeSpan.TimeSpans});
- } catch (e) {}
+ const [removeTimeSpan] = useMutation(
+ gqlTimeSpan.RemoveTimeSpan,
+ {
+ update: (cache, {data}) => {
+ let oldData: TimeSpansQuery | null = null;
+ try {
+ oldData = cache.readQuery({query: gqlTimeSpan.TimeSpans});
+ } catch {}
- 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 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);
@@ -292,7 +307,11 @@ export const TimeSpan: React.FC = React.memo(
{to ? : }
@@ -301,7 +320,8 @@ export const TimeSpan: React.FC
= React.memo(
) => setOpenMenu(e.currentTarget)}>
+ onClick={(e: React.MouseEvent) => setOpenMenu(e.currentTarget)}
+ size="large">
diff --git a/ui/src/timespan/Tracker.tsx b/ui/src/timespan/Tracker.tsx
index da53879b..be398f58 100644
--- a/ui/src/timespan/Tracker.tsx
+++ b/ui/src/timespan/Tracker.tsx
@@ -2,19 +2,23 @@ import * as React from 'react';
import {TagSelectorEntry} from '../tag/tagSelectorEntry';
import {TagSelector} from '../tag/TagSelector';
import moment from 'moment-timezone';
-import {Button} from '@material-ui/core';
-import {MoreVert} from '@material-ui/icons';
-import IconButton from '@material-ui/core/IconButton';
-import Paper from '@material-ui/core/Paper';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import {Button} from '@mui/material';
+import {MoreVert} from '@mui/icons-material';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
import {DateTimeSelector} from '../common/DateTimeSelector';
-import {useMutation} from '@apollo/react-hooks';
+import {useMutation} from '@apollo/client';
import * as gqlTimeSpan from '../gql/timeSpan';
-import {StartTimer, StartTimerVariables} from '../gql/__generated__/StartTimer';
-import {InputTimeSpanTag} from '../gql/__generated__/globalTypes';
-import {AddTimeSpan, AddTimeSpanVariables} from '../gql/__generated__/AddTimeSpan';
+import {
+ StartTimerMutation,
+ StartTimerMutationVariables,
+ InputTimeSpanTag,
+ AddTimeSpanMutation,
+ AddTimeSpanMutationVariables,
+} from '../gql/__generated__';
import {useSnackbar} from 'notistack';
import {inUserTz} from './timeutils';
import {addTimeSpanToCache} from '../gql/utils';
@@ -40,10 +44,10 @@ export const Tracker: React.FC = ({selectedEntries, onSelectedEntr
const [from, setFrom] = React.useState(moment().subtract(15, 'minute'));
const [to, setTo] = React.useState(moment());
const [showDate, setShowDate] = React.useState(false);
- const [startTimer] = useMutation(gqlTimeSpan.StartTimer, {
+ const [startTimer] = useMutation(gqlTimeSpan.StartTimer, {
refetchQueries: [{query: gqlTimeSpan.Trackers}],
});
- const [addTimeSpan] = useMutation(gqlTimeSpan.AddTimeSpan, {
+ const [addTimeSpan] = useMutation(gqlTimeSpan.AddTimeSpan, {
update: (cache, {data}) => {
if (!data || !data.createTimeSpan) {
return;
@@ -61,9 +65,10 @@ export const Tracker: React.FC = ({selectedEntries, onSelectedEntr
}, [showDate, from, to]);
const submit = () => {
- const tags = selectedEntries.map(
- (entry: TagSelectorEntry): InputTimeSpanTag => ({key: entry.tag.key, value: entry.value})
- );
+ const tags = selectedEntries.map((entry: TagSelectorEntry): InputTimeSpanTag => ({
+ key: entry.tag.key,
+ value: entry.value,
+ }));
if (type === Type.Tracker) {
startTimer({variables: {start: inUserTz(moment()).format(), tags, note: ''}}).then(() => {
setSelectedEntries([]);
@@ -130,7 +135,7 @@ export const Tracker: React.FC = ({selectedEntries, onSelectedEntr
- ) => setOpenMenu(e.currentTarget)}>
+ ) => setOpenMenu(e.currentTarget)} size="large">