getting images and titles working

README.md

@@ -45,8 +45,8 @@ Please open up an issue to nudge me to keep the npm packages up-to-date. FYI, it
 2. Clone this repository.
 3. Change the package's `name`, `description`, and `repository` fields in `package.json`.
 4. Change the name of your extension on `src/manifest.json`.
-5. Run `npm install` to install the dependencies.
-6. Run `npm start`
+5. Run `yarn install` to install the dependencies.
+6. Run `yarn start`
 7. Load your extension on Chrome following:
    1. Access `chrome://extensions/`
    2. Check `Developer mode`

package.json

@@ -18,6 +18,7 @@
     "@emotion/styled": "^11.10.4",
     "@hot-loader/react-dom": "^17.0.2",
     "framer-motion": "6.2.4",
+    "pos": "^0.4.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hot-loader": "^4.13.0"
@@ -57,4 +58,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"
   }
-}
+}

src/pages/Newtab/Newtab.jsx

@@ -1,28 +1,62 @@
-import React from 'react';
-import logo from '../../assets/img/logo.svg';
+import React, { useState } from 'react';
 import './Newtab.css';
 import './Newtab.scss';
-import { Text } from '@chakra-ui/react'
+import { Box, Heading, Image } from '@chakra-ui/react';
+import { useEffect } from 'react';
+var pos = require('pos');
+
 const Newtab = () => {
+  const getData = async () => {
+    const data = await fetch('https://www.reddit.com/r/UpliftingNews.json');
+    const json = await data.json();
+
+    const title =
+      json.data.children[Math.floor(Math.random() * json.data.children.length)]
+        .data.title;
+
+    const titleClean = title.replace(/[^a-zA-Z ]/g, '');
+
+    var words = new pos.Lexer().lex(titleClean);
+
+    var tagger = new pos.Tagger();
+    var taggedWords = tagger.tag(words);
+
+    const gmm = taggedWords.filter((word) => word[1] === 'NN');
+
+    const noun = gmm[0][0];
+
+    const image = await fetch(
+      `https://api.unsplash.com/search/photos?client_id=4R_WFGZxzdEW5imhr_k-fnpSPgJINGGTIMnMNKuaLkU&page=1&query=${noun}&count=1`
+    );
+    const jsonImage = await image.json();
+
+    console.log('jsonImage', jsonImage.results.length);
+    const randomIndex = Math.floor(Math.random() * jsonImage.results.length);
+
+    console.log(jsonImage.results[randomIndex].urls.raw);
+
+    return {
+      title,
+      noun,
+      image: jsonImage.results[randomIndex].urls.raw,
+    };
+  };
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    getData().then((data) => {
+      console.log(data);
+      setData(data);
+    });
+  }, []);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text fontSize='20px' color='white'>
-          Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
-        </Text>
-        <Text fontSize='50px' color='tomato'>
-          PLANES
-        </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
+      <Heading position="absolute">{data.title}</Heading>
+      <Box width="100vw" height="100vh">
+        <Image width="100%" height="100%" src={data.image} alt={data.title} />
+      </Box>
     </div>
   );
 };

yarn.lock

@@ -5069,6 +5069,11 @@ popmotion@11.0.3:
     style-value-types "5.0.0"
     tslib "^2.1.0"
 
+pos@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/pos/-/pos-0.4.2.tgz#20e9c77fbeedcc356823cea63c7585cace93be2a"
+  integrity sha512-5HtivCe1HaOqjQZZNhtKrIR1zBvm2FLVVGl4b1poHPZDbXq1BEqYOlmWmetbzqrkRFITxPbEpVgpB03qNS4cSw==
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"