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

@@ -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>}

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)
+}