Use date-fns to format dates and times

apps/vpnmanager/package.json

@@ -28,6 +28,7 @@
     "@svgr/webpack": "catalog:",
     "@types/jest": "catalog:",
     "better-sqlite3": "catalog:",
+    "date-fns": "catalog:",
     "googleapis": "catalog:",
     "jest": "catalog:",
     "next": "catalog:",

apps/vpnmanager/src/components/Statistics/Statistics.tsx

@@ -16,9 +16,9 @@ import {
 import { Section } from "@commons-ui/core";
 import { useRouter } from "next/router";
 
-import formatDateTime, { formatDate } from "@/vpnmanager/utils/formatDate";
 import { fetchJson, formatBytes } from "@/vpnmanager/utils";
 import { Link } from "@commons-ui/next";
+import { format, startOfYesterday } from "date-fns";
 
 export interface Data {
   ID: number;
@@ -36,15 +36,14 @@ interface Props {
 
 const Statistics: React.FC<Props> = ({ data: result }) => {
   const router = useRouter();
-  const yesterday = new Date();
-  yesterday.setDate(yesterday.getDate() - 1);
+  const yesterday = startOfYesterday();
   const [filters, setFilters] = useState({
     ID: router.query.ID || "",
     userId: router.query.userId || "",
     email: router.query.email || "",
     "date.start": router.query["date.start"] || "",
     "date.end": router.query["date.end"] || "",
-    date: router.query.date || formatDate(yesterday),
+    date: router.query.date || format(yesterday, "yyyy-MM-dd"),
     orderBy: "date DESC",
   });
   const [page, setPage] = useState(0);
@@ -272,10 +271,10 @@ const Statistics: React.FC<Props> = ({ data: result }) => {
                     <TableCell>{row.email}</TableCell>
                     <TableCell>{row.userId}</TableCell>
                     <TableCell>{row.usage}</TableCell>
-                    <TableCell>{formatDateTime(row.date)}</TableCell>
+                    <TableCell>{format(row.date, "yyyy-MM-dd")}</TableCell>
                     <TableCell>{row.cumulativeData}</TableCell>
                     <TableCell>
-                      {formatDateTime(row.createdAt, { includeTime: true })}
+                      {format(row.createdAt, "yyyy-MM-dd HH:mm")}
                     </TableCell>
                   </TableRow>
                 ))

apps/vpnmanager/src/lib/statistics.ts

@@ -1,14 +1,14 @@
 import { NextApiRequest } from "next/types";
 import { OutlineVPN } from "./outline";
 import { Filters, Model, Record } from "@/vpnmanager/lib/data/database";
-import { formatDate } from "@/vpnmanager/utils/formatDate";
+import { format } from "date-fns";
 
 const vpnManager = new OutlineVPN({
   apiUrl: process.env.NEXT_APP_VPN_API_URL as string,
 });
 
 export async function processUserStats() {
-  const date: string = formatDate(new Date()) as string;
+  const date: string = format(new Date(), "yyyy-MM-dd");
   const { bytesTransferredByUserId = {} } = await vpnManager.getDataUsage();
   const allUsers = await vpnManager.getUsers();
   const unprocessedUsers: Omit<Record, "ID" | "createdAt">[] = Object.keys(
@@ -35,6 +35,10 @@ export async function getStats(
     "date.start"?: string;
     "date.end"?: string;
   } = req.query;
+  const stringDate =
+    typeof filters.date === "string"
+      ? format(new Date(filters.date), "yyyy-MM-dd")
+      : undefined;
   const validFilters = {
     email: filters.email,
     ID: filters.ID,
@@ -44,12 +48,13 @@ export async function getStats(
     date:
       filters["date.start"] && filters["date.end"]
         ? {
-            start: formatDate(new Date(filters["date.start"])) as string,
-            end: formatDate(new Date(filters["date.end"])) as string,
+            start: format(
+              new Date(filters["date.start"]),
+              "yyyy-MM-dd",
+            ) as string,
+            end: format(new Date(filters["date.end"]), "yyyy-MM-dd") as string,
           }
-        : (formatDate(
-            filters.date ? new Date(filters.date as string) : undefined,
-          ) as string),
+        : stringDate,
   };
   return Model.getAll(validFilters);
 }