Need to make this clean

package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "axios": "^0.24.0",
     "classnames": "^2.2.6",
     "jump.js": "^1.0.2",
     "next": "^10.0.4",

src/components/BlockBlogPosts/index.js

@@ -7,26 +7,23 @@ export default ({ posts }) => (
     <ul className="BlockBlogPosts__list">
       {posts.map(
         ({
-          itemType: {
-            post: {
-              clapCount,
-              id,
-              mediumUrl,
-              previewContent: { bodyModel: { paragraphs } },
-            },
-          },
+          clapCount,
+          id,
+          title,
+          mediumUrl,
+          previewContent: { subtitle },
+          previewImage: { id: imageId },
         }) => (
           <BlogPost
             className="BlockBlogPosts__list-item"
             key={id}
-            title={paragraphs[1].text}
-            description={paragraphs[2].text}
+            title={title}
+            description={subtitle}
             claps={clapCount}
             mediumUrl={mediumUrl}
             cover={{
-              url: paragraphs[0].metadata.id,
-              width: paragraphs[0].metadata.originalWidth,
-              height: paragraphs[0].metadata.originalHeight,
+              url: `https://miro.medium.com/max/4720/${imageId}`,
+              width: 680,
             }}
           />
         ),

src/components/BlogPost/index.js

@@ -7,11 +7,7 @@ export default ({ className, mediumUrl, title, description, claps, cover }) => (
     <a href={mediumUrl} rel="noopener" target="_blank">
       <article>
         <figure itemProp="image" itemType="http://schema.org/ImageObject">
-          <img
-            src={`https://cdn-images-1.medium.com/max/800/${cover.url}`}
-            width={cover.width}
-            alt={title}
-          />
+          <img src={cover.url} width={cover.width} alt={title} />
         </figure>
         <header className="BlogPost__header BlogPost--content">
           <h2 className="BlogPost__title">{title}</h2>

yarn.lock

@@ -512,6 +512,13 @@ atob@^2.1.1:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+axios@^0.24.0:
+  version "0.24.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+  dependencies:
+    follow-redirects "^1.14.4"
+
 [email protected]:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -1607,6 +1614,11 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@^1.14.4:
+  version "1.14.5"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
+  integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"