Use humanizeDuration to humanize hours

momentjs's `.humanize` sadly does not allow for specifying the
precision you want (see moment/moment#348), so all the 4.5 hour
hackathons were displaying as 4. The humanize-duration library allows
us to specify the precision and our durations are now more readable.

package.json

@@ -37,6 +37,7 @@
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/faker": "^5.1.0",
+    "@types/humanize-duration": "3.18.1",
     "@types/jest": "^26.0.10",
     "@types/node": "14.0.27",
     "@types/react": "^16.9.46",
@@ -93,6 +94,7 @@
     "axios": "^0.20.0",
     "cloudinary-core": "^2.11.2",
     "cloudinary-react": "^1.6.6",
+    "humanize-duration": "3.23.1",
     "moment-timezone": "^0.5.31",
     "patch-package": "^6.2.2",
     "postinstall-postinstall": "^2.1.0",

src/utils/DateUtility.ts

@@ -1,4 +1,5 @@
 import moment from "moment-timezone";
+import humanizeDuration from "humanize-duration";
 
 // 'wc' = 'wallclock'
 
@@ -39,8 +40,8 @@ export class DateUtility {
     return hoursDifference(endDate, startDate);
   };
   // Returns a humanized string of a duration using momentjs's humanize() function
-  getDurationString = (number: number, unit: moment.DurationInputArg2): string => {
-    return moment.duration(number, unit).humanize();
+  getDurationStringFromHours = (numberOfHours: number): string => {
+    return humanizeDuration(numberOfHours * 60 * 60 * 1000, { largest: 2 });
   };
   // Returns relative time string from client region's perspective. Client region is guessed if not provided
   fromNow = (wcStr: string, masterRegion: string, clientRegion?: string): string => {

src/views/components/MeetCard.tsx

@@ -17,7 +17,7 @@ export const MeetCard: FC<MeetProps> = ({ meet, user, onDelete }) => {
 
   const startTimeStr = d.wcToClientStr(startTime, region);
   const durationInHours = d.getDurationInHours(startTime, endTime);
-  const durationString = d.getDurationString(durationInHours, "hours");
+  const durationString = d.getDurationStringFromHours(durationInHours);
 
   return (
     <div className="shadow-md bg-white grid grid-rows-5 place-items-center md:pr-8 md:grid-rows-1 md:grid-cols-3 w-11/12 mx-auto rounded-lg lg:p-4 overflow-hidden">

src/views/pages/templates/Meet.tsx

@@ -60,9 +60,8 @@ const Meet: FC<ConnectContextProps & StateMapping & RouteComponentProps<MatchPar
   const meetHasNotEnded = !d.isPast(meet?.endTime || "", meet?.region || "America/Toronto");
 
   const dateInfo = meet
-    ? `${d.wcToClientStr(meet.startTime, meet.region)} (${d.getDurationString(
+    ? `${d.wcToClientStr(meet.startTime, meet.region)} (${d.getDurationStringFromHours(
         d.getDurationInHours(meet.startTime, meet.endTime),
-        "hours",
       )})`
     : "Loading..";
 

yarn.lock

@@ -2297,6 +2297,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
+"@types/humanize-duration@3.18.1":
+  version "3.18.1"
+  resolved "https://registry.yarnpkg.com/@types/humanize-duration/-/humanize-duration-3.18.1.tgz#10090d596053703e7de0ac43a37b96cd9fc78309"
+  integrity sha512-MUgbY3CF7hg/a/jogixmAufLjJBQT7WEf8Q+kYJkOc47ytngg1IuZobCngdTjAgY83JWEogippge5O5fplaQlw==
+
 "@types/is-function@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
@@ -7146,6 +7151,11 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
+humanize-duration@3.23.1:
+  version "3.23.1"
+  resolved "https://registry.yarnpkg.com/humanize-duration/-/humanize-duration-3.23.1.tgz#59cb8d01287479c1aa7cd5b1efc260d799bef89b"
+  integrity sha512-aoOEkomAETmVuQyBx4E7/LfPlC9s8pAA/USl7vFRQpDjepo3aiyvFfOhtXSDqPowdBVPFUZ7onG/KyuolX0qPg==
+
 husky@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/husky/-/husky-4.3.0.tgz#0b2ec1d66424e9219d359e26a51c58ec5278f0de"