From d6e317a070125b6bca3ef28d62eb9cf2bc339b76 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Tue, 30 Jul 2024 14:25:06 +0700
Subject: [PATCH 1/7] add publish button

---
 hosting/src/components/Button.tsx       | 10 +++++-----
 hosting/src/components/Header/index.tsx |  9 ++++++++-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 40e73142..4c1e1c18 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 
 interface ButtonProps {
   title: string;
@@ -36,16 +36,16 @@ export function Button({title, onClick, style = "normal", color = "primary", chi
 
   switch (color) {
     case "primary":
-      styles.push("bg-primary", "text-white");
+      styles.push("bg-primary", !style ? "text-white" : "");
       break;
     case "meta-3":
-      styles.push("bg-meta-3", "text-white");
+      styles.push("bg-meta-3", !style ? "text-white" : "");
       break;
     case "black":
-      styles.push("bg-black", "text-white");
+      styles.push("bg-black", !style ? "text-white" : "");
       break;
     default:
-      styles.push("bg-primary", "text-white");
+      styles.push("bg-primary", !style ? "text-white" : "");
   }
 
   switch (style) {
diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 37b5e5d6..4e77536b 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -1,6 +1,7 @@
+import { Button } from "@/components/Button";
 import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
-import {useAuthentication} from "@/hooks/useAuthentication";
+import { useAuthentication } from "@/hooks/useAuthentication";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -9,6 +10,12 @@ const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpe
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
+        <Button
+          title="Publish"
+          onClick={() => {}}
+          style="outline"
+          color="primary"
+        />
         <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
           {/* <!-- Hamburger Toggle BTN --> */}
           <button

From c292dd44ca5ba44e35e85f983c68930ebb55c08c Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 31 Jul 2024 07:56:45 +0700
Subject: [PATCH 2/7] refactor crud tanam document

---
 .../content/article/[documentId]/page.tsx     | 12 +++---
 .../app/(protected)/content/article/page.tsx  | 22 +++++-----
 hosting/src/hooks/useTanamDocuments.tsx       | 42 +++++++++++++++----
 3 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
index 1bfc5aca..1e099382 100644
--- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -3,16 +3,16 @@ import TiptapEditor from "@/components/Tiptap/TiptapEditor";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
-import {useCrudTanamDocument, useTanamDocument} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
-import {useParams, useRouter} from "next/navigation";
-import {Suspense, useEffect, useState} from "react";
+import { useCrudTanamDocument, useTanamDocument } from "@/hooks/useTanamDocuments";
+import { UserNotification } from "@/models/UserNotification";
+import { useParams, useRouter } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
 
 export default function DocumentDetailsPage() {
   const router = useRouter();
   const {documentId} = useParams<{documentId: string}>() ?? {};
   const {data: document, error: documentError} = useTanamDocument(documentId);
-  const {update, error: writeError} = useCrudTanamDocument(documentId);
+  const {update, error: writeError} = useCrudTanamDocument();
   const [readonlyMode] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
   if (!!document?.documentType && document?.documentType !== "article") {
@@ -26,7 +26,7 @@ export default function DocumentDetailsPage() {
 
   async function onDocumentContentChange(content: string) {
     console.log("[onDocumentContentChange]", content);
-    await update({data: {...document?.data, content}});
+    await update(documentId, {data: {...document?.data, content}});
   }
 
   return (
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
index aa954489..25262529 100644
--- a/hosting/src/app/(protected)/content/article/page.tsx
+++ b/hosting/src/app/(protected)/content/article/page.tsx
@@ -1,28 +1,28 @@
 "use client";
-import {Button} from "@/components/Button";
-import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
+import { Button } from "@/components/Button";
+import { DocumentTypeGenericList } from "@/components/DocumentType/DocumentTypeGenericList";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
-import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
-import {useCreateTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments";
-import {UserNotification} from "@/models/UserNotification";
-import {useRouter} from "next/navigation";
-import {Suspense, useEffect, useState} from "react";
+import { useTanamDocumentType } from "@/hooks/useTanamDocumentTypes";
+import { useCrudTanamDocument, useTanamDocuments } from "@/hooks/useTanamDocuments";
+import { UserNotification } from "@/models/UserNotification";
+import { useRouter } from "next/navigation";
+import { Suspense, useEffect, useState } from "react";
 
 export default function DocumentTypeDocumentsPage() {
   const {data: documentType} = useTanamDocumentType("article");
-  const {create, error: writeError} = useCreateTanamDocument(documentType?.id);
+  const {create, error: crudError} = useCrudTanamDocument();
   const {data: documents, error: docsError} = useTanamDocuments("article");
   const [notification, setNotification] = useState<UserNotification | null>(null);
   const router = useRouter();
 
   useEffect(() => {
-    setNotification(docsError || writeError);
-  }, [docsError, writeError]);
+    setNotification(docsError || crudError);
+  }, [docsError, crudError]);
 
   const addNewArticle = async () => {
-    const id = await create();
+    const id = await create(documentType?.id);
 
     router.push(`article/${id}`);
   };
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index 21f7f717..7c615710 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -1,6 +1,7 @@
-import {TanamDocumentClient} from "@/models/TanamDocumentClient";
-import {firestore} from "@/plugins/firebase";
-import {ITanamDocument} from "@functions/models/TanamDocument";
+import { TanamDocumentClient } from "@/models/TanamDocumentClient";
+import { UserNotification } from "@/models/UserNotification";
+import { firestore } from "@/plugins/firebase";
+import { ITanamDocument } from "@functions/models/TanamDocument";
 import {
   Timestamp,
   collection,
@@ -12,8 +13,7 @@ import {
   updateDoc,
   where,
 } from "firebase/firestore";
-import {useEffect, useState} from "react";
-import {UserNotification} from "@/models/UserNotification";
+import { useEffect, useState } from "react";
 
 interface UseTanamDocumentsResult {
   data: TanamDocumentClient[];
@@ -95,11 +95,37 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult {
   return {data, error};
 }
 
-export function useCrudTanamDocument(documentId?: string) {
+export function useCrudTanamDocument() {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<UserNotification | null>(null);
 
-  async function update(data: Partial<ITanamDocument<Timestamp>>): Promise<void> {
+  async function create(documentType?: string) {
+    setIsLoading(true);
+    try {
+      if (!documentType) {
+        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+        return;
+      }
+      const docRef = doc(collection(firestore, "tanam-documents"));
+      const docId = docRef.id;
+
+      const tanamDocument = new TanamDocumentClient(docId, {data: {}, documentType});
+      await setDoc(docRef, tanamDocument.toJson());
+      return docId;
+    } catch (err) {
+      setError(
+        new UserNotification(
+          "error",
+          "UserNotification creating document",
+          "An error occurred while creating the document",
+        ),
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  async function update(documentId: string, data: Partial<ITanamDocument<Timestamp>>): Promise<void> {
     setIsLoading(true);
     try {
       if (!documentId) {
@@ -121,7 +147,7 @@ export function useCrudTanamDocument(documentId?: string) {
       setIsLoading(false);
     }
   }
-  return {update, isLoading, error};
+  return {isLoading, error, create, update};
 }
 
 export function useCreateTanamDocument(documentType?: string) {

From 3fb39a7fe5b5d1444ed58becdd230b909cd41108 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 31 Jul 2024 07:57:12 +0700
Subject: [PATCH 3/7] remove unused

---
 .../app/(protected)/content/article/page.tsx  |  2 ++
 hosting/src/hooks/useTanamDocuments.tsx       | 35 +------------------
 2 files changed, 3 insertions(+), 34 deletions(-)

diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
index 25262529..e01987e0 100644
--- a/hosting/src/app/(protected)/content/article/page.tsx
+++ b/hosting/src/app/(protected)/content/article/page.tsx
@@ -24,6 +24,8 @@ export default function DocumentTypeDocumentsPage() {
   const addNewArticle = async () => {
     const id = await create(documentType?.id);
 
+    if (!id) return
+
     router.push(`article/${id}`);
   };
 
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index 7c615710..f21dd4cf 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -103,7 +103,7 @@ export function useCrudTanamDocument() {
     setIsLoading(true);
     try {
       if (!documentType) {
-        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+        setError(new UserNotification("error", "Missing parameter", "Document type parameter is missing"));
         return;
       }
       const docRef = doc(collection(firestore, "tanam-documents"));
@@ -149,36 +149,3 @@ export function useCrudTanamDocument() {
   }
   return {isLoading, error, create, update};
 }
-
-export function useCreateTanamDocument(documentType?: string) {
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<UserNotification | null>(null);
-
-  async function create() {
-    setIsLoading(true);
-    try {
-      if (!documentType) {
-        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
-        return;
-      }
-      const docRef = doc(collection(firestore, "tanam-documents"));
-      const docId = docRef.id;
-
-      const tanamDocument = new TanamDocumentClient(docId, {data: {}, documentType}).toJson();
-      await setDoc(docRef, tanamDocument);
-      return docId;
-    } catch (err) {
-      setError(
-        new UserNotification(
-          "error",
-          "UserNotification creating document",
-          "An error occurred while creating the document",
-        ),
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }
-
-  return {create, isLoading, error};
-}

From c9a2c85ec5725349ca9fc5d84ebff55efcb459c7 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Wed, 31 Jul 2024 11:00:14 +0700
Subject: [PATCH 4/7] add toggle publish document

---
 .../content/article/[documentId]/page.tsx     |  8 ++--
 .../app/(protected)/content/article/page.tsx  | 16 ++++----
 hosting/src/components/Button.tsx             |  2 +-
 hosting/src/components/Header/index.tsx       | 13 +++----
 .../src/components/TogglePublishDocument.tsx  | 37 +++++++++++++++++++
 hosting/src/hooks/useTanamDocuments.tsx       | 11 +++---
 6 files changed, 61 insertions(+), 26 deletions(-)
 create mode 100644 hosting/src/components/TogglePublishDocument.tsx

diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
index 1e099382..e9caa1e4 100644
--- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -3,10 +3,10 @@ import TiptapEditor from "@/components/Tiptap/TiptapEditor";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
-import { useCrudTanamDocument, useTanamDocument } from "@/hooks/useTanamDocuments";
-import { UserNotification } from "@/models/UserNotification";
-import { useParams, useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
+import {useCrudTanamDocument, useTanamDocument} from "@/hooks/useTanamDocuments";
+import {UserNotification} from "@/models/UserNotification";
+import {useParams, useRouter} from "next/navigation";
+import {Suspense, useEffect, useState} from "react";
 
 export default function DocumentDetailsPage() {
   const router = useRouter();
diff --git a/hosting/src/app/(protected)/content/article/page.tsx b/hosting/src/app/(protected)/content/article/page.tsx
index e01987e0..dea7e72f 100644
--- a/hosting/src/app/(protected)/content/article/page.tsx
+++ b/hosting/src/app/(protected)/content/article/page.tsx
@@ -1,14 +1,14 @@
 "use client";
-import { Button } from "@/components/Button";
-import { DocumentTypeGenericList } from "@/components/DocumentType/DocumentTypeGenericList";
+import {Button} from "@/components/Button";
+import {DocumentTypeGenericList} from "@/components/DocumentType/DocumentTypeGenericList";
 import Loader from "@/components/common/Loader";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
-import { useTanamDocumentType } from "@/hooks/useTanamDocumentTypes";
-import { useCrudTanamDocument, useTanamDocuments } from "@/hooks/useTanamDocuments";
-import { UserNotification } from "@/models/UserNotification";
-import { useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
+import {useTanamDocumentType} from "@/hooks/useTanamDocumentTypes";
+import {useCrudTanamDocument, useTanamDocuments} from "@/hooks/useTanamDocuments";
+import {UserNotification} from "@/models/UserNotification";
+import {useRouter} from "next/navigation";
+import {Suspense, useEffect, useState} from "react";
 
 export default function DocumentTypeDocumentsPage() {
   const {data: documentType} = useTanamDocumentType("article");
@@ -24,7 +24,7 @@ export default function DocumentTypeDocumentsPage() {
   const addNewArticle = async () => {
     const id = await create(documentType?.id);
 
-    if (!id) return
+    if (!id) return;
 
     router.push(`article/${id}`);
   };
diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 4c1e1c18..7466811e 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
 
 interface ButtonProps {
   title: string;
diff --git a/hosting/src/components/Header/index.tsx b/hosting/src/components/Header/index.tsx
index 4e77536b..22506662 100644
--- a/hosting/src/components/Header/index.tsx
+++ b/hosting/src/components/Header/index.tsx
@@ -1,21 +1,18 @@
-import { Button } from "@/components/Button";
 import DarkModeSwitcher from "@/components/Header/DarkModeSwitcher";
 import DropdownUser from "@/components/Header/DropdownUser";
-import { useAuthentication } from "@/hooks/useAuthentication";
+import {TogglePublishDocument} from "@/components/TogglePublishDocument";
+import {useAuthentication} from "@/hooks/useAuthentication";
 import Image from "next/image";
 import Link from "next/link";
 
 const Header = (props: {sidebarOpen: string | boolean | undefined; setSidebarOpen: (arg0: boolean) => void}) => {
   const {authUser} = useAuthentication();
+
   return (
     <header className="sticky top-0 z-999 flex w-full bg-white drop-shadow-1 dark:bg-boxdark dark:drop-shadow-none">
       <div className="flex flex-grow items-center justify-between px-4 py-4 shadow-2 md:px-6 2xl:px-11">
-        <Button
-          title="Publish"
-          onClick={() => {}}
-          style="outline"
-          color="primary"
-        />
+        <TogglePublishDocument />
+
         <div className="flex items-center gap-2 sm:gap-4 lg:hidden">
           {/* <!-- Hamburger Toggle BTN --> */}
           <button
diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx
new file mode 100644
index 00000000..2762e763
--- /dev/null
+++ b/hosting/src/components/TogglePublishDocument.tsx
@@ -0,0 +1,37 @@
+import {Button} from "@/components/Button";
+import {useCrudTanamDocument, useTanamDocument} from "@/hooks/useTanamDocuments";
+import {serverTimestamp} from "firebase/firestore";
+import {useParams} from "next/navigation";
+
+export function TogglePublishDocument() {
+  const {documentId} = useParams<{documentId: string}>() ?? {};
+  const {data: document} = useTanamDocument(documentId);
+  const {update} = useCrudTanamDocument();
+
+  async function onTogglePublishDocument() {
+    let data = document?.toJson();
+
+    if (document?.status === "unpublished") {
+      data = {...data, status: "published", publishedAt: serverTimestamp()};
+    }
+
+    if (document?.status === "published") {
+      data = {...data, status: "unpublished", publishedAt: null};
+    }
+
+    await update(documentId, {...data});
+  }
+
+  return (
+    documentId && (
+      <>
+        <Button
+          title={document?.status === "published" ? "Unpublish" : "Publish"}
+          onClick={onTogglePublishDocument}
+          style="outline"
+          color="primary"
+        />
+      </>
+    )
+  );
+}
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index f21dd4cf..91c72047 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -1,7 +1,8 @@
-import { TanamDocumentClient } from "@/models/TanamDocumentClient";
-import { UserNotification } from "@/models/UserNotification";
-import { firestore } from "@/plugins/firebase";
-import { ITanamDocument } from "@functions/models/TanamDocument";
+"use client";
+import {TanamDocumentClient} from "@/models/TanamDocumentClient";
+import {UserNotification} from "@/models/UserNotification";
+import {firestore} from "@/plugins/firebase";
+import {ITanamDocument} from "@functions/models/TanamDocument";
 import {
   Timestamp,
   collection,
@@ -13,7 +14,7 @@ import {
   updateDoc,
   where,
 } from "firebase/firestore";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 
 interface UseTanamDocumentsResult {
   data: TanamDocumentClient[];

From d5d430556e36fbc1f32d4245e7a761b76f6fa586 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Fri, 2 Aug 2024 11:31:25 +0800
Subject: [PATCH 5/7] Updating model's status implementation

---
 functions/src/models/TanamDocument.ts      |  9 ++++++++-
 functions/src/models/TanamDocumentAdmin.ts | 10 ----------
 hosting/src/models/TanamDocumentClient.ts  | 12 +-----------
 3 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/functions/src/models/TanamDocument.ts b/functions/src/models/TanamDocument.ts
index 51cd9d12..642194fa 100644
--- a/functions/src/models/TanamDocument.ts
+++ b/functions/src/models/TanamDocument.ts
@@ -32,7 +32,14 @@ export abstract class TanamDocument<TimestampType, FieldValueType> {
   public readonly createdAt?: TimestampType;
   public readonly updatedAt?: TimestampType;
 
-  abstract get status(): TanamPublishStatus;
+  get status(): TanamPublishStatus {
+    if (!this.publishedAt) {
+      return "unpublished";
+    } else {
+      return "published";
+    }
+  }
+
   protected abstract getServerTimestamp(): FieldValueType;
 
   toJson(): object {
diff --git a/functions/src/models/TanamDocumentAdmin.ts b/functions/src/models/TanamDocumentAdmin.ts
index 38cb866a..77db4488 100644
--- a/functions/src/models/TanamDocumentAdmin.ts
+++ b/functions/src/models/TanamDocumentAdmin.ts
@@ -7,16 +7,6 @@ export class TanamDocumentAdmin extends TanamDocument<Timestamp, FieldValue> {
     super(id, json);
   }
 
-  get status(): TanamPublishStatus {
-    if (!this.publishedAt) {
-      return "unpublished";
-    } else if (this.publishedAt.toMillis() > Timestamp.now().toMillis()) {
-      return "scheduled";
-    } else {
-      return "published";
-    }
-  }
-
   getServerTimestamp(): FieldValue {
     return FieldValue.serverTimestamp();
   }
diff --git a/hosting/src/models/TanamDocumentClient.ts b/hosting/src/models/TanamDocumentClient.ts
index e0a7bd7e..8d19e07b 100644
--- a/hosting/src/models/TanamDocumentClient.ts
+++ b/hosting/src/models/TanamDocumentClient.ts
@@ -1,4 +1,4 @@
-import {ITanamDocument, TanamDocument, TanamPublishStatus} from "@functions/models/TanamDocument";
+import {ITanamDocument, TanamDocument} from "@functions/models/TanamDocument";
 import {DocumentSnapshot, FieldValue, serverTimestamp, Timestamp} from "firebase/firestore";
 
 export class TanamDocumentClient extends TanamDocument<Timestamp, FieldValue> {
@@ -6,16 +6,6 @@ export class TanamDocumentClient extends TanamDocument<Timestamp, FieldValue> {
     super(id, json);
   }
 
-  get status(): TanamPublishStatus {
-    if (!this.publishedAt) {
-      return "unpublished";
-    } else if (this.publishedAt.toMillis() > Timestamp.now().toMillis()) {
-      return "scheduled";
-    } else {
-      return "published";
-    }
-  }
-
   getServerTimestamp(): FieldValue {
     return serverTimestamp();
   }

From 443045e876303911a766567f3b7de9e3ea0258b5 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Fri, 2 Aug 2024 12:03:57 +0800
Subject: [PATCH 6/7] Updating document hook and toggle component

---
 .../content/article/[documentId]/page.tsx     |  7 +-
 .../src/components/TogglePublishDocument.tsx  | 19 ++---
 hosting/src/hooks/useTanamDocuments.tsx       | 75 +++++++++----------
 3 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
index e9caa1e4..20554a37 100644
--- a/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/hosting/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -26,7 +26,12 @@ export default function DocumentDetailsPage() {
 
   async function onDocumentContentChange(content: string) {
     console.log("[onDocumentContentChange]", content);
-    await update(documentId, {data: {...document?.data, content}});
+    if (!document) {
+      return;
+    }
+
+    document.data.content = content;
+    await update(document);
   }
 
   return (
diff --git a/hosting/src/components/TogglePublishDocument.tsx b/hosting/src/components/TogglePublishDocument.tsx
index 2762e763..5a53f14a 100644
--- a/hosting/src/components/TogglePublishDocument.tsx
+++ b/hosting/src/components/TogglePublishDocument.tsx
@@ -1,25 +1,18 @@
 import {Button} from "@/components/Button";
-import {useCrudTanamDocument, useTanamDocument} from "@/hooks/useTanamDocuments";
-import {serverTimestamp} from "firebase/firestore";
+import {useTanamDocument} from "@/hooks/useTanamDocuments";
 import {useParams} from "next/navigation";
 
 export function TogglePublishDocument() {
   const {documentId} = useParams<{documentId: string}>() ?? {};
-  const {data: document} = useTanamDocument(documentId);
-  const {update} = useCrudTanamDocument();
+  const {data: document, changeStatus} = useTanamDocument(documentId);
 
   async function onTogglePublishDocument() {
-    let data = document?.toJson();
-
-    if (document?.status === "unpublished") {
-      data = {...data, status: "published", publishedAt: serverTimestamp()};
-    }
-
-    if (document?.status === "published") {
-      data = {...data, status: "unpublished", publishedAt: null};
+    if (!document) {
+      return;
     }
 
-    await update(documentId, {...data});
+    // Toggle the status of the document
+    return changeStatus(document.status === "published" ? "unpublished" : "published");
   }
 
   return (
diff --git a/hosting/src/hooks/useTanamDocuments.tsx b/hosting/src/hooks/useTanamDocuments.tsx
index 91c72047..816c7e44 100644
--- a/hosting/src/hooks/useTanamDocuments.tsx
+++ b/hosting/src/hooks/useTanamDocuments.tsx
@@ -2,18 +2,8 @@
 import {TanamDocumentClient} from "@/models/TanamDocumentClient";
 import {UserNotification} from "@/models/UserNotification";
 import {firestore} from "@/plugins/firebase";
-import {ITanamDocument} from "@functions/models/TanamDocument";
-import {
-  Timestamp,
-  collection,
-  doc,
-  onSnapshot,
-  query,
-  serverTimestamp,
-  setDoc,
-  updateDoc,
-  where,
-} from "firebase/firestore";
+import {TanamPublishStatus} from "@functions/models/TanamDocument";
+import {collection, doc, onSnapshot, query, serverTimestamp, setDoc, updateDoc, where} from "firebase/firestore";
 import {useEffect, useState} from "react";
 
 interface UseTanamDocumentsResult {
@@ -60,6 +50,7 @@ export function useTanamDocuments(documentTypeId?: string): UseTanamDocumentsRes
 
 interface UseTanamDocumentResult {
   data: TanamDocumentClient | null;
+  changeStatus: (status: TanamPublishStatus) => Promise<void>;
   error: UserNotification | null;
 }
 
@@ -93,15 +84,38 @@ export function useTanamDocument(documentId?: string): UseTanamDocumentResult {
     return () => unsubscribe();
   }, [documentId]);
 
-  return {data, error};
+  /**
+   * Method to publish or unpublish a document
+   *
+   * @param {TanamPublishStatus} status Flag to publish or unpublish the document
+   * @return {Promise<void>} Promise
+   */
+  async function changeStatus(status: TanamPublishStatus): Promise<void> {
+    if (!documentId) {
+      setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
+      return;
+    }
+
+    try {
+      const typeRef = doc(firestore, "tanam-documents", documentId);
+      await updateDoc(typeRef, {
+        publishedAt: status === "published" ? serverTimestamp() : null,
+        status,
+      } as Partial<TanamDocumentClient>);
+    } catch (err) {
+      setError(
+        new UserNotification("error", "Error publishing document", "An error occurred while publishing the document"),
+      );
+    }
+  }
+
+  return {data, changeStatus, error};
 }
 
 export function useCrudTanamDocument() {
-  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<UserNotification | null>(null);
 
   async function create(documentType?: string) {
-    setIsLoading(true);
     try {
       if (!documentType) {
         setError(new UserNotification("error", "Missing parameter", "Document type parameter is missing"));
@@ -115,38 +129,21 @@ export function useCrudTanamDocument() {
       return docId;
     } catch (err) {
       setError(
-        new UserNotification(
-          "error",
-          "UserNotification creating document",
-          "An error occurred while creating the document",
-        ),
+        new UserNotification("error", "Error creating document", "An error occurred while creating the document"),
       );
-    } finally {
-      setIsLoading(false);
     }
   }
 
-  async function update(documentId: string, data: Partial<ITanamDocument<Timestamp>>): Promise<void> {
-    setIsLoading(true);
+  async function update(document: TanamDocumentClient): Promise<void> {
     try {
-      if (!documentId) {
-        setError(new UserNotification("error", "Missing parameter", "Document id parameter is missing"));
-        return;
-      }
-
-      const typeRef = doc(firestore, "tanam-documents", documentId);
-      await updateDoc(typeRef, {...data, updatedAt: serverTimestamp()});
+      const typeRef = doc(firestore, "tanam-documents", document.id);
+      await updateDoc(typeRef, document.toJson());
     } catch (err) {
       setError(
-        new UserNotification(
-          "error",
-          "UserNotification updating document",
-          "An error occurred while updating the document",
-        ),
+        new UserNotification("error", "Error updating document", "An error occurred while updating the document"),
       );
-    } finally {
-      setIsLoading(false);
     }
   }
-  return {isLoading, error, create, update};
+
+  return {error, create, update};
 }

From 04248733b776f0677d2aec9a08477d169ba716db Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Fri, 2 Aug 2024 12:07:42 +0800
Subject: [PATCH 7/7] Removing unused import

---
 functions/src/models/TanamDocumentAdmin.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/functions/src/models/TanamDocumentAdmin.ts b/functions/src/models/TanamDocumentAdmin.ts
index 77db4488..7b4ec7b3 100644
--- a/functions/src/models/TanamDocumentAdmin.ts
+++ b/functions/src/models/TanamDocumentAdmin.ts
@@ -1,6 +1,6 @@
 import {FieldValue, Timestamp} from "firebase-admin/firestore";
-import {ITanamDocument, TanamDocument, TanamPublishStatus} from "./TanamDocument";
 import {DocumentSnapshot} from "firebase-functions/v2/firestore";
+import {ITanamDocument, TanamDocument} from "./TanamDocument";
 
 export class TanamDocumentAdmin extends TanamDocument<Timestamp, FieldValue> {
   constructor(id: string, json: ITanamDocument<Timestamp>) {