From 7fed6c9b73072f4fba183747bc1377fb0e12b6ae Mon Sep 17 00:00:00 2001
From: vwh <vwhe@proton.me>
Date: Sat, 7 Sep 2024 13:21:54 +0300
Subject: [PATCH] chore: linting the code

---
 src/components/editor/editor.tsx   |  4 ++--
 src/components/editor/terminal.tsx | 23 +++++++++++++----------
 src/components/settings.tsx        |  2 +-
 src/components/ui/ripple.tsx       |  2 +-
 src/store/useStore.ts              |  2 +-
 5 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
index 21330b0..a1ff8b6 100644
--- a/src/components/editor/editor.tsx
+++ b/src/components/editor/editor.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
-
 import { useStore } from "@/store/useStore";
-import MonacoEditor, { OnMount } from "@monaco-editor/react";
+
+import MonacoEditor, { type OnMount } from "@monaco-editor/react";
 import Loader from "@/components/loader";
 
 export default function Editor() {
diff --git a/src/components/editor/terminal.tsx b/src/components/editor/terminal.tsx
index 3f858a2..ac1744c 100644
--- a/src/components/editor/terminal.tsx
+++ b/src/components/editor/terminal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import { useStore } from "@/store/useStore";
 import Loader from "@/components/loader";
 
@@ -39,15 +39,18 @@ export default function Terminal() {
     setError(null);
   }, [clearOutput, setError]);
 
-  const commandHandlers: CommandHandlers = {
-    "pip install": async (input: string) => await pipInstall(input),
-    "echo ": async (input: string) =>
-      await setOutput(input.split(" ").slice(1).join(" ")),
-    pwd: getCwd,
-    cwd: getCwd,
-    clear: clearTerminal,
-    cls: clearTerminal
-  };
+  const commandHandlers: CommandHandlers = useMemo(
+    () => ({
+      "pip install": async (input: string) => await pipInstall(input),
+      "echo ": async (input: string) =>
+        await setOutput(input.split(" ").slice(1).join(" ")),
+      pwd: getCwd,
+      cwd: getCwd,
+      clear: clearTerminal,
+      cls: clearTerminal
+    }),
+    [pipInstall, setOutput, getCwd, clearTerminal]
+  );
 
   const handleReplSubmit = useCallback(
     async (e: React.FormEvent<HTMLFormElement>) => {
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index bd6326a..a535c29 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { useStore } from "@/store/useStore";
 
 import { Input } from "./ui/input";
diff --git a/src/components/ui/ripple.tsx b/src/components/ui/ripple.tsx
index 0f48c2b..5c9e769 100644
--- a/src/components/ui/ripple.tsx
+++ b/src/components/ui/ripple.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React, { type CSSProperties } from "react";
 
 interface RippleProps {
   mainCircleSize?: number;
diff --git a/src/store/useStore.ts b/src/store/useStore.ts
index 14f6d8a..9f99605 100644
--- a/src/store/useStore.ts
+++ b/src/store/useStore.ts
@@ -41,7 +41,7 @@ export const useStore = create<State & Actions>((set, get) => ({
 
   setCode: (code) => set({ code }),
   setOutput: (newOutput) =>
-    set((state) => ({ output: state.output + "\n" + newOutput })),
+    set((state) => ({ output: `${state.output}\n${newOutput}` })),
   clearOutput: (defaultValue = "") => set({ output: defaultValue }),
   setError: (error) => set({ error }),
   setDirection: (direction) => set({ direction }),