Add last saved timestamp to status bar

src/containers/Editor/BottomBar.tsx

@@ -7,6 +7,7 @@ import toast from "react-hot-toast";
 import {
   AiOutlineCloudSync,
   AiOutlineCloudUpload,
+  AiOutlineClockCircle,
   AiOutlineLink,
   AiOutlineLock,
   AiOutlineUnlock,
@@ -106,6 +107,8 @@ export const BottomBar = () => {
   const [isPrivate, setIsPrivate] = React.useState(false);
   const [isUpdating, setIsUpdating] = React.useState(false);
 
+  const [lastSaved, setLastSaved] = React.useState<string | null>(null);
+
   const toggleEditor = () => toggleFullscreen(!fullscreen);
 
   React.useEffect(() => {
@@ -128,13 +131,19 @@ export const BottomBar = () => {
           id: query?.json,
           contents: getContents(),
           format: getFormat(),
+          lastSaved: new Date().toISOString(),
         });
 
         if (error) throw error;
-        if (data) replace({ query: { json: data } });
-
-        toast.success("Document saved to cloud", { id: "fileSave" });
-        setHasChanges(false);
+        if (data) {
+          await documentSvc.update(query.json as string, {
+            lastSaved: new Date().toISOString(),
+          });
+          setLastSaved(new Date().toISOString());
+          replace({ query: { json: query.json } });
+          toast.success("Document saved to cloud", { id: "fileSave" });
+          setHasChanges(false);
+        }
       } catch (error: any) {
         toast.error(error.message, { id: "fileSave" });
       } finally {
@@ -165,6 +174,9 @@ export const BottomBar = () => {
       if (error) return toast.error(error.message);
 
       if (updatedJsonData[0]) {
+        await documentSvc.update(query.json as string, {
+          lastSaved: new Date().toISOString(),
+        });
         setIsPrivate(updatedJsonData[0].private);
         toast.success(`Document set to ${isPrivate ? "public" : "private"}.`);
       } else throw error;
@@ -175,6 +187,21 @@ export const BottomBar = () => {
     }
   };
 
+  function formatDate(isoString) {
+    const date = new Date(isoString);
+    const options: Intl.DateTimeFormatOptions = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: true,
+    };
+    return `Last saved: ${date.toLocaleDateString("en-US", options)}`;
+  }
+
   return (
     <StyledBottomBar>
       {data?.name && (
@@ -225,6 +252,12 @@ export const BottomBar = () => {
             {hasChanges || !user ? (query?.json ? "Unsaved Changes" : "Save to Cloud") : "Saved"}
           </StyledBottomBarItem>
         )}
+        {lastSaved && (
+          <StyledBottomBarItem disabled>
+            <AiOutlineClockCircle />
+            {formatDate(lastSaved)}
+          </StyledBottomBarItem>
+        )}
         {data?.owner_email === user?.email && (
           <StyledBottomBarItem onClick={setPrivate} disabled={isUpdating}>
             {isPrivate ? <AiOutlineLock /> : <AiOutlineUnlock />}

src/services/document.service.ts

@@ -9,15 +9,22 @@ type CloudSave = {
   id?: string;
   contents: string;
   format: FileFormat;
+  lastSaved: string;
 };
 
 export const documentSvc = {
   upsert: async (args: CloudSave): Promise<PostgrestSingleResponse<string>> => {
-    const { id: p_id = "", contents: p_content, format: p_format = FileFormat.JSON } = args;
+    const {
+      id: p_id = "",
+      contents: p_content,
+      format: p_format = FileFormat.JSON,
+      lastSaved: p_last_saved,
+    } = args;
     return await supabase.rpc("upsert_document", {
       p_content,
       p_format,
       p_id,
+      p_last_saved,
     });
   },
   getById: async (doc_id: string): Promise<PostgrestSingleResponse<File[]>> => {