Helpcenter Boilerplate Form

app.py

@@ -36,12 +36,40 @@ def dict_factory(cursor, row):
         d[col[0]] = row[idx]
     return d
 
+@app.route("/getComments", methods = ['GET'])
+def all_comments_queries():
+   conn = sqlite3.connect(DATABASE)
+   cursor = conn.cursor()
+   cursor.execute('''SELECT * FROM comments_table ''')
+   data = cursor.fetchall()
+   conn.close()
+   return json.dumps(data)
+
+
+@app.route("/comments", methods = ['POST'])
+def new_comment_query():   
+
+   first_name = request.json["f_name"] 
+   last_name = request.json["l_name"] 
+   email = request.json["email"]
+   subject = request.json["subject"]
+   comment = request.json["comment"]
+
+   conn = sqlite3.connect(DATABASE, isolation_level = None)
+   cursor = conn.cursor()
+   cursor.execute('''INSERT INTO comments_table (first_name, last_name, email, subject, comment) VALUES (?,?,?,?,?) ''', (first_name, last_name, email, subject, comment) )
+   cursor.close()
+   conn.close()
+
+   return "Comment Added"
+
 @app.route("/", methods = ['GET'])
 def hello():
     hi = "hello world. Winterns are the best."
     return render_template('app.html', text=hi)
 
 
+
 @app.route('/api', methods=['GET', 'POST', 'PATCH', 'DELETE'])
 def quote():
 
@@ -74,5 +102,13 @@ def quote():
 
     return (response.json())   
 
+@app.route("/comments/<comment_id>/delete", methods = ['DELETE'])
+def delete_comment_query(comment_id):
+
+    query = ''' DELETE FROM comments_table WHERE comment_id = ?'''
+    arg = (comment_id)
+    query_db(query,arg) 
 
-
+    return "Delete Comment Successful"
+
+#    return jsonify.(statusCode = 204)

create_comment_table.sqlite

@@ -0,0 +1,3 @@
+CREATE TABLE comments_table (comment_id integer PRIMARY KEY AUTOINCREMENT, first_name text NOT NULL, last_name text NOT NULL, email text NOT NULL, created_date timestamp default (DATETIME('now')), subject text NOT NULL, comment text NOT NULL) ;
+
+insert into comments_table (first_name, last_name, email, subject, comment) VALUES ('John', 'Doe', '[email protected]', 'NY', 'hello');

package.json

@@ -23,6 +23,8 @@
     "webpack-cli": "^3.1.2"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "animate.css-react": "^1.1.0",
     "axios": "^0.19.1",
     "merge-images": "^2.0.0",
     "react": "^16.5.2",

