Merge pull request #27 from JumboCode/dbconnection

Dbconnection

backend/server.js

@@ -1,16 +1,14 @@
+require('dotenv').config();
 const express = require('express');
 const cors = require('cors')
 const mongo = require("mongodb");
 const mongoose = require("mongoose");
-require('dotenv').config();
-
 
 const app = express()
 app.use(cors())
 app.use(express.json())
 
 const PORT = process.env.PORT || 4000;
-
 mongoose.connect(process.env.MONGODB_URI)
   .then(() => {
     console.log('Successfully connected to MongoDB database:', mongoose.connection.name);
@@ -50,25 +48,29 @@ const UserSchema = new Schema({
     password: { type: String, required: true},
     isAdmin: { type: Boolean, required: true},
     username: { type: String, required: true},
-})
-const User = mongoose.model("users", UserSchema)
+}, { collection: 'users' })
+const User = mongoose.model("User", UserSchema)
 
 // Contact Schema
-
-// TODO (Frank & Madeline): Create a ContactSchema
 const ContactSchema = new Schema ({
     name: { type: String, required: false },
     email: { type: String, required: true},
     subject: { type: String, required: true},
     message: { type: String, required: true}
-})
+}, { collection: 'contacts' })
 
 const Contact = mongoose.model('Contact', ContactSchema);
-// export default Contact;
 
 // Class Schema
-
-// TODO (Claire & Fahim): Create a ClassSchema
+const ClassSchema = new Schema({
+    _id: {type: String, required: true},
+    title: {type: String, required: true},
+    level: {type: String, required: true},
+    ageGroup: {type: String, required: true},
+    instructor: {type: String, required: true},
+    schedule: {type: [String], required:true},
+}, { collection: 'classes' })
+const Class = mongoose.model("Class", ClassSchema)
 
 
 //------------------ ENDPOINTS ------------------//
@@ -115,13 +117,9 @@ app.post('/api/users', async (req, res) => {
 });
 
 // Login
-
-// TODO (Donatello & John): Create an endpoint to receive login data and check if the user exists in the database
 app.post('/api/login', async (req, res) => {
     const { username, password } = req.body;
 
-    // DEBUG: console.log('Received login request:',  username );
-
     try {
         const user = await User.findOne({ username });
         console.log('Database query result:', user);
@@ -144,27 +142,7 @@ app.post('/api/login', async (req, res) => {
     }
 });
 
-
 // Contact
-
-// TODO (Frank & Madeline): Create an endpoint to receive and upload contact inquiries to the database
-// async function uploadContact () {
-//     const article = new Contact({
-//     name: 'test user',
-//     email: '[email protected]',
-//     subject: 'Test Inquiry',
-//     message: 'Test message'
-
-//     });
-
-//     await article.save();
-//     const firstContact = await Contact.findOne({});
-//     console.log(firstContact);
-// }
-// uploadContact().catch(console.error);
-
-// const firstArticle = await Contact.findOne({});
-// console.log(firstArticle);
 app.post('/api/contact', async (req, res) => {
     const{ name, email, subject, message } = req.body
     try {
@@ -185,5 +163,12 @@ app.post('/api/contact', async (req, res) => {
 })
 
 // Classes
-
-// TODO (Claire & Fahim): Create an endpoint to retrieve class data from the database
+app.get('/api/data', async (req, res) => {
+  try {
+    const data = await Class.find();
+    console.log(data);
+    res.json(data)
+  } catch (err) {
+    res.status(500).send(err);
+  }
+})

src/components/NavBar/NavBar.jsx

@@ -19,6 +19,7 @@ const NavBar = () => {
           <div className="hidden sm:flex sm:items-center sm:space-x-4">
             <NavLink href="/about" isMobile={false}>About</NavLink>
             <NavLink href="/contact" isMobile={false}>Contact</NavLink>
+            <NavLink href="/classes" isMobile={false}>Classes</NavLink>
             <NavLink href="/signup" isMobile={false}>Sign Up</NavLink>
             {/* <LanguageSelector /> */}
           </div>
@@ -42,6 +43,7 @@ const NavBar = () => {
         <div className="pt-2 pb-3 space-y-1">
             <NavLink href="/about" isMobile={true}>About</NavLink>
             <NavLink href="/contact" isMobile={true}>Contact</NavLink>
+            <NavLink href="/classes" isMobile={true}>Classes</NavLink>
             <NavLink href="/signup" isMobile={true}>Sign Up</NavLink>
         </div>
         <div className="pt-4 pb-3 border-t border-gray-200">

src/components/PageRoutes.jsx

@@ -4,6 +4,7 @@ import About from '@/pages/About'
 import Contact from '@/pages/Contact'
 import SignUp from '@/pages/SignUp'
 import Login from '@/pages/Login'
+import Classes from '@/pages/Classes'
 
 export default function PageRoutes() {
   return (
@@ -13,6 +14,7 @@ export default function PageRoutes() {
       <Route path="/contact" component={Contact} />
       <Route path="/signup" component={SignUp} />
       <Route path="/login" component={Login} />
+      <Route path="/classes" component={Classes} />
     </div>
   );
 };

src/pages/Classes.jsx

@@ -0,0 +1,38 @@
+import axios from 'axios';
+import { useState, useEffect } from 'react';
+
+const Classes = () => {
+    const [courses, setCourses] = useState([]);
+
+    useEffect(() => {
+      const fetchCourses = async () => {
+        try {
+          const response = await axios.get('http://localhost:4000/api/data');
+          setCourses(response.data);
+          console.log(response.data)
+        } catch (error) {
+          console.error('Error fetching courses:', error);
+        }
+      };
+      fetchCourses();
+    }, []);
+
+    return (
+      <div>
+        <h1>Course List</h1>
+        {courses.length === 0 ? (
+          <p>Loading courses...</p>
+        ) : (
+          <ul>
+            {courses.map(course => (
+              <li key={course._id}>
+                  <strong>{course.title}</strong> (Level: {course.level}, Instructor: {course.instructor})
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    );
+}
+
+export default Classes

src/pages/Contact.jsx

@@ -15,16 +15,14 @@ export default function Contact( ) {
   };
 
   const handleSubmit = async (e) => {
-    const { name, email, subject, message } = formData
-
     e.preventDefault();
     try {
       const response = await fetch("http://localhost:4000/api/contact", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({name, email, subject, message})
+        body: JSON.stringify(formData)
       })
 
       if(!response.ok) {

src/pages/SignUp.jsx

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { Link } from 'wouter'
 import axios from "axios";
 
-
 export default function SignUp() {
   const [formData, setFormData] = useState({
     firstName: '',