From cc95fd99011d9642500d73b13602c6d47e5bfbd0 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Sun, 17 Dec 2023 15:23:07 -0700
Subject: [PATCH] Update recent events correctly

---
 web/src/pages/ConfigEditor.tsx | 18 +++++++++++++-----
 web/src/pages/Dashboard.tsx    |  9 +++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 59c7bb016..9ae1cee82 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -21,8 +21,9 @@ function ConfigEditor() {
   const [success, setSuccess] = useState<string | undefined>();
   const [error, setError] = useState<string | undefined>();
 
-  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>();
-  const modelRef = useRef<monaco.editor.IEditorModel | null>();
+  const editorRef = useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
+  const modelRef = useRef<monaco.editor.IEditorModel | null>(null);
+  const configRef = useRef<HTMLDivElement | null>(null);
 
   const onHandleSaveConfig = useCallback(
     async (save_option: SaveOptions) => {
@@ -72,6 +73,7 @@ function ConfigEditor() {
 
     if (modelRef.current != null) {
       // we don't need to recreate the editor if it already exists
+      editorRef.current?.layout();
       return;
     }
 
@@ -97,9 +99,9 @@ function ConfigEditor() {
       ],
     });
 
-    const container = document.getElementById("container");
+    const container = configRef.current;
 
-    if (container != undefined) {
+    if (container != null) {
       editorRef.current = monaco.editor.create(container, {
         language: "yaml",
         model: modelRef.current,
@@ -107,6 +109,12 @@ function ConfigEditor() {
         theme: theme == "dark" ? "vs-dark" : "vs-light",
       });
     }
+
+    return () => {
+      configRef.current = null;
+      editorRef.current = null;
+      modelRef.current = null;
+    };
   });
 
   if (!config) {
@@ -149,7 +157,7 @@ function ConfigEditor() {
         </div>
       )}
 
-      <div id="container" className="h-full mt-2" />
+      <div ref={configRef} className="h-full mt-2" />
     </div>
   );
 }
diff --git a/web/src/pages/Dashboard.tsx b/web/src/pages/Dashboard.tsx
index c1a9a76ce..2bc2d8696 100644
--- a/web/src/pages/Dashboard.tsx
+++ b/web/src/pages/Dashboard.tsx
@@ -23,12 +23,9 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 export function Dashboard() {
   const { data: config } = useSWR<FrigateConfig>("config");
-
-  const recentTimestamp = useMemo(() => {
-    const now = new Date();
-    now.setMinutes(now.getMinutes() - 30);
-    return now.getTime() / 1000;
-  }, []);
+  const now = new Date();
+  now.setMinutes(now.getMinutes() - 30, 0, 0);
+  const recentTimestamp = now.getTime() / 1000;
   const { data: events, mutate: updateEvents } = useSWR<FrigateEvent[]>([
     "events",
     { limit: 10, after: recentTimestamp },