Created
July 19, 2024 16:20
-
-
Save lbarasti/413dd9a92986feeed1f153a2ffcbce6e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // views/addMessage | |
| import $ from 'jquery'; | |
| import cx from 'classnames'; | |
| import styles from '../../styles/Inner.module.css' | |
| export default function Home() { | |
| const submit = () => { | |
| var formData = JSON.stringify($(document.forms[0]).serializeArray()); | |
| console.log('form data',formData); | |
| const response = $.ajax({type: "POST", url: "../api/addMessage", async: false, | |
| data: formData, success: function(){}, dataType: "json", | |
| contentType : "application/json"}) | |
| if(response.status === 200) { alert(`Successfuly added message id:${response.responseText}!`);} | |
| else { $("#error").text(decodeURIComponent(response.responseText));} | |
| } | |
| return ( | |
| <main className={cx(styles["form-message"],"text-center","mt-5")}> | |
| <form id="f1" method="POST"> | |
| <h1 className="h3 mb-3 fw-normal">Insert message form</h1> | |
| <div className={styles["error"]} id="error"></div> | |
| <div className="form-floating"> | |
| <input type="text" name="firstName" className="form-control" id="floatingFirst" placeholder="First name"/> | |
| <label htmlFor="floatingFirst">First name </label> | |
| </div> | |
| <div className="form-floating"> | |
| <input type="text" name="lastName" className="form-control" id="floatingLast" placeholder="Last name"/> | |
| <label htmlFor="floatingLast">Last name </label> | |
| </div> | |
| <div className="form-floating"> | |
| <textarea name="message" className="form-control" id="floatingMessage" placeholder="Message"/> | |
| <label htmlFor="floatingMessage" style={{verticalAlign: 'top'}}>Message </label> | |
| </div> | |
| <div className="form-floating"> | |
| <input type="text" name="attn" className="form-control" id="floatingLast" placeholder="Attention"/> | |
| <label htmlFor="floatingLast">Attention </label> | |
| </div> | |
| <button className="w-100 btn btn-lg btn-primary" type="button" onClick={submit}>Save</button> | |
| </form> | |
| </main> | |
| ) | |
| } | |
| // views/showMessage | |
| import { useRouter } from 'next/router'; | |
| import React from 'react'; | |
| export default function Home() { | |
| const router = useRouter(); | |
| const { messageId } = router.query; | |
| const hasMessage = typeof messageId === 'string' && messageId.length > 0; | |
| const getMessage = () => { | |
| fetch("../api/getMessages", { method: "POST", body: JSON.stringify({ "messageIds": [messageId] }), | |
| headers: { "content-type": "application/json",}}) | |
| .then(response => response.json()) | |
| .then(json => { | |
| document.getElementById("messageId").innerText = json[0].messageId; | |
| document.getElementById("firstName").innerText = json[0].firstName; | |
| document.getElementById("lastName").innerText = json[0].lastName; | |
| document.getElementById("message").innerHTML = json[0].message; | |
| }) | |
| .catch((e) => console.log("client:", e)); | |
| }; | |
| React.useEffect(() => { | |
| if (router.isReady && hasMessage) { getMessage(); } | |
| }, [router.isReady, hasMessage]); | |
| return ( | |
| <main> | |
| <h3 id="messageId"></h3> | |
| <h3 id="firstName"></h3> | |
| <h3 id="lastName"></h3> | |
| <h3 id="message"></h3> | |
| </main> | |
| ) | |
| } | |
| // api/addMessage | |
| import clientPromise from "../../lib/mongodb"; | |
| import DOMPurify from "isomorphic-dompurify"; | |
| export default async (req, res) => { | |
| try { | |
| if(typeof(req.body) === 'object') { | |
| console.log("body", req.body) | |
| const client = await clientPromise; | |
| let message = ""; | |
| let firstName = ""; | |
| let lastName = ""; | |
| let attn = ""; | |
| try { | |
| firstName = req.body[0].value; lastName = req.body[1].value; | |
| message = req.body[2].value; attn = req.body[3].value; | |
| message = DOMPurify.sanitize(message);; | |
| } catch(e) { | |
| console.error(e); | |
| } | |
| const crypto = require("crypto"); | |
| const newMessageId = crypto.randomBytes(16).toString("hex"); | |
| await client.db("chal26").collection("messages").insertOne({ | |
| "messageId": newMessageId, "firstName": firstName, "lastName": lastName, "message": message, | |
| "attention": attn, "date": new Date().toDateString() | |
| }); | |
| res.send(newMessageId); | |
| } else { | |
| res.send("Invalid arguments provided"); | |
| } | |
| } catch (e) { | |
| res.status(500).end(e.message); | |
| } | |
| }; | |
| // api/getMessage | |
| import clientPromise from "../../lib/mongodb"; | |
| export default async (req, res) => { | |
| try { | |
| if(typeof(req.body) === 'object') { | |
| const messageIds = req.body.messageIds; | |
| const client = await clientPromise; | |
| const db = client.db("chal26"); | |
| const message = await db.collection("messages").find({ messageId: { $in: messageIds }}) | |
| .maxTimeMS(5000).toArray(); | |
| res.send(message); | |
| } else { | |
| res.send("Invalid arguments provided"); | |
| } | |
| } catch (e) { | |
| res.status(500).end(e.message); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment