adjust frontend to update task time

Author: robsonperassoli

frontend/package.json

@@ -9,7 +9,6 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "apollo-link-context": "^1.0.19",
-    "format-duration": "^1.3.1",
     "formik": "^2.1.1",
     "grommet": "^2.9.0",
     "grommet-icons": "^4.4.0",

frontend/src/helpers/tasks.js

@@ -0,0 +1,11 @@
+import { DateTime, Duration } from 'luxon'
+
+const secondsToMillis = time => time * 1000
+
+export const timerRunning = timerStatus => timerStatus === 'running'
+export const elapsedTime = ({ time, timerStartedAt, timerStatus }) => {
+  return secondsToMillis(time) + (timerRunning(timerStatus) ? DateTime.utc().diff(DateTime.fromISO(timerStartedAt)) : 0)
+}
+
+export const formatDuration = (timeInMillis) =>
+  Duration.fromMillis(timeInMillis).toFormat('hh:mm')

frontend/src/pages/Home/TaskList.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { gql, useMutation } from '@apollo/client'
 import { Box, Text } from 'grommet'
-import formatDuration from 'format-duration'
 import styled from 'styled-components'
+import { formatDuration } from '../../helpers/tasks'
 import Task from './Task'
 
 const edgeSize = () => ({ theme}) => theme.global.edgeSize.xsmall

frontend/src/pages/Home/TaskModal.js

@@ -1,10 +1,32 @@
 import React from 'react'
-import { Layer, Form, TextArea, Button, Box, FormField } from 'grommet'
+import { Layer, Form, TextArea, Button, Box, FormField, MaskedInput } from 'grommet'
 import { Checkmark, Trash } from 'grommet-icons'
 import { gql, useMutation } from '@apollo/client'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
+import styled from 'styled-components'
+import { Duration } from 'luxon'
 import useSelectedProjectId from '../../hooks/useSelectedProjectId'
+import { formatDuration, timerRunning } from '../../helpers/tasks'
+
+const TimeFormField = styled(FormField)`
+  flex-direction: row;
+  > label {
+    flex-grow: 2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    font-weight: 600;
+  }
+`
+
+const TimeMaskedInput = styled(MaskedInput)`
+  width: 100px;
+  &:disabled {
+    opacity: ${({ theme }) => theme.textInput.disabled.opacity
+  }
+`
+
 
 const CREATE_TASK = gql`
   mutation CreateTaskMutation($projectId:ID!, $description: String!) {
@@ -36,15 +58,45 @@ const validationSchema = Yup.object().shape({
     .required('Required')
 })
 
+const createInitialValues = (task) => {
+  if(!task) return { time: '00:00' }
+
+  const { description } = task
+  const time = formatDuration(task.time * 1000)
+  return {
+    description,
+    time
+  }
+}
+
+const formattedDurationToSeconds = (stringDuration) => {
+  const [hours, minutes] = stringDuration.split(':')
+  return Duration.fromObject({ hours, minutes }).as('seconds')
+}
+
 function TaskModal({ onClose, onTaskSaved, onTaskDeleted, task }) {
   const [createTask] = useMutation(CREATE_TASK)
   const [updateTask] = useMutation(UPDATE_TASK)
   const [deleteTask] = useMutation(DELETE_TASK)
 
+  const updateVars = (task, formValues) => {
+    const { description, time } = formValues
+    const { id: taskId } = task
+
+    return {
+      variables: {
+        taskId,
+        description,
+        ...(timerRunning(task.timerStatus) ? {} : { time: formattedDurationToSeconds(time) })
+      }
+    }
+  }
+
+  const createVars = ({ description, time }) => ({ projectId, description, time })
+
   const projectId = useSelectedProjectId()
-  const onSubmit = async ({ description }) => {
-    const variables = { variables: { ...(task ? { taskId: task.id } : { projectId } ), description } }
-    task ? await updateTask(variables) : await createTask(variables)
+  const onSubmit = async (values) => {
+    task ? await updateTask(updateVars(task, values)) : await createTask(createVars(values))
     onClose()
     onTaskSaved()
   }
@@ -53,7 +105,7 @@ function TaskModal({ onClose, onTaskSaved, onTaskDeleted, task }) {
     onClose()
     onTaskDeleted()
   }
-  const form = useFormik({ initialValues: task || {}, validationSchema, onSubmit })
+  const form = useFormik({ initialValues: createInitialValues(task), validationSchema, onSubmit })
 
   return (
     <Layer
@@ -66,6 +118,26 @@ function TaskModal({ onClose, onTaskSaved, onTaskDeleted, task }) {
             <TextArea onChange={form.handleChange} placeholder='Type the task description' rows={4} name='description' value={form.values.description} />
           </FormField>
 
+          <TimeFormField error={form.touched.time && form.errors.time} label='Duration'>
+            <TimeMaskedInput
+              onChange={form.handleChange}
+              placeholder='00:00'
+              name='time'
+              value={form.values.time}
+              disabled={task && timerRunning(task.timerStatus)}
+              mask={[
+                { length: [1,2], regexp: /^[0-9]*$/, placeholder: 'hh' },
+                { fixed: ':' },
+                {
+                  length: 2,
+                  options: ['00', '05', '10', '15', '30', '45'],
+                  regexp: /^[0-5][0-9]$|^[0-9]$/,
+                  placeholder: 'mm',
+                },
+              ]}
+            />
+          </TimeFormField>
+
           <Box justify='between' direction='row'>
             {task && (
               <Button

frontend/src/pages/Home/Timer.js

@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import { Box, Text } from 'grommet'
-import { DateTime } from 'luxon'
-import formatDuration from 'format-duration'
-
-const secondsToMillis = time => time * 1000
-const timerRunning = timerStatus => timerStatus === 'running'
-const calcElapsedTime = ({ time, timerStartedAt, timerStatus }) =>
-  secondsToMillis(time) + (timerRunning(timerStatus) ? DateTime.utc().diff(DateTime.fromISO(timerStartedAt)) : 0)
+import { elapsedTime as calcElapsedTime, formatDuration } from '../../helpers/tasks'
 
 const Timer = ({ task }) => {
   const [elapsedTime, setElapsedTime] = useState(calcElapsedTime(task))

frontend/src/theme.js

@@ -5,5 +5,10 @@ export default {
       size: '18px',
       height: '20px'
     }
+  },
+  textInput: {
+    disabled: {
+      opacity: 0.5
+    }
   }
 }