Merge pull request #3 from SaidBySolo/feature/style

feat(App): add style
Saebasol · Jun 15, 2021 · f94e52a · f94e52a
2 parents 530deb9 + 0ae2fc8
commit f94e52a
Show file tree

Hide file tree

Showing 4 changed files with 1,800 additions and 631 deletions.
diff --git a/package.json b/package.json
@@ -7,8 +7,13 @@
     "lint": "prettier --check \"src/**/*.{js,jsx}\""
   },
   "dependencies": {
+    "@chakra-ui/icons": "1.0.12",
+    "@chakra-ui/react": "1.6.0",
+    "@emotion/react": "11",
+    "@emotion/styled": "11",
+    "framer-motion": "4",
     "file-saver": "^2.0.5",
-    "jszip": "^3.5.0",
+    "jszip": "3.1.5",
     "normalize.css": "^8.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"

diff --git a/public/index.html b/public/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="Web site created using create-snowpack-app" />
-    <title>Snowpack App</title>
+    <meta name="description" content="Download Hitomi" />
+    <title>Heliotrope Download</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -3,17 +3,41 @@ import JSZip from 'jszip'
 import saveAs from 'file-saver'
 import api from './api'
 
+import {
+  ChakraProvider,
+  extendTheme,
+  Progress,
+  Flex,
+  Heading,
+  Text
+} from '@chakra-ui/react'
+
+
+const theme = extendTheme({
+  fonts: {
+    heading: 'Inter, Noto Sans KR',
+    body: 'Inter, Noto Sans KR'
+  },
+  initialColorMode: 'dark'
+})
+
+function getProgress(now, total) {
+  return now / total * 100
+}
 
 function App() {
   const { useState, useEffect } = React
-
-  const [index, setIndex] = useState(0)
+  const [progress, setProgress] = useState(0)
+  const [failed, setFailed] = useState(0)
+  const [tries, setTries] = useState(0)
+  const [isCompress, setIsCompress] = useState(false)
+  const [isComplete, setIsComplete] = useState(false)
 
   async function mainFunc() {
     const params = new URLSearchParams(window.location.search)
     const downloadIndex = params.get("index")
 
-    if (!downloadIndex || !Number.isNaN(downloadIndex)) {
+    if (!downloadIndex || Number.isNaN(downloadIndex)) {
       alert("인자값이 주어지지 않았습니다!")
       return
     }
@@ -29,18 +53,62 @@ function App() {
       const imagesInfo = await imageInfoResponse.json()
 
       let count = 0
+      let failedCount = 0
+      let tries = 0
+      let total = 0
 
-      const downloadImage = imagesInfo.files.map(async (imageInfo, index) => {
-        const image = await fetch(api + "proxy/" + imageInfo.image)
-        const imgBlob = await image.blob()
+      let failedList = []
 
-        imageFolder.file(imageInfo.name, imgBlob)
-        setIndex(count += 1)
-      })
+      function addFailed(url, filename) {
+        failedList.push({ "url": url, "filename": filename })
+        failedCount++
+        setFailed(failedCount)
+      }
+      async function getImage(url, filename) {
 
+        let image
+        try {
+          image = await fetch(url)
+        } catch (e) {
+          addFailed(url, filename)
+        }
+        if (image) {
+          if (image.status != 200) {
+            addFailed(url, filename)
+          }
+          const imgBlob = await image.blob()
+          imageFolder.file(filename, imgBlob)
+          count++
+          setProgress(getProgress(count, total))
+        }
+      }
+
+      const downloadImage = imagesInfo.files.map(async (imageInfo, index) => {
+        total = imagesInfo.files.length
+        await getImage(api + "proxy/" + imageInfo.image, imageInfo.name)
+      })
       await Promise.all(downloadImage)
+      while (failedList.length > 0) {
+        tries++
+        setTries(tries)
+        count = 0
+        failedCount = 0
+        total = failedList.length
+
+        const tryFailed = failedList.map(async (failedDict) => {
+          failedList = failedList.filter(value => {
+            return value["url"] !== failedDict["url"] && value["filename"] !== failedDict["filename"]
+          })
+          return await getImage(failedDict["url"], failedDict["filename"], failedList.length)
+        })
+        await Promise.all(tryFailed)
+      }
+
+      setFailed(0)
+      setIsCompress(true)
       const content = await zip.generateAsync({ type: 'blob' })
       saveAs.saveAs(content, `${downloadIndex}.zip`)
+      setIsComplete(true)
     }
   }
 
@@ -49,11 +117,18 @@ function App() {
   }, [])
 
   return (
-    <div className='App'>
-      <h1>다운로드 중: {index}</h1>
-    </div>
-
-  )
+    <ChakraProvider theme={theme}>
+      <Flex height="100vh" alignItems="center" justifyContent="center">
+        <Flex direction="column" p={12} rounded={6}>
+          {isComplete ? <Heading textAlign="center" mb={7}>다운로드 완료</Heading> : isCompress ? <Heading textAlign="center" mb={7}>압축 중... (시간이 좀 걸릴수도 있어요)</Heading> : <Heading textAlign="center" mb={7}>다운로드중... {Number((progress).toFixed(1))}%</Heading>}
+          <Heading textAlign="center" mb={7}>재시도한 횟수 {tries}회</Heading>
+          <Heading textAlign="center" mb={7}>실패한 항목 수: {failed}개</Heading>
+          <Text fontSize="3xl">실패할경우 실패한 항목만 다시 시도합니다.</Text>
+          <Progress hasStripe value={progress} />
+        </Flex>
+      </Flex>
+    </ChakraProvider >
+  );
 }
 
 export default App;