added new functionalities to the app

package.json

@@ -3,13 +3,21 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@alan-ai/alan-sdk-web": "^1.8.34",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@material-ui/styles": "^4.11.5",
+    "@mui/material": "^5.8.6",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.27.2",
+    "classnames": "^2.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "words-to-numbers": "^1.5.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,23 +1,65 @@
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import alanBtn from "@alan-ai/alan-sdk-web";
+import { useEffect } from "react";
+import { useState } from "react";
+import Cards from "./components/NewsCards/Cards";
+import useStyles from "./styles";
+
+
+const alanKey = '99c57d7f632c1906ce3c27fffccad7092e956eca572e1d8b807a3e2338fdd0dc/stage';
 
 function App() {
+
+  const [newsArticles, setnewsArticles] = useState([]);
+  const [activeArticle, setactiveArticle] = useState(-1);
+  const classes = useStyles();
+
+  useEffect(() => {
+
+
+    alanBtn({
+
+      key: alanKey,
+      onCommand: ({ command, articles, number }) => {
+        if (command === 'newHeadlines') {
+          setnewsArticles(articles);
+          setactiveArticle(-1);
+        }
+        else if (command === 'highlight') {
+          setactiveArticle((prevActiveArticle) => prevActiveArticle + 1);
+        }
+        else if (command === 'open') {
+
+          if (number > articles.length) {
+            alert("out of bounds. Try opening different article.");
+          }
+          else {
+            window.open(articles[number - 1].url, '_blank');
+          }
+        }
+      }
+    })
+
+
+  }, [])
+
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <div className={classes.logoContainer}>
+        <img src="https://miro.medium.com/max/600/1*CJyCnZVdr-EfgC27MAdFUQ.jpeg" alt="logo" className={classes.alanLogo} />
+        <div className={classes.ins}>
+          <h3 style={{textAlign:'center'}}>General Instructions:</h3>
+          <ul>
+            <li>Try starting with "What is this app for?"</li>
+            <li>You can say "Go back" to return to the homepage from the headlines page.</li>
+          </ul>
+        </div>
+      </div>
+      <Cards
+        articles={newsArticles}
+        activeArticle={activeArticle}
+      />
     </div>
   );
 }

src/components/NewsCard/Card.js

@@ -1,26 +1,43 @@
-import React from 'react'
+import React, { useState, useEffect, createRef } from 'react'
 import { Card, Typography, CardActionArea, CardActions, CardContent, CardMedia, Button } from "@mui/material"
 import useStyles from "./styles"
+import classNames from "classnames";
 
