import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { getSubredditData } from "./subredditSlice"; import SubredditBarGraph from "../../Components/Graphs/Subreddit_Graph/subredditBarGraph"; function Subreddit() { const dataR = []; const dispatch = useDispatch(); const [subreddit, setSubreddit] = useState(""); const [error, setError] = useState(null); const subredditD = useSelector((state) => state.subreddit); const handleClick = async (event) => { event.preventDefault(); dispatch(getSubredditData()); }; let Graph = null; if (subredditD.status === "loading") { console.log("This is loading"); Graph = <p>This is loading</p>; } if (subredditD.status === "succeeded") { console.log("This succeeded"); const data = subredditD.data; for (const [key, value] of Object.entries(data.author)) { dataR.push({ author: key, comments: value, }); } console.log(dataR); Graph = <SubredditBarGraph data={dataR} />; } if (subredditD.status === "failed") { Graph = <p>This Failed</p>; } return ( <> <form onSubmit={handleClick}> <label> Enter subreddit name: <input type="text" value={subreddit} onChange={(e) => setSubreddit(e.target.value)} /> </label> <input type="submit" /> </form> {Graph} </> ); } export default Subreddit;