fix: Pluralize (#8)

* fix: Pluralization * fix: Pluralize
soundtrackyourbrand · Oct 3, 2024 · 56fe63c · 56fe63c
1 parent ff4fa33
commit 56fe63c
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 31 deletions.
diff --git a/app/components/DataTable.tsx b/app/components/DataTable.tsx
@@ -2,6 +2,7 @@
 
 import React from "react";
 import { Key, ReactNode, useId, useState } from "react";
+import pluralize from "pluralize";
 import {
   ColumnDef,
   flexRender,
@@ -14,16 +15,6 @@ import {
   getFacetedRowModel,
   getFacetedUniqueValues,
 } from "@tanstack/react-table";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "~/components/ui/table";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
 import {
   BookmarkFilledIcon,
   BookmarkIcon,
@@ -34,6 +25,16 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
 } from "@radix-ui/react-icons";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
 import {
   Popover,
   PopoverContent,
@@ -232,7 +233,8 @@ export const DataTable = function DataTable<TData, TValue>({
       <div className="flex items-center justify-end space-x-2 mt-2">
         <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
+          {pluralize("row", table.getFilteredRowModel().rows.length, true)}{" "}
+          selected.
         </div>
         {pagination && table.getPageCount() > 0 && (
           <div className="flex items-center space-x-2">

diff --git a/app/components/RepeatDisplay.tsx b/app/components/RepeatDisplay.tsx
@@ -1,3 +1,4 @@
+import pluralize from "pluralize";
 import { RepeatPart } from "~/types";
 
 type RepeatDisplayProps = {
@@ -31,13 +32,9 @@ export default function RepeatDisplay({
     return titleCase ? ucfirst(s) : s;
   }
 
-  return `${titleCase ? "Every" : "every"} ${repeat} ${plur(repeatPart, repeat)}`;
+  return `${titleCase ? "Every" : "every"} ${pluralize(repeatPart, repeat, true)}`;
 }
 
 function ucfirst(s: string): string {
   return s.charAt(0).toUpperCase() + s.substring(1);
 }
-
-function plur(s: string, n: number): string {
-  return n === 1 ? s : s + "s";
-}
diff --git a/app/routes/events._index.tsx b/app/routes/events._index.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Link } from "@remix-run/react";
 import { PropsWithChildren, useCallback, useMemo, useState } from "react";
 import useSWR from "swr";
+import pluralize from "pluralize";
+import { MetaFunction } from "@remix-run/node";
 import { accountsFetcher, eventsFetcher } from "../fetchers";
 import { Button } from "~/components/ui/button";
 import DateTime from "~/components/DateTime";
@@ -10,8 +12,8 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import {
   Select,
   SelectContent,
@@ -21,7 +23,6 @@ import {
 } from "~/components/ui/select";
 import { AssignableDisplayData } from "~/components/AssignableDisplay";
 import Page from "~/components/Page";
-import { MetaFunction } from "@remix-run/node";
 import { pageTitle } from "~/lib/utils";
 import RepeatDisplay from "~/components/RepeatDisplay";
 import Paper from "~/components/Paper";
@@ -200,16 +201,15 @@ export default function Events() {
                 </div>
                 <div>
                   <span className="text-slate-400">
-                    {event.zones.length} zone
-                    {event.zones.length === 1 ? "" : "s"}
+                    {pluralize("zone", event.zones.length, true)}
                   </span>
                 </div>
               </div>
             </div>
           );
         })}
         <div className="border-t border-t-slate-100 text-slate-300 mt-4 text-align-center pt-2 text-sm">
-          {filteredEvents.length} of {events?.length} events
+          {filteredEvents.length} of {pluralize("event", events?.length, true)}
         </div>
       </div>
     </Page>

diff --git a/app/routes/settings.tsx b/app/routes/settings.tsx
@@ -1,5 +1,13 @@
 import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
+import pluralize from "pluralize";
+import {
+  CheckIcon,
+  ExclamationTriangleIcon,
+  ReloadIcon,
+} from "@radix-ui/react-icons";
+import { toast } from "sonner";
+import { MetaFunction } from "@remix-run/node";
 import Page from "~/components/Page";
 import {
   Command,
@@ -12,17 +20,13 @@ import { Button } from "~/components/ui/button";
 import { accountsFetcher, cacheFetcher } from "~/fetchers";
 import { useMusicLibrary } from "~/lib/MusicLibraryContext";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
-import {
-  CheckIcon,
-  ExclamationTriangleIcon,
-  ReloadIcon,
-} from "@radix-ui/react-icons";
-import { toast } from "sonner";
-import { MetaFunction } from "@remix-run/node";
 import { cn, pageTitle } from "~/lib/utils";
 import AssignableSelect from "~/components/AssignableSelect";
-import { Popover, PopoverContent } from "~/components/ui/popover";
-import { PopoverTrigger } from "@radix-ui/react-popover";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
 
 export const meta: MetaFunction = () => {
   return [{ title: pageTitle("Settings") }];
@@ -195,7 +199,23 @@ export default function Settings() {
           Clear cache
         </Button>
       </div>
-      <p>{cache?.count ?? "No"} item cached</p>
+      <div>
+        <p>{pluralize("item", cache?.count, true)} cached</p>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={loading.includes("cacheCount")}
+          onClick={() => {
+            addLoading("cacheCount");
+            mutate("/api/v1/cache")
+              .then(() => toast("Cache count refreshed"))
+              .finally(() => removeLoading("cacheCount"));
+          }}
+        >
+          <ReloadIcon className="mr-2" />
+          Refresh count
+        </Button>
+      </div>
     </Page>
   );
 }
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "@remix-run/react": "^2.11.2",
     "@shopify/semaphore": "^3.1.0",
     "@tanstack/react-table": "^8.20.5",
+    "@types/pluralize": "^0.0.33",
     "body-parser": "^1.20.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -47,6 +48,7 @@
     "next-themes": "^0.3.0",
     "pino": "^9.4.0",
     "pino-http": "^10.3.0",
+    "pluralize": "^8.0.0",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml