From 803b28218c327ff25d631ffa7cec62effaf0fd48 Mon Sep 17 00:00:00 2001
From: Anthony Buchholz <anthony.buchholz@gmail.com>
Date: Mon, 13 Jan 2025 16:26:36 -0600
Subject: [PATCH] feat: add minifier functionality (#63)

Add in the minifier function and general formatJson function to the
services.ts file for JSONFormatter.

Add the minify button and connect it to the function to actually work as
expected.
---
 src/containers/JSONFormatter/index.tsx   | 17 ++++++++++++++++-
 src/containers/JSONFormatter/services.ts | 22 +++++++++++++++-------
 2 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/containers/JSONFormatter/index.tsx b/src/containers/JSONFormatter/index.tsx
index d76997e..58f2bc9 100644
--- a/src/containers/JSONFormatter/index.tsx
+++ b/src/containers/JSONFormatter/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import SaveIcon from '@mui/icons-material/Save';
+import CloseFullscreenIcon from '@mui/icons-material/CloseFullscreen';
 import WrapTextIcon from '@mui/icons-material/WrapText';
 import { Box, Toolbar } from '@mui/material';
 import Button from '@mui/material/Button';
@@ -48,9 +49,14 @@ const JSONFormatter: React.FC<Props> = ({ inputText, storeInputText }) => {
   const [formatted, setFormatted] = React.useState('');
 
   React.useEffect(() => {
-    setFormatted(services.formatJson(inputText));
+    setFormatted(services.prettifyJson(inputText));
   }, [inputText]);
 
+  const handleMinify = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    setFormatted(services.minifyJson(inputText));
+  };
+
   const handleSaveAs = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.preventDefault();
     fileService.saveJsonAs(formatted);
@@ -81,6 +87,15 @@ const JSONFormatter: React.FC<Props> = ({ inputText, storeInputText }) => {
 
       <Toolbar className={classes.toolbar}>
         <Box component='div' flexGrow={1}></Box>
+        <Button
+          endIcon={<CloseFullscreenIcon></CloseFullscreenIcon>}
+          variant='contained'
+          color='primary'
+          sx={{ mr: 1 }}
+          onClick={handleMinify}
+        >
+          Minify
+        </Button>
         <CopyButton data={formatted} sx={{ mr: 1 }} />
         <Button
           endIcon={<SaveIcon>Save As…</SaveIcon>}
diff --git a/src/containers/JSONFormatter/services.ts b/src/containers/JSONFormatter/services.ts
index eaa1e28..11876b9 100644
--- a/src/containers/JSONFormatter/services.ts
+++ b/src/containers/JSONFormatter/services.ts
@@ -2,23 +2,31 @@
 const replacer = (_key: string, value: any) =>
   value instanceof Object && !(value instanceof Array)
     ? Object.keys(value)
-        .sort()
-        .reduce((sorted: any, key: string) => {
-          sorted[key] = value[key];
-          return sorted;
-        }, {})
+      .sort()
+      .reduce((sorted: any, key: string) => {
+        sorted[key] = value[key];
+        return sorted;
+      }, {})
     : value;
 
-export function formatJson(value?: string): string {
+export function prettifyJson(value?: string): string {
+  return formatJson(4, value);
+}
+
+export function formatJson(space: number, value?: string): string {
   if (!value) {
     return '';
   }
 
   try {
     const obj = JSON.parse(value);
-    return JSON.stringify(obj, replacer, 4);
+    return JSON.stringify(obj, replacer, space);
   } catch (_e) {
     //  do nothing user may still be typing...
     return value;
   }
 }
+
+export function minifyJson(value?: string): string {
+  return formatJson(0, value)
+}