refactor

src/components/FileInput/index.tsx

@@ -9,7 +9,7 @@ const StyledInputWrapper = styled.div`
 
 const StyledForm = styled.div`
   display: flex;
-  
+
   flex: 1;
 `;
 
@@ -33,11 +33,11 @@ const StyledButton = styled.button`
   padding: 0 10px;
   min-height: unset;
   text-transform: uppercase;
-  
+
   &:hover {
     box-shadow: none;
   }
-  
+
   &.active {
     background: ${({ theme }) => theme.PRIMARY};
     color: white;
@@ -46,32 +46,28 @@ const StyledButton = styled.button`
   }
 `;
 
-export interface ModalProps {
-    value:string | number | readonly string[] | undefined,
-    extensions:string[]
-    activeExtension:number
-    setExtension: Function,
-    onChange: React.ChangeEventHandler<HTMLInputElement> | undefined,
+export interface InputProps {
+  value: string | number | string[];
+  extensions: string[];
+  activeExtension: number;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  setExtension: (value: number) => void;
 }
-export const FileInput: React.FC<ModalProps> = (props) => {
-
-  const {setExtension, activeExtension, onChange,extensions,value } = props
-
+export const FileInput: React.FC<InputProps> = ({ setExtension, activeExtension, onChange, extensions, value }) => {
   return (
     <StyledInputWrapper>
       <StyledForm>
-        <StyledInput
-          type="text"
-          onChange={onChange}
-          value={value}
-          placeholder="File Name"
-        />
-          {extensions.map((ext, key) => (
-            <StyledButton className={`${activeExtension === key && "active"}`} key={key} aria-label="search" onClick={() => setExtension(key)}>
-              {ext}
-            </StyledButton>)
-          )}
-
+        <StyledInput type="text" onChange={onChange} value={value} placeholder="File Name" />
+        {extensions.map((ext, key) => (
+          <StyledButton
+            className={`${activeExtension === key && "active"}`}
+            key={key}
+            aria-label="search"
+            onClick={() => setExtension(key)}
+          >
+            {ext}
+          </StyledButton>
+        ))}
       </StyledForm>
     </StyledInputWrapper>
   );

src/containers/Modals/DownloadModal/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { toBlob, toPng,toSvg } from "html-to-image";
+import { toBlob, toPng, toSvg } from "html-to-image";
 import { TwitterPicker } from "react-color";
 import { TwitterPickerStylesProps } from "react-color/lib/components/twitter/Twitter";
 import toast from "react-hot-toast";
@@ -93,10 +93,10 @@ const StyledColorIndicator = styled.div<{ color: string }>`
 
 enum Extensions {
   svg,
-  png
+  png,
 }
 export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const [extension, setExtension] = React.useState(Extensions.svg)
+  const [extension, setExtension] = React.useState(Extensions.svg);
   const [fileDetails, setFileDetails] = React.useState({
     filename: "jsoncrack.com",
     backgroundColor: "transparent",
@@ -137,7 +137,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
-      let exportImage = extension === Extensions.svg ? toSvg : toPng
+      let exportImage = extension === Extensions.svg ? toSvg : toPng;
 
       const dataURI = await exportImage(imageElement, {
         quality: fileDetails.quality,
@@ -166,9 +166,9 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
             <FileInput
               value={fileDetails.filename}
               onChange={e => updateDetails("filename", e.target.value)}
-              setExtension={(ext:number)=> setExtension(ext)}
+              setExtension={setExtension}
               activeExtension={extension}
-              extensions={Object.keys(Extensions).filter((v) => isNaN(Number(v)))}
+              extensions={Object.keys(Extensions).filter(v => isNaN(Number(v)))}
             />
           </StyledColorWrapper>
         </StyledContainer>

src/pages/_app.tsx

@@ -22,7 +22,7 @@ if (process.env.NODE_ENV !== "development") {
   init({
     dsn: "https://[email protected]/6495191",
     tracesSampleRate: 0.25,
-    release: 'production'
+    release: "production",
   });
 }