Scribd
Upload
29 views2 pages

Front End Dashboar

This document describes a React component for a front end dashboard that allows uploading a CSV file containing emails. It then parses the CSV, extracts the emails, and provides functionality to send those emails via an API call along with a message and subject. State is used to track the emails, display text, message, and subject. A useEffect hook is used to make an API call on component mount to stream server logs.

Uploaded by

edgesingh8791
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
29 views2 pages

Front End Dashboar

This document describes a React component for a front end dashboard that allows uploading a CSV file containing emails. It then parses the CSV, extracts the emails, and provides functionality to send those emails via an API call along with a message and subject. State is used to track the emails, display text, message, and subject. A useEffect hook is used to make an API call on component mount to stream server logs.

Uploaded by

edgesingh8791
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

front end dashboar

import React, { useEffect, useState } from 'react';


import Papa from 'papaparse'; // A CSV parsing library
import axios from 'axios';

function Dashboard() {
const[displaytext,setdisplaytext]=useState('')
const [emails, setEmails]=useState([]);
const[textmsg,setTextmsg]=useState('');
const[subject,setSubject]=useState('');
const handleFileUpload = async (event) => {

const file = event.target.files[0];

// Parse CSV file


Papa.parse(file, {
complete: (result) => {
if (result.data && result.data.length > 0) { // Check if result.data exists
and has elements
// Extract emails from CSV and store in an array
const extractedEmails = result.data.map(row => row[0]);
setEmails(extractedEmails);
} else {
console.error('CSV file is empty or invalid');
// Handle the case where CSV file is empty or invalid
}
},
header: false,
});
};
useEffect(()=>{

},[emails])

const handleSendEmails = () => {


useEffect(() => {
console.log("useffect is running")
axios.defaults.withCredentials = true
const eventSource = new EventSource('http://localhost:3006/auth/Dashboard');

eventSource.onmessage = (event) => {


setdisplaytext(prevText => prevText + event.data + '\n');
};

eventSource.onerror = (error) => {


console.error('EventSource error:', error);
eventSource.close(); // Close the event source connection on error
};

return () => {
eventSource.close(); // Clean up the event source connection when component
unmounts
};
}, []);
axios.defaults.withCredentials = true
setdisplaytext("we are Sending Your mails")
axios.post('http://localhost:3006/auth/Dashboard', { emails,textmsg,subject})
.then(res =>{
console.log(res.data.message)
if(res.data.status){
setdisplaytext("true")

}
else{
setdisplaytext('false')
}

})
.catch(err=>{
console.log(err)
setdisplaytext(err)

})
};

return (
<div>
<h2>Upload CSV File</h2>
<h5>{displaytext}</h5>
<input type="file" accept=".csv" onChange={handleFileUpload} />
{/* <input type="text" onChange={handleFileUpload} /> */}
<textarea on onChange={(e)=>setSubject(e.target.value)} placeholder='Enter
Your Subject Here !'> </textarea>
<textarea on onChange={(e)=>setTextmsg(e.target.value)} placeholder=" Enter
Your Message Here !"> </textarea>

<button onClick={handleSendEmails}>Send Emails</button>


</div>
);
}

export default Dashboard;

You might also like