src/Forum.jsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import Header from './Header.jsx';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+
+
+const PostButton = ({buttonText}) => {
+  return (
+  <button className='NewComment'>{buttonText}</button>
+  );
+}
+
+const Comment = ({name,email,date,subject,commentText}) => {
+  return (
+  <div className="comments">
+  <div className='labelContainer'>
+  <div className="name">{name}</div>
+  <div className="email">{email}</div>
+  <div className="date">{date}</div>
+  </div>
+  <div className="subjectContainer">
+  <div className="subject">{subject}</div>
+  <div className="commentText">{commentText}</div>
+  </div>
+  </div>
+  );
+}
+
+const Forum = () => {  
+  const [comments,setComments] = useState([])
+
+
+
+  useEffect(()=>{
+    const getComments = () => {
+      const SERVER_URL = ""
+      axios
+      .get(SERVER_URL + 'getComments')
+      .then((res) => {   
+        setComments(res.data)
+        console.log(res.data);
+      }) 
+    } 
+    getComments();
+  },[]) 
+
+// const deletePost = async (e) => {
+//     const SERVER_URL = ""
+//     e.preventDefault();
+//     try {
+//       await axios.delete(SERVER_URL+ '/comments/<comment_id>');
+//       writeStatus("Post succesfully deleted");
+//       setTimeout(() => writeStatus(""), 3000);
+//     } catch (err) {
+//         writeStatus("Post deletion failed");
+//     }
+//   };
+
+  // deleteRow = (id, e) => {  
+  //   const SERVER_URL = ""   
+  //   axios
+  //     .delete(SERVER_URL + '/comments/<comment_id>')  
+  //     .then(res => {  
+  //       console.log(res);  
+  //       console.log(res.data);  
+
+  //       const posts = this.state.posts.filter(item => item.id !== id);  
+  //       this.setState({ posts });  
+  //     })  
+  // }
+
+  // const handleRemove = () => {
+  //   const SERVER_URL = ""
+  //   axios 
+  //     .delete(SERVER_URL + '/comments/<comment_id>', {data: {id}})
+  //     .then((res) => {   
+  //       console.log(res.data);
+  //      })   
+  //   } 
+
+  return (
+    <>
+    <Header />
+    <div className='webContainer'>
+      <div className= "Forum">
+        <h1 className="ForumHeader">Help Center Forum
+        <Link to ="/Submit"><PostButton buttonText="Post New Comment"></PostButton></Link> 
+        </h1>
+        {comments.map( (commentArray) => {
+          return <Comment name = {commentArray[1]+commentArray[2]} email = {commentArray[3]} date ={commentArray[4]} subject = {commentArray[5]} commentText = {commentArray[6]}>
+            {/* <button onClick={deletePost}></button> */}
+              {/* <button onClick={(e) => this.deleteRow(Comment.id, e)}>Delete</button>   */}
+              {/* <button onClick={deleteRow} params={}></button> */}
+          </Comment> 
+        })}
+      </div>
+    </div>
+    </>
+  );
+  }
+
+export default Forum;
+
+//we will run this function everytime componenet re-renders, inside depency changes we will rerun
+
+//network request, cannot be sequential, asychronus something need to be
+//processed in a que, seperate
+//eventloop (javascript), everything asynchrnus is on the loop and runs on the side of the code
+//keep checking until data run callback function after succeful execution of network request
+//idea of network request side effect
+//usestate, program rerender, doesnt need to reload, it knows when probs and state and useeffect and will
+//runs when component refreshes
+//async allows to write pretty stright forward
+//axios .then (promise, res data you will get back), promise syntax
+
+//create some state
+//save data into response
+//save data, map data into components, return name is equal to variable, map function 
+
+
+        {/* <Link to ="/APIInfo"><button className='FAQButtonActual'>?</button></Link> */}
+        {/* <Link to ="/"><button className='ReturnButtonActual'>Return Home</button></Link> */}
+        {/* {comments.map( (commentArray) => {
+          return <Comment name = {commentArray[1]+commentArray[2]} email = {commentArray[3]} date ={commentArray[4]} subject = {commentArray[5]} commentText = {commentArray[6]}></Comment> 
+        })} */}

src/Header.jsx

