Merge pull request #207 from agiledev-students-fall2023/messages

send message to store in the database

back-end/app.js

@@ -23,6 +23,7 @@ const expenseRoute = require("./routes/expenseRoute");
 const settlementRoute = require("./routes/settlementRoute");
 const expenseStatusRoute = require("./routes/expenseStatusRoute");
 const searchUserInfoRoute = require("./routes/searchUserInfoRoute");
+const sendMessageRoute = require("./routes/sendMessageRoute");
 
 // connect to the database
 // console.log(`Conneting to MongoDB at ${process.env.MONGODB_URI}`)
@@ -63,6 +64,7 @@ app.use("/expense", expenseRoute);
 app.use("/settlement", settlementRoute);
 app.use("/search-user-info", searchUserInfoRoute);
 app.use("/expenseStatus", expenseStatusRoute);
+app.use("/sendMessage", sendMessageRoute);
 
 // export the express app we created to make it available to other modules
 module.exports = app;

back-end/models/Message.js

@@ -0,0 +1,15 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const messageSchema = new Schema({
+  message: String,
+  user: String,
+});
+
+// create mongoose Model
+const Message = mongoose.model("Message", messageSchema);
+
+// export the model so other modules can import it
+module.exports = {
+  Message,
+};

back-end/routes/sendMessageRoute.js

@@ -0,0 +1,33 @@
+const express = require("express");
+const router = express.Router();
+const { Message } = require("../models/Message.js");
+
+router.post("/", async (req, res) => {
+  try {
+    const newMessage = new Message({
+      message: req.body.message,
+      user: req.body.user,
+    });
+
+    console.log(newMessage);
+
+    const savedMessage = await newMessage.save();
+
+    console.log("Event created:", savedMessage);
+
+    res.status(201).json({
+      status: "Success",
+      message: "Message sent successfully!",
+      data: savedMessage,
+    });
+  } catch (error) {
+    console.error(error);
+    res.status(400).json({
+      status: "Error",
+      message: "Error sending the message",
+      error: error.message,
+    });
+  }
+});
+
+module.exports = router;

front-end/src/components/UserInfo.jsx

@@ -6,7 +6,6 @@ import "../styles/UserInfo.css";
 import Navbar from "./Navbar";
 import axios from "axios";
 import { jwtDecode } from "jwt-decode";
-import emailjs from "emailjs-com";
 
 function UserInfo({ isDarkMode, toggleDarkMode }) {
   const [data, setData] = useState([]);
@@ -22,28 +21,22 @@ function UserInfo({ isDarkMode, toggleDarkMode }) {
     navigate("/");
   };
 
-  const sendEmail = (e) => {
+  const sendMessage = async (e) => {
     e.preventDefault();
-    const templateParams = {
-      from_name: data.name,
+    const body = {
+      user: data.name,
       message: message
     };
 
-    emailjs
-      .send(
-        process.env.REACT_APP_EMAIL_SERVICE_ID,
-        process.env.REACT_APP_EMAIL_TEMPLATE_ID,
-        templateParams,
-        process.env.REACT_APP_EMAIL_USER_ID
-      )
-      .then(
-        (result) => {
-          window.location.reload(); //This is if you still want the page to reload (since e.preventDefault() cancelled that behavior)
-        },
-        (error) => {
-          console.log(error.text);
-        }
-      );
+    try {
+      console.log('Submitting message:', body);
+      const response = await axios.post(`${process.env.REACT_APP_BACKEND}/sendMessage`, body);
+      console.log(`Message sent:`, response.data);
+      window.location.reload();
+    } catch (error) {
+        console.error('Failed to send message:', error.response);
+    }
+
   };
 
   useEffect(() => {
@@ -140,7 +133,7 @@ function UserInfo({ isDarkMode, toggleDarkMode }) {
             <li className="setting-item setting-item-feedback">
               <div className="contact-us-title">Contact us</div>
               <div className="chatbox-container">
-                <form onSubmit={sendEmail}>
+                <form onSubmit={sendMessage}>
                   <input
                     type="text"
                     id="userMessage"