From b84f81611a781a8750e07d9461f8f81c087c8908 Mon Sep 17 00:00:00 2001
From: Lumither Tao <lumither@outlook.com>
Date: Sun, 13 Oct 2024 21:11:57 -0700
Subject: [PATCH] feat(json parser) export, formatter

---
 app/Header.tsx                 |  10 +--
 app/jsonparser/ExportModal.tsx | 127 +++++++++++++++++++++++++++++++++
 app/jsonparser/JsonEditor.tsx  |  34 +++++++++
 app/jsonparser/page.tsx        |   4 +-
 app/public/MonacoEditor.tsx    |  62 ++++++++++++----
 5 files changed, 218 insertions(+), 19 deletions(-)
 create mode 100644 app/jsonparser/ExportModal.tsx
 create mode 100644 app/jsonparser/JsonEditor.tsx

diff --git a/app/Header.tsx b/app/Header.tsx
index 339753f..3eddf0d 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -1,7 +1,6 @@
-'use client';
-
 import React from 'react';
 import ThemeSwitcher from '@/Components/ThemeSwitcher';
+import Link from 'next/link';
 
 const Header = () => {
 
@@ -13,9 +12,12 @@ const Header = () => {
 
                 <div className={ 'p-3 px-5' }>
                     <div className={ 'flex flex-row items-center justify-between align-baseline' }>
-                        <div className={ 'font-bold text-2xl' }>
+                        <Link
+                            className={ 'font-bold text-2xl' }
+                            href={ '/' }
+                        >
                             LMTLab
-                        </div>
+                        </Link>
                         <ThemeSwitcher />
                     </div>
                 </div>
diff --git a/app/jsonparser/ExportModal.tsx b/app/jsonparser/ExportModal.tsx
new file mode 100644
index 0000000..63fbd18
--- /dev/null
+++ b/app/jsonparser/ExportModal.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import {
+    Button,
+    Checkbox,
+    CheckboxGroup,
+    Modal,
+    ModalBody,
+    ModalContent,
+    ModalFooter,
+    ModalHeader,
+    Textarea
+} from '@nextui-org/react';
+import { toast } from 'react-toastify';
+import { HiOutlineDownload, HiOutlineDuplicate } from 'react-icons/hi';
+
+const workflows = new Map<string, (json: string) => string>([
+    [ 'minify', (json) => {
+        try {
+            const value = JSON.parse(json);
+            return JSON.stringify(value);
+        } catch (e) {
+            toast.error(`Operation Failed: ${ e }`, { autoClose: 5000 });
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            return e.toString();
+        }
+    } ]
+]);
+
+type Props = { isOpen: boolean, onOpenChange: () => void, value: string };
+
+const ExportModal = ({ isOpen, onOpenChange, value }: Props) => {
+    const [ workflow, setWorkflow ] = useState<string[]>([]);
+    const [ editorValue, setEditorValue ] = useState(value);
+    useEffect(() => {
+        setEditorValue(value);
+    }, [ value ]);
+
+    const [ exportValue, setExportValue ] = useState(editorValue);
+    useEffect(() => {
+        let value = editorValue;
+        for (const fn of workflow) {
+            const func = workflows.get(fn);
+            value = func ? func(value) : value;
+        }
+        setExportValue(value);
+    }, [ workflow, editorValue ]);
+
+    return (
+        <Modal
+            isOpen={ isOpen }
+            onOpenChange={ onOpenChange }
+            size={ '4xl' }
+            hideCloseButton
+        >
+            <ModalContent>
+                { (onClose) => (
+                    <>
+                        <ModalHeader className="gap-1">Export</ModalHeader>
+                        <ModalBody>
+                            <CheckboxGroup
+                                label={ 'Config' }
+                                color={ 'primary' }
+                                value={ workflow }
+                                onChange={ setWorkflow }
+                            >
+                                <Checkbox value={ 'minify' }>Minify</Checkbox>
+                            </CheckboxGroup>
+
+                            <Textarea
+                                label={ 'Value' }
+                                variant={ 'flat' }
+                                value={ exportValue }
+                                readOnly
+                            />
+
+                            <div
+                                className={ 'mt-3 flex flex-col md:flex-row gap-1 justify-center' }
+                            >
+                                <Button
+                                    color={ 'primary' }
+                                    aria-label={ 'Download' }
+                                    startContent={ <HiOutlineDownload size={ 20 } /> }
+                                    onClick={ () => {
+                                        const blob = new Blob([ exportValue ], { type: 'application/json' });
+                                        const url = URL.createObjectURL(blob);
+                                        const a = document.createElement('a');
+                                        a.href = url;
+                                        a.download = 'value.json';
+                                        document.body.appendChild(a);
+                                        a.click();
+                                        document.body.removeChild(a);
+                                        URL.revokeObjectURL(url);
+                                        toast.success('File Downloaded');
+                                    } }
+                                >
+                                    Download
+                                </Button>
+                                <Button
+                                    color={ 'success' }
+                                    aria-label={ 'Copy' }
+                                    startContent={ <HiOutlineDuplicate size={ 20 } /> }
+                                    onClick={ () => {
+                                        navigator.clipboard.writeText(exportValue);
+                                        toast.success('Copied to Clipboard');
+                                    } }
+                                >
+                                    Copy
+                                </Button>
+                            </div>
+                        </ModalBody>
+                        <ModalFooter>
+                            <Button color="danger" variant="light" onPress={ onClose }>
+                                Close
+                            </Button>
+                        </ModalFooter>
+                    </>
+                ) }
+            </ModalContent>
+        </Modal>
+    );
+};
+
+export default ExportModal;
+
diff --git a/app/jsonparser/JsonEditor.tsx b/app/jsonparser/JsonEditor.tsx
new file mode 100644
index 0000000..caad30a
--- /dev/null
+++ b/app/jsonparser/JsonEditor.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import React, { useState } from 'react';
+import MonacoEditor from '@/app/public/MonacoEditor';
+import { Button, useDisclosure } from '@nextui-org/react';
+import ExportModal from '@/app/jsonparser/ExportModal';
+import { HiOutlineExternalLink } from 'react-icons/hi';
+
+const DEFAULT_EDITOR_VALUE = '{}';
+
+const JsonEditor = () => {
+    const [ editorValue, setEditorValue ] = useState<string>(DEFAULT_EDITOR_VALUE);
+    const { isOpen, onOpen, onOpenChange } = useDisclosure();
+
+    return (
+        <>
+            <div className={ 'rounded-2xl shadow-2xl overflow-hidden relative' }>
+                <MonacoEditor language={ 'json' } defaultValue={ DEFAULT_EDITOR_VALUE } setValue={ setEditorValue } />
+
+                <div className={ 'absolute top-4 right-4 z-10' }>
+                    <Button
+                        aria-label={ 'export' }
+                        variant={ 'light' }
+                        isIconOnly
+                        onPress={ onOpen }
+                        startContent={ <HiOutlineExternalLink size={ 20 } /> } />
+                    <ExportModal isOpen={ isOpen } onOpenChange={ onOpenChange } value={ editorValue } />
+
+                </div>
+            </div>
+        </>
+    );
+};
+export default JsonEditor;
diff --git a/app/jsonparser/page.tsx b/app/jsonparser/page.tsx
index 150cb20..9c196b4 100644
--- a/app/jsonparser/page.tsx
+++ b/app/jsonparser/page.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import MonacoEditor from '@/app/public/MonacoEditor';
+import JsonEditor from '@/app/jsonparser/JsonEditor';
 
 const Page = () => {
     return (
@@ -7,7 +7,7 @@ const Page = () => {
             <div
                 className={ 'p-2 lg:p-20 h-full w-full' }
             >
-                <MonacoEditor defaultValue={ '{}' } language={ 'json' } />
+                <JsonEditor />
             </div>
         </>
     );
diff --git a/app/public/MonacoEditor.tsx b/app/public/MonacoEditor.tsx
index 07eefab..0c85c2b 100644
--- a/app/public/MonacoEditor.tsx
+++ b/app/public/MonacoEditor.tsx
@@ -1,41 +1,77 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 import { Editor as Monaco } from '@monaco-editor/react';
 import { useTheme } from 'next-themes';
-import { Button } from '@nextui-org/react';
-import { HiOutlineClipboardDocumentList } from 'react-icons/hi2';
+import { Button, Spinner } from '@nextui-org/react';
 import { toast } from 'react-toastify';
+import { HiOutlineDuplicate } from 'react-icons/hi';
+import { MdFormatShapes } from 'react-icons/md';
 
 type Props = {
     language: string,
     defaultValue: string
+    height?: string
+    setValue?: (value: string) => void
 }
 
-const MonacoEditor = (props: Props) => {
+const MonacoEditor = ({ language, defaultValue, height = '75vh', setValue }: Props) => {
     const { theme } = useTheme();
-    const [ editorValue, setEditorValue ] = useState(props.defaultValue);
-    console.log(editorValue);
+    const [ editorValue, setEditorValue ] = useState(defaultValue);
+
+    const editorRef = useRef(null);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const handleEditorDidMount = (editor) => {
+        editorRef.current = editor;
+    };
+    const formatCode = () => {
+        if (editorRef.current) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            editorRef.current.getAction('editor.action.formatDocument').run();
+        }
+    };
+
     return (
-        <div className={ 'rounded-2xl overflow-hidden shadow-2xl relative' }>
+        <div className={ 'relative' }>
             <Monaco
-                height="75vh"
-                defaultLanguage={ props.language }
+                height={ height }
+                defaultLanguage={ language }
                 theme={ theme === 'light' ? 'light' : 'vs-dark' }
-                defaultValue={ props.defaultValue }
-                onChange={ (val) => setEditorValue(val as string) }
+                defaultValue={ defaultValue }
+                loading={ <Spinner size={ 'lg' } /> }
+                onMount={ handleEditorDidMount }
+                onChange={ (val) => {
+                    setEditorValue(val as string);
+                    if (setValue) {
+                        setValue(val as string);
+                    }
+                } }
             />
-            <div className={ 'absolute bottom-4 right-4 z-10' }>
+            <div className={ 'flex flex-row-reverse absolute bottom-4 right-4 z-10' }>
                 <Button
                     variant={ 'light' }
                     isIconOnly
+                    aria-label={ 'copy to clipboard' }
                     onClick={ () => {
                         navigator.clipboard.writeText(editorValue);
                         toast.success('Copied to Clipboard');
                     } }
                 >
-                    <HiOutlineClipboardDocumentList size={ 20 } />
+                    <HiOutlineDuplicate size={ 20 } />
+                </Button>
+                <Button
+                    variant={ 'light' }
+                    isIconOnly
+                    aria-label={ 'copy to clipboard' }
+                    onClick={ () => {
+                        formatCode();
+                        toast.success('Formatted');
+                    } }
+                >
+                    <MdFormatShapes size={ 20 } />
                 </Button>
             </div>
         </div>