Frontend post creation

gamersnet_frontend/src/components/createPost/index.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import {withRouter} from 'react-router-dom';
+
+import APIFetch from '../../api';
+import './styles.css';
+class AddPost extends React.Component{
+
+    constructor(props){
+        super(props);
+
+        this.state = {
+            gameName: 'Apex Legends',
+            description: '',
+            numPlayers: 1,
+            gameTimeUTC: 0,
+            duration: '',
+            location: '',
+            message: ''
+        };
+
+        this.inputgameName = this.inputgameName.bind(this);
+        this.inputDescription = this.inputDescription.bind(this);
+        this.inputLocation = this.inputLocation.bind(this);
+        this.inputDuration = this.inputDuration.bind(this);
+        this.inputPlayers = this.inputPlayers.bind(this);
+        this.inputDate = this.inputDate.bind(this);
+
+        this.handle = this.handle.bind(this);
+    }
+
+    inputDescription(event){
+        this.setState({description: event.target.value});
+    }
+
+    inputgameName(event){
+        this.setState({gameName: event.target.value});
+    }
+
+    inputLocation(event){
+        this.setState({location: event.target.value});
+    }
+
+    inputPlayers(event){
+        this.setState({numPlayers: event.target.value});
+    }
+
+    inputDuration(event){
+        this.setState({duration: event.target.value});
+    }
+
+    inputDate(event){
+        this.setState({gameTimeUTC: event.target.valueAsNumber});
+    }
+
+
+    handle(event) {
+        let body = {
+            gameName: this.state.gameName,
+            description: this.state.description,
+            numPlayers: this.state.numPlayers,
+            gameTimeUTC: this.state.gameTimeUTC,
+            duration: this.state.duration,
+            location: this.state.location
+        };
+console.log(body);
+        let fetchData = APIFetch('/posts/createPost', JSON.stringify(body), 'POST');
+
+        fetchData.then(async (data) => {
+            if (await data.ok) {
+                this.props.history.push('/');
+                this.props.updateHeader();
+            } else {
+                this.setState({message: 'something went wrong'});
+            }
+        });
+
+
+        event.preventDefault();
+    }
+
+    render() {
+        return (
+            <div className = "post-form">
+                <form onSubmit = {this.handle} autoComplete = 'off' className = "vertical-center">
+                    <h1>Create a Post: </h1>
+
+                    <br/>
+                    <p>Add Game Name you want to play:</p>
+                        <select onChange = {this.inputgameName}>
+                            <option value="ApexLegends"> Apex Legends </option>
+                            <option value="Dota"> Dota </option>
+                            <option value="CS:Go"> CS:GO </option>
+                            <option value="Fortnite"> Fortnite </option>
+                            <option value="Fifa 2021"> Fifa 2021 </option>
+                            <option value="PUB-G"> PUB-G </option>
+                        </select>
+
+                    <p>Description</p>
+                        <input
+                            type='text'
+                            name='description'
+                            onChange = {this.inputDescription}
+                        />
+
+                    <p >Number of players to play with:</p>
+                        <select onChange = {this.inputPlayers}>
+                            <option value = "1">1</option>
+                            <option value = "2">2</option>
+                            <option value = "3">3</option>
+                            <option value = "4">4</option>
+                            <option value = "5">5</option>
+                            <option value = "6">6</option>
+                            <option value = "7">7</option>
+                            <option value = "8">8</option>    
+                        </select>
+
+                    <p id = "location">Add location:</p>
+                        <input
+                            type = 'text'
+                            name = 'location'
+                            onChange = {this.inputLocation} 
+                        />
+
+                    <p id = "duration">Duration to play:</p>
+                        <input
+                            type = 'text'
+                            name = 'location'
+                            onChange = {this.inputDuration}
+                            placeholder = 'eg. 1hr 30mins'
+                        />
+
+                    <p id = "date">Select a date to play on:</p>
+                        <input
+                            type='date'
+                            name='date'
+                            onChange = {this.inputDate}
+                        />
+                    <button onClick = {this.handle}>Post</button>
+                </form>
+                <p>{this.state.message}</p>
+            </div>
+        );
+    }
+}
+export default withRouter(AddPost);

gamersnet_frontend/src/components/createPost/styles.css

@@ -0,0 +1,31 @@
+.post-form {
+  width: 25%;
+  left: 50%;
+  transform: translateX(-50%);
+  position: relative;
+  padding: 3rem 4rem 3rem 4rem;
+  border-radius: 15px;
+  border: 1px solid var(--accent);
+}
+
+.post-form > .vertical-center {
+  display: flex;
+  flex-direction: column;
+}
+
+.post-form > .vertical-center > * {
+  margin-top: 2rem;
+}
+
+.post-form > .vertical-center > input {
+  padding: 0.5rem;
+  border: 1px solid white;
+}
+
+.post-form > .vertical-center > button {
+  color: white;
+  padding: 0.5rem;
+  border: 1px solid rgb(47, 47, 255);
+  background-color: rgb(95, 95, 255);
+  border-radius: 15px;
+}

gamersnet_frontend/src/components/header/index.js

@@ -7,6 +7,7 @@ export default class Header extends React.Component {
     authLinks() {
         return (
             <div>
+                <Link to = '/post' className = 'header-link'>Post</Link>
                 <Link to = '/logout' className = 'header-link'>Logout</Link>
                 <Link to = '/password' className = 'header-link'>password</Link>
             </div>

gamersnet_frontend/src/index.js

@@ -13,6 +13,7 @@ import SignIn from './components/signin';
 import Register from './components/register';
 import Password from './components/password';
 import Logout from './components/logout';
+import AddPost from './components/createPost';
 
 // import header
 import Header from './components/header';
@@ -43,6 +44,7 @@ class App extends React.Component {
 		return (
 			<div>
 				<Route exact path = '/' component = {Home} />
+				<Route path = '/post' render = {(props) => <AddPost updateHeader = {this.updateHeader} {...props} />} />
 				<Route path = '/signin' render = {(props) => <SignIn updateHeader = {this.updateHeader} {...props} />} />
 				<Route path = '/register' render = {(props) => <Register updateHeader = {this.updateHeader} {...props} />} />
 				<Route path = '/logout' render = {(props) => <Logout logout = {this.logout} {...props} />} />