Merge pull request #60 from FalkorDB/lint

fix #59 add lint checks and clean clean errors

.eslintrc.json

@@ -1,3 +1,33 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  },
+  "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["components/ui/"],
+  "overrides": [
+    {
+      "files": [
+        "*.ts",
+        "*.tsx",
+        "*.js",
+        "*.jsx"
+      ],
+      "parserOptions": {
+        "project": [
+          "./tsconfig.json"
+        ]
+      }
+    }
+  ]
+}

app/api/auth/[...nextauth]/options.ts

@@ -16,19 +16,20 @@ const authOptions: AuthOptions = {
                 username: { label: "Username", type: "text" },
                 password: { label: "Password", type: "password" }
             },
-            async authorize(credentials, req) {
+            async authorize(credentials) {
 
                 if (!credentials) {
                     return null
                 }
 
                 try {
-                    const id = userId++;
+                    const id = userId;
+                    userId += 1;
 
                     const client = await createClient({
                         socket: {
                             host: credentials.host ?? "localhost",
-                            port: credentials.port ? parseInt(credentials.port) : 6379,
+                            port: credentials.port ? parseInt(credentials.port, 10) : 6379,
                             reconnectStrategy: false
                         },
                         password: credentials.password ?? undefined,
@@ -41,7 +42,7 @@ const authOptions: AuthOptions = {
                     await client.on('error', err => {
                         // Close coonection on error and remove from connections map
                         console.error('FalkorDB Client Error', err)
-                        let connection = connections.get(id)
+                        const connection = connections.get(id)
                         if (connection) {
                             connections.delete(id)
                             connection.disconnect()
@@ -53,10 +54,10 @@ const authOptions: AuthOptions = {
 
                     connections.set(id, client as RedisClientType)
 
-                    let res: any = {
-                        id: id,
+                    const res = {
+                        id,
                         host: credentials.host,
-                        port: credentials.port,
+                        port: credentials.port ? parseInt(credentials.port, 10) : 6379,
                         password: credentials.password,
                         username: credentials.username,
                     }
@@ -72,23 +73,30 @@ const authOptions: AuthOptions = {
     callbacks: {
         async jwt({ token, user }) {
             if (user) {
-                token.id = user.id;
-                token.host = user.host;
-                token.port = user.port;
-                token.username = user.username;
-                token.password = user.password;
+                return {
+                    ...token,
+                    id: user.id,
+                    host: user.host,
+                    port: user.port,
+                    username: user.username,
+                    password: user.password
+                };
             }
-
             return token;
         },
-        async session({ session, token, user }) {
+        async session({ session, token }) {
             if (session.user) {
-                session.user.id = token.id as number;
-                session.user.host = token.host as string;
-                session.user.port = parseInt(token.port as string);
-                session.user.username = token.username as string;
-                session.user.password = token.password as string;
-
+                return {
+                    ...session,
+                    user: {
+                        ...session.user,
+                        id: token.id as number,
+                        host: token.host as string,
+                        port: parseInt(token.port as string, 10),
+                        username: token.username as string,
+                        password: token.password as string,
+                    },
+                };
             }
             return session;
         }

app/api/graph/[graph]/[node]/route.ts

@@ -3,6 +3,7 @@ import { Graph } from 'falkordb';
 import { getServerSession } from "next-auth/next";
 import authOptions, { connections } from "../../../auth/[...nextauth]/options";
 
+// eslint-disable-next-line import/prefer-default-export
 export async function GET(request: NextRequest, { params }: { params: { graph: string, node: string } }) {
 
     const session = await getServerSession(authOptions)
@@ -11,12 +12,12 @@ export async function GET(request: NextRequest, { params }: { params: { graph: s
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    let client = connections.get(id)
+    const client = connections.get(id)
     if (!client) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    const nodeId = parseInt(params.node);
+    const nodeId = parseInt(params.node, 10);
     const graphId = params.graph;
 
     const graph = new Graph(client, graphId);
@@ -27,9 +28,9 @@ export async function GET(request: NextRequest, { params }: { params: { graph: s
                       RETURN e, n`;
 
     try {
-        let result: any = await graph.query(query, { params: { nodeId: nodeId } });
-        return NextResponse.json({ result: result }, { status: 200 })
-    } catch (err: any) {
-        return NextResponse.json({ message: err.message }, { status: 400 })
+        const result = await graph.query(query, { params: { nodeId } });
+        return NextResponse.json({ result }, { status: 200 })
+    } catch (err: unknown) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
 }

app/api/graph/route.ts

@@ -3,6 +3,7 @@ import { Graph } from 'falkordb';
 import { getServerSession } from "next-auth/next";
 import authOptions, { connections } from "../auth/[...nextauth]/options";
 
+// eslint-disable-next-line import/prefer-default-export
 export async function GET(request: NextRequest) {
 
     const session = await getServerSession(authOptions)
@@ -11,7 +12,7 @@ export async function GET(request: NextRequest) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    let client = connections.get(id)
+    const client = connections.get(id)
     if(!client) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
@@ -24,14 +25,12 @@ export async function GET(request: NextRequest) {
                 return NextResponse.json({ message: "Missing query parameter 'q'" }, { status: 400 })
             }
             const graph = new Graph(client, graphID);
-            let result = await graph.query(query)
-            return NextResponse.json({ result: result }, { status: 200 })
-        } else {
-
-            let result = await client.graph.list()
-            return NextResponse.json({ result: { graphs: result } }, { status: 200 })
+            const result = await graph.query(query)
+            return NextResponse.json({ result }, { status: 200 })
         }
-    } catch (err: any) {
-        return NextResponse.json({ message: err.message }, { status: 400 })
+        const result = await client.graph.list()
+        return NextResponse.json({ result: { graphs: result } }, { status: 200 })
+    } catch (err: unknown) {
+        return NextResponse.json({ message: (err as Error).message }, { status: 400 })
     }
 }

app/details/DatabaseLine.tsx

@@ -3,45 +3,42 @@ import { useToast } from "@/components/ui/use-toast"
 import { Copy, Eye, EyeOff } from "lucide-react";
 import { useState } from "react";
 
-export function DatabaseLine(props: { label: string, value: string, masked?: string }) {
+export default function DatabaseLine({ label, value, masked }: { label: string, value: string, masked?: string }) {
 
     const { toast } = useToast()
     const [showPassword, setShowPassword] = useState(false);
 
-    function copyToClipboard(value: string) {
-        navigator.clipboard.writeText(value)
-        .then(() => {
-            toast({
-                variant: "default",
-                title: "Copied to clipboard",
-                description: "The value has been copied to your clipboard.",
+    function copyToClipboard(copied: string) {
+        navigator.clipboard.writeText(copied)
+            .then(() => {
+                toast({
+                    variant: "default",
+                    title: "Copied to clipboard",
+                    description: "The value has been copied to your clipboard.",
+                })
             })
-        })
-        .catch(() => {
-            toast({
-                variant: "destructive",
-                title: "Failed to copy to clipboard",
-                description: "The value could not be copied to your clipboard.",
+            .catch(() => {
+                toast({
+                    variant: "destructive",
+                    title: "Failed to copy to clipboard",
+                    description: "The value could not be copied to your clipboard.",
+                })
             })
-        })
-    }
-
-    function showMasked() {
-        setShowPassword(!showPassword)
     }
 
     return (
         <div className="flex flex-row space-x-2">
-            <div className="py-2">{props.label}:</div>
+            <div className="py-2">{label}:</div>
             {
-                props.value.length > 0 &&
+                value.length > 0 &&
                 <>
-                    <Button className="space-x-2 bg-transparent text-gray-600 px-2 hover:text-slate-50 dark:text-gray-50 dark:hover:text-gray-600" onClick={() => copyToClipboard(props.value)}>
-                        <p className="max-w-[10rem] md:max-w-2xl truncate">{(showPassword || !props.masked) ? props.value : props.masked}</p>
+                    <Button className="space-x-2 bg-transparent text-gray-600 px-2 hover:text-slate-50 dark:text-gray-50 dark:hover:text-gray-600" onClick={() => copyToClipboard(value)}>
+                        <p className="max-w-[10rem] md:max-w-2xl truncate">{(showPassword || !masked) ? value : masked}</p>
                         <Copy className="h-3/4" />
                     </Button>
-                    {props.masked &&
-                        <Button className="bg-transparent text-gray-600 px-2 hover:text-slate-50 dark:text-gray-50 dark:hover:text-gray-600" onClick={showMasked}>
+                    {masked &&
+                        <Button className="bg-transparent text-gray-600 px-2 hover:text-slate-50 dark:text-gray-50 dark:hover:text-gray-600"
+                            onClick={() => setShowPassword(!showPassword)}>
                             {showPassword ? <EyeOff className="m-0 p-0 h-3/4" /> : <Eye className="m-0 p-0 h-3/4" />}
                         </Button>
                     }
@@ -50,3 +47,8 @@ export function DatabaseLine(props: { label: string, value: string, masked?: str
         </div>
     );
 }
+
+
+DatabaseLine.defaultProps = {
+    masked: ''
+}

app/details/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import { useSession } from "next-auth/react";
-import { DatabaseLine } from "./DatabaseLine";
+import DatabaseLine from "./DatabaseLine";
 
 // Shows the details of a current database connection 
 export default function Page() {
 
-    const { data: session, status } = useSession()
+    const { data: session } = useSession()
 
     return (
         <div className="w-full h-full p-2 flex flex-col space-y-4">

app/graph/labels.tsx

@@ -1,32 +1,32 @@
-import { Category, getCategoryColorName } from "./model";
 import { cn } from "@/lib/utils";
 import { Minus, Plus } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { Category, getCategoryColorName } from "./model";
 
-export function Labels(params: { categories: Category[], className?: string, onClick: (category: Category) => void }) {
+export default function Labels({ categories, className = "", onClick }: { categories: Category[], className: string, onClick: (category: Category) => void }) {
 
     // fake stae to force reload
     const [reload, setReload] = useState(false)
 
     return (
-        <div className={cn("flex flex-row gap-x-1", params.className)} >
-            {params.categories.map((category) => {
-                return (
+        <div className={cn("flex flex-row gap-x-1", className)} >
+            {
+                categories.map((category) => (
                     <div className="flex flex-row gap-x-1 items-center" key={category.index}>
                         <Button
                             className={cn(`bg-${getCategoryColorName(category.index)}-500 ${category.show ? "" : "opacity-50"}`, "rounded-lg border border-gray-300 p-2 opac")}
                             onClick={() => {
-                                params.onClick(category)
+                                onClick(category)
                                 setReload(!reload)
                             }}
                         >
                             {category.show ? <Minus /> : <Plus />}
                         </Button>
                         <p>{category.name}</p>
                     </div>
-                )
-            })}
+                ))
+            }
         </div>
     )
 }