Make download images logic

Author: thedoorbell

src/getData.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+import path from 'path'
+
+const getData = (url) => {
+  const imgExtenstions = ['.png', '.jpg', '.jpeg', '.svg']
+  if (imgExtenstions.includes(path.extname(url).toLowerCase())) {
+    return axios.get(url, { responseType: 'arraybuffer' }).then(response => response.data)
+  }
+  return axios.get(url).then(response => response.data)
+}
+
+export default getData

src/getLinks.js

@@ -0,0 +1,10 @@
+import * as cheerio from 'cheerio'
+
+const getLinks = (html) => {
+  const $ = cheerio.load(html)
+  const imgTags = $('img')
+  const links = imgTags.map((i, tag) => $(tag).attr('src')).get()
+  return links
+}
+
+export default getLinks

src/getPage.js

@@ -1,22 +1,61 @@
 import path from 'path'
 import fsp from 'fs/promises'
-import getPage from './getPage.js'
+import * as cheerio from 'cheerio'
+import getData from './getData.js'
+import getLinks from './getLinks.js'
+import * as prettier from 'prettier'
 
 const getAbsolutePath = dirpath => path.resolve(process.cwd(), dirpath)
 
-const generateFileName = (url) => {
+const generateName = (url) => {
   const href = new URL(url)
-  return (href.hostname + href.pathname).replace(/[^a-zA-Z0-9]/g, '-') + '.html'
+  return (href.hostname + href.pathname).replace(/[^a-zA-Z0-9]/g, '-')
 }
 
 const downloadPage = (url, outputDir) => {
-  const fileName = generateFileName(url)
+  const fileName = generateName(url) + '.html'
   const filePath = path.join(getAbsolutePath(outputDir), fileName)
+  const filesDirName = generateName(url) + '_files'
+  const filesDirPath = path.join(getAbsolutePath(outputDir), filesDirName)
+  let links
+  let $
 
-  return getPage(url)
-    .then(pageData => fsp.writeFile(filePath, pageData)
-      .then(() => filePath))
+  return getData(url)
+    .then((html) => {
+      $ = cheerio.load(html)
+      links = getLinks(html)
+
+      if (links.length === 0) {
+        return null
+      }
+      return fsp.mkdir(filesDirPath)
+    })
+    .then(() => {
+      if (links.length === 0) {
+        return null
+      }
+      return Promise.all(links.map((link) => {
+        const absoluteLink = new URL(link, url).href
+        const imageName = generateName(absoluteLink).replace(/-(?=[a-zA-Z0-9]+$)/, '.')
+        const imagePath = path.join(filesDirPath, imageName)
+
+        return getData(absoluteLink)
+          .then(imgData => fsp.writeFile(imagePath, imgData))
+          .then(() => {
+            $('img').each((i, tag) => {
+              if ($(tag).attr('src') === link) {
+                $(tag).attr('src', path.join(filesDirName, imageName))
+              }
+            })
+          })
+      }),
+      )
+    })
+    .then(() => prettier.format($.html(), { parser: 'html' }))
+    .then(formattedHtml => fsp.writeFile(filePath, formattedHtml))
+    .then(() => filePath)
     .catch((err) => {
+      // console.error('Full error:', err)
       throw new Error(`Error: ${err.message}`)
     })
 }