Added contact form

package.json

@@ -17,6 +17,8 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "react-select": "^4.3.1",
+    "reactstrap": "^8.9.0",
+    "save": "^2.4.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.js

@@ -12,7 +12,7 @@ import Home from './components/homescreen';
 import Application from './components/application';
 import ApplicationForUsers from './components/applicationsForUsers';
 import NewApplication from './components/newApplication';
-import Messages from './components/messages';
+import ContactForm from './components/contact';
 import Uploader from './components/upload';
 
 import UserContext from './contexts/user';
@@ -82,7 +82,7 @@ class App extends React.Component {
               <Route path="/application/:id"  children={<Application />} />
 							<Route path="/myapplication/:id"  children={<ApplicationForUsers />} />
 							<Route path="/newapplication" children={<NewApplication />} />
-							<Route path="/messages" children={<Messages />} />
+							<Route path="/contact" children={<ContactForm />} />
               <Route path="/adminSpace" children={<Admin />}/>
             </Switch>
           </Content>

src/components/contact.css

@@ -0,0 +1,33 @@
+/* Style inputs with type="text", select elements and textareas */
+input[type=text], select, textarea {
+  width: 100%; /* Full width */
+  padding: 12px; /* Some padding */ 
+  border: 1px solid #ccc; /* Gray border */
+  border-radius: 4px; /* Rounded borders */
+  box-sizing: border-box; /* Make sure that padding and width stays in place */
+  margin-top: 6px; /* Add a top margin */
+  margin-bottom: 16px; /* Bottom margin */
+  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
+}
+
+/* Style the submit button with a specific background color etc */
+input[type=submit] {
+  background-color: #04AA6D;
+  color: white;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+/* When moving the mouse over the submit button, add a darker green color */
+input[type=submit]:hover {
+  background-color: #45a049;
+}
+
+/* Add a background color and some padding around the form */
+.container {
+  border-radius: 5px;
+  background-color: #f2f2f2;
+  padding: 20px;
+}

src/components/contact.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import emailjs from 'emailjs-com';
+import { Form, Input, Button, Typography, DatePicker, Upload } from 'antd';
+
+import './contact.css';
+
+
+export default function ContactUs() {
+
+
+  function sendEmail(e) {
+    e.preventDefault();
+
+    emailjs.sendForm('gmail', 'template_tld', e.target, 'user_4pQL25dW7YNzoZmVCML9j')
+      .then((result) => {
+          console.log(result.text);
+      }, (error) => {
+          console.log(error.text);
+      });
+  }
+
+  return (
+    <form className="contact-form" onSubmit={sendEmail}>
+			<div style= {{ padding: '2% 20%' }} >
+         <h1>Contact Us!!</h1>
+         <h2>Any question? Just fill the form!</h2>
+      </div>
+      <input type="hidden" name="contact_number" />
+      <label>Name</label>
+      <input type="text" name="user_name" />
+      <label>Email</label>
+      <input type="email" name="user_email" />
+      <label>Message</label>
+      <textarea name="message" />
+      <input type="submit" value="Send" />
+    </form>
+  );
+}

src/components/homegrid.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, Row, Input } from 'antd';
+import { Col, Row, Input, Select } from 'antd';
 import ApplicationCard from './applicationcard';
 import { status, json } from '../utilities/requestHandlers';
 import { withRouter } from 'react-router-dom';
@@ -69,8 +69,8 @@ class HomeGrid extends React.Component {
       return (
         <h2>You have to be a user in order to see applications!</h2>
       )
-		}if(this.state.search.length){
-      const searchedApplication = this.state.applications.filter(application=>application.companyName.toLowerCase() === this.state.search.toLowerCase() || application.crn.toLowerCase() === this.state.search || application.email.toLowerCase() === this.state.search.toLowerCase()).map(application => {
+		}if(this.state.search.length){ //If anything is written in the search bar does the search
+      const searchedApplication = this.state.applications.filter(application=>application.companyName.toLowerCase() === this.state.search.toLowerCase() || application.crn.toLowerCase() === this.state.search || application.status.toLowerCase() === this.state.search.toLowerCase() || application.email.toLowerCase() === this.state.search.toLowerCase()).map(application => {
         return (
           <div style={{padding:"10px"}} key={application.ID}>
             <Col span={6}>
@@ -80,18 +80,26 @@ class HomeGrid extends React.Component {
         )
       });
 		return (
-        <div style={{ padding: '2% 20%' }}>
+        <div style={{ padding: '3% 20%' }}>
         <Search placeholder="Search by Company Name, Company Reference Number or Email"
                           allowClear
                           enterButton="Search"
                           size="large"
                           onSearch={this.searchHandler}/>
+
+				<Select placeholder="Status" onChange={this.searchHandler}>            
+						<option value="New">New</option>
+						<option value="Pending">Pending</option>
+						<option value="Accepted">Accepted</option>
+            <option value="Rejected">Rejected</option>
+         </Select>
+
         <Row type="flex" justify="space-around">
           {searchedApplication}
         </Row>
         </div>
       );
-    }else{
+    }else{ //If search bar is empty shows all applications
        const allApplications = this.state.applications.map(application => {
         return (
           <div style={{padding:"10px"}} key={application.ID}>
@@ -103,12 +111,20 @@ class HomeGrid extends React.Component {
       });
       return (
         <div>
-          <div style={{ padding: '2% 20%' }}>
+          <div style={{ padding: '3% 20%' }}>
             <Search placeholder="Search by Company Name, Company Reference Number or Email"
                               allowClear
                               enterButton="Search"
                               size="large"
                               onSearch={this.searchHandler}/>
+
+					<Select placeholder="Filter by Application Status" onChange={this.searchHandler}>  
+						<option value="New">New</option>
+						<option value="Pending">Pending</option>
+						<option value="Accepted">Accepted</option>
+            <option value="Rejected">Rejected</option>
+          </Select>
+
           </div>
           <Row type="flex" justify="space-around">
             {allApplications}

src/components/nav.js

@@ -18,7 +18,7 @@ class Nav extends React.Component {
 				<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
 						<Menu.Item key="1" disabled={this.context.user.role!= "admin"}><Link to="/adminSpace">Admin</Link></Menu.Item>
 						<Menu.Item key="2" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
-						<Menu.Item key="3" disabled={!this.context.user.loggedIn}><Link to="/messages">Chat</Link></Menu.Item>
+						<Menu.Item key="3" disabled={!this.context.user.loggedIn}><Link to="/contact">Chat</Link></Menu.Item>
             <Menu.Item key="4" disabled={!this.context.user.loggedIn} onClick={this.context.logout}> <Link to="/">Logout</Link></Menu.Item>
          </Menu>
       )
@@ -28,7 +28,7 @@ class Nav extends React.Component {
 						<Menu.Item key="1" disabled={!this.context.user.loggedIn}><Link to="/">Home</Link></Menu.Item>
 						<Menu.Item key="2" disabled={this.context.user.role!= "user"}><Link to="/newapplication">Add Application</Link></Menu.Item>
 						<Menu.Item key="3" disabled={!this.context.user.loggedIn}><Link to="/account">Account</Link></Menu.Item>
-            <Menu.Item key="4" disabled={!this.context.user.loggedIn}><Link to="/messages">Chat</Link></Menu.Item>
+            <Menu.Item key="4" disabled={!this.context.user.loggedIn}><Link to="/contact">Chat</Link></Menu.Item>
 						<Menu.Item key="5" disabled={!this.context.user.loggedIn} onClick={this.context.logout}> <Link to="/">Logout</Link></Menu.Item>
 				</Menu>
 				)

src/components/newApplication.js

@@ -7,7 +7,7 @@ import emailjs from 'emailjs-com';
 
 const { Title } = Typography;
 
-const { TextArea } = Input
+const { TextArea } = Input;
 
 const nameRule=[
     {required:true,message:'Please type the name of the company.',whitespace:false, min:3,max:150}