Replaced simple minute display with timely formatted values

client/src/components/forms/AssigneesForm/index.tsx

@@ -2,11 +2,12 @@
 import { useCallback, useEffect, useState } from "react";
 
 import { TaskAssignment } from "adapters/task";
+import { durationFor, formatDuration } from "timely";
 
 import Popup from 'components/ui/Popup';
 import Button from 'components/ui/Button';
-import { PossibleMember } from "components/forms/TaskForm";
 import TimeInput from "components/ui/TimeInput";
+import { PossibleMember } from "components/forms/TaskForm";
 
 import './assignees-form.scss';
 
@@ -56,7 +57,9 @@ export default function AssigneesForm({ assignees, members, onNew, onDelete }: P
                             <div className="person">
                                 {members.find(member => member.id === assignee.user)?.label}
                             </div>
-                            <div className="time">{assignee.time} min</div>
+                            <div className="time">{
+                                formatDuration(durationFor(assignee.time, 'minute'), 'second', 2, true)
+                            }</div>
                             <div className="delete" onClick={() => removeAssignee(assignee.user)}>
                                 <span className="material-icons">
                                     clear

client/src/components/forms/RequirementsForm/index.tsx

@@ -2,6 +2,7 @@
 import { useCallback, useEffect, useState } from 'react';
 
 import { TaskRequirement } from 'adapters/task';
+import { durationFor, formatDuration } from 'timely';
 
 import { PossibleRole } from 'components/forms/TaskForm';
 import Popup from 'components/ui/Popup';
@@ -52,7 +53,9 @@ export default function RequirementsForm({ roles, requirements, onNew, onDelete
                     requirements.map((requirement) => (
                         <div className="requirement" key={requirement.role}>
                             <div>{roles.find(role => role.id === requirement.role)?.label}</div>
-                            <div>{requirement.time} min</div>
+                            <div>{
+                                formatDuration(durationFor(requirement.time, 'minute'), 'second', 2, true)
+                            }</div>
                             <div className="delete" onClick={() => removeRequirement(requirement.role)}>
                                 <span className="material-icons">
                                     clear

client/src/components/ui/TimeInput/time-input.scss

@@ -12,7 +12,6 @@
 
     .formatted {
         flex: 0 0 auto;
-        content: 'min';
         min-width: 75px;
         white-space: nowrap;
         text-align: center;

client/src/pages/Tasks/TaskDetail/TaskAssignees/index.tsx

 
 import { AssignedUser } from 'adapters/user';
+import { durationFor, formatDuration } from 'timely';
 
 import UserList from 'components/layout/UserList';
 import LoadingScreen from 'components/ui/LoadingScreen';
@@ -16,7 +17,9 @@ export default function TaskAssignees({ assignees }: Props) {
                     ? (
                         <UserList
                             users={assignees}
-                            info={user => user.time + " min"}
+                            info={user =>
+                                formatDuration(durationFor(user.time, 'minute'), 'second', 2, true)
+                            }
                         />
                     )
                     : <LoadingScreen />

client/src/pages/Tasks/index.tsx

 
 import { useEffect, useState } from 'react';
 
+import { durationFor, formatDuration } from 'timely';
 import { getTeams, Team } from 'adapters/team';
 import { getPossibleTasks, Task } from 'adapters/task';
 import { getCurrentUser, getUserTasks, User } from 'adapters/user';
@@ -46,20 +47,18 @@ export default function Tasks() {
                             tasks.length > 0
                                 ? (
                                     <div className="tasks-list">
-                                        {
-                                            tasks
-                                                .map((task) => (
-                                                    <TaskComponent
-                                                        key={task.id}
-                                                        task={task}
-                                                        subtitle={
-                                                            task.assigned
-                                                                .find(assignee => assignee.user === user.id)?.time
-                                                            + ' min'
-                                                        }
-                                                    />
-                                                ))
-                                        }
+                                        {tasks.map((task) => {
+                                            const time = task.assigned.find(assignee => assignee.user === user.id)?.time ?? 0;
+                                            return (
+                                                <TaskComponent
+                                                    key={task.id}
+                                                    task={task}
+                                                    subtitle={
+                                                        formatDuration(durationFor(time, 'minute'), 'second', 2, true)
+                                                    }
+                                                />
+                                            )
+                                        })}
                                     </div>
                                 )
                                 : (<div className="task-error">No open tasks found</div>)