From 54cd97df5a3405e5478d8db9e0cdbc02416130bb Mon Sep 17 00:00:00 2001
From: Priyatham Sai Chand <priyathamsaichand@gmail.com>
Date: Wed, 21 Apr 2021 01:50:56 +0530
Subject: [PATCH] dropdown state fix

---
 src/App.js                 |  1 -
 src/components/Footer.js   |  2 +-
 src/components/Header.js   | 65 ++++++++++++++++++--------------------
 src/components/MainPage.js | 11 +++++--
 src/components/styles.css  | 13 ++++++--
 5 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/src/App.js b/src/App.js
index 016b907..e5ead4c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,7 +9,6 @@ function App() {
   return (
     <div className="App">
       <MainPage />
-      <Footer />
     </div>
   );
 }
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 3339461..c400404 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -9,7 +9,7 @@ export class Footer extends  Component {
 
     render() {
         return(
-            <div className=" theme-light d-flex align-items-center text-center">
+            <div className="d-flex align-items-center text-center">
                 <div className="footer-text">Copyright © 2019</div>
                 <div className="footer-text">HodlInfo.com</div>
                 <div className="footer-text">Developed By <a rel="nofollow" href="https://www.quadbtech.com" target="_blank" style={{color:"#3dc6c1"}}> QuadBTech</a></div>
diff --git a/src/components/Header.js b/src/components/Header.js
index 768c8d9..c44664f 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,12 +1,15 @@
-import React, { useState,Component } from 'react';
+import React, { useState,Component, useEffect } from 'react';
 import './styles.css';
 import {CircularProgressbar} from 'react-circular-progressbar';
 
 import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 export const Header = (props) => {
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-
-  const toggle = () => setDropdownOpen(prevState => !prevState);
+    const [dropdownOpenCurrency, setDropdownOpenCurrency] = useState(false);
+    const [dropdownOpenAsset, setDropdownOpenAsset] = useState(false);
+    const [currency, setCurrency] = useState("INR");
+    const [asset, setAsset] = useState("BTC");
+  const toggleCurrency = () => setDropdownOpenCurrency(prevState => !prevState);
+  const toggleAsset = () => setDropdownOpenAsset(prevState => !prevState);
     return (
         <div style={{padding: "20px 30px 0px"}}>
             <div class=" align-items-center justify-content-sm-center row">
@@ -24,42 +27,36 @@ export const Header = (props) => {
                     </p>
                 </div>
                 <div class="text-center padding-none col-12 col-sm-12 col-md-2 col-lg-4">
-                    <div class="btn-group">
- <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
+ <ButtonDropdown isOpen={dropdownOpenCurrency} toggle={toggleCurrency} >
       <DropdownToggle caret className={"header-button"}>
-        INR
+          {currency}
       </DropdownToggle>
-      <DropdownMenu>
-        <DropdownItem>INR</DropdownItem>
+      <DropdownMenu >
+        <DropdownItem value="INR" onClick={(e) => setCurrency(e.target.value)}>INR</DropdownItem>
       </DropdownMenu>
     </ButtonDropdown>
-                    </div>
-                    &nbsp;
-                    &nbsp;
-                    <div class="btn-group">
 
- <ButtonDropdown isOpen={dropdownOpen} toggle={toggle} className={""}>
-      <DropdownToggle caret className={"header-button"}>
-        ETH
-      </DropdownToggle>
-      <DropdownMenu>
-        <DropdownItem>BTC</DropdownItem>
-        <DropdownItem>ETH</DropdownItem>
-        <DropdownItem>USDT</DropdownItem>
-        <DropdownItem>XRP</DropdownItem>
-        <DropdownItem>TRX</DropdownItem>
-        <DropdownItem>DASH</DropdownItem>
-        <DropdownItem>ZEC</DropdownItem>
-        <DropdownItem>XEM</DropdownItem>
-        <DropdownItem>IOST</DropdownItem>
-        <DropdownItem>WIN</DropdownItem>
-        <DropdownItem>BTT</DropdownItem>
-        <DropdownItem>WRX</DropdownItem>
+<ButtonDropdown isOpen={dropdownOpenAsset} toggle={toggleAsset} >
+   <DropdownToggle caret className={"header-button"}>
+     {asset}
+   </DropdownToggle>
+   <DropdownMenu>
+
+        <DropdownItem value="BTC" onClick={(e) => setAsset(e.target.value)}>BTC</DropdownItem>
+        <DropdownItem value="ETH" onClick={(e) => setAsset(e.target.value)}>ETH</DropdownItem>
+        <DropdownItem value="USDT" onClick={(e) => setAsset(e.target.value)}>USDT</DropdownItem>
+        <DropdownItem value="XRP" onClick={(e) => setAsset(e.target.value)}>XRP</DropdownItem>
+        <DropdownItem value="TRX" onClick={(e) => setAsset(e.target.value)}>TRX</DropdownItem>
+        <DropdownItem value="DASH" onClick={(e) => setAsset(e.target.value)}>DASH</DropdownItem>
+        <DropdownItem value="ZEC" onClick={(e) => setAsset(e.target.value)}>ZEC</DropdownItem>
+        <DropdownItem value="ZEC" onClick={(e) => setAsset(e.target.value)}>XEM</DropdownItem>
+        <DropdownItem value="IOST" onClick={(e) => setAsset(e.target.value)}>IOST</DropdownItem>
+        <DropdownItem value="WIN" onClick={(e) => setAsset(e.target.value)}>WIN</DropdownItem>
+        <DropdownItem value="BTT" onClick={(e) => setAsset(e.target.value)}>BTT</DropdownItem>
+        <DropdownItem value="WRX" onClick={(e) => setAsset(e.target.value)}>WRX</DropdownItem>
       </DropdownMenu>
     </ButtonDropdown>
-                    </div>
-                    <div class="btn-group"><a target="_blank" href="https://wazirx.com/invite/sp7pvbt6?utm_source=finstreet&amp;utm_medium=affiliate&amp;utm_campaign=regnow-btn" type="button" aria-haspopup="true" aria-expanded="false" class="header-button btn btn-secondary">BUY ETH</a>
-                    </div>
+                    <a target="_blank" href="" type="button" aria-haspopup="true" aria-expanded="false" class="header-button btn btn-secondary">BUY {asset}</a>
                 </div>
                 <div class="right-header col-12 col-sm-12 col-md-5 col-lg-4">
                     <div class="d-inline-flex flex-wrap align-items-center justify-content-center">
@@ -72,7 +69,7 @@ export const Header = (props) => {
                         </a>
 <div className="d-inline-flex flex-wrap align-items-center justify-content-center">
                                 <div className="progress-bar-wrapper">
-                                    <CircularProgressbar value={100} text={"4"} />
+                                    <CircularProgressbar  value={parseFloat(props.countDownTimer * 100 / 60.0)} text={`${props.countDownTimer}`}/>
                                 </div>
                             <div className="margin-10 d-inline-block">
                                 <label className="switch">
diff --git a/src/components/MainPage.js b/src/components/MainPage.js
index a5260c8..7001f41 100644
--- a/src/components/MainPage.js
+++ b/src/components/MainPage.js
@@ -1,8 +1,14 @@
-import React, { useState, Component } from 'react';
+import React, { useState,useEffect, Component } from 'react';
 import "./styles.css";
 import {Header} from "./Header";
+import {Footer} from "./Footer";
+import 'react-circular-progressbar/dist/styles.css';
 export const MainPage = () => {
     const [isLightTheme, setIsLightTheme ] = useState(false);
+    const [countDownTimer, setCountDownTimer] = useState(60);
+  useEffect(() => {
+    countDownTimer > 0 && setTimeout(() => setCountDownTimer(countDownTimer - 1), 1000);
+  }, [countDownTimer])
 const onThemeButtonClick = () => {
     setIsLightTheme(!isLightTheme)
 
@@ -10,7 +16,7 @@ const onThemeButtonClick = () => {
     return (
         <React.Fragment>
             <div className={("theme-") + (isLightTheme ? "light" : "dark")+(" padding-bottom-50")}>
-            <Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } />
+            <Header isLightTheme={isLightTheme} onThemeButtonClick={onThemeButtonClick } countDownTimer={countDownTimer}/>
             <div class="Container-fluid " style={{ padding: "0px 30px" }}>
                 <div class="d-flex justify-content-around align-items-center average-header" style={{ padding: "10px 0px" }}>
                     <div class="text-center">
@@ -126,6 +132,7 @@ const onThemeButtonClick = () => {
                 <a target="_blank" href="https://ftx.com/#a=finstreet">
                     <img src="BannerFTXNews.png" style={{ width: "100%" }} /></a>
             </div>
+            <Footer />
         </div>
 
         </React.Fragment>
diff --git a/src/components/styles.css b/src/components/styles.css
index a55b8a6..573fa27 100644
--- a/src/components/styles.css
+++ b/src/components/styles.css
@@ -224,8 +224,11 @@
  .theme-light .header-button {
 	 color: #0c0f48;
 	 background-color: #f8f9fa;
-	 border: 0px;
-	 box-shadow: 0 0 2px #ddd;
+	 border-radius: 10px;
+  margin: 10px;
+  padding: 6px 20px;
+  border-radius: 10px;
+  border: 0;
 }
  .theme-light .toggle-button-circle {
 	 height: 20px;
@@ -309,7 +312,11 @@
  .theme-dark .header-button {
 	 background-color: #2e3241;
 	 color: white;
-	 border: 0px;
+	 border-radius: 10px;
+  margin: 10px;
+  padding: 6px 20px;
+  border-radius: 10px;
+  border: 0;
 }
  .theme-dark .toggle-button-circle {
 	 height: 30px;