From c36f532bbb09d9c5d725079da02437844a18876b Mon Sep 17 00:00:00 2001 From: Abdullah Atta Date: Sat, 3 Jun 2023 18:07:27 +0500 Subject: [PATCH] web: use date & time formats from settings --- apps/web/src/common/dialog-controller.tsx | 12 ++----- apps/web/src/common/index.js | 5 ++- apps/web/src/components/attachment/index.tsx | 7 ++-- .../dialogs/billing-history-dialog.tsx | 6 ++-- .../components/diff-viewer/content-toggle.js | 4 +-- apps/web/src/components/editor/footer.tsx | 4 +-- apps/web/src/components/editor/index.tsx | 6 ++-- apps/web/src/components/notebook/index.js | 5 ++- apps/web/src/components/properties/index.js | 22 ++++-------- apps/web/src/components/time-ago/index.js | 4 +-- apps/web/src/utils/time.ts | 34 +++++++++++++++++++ apps/web/src/utils/web-extension-server.ts | 4 +-- apps/web/src/views/topics.js | 4 +-- packages/core/utils/date.js | 2 +- 14 files changed, 67 insertions(+), 52 deletions(-) create mode 100644 apps/web/src/utils/time.ts diff --git a/apps/web/src/common/dialog-controller.tsx b/apps/web/src/common/dialog-controller.tsx index 5c1f99f95..4e9b561ea 100644 --- a/apps/web/src/common/dialog-controller.tsx +++ b/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" }); diff --git a/apps/web/src/common/index.js b/apps/web/src/common/index.js index 0e4682606..24ce89600 100644 --- a/apps/web/src/common/index.js +++ b/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()) { diff --git a/apps/web/src/components/attachment/index.tsx b/apps/web/src/components/attachment/index.tsx index 5e63f6df0..436c6da34 100644 --- a/apps/web/src/components/attachment/index.tsx +++ b/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 = { "image/": FileImage, @@ -213,10 +213,7 @@ export function Attachment({ {!compact && ( {attachment.dateUploaded - ? formatDate(attachment.dateUploaded, { - dateStyle: "short", - timeStyle: "short" - }) + ? getFormattedDate(attachment.dateUploaded, "date") : "-"} )} diff --git a/apps/web/src/components/dialogs/billing-history-dialog.tsx b/apps/web/src/components/dialogs/billing-history-dialog.tsx index f33307c75..d61cadad8 100644 --- a/apps/web/src/components/dialogs/billing-history-dialog.tsx +++ b/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) { Order #{transaction.order_id} - {formatDate(new Date(transaction.created_at).getTime())} •{" "} + {getFormattedDate(transaction.created_at, "date")} •{" "} {TransactionStatusToText[transaction.status]} diff --git a/apps/web/src/components/diff-viewer/content-toggle.js b/apps/web/src/components/diff-viewer/content-toggle.js index 0f47f94a7..b75f6df92 100644 --- a/apps/web/src/components/diff-viewer/content-toggle.js +++ b/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 . */ -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)} ); diff --git a/apps/web/src/components/editor/footer.tsx b/apps/web/src/components/editor/footer.tsx index 2b37dfc4b..5fbcc9ff5 100644 --- a/apps/web/src/components/editor/footer.tsx +++ b/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 . */ -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())} {SaveStateIcon && } diff --git a/apps/web/src/components/editor/index.tsx b/apps/web/src/components/editor/index.tsx index 890f5f37f..0b6dffceb 100644 --- a/apps/web/src/components/editor/index.tsx +++ b/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) { Preview - You are previewing note version edited from {formatDate(dateCreated)}{" "} - to {formatDate(dateEdited)}. + You are previewing note version edited from{" "} + {getFormattedDate(dateCreated)} to {getFormattedDate(dateEdited)}. diff --git a/apps/web/src/components/notebook/index.js b/apps/web/src/components/notebook/index.js index f2e21c458..ecae695b3 100644 --- a/apps/web/src/components/notebook/index.js +++ b/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) { )} - {new Date(date).toLocaleDateString("en", { - dateStyle: "medium" - })} + {getFormattedDate(date, "date")} • diff --git a/apps/web/src/components/properties/index.js b/apps/web/src/components/properties/index.js index e9a4fd54b..1509d6938 100644 --- a/apps/web/src/components/properties/index.js +++ b/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}`; diff --git a/apps/web/src/components/time-ago/index.js b/apps/web/src/components/time-ago/index.js index 79b6168fd..0e17eb964 100644 --- a/apps/web/src/components/time-ago/index.js +++ b/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 . */ -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()} diff --git a/apps/web/src/utils/time.ts b/apps/web/src/utils/time.ts new file mode 100644 index 000000000..d198e07d2 --- /dev/null +++ b/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 . +*/ + +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 + }); +} diff --git a/apps/web/src/utils/web-extension-server.ts b/apps/web/src/utils/web-extension-server.ts index 98dbf613d..5e122619d 100644 --- a/apps/web/src/utils/web-extension-server.ts +++ b/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({ diff --git a/apps/web/src/views/topics.js b/apps/web/src/views/topics.js index d4b3981d0..0b98ba42a 100644 --- a/apps/web/src/views/topics.js +++ b/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 ( - {formatDate(dateEdited)} + {getFormattedDate(dateEdited)} {title} diff --git a/packages/core/utils/date.js b/packages/core/utils/date.js index 4fa0fc14c..3c646378c 100644 --- a/packages/core/utils/date.js +++ b/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 */