web: use date & time formats from settings

apps/web/src/common/dialog-controller.tsx

@@ -31,7 +31,6 @@ import { showToast } from "../utils/toast";
 import { Text } from "@theme-ui/components";
 import * as Icon from "../components/icons";
 import Config from "../utils/config";
-import { formatDate } from "@notesnook/core/utils/date";
 import downloadUpdate from "../commands/download-update";
 import installUpdate from "../commands/install-update";
 import { AppVersion, getChangelog } from "../utils/version";
@@ -41,6 +40,7 @@ import { AuthenticatorType } from "../components/dialogs/mfa/types";
 import { Suspense } from "react";
 import { Reminder } from "@notesnook/core/collections/reminders";
 import { ConfirmDialogProps } from "../components/dialogs/confirm";
+import { getFormattedDate } from "../utils/time";
 
 type DialogTypes = typeof Dialogs;
 type DialogIds = keyof DialogTypes;
@@ -693,14 +693,8 @@ export async function showInvalidSystemTimeDialog({
     title: "Your system clock is out of sync",
     subtitle:
       "Please correct your system date & time and reload the app to avoid syncing issues.",
-    message: `Server time: ${formatDate(serverTime, {
-      dateStyle: "medium",
-      timeStyle: "medium"
-    })}
-Local time: ${formatDate(localTime, {
-      dateStyle: "medium",
-      timeStyle: "medium"
-    })}
+    message: `Server time: ${getFormattedDate(serverTime)}
+Local time: ${getFormattedDate(localTime)}
 Please sync your system time with [https://time.is](https://time.is).`,
     positiveButtonText: "Reload app"
   });

apps/web/src/common/index.js

@@ -38,6 +38,7 @@ import { PATHS } from "@notesnook/desktop/paths";
 import saveFile from "../commands/save-file";
 import { TaskManager } from "./task-manager";
 import { EVENTS } from "@notesnook/core/common";
+import { getFormattedDate } from "../utils/time";
 
 export const CREATE_BUTTON_MAP = {
   notes: {
@@ -94,9 +95,7 @@ export async function createBackup() {
     return;
   }
 
-  const filename = sanitizeFilename(
-    `notesnook-backup-${new Date().toLocaleString("en")}`
-  );
+  const filename = sanitizeFilename(`notesnook-backup-${getFormattedDate()}`);
 
   const ext = "nnbackup";
   if (isDesktop()) {

apps/web/src/components/attachment/index.tsx

@@ -38,7 +38,6 @@ import {
   Reupload,
   Uploading
 } from "../icons";
-import { formatDate } from "@notesnook/core/utils/date";
 import { showToast } from "../../utils/toast";
 import { hashNavigate } from "../../navigation";
 import {
@@ -58,6 +57,7 @@ import {
 } from "@notesnook/core/utils/filename";
 import { useEffect, useState } from "react";
 import { AppEventManager, AppEvents } from "../../common/app-events";
+import { getFormattedDate } from "../../utils/time";
 
 const FILE_ICONS: Record<string, Icon> = {
   "image/": FileImage,
@@ -213,10 +213,7 @@ export function Attachment({
       {!compact && (
         <Text as="td" variant="body">
           {attachment.dateUploaded
-            ? formatDate(attachment.dateUploaded, {
-                dateStyle: "short",
-                timeStyle: "short"
-              })
+            ? getFormattedDate(attachment.dateUploaded, "date")
             : "-"}
         </Text>
       )}

apps/web/src/components/dialogs/billing-history-dialog.tsx

@@ -23,7 +23,7 @@ import Dialog from "./dialog";
 import { db } from "../../common/db";
 import { Loading } from "../icons";
 import { Flex, Link, Text } from "@theme-ui/components";
-import { formatDate } from "@notesnook/core/utils/date";
+import { getFormattedDate } from "../../utils/time";
 
 type Transaction = {
   order_id: string;
@@ -31,7 +31,7 @@ type Transaction = {
   amount: string;
   currency: string;
   status: keyof typeof TransactionStatusToText;
-  created_at: Date;
+  created_at: string;
   passthrough: null;
   product_id: number;
   is_subscription: boolean;
@@ -118,7 +118,7 @@ export default function BillingHistoryDialog(props: BillingHistoryDialogProps) {
               <Flex sx={{ flexDirection: "column" }}>
                 <Text variant="subtitle">Order #{transaction.order_id}</Text>
                 <Text variant="body" sx={{ color: "fontTertiary" }}>
-                  {formatDate(new Date(transaction.created_at).getTime())} •{" "}
+                  {getFormattedDate(transaction.created_at, "date")} •{" "}
                   {TransactionStatusToText[transaction.status]}
                 </Text>
               </Flex>

apps/web/src/components/diff-viewer/content-toggle.js

@@ -17,8 +17,8 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { formatDate } from "@notesnook/core/utils/date";
 import { Flex, Button } from "@theme-ui/components";
+import { getFormattedDate } from "../../utils/time";
 
 function ContentToggle(props) {
   const {
@@ -69,7 +69,7 @@ function ContentToggle(props) {
           alignItems: "center"
         }}
       >
-        {label} | {formatDate(dateEdited, true)}
+        {label} | {getFormattedDate(dateEdited)}
       </Flex>
     </Flex>
   );

apps/web/src/components/editor/footer.tsx

@@ -17,12 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { formatDate } from "@notesnook/core/utils/date";
 import { Flex, Text } from "@theme-ui/components";
 import { useMemo } from "react";
 import { useStore } from "../../stores/editor-store";
 import { Loading, Saved, NotSaved } from "../icons";
 import { useNoteStatistics } from "./context";
+import { getFormattedDate } from "../../utils/time";
 
 const SAVE_STATE_ICON_MAP = {
   "-1": NotSaved,
@@ -63,7 +63,7 @@ function EditorFooter() {
         data-test-id="editor-date-edited"
         title={dateEdited?.toString()}
       >
-        {formatDate(dateEdited || Date.now())}
+        {getFormattedDate(dateEdited || Date.now())}
       </Text>
       {SaveStateIcon && <SaveStateIcon size={13} color="bgSecondaryText" />}
     </Flex>

apps/web/src/components/editor/index.tsx

@@ -35,7 +35,6 @@ import {
 import Toolbar from "./toolbar";
 import { AppEventManager, AppEvents } from "../../common/app-events";
 import { FlexScrollContainer } from "../scroll-container";
-import { formatDate } from "@notesnook/core/utils/date";
 import Tiptap from "./tiptap";
 import Header from "./header";
 import { Attachment } from "../icons";
@@ -55,6 +54,7 @@ import ThemeProviderWrapper from "../theme-provider";
 import { Allotment } from "allotment";
 import { PdfPreview } from "../pdf-preview";
 import { showToast } from "../../utils/toast";
+import { getFormattedDate } from "../../utils/time";
 
 type PreviewSession = {
   content: { data: string; type: string };
@@ -570,8 +570,8 @@ function PreviewModeNotice(props: PreviewModeNoticeProps) {
       <Flex mr={4} sx={{ flexDirection: "column" }}>
         <Text variant={"subtitle"}>Preview</Text>
         <Text variant={"body"}>
-          You are previewing note version edited from {formatDate(dateCreated)}{" "}
-          to {formatDate(dateEdited)}.
+          You are previewing note version edited from{" "}
+          {getFormattedDate(dateCreated)} to {getFormattedDate(dateEdited)}.
         </Text>
       </Flex>
       <Flex>

apps/web/src/components/notebook/index.js

@@ -31,6 +31,7 @@ import { showToast } from "../../utils/toast";
 import { Multiselect } from "../../common/multi-select";
 import { pluralize } from "../../utils/string";
 import { confirm } from "../../common/dialog-controller";
+import { getFormattedDate } from "../../utils/time";
 
 function Notebook(props) {
   const { item, index, totalNotes, date, simplified } = props;
@@ -85,9 +86,7 @@ function Notebook(props) {
                 <Icon.PinFilled color="primary" size={13} sx={{ mr: 1 }} />
               )}
 
-              {new Date(date).toLocaleDateString("en", {
-                dateStyle: "medium"
-              })}
+              {getFormattedDate(date, "date")}
               <Text as="span" mx={1} sx={{ color: "inherit" }}>
                 •
               </Text>

apps/web/src/components/properties/index.js

@@ -29,7 +29,6 @@ import { store as noteStore } from "../../stores/note-store";
 import { AnimatedFlex } from "../animated";
 import Toggle from "./toggle";
 import ScrollContainer from "../scroll-container";
-import { formatDate } from "@notesnook/core/utils/date";
 import Vault from "../../common/vault";
 import TimeAgo from "../time-ago";
 import { Attachment } from "../attachment";
@@ -38,6 +37,7 @@ import { getTotalSize } from "../../common/attachments";
 import Notebook from "../notebook";
 import { getTotalNotes } from "../../common";
 import Reminder from "../reminder";
+import { getFormattedDate } from "../../utils/time";
 
 const tools = [
   { key: "pin", property: "pinned", icon: Icon.Pin, label: "Pin" },
@@ -66,12 +66,12 @@ const metadataItems = [
   {
     key: "dateCreated",
     label: "Created at",
-    value: (date) => formatDate(date || Date.now())
+    value: (date) => getFormattedDate(date || Date.now())
   },
   {
     key: "dateEdited",
     label: "Last edited at",
-    value: (date) => (date ? formatDate(date) : "never")
+    value: (date) => (date ? getFormattedDate(date) : "never")
   }
 ];
 
@@ -307,18 +307,10 @@ function Properties(props) {
             subtitle={"Your session history is local only."}
           >
             {versionHistory.map((session) => {
-              const fromDate = formatDate(session.dateCreated, {
-                dateStyle: "short"
-              });
-              const toDate = formatDate(session.dateModified, {
-                dateStyle: "short"
-              });
-              const fromTime = formatDate(session.dateCreated, {
-                timeStyle: "short"
-              });
-              const toTime = formatDate(session.dateModified, {
-                timeStyle: "short"
-              });
+              const fromDate = getFormattedDate(session.dateCreated, "date");
+              const toDate = getFormattedDate(session.dateModified, "date");
+              const fromTime = getFormattedDate(session.dateCreated, "time");
+              const toTime = getFormattedDate(session.dateModified, "time");
               const label = `${fromDate}, ${fromTime} — ${
                 fromDate !== toDate ? `${toDate}, ` : ""
               }${toTime}`;

apps/web/src/components/time-ago/index.js

@@ -17,10 +17,10 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { formatDate } from "@notesnook/core/utils/date";
 import React, { useEffect, useRef } from "react";
 import { Text } from "@theme-ui/components";
 import { register, format, cancel, render } from "timeago.js";
+import { getFormattedDate } from "../../utils/time";
 
 const shortLocale = [
   ["now", "now"],
@@ -87,7 +87,7 @@ function TimeAgo({ datetime, live, locale, opts, sx, ...restProps }) {
         ...sx,
         color: sx?.color || "inherit"
       }}
-      title={formatDate(datetime)}
+      title={getFormattedDate(datetime)}
       as="time"
       data-test-id="time"
       dateTime={toDate(datetime).toISOString()}

apps/web/src/utils/time.ts

@@ -0,0 +1,34 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { formatDate } from "@notesnook/core/utils/date";
+import { db } from "../common/db";
+
+export function getFormattedDate(
+  date: string | number | Date | null | undefined,
+  type: "time" | "date-time" | "date" = "date-time"
+) {
+  if (!db.settings) return "";
+
+  return formatDate(date, {
+    dateFormat: db.settings.getDateFormat(),
+    timeFormat: db.settings.getTimeFormat(),
+    type
+  });
+}

apps/web/src/utils/web-extension-server.ts

@@ -27,10 +27,10 @@ import {
 import { isUserPremium } from "../hooks/use-is-user-premium";
 import { store as themestore } from "../stores/theme-store";
 import { store as appstore } from "../stores/app-store";
-import { formatDate } from "@notesnook/core/utils/date";
 import { h } from "./html";
 import { sanitizeFilename } from "./filename";
 import { attachFile } from "../components/editor/picker";
+import { getFormattedDate } from "./time";
 
 export class WebExtensionServer implements Server {
   async login() {
@@ -101,7 +101,7 @@ export class WebExtensionServer implements Server {
     content += h("div", [
       h("hr"),
       h("p", ["Clipped from ", h("a", [clip.title], { href: clip.url })]),
-      h("p", [`Date clipped: ${formatDate(Date.now())}`])
+      h("p", [`Date clipped: ${getFormattedDate(Date.now())}`])
     ]).innerHTML;
 
     const id = await db.notes?.add({

apps/web/src/views/topics.js

@@ -32,7 +32,6 @@ import {
   SortAsc
 } from "../components/icons";
 import { getTotalNotes } from "../common";
-import { formatDate } from "@notesnook/core/utils/date";
 import { pluralize } from "../utils/string";
 import { Allotment } from "allotment";
 import { Plus } from "../components/icons";
@@ -41,6 +40,7 @@ import Placeholder from "../components/placeholders";
 import { showSortMenu } from "../components/group-header";
 import { db } from "../common/db";
 import { groupArray } from "@notesnook/core/utils/grouping";
+import { getFormattedDate } from "../utils/time";
 
 function Notebook() {
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -287,7 +287,7 @@ function NotebookHeader({ notebook }) {
 
   return (
     <Flex mx={2} my={2} sx={{ flexDirection: "column", minWidth: 200 }}>
-      <Text variant="subBody">{formatDate(dateEdited)}</Text>
+      <Text variant="subBody">{getFormattedDate(dateEdited)}</Text>
       <Flex sx={{ alignItems: "center", justifyContent: "space-between" }}>
         <Text variant="heading">{title}</Text>
         <Flex>

packages/core/utils/date.js

@@ -65,7 +65,7 @@ function getWeek(date) {
 
 /**
  *
- * @param {number} date
+ * @param {string | number | Date | null | undefined} date
  * @param {{dateFormat: string, timeFormat: string, type: "date-time" | "time" | "date"}} options
  * @returns
  */