From bf9d09da69043423f1f07b01b7e4ecddec3e679a Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 3 Sep 2024 14:46:59 +0700 Subject: [PATCH 01/19] add button update title --- .../content/article/[documentId]/page.tsx | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx index 20554a37..8e3f8763 100644 --- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx @@ -1,4 +1,6 @@ "use client"; +import {Button} from "@/components/Button"; +import {Input} from "@/components/Form"; import TiptapEditor from "@/components/Tiptap/TiptapEditor"; import Loader from "@/components/common/Loader"; import Notification from "@/components/common/Notification"; @@ -14,7 +16,9 @@ export default function DocumentDetailsPage() { const {data: document, error: documentError} = useTanamDocument(documentId); const {update, error: writeError} = useCrudTanamDocument(); const [readonlyMode] = useState(false); + const [updateTitleShown, setUpdateTitleShown] = useState(false); const [notification, setNotification] = useState(null); + if (!!document?.documentType && document?.documentType !== "article") { router.push(`/content/${document?.documentType}/${document?.id}`); return ; @@ -36,13 +40,36 @@ export default function DocumentDetailsPage() { return ( <> - }> - {document ? : } - {notification && ( )} + }> + {document ? ( + <> +
+ {!updateTitleShown && } + + {updateTitleShown && ( + + )} + + +
+ + ) : ( + + )} + + Date: Tue, 3 Sep 2024 15:01:20 +0700 Subject: [PATCH 02/19] handle state title and field input for title --- .../content/article/[documentId]/page.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx index 8e3f8763..c5f49dfe 100644 --- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx @@ -15,6 +15,8 @@ export default function DocumentDetailsPage() { const {documentId} = useParams<{documentId: string}>() ?? {}; const {data: document, error: documentError} = useTanamDocument(documentId); const {update, error: writeError} = useCrudTanamDocument(); + + const [title, setTitle] = useState(""); const [readonlyMode] = useState(false); const [updateTitleShown, setUpdateTitleShown] = useState(false); const [notification, setNotification] = useState(null); @@ -28,6 +30,30 @@ export default function DocumentDetailsPage() { setNotification(documentError || writeError); }, [documentError, writeError]); + useEffect(() => { + if (updateTitleShown) return; + + onDocumentTitleChange(title); + }, [updateTitleShown]); + + useEffect(() => { + if (document) { + setTitle(document.data.title as string); + } + + return () => setTitle(""); + }, [document]); + + async function onDocumentTitleChange(title: string) { + console.log("[onDocumentTitleChange]", title); + if (!document) { + return; + } + + document.data.title = title; + await update(document); + } + async function onDocumentContentChange(content: string) { console.log("[onDocumentContentChange]", content); if (!document) { @@ -56,7 +82,8 @@ export default function DocumentDetailsPage() { type="text" placeholder="Title" disabled={readonlyMode} - value={(document.data.title as string) || ""} + value={title} + onChange={(e) => setTitle(e.target.value)} /> )} From 0fd8c9b3238f39cd8b21365a4eb8e0f7d1400951 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 3 Sep 2024 15:17:48 +0700 Subject: [PATCH 03/19] fix button color logic --- hosting/src/components/Button.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx index cfcfcef8..5c438405 100644 --- a/hosting/src/components/Button.tsx +++ b/hosting/src/components/Button.tsx @@ -3,7 +3,7 @@ import React, {useState} from "react"; interface ButtonProps { title: string; onClick: () => Promise | void; - style?: "normal" | "rounded" | "outline" | "icon"; + style?: "normal" | "rounded" | "outline" | "icon" | "icon-rounded"; color?: "primary" | "meta-3" | "black"; children?: React.ReactNode; } @@ -20,7 +20,7 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch } }; - const styles = [ + let styles = [ "inline-flex", "items-center", "justify-center", @@ -53,10 +53,14 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch styles.push("rounded-md"); break; case "outline": + styles = styles.filter((style) => style !== "text-white"); styles.push(`border`, `border-${color}`, `text-${color}`, `bg-transparent`); break; case "icon": break; + case "icon-rounded": + styles.push("rounded-md"); + break; default: break; } @@ -64,7 +68,7 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch return ( ); } From c4886e5db13797ddd9aace4cc435949cda114221 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 3 Sep 2024 15:42:36 +0700 Subject: [PATCH 04/19] integrate update document title --- .../src/app/(protected)/content/article/[documentId]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx index 3852887d..a8f956df 100644 --- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx @@ -93,7 +93,7 @@ export default function DocumentDetailsPage() { )} From 2fc87e641adf1c7af8fa96e85ca54527e646acc6 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 3 Sep 2024 15:44:32 +0700 Subject: [PATCH 05/19] fix error in input field --- .../src/app/(protected)/content/article/[documentId]/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx index a8f956df..369347ac 100644 --- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx @@ -87,7 +87,7 @@ export default function DocumentDetailsPage() { type="text" placeholder="Title" disabled={readonlyMode} - value={title} + value={title || ""} onChange={(e) => setTitle(e.target.value)} /> )} From 5abd14931acb0d1640ac07298af6f81c60d915c5 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Tue, 3 Sep 2024 15:46:27 +0700 Subject: [PATCH 06/19] change wording update title --- .../app/(protected)/content/article/[documentId]/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx index 369347ac..4b580e00 100644 --- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx +++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx @@ -92,7 +92,11 @@ export default function DocumentDetailsPage() { /> )} - From cdb8cf29399ecebe262983f4308e5a22b3e57b7e Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 10:59:53 +0700 Subject: [PATCH 07/19] use modal component instead of using dialog component --- .../app/(protected)/content/article/page.tsx | 44 ++++++++++++++++--- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx index f5421ea2..19d0ead9 100644 --- a/hosting/src/app/(protected)/content/article/page.tsx +++ b/hosting/src/app/(protected)/content/article/page.tsx @@ -3,9 +3,9 @@ import {Button} from "@/components/Button"; import Loader from "@/components/common/Loader"; import Notification from "@/components/common/Notification"; import PageHeader from "@/components/common/PageHeader"; -import Dialog from "@/components/Dialog"; import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList"; import FilePicker from "@/components/FilePicker"; +import {Modal} from "@/components/Modal"; import {useAuthentication} from "@/hooks/useAuthentication"; import {ProcessingState, useGenkitArticle} from "@/hooks/useGenkitArticle"; import {useCrudTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments"; @@ -40,6 +40,12 @@ export default function DocumentTypeDocumentsPage() { setNotification(docsError || crudError); }, [docsError, crudError]); + function resetAudioInput() { + setAudio(""); + setIsDialogOpen(false); + setIsRecording(false); + } + async function addNewArticle() { if (!documentType) return; const id = await create(documentType.id); @@ -61,6 +67,33 @@ export default function DocumentTypeDocumentsPage() { if (articleId) router.push(`article/${articleId}`); } + /** + * Modal actions for saving or canceling audio input. + * @constant + * @type {JSX.Element} + */ + const modalActionAudioInput = ( +
+ {/* Start button to close the audio input modal */} + + {/* End button to close the audio input modal */} + + {/* Start button to save changes audio input */} + + {/* End button to save changes audio input */} +
+ ); + return ( <> }> @@ -122,10 +155,11 @@ export default function DocumentTypeDocumentsPage() { {isDialogOpen && ( - setIsDialogOpen(false)} + disableOverlayClose={true} + onClose={resetAudioInput} + actions={modalActionAudioInput} title={"Tell your story"} > {status === ProcessingState.Ready ? ( @@ -149,7 +183,7 @@ export default function DocumentTypeDocumentsPage() { {status === ProcessingState.Finalizing &&

Finalizing...

} )} - + )} ) : ( From d92d12194c53b1349abe4d9a74b8fce0049a91ef Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 11:00:27 +0700 Subject: [PATCH 08/19] remove unused component --- hosting/src/components/Dialog.tsx | 62 ------------------------------- 1 file changed, 62 deletions(-) delete mode 100644 hosting/src/components/Dialog.tsx diff --git a/hosting/src/components/Dialog.tsx b/hosting/src/components/Dialog.tsx deleted file mode 100644 index 0ed4001b..00000000 --- a/hosting/src/components/Dialog.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import {ReactNode, useEffect, useState} from "react"; - -interface DialogProps { - isOpen: boolean; - isLoading?: boolean; - title: string; - children: ReactNode; - onClose?: () => void; - onSubmit?: () => void; - onLoadingChange?: (isLoading: boolean) => void; -} - -export default function Dialog(props: DialogProps) { - const {isOpen, title, children, isLoading, onClose, onSubmit, onLoadingChange} = props; - const [loading, setLoading] = useState(false); - - /** - * Effect to trigger onLoadingChange whenever the loading prop changes. - */ - useEffect(() => { - if (onLoadingChange) { - onLoadingChange(loading); - } - }, [loading, onLoadingChange]); - - /** - * Effect to trigger setLoading. - */ - useEffect(() => { - setLoading(isLoading ?? false); - - return () => setLoading(false); - }, [isLoading]); - - if (!isOpen) return null; - - return ( -
-
-

{title}

-
{children}
-
- {onClose && ( - - )} - - {onSubmit && ( - - )} -
-
-
- ); -} From 77d485fe4e78ef48d4fcc475a79f82a17b6779e6 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 13:46:05 +0700 Subject: [PATCH 09/19] add button outline rounded --- hosting/src/components/Button.tsx | 6 +++++- hosting/src/components/TogglePublishDocument.tsx | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx index 5c438405..0819bf02 100644 --- a/hosting/src/components/Button.tsx +++ b/hosting/src/components/Button.tsx @@ -3,7 +3,7 @@ import React, {useState} from "react"; interface ButtonProps { title: string; onClick: () => Promise | void; - style?: "normal" | "rounded" | "outline" | "icon" | "icon-rounded"; + style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded"; color?: "primary" | "meta-3" | "black"; children?: React.ReactNode; } @@ -56,6 +56,10 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch styles = styles.filter((style) => style !== "text-white"); styles.push(`border`, `border-${color}`, `text-${color}`, `bg-transparent`); break; + case "outline-rounded": + styles = styles.filter((style) => style !== "text-white"); + styles.push(`border`, `border-${color}`, `text-${color}`, `bg-transparent`, "rounded-md"); + break; case "icon": break; case "icon-rounded": diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index 4c5780dd..6c625fe9 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -26,7 +26,7 @@ export function TogglePublishDocument() { diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index 6c625fe9..0b451452 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -1,12 +1,15 @@ import {Button} from "@/components/Button"; import {useTanamDocument} from "@/hooks/useTanamDocuments"; import {useParams} from "next/navigation"; +import {useState} from "react"; import {TanamPublishStatus} from "tanam-shared/definitions/TanamPublishStatus"; export function TogglePublishDocument() { const {documentId} = useParams<{documentId: string}>() ?? {}; const {data: document, changeStatus} = useTanamDocument(documentId); + const [isDropdownPublishOpen, setIsDropdownPublishOpen] = useState(false); + async function onTogglePublishDocument() { if (!document) { return; @@ -22,14 +25,39 @@ export function TogglePublishDocument() { return ( documentId && ( - <> +
+ +
+ + ) ); } From 4b23a12ee735ee2a44b5dc491c2f933447068903 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 14:19:50 +0700 Subject: [PATCH 11/19] fix logic status document --- .../src/components/TogglePublishDocument.tsx | 32 +++++++++++++++---- shared/src/models/TanamDocument.ts | 2 -- 2 files changed, 25 insertions(+), 9 deletions(-) diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index 0b451452..0da6fd54 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -8,6 +8,7 @@ export function TogglePublishDocument() { const {documentId} = useParams<{documentId: string}>() ?? {}; const {data: document, changeStatus} = useTanamDocument(documentId); + const [isLoading, setIsLoading] = useState(false); const [isDropdownPublishOpen, setIsDropdownPublishOpen] = useState(false); async function onTogglePublishDocument() { @@ -15,20 +16,37 @@ export function TogglePublishDocument() { return; } - // Toggle the status of the document - return changeStatus( - document.status === TanamPublishStatus.Unpublished - ? TanamPublishStatus.Unpublished - : TanamPublishStatus.Published, - ); + console.info("onTogglePublishDocument :: ", document); + + setIsDropdownPublishOpen(false); + + try { + await changeStatus( + document.status === TanamPublishStatus.Published + ? TanamPublishStatus.Unpublished + : TanamPublishStatus.Published, + ); + } catch (error) { + console.error("Error :: ", error); + } finally { + setIsLoading(false); + } } return ( documentId && (
+ {document?.status} + {/* End button to close the schedule publish modal */} + + {/* Start button to save changes schedule publish */} + + {/* End button to save changes schedule publish */} +
+ ); + return ( documentId && ( -
- {document?.status} - - +
+
+ + +
- + + {isDialogOpen && ( + + + + )} + ) ); } diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx index 22eb5f6a..96c4f0c9 100644 --- a/hosting/src/hooks/useTanamDocuments.tsx +++ b/hosting/src/hooks/useTanamDocuments.tsx @@ -2,7 +2,17 @@ import {TanamDocumentClient} from "@/models/TanamDocumentClient"; import {UserNotification} from "@/models/UserNotification"; import {firestore} from "@/plugins/firebase"; -import {collection, doc, onSnapshot, query, serverTimestamp, setDoc, updateDoc, where} from "firebase/firestore"; +import { + collection, + doc, + onSnapshot, + query, + serverTimestamp, + setDoc, + Timestamp, + updateDoc, + where, +} from "firebase/firestore"; import {useEffect, useState} from "react"; import {TanamPublishStatus} from "tanam-shared/definitions/TanamPublishStatus"; @@ -55,7 +65,7 @@ export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsRes interface UseTanamDocumentResult { data: TanamDocumentClient | null; - changeStatus: (status: TanamPublishStatus) => Promise; + changeStatus: (status: TanamPublishStatus, publishedAt?: Date) => Promise; error: UserNotification | null; isLoading: boolean; } @@ -98,9 +108,10 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult { * Method to publish or unpublish a document * * @param {TanamPublishStatus} status Flag to publish or unpublish the document + * @param {Date | undefined} publishedAt Time for publish document * @return {Promise} Promise */ - async function changeStatus(status: TanamPublishStatus): Promise { + async function changeStatus(status: TanamPublishStatus, publishedAt?: Date): Promise { if (!documentId) { setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing")); return; @@ -109,7 +120,12 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult { try { const typeRef = doc(firestore, "tanam-documents", documentId); await updateDoc(typeRef, { - publishedAt: status === TanamPublishStatus.Published ? serverTimestamp() : null, + publishedAt: + status === TanamPublishStatus.Published || status === TanamPublishStatus.Scheduled + ? publishedAt + ? Timestamp.fromDate(publishedAt) + : serverTimestamp() + : null, status, } as Partial); } catch (err) { From 953cfdd9cce183f28303181ca2e0b46899b32d8d Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 17:08:13 +0700 Subject: [PATCH 15/19] display scheduled for --- .../src/components/TogglePublishDocument.tsx | 20 ++++++- hosting/src/utils/date.ts | 57 +++++++++++++++++++ 2 files changed, 76 insertions(+), 1 deletion(-) create mode 100644 hosting/src/utils/date.ts diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index 7ac98c9a..07dd469f 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -2,8 +2,9 @@ import {Button} from "@/components/Button"; import {DatePicker} from "@/components/Form"; import {Modal} from "@/components/Modal"; import {useTanamDocument} from "@/hooks/useTanamDocuments"; +import {formatDate} from "@/utils/date"; import {useParams} from "next/navigation"; -import {useState} from "react"; +import {useMemo, useState} from "react"; import {TanamPublishStatus} from "tanam-shared/definitions/TanamPublishStatus"; export function TogglePublishDocument() { @@ -15,6 +16,21 @@ export function TogglePublishDocument() { const [isDropdownPublishOpen, setIsDropdownPublishOpen] = useState(false); const [publishedAt, setPublishedAt] = useState(); + const publishDate = useMemo(() => { + const date = document?.publishedAt?.toDate() ?? null; + + if (!date) return date; + + return ( + <> + + Scheduled for {formatDate(date, "MMMM DD, YYYY")} at{" "} + {formatDate(date, "hh:mm A")} + + + ); + }, [document]); + function pruneState() { setIsLoading(false); setIsDialogOpen(false); @@ -95,6 +111,8 @@ export function TogglePublishDocument() { color="primary" /> + {document?.publishedAt &&
{publishDate}
} +
= 12 ? "PM" : "AM", + // am/pm marker + a: date.getHours() >= 12 ? "pm" : "am", + // Full month name + MMMM: date.toLocaleString("default", {month: "long"}), + // Short month name + MMM: date.toLocaleString("default", {month: "short"}), + // Full weekday name + dddd: date.toLocaleString("default", {weekday: "long"}), + // Short weekday name + ddd: date.toLocaleString("default", {weekday: "short"}), + }; + + // Regex for AM/PM markers + const amPmRegex = /A|a/g; + // Regex for other tokens + const otherTokensRegex = /MMMM|MMM|dddd|ddd|YYYY|MM|DD|hh|HH|mm|ss/g; + + // First replace the AM/PM markers + let result = format.replace(amPmRegex, (matched) => map[matched] || matched); + + // Then replace the other tokens + result = result.replace(otherTokensRegex, (matched) => map[matched] || matched); + + return result; +} + +/** + * Get the current date formatted based on a given format string + * @param {string} format - The format string specifying the desired date format + * @returns {string} The current date formatted based on the provided format + */ +export function getCurrentDateFormatted(format: string): string { + return formatDate(new Date(), format); +} From b6badcac4c9d38079493f05de854372a1f8be380 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 17:11:46 +0700 Subject: [PATCH 16/19] change icon --- hosting/src/components/TogglePublishDocument.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index 07dd469f..d304efc6 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -125,14 +125,14 @@ export function TogglePublishDocument() { className="block px-4 py-2 text-sm text-gray-700 hover:bg-black hover:bg-opacity-5 w-full text-left" onClick={onTogglePublishDocument} > - + Publish
From 2e154bbc667c3a044113b8a366689626a5ca2ea2 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 17:18:50 +0700 Subject: [PATCH 17/19] add maximum date --- hosting/src/components/TogglePublishDocument.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index d304efc6..aa84f9a2 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -11,6 +11,9 @@ export function TogglePublishDocument() { const {documentId} = useParams<{documentId: string}>() ?? {}; const {data: document, changeStatus} = useTanamDocument(documentId); + const maxDate = new Date(); + maxDate.setDate(maxDate.getDate() + 30); + const [isLoading, setIsLoading] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDropdownPublishOpen, setIsDropdownPublishOpen] = useState(false); @@ -152,10 +155,11 @@ export function TogglePublishDocument() { disabled={isLoading} enableTime={true} label="Published At" - placeholder="Y-m-d H:i" + placeholder="Select date and time" dateFormat="Y-m-d H:i" minDate="today" defaultValue={publishedAt} + maxDate={maxDate} onChange={setPublishedAt} /> From 877c2f3a5da86c01dbb6518272c67252ec53d1f9 Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Wed, 4 Sep 2024 17:22:15 +0700 Subject: [PATCH 18/19] remove unused --- hosting/src/components/TogglePublishDocument.tsx | 10 ++++------ hosting/src/utils/date.ts | 4 ++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index aa84f9a2..dfac684a 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -25,12 +25,10 @@ export function TogglePublishDocument() { if (!date) return date; return ( - <> - - Scheduled for {formatDate(date, "MMMM DD, YYYY")} at{" "} - {formatDate(date, "hh:mm A")} - - + + Scheduled for {formatDate(date, "MMMM DD, YYYY")} at{" "} + {formatDate(date, "hh:mm A")} + ); }, [document]); diff --git a/hosting/src/utils/date.ts b/hosting/src/utils/date.ts index 9a3af5eb..b1ca2d8e 100644 --- a/hosting/src/utils/date.ts +++ b/hosting/src/utils/date.ts @@ -2,7 +2,7 @@ * Format date based on a given format string * @param {Date} date - The date object to format * @param {string} format - The format string specifying the desired date format - * @returns {string} The formatted date string based on the provided format + * @return {string} The formatted date string based on the provided format */ export function formatDate(date: Date, format: string): string { const map: {[key: string]: string} = { @@ -50,7 +50,7 @@ export function formatDate(date: Date, format: string): string { /** * Get the current date formatted based on a given format string * @param {string} format - The format string specifying the desired date format - * @returns {string} The current date formatted based on the provided format + * @return {string} The current date formatted based on the provided format */ export function getCurrentDateFormatted(format: string): string { return formatDate(new Date(), format); From 99a56a6a91ef4e322ec027df25768a67dc8cc87b Mon Sep 17 00:00:00 2001 From: Nurfirliana Muzanella Date: Thu, 5 Sep 2024 09:15:41 +0700 Subject: [PATCH 19/19] change to null --- hosting/src/components/Form/DatePicker.tsx | 2 +- hosting/src/components/TogglePublishDocument.tsx | 6 +++--- hosting/src/hooks/useTanamDocuments.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/hosting/src/components/Form/DatePicker.tsx b/hosting/src/components/Form/DatePicker.tsx index 057e14cf..328b83d2 100644 --- a/hosting/src/components/Form/DatePicker.tsx +++ b/hosting/src/components/Form/DatePicker.tsx @@ -8,7 +8,7 @@ interface DatePickerProps { placeholder: string; enableTime?: boolean; dateFormat?: string; - defaultValue?: Date; + defaultValue?: Date | null; disabledDates?: DateLimit[]; enabledDates?: DateLimit[]; maxDate?: DateOption; diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx index dfac684a..ff0c478e 100644 --- a/hosting/src/components/TogglePublishDocument.tsx +++ b/hosting/src/components/TogglePublishDocument.tsx @@ -17,7 +17,7 @@ export function TogglePublishDocument() { const [isLoading, setIsLoading] = useState(false); const [isDialogOpen, setIsDialogOpen] = useState(false); const [isDropdownPublishOpen, setIsDropdownPublishOpen] = useState(false); - const [publishedAt, setPublishedAt] = useState(); + const [publishedAt, setPublishedAt] = useState(null); const publishDate = useMemo(() => { const date = document?.publishedAt?.toDate() ?? null; @@ -36,7 +36,7 @@ export function TogglePublishDocument() { setIsLoading(false); setIsDialogOpen(false); setIsDropdownPublishOpen(false); - setPublishedAt(undefined); + setPublishedAt(null); } async function onTogglePublishDocument() { @@ -58,7 +58,7 @@ export function TogglePublishDocument() { : publishedAt ? TanamPublishStatus.Scheduled : TanamPublishStatus.Published, - publishedAt ? publishedAt : undefined, + publishedAt ? publishedAt : null, ); } catch (error) { console.error("Error :: ", error); diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx index 96c4f0c9..a52bacfb 100644 --- a/hosting/src/hooks/useTanamDocuments.tsx +++ b/hosting/src/hooks/useTanamDocuments.tsx @@ -65,7 +65,7 @@ export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsRes interface UseTanamDocumentResult { data: TanamDocumentClient | null; - changeStatus: (status: TanamPublishStatus, publishedAt?: Date) => Promise; + changeStatus: (status: TanamPublishStatus, publishedAt?: Date | null) => Promise; error: UserNotification | null; isLoading: boolean; } @@ -108,10 +108,10 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult { * Method to publish or unpublish a document * * @param {TanamPublishStatus} status Flag to publish or unpublish the document - * @param {Date | undefined} publishedAt Time for publish document + * @param {Date | null} publishedAt Time for publish document * @return {Promise} Promise */ - async function changeStatus(status: TanamPublishStatus, publishedAt?: Date): Promise { + async function changeStatus(status: TanamPublishStatus, publishedAt?: Date | null): Promise { if (!documentId) { setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing")); return;