Merge pull request #1 from Siddharth352/master

README.md

@@ -1,23 +1,20 @@
-# Crypto Currency Tracker
+# Cryptocurrency Tracker with React JS, Material UI and Chart JS
 
-## Featues Todo
+## [Watch Full Tutorial on Youtube here](https://youtu.be/QA6oTpMZp84)
 
-- [x] Design Similar to https://www.binance.com/en
-- [x] Charts for historical data
-- [x] carousel for trending coins
-- [x] Market Capitalization | 24h Trading Volume | # of Coins
-- [ ] Currency Object
+[![crypto](https://user-images.githubusercontent.com/51760520/136682357-5d269bb9-0e36-4f26-a468-fb2963dd9468.png)](https://youtu.be/QA6oTpMZp84)
 
-## Table Rows
+## Demo
+#### Here is a working live demo :  https://crypto-hunter.netlify.app/
 
-- [x] Star | Coin | ID | Price | 24hChange% | Market Cap
+## Built with 
 
-## Optional Features
+- [React JS](https://reactjs.org/)
+- [Material UI](https://v4.mui.com/)
+- [Chart JS](https://reactchartjs.github.io/react-chartjs-2/#/)
 
-- [ ] Firebase Authentication
-- [ ] Add to Wishlist
+## Made with ♥ By [Roadside Coder](https://www.youtube.com/channel/UCIPZVAwDGa-A4ZJxCBvXRuQ)
 
-## Pics
+[![Piyush Agarwal](https://avatars1.githubusercontent.com/u/51760520?v=3&s=144)](https://github.com/piyush-eon)
 
-- Banner
-  https://www.freepik.com/free-vector/gradient-network-connection-background_12643219.htm#page=1&query=futuristic&position=3
+MIT © [Piyush Agarwal ](https://github.com/piyush-eon)

src/components/CoinInfo.js

@@ -16,6 +16,7 @@ const CoinInfo = ({ coin }) => {
   const [historicData, setHistoricData] = useState();
   const [days, setDays] = useState(1);
   const { currency } = CryptoState();
+  const [flag,setflag] = useState(false);
 
   const useStyles = makeStyles((theme) => ({
     container: {
@@ -39,7 +40,7 @@ const CoinInfo = ({ coin }) => {
 
   const fetchHistoricData = async () => {
     const { data } = await axios.get(HistoricalChart(coin.id, days, currency));
-
+    setflag(true);
     setHistoricData(data.prices);
   };
 
@@ -62,7 +63,7 @@ const CoinInfo = ({ coin }) => {
   return (
     <ThemeProvider theme={darkTheme}>
       <div className={classes.container}>
-        {!historicData ? (
+        {!historicData | flag===false ? (
           <CircularProgress
             style={{ color: "gold" }}
             size={250}
@@ -108,7 +109,9 @@ const CoinInfo = ({ coin }) => {
               {chartDays.map((day) => (
                 <SelectButton
                   key={day.value}
-                  onClick={() => setDays(day.value)}
+                  onClick={() => {setDays(day.value);
+                    setflag(false);
+                  }}
                   selected={day.value === days}
                 >
                   {day.label}