buildpartyplanner · antonynyagah · Apr 30, 2019 · May 1, 2019 · May 1, 2019 · May 1, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/partyplanner/.DS_Store b/partyplanner/.DS_Store
diff --git a/partyplanner/.gitignore b/partyplanner/.gitignore
@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/partyplanner/README.md b/partyplanner/README.md
diff --git a/partyplanner/package.json b/partyplanner/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "village",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^0.18.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-router-dom": "^4.2.2",
+    "react-scripts": "1.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/partyplanner/public/favicon.ico b/partyplanner/public/favicon.ico
diff --git a/partyplanner/public/index.html b/partyplanner/public/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/partyplanner/public/manifest.json b/partyplanner/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/partyplanner/server.js b/partyplanner/server.js
@@ -0,0 +1,86 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const cors = require('cors');
+const port = 3333;
+
+const server = express();
+server.use(bodyParser.json());
+server.use(cors());
+
+const sendUserError = (msg, res) => {
+  res.status(422);
+  res.json({ Error: msg });
+  return;
+};
+
+let smurfs = [
+  {
+    id: 0,
+    name: 'Brainey Smurf',
+    age: 200,
+    height: '8cm'
+  }
+];
+server.get('/smurfs', (req, res) => {
+  res.json(smurfs);
+});
+let smurfId = 1;
+
+server.post('/smurfs', (req, res) => {
+  const { name, age, height } = req.body;
+  const newSmurf = { name, age, height, id: smurfId };
+  if (!name || !age || !height) {
+    return sendUserError(
+      'Ya gone did smurfed! Name/Age/Height are all required to create a smurf in the smurf DB.',
+      res
+    );
+  }
+  const findSmurfByName = smurf => {
+    return smurf.name === name;
+  };
+  if (smurfs.find(findSmurfByName)) {
+    return sendUserError(
+      `Ya gone did smurfed! ${name} already exists in the smurf DB.`,
+      res
+    );
+  }
+
+  smurfs.push(newSmurf);
+  smurfId++;
+  res.json(smurfs);
+});
+
+server.put('/smurfs/:id', (req, res) => {
+  const { id } = req.params;
+  const { name, age, height } = req.body;
+  const findSmurfById = smurf => {
+    return smurf.id == id;
+  };
+  const foundSmurf = smurfs.find(findSmurfById);
+  if (!foundSmurf) {
+    return sendUserError('No Smurf found by that ID', res);
+  } else {
+    if (name) foundSmurf.name = name;
+    if (age) foundSmurf.age = age;
+    if (height) foundSmurf.height = height;
+    res.json(smurfs);
+  }
+});
+
+server.delete('/smurfs/:id', (req, res) => {
+  const { id } = req.params;
+  const foundSmurf = smurfs.find(smurf => smurf.id == id);
+
+  if (foundSmurf) {
+    const SmurfRemoved = { ...foundSmurf };
+    smurfs = smurfs.filter(smurf => smurf.id != id);
+    res.status(200).json(smurfs);
+  } else {
+    sendUserError('No smurf by that ID exists in the smurf DB', res);
+  }
+});
+
+server.listen(port, err => {
+  if (err) console.log(err);
+  console.log(`server is listening on port ${port}`);
+});
diff --git a/partyplanner/src/.DS_Store b/partyplanner/src/.DS_Store
diff --git a/partyplanner/src/App.css b/partyplanner/src/App.css
@@ -0,0 +1,79 @@
+.App {
+  text-align: center;
+  border: 1px solid black;
+  background-image: url(https://topnotchtalent.com/wp-content/uploads/holiday-party-entertainment-top-notch-talent.jpg);
+  margin: 0 auto;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+
+h1{
+  margin-left: 30px;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+
+  margin-bottom: 32px;
+
+}
+
+.nav-links {
+  display: flex;
+  justify-content: space-around;
+  width: 50%;
+
+}
+.nav-links a {
+  text-decoration: underline;
+  color:white;
+  font-weight: bold;
+  font-size: 25px;
+
+}
+
+
+.header {
+  color:white;
+  font-size: 25px;
+
+}
+.parties{
+  color:white
+}
+
+.button {
+  width: 317px;
+  margin: 15px auto;
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  font-size: 25px;
+
+}
+
+form {
+  margin: 0 auto;
+  width: 200px;
+}
+
+input {
+  color:white;
+  font-size: 25px;
+}
+
+
+h3{
+  text-decoration: underline;
+}
+
+.delete-button{
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  border: 1px solid black;
+  font-weight: bold;
+}
diff --git a/partyplanner/src/App.js b/partyplanner/src/App.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import {BrowserRouter as Router, Route, NavLink } from "react-router-dom";
+import Authenticate from './components/Authentication'
+import './App.css';
+import PartyForm from './components/PartyForm';
+import Parties from './components/Parties';
+import ShoppingForm from './components/ShoppingForm'
+import TodoForm from './components/TodoForm'
+
+
+const baseUrl = "https://arcane-bayou-55024.herokuapp.com/";
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      parties: [],
+    };
+  }
+
+  componentDidMount() {
+   this.getparties()
+  }
+
+  getparties() {
+    axios
+    .get(`${baseUrl}//api/party/:id`)
+    .then(res => 
+      this.setState({
+        parties: res.data
+      }))
+
+    .catch(err => console.log(err))
+
+  }
+
+  deleteParty = (ev, partyId) => {
+    ev.preventDefault()
+    axios.delete(`${baseUrl}/api/party/:id${partyId}`)
+      .then(res => this.setState({
+      parties: res.data
+      }))
+    .catch(err => console.log(err))
+  }
+
+
+
+
+  render() {
+    return (
+      <div className="App">
+
+        <nav>
+          <h1 className="header">Party Planner !!</h1>
+        <div className="nav-links"> 
+            <NavLink onClick={() => this.getparties()} to="/">Home!</NavLink>
+            <NavLink exact to="/party-form">Add Party!</NavLink>
+            <NavLink exact to="/shopping-form">Add Shopping!</NavLink>
+            <NavLink exact to="/todo-form">Add To do List!</NavLink>
+
+
+
+
+        </div>
+        </nav>
+        <Route exact path="/" render={props => <Parties {...props} getparties={this.getparties} parties={this.state.parties} baseUrl={baseUrl} deleteParty={this.deleteParty}/>} />
+
+        <Route path="/party-form" render={props => <PartyForm {...props} baseUrl={baseUrl} parties={this.state.parties} getparties={this.getparties}/>}/>
+        <Route path="/shopping-form" render={props => <ShoppingForm {...props} baseUrl={baseUrl} parties={this.state.parties} getparties={this.getparties}/>}/>
+        <Route path="/todo-form" render={props => <TodoForm {...props} baseUrl={baseUrl} parties={this.state.parties} getparties={this.getparties}/>}/>
+
+      </div>
+    );
+  }
+}
+export default Authenticate (App);