Jorge taylor

airbnb-optimal-price/package.json

@@ -7,8 +7,21 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
+    "body-parser": "^1.19.0",
+    "cloudinary": "^1.19.0",
+    "cloudinary-react": "^1.3.2",
+    "cors": "^2.8.5",
+    "create-react-app": "^3.4.0",
+    "express": "^4.17.1",
+    "express-fileupload": "^1.1.6",
+    "local-storage": "^2.0.0",
+    "material-ui": "^0.20.2",
+    "multer": "^1.4.2",
+    "nodemon": "^2.0.2",
+    "prettier": "^1.19.1",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
+    "react-focus-lock": "^2.2.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "styled-components": "^5.0.1"

airbnb-optimal-price/src/App.js

@@ -1,12 +1,17 @@
-import React from 'react';
-
+import React from "react";
+import { Route, Switch } from "react-router-dom";
 //Components
-import Login from './components/Login'
+import NavBar from "./navigation/NavBar";
+import FormIndex from "./components/FormIndex";
+
 
 function App() {
   return (
     <div className="App">
-      <Login />
+      <Switch>
+        <NavBar />
+      </Switch>
+      <FormIndex />
     </div>
   );
 }

airbnb-optimal-price/src/components/FormIndex.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import Property from "./Property";
+import PropertyForm from "./PropertyForm";
+import styled from 'styled-components';
+
+const StyledIndex = styled.div`
+.container-div{
+
+padding-left: 3vw;
+padding-bottom:3vh;
+
+}
+
+`;
+export default function FormIndex() {
+  const [photo, setPhoto] = useState([
+    {
+      selectedFile: null
+    }
+  ]);
+  const [properties, setProperties] = useState([
+    {
+      id: 1,
+      title: "",
+      body: ""
+    }
+  ]);
+  const addNewPropery = property => {
+    const newProperty = {
+      id: Date.now(),
+      title: property.title,
+      body: property.body
+    };
+    setProperties([...properties, newProperty]);
+  };
+  const addNewPhoto = photos => {
+    const newPhoto = {
+      selectedFile: photos.selectedFile
+    };
+    setPhoto([...photo, newPhoto]);
+  };
+  return (
+    <StyledIndex>
+      <div className="container-div">
+        <h1>Add Properties</h1>
+        <PropertyForm addNewPropery={addNewPropery} addNewPhoto={addNewPhoto} />
+        <Property properties={properties} />
+      </div>
+    </StyledIndex>
+  );
+}

airbnb-optimal-price/src/components/Property.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Property = props => {
+  return (
+    <div>
+      {props.properties.map(property => (
+        <div key={property.id}>
+          <h2>{property.title}</h2>
+          <p>{property.body}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default Property;

airbnb-optimal-price/src/components/PropertyForm.js

@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import PropertyUpload from "./PropertyUpload";
+import Styled from'styled-components'
+
+const styledForm = Styled.div`
+display:block;
+margin:auto;
+
+
+`
+const PropertyForm = props => {
+  const [property, setProperty] = useState({
+    title: "",
+    body: ""
+  });
+
+  const handleChanges = e => {
+    setProperty({
+      ...property,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const submitForm = e => {
+    e.preventDefault();
+    props.addNewPropery(property);
+    setProperty({
+      title: "",
+      body: ""
+    });
+  };
+
+  return (
+    <styledForm>
+      <form onSubmit={submitForm}>
+        <lable htmlFor="title">Property Title</lable>
+        <br />
+        <input
+          id="title"
+          type="text"
+          name="title"
+          onChange={handleChanges}
+          placeholder="title"
+          value={property.title}
+        />
+        <br />
+        <br />
+        <br />
+        <lable htmlFor="property">Summery the Property</lable>
+        <br />
+        <textarea
+          id="property"
+          name="body"
+          placeholder="Brief Summery of property."
+          onChange={handleChanges}
+          value={property.body}
+        />
+        <br />
+
+        <label>Property Type</label>
+        <br />
+
+        <select name="propertyType" id="propertyType">
+          <option value>-Please select one-</option>
+          <option value="House">House</option>
+          <option value="">Apartment</option>
+          <option value="">Villa</option>
+          <option value="">Hotel</option>
+          <option value="">Couch</option>
+          <option value="">Tent</option>
+          <option value="">Tree House</option>
+          <option value="">Other</option>
+        </select>
+        <br />
+        <br />
+        <label>Room Type</label>
+        <br />
+
+        <select name="propertyType" id="propertyType">
+          <option value>-Please select one-</option>
+          <option value="House">Entire House</option>
+          <option value="">Private Room</option>
+          <option value="">Shared House</option>
+          <option value="">Hotel Room</option>
+          <option value="">Shared Apartment</option>
+        </select>
+        <br />
+        <br />
+        <label>Book Instantly?</label>
+        <br />
+        <input id="Ibook" name="Ibook" type="checkbox" value="" />
+        <br />
+        <br />
+        <br />
+        <br />
+        <label>Hot Water?</label>
+        <br />
+        <input id="water" name="water" type="checkbox" value="" />
+        <br />
+        <br />
+        <br />
+        <br />
+        <label>Smoke Detectors?</label>
+        <br />
+        <input id="smoke" name="smoke" type="checkbox" value="" />
+
+        <br />
+        <br />
+        <br />
+        <label>Near Shopping Center?</label>
+        <br />
+        <input id="Ibook" name="Ibook" type="checkbox" value="" />
+        <br />
+        <br />
+        <br />
+        <br />
+        <label>Near Public Trasportation?</label>
+        <br />
+        <input id="publicT" name="publicT" type="checkbox" value="" />
+        <br />
+        <br />
+        <br />
+        <br />
+        <label>Pets Allowed?</label>
+        <br />
+        <input id="pets" name="pets" type="checkbox" value="" />
+        <br />
+        <br />
+        <PropertyUpload />
+        <button type="submit">Add Property</button>
+      </form>
+
+    </styledForm>
+
+  );
+};
+
+export default PropertyForm;

airbnb-optimal-price/src/components/PropertyInfo.js

@@ -0,0 +1,2 @@
+
+

airbnb-optimal-price/src/components/PropertyUpload.js

@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+import axios from "axios";
+import "../index.css";
+
+const PropertyUpload = (props) => {
+  const [image, setImage] = useState("");
+  const [loading, setLoading] = useState(true);
+
+
+  const uploadImage = e => {
+    const file = e.target.files[0];
+    const data = new FormData();
+    data.append("upload_preset", "this_one");
+    data.append("file", file);
+    setLoading(true);
+    axios
+      .post("https://api.cloudinary.com/v1_1/jorgescloud/image/upload", data)
+      .then(response => {
+        setImage(response.data.secure_url);
+        console.log("image", response.data.secure_url);
+      }, 3000)
+      .then(setLoading(false))
+      .catch(err => console.log("err", err));
+  };
+
+  return (
+    <div>
+      <input
+        type="file"
+        name="user[image]"
+        multiple={true}
+        onChange={uploadImage}
+      />
+      <div>
+        {loading ? (
+          <h1>Waiting...</h1>
+        ) : (
+          <img src={image} alt="" className="new-photo" />
+        )}
+      </div>
+      <div>
+      </div>
+    </div>
+  );
+};
+export default PropertyUpload;

airbnb-optimal-price/src/components/UserFormDetails.js

@@ -0,0 +1 @@
+

airbnb-optimal-price/src/index.css

@@ -11,3 +11,13 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+* {
+margin: 0;
+padding: 0;
+}
+
+.new-photo{
+  width:20vw;
+  height:20vh;
+
+}