added homepage and blogs section

mmuazam98 · Jul 1, 2021 · 6c713ce · 6c713ce
1 parent 1d161fd
commit 6c713ce
Show file tree

Hide file tree

Showing 34 changed files with 31,919 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "ai-news-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@alan-ai/alan-sdk-web": "^1.3.1",
+    "@material-ui/core": "^4.11.0",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.5.0",
+    "@testing-library/user-event": "^7.2.1",
+    "bootstrap": "^5.0.2",
+    "classnames": "^2.2.6",
+    "react": "^16.13.1",
+    "react-bootstrap": "^1.6.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.3",
+    "words-to-numbers": "^1.5.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <!-- Start of Async Drift Code -->
+<script>
+  "use strict";
+
+  !function() {
+    var t = window.driftt = window.drift = window.driftt || [];
+    if (!t.init) {
+      if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
+      t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], 
+      t.factory = function(e) {
+        return function() {
+          var n = Array.prototype.slice.call(arguments);
+          return n.unshift(e), t.push(n), t;
+        };
+      }, t.methods.forEach(function(e) {
+        t[e] = t.factory(e);
+      }), t.load = function(t) {
+        var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
+        o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
+        var i = document.getElementsByTagName("script")[0];
+        i.parentNode.insertBefore(o, i);
+      };
+    }
+  }();
+  drift.SNIPPET_VERSION = '0.3.1';
+  drift.load('98993g9n2gp4');
+  </script>
+  <!-- End of Async Drift Code -->
+
+    <title>College-Made-Simpler</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import Blogs from './components/articles/blogs';
+import Home from './pages/Home/Home';
+import {Route,BrowserRouter as Router, Switch} from "react-router-dom";
+
+const App = () => {
+
+	return(
+
+	<Router>
+		<Switch>
+		<Route path="/" exact component={Home}/>
+		<Route path="/Home" exact component={Home}/>
+		<Route path="/Blogs" component={Blogs}/>
+		</Switch>
+	</Router>
+	);
+}
+
+export default App; 
diff --git a/src/assets/articles.gif b/src/assets/articles.gif
diff --git a/src/assets/banner.png b/src/assets/banner.png
diff --git a/src/assets/blogs.png b/src/assets/blogs.png
diff --git a/src/assets/courses.png b/src/assets/courses.png
diff --git a/src/assets/footer.png b/src/assets/footer.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/poll.png b/src/assets/poll.png
diff --git a/src/components/NewsCard/NewsCard.js b/src/components/NewsCard/NewsCard.js
@@ -0,0 +1,46 @@
+import React, {useState, useEffect, createRef} from 'react';
+import {Card, CardActions, CardActionArea, CardContent, CardMedia, Button, Typography} from '@material-ui/core';
+import useStyles from './styles';
+import classNames from 'classnames';
+
+const NewsCard = ({article: {description, publishedAt, source, title, url, urlToImage }, i, activeArticle}) => {  
+	const classes = useStyles();
+	const [elRefs, setElRefs] = useState([]);
+	const scrollToRef = (ref) => window.scroll(0, ref.current.offsetTop-50)
+
+	useEffect(() => {
+		setElRefs((refs) => Array(20).fill().map((_,j) => refs[j] || createRef()))
+	}, [])
+
+	useEffect(() => {
+		if (i === activeArticle && elRefs[activeArticle] ) {
+			scrollToRef(elRefs[activeArticle]);
+		}
+	}, [i, activeArticle, elRefs])
+
+	return(
+
+		<Card ref={elRefs[i]} className={classNames(classes.card, activeArticle===i ? classes.activeCard: null)}>	
+			<CardActionArea href={url} target='_blank'>
+				<CardMedia className={classes.media} image={urlToImage || 'https://p0.pikrepo.com/preview/551/424/news-closeup-photo.jpg'} />
+					<div className={classes.details}>
+						<Typography variant='body2' color='textSecondary' component='h2'> {(new Date(publishedAt)).toDateString()} </Typography>
+						<Typography variant='body2' color='textSecondary' component='h2'> {source.name} </Typography>
+					</div>
+					<Typography className={classes.title} gutterBottom variant='h4'> {title} </Typography>
+					<CardContent>
+						<Typography variant='body2' color='textSecondary' component='p'> {description} </Typography>
+					</CardContent>
+					<CardActions className={classes.cardActions}>
+						<Button size='medium' color='primary'>Read More</Button>
+						<Typography variant='h4' color='textSecondary'> {i+1} </Typography>
+					</CardActions>
+			</CardActionArea>
+
+		</Card>
+
+
+	);
+}
+
+export default NewsCard;
diff --git a/src/components/NewsCard/styles.js b/src/components/NewsCard/styles.js
@@ -0,0 +1,39 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export default makeStyles({
+  media: {
+    height: 250,
+  },
+  border: {
+    border: 'solid',
+  },
+  fullHeightCard: {
+    height: '100%',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderBottom: '10px solid white', 
+  },
+  activeCard: {
+    borderBottom: '10px solid #22289a',
+  },
+  grid: {
+    display: 'flex',
+  },
+  details: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    margin: '20px',
+  },
+  title: {
+    padding: '0 16px',
+  },
+  cardActions: {
+    padding: '0 16px 8px 16px',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+});
diff --git a/src/components/NewsCards/NewsCards.js b/src/components/NewsCards/NewsCards.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import NewsCard from '../NewsCard/NewsCard';
+import {Grid, Grow, Typography} from '@material-ui/core';
+import useStyles from './styles';
+
+const infoCards = [
+  { color: '#3baf8a', title: 'Latest Tech Articles/Blogs', info: 'React, Angular, Javascript, Science, Technology', text: 'Give me the latest Articles' },
+  { color: '#F6BA3B', title: 'Articles By Categories', info: 'React, Angular, Javascript, Science, Technology', text: 'Give me the latest Technology' },
+  { color: '#ba55d3', title: 'Tech articles/blogs by Sources', info: 'Medium, Stackoverflow, Reddit', text: 'Give me the news from CNN' },
+];
+
+const NewsCards = ({articles, activeArticle}) => {
+	const classes = useStyles();
+
+	if(!articles.length) {
+		return(
+			<Grow in>
+			<Grid className={classes.container} container alignItems="stretch" spacing = {4}>
+				{
+					infoCards.map(infoCard => (
+						<Grid className={classes.infoCard} item xs={12} sm={6} md={4} lg={4}>
+							<div className={classes.card} style={{backgroundColor: infoCard.color}} >
+								<Typography variant='h4'>{infoCard.title}</Typography>
+								{
+									infoCard.info ? 
+									(<Typography variant='h4'>
+										<strong>
+											{infoCard.title.split(' ')[2]}	
+										</strong>
+											<br />
+											{infoCard.info}
+									</Typography>) : null
+								}
+								<Typography variant='h4'>Try Saying: <br/> <i>{infoCard.text}</i> </Typography>
+
+							</div>
+							<br/><br/><br/>
+						</Grid>
+					))
+				}
+			</Grid>
+
+			</Grow>
+		)
+	}
+
+	return(
+
+		<Grow in>
+
+			<Grid className={classes.container} container alignItems="stretch" spacing = {4}>
+
+			{
+				articles.map((article, i) => (   //Parenthesis in map function for instant return
+					<Grid item xs={12} sm={6} md={4} lg={3} style={{display: 'flex'}} >
+						<NewsCard article={article} activeArticle={activeArticle} i={i} />
+					</Grid>
+				))
+			}
+
+			</Grid>
+
+		</Grow>
+
+	);
+}
+
+export default NewsCards;
diff --git a/src/components/NewsCards/styles.js b/src/components/NewsCards/styles.js
@@ -0,0 +1,25 @@
+import {makeStyles} from '@material-ui/core/styles';
+
+export default makeStyles({
+	card: {
+	    display: 'flex',
+		flexDirection: 'column',
+		justifyContent: 'space-between',
+		alignItems: 'center',
+		width: '100%',
+		height: '50vh',
+		padding: '10%',
+		borderRadius: 5,
+		color: 'white',
+	},
+	infoCard: {
+		display: 'flex', 
+		flexDirection: 'column', 
+		textAlign: 'center',
+	},
+	container: {
+		padding: '0 6%',
+		width: '100%',
+		margin: '0',
+	}
+})