refactor (#107)

package.json

@@ -38,6 +38,7 @@
     "file-saver": "^2.0.5",
     "framer-motion": "^4",
     "jszip": "^3.6.0",
+    "prettier": "^2.3.2",
     "prettier-config-rossmoody": "^1.0.2",
     "pretty-bytes": "^5.6.0",
     "react": "^17.0.2",

src/build/components/card/card-action-cors.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Button, Grid, useColorModeValue } from '@chakra-ui/react'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
-import { Tooltip } from '..'
+import Tooltip from '../generic/tooltip'
 
 function sendMessage(callback: any) {
   chrome.tabs.query({ active: true, currentWindow: true }, (tabArray) => {

src/build/components/card/card-action-footer.tsx

@@ -20,10 +20,10 @@ import {
 } from 'react-icons/fi'
 
 import Drawer from '../drawer'
-import { handle } from '../utils/actions'
+import handle from '../utils/actions'
 
 import ImageModal from './image-modal'
-import { FilenameModal } from './filename-modal'
+import FilenameModal from './filename-modal'
 
 interface CardActionFooter {
   svgString: string

src/build/components/card/filename-modal.tsx

@@ -22,7 +22,7 @@ interface PopoverFormTypes {
   callback: (arg: boolean) => void
 }
 
-export const FilenameModal = ({
+const FilenameModal = ({
   title,
   svgString,
   callback,
@@ -54,7 +54,7 @@ export const FilenameModal = ({
                 defaultValue={filename}
                 onChange={(event) => setFilename(event.target.value)}
               />
-              <InputRightAddon children=".svg" />
+              <InputRightAddon>.svg</InputRightAddon>
             </InputGroup>
           </FormControl>
         </ModalBody>
@@ -76,3 +76,5 @@ export const FilenameModal = ({
     </Modal>
   )
 }
+
+export default FilenameModal

src/build/components/card/image-modal.tsx

@@ -21,8 +21,8 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 
+import handle from '../utils/actions'
 import { SVGImage } from '../utils/image-class'
-import { handle } from '../utils/actions'
 
 interface ImageModalProps {
   callback: (arg: boolean) => void

src/build/components/gallery/data-gallery.tsx

@@ -8,15 +8,13 @@ import {
 } from '@chakra-ui/react'
 
 import Card from '../card'
-import { AppData } from '../../types'
 import SVG from '../../../find/scripts/svg-class'
 
 interface GalleryData {
   data: SVG[][]
-  setData: React.Dispatch<React.SetStateAction<AppData>>
 }
 
-const DataGallery = ({ data, setData }: GalleryData) => {
+const DataGallery = ({ data }: GalleryData) => {
   const [page, setPage] = React.useState(0)
   const [displayData, setDisplayData] = React.useState(data[0])
   const [loading, setLoading] = React.useState(false)

src/build/components/gallery/index.tsx

@@ -8,10 +8,9 @@ import DataGallery from './data-gallery'
 
 interface GalleryData {
   data: AppData
-  setData: React.Dispatch<React.SetStateAction<AppData>>
 }
 
-const Gallery = ({ data, setData }: GalleryData) => {
+const Gallery = ({ data }: GalleryData) => {
   switch (data) {
     case undefined: {
       return <LoadingGallery />
@@ -45,7 +44,7 @@ const Gallery = ({ data, setData }: GalleryData) => {
     }
 
     default: {
-      return <DataGallery data={data} setData={setData} />
+      return <DataGallery data={data} />
     }
   }
 }

src/build/components/generic/drop-zone.tsx

@@ -1,15 +1,15 @@
-import React from 'react'
+import React, { ReactNode, SetStateAction, Dispatch } from 'react'
 import { Box } from '@chakra-ui/react'
 
 import { AppData } from '../../types'
 import { util } from '../utils/upload'
 
 interface DropZone {
-  children: React.ReactNode
-  setData: React.Dispatch<React.SetStateAction<AppData>>
+  children: ReactNode
+  setData: Dispatch<SetStateAction<AppData>>
 }
 
-export const DropZone = ({ children, setData }: DropZone) => (
+const DropZone = ({ children, setData }: DropZone) => (
   <Box
     onDragOver={util.handleDragOver}
     onDragLeave={util.handleDragOut}
@@ -33,3 +33,5 @@ export const DropZone = ({ children, setData }: DropZone) => (
     {children}
   </Box>
 )
+
+export default DropZone

src/build/components/generic/tooltip.tsx

@@ -6,8 +6,10 @@ interface Tooltip {
   label: string
 }
 
-export const Tooltip = ({ children, label }: Tooltip) => (
+const Tooltip = ({ children, label }: Tooltip) => (
   <ChakraTooltip hasArrow borderRadius="md" padding={4} label={label}>
     {children}
   </ChakraTooltip>
 )
+
+export default Tooltip

src/build/components/index.ts

@@ -1,7 +1,6 @@
+export { default as DropZone } from './generic/drop-zone'
+export { default as Tooltip } from './generic/tooltip'
 export { default as Footer } from './footer'
 export { default as Navbar } from './navbar'
 export { default as Toolbar } from './toolbar'
 export { default as Gallery } from './gallery'
-
-export { DropZone } from './generic/drop-zone'
-export { Tooltip } from './generic/tooltip'

src/build/components/toolbar/data-toolbar.tsx

@@ -1,21 +1,21 @@
+import React from 'react'
 import {
   Box,
   Button,
   Heading,
-  HStack,
   Stack,
+  HStack,
   Text,
   Flex,
-  useColorModeValue as mode,
+  useColorModeValue,
   Input,
 } from '@chakra-ui/react'
-import React from 'react'
 import { FaDownload, FaPlus } from 'react-icons/fa'
 
+import handle from '../utils/actions'
+import Tooltip from '../generic/tooltip'
 import { AppData } from '../../types'
-import { handle } from '../utils/actions'
 import { util } from '../utils/upload'
-import { Tooltip } from '..'
 
 interface ToolbarData {
   data: AppData
@@ -27,7 +27,7 @@ const DataToolbar = ({ data, setData, location }: ToolbarData) => {
   const moreThanOneString = util.getSvgStrings(data).length > 1
 
   return (
-    <Box p="8" bg={mode('white', 'gray.800')} as="section">
+    <Box p="8" bg={useColorModeValue('white', 'gray.800')} as="section">
       <Box maxW="7xl" mx="auto">
         <Stack
           spacing="5"
@@ -38,7 +38,10 @@ const DataToolbar = ({ data, setData, location }: ToolbarData) => {
             <Flex alignItems="center">
               <Heading size="lg">{location}</Heading>
             </Flex>
-            <Text color={mode('gray.600', 'gray.400')} fontSize="sm">
+            <Text
+              color={useColorModeValue('gray.600', 'gray.400')}
+              fontSize="sm"
+            >
               Showing {util.getSvgQuantity(data)} available SVG
               {util.isPlural(util.getSvgQuantity(data))}
             </Text>

src/build/components/utils/actions.ts

@@ -16,15 +16,15 @@ const svgoConfig = {
   ]),
 }
 
-const defaultFilename = 'svg-gobbler'
+const FILENAME = 'svg-gobbler'
 
 const handle = {
-  downloadOriginal(svgString: string, filename = defaultFilename) {
+  downloadOriginal(svgString: string, filename = FILENAME) {
     const blob = new Blob([svgString], { type: 'text/xml' })
     FileSaver.saveAs(blob, `${filename}.svg`)
   },
 
-  downloadOptimized(svgString: string, filename = defaultFilename) {
+  downloadOptimized(svgString: string, filename = FILENAME) {
     const { data } = optimize(svgString, svgoConfig)
     const blob = new Blob([data], { type: 'text/xml' })
     FileSaver.saveAs(blob, `${filename}.svg`)
@@ -63,7 +63,7 @@ const handle = {
     imgSource: string,
     width: number,
     height: number,
-    filename = defaultFilename
+    filename = FILENAME
   ) {
     const imageElement = new Image()
 
@@ -84,4 +84,4 @@ const handle = {
   },
 }
 
-export { handle }
+export default handle

src/build/pages/index.tsx

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react'
 import { Divider } from '@chakra-ui/react'
 
 import SVG from '../../find/scripts/svg-class'
+import ThemeProvider from '../theme/theme-provider'
 import { Toolbar, Footer, Gallery, Navbar, DropZone } from '../components'
 import { AppData, MessageData } from '../types'
-import ThemeProvider from '../theme/theme-provider'
 
 function paginateContent(content: SVG[]) {
   const perPage = 100
@@ -97,7 +97,7 @@ const Layout = () => {
         <Navbar />
         <Divider />
         <Toolbar data={data} setData={setData} location={location} />
-        <Gallery data={data} setData={setData} />
+        <Gallery data={data} />
         <Divider />
         <Footer />
       </DropZone>

src/find/scripts/svg-class.ts

@@ -56,7 +56,8 @@ export class SVGClass {
         const hasSymbolOrDefs = symbolElements.length > 0 || defsTags.length > 0
         const hasUseTags = useTags.length > 0
 
-        if (hasSymbolOrDefs) this.type = 'invalid' // Filter out. Symbols are manually built
+        // Filter out. Symbols are manually built
+        if (hasSymbolOrDefs) this.type = 'invalid'
         if (hasUseTags) this.type = 'sprite'
 
         break

yarn.lock

@@ -5073,6 +5073,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.2.tgz#ef280a05ec253712e486233db5c6f23441e7342d"
+  integrity sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==
+
 pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"