From f6f03f393448defc8f10d3db68853def157eabf0 Mon Sep 17 00:00:00 2001 From: Yash Date: Tue, 17 Sep 2024 21:34:27 +0530 Subject: [PATCH] refactor: Remove unused code and lint fix --- src/app/page.tsx | 2 +- src/components/editor/Editor.tsx | 12 ++++---- src/components/editor/EditorHeader.tsx | 28 ++----------------- src/components/editor/Toolbar.tsx | 6 ++-- src/components/editor/Viewer.tsx | 6 ++-- .../editor/tools/background/Background.js | 6 ++-- .../editor/tools/clipboard/Clipboard.js | 4 +-- .../editor/tools/clipboard/CopyClipboard.js | 9 +++--- .../editor/tools/download/Download.js | 4 ++- 9 files changed, 30 insertions(+), 47 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index d8242cf..e30314b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,5 +1,5 @@ import Editor from "@/components/editor/Editor"; -import { SnapcutEditor } from "@/components/snapcut-editor"; +// import { SnapcutEditor } from "@/components/snapcut-editor"; export default function Home() { return ( diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx index e15d382..bffcf79 100644 --- a/src/components/editor/Editor.tsx +++ b/src/components/editor/Editor.tsx @@ -4,9 +4,7 @@ import Viewer from './Viewer'; import Toolbar from './Toolbar'; import EditorHeader from './EditorHeader'; -type Props = {} - -const Editor = (props: Props) => { +const Editor = () => { const [img, setImg] = useState(null); const onImageChange = (e) => { @@ -17,9 +15,11 @@ const Editor = (props: Props) => { }; return ( -
+
diff --git a/src/components/editor/EditorHeader.tsx b/src/components/editor/EditorHeader.tsx index 0c8f8d0..34502f0 100644 --- a/src/components/editor/EditorHeader.tsx +++ b/src/components/editor/EditorHeader.tsx @@ -1,32 +1,10 @@ "use client" -import { useState, useEffect, useCallback } from 'react' import { - Moon, - Sun, Github, - Upload, - Wand2, - Layers, - Paintbrush, - Maximize2, - CornerUpLeft, - Square, - Cloud, - Share2, - Download } from 'lucide-react' -import Image from 'next/image' -import { toast } from 'sonner' -type Props = {} -const EditorHeader = (props: Props) => { - const [darkMode, setDarkMode] = useState(false) - const [mounted, setMounted] = useState(false) - useEffect(() => { - setMounted(true) - }, []) - - const toggleDarkMode = () => setDarkMode(!darkMode) +const EditorHeader = () => { + // const toggleDarkMode = () => setDarkMode(!darkMode) return (
@@ -49,7 +27,7 @@ const EditorHeader = (props: Props) => { href="https://github.com/YashM20/snapcut" target="_blank" rel="noopener noreferrer" - className="px-4 py-2 bg-gradient-to-r from-emerald-800/80 to-emerald-700 text-white rounded-full flex items-center gap-2 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 shadow-lg" + className="px-4 py-2 bg-gradient-to-r hover:from-emerald-800/80 hover:to-emerald-700 text-white rounded-full flex items-center gap-2 from-emerald-950 to-emerald-900 transition-all duration-300 shadow-lg" > GitHub diff --git a/src/components/editor/Toolbar.tsx b/src/components/editor/Toolbar.tsx index 8278010..be03c7d 100644 --- a/src/components/editor/Toolbar.tsx +++ b/src/components/editor/Toolbar.tsx @@ -1,6 +1,5 @@ "use client" -import React, { useEffect } from "react"; -import Background from "./tools/background/Background"; +import React from "react"; import Corners from "./tools/corners/Corners"; import Padding from "./tools/padding/Padding"; import Shadow from "./tools/shadow/Shadow"; @@ -9,6 +8,7 @@ import Resize from "./tools/resize/Resize"; import useClipboardImage from "./tools/clipboard/Clipboard"; import CopyClipboard from "./tools/clipboard/CopyClipboard"; import { UploadIcon } from "@radix-ui/react-icons"; +import { Upload } from "lucide-react"; export default function Toolbar({ onImageChange, img }) { @@ -23,7 +23,7 @@ export default function Toolbar({ onImageChange, img }) { className="transform p-4 flex font-semibold text-lg justify-center items-center px-8 rounded-full bg-gradient-to-r from-emerald-800/80 to-emerald-700 text-white/80 ease-in-out group outline-none ring dark:ring-0 ring-emerald-100/50 hover:from-emerald-950 hover:to-emerald-900 transition-all duration-300 shadow-lg" onClick={() => document.getElementById("file_select").click()} > - + Upload Screenshot )} diff --git a/src/components/editor/Viewer.tsx b/src/components/editor/Viewer.tsx index 5fa8d78..9e6786f 100644 --- a/src/components/editor/Viewer.tsx +++ b/src/components/editor/Viewer.tsx @@ -17,12 +17,12 @@ const Viewer = ({ img }: Props) => { setImgH(document?.getElementById("parent-img")?.offsetHeight || 0); setImgW(document?.getElementById("parent-img")?.offsetWidth || 0); // } - }); + }, [img]); return (
-
-
+
+
{ window.removeEventListener('paste', handlePaste); }; - }, [onImageChange]); + }, [onImageChange, handlePaste]); } diff --git a/src/components/editor/tools/clipboard/CopyClipboard.js b/src/components/editor/tools/clipboard/CopyClipboard.js index 9f30127..b0ca7c2 100644 --- a/src/components/editor/tools/clipboard/CopyClipboard.js +++ b/src/components/editor/tools/clipboard/CopyClipboard.js @@ -1,6 +1,6 @@ "use client" -import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/24/outline"; -import React, { useEffect } from "react"; +import { ClipboardIcon } from "@heroicons/react/24/outline"; +import React from "react"; import * as htmlToImage from "html-to-image"; import { useState } from "react"; import ClickAwayListener from "react-click-away-listener"; @@ -14,7 +14,8 @@ export default function CopyClipboard() { const [isVisible, setIsVisible] = useState(false); const [isCopyButtonDisabled, setIsCopyButtonDisabled] = useState(false); - const [copyFormat, setCopyFormat] = useState("png"); // png by default + // const [copyFormat, setCopyFormat] = useState("png"); // png by default + const copyFormat = "png" // png by default // Click away handle const handleClickAway = () => { setIsVisible(false); @@ -53,7 +54,7 @@ export default function CopyClipboard() { toast.dismiss("start"); toast.success("Copied to Clipboard Successfully!"); setIsCopyButtonDisabled(false); - }).catch((error) => { + }).catch(() => { toast.dismiss("start"); toast.error("Failed to Copy to Clipboard!"); setIsCopyButtonDisabled(false); diff --git a/src/components/editor/tools/download/Download.js b/src/components/editor/tools/download/Download.js index 9280ffc..f52e5f1 100644 --- a/src/components/editor/tools/download/Download.js +++ b/src/components/editor/tools/download/Download.js @@ -49,11 +49,13 @@ export default function Download() { }); }); } + useEffect(() => { if (isVisible) { document.getElementById(downloadFormat).checked = true; } - }, [isVisible]); + }, [isVisible, downloadFormat]); + return ( <>