Merge pull request #193 from FalkorDB/handle-errors

fix #192 handle server errors correctly
FalkorDB · May 1, 2024 · 9a5e036 · 9a5e036
2 parents 52f3b61 + 1afc3c0
commit 9a5e036
Show file tree

Hide file tree

Showing 9 changed files with 746 additions and 771 deletions.
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
@@ -1,12 +1,11 @@
 import CytoscapeComponent from "react-cytoscapejs";
-import { toast } from "@/components/ui/use-toast";
 import cytoscape, { ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape";
 import { useRef, useState, useImperativeHandle, forwardRef } from "react";
-import { signOut } from "next-auth/react";
 import fcose from 'cytoscape-fcose';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ImperativePanelHandle } from "react-resizable-panels";
 import { ChevronLeft, ChevronRight } from "lucide-react"
+import { securedFetch } from "@/lib/utils";
 import Labels from "./labels";
 import Toolbar from "./toolbar";
 import { Category, Graph } from "./model";
@@ -127,27 +126,22 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
     // Send the user query to the server to expand a node
     async function onFetchNode(node: NodeDataDefinition) {
-        const result = await fetch(`/api/graph/${graph.Id}/${node.id}`, {
+        const result = await securedFetch(`/api/graph/${graph.Id}/${node.id}`, {
             method: 'GET',
             headers: {
                 'Content-Type': 'application/json'
             }
-        })
-
-        if (result.status >= 300) {
-            toast({
-                title: "Error",
-                description: result.text(),
-            })
-            if (result.status >= 400 && result.status < 500) {
-                signOut({ callbackUrl: '/login' })
-            }
-            return [] as ElementDefinition[]
+        });
+
+        if (result.ok) {
+            const json = await result.json()
+            const elements = graph.extend(json.result)
+            return elements
+
         }
+        return [] as ElementDefinition[]
 
-        const json = await result.json()
-        const elements = graph.extend(json.result)
-        return elements
+
     }
 
     const onCategoryClick = (category: Category) => {

diff --git a/app/graph/mainQuery.tsx b/app/graph/mainQuery.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/lib/utils";
+import { cn, securedFetch } from "@/lib/utils";
 import { FormEvent, useEffect, useRef, useState } from "react";
 import { Copy, Edit, Maximize, Menu, Play, Trash2 } from "lucide-react";
 import Editor from "@monaco-editor/react";
@@ -64,7 +64,7 @@ export default function MainQuery({ onSubmit, onDelete, className = "" }: {
         setGraphName('')
         onDelete(name)
         setGraphs((prevGraphs: string[]) => [...prevGraphs.filter(graph => graph !== name)]);
-        fetch(`/api/graph/${encodeURIComponent(name)}`, {
+        securedFetch(`/api/graph/${encodeURIComponent(name)}`, {
             method: 'DELETE',
         }).then(() =>
             toast({
@@ -82,49 +82,39 @@ export default function MainQuery({ onSubmit, onDelete, className = "" }: {
     const handelCopy = async () => {
         const newName = inputCopyRef.current?.value
         if (!newName) return
-        const response = await fetch(`/api/graph/${encodeURIComponent(graphName)}?newName=${newName}`, {
+        const response = await securedFetch(`/api/graph/${encodeURIComponent(graphName)}?newName=${newName}`, {
             method: 'POST',
         })
-        const json = await response.json()
-        if (response.status >= 300) {
-            toast({
-                title: "Error",
-                description: json.message,
-            })
-            return
+        if (response.ok) {
+            setGraphs(prev => [...prev, newName])
         }
-        setGraphs(prev => [...prev, newName])
     }
 
-    const handelRename = async () => {
+    const handleRename = async () => {
         const newName = inputRenameRef.current?.value
         if (!newName) return
-        const response = await fetch(`/api/graph/${encodeURIComponent(graphName)}?newName=${newName}`, {
+        const response = await securedFetch(`/api/graph/${encodeURIComponent(graphName)}?newName=${newName}`, {
             method: 'PATCH',
         })
-        const json = await response.json()
-        if (response.status >= 300) {
+        if(response.ok){
+            setGraphName(newName)
+            setGraphs(prev => [...prev.filter(name => name !== graphName), newName])
             toast({
-                title: "Error",
-                description: json.message,
+                title: "Rename",
+                description: `Graph ${graphName} Rename to ${newName}`,
             })
-            return
-        }
-        setGraphName(newName)
-        setGraphs(prev => [...prev.filter(name => name !== graphName), newName])
-        toast({
-            title: "Rename",
-            description: `Graph ${graphName} Rename to ${newName}`,
-        })
+        }        
     }
 
-    const addOption = (newGraph: string) => {
+    const addOption = async (newGraph: string) => {
         const q = "return 1"
-        fetch(`api/graph?graph=${encodeURIComponent(newGraph)}&query=${encodeURIComponent(q)}`, {
+        const response = await securedFetch(`api/graph?graph=${encodeURIComponent(newGraph)}&query=${encodeURIComponent(q)}`, {
             method: "GET",
         })
-        setGraphs((prevGraphs: string[]) => [...prevGraphs, newGraph]);
-        setGraphName(newGraph)
+        if(response.ok){
+            setGraphs((prevGraphs: string[]) => [...prevGraphs, newGraph]);
+            setGraphName(newGraph)
+        }
     }
 
     return (
@@ -232,7 +222,7 @@ export default function MainQuery({ onSubmit, onDelete, className = "" }: {
                                 </DialogHeader>
                                 <DialogFooter>
                                     <DialogClose asChild>
-                                        <Button onClick={() => handelRename()}>
+                                        <Button onClick={() => handleRename()}>
                                             <span>Rename</span>
                                         </Button>
                                     </DialogClose>

diff --git a/app/graph/page.tsx b/app/graph/page.tsx
@@ -2,9 +2,9 @@
 
 import { toast } from "@/components/ui/use-toast";
 import React, { useState } from "react";
-import { signOut } from "next-auth/react";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Maximize2, X } from "lucide-react";
+import { securedFetch } from "@/lib/utils";
 import MainQuery from "./mainQuery";
 import GraphSection from "./graphSection";
 import { GraphState } from "./sectionQuery";
@@ -41,25 +41,17 @@ export default function Page() {
 
         const q = defaultQuery(query)
 
-        const result = await fetch(`/api/graph?graph=${prepareArg(graphName)}&query=${prepareArg(q)}`, {
+        const result = await securedFetch(`/api/graph?graph=${prepareArg(graphName)}&query=${prepareArg(q)}`, {
             method: 'GET',
             headers: {
                 'Content-Type': 'application/json'
             }
         })
-        if (result.status >= 300) {
-            toast({
-                title: "Error",
-                description: result.text(),
-            })
-            if (result.status >= 400 && result.status < 500) {
-                signOut({ callbackUrl: '/login' })
-            }
-            return null
+        if (result.ok) {
+            const json = await result.json()
+            return json.result
         }
-
-        const json = await result.json()
-        return json.result
+        return null
     }
 
     const runMainQuery = async (event: React.FormEvent<HTMLElement>, graphName: string, query: string) => {

diff --git a/app/loginVerification.tsx b/app/loginVerification.tsx
@@ -0,0 +1,20 @@
+"use client"
+
+import { signOut, useSession } from "next-auth/react"
+import { usePathname } from "next/navigation"
+import { useEffect } from "react"
+
+export default function LoginVerification({ children }: { children: React.ReactNode }) {
+
+    const { status } = useSession()
+    const url = usePathname()
+
+    useEffect(() => {
+        if (url === "/login") return
+        if (status === "unauthenticated") {
+            signOut({ callbackUrl: "/login" })
+        }
+    }, [status, url])
+
+    return children
+} 
diff --git a/app/monitor/page.tsx b/app/monitor/page.tsx
@@ -2,19 +2,20 @@
 
 import useSWR from 'swr'
 import React, { useState } from 'react'
+import { securedFetch } from '@/lib/utils'
 import MonitorView from './MonitorView'
 
 export default function Page() {
 
     const [time, setTime] = useState<Date | null>(null)
 
-    const fetcher = (url: string) => fetch(url, {
+    const fetcher = (url: string) => securedFetch(url, {
         method: 'GET',
         headers: {
             'Content-Type': 'application/json'
         }
     }).then((result) => {
-        if (result.status < 300) {
+        if (result.ok) {
             setTime(new Date())
             return result.json()
         }

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -8,6 +8,7 @@ import { ImperativePanelHandle } from "react-resizable-panels";
 import Navbar from "@/components/custom/navbar";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import useScreenSize from "./useScreenSize";
+import LoginVerification from "./loginVerification";
 
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
 
@@ -56,7 +57,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
             </button>
             <Navbar collapsed={isCollapsed} />
           </ResizablePanel>
-          <ResizablePanel defaultSize={100 - panelSize}>{children}</ResizablePanel>
+          <ResizablePanel defaultSize={100 - panelSize}><LoginVerification>{children}</LoginVerification></ResizablePanel>
         </ResizablePanelGroup>
       </ThemeProvider>
     </SessionProvider>

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -1,7 +1,33 @@
+import { toast } from "@/components/ui/use-toast"
 import { type ClassValue, clsx } from "clsx"
+import { signOut } from "next-auth/react"
 import { twMerge } from "tailwind-merge"
 
 // eslint-disable-next-line import/prefer-default-export
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function securedFetch(  input: string | URL | globalThis.Request,  init?: RequestInit): Promise<Response> {    
+  return fetch(input, init).then((response) => {
+
+    const { status } = response;
+
+    if (status >= 300) {     
+      response.text().then((message) => {
+        toast({
+          title: "Error",
+          description: message,
+        })
+      }).then(() => {
+        if (status === 401 || status >= 500) {
+          signOut({ callbackUrl: '/login' })
+        }
+      })
+    }
+
+    return response
+  })
+}
+
+