-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.js
49 lines (44 loc) · 1.86 KB
/
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
import React, { useState, useEffect } from 'react';
import alanBtn from '@alan-ai/alan-sdk-web';
import wordsToNumbers from 'words-to-numbers';
import NewsCards from './components/NewsCards/NewsCards';
import useStyles from './styles.js';
const alanKey = '45cdc7e7dbbb9704b5bb35d23ef950fc2e956eca572e1d8b807a3e2338fdd0dc/stage';
const 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') {
const parsedNumber = number.length > 2 ? wordsToNumbers(number, { fuzzy: true }) : number ;
const article = articles[parsedNumber - 1];
if(parsedNumber > 20) {
alanBtn().playText('please try that again.')
}
else if(article) {
window.open(article.url, '_blank');
alanBtn().playText('Opening ...')
}
}
}
})
}, [])
return (
<div>
<div className={classes.logoContainer}>
<img src="https://alan.app/voice/images/previews/preview.jpg" className={classes.alanLogo} alt="logo" />
</div>
<NewsCards articles = {newsArticles} activeArticle={activeArticle} />
</div>
);
}
export default App;