Response content

components/Layout.js

@@ -22,9 +22,11 @@ export default function Layout({ children }) {
         <meta name="og:title" content={siteTitle} />
         <meta name="twitter:card" content="summary_large_image" />
       </Head>
-
-      <h1 className={styles.header}>chummy</h1>
-
+      <Link href="/events">
+        <a>
+        <h1 className={styles.header}>Chummy</h1>
+        </a>
+      </Link>
       <main className={styles.main}>{children}</main>
     </div>
   );

components/Layout.module.css

@@ -1,9 +1,13 @@
 @import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@694&display=swap");
 
+@import url('https://fonts.googleapis.com/css2?family=Lily+Script+One&family=Lobster&family=Lobster+Two&family=Open+Sans&family=Pacifico&display=swap');
+
 .header {
-  font-family: "Dancing Script", BlinkMacSystemFont;
+  /* font-family: "Dancing Script", BlinkMacSystemFont; */
+  /* font-family: 'Open Sans', sans-serif; */
+  font-family: 'Lily Script One', cursive;
   color: #fb9300;
-  font-size: 3rem;
+  font-size: 4rem;
   text-align: center;
 }
 
@@ -33,6 +37,9 @@
   left: 0;
   bottom: 0;
   margin-bottom: 35px;
+  font-family: 'Open Sans', sans-serif;
+  /* color: #fb9300; */
+   /* font-size: 0.5rem; */
 }
 
 .nav {

database/model.js

@@ -107,7 +107,6 @@ function getUsersIdUsingEmail(email) {
 }
 
 function getUsersIdFromUsersTableUsingEmail(email) {
-  console.log(`getUsersIdFromUsersTableUsingEmail: ${email}`);
   const userIdFromUsersTable = `
   SELECT id FROM users WHERE email=$1
   `;
@@ -229,15 +228,15 @@ function createProfile(
   location,
   bio
 ) {
-  console.log('are you tehre')
-  console.log(`createprofile: ${username}`);
+  // console.log('are you tehre')
+  // console.log(`createprofile: ${username}`);
   const INSERT_PROFILE = `
   INSERT INTO user_profiles(
   user_id,
   username,
   dob,
   gender,
- 
+
   location,
   bio
  ) VALUES ($1, $2, $3,$4,$5,$6)
@@ -261,20 +260,24 @@ function createProfile(
         location,
         bio,
       ])
-      .then((result) => console.log(result)).catch((error) => { console.log(`error: ${error}`) }
-      // .then((res) => {
-      //   return res.rows;
-      // })
-  ))
+      // .then((result) => console.log(result)).catch((error) => { console.log(`error: ${error}`) }
+      .then((res) => {
+        return res.rows;
+      })
+  )
 }
 
 function getEventIdFromEventTable(user_id) {
+  // console.log(`user_id: ${user_id}`)
   const eventId = `
-  SELECT event_id FROM events WHERE user_id = $1)
+  SELECT id FROM events WHERE user_id = $1
   `;
-  return db.query(eventId, [user_id]).then((res) => {
-    return res.rows;
-  });
+  return db
+    .query(eventId, [user_id])
+    // .then((result) => console.log(result.rows)).catch((error) => { console.log(`error: ${error}`) })
+    .then((res) => {
+      return res.rows[0];
+    });
 }
 
 module.exports = {

pages/api/createProfile/index.js

@@ -6,13 +6,12 @@ import { getSession } from "next-auth/client";
 
 export default async (req, res) => {
     try {
-         console.log(req.body)
+
     const session = await getSession({ req });
 
     const { id } = await getUsersIdFromUsersTableUsingEmail(
       session.user.email
     );
-        console.log(`user_id: ${id}`);
         const user_id = id;
 
         const { username, dob, gender,
@@ -40,7 +39,6 @@ export default async (req, res) => {
       bio
     );
 
-        console.log(`profileDetails:${profileDetails}`);
     res.status(200).json(profileDetails);
   } catch (error) {
     // console.error(error);

pages/api/createResponse/index.js

@@ -2,31 +2,31 @@ import { createResponse, getUsersIdUsingEmail, getEventIdFromEventTable} from ".
 import { getSession } from "next-auth/client";
 
 export default async (req, res) => {
-    try {
-        const session = await getSession({ req });
+  try {
+    //console.log(req.body)
+    const session = await getSession({ req });
+    const { user_id } = await getUsersIdUsingEmail(session.user.email);
+    const { response_content } = req.body;
+    //console.log(`user_id: ${user_id}`);
 
-      const { user_id }= await getUsersIdUsingEmail(session.user.email);
+    const { id } = await getEventIdFromEventTable(user_id);
+    //console.log(`id: ${id}`);
+    const event_id = id;
 
-        const { response_content } = req.body
-        const { event_id }= await getEventIdFromEventTable(user_id); 
-
-        if (
-          !response_content
-        ) {
-          return res
-            .status(422)
-            .send({ error: ["Missing one or more fields"] });
-        }
+    if (!response_content) {
+      return res.status(422).send({ error: ["Missing one or more fields"] });
+    }
 
-      const eventDetails = await createResponse(
-        user_id,
-        response_content,
-        event_id,
-      );
-      res.status(200).json(eventDetails);
+    const eventResponseDetails = await createResponse(
+      user_id,
+      response_content,
+      event_id
+    );
+    console.log(`eventResponseDetails: ${eventResponseDetails}`);
 
-    } catch (error) {
+    res.status(200).json(eventResponseDetails);
+  } catch (error) {
         // console.error(error);
-        res.status(500).send({message: ["Error creating on the server"], error: error})
+          res.status(500).send({message: ["Error creating on the server"], error: error})
     }
 }

pages/events.js

@@ -19,7 +19,6 @@ export async function getServerSideProps() {
 }
 
 export default function Events({ eventData }) {
-  console.log(`eventData: ${eventData}`);
   const [session, loading] = useSession();
   const [content, setContent] = useState();
 

pages/events/[id].js

@@ -13,10 +13,10 @@ import { useState, useEffect } from "react";
 import { useSession } from "next-auth/client";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 export async function getStaticPaths() {
   const events = await getAllEventsData();
-  console.log(events);
   const paths = events.map(({ id }) => {
     return {
       params: { id: id.toString() },
@@ -32,17 +32,18 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params }) {
   const eventData = await getEventById(params.id);
   const eventDataStr = JSON.stringify(eventData);
-
-  console.log(`eventData.user_id:${eventData.user_id}`);
+  // console.log(`eventData.user_id:${eventData.user_id}`);
 
   const userDataById = await getUserDataById(eventData.user_id);
-  // console.log(`userDataById: ${userDataById}`);
   const userDataByIdStr = JSON.stringify(userDataById);
 
   const eventResponseDataByEventId = await getAllEventResponses(params.id);
   const eventResponseDataByEventIdStr = JSON.stringify(
     eventResponseDataByEventId
   );
+  console.log(
+    `eventResponseDataByEventIdStr: ${eventResponseDataByEventIdStr}`
+  );
 
   const eventResponseCommenter = await getUsersNameFromComment(params.id);
   const eventResponseCommenterStr = JSON.stringify(eventResponseCommenter);
@@ -63,13 +64,33 @@ export default function Event({
   eventResponseDataByEventIdStr,
   eventResponseCommenterStr,
 }) {
+
+ const router = useRouter();
+
+  const addEventResponseToDb = (event) =>{
+  event.preventDefault(); // don't redirect the page
+    // where we'll add our form logic
+    return fetch("/api/createResponse", {
+      body: JSON.stringify({
+        //  test:  'hi'
+        response_content: event.target.response_content.value
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+
+    //const result = res.json();
+  };
+
   const eventDataParsed = JSON.parse(eventDataStr);
   const userDataParsed = JSON.parse(userDataByIdStr);
   const eventResponseDataParsed = JSON.parse(eventResponseDataByEventIdStr);
-
+console.log(`eventResponseDataParsed: ${eventResponseDataParsed}`);
   // user name who commented
   const eventResponseCommenter = JSON.parse(eventResponseCommenterStr);
-  console.log(eventResponseCommenter);
+  // console.log(eventResponseCommenter);
 
   const gbDate = new Date(eventDataParsed.date);
   const ourDate = new Intl.DateTimeFormat("en-GB", {
@@ -151,11 +172,13 @@ export default function Event({
                 <strong>Comments</strong>
               </p>
             </div>
-            <form action="/events">
-              <label htmlFor="response"></label>
+            <form
+            onSubmit={addEventResponseToDb}
+            >
+              <label htmlFor="response_content"></label>
               <textarea
-                id="response"
-                name="response"
+                id="response_content"
+                name="response_content"
                 rows="6"
                 cols="50"
                 placeholder="Add a public comment"

pages/index.js

@@ -7,6 +7,7 @@ import Nav from "../components/Nav";
 import React from "react";
 import { signIn, signOut, useSession } from "next-auth/client";
 import BlankNav from "../components/BlankNav";
+import stylesLayout from "../components/Layout.module.css";
 
 export default function LogIn() {
   const [session, loading] = useSession();
@@ -39,14 +40,16 @@ export default function LogIn() {
                 width={450}
                 height={450}
               ></Image>
+              <h2 className={stylesLayout.main}>
+                Friendships <i>not</i>relationships
+              </h2>
               {/* Signed in as {session.user.email} <br />
               <button onClick={signOut}>sign out</button> */}
               <Nav />
             </>
           )}
         </main>
       </div>
-
     </Layout>
   );
 }