diff --git a/use/package-lock.json b/use/package-lock.json index 57bc049f..247c2109 100644 --- a/use/package-lock.json +++ b/use/package-lock.json @@ -1157,6 +1157,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -1386,6 +1391,109 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.10.2.tgz", + "integrity": "sha512-Uf4iDLi9sW6HKbVQDyDZDr1nMR4RUAE7w/RIIJZGNVZResC0xwmpLRZMtaUdSO43N0R0yJehfxTi4Z461Cd49A==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.10.0", + "@material-ui/system": "^4.9.14", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.10.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0", + "react-transition-group": "^4.4.0" + }, + "dependencies": { + "dom-helpers": { + "version": "5.1.4", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.1.4.tgz", + "integrity": "sha512-TjMyeVUvNEnOnhzs6uAn9Ya47GmMo3qq7m+Lr/3ON0Rs5kHvb8I+SQYjLUSYn7qhEm0QjW0yrBkvz9yOrwwz1A==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^2.6.7" + } + }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + } + } + }, + "@material-ui/icons": { + "version": "4.9.1", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.9.1.tgz", + "integrity": "sha512-GBitL3oBWO0hzBhvA9KxqcowRUsA0qzwKkURyC8nppnC3fw54KPKZ+d4V1Eeg/UnDRSzDaI9nGCdel/eh9AQMg==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/styles": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", + "integrity": "sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.9.6", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.9.14", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.9.14.tgz", + "integrity": "sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.9.6", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.10.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.10.2.tgz", + "integrity": "sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1765,6 +1873,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -3664,6 +3780,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4173,6 +4294,15 @@ "source-map": "^0.6.1" } }, + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, "css-what": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.3.0.tgz", @@ -6594,6 +6724,11 @@ "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz", "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=" }, + "hyphenate-style-name": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz", + "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -6967,6 +7102,11 @@ "is-extglob": "^2.1.1" } }, + "is-in-browser": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" + }, "is-number": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", @@ -7827,6 +7967,84 @@ "verror": "1.10.0" } }, + "jss": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.3.0.tgz", + "integrity": "sha512-B5sTRW9B6uHaUVzSo9YiMEOEp3UX8lWevU0Fsv+xtRnsShmgCfIYX44bTH8bPJe6LQKqEXku3ulKuHLbxBS97Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^2.6.5", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-camel-case": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.3.0.tgz", + "integrity": "sha512-tadWRi/SLWqLK3EUZEdDNJL71F3ST93Zrl9JYMjV0QDqKPAl0Liue81q7m/nFUpnSTXczbKDy4wq8rI8o7WFqA==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "^10.3.0" + } + }, + "jss-plugin-default-unit": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.3.0.tgz", + "integrity": "sha512-tT5KkIXAsZOSS9WDSe8m8lEHIjoEOj4Pr0WrG0WZZsMXZ1mVLFCSsD2jdWarQWDaRNyMj/I4d7czRRObhOxSuw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.3.0" + } + }, + "jss-plugin-global": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.3.0.tgz", + "integrity": "sha512-etYTG/y3qIR/vxZnKY+J3wXwObyBDNhBiB3l/EW9/pE3WHE//BZdK8LFvQcrCO48sZW1Z6paHo6klxUPP7WbzA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.3.0" + } + }, + "jss-plugin-nested": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.3.0.tgz", + "integrity": "sha512-qWiEkoXNEkkZ+FZrWmUGpf+zBsnEOmKXhkjNX85/ZfWhH9dfGxUCKuJFuOWFM+rjQfxV4csfesq4hY0jk8Qt0w==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.3.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-props-sort": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.3.0.tgz", + "integrity": "sha512-boetORqL/lfd7BWeFD3K+IyPqyIC+l3CRrdZr+NPq7Noqp+xyg/0MR7QisgzpxCEulk+j2CRcEUoZsvgPC4nTg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.3.0" + } + }, + "jss-plugin-rule-value-function": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.3.0.tgz", + "integrity": "sha512-7WiMrKIHH3rwxTuJki9+7nY11r1UXqaUZRhHvqTD4/ZE+SVhvtD5Tx21ivNxotwUSleucA/8boX+NF21oXzr5Q==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "^10.3.0", + "tiny-warning": "^1.0.2" + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.3.0.tgz", + "integrity": "sha512-sZQbrcZyP5V0ADjCLwUA1spVWoaZvM7XZ+2fSeieZFBj31cRsnV7X70FFDerMHeiHAXKWzYek+67nMDjhrZAVQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "^10.3.0" + } + }, "jsx-ast-utils": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz", diff --git a/use/package.json b/use/package.json index fe9bee0e..343e26d1 100644 --- a/use/package.json +++ b/use/package.json @@ -3,6 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { + "@material-ui/core": "^4.10.2", + "@material-ui/icons": "^4.9.1", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", diff --git a/use/public/favicon.ico b/use/public/favicon.ico new file mode 100644 index 00000000..bcd5dfd6 Binary files /dev/null and b/use/public/favicon.ico differ diff --git a/use/public/index.html b/use/public/index.html new file mode 100644 index 00000000..f3271208 --- /dev/null +++ b/use/public/index.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/use/public/logo192.png b/use/public/logo192.png new file mode 100644 index 00000000..fc44b0a3 Binary files /dev/null and b/use/public/logo192.png differ diff --git a/use/public/logo512.png b/use/public/logo512.png new file mode 100644 index 00000000..a4e47a65 Binary files /dev/null and b/use/public/logo512.png differ diff --git a/use/public/manifest.json b/use/public/manifest.json new file mode 100644 index 00000000..080d6c77 --- /dev/null +++ b/use/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/use/public/robots.txt b/use/public/robots.txt new file mode 100644 index 00000000..e9e57dc4 --- /dev/null +++ b/use/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/use/src/App.css b/use/src/App.css index a17df24f..bd93d29e 100644 --- a/use/src/App.css +++ b/use/src/App.css @@ -1,13 +1,158 @@ .App { text-align: center; - background: linear-gradient(0deg, rgba(200,200,200,1) 0%, rgba(235,235,235,1) 100%); + background: linear-gradient(to bottom, #222222 0%, #000000 100%); } + +* { + font-family:'Orbitron', sans-serif; + color: white; +} + .Container { - color: #34495E; min-height: 100vh; font-size: 1rem; + letter-spacing: .15rem; +} + +.Form { + margin: 0 20%; + padding: 4% 0; +} + +.FormGroup { + text-align: left; + margin: 5% 0%; + font-size: .8rem; +} + +.FormGroup-Check { + border: none; + text-align: left; +} + +.Input { + background: none; + border-radius: 0; + border: none; + border-bottom: white solid .5px; + margin: 15px 0; + letter-spacing: .2rem; + font-size: .95rem; + outline: none; +} + +/* ::-webkit-input-placeholder { + text-align:right; +} */ + +.Input:focus { + background: none; + outline: none; } + +.Input-textarea { + background: none; + margin: 15px 0; + border-color: white; + width: 100%; + outline: none; + letter-spacing: .15rem; +} + +.Input-File { + margin-top: 15px; +} + +.Input-check { + margin: 7px -20px; +} + +.checkbox { + margin: 10px 0; +} + .error { font-size: .7rem; color: red; +} + +Button { + border: none; + border-radius: 2px; + padding: 10px 20px; + background: linear-gradient(to bottom right, #04aa18 0%, #037711 53%); + color: white; + margin-top: 20px; + outline: none; + cursor: pointer; + box-shadow: 4px 5px 19px -7px rgba(71,71,71,1); +} + +Button:hover { + background: linear-gradient(to bottom right, #008b12 0%, #00670d 53%); + box-shadow: 4px 5px 19px -7px rgba(56,56,56,1); + +} + +Button:disabled { + color: rgba(255, 255, 255, 0.233); + cursor: not-allowed; +} + +.h1 { + margin-bottom: 45px; +} + +.select { + background-color: #131313; + padding: 10px 25px; + margin: 15px 0; + outline: none; +} + +.Label-check { + margin-top: 15px; +} + +legend { + font-size: 1rem; +} + +.Link { + color: white; + text-decoration: none; + border-left: white solid 1px; + padding: 10px 25px; + margin-top: 15px; +} + +.Link:hover { + color: white; +} + +.Nav { + display: flex; + justify-content: flex-end +} + +.Card { + min-height: 370px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: space-between; + padding-bottom: 20px; +} + +.Card1 { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + +} + +.div { + width: 33%; + text-align: left; } \ No newline at end of file diff --git a/use/src/App.js b/use/src/App.js index 90871ce8..0ae0bb68 100644 --- a/use/src/App.js +++ b/use/src/App.js @@ -1,24 +1,92 @@ -import React from 'react'; -import {Button, Navbar, Card} from 'reactstrap'; -import {Route, Link} from 'react-router-dom'; +import React, {useState, useEffect} from 'react'; +import {Route} from 'react-router-dom'; +import NavBar from './NavBar'; import SignUp from './SignUp'; import SignIn from './SignIn'; +import RenterForm from './RenterForm'; +import TechList from "./TechList"; +import Product from "./Product" import './App.css'; -import TechList from "./TechList" - function App() { + const[data,setData] = useState( + [ + { + "prod_id": 1, + "name": "iPhone 5s", + "image_URL": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/IPhone_5s_golden.svg/800px-IPhone_5s_golden.svg.png", + "price": "$5/month", + "content": "Working condition gold iPhone 5s, 64GB storage, unlocked, minor scratches", + "ownerName": "admin", + "owner_ID": 1, + "borrowerName": "Trevor", + "borrower_ID": 4 + }, + { + "prod_id": 2, + "name": "iPhone 6s", + "image_URL": "https://images-na.ssl-images-amazon.com/images/I/61%2BfbdrjtCL._AC_SL1500_.jpg", + "price": "$6/month", + "content": "Working condition rose gold iPhone 6s, 64GB storage, unlocked, some battery degredation", + "ownerName": "poweruser", + "owner_ID": 2, + "borrowerName": "Chanis", + "borrower_ID": 5 + }, + { + "prod_id": 3, + "name": "iPhone 7s", + "image_URL": "https://images-na.ssl-images-amazon.com/images/I/61udz3%2B61LL._AC_SL1200_.jpg", + "price": "$7/month", + "content": "Mint condition jet black iPhone 7s, 64GB storage, unlocked, dual sim", + "ownerName": "Jon", + "owner_ID": 3, + "borrowerName": "Karla", + "borrower_ID": 6 + }, + { + "prod_id": 4, + "name": "Rasperry Pie", + "image_URL": "https://www.theblackpeppercorn.com/wp-content/uploads/2013/09/Classic-Raspberry-Pie-Featured-1-700x394.jpg", + "price": "$700/month", + "content": "An actualy Raspberry Pie, and not the mini computer", + "ownerName": "admin", + "owner_ID": 1, + "borrowerName": null, + "borrower_ID": null + }, + { + "prod_id": 6, + "name": "iPad", + "image_URL": "https://images-na.ssl-images-amazon.com/images/I/61hjzGugXhL._AC_SL1500_.jpg", + "price": "free", + "content": "It's just an ipad", + "ownerName": "Chanis", + "owner_ID": 5, + "borrowerName": null, + "borrower_ID": null + } + ] +) +const [searchTerm, setSearchTerm] = useState("") +const handleChange = e => { + setSearchTerm(e.target.value) + console.log(searchTerm) +} +useEffect(() => { + setData(data); + const initialArray = data; + const filteredData = initialArray.filter((item) => { + return item.name.toLowerCase().includes(searchTerm.toLowerCase()) + }) + setData(filteredData); +}, [searchTerm]) return (
+
- - - - - - - - + + @@ -26,10 +94,14 @@ function App() { - + + + + + +
); } - export default App; \ No newline at end of file diff --git a/use/src/App.test.js b/use/src/App.test.js index 4db7ebc2..10d68e78 100644 --- a/use/src/App.test.js +++ b/use/src/App.test.js @@ -6,4 +6,4 @@ test('renders learn react link', () => { const { getByText } = render(); const linkElement = getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); -}); +}); \ No newline at end of file diff --git a/use/src/NavBar.js b/use/src/NavBar.js new file mode 100644 index 00000000..dc519d01 --- /dev/null +++ b/use/src/NavBar.js @@ -0,0 +1,16 @@ +import React from 'react' +import { Link, NavLink } from 'react-router-dom' +import './App.css'; + +const NavBar = () => { + + return( +
+ Home + Sign In + Create a Listing +
+ ) +} + +export default NavBar; \ No newline at end of file diff --git a/use/src/Product.js b/use/src/Product.js new file mode 100644 index 00000000..58dc0ed4 --- /dev/null +++ b/use/src/Product.js @@ -0,0 +1,55 @@ +import React from "react"; +import { Card, CardTitle, Container, CardImg, Row, Col, CardText, Button } from 'reactstrap'; +import { + useParams, + Switch, + Route, + Link, + useRouteMatch +} from "react-router-dom"; + +// we will be importing and adding a lot of items to this component +function Product(props) { + // props.items --> all of our items + // shopItem --> the item that matches the id in the URL + // useParams https://reacttraining.com/react-router/web/api/Hooks/useparams + // returns an object of key/value pairs of URL parameters (keys declared with colon in Route path). Use it to access match.params of the current . + // we need to use useParams when we do not use a render method of route (component= or render= in Route JSX) + console.log("useParams", useParams()); + const { itemId } = useParams(); + // pull array of objects from props.items (this is the products stored in App state) + // iterate over each object to find the object that has the same id as the one in the URL (params.itemID) + // .find() is arr fn that returns first valid result. id is unique so this should return the correct object + // compare item.id is a number and params.itemID is a string, so make the string a number to compare values correctly. + const shopItem = props.product.find(item => item.prod_id === Number(itemId)); + console.log(shopItem) + // useRouteMatch https://reacttraining.com/react-router/web/api/Hooks/useroutematch + // useRouteMatch hook attempts to match the current URL in the same way that a would + // it provides a path (like what we declare in a Route), and the current url (what we see in the browser) + return ( +
+ +
+
+ +
+
+ {shopItem.name} + + Price: {shopItem.price} + + + Description: {shopItem.content} + +
+ +
+ +
+
+ +
+ + ); +} +export default Product; \ No newline at end of file diff --git a/use/src/RenterForm.js b/use/src/RenterForm.js index b6c99be0..e3e703d4 100644 --- a/use/src/RenterForm.js +++ b/use/src/RenterForm.js @@ -1,8 +1,115 @@ -import React from 'react'; -const TechList = () => { +import React, { useState, useEffect } from 'react'; +import { Form, FormGroup, Input, Label, Button } from 'reactstrap'; + +const RenterForm = () => { + + const [form, setForm] = useState({ + name: 'Type of electronic', + make: '', + price: '', + image: '', + condition:'', + additionalInfo: '' + }) + + // const [errors, setErrors] = useState({ + // userName: '', + // email: '', + // password: '', + // terms: '' + // }); + + //handling changes + const inputChange = e => { + e.persist(); + const newForm = { + ...form, + [e.target.name]: + e.target.type === 'checkbox' ? e.target.checked : e.target.value + }; + // validateChange(e); + setForm(newForm); + }; + return ( -
-
+
+ + +

Create a Listing

+ + + 1. What type of product would you like to list? + + + + + 2. What is the make of your device? + + + + + 3. Set your monthly fee: + + + + + + 4. Please select the condition(s) that best describe your device: + + + + + + + + + + + + + + + + + + + + + + 5. Copy and Paste an image link of your product: + + + + + + 6. Additional Information (e.g features, storage, etc.): +