Working on proxy

racxam · Jun 4, 2024 · a0c0253 · a0c0253
1 parent fcbbcba
commit a0c0253
Show file tree

Hide file tree

Showing 7 changed files with 203 additions and 59 deletions.
diff --git a/api/send-email.js b/api/send-email.js
@@ -0,0 +1,69 @@
+const express = require('express');
+const axios = require('axios');
+const bodyParser = require('body-parser');
+const cors = require('cors'); // Import CORS
+const app = express();
+const port = process.env.PORT || 5001; // Ensure this matches the port in setupProxy.js
+
+app.use(cors()); // Use CORS middleware
+app.use(bodyParser.json());
+
+app.post('/send-email', async (req, res) => {
+    const { book, chapter, suggestedTitle, chapterSubtitles, keywords, proposal, authors } = req.body;
+
+    const htmlbody = `
+        <div>
+            <h3>Book Proposal Submission</h3>
+            <p><strong>Book:</strong> ${book}</p>
+            <p><strong>Chapter:</strong> ${chapter}</p>
+            <p><strong>Suggested Chapter Title:</strong> ${suggestedTitle}</p>
+            <p><strong>Chapter Subtitles:</strong> ${chapterSubtitles}</p>
+            <p><strong>Keywords:</strong> ${keywords}</p>
+            <p><strong>Proposal:</strong> ${proposal}</p>
+            <h4>Authors:</h4>
+            ${authors.map((author, index) => `
+                <div>
+                    <h5>Author ${index + 1}</h5>
+                    <p><strong>Name:</strong> ${author.name}</p>
+                    <p><strong>Email:</strong> ${author.email}</p>
+                    <p><strong>Department:</strong> ${author.department}</p>
+                    <p><strong>Institution:</strong> ${author.institution}</p>
+                    <p><strong>Corresponding Author:</strong> ${author.isCorresponding ? "Yes" : "No"}</p>
+                </div>
+            `).join('')}
+        </div>
+    `;
+
+    try {
+        const response = await axios.post('https://api.zeptomail.com/v1.1/email', {
+            from: {
+                address: "[email protected]",
+                name: "contact"
+            },
+            to: [
+                {
+                    email_address: {
+                        address: "[email protected]",
+                        name: "Narayan"
+                    }
+                }
+            ],
+            subject: "Book Proposal Submission",
+            htmlbody: htmlbody,
+        }, {
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Zoho-enczapikey wSsVR60nq0X1WP16z2WvJuc7mw9XBVLxFBkv3lSl7Xb/T63FoMdvlEXGDFeuSfcfEmVsFWQW8rl8yxcH2jENiYkqywwGWyiF9mqRe1U4J3x17qnvhDzIXmVYlRKBL4kBxQ9tkmJhGski+g==`
+            }
+        });
+
+        res.status(200).send(response.data);
+    } catch (error) {
+        console.error("Error sending email:", error.message);
+        res.status(500).send({ error: 'Error sending email' });
+    }
+});
+
+app.listen(port, () => {
+    console.log(`Server running at http://localhost:${port}`);
+});
diff --git a/package.json b/package.json
@@ -14,10 +14,14 @@
 		"animate.css": "^4.1.1",
 		"axios": "^1.7.2",
 		"bootstrap": "^5.2.3",
+		"concurrently": "^8.2.2",
 		"core-js": "^3.27.1",
+		"cors": "^2.8.5",
 		"emailjs-com": "^3.2.0",
+		"express": "^4.19.2",
 		"framer-motion": "^10.6.0",
 		"gsap": "^3.11.5",
+		"http-proxy-middleware": "^3.0.0",
 		"jquery": "^3.6.4",
 		"react": "^18.2.0",
 		"react-accessible-accordion": "^5.0.0",
@@ -42,7 +46,7 @@
 		"zeptomail": "^6.0.0"
 	},
 	"scripts": {
-		"start": "react-scripts start",
+		"start": "concurrently \"react-scripts start\" \"node api/send-email.js\"",
 		"dev": "react-scripts start",
 		"build": "react-scripts build",
 		"test": "react-scripts test",

diff --git a/src/components/Contact/emailService.js b/src/components/Contact/emailService.js
@@ -1,58 +1,18 @@
 // emailService.js
-import { SendMailClient } from "zeptomail";
-
-const url = "https://api.zeptomail.com/";
-const token = "Zoho-enczapikey wSsVR60nq0X1WP16z2WvJuc7mw9XBVLxFBkv3lSl7Xb/T63FoMdvlEXGDFeuSfcfEmVsFWQW8rl8yxcH2jENiYkqywwGWyiF9mqRe1U4J3x17qnvhDzIXmVYlRKBL4kBxQ9tkmJhGski+g==";
-
-const client = new SendMailClient({ url, token });
-
 const sendEmail = async (formData) => {
-    const { book, chapter, suggestedTitle, chapterSubtitles, keywords, proposal, authors } = formData;
-
-    const htmlbody = `
-        <div>
-            <h3>Book Proposal Submission</h3>
-            <p><strong>Book:</strong> ${book}</p>
-            <p><strong>Chapter:</strong> ${chapter}</p>
-            <p><strong>Suggested Chapter Title:</strong> ${suggestedTitle}</p>
-            <p><strong>Chapter Subtitles:</strong> ${chapterSubtitles}</p>
-            <p><strong>Keywords:</strong> ${keywords}</p>
-            <p><strong>Proposal:</strong> ${proposal}</p>
-            <h4>Authors:</h4>
-            ${authors.map((author, index) => `
-                <div>
-                    <h5>Author ${index + 1}</h5>
-                    <p><strong>Name:</strong> ${author.name}</p>
-                    <p><strong>Email:</strong> ${author.email}</p>
-                    <p><strong>Department:</strong> ${author.department}</p>
-                    <p><strong>Institution:</strong> ${author.institution}</p>
-                    <p><strong>Corresponding Author:</strong> ${author.isCorresponding ? "Yes" : "No"}</p>
-                </div>
-            `).join('')}
-        </div>
-    `;
-
     try {
-        const resp = await client.sendMail({
-            from: {
-                address: "[email protected]",
-                name: "contact"
+        const response = await fetch('/send-email', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
             },
-            to: [
-                {
-                    email_address: {
-                        address: "[email protected]",
-                        name: "Narayan"
-                    }
-                }
-            ],
-            subject: "Book Proposal Submission",
-            htmlbody: htmlbody,
+            body: JSON.stringify(formData),
         });
 
-        console.log("Email sent successfully:", resp);
+        const result = await response.json();
+        console.log("Email sent successfully:", result);
     } catch (error) {
-        console.error("Error sending email:", error.message, error.code, error.response ? error.response.data : 'No response data');
+        console.error("Error sending email:", error);
     }
 };
 

diff --git a/src/pages/books/BookProposalFormContainer.js b/src/pages/books/BookProposalFormContainer.js
@@ -62,7 +62,6 @@ const BookProposalFormContainer = (props) => {
 
         try {
             await sendEmail(formData);
-            e.target.reset();
             setAuthors([{ name: '', email: '', department: '', institution: '', isCorresponding: true }]); // Reset authors
         } catch (error) {
             console.error("Error submitting proposal:", error);

diff --git a/src/setupProxy.js b/src/setupProxy.js
@@ -0,0 +1,18 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function (app) {
+    console.log('Setting up proxy for /send-email');
+    app.use(
+        '/send-email',
+        createProxyMiddleware({
+            target: 'http://localhost:5001', // Ensure this is the correct port for your Express server
+            changeOrigin: true,
+            onProxyReq: (proxyReq, req, res) => {
+                console.log('Proxying request:', req.method, req.url);
+            },
+            onError: (err, req, res) => {
+                console.error('Proxy error:', err);
+            }
+        })
+    );
+};
diff --git a/vercel.js b/vercel.js
@@ -0,0 +1,8 @@
+{
+    "rewrites": [
+        {
+            "source": "/send-email",
+            "destination": "/api/send-email"
+        }
+    ]
+}