feat(App): add style

Saebasol · May 26, 2021 · c164811 · c164811
1 parent 530deb9
commit c164811
Show file tree

Hide file tree

Showing 4 changed files with 1,796 additions and 634 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,44 +3,105 @@ 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
     }
     if (window.confirm("브라우저의 한계로 많은 이미지는 다운로드 할수 없을수도 있습니다. 시도하시겠습니까?")) {
       const zip = new JSZip()
       const imageFolder = zip.folder(downloadIndex)
-
+  
       const imageInfoResponse = await fetch(api + `hitomi/images/${downloadIndex}`)
       if (imageInfoResponse.status == 404) {
         alert("찾을수 없습니다.")
         return
       }
-      const imagesInfo = await imageInfoResponse.json()
-
+      const imagesInfo = 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)
-      })
+      async function getImage(url, filename) {
+        let image
+        try{
+          image = await fetch(url)
+        } catch (e){
+          failedList.push({"url":url, "filename":filename})
+          failedCount++
+          setFailed(failedCount)
+        }
+        if(image){
+          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 +110,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;