-const NewsCard = ({ article: { description, publishedAt, source, title, url, urlToImage }, i }) => {
+const NewsCard = ({ article: { description, publishedAt, source, title, url, urlToImage }, activeArticle, i }) => {
 
     const classes = useStyles();
+    const [elRefs, setelRefs] = useState([]);
+    const scrollToRef = (ref) => window.scroll(0, ref.current.offsetTop - 50);
+
+    useEffect(() => {
+        setelRefs((refs) => Array(40).fill().map((_, j) => refs[j] || createRef()));
+    }, []);
+
+    useEffect(() => {
+
+        if (i === activeArticle && elRefs[activeArticle]) {
+            scrollToRef(elRefs[activeArticle]);
+        }
+
+    }, [i, activeArticle, elRefs])
 
     return (
-        <Card className={classes.card}>
+        <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://w7.pngwing.com/pngs/150/410/png-transparent-newspaper-computer-icons-journalist-news-corporation-business-text-people-logo.png'} />
-                <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 className={classes.just}>
+                    <div className={classes.details}>
+                        <Typography variant='subtitle2' color="textSecondary" component="h6" lineHeight={0.9}>{(new Date(publishedAt)).toDateString()}</Typography>
+                        <Typography variant='subtitle2' color="textSecondary" component="h6" lineHeight={0.9}>{source.name}</Typography>
+                    </div>
+                    <Typography className={classes.title} variant='subtitle1' letterSpacing={0.2} lineHeight={1}><strong>{title}</strong></Typography>
+                    <CardContent>
+                        <Typography fontSize='12px' color="textSecondary" component="h6">{description}</Typography>
+                    </CardContent>
                 </div>
-                <Typography className={classes.title} gutterBottom variant='h5'>{title}</Typography>
-                <CardContent>
-                    <Typography variant='body2' color="textSecondary" component="p">{description}</Typography>
-                </CardContent>
             </CardActionArea>
             <CardActions className={classes.cardActions}>
-                <Button size='small' color='primary'>Learn More</Button>
+                <Button size='small' color='primary'>To open the article say: Open article number</Button>
                 <Typography variant='h5' color="textSecondary">{i + 1}</Typography>
             </CardActions>
         </Card>

src/components/NewsCard/styles.js

@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/styles";
 export default makeStyles({
 
     media: {
-        height: 250,
+        height: 175,
     },
     border: {
         border: 'solid',
@@ -16,6 +16,8 @@ export default makeStyles({
         flexDirection: 'column',
         justifyContent: 'space-between',
         borderBottom: '10px solid white',
+        maxHeight:'700px',
+        margin:'7px',
     },
     activeCard: {
         borderBottom: '10px solid #22289a',
@@ -26,14 +28,17 @@ export default makeStyles({
     details: {
         display: 'flex',
         justifyContent: 'space-between',
-        margin: '20px',
+        margin: '8px 10px',
     },
     title: {
-        padding: '0 16px',
+        padding: '0 10px',
     },
     cardActions: {
         padding: '0 16px 8px 16px',
         display: 'flex',
         justifyContent: 'space-between',
     },
+    just:{
+        textAlign:'justify'
+    }
 });

src/components/NewsCards/Cards.js

@@ -3,17 +3,53 @@ import { Grid, Grow, Typography } from "@mui/material";
 import NewsCard from "../NewsCard/Card";
 import useStyles from "./styles";
 
-const Cards = ({ articles }) => {
+const infoCards = [
+    { color: '#42188d', title: 'Miscellaneous', text: 'Give me the latest news, What is the weather/temprature in.., or some general conversation with Alan' },
+    { color: '#1565c0', title: 'News by Categories', info: 'Business, Entertainment, General, Health, Science, Sports, Technology', text: 'Give me the latest Technology news' },
+    { color: '#2527a0', title: 'News by Terms', info: 'Bitcoin, PlayStation 5, Smartphones, Donald Trump...', text: 'What\'s up with PlayStation 5' },
+    { color: '#187593', title: 'News by Sources', info: 'CNN, Wired, BBC News, Time, IGN, Buzzfeed, ABC News...', text: 'Give me the news from CNN' },
+];
+
+
+const Cards = ({ articles, activeArticle }) => {
 
     const classes = useStyles();
+
+
+    if (!articles.length) {
+        return (
+
+            <Grow in>
+                <Grid className={classes.container} container alignItems="stretch" spacing={3}>
+                    {infoCards.map((infoCard) => (
+                        <Grid item xs={12} sm={6} md={4} lg={3} className={classes.infoCard}>
+                            <div className={classes.card} style={{ backgroundColor: infoCard.color }} >
+                                <Typography variant='h6' >{infoCard.title}</Typography>
+                                {infoCard.info ?
+                                    (<Typography variant='subtitle1'>
+                                        <strong>{infoCard.title.split(' ')[2]}:</strong>
+                                        <br />
+                                        {infoCard.info}
+                                    </Typography>) : null
+                                }
+                                <Typography variant='subtitle2' className={classes.sample}>Try Saying: <br /><i>{infoCard.text}</i></Typography>
+                            </div>
+                        </Grid>
+                    ))}
+                </Grid>
+            </Grow>
+
+        )
+    }
+
     return (
 
         <Grow in>
             <Grid className={classes.container} container alignItems="stretch" spacing={3}>
                 {articles.map((article, i) => (
 
                     <Grid item xs={12} sm={6} md={4} lg={3} display="flex">
-                        <NewsCard article={article} i={i} />
+                        <NewsCard article={article} activeArticle={activeArticle} i={i} />
                     </Grid>
                 ))}
             </Grid>

src/components/NewsCards/styles.js

@@ -6,5 +6,25 @@ export default makeStyles({
         padding: '0 5%',
         width: '100%',
         margin: '0'
+    },
+    card: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '100%',
+        height: '45vh',
+        padding: '10%',
+        borderRadius: 10,
+        color: 'white'
+    },
+    infoCard: {
+        display: 'flex',
+        flexDirection: 'column',
+        textAlign: 'center',
+        fontSize: '20%'
+    },
+    sample: {
+        color: 'yellow',
     }
 });

src/index.css

@@ -1,13 +1,17 @@
+*{
+  box-sizing: border-box;
+}
+
+html, body{
+  height: 100vh;
+}
+
 body {
+
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  padding: 0;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+html{
+  scroll-behavior: smooth;
+}