@@ -11,7 +11,8 @@ const Header = () => {
         </button>
         <div className="dropdown-contenttwo">
             <Link to="/team">Meet The Team</Link>
-            <Link to="/help-center">Help Center</Link>
+            <Link to="/HelpCenter">Help Center</Link>
+            <a href="#">API Explorer</a>
         </div>
         </div>
     <div className="dropdownone">

src/HelpCenter.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Header from './Header.jsx';
+import { Link } from 'react-router-dom';
+
+const FAQButton = ({buttonText}) => {
+  return (
+  <button className='FAQButton'>{buttonText}</button>
+  );
+}
+
+const ForumButton = ({buttonText}) => {
+  return (
+  <button className="ForumButton">{buttonText}</button>
+  );
+}
+
+const HelpCenter = () => {  
+  return (
+    <>
+    <Header />
+    <div className="HelpCenterText"> 
+        <h1 > Shortening links can be confusing. What can we help with? </h1>
+    </div> 
+
+    <div className="Buttonss">
+        <Link to = "/Forum"><ForumButton buttonText="FORUM"></ForumButton></Link>
+        <Link to ="/APIInfo"><FAQButton buttonText="FAQ"></FAQButton></Link> 
+    </div>
+    </>
+  );
+  }
+
+export default HelpCenter;

src/Home.jsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import './styles/main.scss';
 import Form from './Form.jsx';
@@ -57,4 +58,4 @@ function Home() {
 
  }
 
-export default Home;
+export default Home;

src/SubmitComment.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import Header from './Header.jsx';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+
+
+
+
+
+const SubmitComment = () => { 
+
+    const { useState, useEffect} = React;
+
+    const [first_name, setFirstName] = useState('');
+    const [last_name, setLastName] = useState('');
+    const [email, setEmail] = useState('');
+    const [subject, SetSubject] = useState('');
+    const [comment, SetComment] = useState('');
+
+
+
+    const handleSubmit = () => {
+        const SERVER_URL = ""
+        axios
+          .post(SERVER_URL + 'comments', {f_name: first_name, l_name: last_name, email: email, subject: subject, comment: comment})
+          .then((res) => {   
+            // setResponse(res.data)
+          })   
+      } 
+
+    const handleReset = () => {
+        setFirstName('');
+        setLastName('');
+        setEmail('');
+        SetSubject('');
+        SetComment('');
+      }
+
+    deleteRow = (id, e) => {  
+        const SERVER_URL = ""   
+        axios
+          .delete(SERVER_URL + '/comments/<comment_id>')  
+          .then(res => {  
+            console.log(res);  
+            console.log(res.data);  
+
+            const posts = this.state.posts.filter(item => item.id !== id);  
+            this.setState({ posts });  
+          })  
+      }
+
+
+    return (
+      <>
+        <Header />
+        <div className='webContainer'>
+        <div className='commentContainer'>
+        <h1 className='submitHeader'>Submit Comment</h1>
+        <div className='subjectContainer'>
+        <label className='subjectLabel'>Subject of Comment</label>
+        <input value={subject} type="text" name='subject' className='subectTextField' onChange={(event) => SetSubject(event.target.value)} />
+        </div> 
+        <br />
+        <div className='firstNameContainer'>
+        <label className='firstNameLabel'>First Name</label>
+        <input value={first_name} type="text" name='first_name' className= 'firstNameTextField'onChange={(event) => setFirstName(event.target.value)} /> 
+        </div>
+        <br />
+        <div className ='lastNameContainer'>
+        <label className='lastNameLabel'>Last Name</label>
+        <input value={last_name} type="text" name='last_name' className= 'lastNameTextField' onChange={(event) => setLastName(event.target.value)} /> 
+        </div>
+        <br />
+        <div className='emailContainer'>
+        <label className='emailLabel'>Email Address</label>
+        <input value={email} type="text" name= 'email' className='emailTextField' onChange={(event) => setEmail(event.target.value)} /> 
+        </div>
+        <br />
+        <div className='commentTextContainer'>
+        <label className='commentLabel'>Your Comment</label>
+        <input value={comment} type="text" name='comment' className='commentTextField' onChange={(event) => SetComment(event.target.value)} /> 
+        </div> 
+        <div className='buttonContainer'>
+        <button className="resetButton" onClick={handleReset}>Reset</button> 
+        <button className="btn btn-danger" onClick={(e) => this.deleteRow(post.id, e)}>Delete</button>  
+        <Link to ="/Forum"><button className="submitButton" onClick={handleSubmit}>Submit</button></Link> 
+        </div>
+        </div>
+        </div>
+      </>
+    );
+}
+
+export default SubmitComment;

src/Team.jsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import './styles/main.scss';
 import TeamLandingPage2022 from './wintern-bios/2022/TeamLandingPage2022.jsx';
 import TeamLandingPage2021 from './wintern-bios/2021/TeamLandingPage2021.jsx';
+
 import Header from './Header.jsx';
 import Footer from './Footer.jsx';
 
@@ -16,6 +17,7 @@ function Team() {
 
             <div className="sidebar">
                 <a onClick={() => setYear(2022)}>2022</a>
+                <div></div>
                 <a onClick={() => setYear(2021)}>2021</a>
             </div>
 

src/index.jsx

@@ -10,6 +10,9 @@ import './styles/main.scss';
 import Home from './Home.jsx';
 import Team from './Team.jsx';
 import APIinfo from './APIinfo.jsx';
+import HelpCenter from './HelpCenter.jsx';
+import Forum from './Forum.jsx';
+import Submit from './SubmitComment.jsx'
 
 const App = () => {
     return (
@@ -21,6 +24,15 @@ const App = () => {
           <Route path="/team">
             <Team />
           </Route>
+          <Route path="/HelpCenter">
+            <HelpCenter />
+            </Route>
+          <Route path="/Forum">
+            < Forum />
+          </Route>
+          <Route path="/Submit">
+            < Submit />
+          </Route>
           <Route path="/">
             <Home />
           </Route>