From 8ef550b3ec5049d8c26e8c87c4515cfd017c412b Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 5 Sep 2024 14:13:10 +0700
Subject: [PATCH 1/8] add loading and disabled state in button component

---
 hosting/src/app/(protected)/settings/page.tsx |  5 +-
 hosting/src/components/Button.tsx             | 52 ++++++++++++++++---
 2 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx
index b65074ad..984d1ac4 100644
--- a/hosting/src/app/(protected)/settings/page.tsx
+++ b/hosting/src/app/(protected)/settings/page.tsx
@@ -21,6 +21,7 @@ export default function Settings() {
   const {isLoading: uploadLoading, error: storageError, upload, getFile} = useFirebaseStorage();
   const [notification, setNotification] = useState<UserNotification | null>(null);
 
+  const [readonlyMode, setReadonlyMode] = useState<boolean>(true);
   const [showDropzone, setShowDropzone] = useState<boolean>(false);
   const [showCropImage, setShowCropImage] = useState<boolean>(false);
   const [pathUpload, setPathUpload] = useState<string>();
@@ -58,6 +59,7 @@ export default function Settings() {
    * @return {Promise<void>}
    */
   async function resetChanges(): Promise<void> {
+    setReadonlyMode(true);
     setFileUploadContentType(undefined);
     resetCropImage();
 
@@ -264,7 +266,8 @@ export default function Settings() {
                     Cancel
                   </button>
                   <button
-                    className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90"
+                    disabled={true}
+                    className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 disabled:opacity-50"
                     type="submit"
                   >
                     Save
diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 0819bf02..de439f69 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -1,15 +1,29 @@
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 
 interface ButtonProps {
   title: string;
   onClick: () => Promise<void> | void;
   style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
+  loading?: boolean;
+  disabled?: boolean;
   children?: React.ReactNode;
 }
 
-export function Button({title, onClick, style = "rounded", color = "primary", children}: ButtonProps) {
-  const [isLoading, setIsLoading] = useState(false);
+export function Button(props: ButtonProps) {
+  const {title, onClick, style = "rounded", color = "primary", children, loading, disabled} = props;
+
+  const [isLoading, setIsLoading] = useState(loading ?? false);
+  const [isDisabled, setIsDisabled] = useState(disabled ?? false);
+
+  useEffect(() => {
+    return () => pruneState();
+  }, []);
+
+  function pruneState() {
+    setIsLoading(false);
+    setIsDisabled(false);
+  }
 
   const handleClick = async () => {
     setIsLoading(true);
@@ -29,7 +43,7 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
     "text-center",
     "font-medium",
     "hover:bg-opacity-90",
-    isLoading ? "opacity-50 cursor-not-allowed" : "",
+    isLoading || isDisabled ? "disabled:opacity-50 opacity-50 cursor-not-allowed" : "",
   ];
 
   switch (color) {
@@ -70,9 +84,33 @@ export function Button({title, onClick, style = "rounded", color = "primary", ch
   }
 
   return (
-    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading}>
-      {children}
-      {style !== "icon" && style !== "icon-rounded" && <span>{title}</span>}
+    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading || isDisabled}>
+      {isLoading && (
+        <>
+          <svg
+            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            ></path>
+          </svg>
+
+          <span>Processing...</span>
+        </>
+      )}
+
+      {!isLoading && (
+        <>
+          {children}
+          {style !== "icon" && style !== "icon-rounded" && <span>{title}</span>}
+        </>
+      )}
     </button>
   );
 }

From 70d774a8562773ae47a73adf2ef653bbf0514f1e Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 5 Sep 2024 14:20:34 +0700
Subject: [PATCH 2/8] add missing type button

---
 hosting/src/components/Button.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index de439f69..3f65da8c 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -5,13 +5,14 @@ interface ButtonProps {
   onClick: () => Promise<void> | void;
   style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
+  type?: "button" | "reset" | "submit";
   loading?: boolean;
   disabled?: boolean;
   children?: React.ReactNode;
 }
 
 export function Button(props: ButtonProps) {
-  const {title, onClick, style = "rounded", color = "primary", children, loading, disabled} = props;
+  const {title, onClick, style = "rounded", color = "primary", children, loading, disabled, type} = props;
 
   const [isLoading, setIsLoading] = useState(loading ?? false);
   const [isDisabled, setIsDisabled] = useState(disabled ?? false);
@@ -84,11 +85,11 @@ export function Button(props: ButtonProps) {
   }
 
   return (
-    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading || isDisabled}>
+    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading || isDisabled} type={type}>
       {isLoading && (
         <>
           <svg
-            className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+            className={`animate-spin -ml-1 mr-3 h-5 w-5 ${style === "outline" || style === "outline-rounded" ? "text-white" : "text-" + color}`}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"

From 19af0e51c9c1a6a76c66ceb86f57f3c7bc1b98b1 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 5 Sep 2024 14:51:43 +0700
Subject: [PATCH 3/8] fix loading state button

---
 hosting/src/app/(protected)/settings/page.tsx | 21 +++++++-
 hosting/src/components/Button.tsx             | 48 ++++++++++++-------
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx
index 984d1ac4..285ec9ae 100644
--- a/hosting/src/app/(protected)/settings/page.tsx
+++ b/hosting/src/app/(protected)/settings/page.tsx
@@ -10,8 +10,9 @@ import {useFirebaseStorage} from "@/hooks/useFirebaseStorage";
 import {useTanamUser} from "@/hooks/useTanamUser";
 import {UserNotification} from "@/models/UserNotification";
 import Image from "next/image";
-import {useEffect, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import {AcceptFileType} from "tanam-shared/definitions/AcceptFileType";
+import {Button} from "../../../components/Button";
 
 const defaultImage = "/images/no-image.png";
 
@@ -21,9 +22,12 @@ export default function Settings() {
   const {isLoading: uploadLoading, error: storageError, upload, getFile} = useFirebaseStorage();
   const [notification, setNotification] = useState<UserNotification | null>(null);
 
+  const formUserRef = useRef<HTMLFormElement>(null);
+
   const [readonlyMode, setReadonlyMode] = useState<boolean>(true);
   const [showDropzone, setShowDropzone] = useState<boolean>(false);
   const [showCropImage, setShowCropImage] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const [pathUpload, setPathUpload] = useState<string>();
   const [fileUploadContentType, setFileUploadContentType] = useState<string>();
   const [beforeCropImage, setBeforeCropImage] = useState<string>();
@@ -87,6 +91,14 @@ export default function Settings() {
     setBeforeCropImage(profilePicture);
   }
 
+  async function fetchSaveUserInfo() {
+    console.info("[fetchSaveUserInfo] :: ", formUserRef.current);
+
+    if (!formUserRef.current) return;
+
+    formUserRef.current.requestSubmit();
+  }
+
   /**
    * Handles the submission of the personal information form.
    * Uploads a new profile picture if provided and saves the user's name.
@@ -97,6 +109,7 @@ export default function Settings() {
     event.preventDefault();
 
     setNotification(null);
+    setIsLoading(true);
 
     try {
       if (uploadLoading) return;
@@ -117,6 +130,8 @@ export default function Settings() {
       setNotification(new UserNotification("success", "Update Profile", "Success to update profile"));
     } catch (error) {
       setNotification(new UserNotification("error", "Update Profile", "Failed to update profile"));
+    } finally {
+      setIsLoading(false);
     }
   }
 
@@ -237,7 +252,7 @@ export default function Settings() {
                 </div>
               </div>
 
-              <form onSubmit={onPersonalInfoSubmit}>
+              <form ref={formUserRef} onSubmit={onPersonalInfoSubmit}>
                 <div className="mb-5.5 flex flex-col gap-5.5 sm:flex-row">
                   <div className="w-full">
                     <label className="mb-3 block text-sm font-medium text-black dark:text-white" htmlFor="fullName">
@@ -265,6 +280,8 @@ export default function Settings() {
                   >
                     Cancel
                   </button>
+
+                  <Button title="Save" onClick={fetchSaveUserInfo} loading={isLoading} />
                   <button
                     disabled={true}
                     className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 disabled:opacity-50"
diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index 3f65da8c..c3bc0c98 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -1,8 +1,9 @@
+import clsx from "clsx";
 import React, {useEffect, useState} from "react";
 
 interface ButtonProps {
   title: string;
-  onClick: () => Promise<void> | void;
+  onClick?: () => Promise<void> | void;
   style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
   type?: "button" | "reset" | "submit";
@@ -12,29 +13,41 @@ interface ButtonProps {
 }
 
 export function Button(props: ButtonProps) {
-  const {title, onClick, style = "rounded", color = "primary", children, loading, disabled, type} = props;
+  const {
+    title,
+    onClick,
+    style = "rounded",
+    color = "primary",
+    children,
+    loading = false,
+    disabled = false,
+    type,
+  } = props;
 
-  const [isLoading, setIsLoading] = useState(loading ?? false);
-  const [isDisabled, setIsDisabled] = useState(disabled ?? false);
+  const [isLoading, setIsLoading] = useState(loading);
+  const [isDisabled, setIsDisabled] = useState(disabled);
 
   useEffect(() => {
     return () => pruneState();
   }, []);
 
+  useEffect(() => {
+    setIsLoading(loading);
+
+    return () => pruneState();
+  }, [loading]);
+
+  useEffect(() => {
+    setIsDisabled(disabled);
+
+    return () => pruneState();
+  }, [disabled]);
+
   function pruneState() {
     setIsLoading(false);
     setIsDisabled(false);
   }
 
-  const handleClick = async () => {
-    setIsLoading(true);
-    try {
-      await onClick();
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   let styles = [
     "inline-flex",
     "items-center",
@@ -85,16 +98,19 @@ export function Button(props: ButtonProps) {
   }
 
   return (
-    <button onClick={handleClick} className={styles.join(" ")} disabled={isLoading || isDisabled} type={type}>
+    <button onClick={onClick} className={styles.join(" ")} disabled={isLoading || isDisabled} type={type}>
       {isLoading && (
         <>
           <svg
-            className={`animate-spin -ml-1 mr-3 h-5 w-5 ${style === "outline" || style === "outline-rounded" ? "text-white" : "text-" + color}`}
+            className={clsx(
+              "animate-spin -ml-1 mr-3 h-5 w-5",
+              style === "outline" || style === "outline-rounded" ? `text-${color}` : "text-white",
+            )}
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
           >
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path
               className="opacity-75"
               fill="currentColor"

From 284aa20e936aeaea80e1cdb1fd7ef8666ade1039 Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Thu, 5 Sep 2024 15:31:17 +0700
Subject: [PATCH 4/8] readonly mode in setting page

---
 hosting/src/app/(protected)/settings/page.tsx | 111 +++++++++++-------
 hosting/src/components/Button.tsx             |  10 +-
 2 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/hosting/src/app/(protected)/settings/page.tsx b/hosting/src/app/(protected)/settings/page.tsx
index 285ec9ae..5be5e678 100644
--- a/hosting/src/app/(protected)/settings/page.tsx
+++ b/hosting/src/app/(protected)/settings/page.tsx
@@ -1,4 +1,5 @@
 "use client";
+import {Button} from "@/components/Button";
 import Notification from "@/components/common/Notification";
 import PageHeader from "@/components/common/PageHeader";
 import {CropImage} from "@/components/CropImage";
@@ -10,9 +11,8 @@ import {useFirebaseStorage} from "@/hooks/useFirebaseStorage";
 import {useTanamUser} from "@/hooks/useTanamUser";
 import {UserNotification} from "@/models/UserNotification";
 import Image from "next/image";
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useMemo, useRef, useState} from "react";
 import {AcceptFileType} from "tanam-shared/definitions/AcceptFileType";
-import {Button} from "../../../components/Button";
 
 const defaultImage = "/images/no-image.png";
 
@@ -34,6 +34,10 @@ export default function Settings() {
   const [afterCropImage, setAfterCropImage] = useState<string>();
   const [profilePicture, setProfilePicture] = useState<string>(defaultImage);
 
+  const isDisabled = useMemo(() => {
+    return isLoading || readonlyMode;
+  }, [isLoading, readonlyMode]);
+
   useEffect(() => {
     if (tanamUser) {
       init();
@@ -63,10 +67,16 @@ export default function Settings() {
    * @return {Promise<void>}
    */
   async function resetChanges(): Promise<void> {
+    setNotification(null);
     setReadonlyMode(true);
-    setFileUploadContentType(undefined);
+    setShowDropzone(false);
+    setFileUploadContentType("");
     resetCropImage();
 
+    if (formUserRef.current) {
+      formUserRef.current.reset();
+    }
+
     await fetchProfilePicture();
   }
 
@@ -74,8 +84,8 @@ export default function Settings() {
    * Resets the crop image states.
    */
   function resetCropImage() {
-    setBeforeCropImage(undefined);
-    setAfterCropImage(undefined);
+    setBeforeCropImage("");
+    setAfterCropImage("");
     setShowCropImage(false);
   }
 
@@ -92,8 +102,6 @@ export default function Settings() {
   }
 
   async function fetchSaveUserInfo() {
-    console.info("[fetchSaveUserInfo] :: ", formUserRef.current);
-
     if (!formUserRef.current) return;
 
     formUserRef.current.requestSubmit();
@@ -143,17 +151,21 @@ export default function Settings() {
   const modalActionCropImage = (
     <div className="flex flex-col sm:flex-row justify-end gap-3">
       {/* Start button to close the crop image modal */}
-      <button
-        className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white sm:w-full sm:text-sm"
+      <Button
+        title="Close"
         onClick={resetCropImage}
-      >
-        Close
-      </button>
+        loading={isLoading}
+        disabled={isDisabled}
+        style="outline-rounded"
+        color="black"
+      />
       {/* End button to close the crop image modal */}
 
       {/* Start button to save changes to the profile picture after cropping */}
-      <button
-        className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 sm:w-full sm:text-sm"
+      <Button
+        title="Save"
+        loading={isLoading}
+        disabled={isDisabled}
         onClick={() => {
           if (!afterCropImage) {
             window.alert("No cropped image");
@@ -163,9 +175,7 @@ export default function Settings() {
           setProfilePicture(afterCropImage);
           resetCropImage();
         }}
-      >
-        Save
-      </button>
+      />
       {/* End button to save changes to the profile picture after cropping */}
     </div>
   );
@@ -220,18 +230,26 @@ export default function Settings() {
                     <div>
                       <span className="mb-1.5 text-black dark:text-white">Edit your photo</span>
                       <span className="flex gap-2.5">
-                        <button
-                          className="text-sm hover:text-primary"
+                        <Button
+                          title="Delete"
+                          loading={isLoading}
+                          disabled={isDisabled}
+                          style="plain-text"
+                          className={["text-sm", "!p-0"]}
                           onClick={async () => {
                             await fetchProfilePicture();
                             setBeforeCropImage(undefined);
                           }}
-                        >
-                          Delete
-                        </button>
-                        <button className="text-sm hover:text-primary" onClick={() => setShowDropzone(!showDropzone)}>
-                          Update
-                        </button>
+                        />
+
+                        <Button
+                          title="Update"
+                          loading={isLoading}
+                          disabled={isDisabled}
+                          style="plain-text"
+                          className={["text-sm", "!p-0"]}
+                          onClick={() => setShowDropzone(!showDropzone)}
+                        />
                       </span>
                     </div>
                   </div>
@@ -261,11 +279,12 @@ export default function Settings() {
                     <div className="relative">
                       <span className="absolute left-4 top-3 i-ic-outline-person w-[24px] h-[24px]" />
                       <input
-                        className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary"
+                        className="w-full rounded border border-stroke bg-gray py-3 pl-11.5 pr-4.5 text-black focus:border-primary focus-visible:outline-none dark:border-strokedark dark:bg-meta-4 dark:text-white dark:focus:border-primary disabled:cursor-not-allowed"
                         type="text"
                         name="fullName"
                         id="fullName"
                         placeholder="Your full name"
+                        disabled={isDisabled}
                         defaultValue={tanamUser?.name}
                       />
                     </div>
@@ -273,22 +292,30 @@ export default function Settings() {
                 </div>
 
                 <div className="flex justify-end gap-4.5">
-                  <button
-                    className="flex justify-center rounded border border-stroke px-6 py-2 font-medium text-black hover:shadow-1 dark:border-strokedark dark:text-white"
-                    type="reset"
-                    onClick={resetChanges}
-                  >
-                    Cancel
-                  </button>
-
-                  <Button title="Save" onClick={fetchSaveUserInfo} loading={isLoading} />
-                  <button
-                    disabled={true}
-                    className="flex justify-center rounded bg-primary px-6 py-2 font-medium text-gray hover:bg-opacity-90 disabled:opacity-50"
-                    type="submit"
-                  >
-                    Save
-                  </button>
+                  {readonlyMode && (
+                    <Button
+                      title="Edit"
+                      onClick={() => {
+                        setReadonlyMode(false);
+                      }}
+                      loading={isLoading}
+                    />
+                  )}
+
+                  {!readonlyMode && (
+                    <>
+                      <Button
+                        title="Cancel"
+                        onClick={resetChanges}
+                        loading={isLoading}
+                        disabled={isDisabled}
+                        style="outline-rounded"
+                        color="black"
+                      />
+
+                      <Button title="Save" onClick={fetchSaveUserInfo} loading={isLoading} disabled={isDisabled} />
+                    </>
+                  )}
                 </div>
               </form>
             </div>
diff --git a/hosting/src/components/Button.tsx b/hosting/src/components/Button.tsx
index c3bc0c98..af9004cc 100644
--- a/hosting/src/components/Button.tsx
+++ b/hosting/src/components/Button.tsx
@@ -4,9 +4,10 @@ import React, {useEffect, useState} from "react";
 interface ButtonProps {
   title: string;
   onClick?: () => Promise<void> | void;
-  style?: "normal" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
+  style?: "normal" | "plain-text" | "rounded" | "outline" | "outline-rounded" | "icon" | "icon-rounded";
   color?: "primary" | "meta-3" | "black";
   type?: "button" | "reset" | "submit";
+  className?: string[];
   loading?: boolean;
   disabled?: boolean;
   children?: React.ReactNode;
@@ -22,6 +23,7 @@ export function Button(props: ButtonProps) {
     loading = false,
     disabled = false,
     type,
+    className = [],
   } = props;
 
   const [isLoading, setIsLoading] = useState(loading);
@@ -77,6 +79,10 @@ export function Button(props: ButtonProps) {
   switch (style) {
     case "normal":
       break;
+    case "plain-text":
+      styles = styles.filter((style) => style !== "text-white");
+      styles.push("!bg-transparent", `hover:text-${color}`);
+      break;
     case "rounded":
       styles.push("rounded-md");
       break;
@@ -97,6 +103,8 @@ export function Button(props: ButtonProps) {
       break;
   }
 
+  styles = styles.concat(styles, ...className);
+
   return (
     <button onClick={onClick} className={styles.join(" ")} disabled={isLoading || isDisabled} type={type}>
       {isLoading && (

From 21a4250919c312082e8a6734fdd4f7d321122c0e Mon Sep 17 00:00:00 2001
From: Nurfirliana Muzanella <muzanella11@gmail.com>
Date: Fri, 6 Sep 2024 09:29:35 +0700
Subject: [PATCH 5/8] add env example

---
 hosting/.env.example | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 hosting/.env.example

diff --git a/hosting/.env.example b/hosting/.env.example
new file mode 100644
index 00000000..14e24ee0
--- /dev/null
+++ b/hosting/.env.example
@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=

From a04da35039f15cd6d22128bf6752624841314e66 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Tue, 10 Sep 2024 12:59:30 +0800
Subject: [PATCH 6/8] Updating imports

---
 .../app/(protected)/content/article/page.tsx  | 27 ++++++++++++-------
 .../app/(public)/auth/[authAction]/page.tsx   |  2 +-
 apps/cms/src/app/(public)/layout.tsx          |  4 +--
 apps/cms/src/components/Layouts/CmsLayout.tsx |  6 ++---
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index a2a31b30..f84d2720 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -1,14 +1,21 @@
 "use client";
-import { UserNotification } from "@tanam/domain-frontend";
-import { Button } from "@tanam/ui-components";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import { useAuthentication } from "../../../../hooks/useAuthentication";
-import { ProcessingState, useGenkitArticle } from "../../../../hooks/useGenkitArticle";
-import { useCrudTanamDocument, useTanamDocuments } from "../../../../hooks/useTanamDocuments";
-import { useTanamDocumentType } from "../../../../hooks/useTanamDocumentTypes";
-import { base64ToFile } from "../../../../plugins/fileUpload";
+import {UserNotification} from "@tanam/domain-frontend";
+import {
+  Button,
+  DocumentTypeGenericList,
+  FilePicker,
+  Loader,
+  Modal,
+  Notification,
+  PageHeader,
+} from "@tanam/ui-components";
+import {useRouter} from "next/navigation";
+import {Suspense, useEffect, useState} from "react";
+import {useAuthentication} from "../../../../hooks/useAuthentication";
+import {ProcessingState, useGenkitArticle} from "../../../../hooks/useGenkitArticle";
+import {useCrudTanamDocument, useTanamDocuments} from "../../../../hooks/useTanamDocuments";
+import {useTanamDocumentType} from "../../../../hooks/useTanamDocumentTypes";
+import {base64ToFile} from "../../../../plugins/fileUpload";
 
 // I don't know why this component always errors
 // when built because this component is still detected as a component rendered on the server.
diff --git a/apps/cms/src/app/(public)/auth/[authAction]/page.tsx b/apps/cms/src/app/(public)/auth/[authAction]/page.tsx
index db54c37d..5a83dccb 100644
--- a/apps/cms/src/app/(public)/auth/[authAction]/page.tsx
+++ b/apps/cms/src/app/(public)/auth/[authAction]/page.tsx
@@ -1,8 +1,8 @@
 "use client";
-import "@tanam/cms/assets/scss/layout-authentication.scss";
 import Image from "next/image";
 import {notFound, useParams} from "next/navigation";
 import {useEffect} from "react";
+import "../../../../assets/scss/layout-authentication.scss";
 import {useFirebaseUi} from "../../../../hooks/useFirebaseUi";
 
 export default function AuthPage() {
diff --git a/apps/cms/src/app/(public)/layout.tsx b/apps/cms/src/app/(public)/layout.tsx
index 88bfb6eb..be86801a 100644
--- a/apps/cms/src/app/(public)/layout.tsx
+++ b/apps/cms/src/app/(public)/layout.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import "@tanam/cms/assets/css/satoshi.css";
-import "@tanam/cms/assets/css/style.css";
 import React from "react";
+import "../../assets/css/satoshi.css";
+import "../../assets/css/style.css";
 
 interface PublicLayoutProps {
   children: React.ReactNode;
diff --git a/apps/cms/src/components/Layouts/CmsLayout.tsx b/apps/cms/src/components/Layouts/CmsLayout.tsx
index daeeb1f3..2819b775 100644
--- a/apps/cms/src/components/Layouts/CmsLayout.tsx
+++ b/apps/cms/src/components/Layouts/CmsLayout.tsx
@@ -1,9 +1,9 @@
 "use client";
-import "@tanam/cms/assets/css/satoshi.css";
-import "@tanam/cms/assets/css/style.css";
-import "@tanam/cms/assets/scss/layout-default.scss";
 import "flatpickr/dist/flatpickr.min.css";
 import React, {useState} from "react";
+import "../../assets/css/satoshi.css";
+import "../../assets/css/style.css";
+import "../../assets/scss/layout-default.scss";
 import {useAuthentication} from "../../hooks/useAuthentication";
 import useColorMode from "../../hooks/useColorMode";
 import {Header} from "../Header";

From 8de9d8705fbb6b0e6dd5f8b98c4649bf9b6bc252 Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Tue, 10 Sep 2024 13:01:40 +0800
Subject: [PATCH 7/8] Changing import of VoiceRecorder

---
 apps/cms/src/app/(protected)/content/article/page.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/cms/src/app/(protected)/content/article/page.tsx b/apps/cms/src/app/(protected)/content/article/page.tsx
index f84d2720..e4a4be11 100644
--- a/apps/cms/src/app/(protected)/content/article/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/page.tsx
@@ -8,6 +8,7 @@ import {
   Modal,
   Notification,
   PageHeader,
+  VoiceRecorder,
 } from "@tanam/ui-components";
 import {useRouter} from "next/navigation";
 import {Suspense, useEffect, useState} from "react";
@@ -17,13 +18,6 @@ import {useCrudTanamDocument, useTanamDocuments} from "../../../../hooks/useTana
 import {useTanamDocumentType} from "../../../../hooks/useTanamDocumentTypes";
 import {base64ToFile} from "../../../../plugins/fileUpload";
 
-// I don't know why this component always errors
-// when built because this component is still detected as a component rendered on the server.
-// Even though I've used "use client" inside the component :(
-const VoiceRecorder = dynamic(() => import("@tanam/ui-components";
-  ssr: false,
-});
-
 export default function DocumentTypeDocumentsPage() {
   const router = useRouter();
   const {authUser} = useAuthentication();

From 9044d1b9af2771b8fbdf305425e73f7d2853951c Mon Sep 17 00:00:00 2001
From: Dennis Alund <dennis.alund@gmail.com>
Date: Tue, 10 Sep 2024 13:37:11 +0800
Subject: [PATCH 8/8] Fixing lints and references

---
 apps/cms/next-env.d.ts                        |  6 +--
 .../content/article/[documentId]/page.tsx     | 46 ++++++++-----------
 .../cms/src/app/(protected)/settings/page.tsx |  3 +-
 .../cms/src/components}/Form/Dropzone.tsx     |  6 +--
 .../src/components}/Form/styles/dropzone.scss |  0
 .../DocumentType/DocumentTypeGenericList.tsx  |  6 +--
 libs/ui-components/src/Form/index.tsx         |  1 -
 7 files changed, 30 insertions(+), 38 deletions(-)
 rename {libs/ui-components/src => apps/cms/src/components}/Form/Dropzone.tsx (95%)
 rename {libs/ui-components/src => apps/cms/src/components}/Form/styles/dropzone.scss (100%)

diff --git a/apps/cms/next-env.d.ts b/apps/cms/next-env.d.ts
index 5636f3f6..725dd6f2 100644
--- a/apps/cms/next-env.d.ts
+++ b/apps/cms/next-env.d.ts
@@ -1,6 +1,6 @@
-// / <reference types="next" />
-// / <reference types="next/image-types/global" />
-// / <reference types="next/navigation-types/compat/navigation" />
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
index bf019683..a584ba97 100644
--- a/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
+++ b/apps/cms/src/app/(protected)/content/article/[documentId]/page.tsx
@@ -1,15 +1,9 @@
 "use client";
-import { UserNotification } from "@tanam/domain-frontend";
-import { Button, Input, Loader, Notification, PageHeader } from "@tanam/ui-components";
-import dynamic from "next/dynamic";
-import { useParams, useRouter } from "next/navigation";
-import { Suspense, useEffect, useState } from "react";
-import { useCrudTanamDocument, useTanamDocument } from "../../../../../hooks/useTanamDocuments";
-
-// TiptapEditor is also detected as ssr, even though it uses "use client" :(
-const TiptapEditor = dynamic(() => import("@tanam/ui-components";
-  ssr: false,
-});
+import {UserNotification} from "@tanam/domain-frontend";
+import {Button, Input, Loader, Notification, PageHeader, TiptapEditor} from "@tanam/ui-components";
+import {useParams, useRouter} from "next/navigation";
+import {Suspense, useEffect, useState} from "react";
+import {useCrudTanamDocument, useTanamDocument} from "../../../../../hooks/useTanamDocuments";
 
 export default function DocumentDetailsPage() {
   const router = useRouter();
@@ -22,10 +16,11 @@ export default function DocumentDetailsPage() {
   const [updateTitleShown, setUpdateTitleShown] = useState<boolean>(false);
   const [notification, setNotification] = useState<UserNotification | null>(null);
 
-  if (!!document?.documentType && document?.documentType !== "article") {
-    router.push(`/content/${document?.documentType}/${document?.id}`);
-    return <Loader />;
-  }
+  useEffect(() => {
+    if (!!document?.documentType && document?.documentType !== "article") {
+      router.push(`/content/${document?.documentType}/${document?.id}`);
+    }
+  }, [document, router]);
 
   useEffect(() => {
     setNotification(documentError || writeError);
@@ -33,9 +28,18 @@ export default function DocumentDetailsPage() {
 
   useEffect(() => {
     if (updateTitleShown) return;
+    async function onDocumentTitleChange(title: string) {
+      console.log("[onDocumentTitleChange]", title);
+      if (!document) {
+        return;
+      }
+
+      document.data.title = title;
+      await update(document);
+    }
 
     onDocumentTitleChange(title);
-  }, [updateTitleShown]);
+  }, [document, title, update, updateTitleShown]);
 
   useEffect(() => {
     if (document) {
@@ -45,16 +49,6 @@ export default function DocumentDetailsPage() {
     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) {
diff --git a/apps/cms/src/app/(protected)/settings/page.tsx b/apps/cms/src/app/(protected)/settings/page.tsx
index 1f20b298..dfaeee2d 100644
--- a/apps/cms/src/app/(protected)/settings/page.tsx
+++ b/apps/cms/src/app/(protected)/settings/page.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import {AcceptFileType, UserNotification} from "@tanam/domain-frontend";
-import {Button, CropImage, Dropzone, Modal, Notification, PageHeader} from "@tanam/ui-components";
+import {Button, CropImage, Modal, Notification, PageHeader} from "@tanam/ui-components";
 import Image from "next/image";
 import {useEffect, useMemo, useRef, useState} from "react";
 import DarkModeSwitcher from "../../../components/DarkModeSwitcher";
+import {Dropzone} from "../../../components/Form/Dropzone";
 import {useAuthentication} from "../../../hooks/useAuthentication";
 import {useFirebaseStorage} from "../../../hooks/useFirebaseStorage";
 import {useTanamUser} from "../../../hooks/useTanamUser";
diff --git a/libs/ui-components/src/Form/Dropzone.tsx b/apps/cms/src/components/Form/Dropzone.tsx
similarity index 95%
rename from libs/ui-components/src/Form/Dropzone.tsx
rename to apps/cms/src/components/Form/Dropzone.tsx
index 32fc05a4..f84ee5e8 100644
--- a/libs/ui-components/src/Form/Dropzone.tsx
+++ b/apps/cms/src/components/Form/Dropzone.tsx
@@ -1,7 +1,7 @@
 "use client";
-import "@tanam/cms/components/Form/styles/dropzone.scss";
-import {getAcceptDescription, isFileAccepted} from "@tanam/cms/utils/fileUpload";
-import {AcceptFileType} from "@tanam/domain-shared";
+import "./styles/dropzone.scss";
+import {getAcceptDescription, isFileAccepted} from "../../utils/fileUpload";
+import {AcceptFileType} from "@tanam/domain-frontend";
 import React, {useEffect, useRef, useState} from "react";
 
 export interface DropzoneProps {
diff --git a/libs/ui-components/src/Form/styles/dropzone.scss b/apps/cms/src/components/Form/styles/dropzone.scss
similarity index 100%
rename from libs/ui-components/src/Form/styles/dropzone.scss
rename to apps/cms/src/components/Form/styles/dropzone.scss
diff --git a/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx b/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
index 8c6fd7c0..3ba978d8 100644
--- a/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
+++ b/libs/ui-components/src/DocumentType/DocumentTypeGenericList.tsx
@@ -1,8 +1,6 @@
-import {Table, TableRowLabel} from "@tanam/cms/components/Table";
-import {TanamDocumentClient} from "@tanam/domain-frontend/TanamDocumentClient";
-import {TanamDocumentTypeClient} from "@tanam/domain-frontend/TanamDocumentTypeClient";
-import {TanamPublishStatus} from "@tanam/domain-shared";
+import {TanamDocumentClient, TanamDocumentTypeClient, TanamPublishStatus} from "@tanam/domain-frontend";
 import Link from "next/link";
+import {Table, TableRowLabel} from "../Table";
 
 interface TableOverviewGenericProps {
   documentType: TanamDocumentTypeClient;
diff --git a/libs/ui-components/src/Form/index.tsx b/libs/ui-components/src/Form/index.tsx
index 60d81c9b..897dd50d 100644
--- a/libs/ui-components/src/Form/index.tsx
+++ b/libs/ui-components/src/Form/index.tsx
@@ -1,7 +1,6 @@
 export {Checkbox} from "./Checkbox";
 export {DatePicker} from "./DatePicker";
 export {Dropdown} from "./Dropdown";
-export {Dropzone} from "./Dropzone";
 export {FileUpload} from "./FileUpload";
 export {FormGroup} from "./FormGroup";
 export {Input} from "./Input";