From dab9cf042e6f0e8bf76a1716f751c22e90e08dde Mon Sep 17 00:00:00 2001
From: ioetbc <ioetbc@gmail.com>
Date: Wed, 23 Nov 2022 17:30:28 +0000
Subject: [PATCH] getting images and titles working

---
 README.md                   |  4 +-
 package.json                |  3 +-
 src/pages/Newtab/Newtab.jsx | 74 +++++++++++++++++++++++++++----------
 yarn.lock                   |  5 +++
 4 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 97469b680..8a1f29b9c 100755
--- a/README.md
+++ b/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`
diff --git a/package.json b/package.json
index 2edc88965..f3cf5434a 100755
--- a/package.json
+++ b/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"
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx
index 02da1245b..1c5acfbf6 100644
--- a/src/pages/Newtab/Newtab.jsx
+++ b/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>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 2effd9900..9fc5ebf68 100644
--- a/yarn.lock
+++ b/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"