
import React,{Component} from 'react';
import axios from 'axios';
import { useState,useEffect } from "react";
import {Link} from 'react-router-dom';
import Wallet from './Wallet';
import { io } from 'socket.io-client';
import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css'; // Import css

export default function UserDashboard (){
    
    const [metals,setMetals]=useState([]);
    
    useEffect(() => {
        var userid= localStorage.getItem('userid');
        const interval = setInterval(() => {
            fetch('https://capitalsgrowth.in/Rest/metals_api/'+userid).then((response)=>response.json())
            .then((responseJson)=>{
              // console.log(responseJson);
               setMetals(responseJson);
            }).catch((error)=>{
              console.log(error)
            });
        }, 1000);
        return () => clearInterval(interval);
      }, []);


        return (     
            <>
            <Wallet/>
            <div className="section mt-2">
            <div className="section-title" style={{color:'#fff'}}>Live MCX WatchList</div>
            <div className="transactions">
            {metals.map(m => (
                <Link to={'/addtrade/'+m.metal} className="item">
                    <div className="detail">
                       <div>
                            <strong>{m.metal}</strong>
                            <p>O {m.open} &nbsp;&nbsp;&nbsp; H {m.high}&nbsp;&nbsp;&nbsp; L {m.low}</p>
                        </div>
                    </div>
                    <div className="right">
                        <div className="price" style={{color:m.color}}>{m.rate}</div>
                        {m.chg>0 &&
                        <span className='badge badge-success'>chg {m.chg}</span>}
                        {m.chg<0 &&
                        <span className='badge badge-danger'>chg {m.chg}</span>}
                    </div>
                </Link>))}
            </div>
        </div>   
            </> 
        );
    }



