diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..fe52348 Binary files /dev/null and b/.DS_Store differ diff --git a/airbnb-optimal-price/package.json b/airbnb-optimal-price/package.json index 57db5b7..fd7a4f7 100644 --- a/airbnb-optimal-price/package.json +++ b/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" diff --git a/airbnb-optimal-price/src/App.js b/airbnb-optimal-price/src/App.js index a55b6b8..e497b84 100644 --- a/airbnb-optimal-price/src/App.js +++ b/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 (
- + + + +
); } diff --git a/airbnb-optimal-price/src/components/FormIndex.js b/airbnb-optimal-price/src/components/FormIndex.js new file mode 100644 index 0000000..13b65df --- /dev/null +++ b/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 ( + +
+

Add Properties

+ + +
+
+ ); +} diff --git a/airbnb-optimal-price/src/components/Login.js b/airbnb-optimal-price/src/components/Login.js deleted file mode 100644 index f0430cf..0000000 --- a/airbnb-optimal-price/src/components/Login.js +++ /dev/null @@ -1,62 +0,0 @@ -import React, { useState } from 'react' -import styled from 'styled-components' - -const FormWrapper = styled.div` - width: 100%; - height: 100vh; - display: flex; - text-align: center; - margin: 80px auto 0; -` - -const FormContainer = styled.form` - display: flex; - flex-direction: column; - width: 100%; - align-items: center; - - - input { - padding: 5px; - margin-bottom: 10px - } - - button { - width: 120px; - padding: 5px; - background: #ff3d4d; - color: #fff; - border: none; - border-radius: 4px; - outline-color: orange; - } -` - -const Login = () => { - - const [user, setUser] = useState({ - username: '', - password: '' - }) - -const handleSubmit = e => { - e.preventDefault() - setUser({ - [e.target.name]: e.target.value - }) - console.log(user) -} - - return ( - - -

Sign in

- - - -
-
- ) -} - -export default Login diff --git a/airbnb-optimal-price/src/components/Property.js b/airbnb-optimal-price/src/components/Property.js new file mode 100644 index 0000000..50c04b4 --- /dev/null +++ b/airbnb-optimal-price/src/components/Property.js @@ -0,0 +1,16 @@ +import React from "react"; + +const Property = props => { + return ( +
+ {props.properties.map(property => ( +
+

{property.title}

+

{property.body}

+
+ ))} +
+ ); +}; + +export default Property; diff --git a/airbnb-optimal-price/src/components/PropertyForm.js b/airbnb-optimal-price/src/components/PropertyForm.js new file mode 100644 index 0000000..847376a --- /dev/null +++ b/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 ( + +
+ Property Title +
+ +
+
+
+ Summery the Property +
+