import axios from 'axios';
import Router from 'next/router';
import React, { useEffect } from 'react'
import useSWR from 'swr'

const Users = (props) => {
    const address = `/api/users`;
    const fetcher = async (address) => await axios.get(address).then(async (res)=>await res.data);
    const {data, error} = useSWR(address, fetcher, { refreshInterval: 1000 });
    if(error){
        console.log('error in finding data');
    }
    const deletePost = async postID => {
        await fetch(`/api/DeleteUser?id=${postID}`, {
            method: "DELETE",
            headers: {"Content-Type": "application/json"}
        });
        // await Router.reload()
    }
    useEffect((postID)=>{
        deletePost(postID)
    }, [])
  return (
    <>
        <div>Data :
            {data?.map((item, index)=>{
                return(
                <React.Fragment key={item?.id}>
                    <p>{item?.name}</p> 
                    <p>{item?.email}</p>
                    <p>{item?.details?.map((item, index)=>{
                       return(
                        <>
                        <p>{item?.unique_id}</p>
                        <p>{item?.module_version}</p>
                        <p>{item?.language}</p>
                        </>
                       )
                    })}</p>
                    <button onClick={() => deletePost(item.id)} className='btn btn-outline-success'>Delete</button>
                </React.Fragment>
                )
            })}
        </div>
    </>
  )
}

export default Users;