Tc/test making a post

api/models/user.js

@@ -2,6 +2,7 @@ const mongoose = require("mongoose");
 
 const UserSchema = new mongoose.Schema({
   email: { type: String, required: true },
+  username: { type: String, required: true },
   password: { type: String, required: true },
 });
 

frontend/cypress/e2e/signing_up.cy.js

@@ -3,6 +3,7 @@ describe("Signing up", () => {
     cy.visit("/signup");
     cy.get("#email").type("[email protected]");
     cy.get("#password").type("password");
+    cy.get("#username").type("username");
     cy.get("#submit").click();
 
     cy.url().should("include", "/login");

frontend/src/components/AddPost/AddPost.cy.js

@@ -0,0 +1,23 @@
+import AddPost from './AddPost';
+// const navigate = () => {};
+
+describe('AddPost', () => {
+  xit('creates a new post', () => {
+    cy.mount(<AddPost />);
+
+    cy.intercept('POST', '/posts', {
+      statusCode: 201,
+      body: {
+        message: 'Hello FarceBook',
+      },
+    }).as('newPostRequest');
+
+    cy.get('#message').type('text');
+    cy.get('#submit').click();
+
+    cy.wait('@newPostRequest').then((interception) => {
+      expect(interception.response.body.message).to.eq('Hello FarceBook');
+    });
+  });
+});
+

frontend/src/components/AddPost/AddPost.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+const AddPost = () => { // was passing in navigate but that is not passed into this component in Feed
+  const [message, setMessage] = useState('');
+  const [token, setToken] = useState(window.localStorage.getItem("token"));
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+      if (token) {
+
+        console.log(`${message}`) // VISIBILITY
+        const response = await fetch('/posts', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ message: message })
+        })
+        if (response.status !== 201) {
+          console.log("oops")
+          // navigate('/login')
+        } else {
+          console.log("yay!")
+          let data = await response.json()
+          console.log(data) // VISIBILITY
+          window.localStorage.setItem("token", data.token)
+          setToken(window.localStorage.getItem("token"));
+          // navigate('/posts'); // navigate is not present in this component
+        }
+      }
+  }
+
+    const handleMessageChange = (event) => {
+      setMessage(event.target.value)
+    }
+
+    return (
+      <>
+        <form onSubmit={handleSubmit}>
+          <input placeholder='Message' id="message" type='text' value={message} onChange={handleMessageChange} />
+          <input role='submit-button' id='submit' type="submit" value="Submit" />
+        </form>
+
+      </>
+    )
+  }
+
+export default AddPost;
+
+
+
+

frontend/src/components/feed/Feed.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import Post from '../post/Post'
+import Post from '../post/Post';
+import AddPost from '../AddPost/AddPost';
 
 const Feed = ({ navigate }) => {
   const [posts, setPosts] = useState([]);
@@ -31,13 +32,14 @@ const Feed = ({ navigate }) => {
       return(
         <>
           <h2>Posts</h2>
-            <button onClick={logout}>
-              Logout
-            </button>
+          <button onClick={logout}>
+            Logout
+          </button>
+          <AddPost />
           <div id='feed' role="feed">
-              {posts.map(
-                (post) => ( <Post post={ post } key={ post._id } /> )
-              )}
+            {posts.map(
+              (post) => ( <Post post={ post } key={ post._id } /> )
+            )}
           </div>
         </>
       )

frontend/src/components/user/SignUpForm.cy.js

@@ -9,6 +9,8 @@ describe("Signing up", () => {
 
     cy.get("#email").type("[email protected]");
     cy.get("#password").type("password");
+    cy.get("#username").type("username");
+
     cy.get("#submit").click();
     cy.wait('@signUpRequest').then( interception => {
       expect(interception.response.body.message).to.eq("OK")

frontend/src/components/user/SignUpForm.js

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 const SignUpForm = ({ navigate }) => {
 
   const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
 
   const handleSubmit = async (event) => {
@@ -13,7 +14,7 @@ const SignUpForm = ({ navigate }) => {
       headers: {
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ email: email, password: password })
+      body: JSON.stringify({ email: email, username: username, password: password })
     })
       .then(response => {
         if(response.status === 201) {
@@ -28,6 +29,10 @@ const SignUpForm = ({ navigate }) => {
     setEmail(event.target.value)
   }
 
+  const handleUsernameChange = (event) => {
+    setUsername(event.target.value)
+  }
+
   const handlePasswordChange = (event) => {
     setPassword(event.target.value)
   }
@@ -45,6 +50,7 @@ const SignUpForm = ({ navigate }) => {
       </button>
       <form onSubmit={handleSubmit}>
           <input placeholder="Email" id="email" type='text' value={ email } onChange={handleEmailChange} />
+          <input placeholder="Username" id="username" type='text' value={ username } onChange={handleUsernameChange} />
           <input placeholder="Password" id="password" type='password' value={ password } onChange={handlePasswordChange} />
         <input id='submit' type="submit" value="Submit" />
       </form>

frontend/src/index.css

@@ -17,3 +17,5 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+