diff --git a/package-lock.json b/package-lock.json index 037d7d5..d162073 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,19 @@ "name": "news_app", "version": "0.1.0", "dependencies": { + "@alan-ai/alan-sdk-web": "^1.8.54", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.8", + "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "gh-pages": "^6.1.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -30,6 +36,11 @@ "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz", "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==" }, + "node_modules/@alan-ai/alan-sdk-web": { + "version": "1.8.54", + "resolved": "https://registry.npmjs.org/@alan-ai/alan-sdk-web/-/alan-sdk-web-1.8.54.tgz", + "integrity": "sha512-dcZBXMHkY8BBBO1xaZVdzkPhIh6bastvWjT6LrJrzDIoB7XwegxGtEonqBW0je6o7WBoGipNzEoiQi6F2r/+7w==" + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", @@ -5218,6 +5229,15 @@ "node": ">=8" } }, + "node_modules/array-uniq": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz", + "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/array.prototype.findlast": { "version": "1.2.5", "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz", @@ -5440,6 +5460,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -7260,6 +7303,12 @@ "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.721.tgz", "integrity": "sha512-k1x2r6foI8iJOp+1qTxbbrrWMsOiHkzGBYwYigaq+apO1FSqtn44KTo3Sy69qt7CRr7149zTcsDvH7MUKsOuIQ==" }, + "node_modules/email-addresses": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz", + "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==", + "dev": true + }, "node_modules/emittery": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz", @@ -8462,6 +8511,32 @@ "node": ">=10" } }, + "node_modules/filename-reserved-regex": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz", + "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/filenamify": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz", + "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==", + "dev": true, + "dependencies": { + "filename-reserved-regex": "^2.0.0", + "strip-outer": "^1.0.1", + "trim-repeated": "^1.0.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/filesize": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", @@ -8953,6 +9028,79 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/gh-pages": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz", + "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==", + "dev": true, + "dependencies": { + "async": "^3.2.4", + "commander": "^11.0.0", + "email-addresses": "^5.0.0", + "filenamify": "^4.3.0", + "find-cache-dir": "^3.3.1", + "fs-extra": "^11.1.1", + "globby": "^6.1.0" + }, + "bin": { + "gh-pages": "bin/gh-pages.js", + "gh-pages-clean": "bin/gh-pages-clean.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/gh-pages/node_modules/array-union": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz", + "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==", + "dev": true, + "dependencies": { + "array-uniq": "^1.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/gh-pages/node_modules/commander": { + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", + "dev": true, + "engines": { + "node": ">=16" + } + }, + "node_modules/gh-pages/node_modules/fs-extra": { + "version": "11.2.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz", + "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==", + "dev": true, + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/gh-pages/node_modules/globby": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==", + "dev": true, + "dependencies": { + "array-union": "^1.0.1", + "glob": "^7.0.3", + "object-assign": "^4.0.1", + "pify": "^2.0.0", + "pinkie-promise": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -12767,6 +12915,14 @@ "mkdirp": "bin/cmd.js" } }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -13353,6 +13509,27 @@ "node": ">=0.10.0" } }, + "node_modules/pinkie": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", + "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/pinkie-promise": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", + "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==", + "dev": true, + "dependencies": { + "pinkie": "^2.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/pirates": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", @@ -14806,6 +14983,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -16483,6 +16665,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/strip-outer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz", + "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/style-loader": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz", @@ -16990,6 +17184,18 @@ "node": ">=8" } }, + "node_modules/trim-repeated": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz", + "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==", + "dev": true, + "dependencies": { + "escape-string-regexp": "^1.0.2" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/tryer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", diff --git a/package.json b/package.json index c2a85a3..09620e9 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "@alan-ai/alan-sdk-web": "^1.8.54", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "axios": "^1.6.8", + "moment": "^2.30.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -34,5 +37,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "gh-pages": "^6.1.1" } } diff --git a/public/index.html b/public/index.html index aa069f2..3ef5a57 100644 --- a/public/index.html +++ b/public/index.html @@ -2,6 +2,7 @@ + @@ -24,7 +25,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + News App diff --git a/src/App.css b/src/App.css index 74b5e05..c647f62 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,130 @@ -.App { - text-align: center; -} +/* @import url("https://fonts.googleapi.com/css2?family=Poppins:wght@400;500&display=swap"); */ -.App-logo { - height: 40vmin; - pointer-events: none; +* { + padding: 0; + margin: 0; + /* background-image: url(); */ + /* position: fixed; */ + /* top: 0; */ + /* left: 0; */ } +body{ -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } } - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; +h1 { + text-align: center; + color: #333; /* Default text color */ + /* font-size: 36px; + font-weight: bold; + text-align: center; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + background: linear-gradient(45deg, #ffc107, #ff5722); + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */ + /* position: fixed; */ +} +.head { + width: 30%; + /* position: fixed; */ +} +.main { + /* display: flex; */ + /* text-align: center; */ justify-content: center; - font-size: calc(10px + 2vmin); - color: white; + align-items: center; + height: 100vh; + font-family: Poppins; + flex-direction: column; + /* padding: 20px; */ + /* background-repeat: repeat; */ } -.App-link { - color: #61dafb; +.grid-main { + display: grid; + grid-template-columns: auto auto; + gap: 20px; + + /* padding: 150px; */ +} +.grid-child { + border: 1px solid #e0e0e0; + padding: 30px; + border-radius: 10px; + margin: 10px; + background: wheat; + /* border: 2px solid yellowgreen; */ + /* box-shadow: 0 4px 8px rgba(128, 69, 69, 0.1); + transition: transform 0.3s ease; */ + /* gap: 20px; */ } +/* .grid-child:hover { + transform: scale(1.05); +} */ +.news-image { + width: 50%; + border-radius: 5px; +} +.news-title { + font-size: 20px; + font-weight: 600; +} +.news-content { + font-size: 16px; +} +.new-author { + font-style: italic; + font-size: 14px; + text-align: start; + justify-content: left; +} +.news-date { + font-size: 14px; + text-align: end; + justify-content: end; +} +.space-between { + display: flex; + justify-content: space-around; + margin-top: 20px; + margin-bottom: 20px; +} +.select { + display: flex; + width: 92%; + justify-content: space-around; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + background: linear-gradient(45deg, #ffc107, #ff5722); /* Gradient colors */ + padding: 50px; + border-radius: 10px; + box-shadow: 10px 4px 8px rgba(27, 182, 47, 0.1); + margin-bottom: 100px; +} +.select-box { + width: 100px; + height: 40px; + border: 1px solid #e0e0e0; + outline: none; + padding: 10px; -@keyframes App-logo-spin { - from { - transform: rotate(0deg); + margin-left: 80px; +} +.category { + display: flex; + justify-content: space-around; +} +@keyframes gradient-animation { + 0% { + background-position: 0% 50%; } - to { - transform: rotate(360deg); + 50% { + background-position: 100% 50%; } -} + 100% { + background-position: 0% 50%; + } +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..e4a927e 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,11 @@ -import logo from './logo.svg'; import './App.css'; +import NewsData from "./components/NewsData"; function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
+ <> + + ); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/Service/alanScript.js b/src/Service/alanScript.js new file mode 100644 index 0000000..8e99f50 --- /dev/null +++ b/src/Service/alanScript.js @@ -0,0 +1,9 @@ +intent(`$(item*(,*))`,(p)=>{ + if(p.item.value === 'health'|| p.item.value ==='sports' || p.item.value==='general' || p.item.value === 'business'){ + p.play({command:'VoiceNews',data:p.item.value}); + p.play(`Fetching News on ${p.item.value} Category`); + } + else{ + p.play('Cannot get Data'); + } +}); \ No newline at end of file diff --git a/src/Service/getNews.js b/src/Service/getNews.js new file mode 100644 index 0000000..a478d5f --- /dev/null +++ b/src/Service/getNews.js @@ -0,0 +1,12 @@ +import axios from "axios" +// import React from "react" + +export default function getNews(category){ + const API_Key = `bae04d97470e4ac0865186e7e5d605c6` + const API_Endpoint = + `https://newsapi.org/v2/top-headlines?country=us&category=${category}`; + + + + return axios.get(`${API_Endpoint}&apikey=${API_Key}`); +} \ No newline at end of file diff --git a/src/components/NewsData.js b/src/components/NewsData.js new file mode 100644 index 0000000..47af27d --- /dev/null +++ b/src/components/NewsData.js @@ -0,0 +1,85 @@ +import React, { useEffect, useState } from "react"; +import getNews from "../Service/getNews"; +import moment from "moment"; +import alanBtn from "@alan-ai/alan-sdk-web"; + +export default function NewsData() { + const [newsData, setNewsData] = useState([]); + + const alankey = `acaafcd5954297446d1a7be840ebfc992e956eca572e1d8b807a3e2338fdd0dc/stage`; + + const [selectOption, setSelectionOption] = useState(""); + const getAllNews = async () => { + let data = await getNews(selectOption); + setNewsData(data.data.articles); + }; + // json file assigned to nesData + + const selectCategory = (event) => { + // let data = await getNews(); + setSelectionOption(event.target.value); + }; + + // useEffect(() => { + // alanBtn({ + // key: alankey, + // onCommand: (commandData) => { + // setNewsData(commandData.data) + // } + // }); + // }, []); + + useEffect(() => { + getAllNews(); + }, [selectOption]); + + console.log(newsData?.data?.articles); + return ( +
+
+

News Website

+
+ + + +
+
+
+ {newsData?.map((news) => { + return ( +
+
{news?.title}
+ +

{news?.content}

+ +
+

+ Author:{" "} + {news?.author ? news?.author : "Author name not available"} +

+

+ Date : {moment(news?.publishedAt).format("LL")} +

+
+ + Read More.. + +
+ ); + })} +
+
+ ); +} diff --git a/src/index.js b/src/index.js index d563c0f..40a480d 100644 --- a/src/index.js +++ b/src/index.js @@ -2,16 +2,12 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - - + ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';