From e08b6266357d7079b2fdf32e23d23aa5ace17a20 Mon Sep 17 00:00:00 2001
From: Carla Paiva <carla.paiva05@hotmail.com>
Date: Sat, 3 Feb 2024 17:31:01 -0300
Subject: [PATCH 1/2] feat: add cascader instead of select

---
 .../upload-step/upload-step.tsx               | 48 ++++++++++++++-----
 src/components/video-converter/index.tsx      |  5 ++
 src/model/format.ts                           |  4 ++
 3 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/converter/converter-steps/upload-step/upload-step.tsx b/src/components/converter/converter-steps/upload-step/upload-step.tsx
index 6e557e8..c4c9b49 100644
--- a/src/components/converter/converter-steps/upload-step/upload-step.tsx
+++ b/src/components/converter/converter-steps/upload-step/upload-step.tsx
@@ -1,4 +1,5 @@
-import { Alert, Button, Select, UploadFile } from 'antd'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Alert, Button, Cascader, UploadFile } from 'antd'
 import DraggerUpload from '../../../dragger-upload'
 import './upload-step.css'
 import { memo, useCallback, useMemo, useState } from 'react'
@@ -17,6 +18,12 @@ type ErrorMessage = {
   message: string
 }
 
+type Option = {
+  value: string
+  label: string
+  children?: Option[]
+}
+
 const hideErrorMessage: ErrorMessage = {
   isVisible: false,
   message: '',
@@ -65,9 +72,9 @@ const UploadStep = memo(function UploadStepComponent(
   }, [props.allowedUploadingFormats])
 
   const onSelectedFormatChange = useCallback(
-    (value: string) => {
-      setFormat(value)
-      props.updateSelectedExtension(value)
+    (value: (string | number)[]) => {
+      setFormat(value[1] as string)
+      props.updateSelectedExtension(value[1] as string)
     },
     [props],
   )
@@ -87,22 +94,39 @@ const UploadStep = memo(function UploadStepComponent(
   }, [files.length, format, props])
 
   const options = useMemo(() => {
-    return props.extensionOptions.map((item) => {
-      return { value: item.extension, label: item.name }
+    const opts: Option[] = []
+
+    props.extensionOptions.forEach((item) => {
+      if (opts.some((x) => x.label === item.category)) {
+        return
+      }
+
+      const children = props.extensionOptions.filter(
+        (value) => value.category === item.category,
+      )
+
+      opts.push({
+        label: item.category,
+        value: item.category,
+        children: children.map((cItem) => {
+          return { value: cItem.extension, label: cItem.name, children: [] }
+        }),
+      })
     })
+
+    return opts
   }, [props.extensionOptions])
 
   return (
     <div className="container">
       <DraggerUpload accept={acceptedTypes} onUploadDone={onUploadDone} />
-      <Select
-        value={format}
-        placeholder="Convert all to..."
-        size="large"
+      <Cascader
         className="container__items"
-        onChange={onSelectedFormatChange}
+        size="large"
+        placeholder="Convert all to..."
         options={options}
-      ></Select>
+        onChange={onSelectedFormatChange}
+      />
       <Button
         size="large"
         type="primary"
diff --git a/src/components/video-converter/index.tsx b/src/components/video-converter/index.tsx
index 4e83aeb..13f885a 100644
--- a/src/components/video-converter/index.tsx
+++ b/src/components/video-converter/index.tsx
@@ -7,22 +7,27 @@ const optionsToConvertTo: Format[] = [
   {
     name: 'GIF',
     extension: '.gif',
+    category: 'Image',
   },
   {
     name: 'MP4',
     extension: '.mp4',
+    category: 'Video',
   },
   {
     name: 'AVI',
     extension: '.avi',
+    category: 'Video',
   },
   {
     name: 'WMV',
     extension: '.wmv',
+    category: 'Video',
   },
   {
     name: 'MP3',
     extension: '.mp3',
+    category: 'Audio',
   },
 ]
 
diff --git a/src/model/format.ts b/src/model/format.ts
index c81de82..9b8c08a 100644
--- a/src/model/format.ts
+++ b/src/model/format.ts
@@ -1,7 +1,11 @@
 /** Defines a format */
+type FormatCategory = 'Image' | 'Audio' | 'Video' | 'File'
+
 export type Format = {
   /** Name o the format */
   name: string
   /** Extension with a dot */
   extension: string
+  /** Category of the format */
+  category: FormatCategory
 }

From a30f68103888d097fab4870631073fc7c987b834 Mon Sep 17 00:00:00 2001
From: Carla Paiva <carla.paiva05@hotmail.com>
Date: Sat, 3 Feb 2024 17:37:03 -0300
Subject: [PATCH 2/2] fix: pr comments

---
 .../converter-steps/upload-step/upload-step.tsx       | 11 +++++++++--
 src/model/format.ts                                   |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/converter/converter-steps/upload-step/upload-step.tsx b/src/components/converter/converter-steps/upload-step/upload-step.tsx
index c4c9b49..e9eb3b3 100644
--- a/src/components/converter/converter-steps/upload-step/upload-step.tsx
+++ b/src/components/converter/converter-steps/upload-step/upload-step.tsx
@@ -73,8 +73,15 @@ const UploadStep = memo(function UploadStepComponent(
 
   const onSelectedFormatChange = useCallback(
     (value: (string | number)[]) => {
-      setFormat(value[1] as string)
-      props.updateSelectedExtension(value[1] as string)
+      const result = value[1] as string
+
+      if (!result) {
+        console.warn('Could not read selected format.')
+        return
+      }
+
+      setFormat(result)
+      props.updateSelectedExtension(result)
     },
     [props],
   )
diff --git a/src/model/format.ts b/src/model/format.ts
index 9b8c08a..276f95e 100644
--- a/src/model/format.ts
+++ b/src/model/format.ts
@@ -1,6 +1,7 @@
-/** Defines a format */
+/** Category of a Format */
 type FormatCategory = 'Image' | 'Audio' | 'Video' | 'File'
 
+/** Defines a format */
 export type Format = {
   /** Name o the format */
   name: string