import React, { useEffect } from "react"; import { useSelector, useDispatch } from "react-redux"; import { getStatus } from "../../actions/popwordsActions"; import { Card } from "@material-ui/core"; import { makeStyles, Button } from "@material-ui/core"; import CardContent from "@material-ui/core/CardContent"; import Typography from "@material-ui/core/Typography"; import RefreshIcon from "@material-ui/icons/Refresh"; import Scrollbars from "react-custom-scrollbars"; const useStyles = makeStyles({ root: { width: 700, height: 350, margin: "1%", marginTop: "0!important", display: "flex", justifyContent: "space-between", "@media (max-width: 890px)": { maxWidth: "600px", }, "@media (max-width: 700px)": { maxWidth: "390px", }, }, title: { fontSize: 40, fontFamily: "Roboto Condensed", fontWeight: "Bold", lineHeight: "100%", }, words: { fontSize: 18, "@media (max-width: 890px)": { fontSize: 14, }, // "@media (max-width: 700px)": { // fontSize: 9, // }, }, }); export default function Success({ handleAnalysisUpdate }) { const classes = useStyles(); const dispatch = useDispatch(); const { topics, processing, queued } = useSelector((state) => state.popWords); const { twitter_handle } = useSelector((state) => state.user); const colors = ["blue", "green", "red", "purple", "black"]; useEffect(() => { if (processing || queued) { const interval = setInterval(async () => { await dispatch(getStatus(twitter_handle)); }, 20000); return () => clearInterval(interval); } else { } }, [processing, queued, dispatch, twitter_handle]); return ( topics.length > 0 && ( <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", width: "700px", }} className={classes.root} > <Card className={classes.root} style={{ maxHeight: 300, overflowY: "auto" }} > <Scrollbars> <div style={{ padding: "0 5%" }}> <CardContent> <div style={{ display: "flex", justifyContent: "space-between" }} > <Typography className={classes.title} style={{ color: "#00BB78" }} > Success! </Typography> {(processing || queued) && ( <Typography variant="caption"> Status:{" "} {processing ? "Processing update" : queued && "Queued"} </Typography> )} </div> <Typography style={{ color: "#4E4E4E", fontSize: "14!important", fontWeight: "bolder", }} > Here are the most popular words your followers are engaging with </Typography> <Typography style={{ color: "#4E4E4E", fontSize: "12!important" }} > Grouped by topic </Typography> </CardContent> <div style={{ display: "flex", justifyContent: "space-between" }}> {topics.map((topic, topicIndex) => ( <CardContent key={topicIndex}> {topic.map((word, index) => ( <Typography className={classes.words} style={{ color: colors[topicIndex] }} key={index} > {" "} {word}{" "} </Typography> ))} </CardContent> ))} </div> </div> </Scrollbars> </Card> <div style={{ textAlign: "right", marginBottom: "8px" }}> <Button onClick={handleAnalysisUpdate}> Request analysis update <RefreshIcon /> </Button> </div> </div> ) ); }