WIP: Compress Image

.gitignore

@@ -49,3 +49,5 @@ npm-debug.log.*
 *.css.d.ts
 *.sass.d.ts
 *.scss.d.ts
+
+.tool-versions

package.json

@@ -169,10 +169,13 @@
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/history": "4.7.6",
+    "@types/imagemin": "^7.0.1",
+    "@types/imagemin-jpegtran": "^5.0.1",
     "@types/jest": "^26.0.15",
     "@types/marked": "^2.0.4",
     "@types/node": "14.14.10",
     "@types/pngjs": "^6.0.1",
+    "@types/pretty-bytes": "^5.2.0",
     "@types/qrcode": "^1.4.1",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.9",
@@ -260,12 +263,17 @@
     "electron-store": "^8.0.0",
     "electron-updater": "^4.3.4",
     "history": "^5.0.0",
+    "imagemin": "^8.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-pngquant": "^9.0.2",
     "jsqr": "^1.4.0",
     "marked": "^2.1.3",
     "pngjs": "^6.0.0",
+    "pretty-bytes": "^5.6.0",
     "qrcode": "^1.4.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-dropzone": "^11.3.4",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.5",

src/components/Main.tsx

@@ -15,6 +15,7 @@ import JsonFormatter from './json/JsonFormatter';
 import QRCodeReader from './qrcode/QrCodeReader';
 import RegexTester from './regex/RegexTester';
 import Auto from './auto/Auto';
+import CompressImageComponent from './compressImage';
 
 const defaultRoutes = [
   {
@@ -83,6 +84,13 @@ const defaultRoutes = [
     name: 'SQL Formatter',
     Component: SqlFormatter,
   },
+
+  {
+    icon: <FontAwesomeIcon icon="image" />,
+    path: '/compress-image',
+    name: 'Compress Image',
+    Component: CompressImageComponent,
+  },
 ];
 
 const Main = () => {

src/components/compressImage/CompressImage.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable react/jsx-props-no-spreading */
+
+// import { writeFile } from 'fs';
+// import path from 'path';
+
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import prettyByte from 'pretty-bytes';
+
+const CompressImageComponent = () => {
+  const [listImage, setListImage] = useState<File[]>([]);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const newFiles = acceptedFiles
+        .filter((item: File) => item.type.includes('image/'))
+        .slice(0, 10);
+
+      if (!listImage.length) {
+        setListImage(newFiles);
+
+        return;
+      }
+
+      setListImage([...listImage, ...newFiles]);
+    },
+    [listImage]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
+  const resetImages = () => setListImage([]);
+
+  const compressImages = async () => {
+    // const baseDir = path.join(__dirname, '/temp/');
+  };
+
+  return (
+    <>
+      <div {...getRootProps()} className="mb-4">
+        <input {...getInputProps()} />
+
+        <div className="flex justify-center py-8 rounded-lg border-dashed border border-green-500 bg-white">
+          <FontAwesomeIcon icon="arrow-down" size="2x" className="mr-4" />
+
+          {isDragActive ? (
+            <p>Drop the files here ...</p>
+          ) : (
+            <p>Drag and drop some files here, or click to select files</p>
+          )}
+        </div>
+      </div>
+
+      {!!listImage.length && (
+        <>
+          <div className="px-8 py-4 bg-blue-200 rounded-lg mb-4">
+            Maximum 10 images
+          </div>
+
+          <div className="mb-4">
+            <button
+              type="button"
+              className="bg-yellow-500 text-white rounded-md px-6 py-2 mr-4 transition-all duration-200 ease-in-out hover:bg-yellow-600"
+              onClick={() => resetImages()}
+            >
+              Reset
+            </button>
+
+            <button
+              type="button"
+              className="bg-green-500 text-white rounded-md px-6 py-2 transition-all duration-200 ease-in-out hover:bg-green-600"
+              onClick={() => compressImages()}
+            >
+              Compress
+            </button>
+          </div>
+
+          <div className="bg-white px-4 pt-4 rounded-lg flex flex-col">
+            {listImage.map((item: File, index: number) => (
+              <div key={item.lastModified} className="flex mb-4 items-center">
+                <div className="text-lg font-bold mr-4 w-8 text-center">
+                  {index + 1}
+                </div>
+
+                <img src={item.path} alt="" className="w-24 rounded-lg mr-4" />
+
+                <div className="flex flex-col flex-1">
+                  <h4 className="text-lg font-bold">{item.name}</h4>
+
+                  <p>{prettyByte(item.size)}</p>
+                </div>
+
+                <FontAwesomeIcon
+                  icon="trash-alt"
+                  size="1x"
+                  className="text-red-500 cursor-pointer"
+                />
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default CompressImageComponent;

src/components/compressImage/index.tsx

@@ -0,0 +1,3 @@
+import CompressImageComponent from './CompressImage';
+
+export default CompressImageComponent;

src/helpers/fontAwesome.ts

@@ -14,9 +14,12 @@ import {
   faDatabase,
   faExchangeAlt,
   faQrcode,
+  faImage,
+  faArrowDown,
   faSearch,
   faTimesCircle,
   faRobot,
+  faTrashAlt,
 } from '@fortawesome/free-solid-svg-icons';
 
 library.add(
@@ -31,8 +34,12 @@ library.add(
   faDatabase,
   faJsSquare,
   faRegistered,
+  faCamera,
+  faImage,
+  faArrowDown,
   faSearch,
   faTimesCircle,
   faRobot,
-  faCamera
+  faCamera,
+  faTrashAlt
 );