diff --git a/example.env b/example.env index 1b1b75ed..66872ab7 100644 --- a/example.env +++ b/example.env @@ -1 +1,2 @@ VITE_API_URL=http://localhost:3000/api +VITE_EMAILAPI_URL=https://64.227.135.79/ diff --git a/src/components/Dashboard/scenes/Emails/CheckButton.tsx b/src/components/Dashboard/scenes/Emails/CheckButton.tsx new file mode 100644 index 00000000..2a9bf96e --- /dev/null +++ b/src/components/Dashboard/scenes/Emails/CheckButton.tsx @@ -0,0 +1,43 @@ +// CheckButton.tsx +import React from 'react'; + +interface CheckButtonProps { + isLoading: boolean; + checkApiStatus: () => void; +} +const CheckButton: React.FC = ({ + isLoading, + checkApiStatus, +}) => ( + +); + +export default CheckButton; diff --git a/src/components/Dashboard/scenes/Emails/EmailHistory.tsx b/src/components/Dashboard/scenes/Emails/EmailHistory.tsx new file mode 100644 index 00000000..ecfdcfe9 --- /dev/null +++ b/src/components/Dashboard/scenes/Emails/EmailHistory.tsx @@ -0,0 +1,127 @@ +import React, { useEffect, useState, useCallback } from 'react'; +import axios from 'axios'; +import { useQuery } from '@tanstack/react-query'; +import { EMAILAPI_URL } from '../../../../constants'; + +interface Email { + recipients: string; + subject: string; + status: string; + opened: boolean; + sentTime: string; +} + +const EmailHistory: React.FC<{ refreshCount: number }> = ({ refreshCount }) => { + const [emails, setEmails] = useState([]); + const [isLoading, setIsLoading] = useState(false); + + const fetchEmails = useCallback(() => { + setIsLoading(true); + setTimeout(() => { + axios + .get(`${EMAILAPI_URL}/api/v1/sent`) + .then((response) => { + setEmails( + Array.isArray(response.data.emails) ? response.data.emails : [] + ); + setIsLoading(false); + }) + .catch((error) => { + console.error('Error:', error); + setIsLoading(false); + }); + }, 1000); + }, []); + useEffect(() => { + fetchEmails(); + }, [fetchEmails, refreshCount]); + + return ( +
+
+

History

+ + {isLoading ? ( +
+ <> + + Loading... + +
+ ) : emails.length === 0 ? ( +
+ + 📭 + +

No mails

+
+ ) : ( + + + + + + + + + + + + {emails.map((email, index) => ( + + + + + + + + ))} + +
+ Recipient + + Subject + + Status + + Opened + + Sent Time +
+ {email.recipients} + + {email.subject} + + {email.status} + + {email.opened} + + {new Date(email.sentTime).toLocaleString()} +
+ )} +
+
+ ); +}; + +export default EmailHistory; diff --git a/src/components/Dashboard/scenes/Emails/EmailTemplate.tsx b/src/components/Dashboard/scenes/Emails/EmailTemplate.tsx new file mode 100644 index 00000000..8990610f --- /dev/null +++ b/src/components/Dashboard/scenes/Emails/EmailTemplate.tsx @@ -0,0 +1,184 @@ +// EmailTemplate.tsx +import React from 'react'; + +interface EmailTemplateProps { + subject: string; + body: string; + recipient: string; +} + +const EmailTemplate: React.FC = ({ + subject, + body, + select, +}) => { + return ( +
+
+ + + + +
+ + + + + + + + + + +
+ +
+
+

+ ${subject} +

+

+ Dear ${select}, +

+

+ ${body} +

+

+ Best regards,
+ ScholarX Team,
+ Sustainable Education Foundation. +

+

+ + View Dashboard + + + Join our Slack + +

+
+
+

+ + facebook-icon + + + facebook-icon + + + facebook-icon + + + facebook-icon + +

+

+ © Sustainable Education Foundation - SEF 2024 +

+
+
+
+
+ `, + }} + /> + ); +}; + +export default EmailTemplate; diff --git a/src/components/Dashboard/scenes/Emails/Emails.tsx b/src/components/Dashboard/scenes/Emails/Emails.tsx index fad8a812..3f94db97 100644 --- a/src/components/Dashboard/scenes/Emails/Emails.tsx +++ b/src/components/Dashboard/scenes/Emails/Emails.tsx @@ -1,9 +1,299 @@ -import React from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; +import EmailTemplate from './EmailTemplate'; +import EmailHistory from './EmailHistory'; +import axios from 'axios'; +import CheckButton from './CheckButton'; +import { EMAILAPI_URL } from '../../../../constants'; + const Emails: React.FC = () => { + const [mentees, setMentees] = useState([]); + const [selectedMentees, setSelectedMentees] = useState([]); + const [subject, setSubject] = useState(''); + const [body, setBody] = useState(''); + const [view, setView] = useState('sent'); + const [showRefresh, setShowRefresh] = useState(false); + const [apiStatus, setApiStatus] = useState('Checking...'); + const [emails, setEmails] = useState([]); + const [refreshCount, setRefreshCount] = useState(0); + const [isRefreshing, setIsRefreshing] = useState(true); + const [select, setSelect] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const [message, setMessage] = useState(''); + + const fetchEmails = useCallback(() => { + axios + .get(`${EMAILAPI_URL}/api/v1/sent`) + .then((response) => { + setEmails(response.data.recipient); + }) + .catch((error) => { + console.error('Error:', error); + }); + }, []); + + console.log(EMAILAPI_URL); + useEffect(fetchEmails, []); + + const checkApiStatus = () => { + setIsLoading(true); + axios + .get(`${EMAILAPI_URL}/api/v1/healthcheck`) + .then((response) => { + setTimeout(() => { + if (response.data.status === 'available') { + setApiStatus('Connected'); + } else { + setApiStatus('Disconnected'); + } + }, 1000); + }) + .catch((error) => { + setTimeout(() => { + setApiStatus('Error'); + setMessage(`Error : ${(error as Error).message}`); + }, 1000); + }) + .finally(() => { + setTimeout(() => { + setIsLoading(false); + }, 1000); + }); + }; + useEffect(() => { + checkApiStatus(); + }, []); + + const handleFormSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + const emailData = { + sender: 'mayuraalahakoon@gmail.com', + recipients: selectedMentees, + subject, + body, + }; + setIsLoading(true); + try { + const response = await fetch(`${EMAILAPI_URL}api/v1/send`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(emailData), + }); + console.log(response); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.statusText}`); + } + setMessage('Success: Emails sent!'); + } catch (error) { + setMessage(`Error : ${(error as Error).message}`); + } finally { + setIsLoading(false); + setTimeout(() => { + setIsLoading(false); + }, 1000); + } + }; + + useEffect(() => { + if (message.length > 0) { + const timer = setTimeout(() => { + setMessage(''); + }, 6000); + return () => { + clearTimeout(timer); + }; + } + }, [message]); + return (
-

Emails

+
+

Send Emails

+
+

+ Email API Status:{' '} + + {apiStatus} + + +

+
+ + +
+
+ {view === 'sent' ? ( + <> +
+
+

+ Write Email here +

+
+
+
+ +