Next: Event Management Project APIs + MongoDB

Author: prathamesh-mutkure

Projects/event-mgmt-nextjs/components/input/comment-list.js

@@ -0,0 +1,22 @@
+import classes from "./comment-list.module.css";
+
+function CommentList(props) {
+  const { items } = props;
+
+  return (
+    <ul className={classes.comments}>
+      {items.map((comment) => {
+        return (
+          <li key={comment._id}>
+            <p>{comment.text}</p>
+            <div>
+              By <address>{comment.name}</address>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
+
+export default CommentList;

Projects/event-mgmt-nextjs/components/input/comment-list.module.css

@@ -0,0 +1,24 @@
+.comments {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.comments li {
+  text-align: left;
+  padding: 0.5rem 0;
+  border-bottom: 2px solid #ccc;
+}
+
+.comments p {
+  margin: 0;
+}
+
+.comments li div {
+  text-align: right;
+  font-style: italic;
+}
+
+.comments address {
+  display: inline;
+}

Projects/event-mgmt-nextjs/components/input/comments.js

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+
+import CommentList from "./comment-list";
+import NewComment from "./new-comment";
+import classes from "./comments.module.css";
+
+function Comments(props) {
+  const { eventId } = props;
+
+  const [comments, setComments] = useState([]);
+  const [showComments, setShowComments] = useState(false);
+
+  useEffect(() => {
+    if (!showComments) return;
+
+    getComments();
+  }, [showComments]);
+
+  function toggleCommentsHandler() {
+    setShowComments((prevStatus) => !prevStatus);
+  }
+
+  function addCommentHandler(commentData) {
+    fetch(`/api/comments/${eventId}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(commentData),
+    });
+  }
+
+  const getComments = () => {
+    fetch(`/api/comments/${eventId}`)
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setComments(data.comments);
+      })
+      .catch(console.error);
+  };
+
+  return (
+    <section className={classes.comments}>
+      <button onClick={toggleCommentsHandler}>
+        {showComments ? "Hide" : "Show"} Comments
+      </button>
+      {showComments && <NewComment onAddComment={addCommentHandler} />}
+      {showComments && <CommentList items={comments} />}
+    </section>
+  );
+}
+
+export default Comments;

Projects/event-mgmt-nextjs/components/input/comments.module.css

@@ -0,0 +1,21 @@
+.comments {
+  margin: 3rem auto;
+  width: 90%;
+  max-width: 40rem;
+  text-align: center;
+}
+
+.comments button {
+  font: inherit;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  background-color: transparent;
+  color: #03be9f;
+  border: 1px solid #03be9f;
+  cursor: pointer;
+}
+
+.comments button:hover,
+.comments button:active {
+  background-color: #dcfff9;
+}

Projects/event-mgmt-nextjs/components/input/new-comment.js

@@ -0,0 +1,75 @@
+import { useRef, useState } from "react";
+import classes from "./new-comment.module.css";
+
+function NewComment(props) {
+  const [isInvalid, setIsInvalid] = useState(false);
+
+  const emailInputRef = useRef();
+  const nameInputRef = useRef();
+  const commentInputRef = useRef();
+
+  function sendCommentHandler(event) {
+    event.preventDefault();
+
+    const enteredEmail = emailInputRef.current.value;
+    const enteredName = nameInputRef.current.value;
+    const enteredComment = commentInputRef.current.value;
+
+    if (
+      !enteredEmail ||
+      enteredEmail.trim() === "" ||
+      !enteredEmail.includes("@") ||
+      !enteredName ||
+      enteredName.trim() === "" ||
+      !enteredComment ||
+      enteredComment.trim() === ""
+    ) {
+      setIsInvalid(true);
+      return;
+    }
+
+    props.onAddComment({
+      email: enteredEmail,
+      name: enteredName,
+      text: enteredComment,
+    });
+  }
+
+  return (
+    <form className={classes.form} onSubmit={sendCommentHandler}>
+      <div className={classes.row}>
+        <div className={classes.control}>
+          <label htmlFor="email">Your email</label>
+          <input
+            type="email"
+            id="email"
+            ref={emailInputRef}
+            defaultValue="[email protected]"
+          />
+        </div>
+        <div className={classes.control}>
+          <label htmlFor="name">Your name</label>
+          <input
+            type="text"
+            id="name"
+            ref={nameInputRef}
+            defaultValue="John Doe"
+          />
+        </div>
+      </div>
+      <div className={classes.control}>
+        <label htmlFor="comment">Your comment</label>
+        <textarea
+          id="comment"
+          rows="5"
+          ref={commentInputRef}
+          defaultValue="Hello World!"
+        ></textarea>
+      </div>
+      {isInvalid && <p>Please enter a valid email address and comment!</p>}
+      <button>Submit</button>
+    </form>
+  );
+}
+
+export default NewComment;

Projects/event-mgmt-nextjs/components/input/new-comment.module.css

@@ -0,0 +1,42 @@
+.form {
+  margin: 2rem auto;
+  width: 100%;
+  border-radius: 6px;
+  background-color: #03be9f;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+}
+
+.row {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.control {
+  margin-bottom: 0.5rem;
+  flex: 1;
+  min-width: 10rem;
+}
+
+.control label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  color: white;
+  text-align: left;
+}
+
+.control input,
+.control textarea {
+  font: inherit;
+  padding: 0.25rem;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  width: 100%;
+  background-color: #dcfff9;
+}
+
+.form button {
+  background-color: white !important;
+}

Projects/event-mgmt-nextjs/components/input/newsletter-registration.js

@@ -0,0 +1,43 @@
+import { useRef } from "react";
+import classes from "./newsletter-registration.module.css";
+
+function NewsletterRegistration() {
+  const emailRef = useRef();
+
+  function registrationHandler(event) {
+    event.preventDefault();
+
+    const email = emailRef.current.value;
+
+    fetch("/api/newsletter", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ email }),
+    })
+      .then((res) => res.json())
+      .then(console.log)
+      .catch(console.error);
+  }
+
+  return (
+    <section className={classes.newsletter}>
+      <h2>Sign up to stay updated!</h2>
+      <form onSubmit={registrationHandler}>
+        <div className={classes.control}>
+          <input
+            type="email"
+            id="email"
+            placeholder="Your email"
+            aria-label="Your email"
+            ref={emailRef}
+          />
+          <button>Register</button>
+        </div>
+      </form>
+    </section>
+  );
+}
+
+export default NewsletterRegistration;

Projects/event-mgmt-nextjs/components/input/newsletter-registration.module.css

@@ -0,0 +1,43 @@
+.newsletter {
+  margin: 3rem auto;
+  width: 90%;
+  max-width: 20rem;
+}
+
+.newsletter h2 {
+  text-align: center;
+}
+
+.control input {
+  font: inherit;
+  padding: 0.25rem;
+  border-radius: 4px;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border: 1px solid #ccc;
+}
+
+.newsletter button {
+  background-color: #03be9f;
+  border: 1px solid #03be9f;
+  border-radius: 6px;
+  color: #dafff7;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  font: inherit;
+  cursor: pointer;
+}
+
+.newsletter button:hover,
+.newsletter button:active {
+  background-color: #02afa1;
+  border-color: #02afa1;
+}
+
+.control {
+  display: flex;
+}
+
+.control input {
+  flex: 1;
+}

Projects/event-mgmt-nextjs/helpers/db-utils.js

@@ -0,0 +1,30 @@
+import { MongoClient } from "mongodb";
+
+export async function connectDatabase() {
+  const DB_NAME = process.env.EB_NAME;
+  const DB_USER = process.env.DB_USER;
+  const DB_PASS = process.env.DB_PASS;
+  const DB_URL = "cluster0.ntrwp.mongodb.net";
+
+  const client = await MongoClient.connect(
+    `mongodb+srv://${DB_USER}:${DB_PASS}@${DB_URL}/${DB_NAME}?retryWrites=true&w=majority`
+  );
+
+  return client;
+}
+
+export async function insertDocument(client, collection, document) {
+  const db = client.db();
+
+  const result = await db.collection(collection).insertOne(document);
+
+  return result;
+}
+
+export async function getAllDocuments(client, collection, sort) {
+  const db = client.db();
+
+  const documents = await db.collection(collection).find().sort(sort).toArray();
+
+  return documents;
+}