feat: moved all shared code to Convert component (#25)

src/components/converter/index.tsx

@@ -0,0 +1,57 @@
+import { memo, useCallback, useState } from "react"
+import DraggerUpload from "../dragger-upload"
+import { Button, UploadFile } from "antd"
+import convertFiles from "../../services/converter"
+import { Format } from "../../model/format"
+import './converter.css'
+
+/** Properties of Converter */
+type ConverterProps = {
+    /** Define allowed types to be uploaded */
+    allowedUploadingFormats: Format[]
+    /** Formats available to be converted at */
+    optionsToConvertTo: Format[]
+}
+
+function Converter(props: ConverterProps): JSX.Element {
+    const [fileList, setFileList] = useState<UploadFile[]>([])
+
+    const onUploadDone = useCallback((files: UploadFile[]) => {
+        setFileList(files)
+    }, [])
+
+    const downloadBlob = useCallback((blob: Blob) => {
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement("a")
+        document.body.appendChild(a)
+        a.style.display = "none"
+        a.href = url;
+        a.target = "_blank"
+        a.download = 'test.gif';
+        a.click();
+        window.URL.revokeObjectURL(url);
+    }, [])
+
+    const convert = useCallback(async () => {
+        const blobs = await convertFiles(fileList)
+
+        for (const blob of blobs) {
+            downloadBlob(blob)
+        }
+    }, [downloadBlob, fileList])
+
+    return (
+        <div>
+            <DraggerUpload
+                onUploadDone={onUploadDone} />
+            <Button 
+                size="large" 
+                type="primary" 
+                className="button-convert"
+                onClick={convert}>Convert</Button>
+        </div>
+    )
+}
+
+
+export default memo(Converter)

src/components/video-converter/index.tsx

@@ -1,42 +1,28 @@
-import { useCallback, useState } from "react"
-import DraggerUpload from "../dragger-upload"
-import { Button, UploadFile } from "antd"
-import './video-converter.css'
-import convertFiles from "../../services/converter"
+import { Format } from "../../model/format"
+import Converter from "../converter"
 
-function VideoConverter(): JSX.Element {
-    const [fileList, setFileList] = useState<UploadFile[]>([])
+const uploadingFormat: Format[] = [
+    {
+        name: "MP4",
+        extension: ".mp4",
+        mimeType: "video/mp4"
+    }
+]
 
-    const onUploadDone = useCallback((files: UploadFile[]) => {
-        setFileList(files)
-    }, [])
+const optionsToConvertTo: Format[] = [
+    {
+        name: "GIF",
+        extension: ".gif",
+        mimeType: "image/gif"
+    }
+]
 
-    const convert = useCallback(async () => {
-        const blobs = await convertFiles(fileList)
-        console.log(blobs)
-        for (const blob of blobs) {
-            const url = window.URL.createObjectURL(blob);
-            const a = document.createElement("a")
-            document.body.appendChild(a)
-            a.style.display = "none"
-            a.href = url;
-            a.target = "_blank"
-            a.download = 'test.gif';
-            a.click();
-            window.URL.revokeObjectURL(url);
-        }
-    }, [fileList])
+function VideoConverter(): JSX.Element {
 
     return (
-        <div>
-            <DraggerUpload
-                onUploadDone={onUploadDone} />
-            <Button 
-                size="large" 
-                type="primary" 
-                className="button-convert"
-                onClick={convert}>Convert</Button>
-        </div>
+        <Converter
+            allowedUploadingFormats={uploadingFormat}
+            optionsToConvertTo={optionsToConvertTo} />
     )
 }
 

src/model/format.ts

@@ -0,0 +1,9 @@
+/** Defines a format */
+export type Format = {
+    /** Name o the format */
+    name: string
+    /** Extension with a dot */
+    extension: string
+    /** Mime type of this format, that allow it to be downloaded  */
+    mimeType: string
+}