diff --git a/.eslintrc b/.eslintrc deleted file mode 100644 index 4dfa17b..0000000 --- a/.eslintrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "parser": "babel-eslint", - "extends": "airbnb", - "env": { - "browser": true, - "node": true, - "jest": true - } -} \ No newline at end of file diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..a93c3c1 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,41 @@ +module.exports = { + env: { + 'es6': true + }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 6, + ecmaFeatures: { + 'jsx': true + } + }, + rules: { + /* Indentation */ + 'no-mixed-spaces-and-tabs': 2, + 'indent': [2, 2], + /* Variable names */ + 'camelcase': 2, + /* Language constructs */ + 'curly': 2, + 'eqeqeq': [2, 'smart'], + 'func-style': [2, 'expression'], + /* Semicolons */ + 'semi': 2, + 'no-extra-semi': 2, + /* Padding & additional whitespace (perferred but optional) */ + 'brace-style': [2, '1tbs', { 'allowSingleLine': true }], + 'semi-spacing': 1, + 'key-spacing': 1, + 'block-spacing': 1, + 'comma-spacing': 1, + 'no-multi-spaces': 1, + 'space-before-blocks': 1, + 'keyword-spacing': [1, { 'before': true, 'after': true }], + 'space-infix-ops': 1, + /* Variable declaration */ + 'one-var': [1, { 'uninitialized': 'always', 'initialized': 'never' }], + /* Minuta */ + 'comma-style': [2, 'last'], + 'quotes': [1, 'single'] + } +}; \ No newline at end of file diff --git a/.gitignore b/.gitignore index 73243fb..b476648 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,8 @@ bower_components node_modules client/dist/bundle.js +idStreetNames.tsv +imagesfile.tsv +streetsImagesFile.tsv +file.tsv +client/dist/bundle.js \ No newline at end of file diff --git a/NoSQL/script.js b/NoSQL/script.js new file mode 100644 index 0000000..22976a3 --- /dev/null +++ b/NoSQL/script.js @@ -0,0 +1,52 @@ +const faker = require('faker'); +const fs = require('fs'); +const wstream = fs.createWriteStream('./../file.tsv'); + +const randomNumGenerator = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; + +const fakeDataGenerator = (i) => { + const homeUrls = ['https://s3-us-west-1.amazonaws.com/zillowhouses/House-In-Cliff-with-Pool.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/cliff-house-interior.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/front+view+housebythecliff-1024x608.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior+houseonthecliff.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg']; + + for (; i <= 10000000; i++) { + let randomNum = randomNumGenerator(0, 4); + const imageUrl = homeUrls[randomNum]; + if (!wstream.write(imageUrl + '\n')) { + wstream.once('drain', () => { + fakeDataGenerator(i + 1); + }); + return; + } + } + wstream.end(); +}; +fakeDataGenerator(1); + +// this is the file that will be written to, it will be created first, then written to. +// imgData.push(imageStorage); +// (${expression}). The expressions in the placeholders and the text between them get passed to a function +// allows for embedding information +// If the function can't write the combination of the generated data and a new line. +// drain the file +// start on the next item in the loop + +// const homeUrls = ['https://s3-us-west-1.amazonaws.com/zillowhouses/House-In-Cliff-with-Pool.jpg', +// 'https://s3-us-west-1.amazonaws.com/zillowhouses/cliff-house-interior.jpg', +// 'https://s3-us-west-1.amazonaws.com/zillowhouses/front+view+housebythecliff-1024x608.jpg', +// 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior+houseonthecliff.jpg', +// 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg']; + +// const imageGenerator = () => { +// for (let i = 1; i <= 3; i += 1) { +// const imageStorage = {}; +// imageStorage.imageUrl = homeUrls[randomNumGenerator(0, 4)]; +// imageStorage.homeID = faker.random.number({ min: 1, max: 5 }); +// imgData.push(imageStorage); +// } +// }; + +// imageGenerator(); +// console.log(imgData); \ No newline at end of file diff --git a/README.md b/README.md index a6ec07d..cc43601 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Project Name +# Zillower Image Carousel -> Image Carousel from Zillow +> Image Carousel similar to Zillow's ## Related Projects @@ -10,6 +10,41 @@ ### Installing Dependencies -From within the root directory: npm install +From within the root directory: +[ ] npm install +[ ] npm run build to bundle webpack +[ ] mysql -u root + ensure that the database img_carousel has been added. (you will most likely get a `CANNOT GET/` error at your localhost:3000 if you do not have the database set up and seeded) +[ ]npm run seed +[ ]npm run fake +### Public End Points (CRUD) +| Description | Endpoint | +| ---------------------------------------------- | ---------------------------- | +| Add a new image of the currently listed home | POST /images/:houseID/1 | +| Get current home's images | GET /images/:houseID/ | +| Replace a image under the currently listed home| PUT /images/:houseID/ | +| Delete info of home's Mortgage information | DELETE /images/:houseID/ | + +### POST /images/ +Input: +{"imageUrl":"https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg, "houseID":34} + +Output: +Image Added + +### GET /images/:houseID +Input: {"houseID":34} + +Output: +[{"imageUrl":"https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg"},] + +### PUT /images/:houseID +Input: {"houseID":34, "imageUrl":"https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg"} + +Output: +Succesfully Added + +### DELETE /images/:houseID +Input: {"houseID": 34} \ No newline at end of file diff --git a/client/dist/bundle.js b/client/dist/bundle.js index 198d98a..668ca94 100644 --- a/client/dist/bundle.js +++ b/client/dist/bundle.js @@ -94,7 +94,7 @@ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _RightArrow_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./RightArrow.jsx */ \"./client/src/components/RightArrow.jsx\");\n/* harmony import */ var _LeftArrow_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LeftArrow.jsx */ \"./client/src/components/LeftArrow.jsx\");\n/* harmony import */ var _Carousel_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Carousel.jsx */ \"./client/src/components/Carousel.jsx\");\n/* harmony import */ var _SlideShow_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SlideShow.jsx */ \"./client/src/components/SlideShow.jsx\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_5__);\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\n\n\n\n\n\n\n\nvar stringPxToNum = function stringPxToNum(string) {\n var num = string.split('px');\n return Number(num[0]);\n};\n\nvar App =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inherits(App, _React$Component);\n\n function App(props) {\n var _this;\n\n _classCallCheck(this, App);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this, props));\n _this.state = {\n images: [],\n currentIndex: 0,\n toggle: false,\n image: [],\n viewStyle: {\n position: 'relative',\n right: '0px'\n },\n carouselStyle: {\n overflow: 'hidden',\n maxWidth: '1629.45px'\n }\n };\n _this.renderImage = _this.renderImage.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n _this.goBack = _this.goBack.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n _this.goForward = _this.goForward.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n return _this;\n }\n\n _createClass(App, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n fetch('/images/:houseID').then(function (response) {\n return response.json();\n }).then(function (data) {\n _this2.setState({\n images: data\n });\n }).catch(function () {\n return console.log('Error');\n });\n }\n }, {\n key: \"goBack\",\n value: function goBack() {\n if (this.state.toggle) {\n this.setState({\n currentIndex: this.state.currentIndex - 1,\n image: this.state.images[this.state.currentIndex - 1].imageUrl\n });\n } else if (this.state.toggle === false && stringPxToNum(this.state.viewStyle.right) > 0) {\n this.setState({\n viewStyle: {\n position: 'relative',\n right: stringPxToNum(this.state.viewStyle.right) - 274.91 + 'px'\n }\n });\n }\n }\n }, {\n key: \"goForward\",\n value: function goForward() {\n if (this.state.toggle) {\n this.setState({\n currentIndex: Number(this.state.currentIndex) + 1,\n image: this.state.images[Number(this.state.currentIndex) + 1].imageUrl\n });\n } else if (this.state.toggle === false && stringPxToNum(this.state.viewStyle.right) < 1373) {\n this.setState({\n viewStyle: {\n position: 'relative',\n right: stringPxToNum(this.state.viewStyle.right) + 274.91 + 'px'\n }\n });\n }\n }\n }, {\n key: \"renderImage\",\n value: function renderImage(e) {\n if (!this.state.toggle) {\n this.setState({\n image: [e.target.src],\n currentIndex: e.target.id,\n toggle: true,\n carouselStyle: {\n overflow: 'visible',\n maxWidth: '1629.45px'\n }\n });\n } else if (this.state.toggle) {\n this.setState({\n images: this.state.images,\n toggle: false,\n carouselStyle: {\n overflow: 'hidden',\n maxWidth: '1629.45px'\n }\n });\n }\n }\n }, {\n key: \"renderSelectedImage\",\n value: function renderSelectedImage() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SlideShow_jsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n image: this.state.image,\n renderImage: this.renderImage\n });\n }\n }, {\n key: \"renderCarousel\",\n value: function renderCarousel() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Carousel_jsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n images: this.state.images,\n renderImage: this.renderImage\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n style: this.state.carouselStyle\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LeftArrow_jsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n goBack: this.goBack\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_RightArrow_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n goForward: this.goForward\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n style: this.state.viewStyle\n }, this.state.toggle ? this.renderSelectedImage() : this.renderCarousel()));\n }\n }]);\n\n return App;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (App);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jbGllbnQvc3JjL2NvbXBvbmVudHMvQXBwLmpzeC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2NsaWVudC9zcmMvY29tcG9uZW50cy9BcHAuanN4P2U1N2YiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBSaWdodEFycm93IGZyb20gJy4vUmlnaHRBcnJvdy5qc3gnO1xuaW1wb3J0IExlZnRBcnJvdyBmcm9tICcuL0xlZnRBcnJvdy5qc3gnO1xuaW1wb3J0IENhcm91c2VsIGZyb20gJy4vQ2Fyb3VzZWwuanN4JztcbmltcG9ydCBTbGlkZVNob3cgZnJvbSAnLi9TbGlkZVNob3cuanN4JztcbmltcG9ydCB7IHJlbGF0aXZlIH0gZnJvbSAncGF0aCc7XG5cbmNvbnN0IHN0cmluZ1B4VG9OdW0gPSAoc3RyaW5nKSA9PiB7XG4gIGNvbnN0IG51bSA9IHN0cmluZy5zcGxpdCgncHgnKTtcbiAgcmV0dXJuIE51bWJlcihudW1bMF0pO1xufTtcblxuY2xhc3MgQXBwIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG4gICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgIGltYWdlczogW10sXG4gICAgICBjdXJyZW50SW5kZXg6IDAsXG4gICAgICB0b2dnbGU6IGZhbHNlLFxuICAgICAgaW1hZ2U6IFtdLFxuICAgICAgdmlld1N0eWxlOiB7XG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICByaWdodDogJzBweCcsXG4gICAgICB9LFxuICAgICAgY2Fyb3VzZWxTdHlsZToge1xuICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgIG1heFdpZHRoOiAnMTYyOS40NXB4JyxcbiAgICAgIH0sXG4gICAgfTtcbiAgICB0aGlzLnJlbmRlckltYWdlID0gdGhpcy5yZW5kZXJJbWFnZS5iaW5kKHRoaXMpO1xuICAgIHRoaXMuZ29CYWNrID0gdGhpcy5nb0JhY2suYmluZCh0aGlzKTtcbiAgICB0aGlzLmdvRm9yd2FyZCA9IHRoaXMuZ29Gb3J3YXJkLmJpbmQodGhpcyk7XG4gIH1cblxuICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICBmZXRjaCgnL2ltYWdlcy86aG91c2VJRCcpXG4gICAgICAudGhlbihyZXNwb25zZSA9PiByZXNwb25zZS5qc29uKCkpXG4gICAgICAudGhlbigoZGF0YSkgPT4ge1xuICAgICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgICBpbWFnZXM6IGRhdGEsXG4gICAgICAgIH0pO1xuICAgICAgfSlcbiAgICAgIC5jYXRjaCgoKSA9PiBjb25zb2xlLmxvZygnRXJyb3InKSk7XG4gIH1cblxuICBnb0JhY2soKSB7XG4gICAgaWYgKHRoaXMuc3RhdGUudG9nZ2xlKSB7IFxuICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgIGN1cnJlbnRJbmRleDogdGhpcy5zdGF0ZS5jdXJyZW50SW5kZXggLSAxLFxuICAgICAgICBpbWFnZTogdGhpcy5zdGF0ZS5pbWFnZXNbdGhpcy5zdGF0ZS5jdXJyZW50SW5kZXggLSAxXS5pbWFnZVVybCxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAodGhpcy5zdGF0ZS50b2dnbGUgPT09IGZhbHNlICYmIChzdHJpbmdQeFRvTnVtKHRoaXMuc3RhdGUudmlld1N0eWxlLnJpZ2h0KSA+IDApKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgdmlld1N0eWxlOiB7XG4gICAgICAgICAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gICAgICAgICAgcmlnaHQ6IHN0cmluZ1B4VG9OdW0odGhpcy5zdGF0ZS52aWV3U3R5bGUucmlnaHQpIC0gMjc0LjkxICsgJ3B4J1xuICAgICAgICB9LFxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgZ29Gb3J3YXJkKCkge1xuICAgIGlmICh0aGlzLnN0YXRlLnRvZ2dsZSkge1xuICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgIGN1cnJlbnRJbmRleDogTnVtYmVyKHRoaXMuc3RhdGUuY3VycmVudEluZGV4KSArIDEsXG4gICAgICAgIGltYWdlOiB0aGlzLnN0YXRlLmltYWdlc1tOdW1iZXIodGhpcy5zdGF0ZS5jdXJyZW50SW5kZXgpICsgMV0uaW1hZ2VVcmwsXG4gICAgICB9KTtcbiAgICB9IGVsc2UgaWYgKHRoaXMuc3RhdGUudG9nZ2xlID09PSBmYWxzZSAmJiAoc3RyaW5nUHhUb051bSh0aGlzLnN0YXRlLnZpZXdTdHlsZS5yaWdodCkgPCAxMzczKSkgeyBcbiAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICB2aWV3U3R5bGU6IHtcbiAgICAgICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICAgICByaWdodDogc3RyaW5nUHhUb051bSh0aGlzLnN0YXRlLnZpZXdTdHlsZS5yaWdodCkgKyAyNzQuOTEgKyAncHgnXG4gICAgICAgIH0sXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICByZW5kZXJJbWFnZShlKSB7XG4gICAgaWYgKCF0aGlzLnN0YXRlLnRvZ2dsZSkge1xuICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgIGltYWdlOiBbZS50YXJnZXQuc3JjXSxcbiAgICAgICAgY3VycmVudEluZGV4OiBlLnRhcmdldC5pZCxcbiAgICAgICAgdG9nZ2xlOiB0cnVlLFxuICAgICAgICBjYXJvdXNlbFN0eWxlOiB7XG4gICAgICAgICAgb3ZlcmZsb3c6ICd2aXNpYmxlJyxcbiAgICAgICAgICBtYXhXaWR0aDogJzE2MjkuNDVweCcsXG4gICAgICAgIH0sXG4gICAgICB9KTtcbiAgICB9IGVsc2UgaWYgKHRoaXMuc3RhdGUudG9nZ2xlKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgaW1hZ2VzOiB0aGlzLnN0YXRlLmltYWdlcyxcbiAgICAgICAgdG9nZ2xlOiBmYWxzZSxcbiAgICAgICAgY2Fyb3VzZWxTdHlsZToge1xuICAgICAgICAgIG92ZXJmbG93OiAnaGlkZGVuJyxcbiAgICAgICAgICBtYXhXaWR0aDogJzE2MjkuNDVweCcsXG4gICAgICAgIH0sXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICByZW5kZXJTZWxlY3RlZEltYWdlKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8U2xpZGVTaG93IGltYWdlPXt0aGlzLnN0YXRlLmltYWdlfSByZW5kZXJJbWFnZT17dGhpcy5yZW5kZXJJbWFnZX0gLz5cbiAgICApO1xuICB9XG5cbiAgcmVuZGVyQ2Fyb3VzZWwoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxDYXJvdXNlbCBpbWFnZXM9e3RoaXMuc3RhdGUuaW1hZ2VzfSByZW5kZXJJbWFnZT17dGhpcy5yZW5kZXJJbWFnZX0gLz5cbiAgICApO1xuICB9XG5cbiAgcmVuZGVyKCkge1xuICAgIHJldHVybiAoXG4gICAgICA8ZGl2IHN0eWxlPXt0aGlzLnN0YXRlLmNhcm91c2VsU3R5bGV9PlxuICAgICAgICA8TGVmdEFycm93IGdvQmFjaz17dGhpcy5nb0JhY2t9IC8+XG4gICAgICAgIDxSaWdodEFycm93IGdvRm9yd2FyZD17dGhpcy5nb0ZvcndhcmR9IC8+XG4gICAgICAgIDxkaXYgc3R5bGU9e3RoaXMuc3RhdGUudmlld1N0eWxlfT5cbiAgICAgICAgICB7dGhpcy5zdGF0ZS50b2dnbGUgPyB0aGlzLnJlbmRlclNlbGVjdGVkSW1hZ2UoKSA6IHRoaXMucmVuZGVyQ2Fyb3VzZWwoKX1cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICApO1xuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IEFwcDtcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7Ozs7O0FBQ0E7QUFBQTtBQUNBO0FBREE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBRkE7QUFUQTtBQWNBO0FBQ0E7QUFDQTtBQWxCQTtBQW1CQTtBQUNBOzs7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFFQTtBQUNBO0FBREE7QUFHQTtBQUNBO0FBQUE7QUFDQTs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBREE7QUFNQTtBQUNBOzs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFEQTtBQU1BO0FBQ0E7OztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSkE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSEE7QUFRQTtBQUNBOzs7QUFFQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBRUE7OztBQUVBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFFQTs7O0FBRUE7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFLQTs7OztBQTlHQTtBQUNBO0FBZ0hBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./client/src/components/App.jsx\n"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _RightArrow_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./RightArrow.jsx */ \"./client/src/components/RightArrow.jsx\");\n/* harmony import */ var _LeftArrow_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./LeftArrow.jsx */ \"./client/src/components/LeftArrow.jsx\");\n/* harmony import */ var _Carousel_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./Carousel.jsx */ \"./client/src/components/Carousel.jsx\");\n/* harmony import */ var _SlideShow_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./SlideShow.jsx */ \"./client/src/components/SlideShow.jsx\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! path */ \"./node_modules/path-browserify/index.js\");\n/* harmony import */ var path__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(path__WEBPACK_IMPORTED_MODULE_5__);\nfunction _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }\n\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\n\n\n\n\n\n\n\nvar stringPxToNum = function stringPxToNum(string) {\n var num = string.split('px');\n return Number(num[0]);\n};\n\nvar App =\n/*#__PURE__*/\nfunction (_React$Component) {\n _inherits(App, _React$Component);\n\n function App(props) {\n var _this;\n\n _classCallCheck(this, App);\n\n _this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this, props));\n _this.state = {\n images: [],\n currentIndex: 0,\n toggle: false,\n image: [],\n viewStyle: {\n position: 'relative',\n right: '0px'\n },\n carouselStyle: {\n overflow: 'hidden',\n maxWidth: '1629.45px'\n }\n };\n _this.renderImage = _this.renderImage.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n _this.goBack = _this.goBack.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n _this.goForward = _this.goForward.bind(_assertThisInitialized(_assertThisInitialized(_this)));\n return _this;\n }\n\n _createClass(App, [{\n key: \"componentDidMount\",\n value: function componentDidMount() {\n var _this2 = this;\n\n // path = listings/images/:houseID'\n console.log('App.jsx line 37', \"\".concat(window.location.pathname, \"images\"));\n fetch(\"\".concat(window.location.pathname, \"images\")).then(function (response) {\n return response.json();\n }).then(function (data) {\n _this2.setState({\n images: data\n });\n }).catch(function () {\n return console.log('Error');\n });\n }\n }, {\n key: \"goBack\",\n value: function goBack() {\n if (this.state.toggle) {\n this.setState({\n currentIndex: this.state.currentIndex - 1,\n image: this.state.images[this.state.currentIndex - 1].imageUrl\n });\n } else if (this.state.toggle === false && stringPxToNum(this.state.viewStyle.right) > 0) {\n this.setState({\n viewStyle: {\n position: 'relative',\n right: stringPxToNum(this.state.viewStyle.right) - 274.91 + 'px'\n }\n });\n }\n }\n }, {\n key: \"goForward\",\n value: function goForward() {\n if (this.state.toggle) {\n this.setState({\n currentIndex: Number(this.state.currentIndex) + 1,\n image: this.state.images[Number(this.state.currentIndex) + 1].imageUrl\n });\n } else if (this.state.toggle === false && stringPxToNum(this.state.viewStyle.right) < 1373) {\n this.setState({\n viewStyle: {\n position: 'relative',\n right: stringPxToNum(this.state.viewStyle.right) + 274.91 + 'px'\n }\n });\n }\n }\n }, {\n key: \"renderImage\",\n value: function renderImage(e) {\n if (!this.state.toggle) {\n this.setState({\n image: [e.target.src],\n currentIndex: e.target.id,\n toggle: true,\n carouselStyle: {\n overflow: 'visible',\n maxWidth: '1629.45px'\n }\n });\n } else if (this.state.toggle) {\n this.setState({\n images: this.state.images,\n toggle: false,\n carouselStyle: {\n overflow: 'hidden',\n maxWidth: '1629.45px'\n }\n });\n }\n }\n }, {\n key: \"renderSelectedImage\",\n value: function renderSelectedImage() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_SlideShow_jsx__WEBPACK_IMPORTED_MODULE_4__[\"default\"], {\n image: this.state.image,\n renderImage: this.renderImage\n });\n }\n }, {\n key: \"renderCarousel\",\n value: function renderCarousel() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_Carousel_jsx__WEBPACK_IMPORTED_MODULE_3__[\"default\"], {\n images: this.state.images,\n renderImage: this.renderImage\n });\n }\n }, {\n key: \"render\",\n value: function render() {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n style: this.state.carouselStyle\n }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_LeftArrow_jsx__WEBPACK_IMPORTED_MODULE_2__[\"default\"], {\n goBack: this.goBack\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_RightArrow_jsx__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n goForward: this.goForward\n }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n style: this.state.viewStyle\n }, this.state.toggle ? this.renderSelectedImage() : this.renderCarousel()));\n }\n }]);\n\n return App;\n}(react__WEBPACK_IMPORTED_MODULE_0___default.a.Component);\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (App);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jbGllbnQvc3JjL2NvbXBvbmVudHMvQXBwLmpzeC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL2NsaWVudC9zcmMvY29tcG9uZW50cy9BcHAuanN4P2U1N2YiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBSaWdodEFycm93IGZyb20gJy4vUmlnaHRBcnJvdy5qc3gnO1xuaW1wb3J0IExlZnRBcnJvdyBmcm9tICcuL0xlZnRBcnJvdy5qc3gnO1xuaW1wb3J0IENhcm91c2VsIGZyb20gJy4vQ2Fyb3VzZWwuanN4JztcbmltcG9ydCBTbGlkZVNob3cgZnJvbSAnLi9TbGlkZVNob3cuanN4JztcbmltcG9ydCB7IHJlbGF0aXZlIH0gZnJvbSAncGF0aCc7XG5cbmNvbnN0IHN0cmluZ1B4VG9OdW0gPSAoc3RyaW5nKSA9PiB7XG4gIGNvbnN0IG51bSA9IHN0cmluZy5zcGxpdCgncHgnKTtcbiAgcmV0dXJuIE51bWJlcihudW1bMF0pO1xufTtcblxuY2xhc3MgQXBwIGV4dGVuZHMgUmVhY3QuQ29tcG9uZW50IHtcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcbiAgICBzdXBlcihwcm9wcyk7XG4gICAgdGhpcy5zdGF0ZSA9IHtcbiAgICAgIGltYWdlczogW10sXG4gICAgICBjdXJyZW50SW5kZXg6IDAsXG4gICAgICB0b2dnbGU6IGZhbHNlLFxuICAgICAgaW1hZ2U6IFtdLFxuICAgICAgdmlld1N0eWxlOiB7XG4gICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICByaWdodDogJzBweCcsXG4gICAgICB9LFxuICAgICAgY2Fyb3VzZWxTdHlsZToge1xuICAgICAgICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gICAgICAgIG1heFdpZHRoOiAnMTYyOS40NXB4JyxcbiAgICAgIH0sXG4gICAgfTtcbiAgICB0aGlzLnJlbmRlckltYWdlID0gdGhpcy5yZW5kZXJJbWFnZS5iaW5kKHRoaXMpO1xuICAgIHRoaXMuZ29CYWNrID0gdGhpcy5nb0JhY2suYmluZCh0aGlzKTtcbiAgICB0aGlzLmdvRm9yd2FyZCA9IHRoaXMuZ29Gb3J3YXJkLmJpbmQodGhpcyk7XG4gIH1cblxuICBjb21wb25lbnREaWRNb3VudCgpIHtcbiAgICAvLyBwYXRoID0gbGlzdGluZ3MvaW1hZ2VzLzpob3VzZUlEJ1xuICAgIGNvbnNvbGUubG9nKCAnQXBwLmpzeCBsaW5lIDM3JywgYCR7d2luZG93LmxvY2F0aW9uLnBhdGhuYW1lfWltYWdlc2ApXG4gICAgZmV0Y2goYCR7d2luZG93LmxvY2F0aW9uLnBhdGhuYW1lfWltYWdlc2ApXG4gICAgICBcbiAgICAgIC50aGVuKHJlc3BvbnNlID0+IHJlc3BvbnNlLmpzb24oKSlcbiAgICAgIC50aGVuKChkYXRhKSA9PiB7XG4gICAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICAgIGltYWdlczogZGF0YSxcbiAgICAgICAgfSk7XG4gICAgICB9KVxuICAgICAgLmNhdGNoKCgpID0+IGNvbnNvbGUubG9nKCdFcnJvcicpKTtcbiAgfVxuXG4gIGdvQmFjaygpIHtcbiAgICBpZiAodGhpcy5zdGF0ZS50b2dnbGUpIHsgXG4gICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgY3VycmVudEluZGV4OiB0aGlzLnN0YXRlLmN1cnJlbnRJbmRleCAtIDEsXG4gICAgICAgIGltYWdlOiB0aGlzLnN0YXRlLmltYWdlc1t0aGlzLnN0YXRlLmN1cnJlbnRJbmRleCAtIDFdLmltYWdlVXJsLFxuICAgICAgfSk7XG4gICAgfSBlbHNlIGlmICh0aGlzLnN0YXRlLnRvZ2dsZSA9PT0gZmFsc2UgJiYgKHN0cmluZ1B4VG9OdW0odGhpcy5zdGF0ZS52aWV3U3R5bGUucmlnaHQpID4gMCkpIHtcbiAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICB2aWV3U3R5bGU6IHtcbiAgICAgICAgICBwb3NpdGlvbjogJ3JlbGF0aXZlJyxcbiAgICAgICAgICByaWdodDogc3RyaW5nUHhUb051bSh0aGlzLnN0YXRlLnZpZXdTdHlsZS5yaWdodCkgLSAyNzQuOTEgKyAncHgnXG4gICAgICAgIH0sXG4gICAgICB9KTtcbiAgICB9XG4gIH1cblxuICBnb0ZvcndhcmQoKSB7XG4gICAgaWYgKHRoaXMuc3RhdGUudG9nZ2xlKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgY3VycmVudEluZGV4OiBOdW1iZXIodGhpcy5zdGF0ZS5jdXJyZW50SW5kZXgpICsgMSxcbiAgICAgICAgaW1hZ2U6IHRoaXMuc3RhdGUuaW1hZ2VzW051bWJlcih0aGlzLnN0YXRlLmN1cnJlbnRJbmRleCkgKyAxXS5pbWFnZVVybCxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAodGhpcy5zdGF0ZS50b2dnbGUgPT09IGZhbHNlICYmIChzdHJpbmdQeFRvTnVtKHRoaXMuc3RhdGUudmlld1N0eWxlLnJpZ2h0KSA8IDEzNzMpKSB7IFxuICAgICAgdGhpcy5zZXRTdGF0ZSh7XG4gICAgICAgIHZpZXdTdHlsZToge1xuICAgICAgICAgIHBvc2l0aW9uOiAncmVsYXRpdmUnLFxuICAgICAgICAgIHJpZ2h0OiBzdHJpbmdQeFRvTnVtKHRoaXMuc3RhdGUudmlld1N0eWxlLnJpZ2h0KSArIDI3NC45MSArICdweCdcbiAgICAgICAgfSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHJlbmRlckltYWdlKGUpIHtcbiAgICBpZiAoIXRoaXMuc3RhdGUudG9nZ2xlKSB7XG4gICAgICB0aGlzLnNldFN0YXRlKHtcbiAgICAgICAgaW1hZ2U6IFtlLnRhcmdldC5zcmNdLFxuICAgICAgICBjdXJyZW50SW5kZXg6IGUudGFyZ2V0LmlkLFxuICAgICAgICB0b2dnbGU6IHRydWUsXG4gICAgICAgIGNhcm91c2VsU3R5bGU6IHtcbiAgICAgICAgICBvdmVyZmxvdzogJ3Zpc2libGUnLFxuICAgICAgICAgIG1heFdpZHRoOiAnMTYyOS40NXB4JyxcbiAgICAgICAgfSxcbiAgICAgIH0pO1xuICAgIH0gZWxzZSBpZiAodGhpcy5zdGF0ZS50b2dnbGUpIHtcbiAgICAgIHRoaXMuc2V0U3RhdGUoe1xuICAgICAgICBpbWFnZXM6IHRoaXMuc3RhdGUuaW1hZ2VzLFxuICAgICAgICB0b2dnbGU6IGZhbHNlLFxuICAgICAgICBjYXJvdXNlbFN0eWxlOiB7XG4gICAgICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgICAgIG1heFdpZHRoOiAnMTYyOS40NXB4JyxcbiAgICAgICAgfSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHJlbmRlclNlbGVjdGVkSW1hZ2UoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxTbGlkZVNob3cgaW1hZ2U9e3RoaXMuc3RhdGUuaW1hZ2V9IHJlbmRlckltYWdlPXt0aGlzLnJlbmRlckltYWdlfSAvPlxuICAgICk7XG4gIH1cblxuICByZW5kZXJDYXJvdXNlbCgpIHtcbiAgICByZXR1cm4gKFxuICAgICAgPENhcm91c2VsIGltYWdlcz17dGhpcy5zdGF0ZS5pbWFnZXN9IHJlbmRlckltYWdlPXt0aGlzLnJlbmRlckltYWdlfSAvPlxuICAgICk7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXYgc3R5bGU9e3RoaXMuc3RhdGUuY2Fyb3VzZWxTdHlsZX0+XG4gICAgICAgIDxMZWZ0QXJyb3cgZ29CYWNrPXt0aGlzLmdvQmFja30gLz5cbiAgICAgICAgPFJpZ2h0QXJyb3cgZ29Gb3J3YXJkPXt0aGlzLmdvRm9yd2FyZH0gLz5cbiAgICAgICAgPGRpdiBzdHlsZT17dGhpcy5zdGF0ZS52aWV3U3R5bGV9PlxuICAgICAgICAgIHt0aGlzLnN0YXRlLnRvZ2dsZSA/IHRoaXMucmVuZGVyU2VsZWN0ZWRJbWFnZSgpIDogdGhpcy5yZW5kZXJDYXJvdXNlbCgpfVxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgQXBwO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7Ozs7QUFDQTtBQUFBO0FBQ0E7QUFEQTtBQUNBO0FBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFGQTtBQVRBO0FBY0E7QUFDQTtBQUNBO0FBbEJBO0FBbUJBO0FBQ0E7OztBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFDQTtBQUVBO0FBQUE7QUFFQTtBQUNBO0FBREE7QUFHQTtBQUNBO0FBQUE7QUFDQTs7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBREE7QUFNQTtBQUNBOzs7QUFFQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFJQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBRkE7QUFEQTtBQU1BO0FBQ0E7OztBQUVBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSkE7QUFTQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUZBO0FBSEE7QUFRQTtBQUNBOzs7QUFFQTtBQUNBO0FBQ0E7QUFBQTtBQUFBO0FBRUE7OztBQUVBO0FBQ0E7QUFDQTtBQUFBO0FBQUE7QUFFQTs7O0FBRUE7QUFDQTtBQUNBO0FBQUE7QUFDQTtBQUFBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFLQTs7OztBQWpIQTtBQUNBO0FBbUhBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./client/src/components/App.jsx\n"); /***/ }), @@ -117,7 +117,7 @@ eval("\nvar content = __webpack_require__(/*! !../../../node_modules/css-loader? /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Carousel_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Carousel.css */ \"./client/src/components/Carousel.css\");\n/* harmony import */ var _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Carousel_css__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nvar Carousel = function Carousel(props) {\n var otherImages = props.images.slice(1);\n var imageCount = 0;\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.carouselContainer\n }, props.images.length === 0 ? '' : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n src: \"\".concat(props.images[0].imageUrl),\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.firstImageContainer,\n id: imageCount,\n onClick: props.renderImage\n }), otherImages.map(function (image, index) {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n key: index,\n src: \"\".concat(image.imageUrl),\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.imageContainer,\n id: imageCount += 1,\n onClick: props.renderImage\n });\n }));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Carousel);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jbGllbnQvc3JjL2NvbXBvbmVudHMvQ2Fyb3VzZWwuanN4LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vY2xpZW50L3NyYy9jb21wb25lbnRzL0Nhcm91c2VsLmpzeD83MWEyIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgY2Fyb3VzZWxTdHlsZSBmcm9tICcuL0Nhcm91c2VsLmNzcyc7XG5cbmNvbnN0IENhcm91c2VsID0gKHByb3BzKSA9PiB7XG4gIGNvbnN0IG90aGVySW1hZ2VzID0gcHJvcHMuaW1hZ2VzLnNsaWNlKDEpO1xuICBsZXQgaW1hZ2VDb3VudCA9IDA7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2Nhcm91c2VsU3R5bGUuY2Fyb3VzZWxDb250YWluZXJ9PiBcbiAgICAgIHtwcm9wcy5pbWFnZXMubGVuZ3RoID09PSAwID8gJycgOiA8aW1nIHNyYz17YCR7cHJvcHMuaW1hZ2VzWzBdLmltYWdlVXJsfWB9IGNsYXNzTmFtZT17Y2Fyb3VzZWxTdHlsZS5maXJzdEltYWdlQ29udGFpbmVyfSBpZD17aW1hZ2VDb3VudH0gb25DbGljaz17cHJvcHMucmVuZGVySW1hZ2V9IC8+fVxuICAgICAge290aGVySW1hZ2VzLm1hcCgoaW1hZ2UsIGluZGV4KSA9PiAoXG4gICAgICAgIDxpbWcga2V5PXtpbmRleH0gc3JjPXtgJHtpbWFnZS5pbWFnZVVybH1gfSBjbGFzc05hbWU9e2Nhcm91c2VsU3R5bGUuaW1hZ2VDb250YWluZXJ9IGlkPXtpbWFnZUNvdW50ICs9IDF9IG9uQ2xpY2s9e3Byb3BzLnJlbmRlckltYWdlfSAvPlxuICAgICAgKSl9XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBDYXJvdXNlbDtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBS0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./client/src/components/Carousel.jsx\n"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _Carousel_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Carousel.css */ \"./client/src/components/Carousel.css\");\n/* harmony import */ var _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_Carousel_css__WEBPACK_IMPORTED_MODULE_1__);\n\n\n\nvar Carousel = function Carousel(props) {\n console.log(props.images);\n var otherImages = props.images.slice(1);\n var imageCount = 0;\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.carouselContainer\n }, props.images.length === 0 ? '' : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n src: \"\".concat(props.images[0].imageUrl),\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.firstImageContainer,\n id: imageCount,\n onClick: props.renderImage\n }), otherImages.map(function (image, index) {\n return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"img\", {\n key: index,\n src: \"\".concat(image.imageUrl),\n className: _Carousel_css__WEBPACK_IMPORTED_MODULE_1___default.a.imageContainer,\n id: imageCount += 1,\n onClick: props.renderImage\n });\n }));\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Carousel);//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9jbGllbnQvc3JjL2NvbXBvbmVudHMvQ2Fyb3VzZWwuanN4LmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vY2xpZW50L3NyYy9jb21wb25lbnRzL0Nhcm91c2VsLmpzeD83MWEyIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgY2Fyb3VzZWxTdHlsZSBmcm9tICcuL0Nhcm91c2VsLmNzcyc7XG5cbmNvbnN0IENhcm91c2VsID0gKHByb3BzKSA9PiB7XG4gIGNvbnNvbGUubG9nKHByb3BzLmltYWdlcyk7XG4gIGNvbnN0IG90aGVySW1hZ2VzID0gcHJvcHMuaW1hZ2VzLnNsaWNlKDEpO1xuICBsZXQgaW1hZ2VDb3VudCA9IDA7XG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWUgPSB7Y2Fyb3VzZWxTdHlsZS5jYXJvdXNlbENvbnRhaW5lcn0+XG4gICAgICB7cHJvcHMuaW1hZ2VzLmxlbmd0aCA9PT0gMCA/ICcnIDogPGltZyBzcmM9e2Ake3Byb3BzLmltYWdlc1swXS5pbWFnZVVybH1gfSBjbGFzc05hbWU9e2Nhcm91c2VsU3R5bGUuZmlyc3RJbWFnZUNvbnRhaW5lcn0gaWQ9e2ltYWdlQ291bnR9IG9uQ2xpY2s9e3Byb3BzLnJlbmRlckltYWdlfSAvPn1cbiAgICAgIHtvdGhlckltYWdlcy5tYXAoKGltYWdlLCBpbmRleCkgPT4gKFxuICAgICAgICA8aW1nIGtleT17aW5kZXh9IHNyYz17YCR7aW1hZ2UuaW1hZ2VVcmx9YH0gY2xhc3NOYW1lPXtjYXJvdXNlbFN0eWxlLmltYWdlQ29udGFpbmVyfSBpZD17aW1hZ2VDb3VudCArPSAxfSBvbkNsaWNrPXtwcm9wcy5yZW5kZXJJbWFnZX0gLz5cbiAgICAgICkpfVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgQ2Fyb3VzZWw7XG4iXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFBQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFDQTtBQUNBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQURBO0FBS0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///./client/src/components/Carousel.jsx\n"); /***/ }), diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx index 13ad590..22f4ddc 100644 --- a/client/src/components/App.jsx +++ b/client/src/components/App.jsx @@ -33,7 +33,12 @@ class App extends React.Component { } componentDidMount() { - fetch('/images/:houseID') + // path = listings/images/:houseID' + // console.log( 'App.jsx line 37', `${window.location.pathname}images`) + // fetch('/images/:houseID') + const id = window.location.pathname.split('/')[2]; + console.log('This is the', id); + fetch(`/images/${id}`) .then(response => response.json()) .then((data) => { this.setState({ diff --git a/client/src/components/Carousel.jsx b/client/src/components/Carousel.jsx index 1f9fa9f..1e1a681 100644 --- a/client/src/components/Carousel.jsx +++ b/client/src/components/Carousel.jsx @@ -2,10 +2,11 @@ import React from 'react'; import carouselStyle from './Carousel.css'; const Carousel = (props) => { + console.log(props.images); const otherImages = props.images.slice(1); let imageCount = 0; return ( -
+
{props.images.length === 0 ? '' : } {otherImages.map((image, index) => ( diff --git a/database/SQL/cassTest.cql b/database/SQL/cassTest.cql new file mode 100644 index 0000000..e467ada --- /dev/null +++ b/database/SQL/cassTest.cql @@ -0,0 +1,16 @@ +DROP KEYSPACE IF EXISTS test; +DROP TABLE IF EXISTS test.stuff; +CREATE KEYSPACE IF NOT EXISTS test WITH REPLICATION = {'class': 'SimpleStrategy', 'replication_factor': 1}; + +USE test; + +CREATE TABLE IF NOT EXISTS test.stuff ( + id INT PRIMARY KEY, + street text, + imageUrl text, + houseID INT +); + +COPY test.stuff (id, street, imageUrl, houseID) FROM '/Users/Phantogram/HRSF104/sdc/image-carousel/database/SQL/newFile.tsv' WITH DELIMITER = '\t' AND HEADER = TRUE; + + diff --git a/database/SQL/cassandra.cql b/database/SQL/cassandra.cql new file mode 100644 index 0000000..c1745c9 --- /dev/null +++ b/database/SQL/cassandra.cql @@ -0,0 +1,14 @@ +DROP KEYSPACE IF EXISTS images; +DROP TABLE IF EXISTS images.carousel; +CREATE KEYSPACE IF NOT EXISTS images WITH REPLICATION = {'class': 'SimpleStrategy', 'replication_factor': 1}; + +USE images; + +CREATE TABLE IF NOT EXISTS images.carousel( + id INT PRIMARY KEY, + street text, + imageUrl text +); + +COPY images.carousel (id, street, imageUrl) FROM '/Users/Phantogram/HRSF104/sdc/image-carousel/database/SQL/streetsImagesFile.tsv' WITH DELIMITER = '\t' AND HEADER = TRUE; + diff --git a/database/SQL/import_images_carousel.err.20181119_130246 b/database/SQL/import_images_carousel.err.20181119_130246 new file mode 100644 index 0000000..e69de29 diff --git a/database/SQL/pGSchema.sql b/database/SQL/pGSchema.sql new file mode 100644 index 0000000..627b8b2 --- /dev/null +++ b/database/SQL/pGSchema.sql @@ -0,0 +1,12 @@ +DROP DATABASE images; +CREATE DATABASE images; + +\c images; + +CREATE TABLE IF NOT EXISTS carousel( + id SERIAL PRIMARY KEY, + street VARCHAR(80), + imageUrl TEXT +); + +\COPY carousel FROM 'database/SQL/streetsImagesFile.tsv' DELIMITER E'\t'; \ No newline at end of file diff --git a/database/SQL/script.js b/database/SQL/script.js new file mode 100644 index 0000000..2b618b1 --- /dev/null +++ b/database/SQL/script.js @@ -0,0 +1,27 @@ +const faker = require('faker'); +const fs = require('fs'); +const wstream = fs.createWriteStream('./../file.tsv'); + +const randomNumGenerator = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; + +const fakeDataGenerator = (i) => { + const homeUrls = ['https://s3-us-west-1.amazonaws.com/zillowhouses/House-In-Cliff-with-Pool.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/cliff-house-interior.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/front+view+housebythecliff-1024x608.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior+houseonthecliff.jpg', + 'https://s3-us-west-1.amazonaws.com/zillowhouses/interior-malibu-home.jpg']; + + for (; i <= 10000000; i++) { + let randomNum = randomNumGenerator(0, 4); + let houseID = randomNumGenerator(1, 100000); + const imageUrl = homeUrls[randomNum]; + if (!wstream.write(imageUrl + '\t' + houseID + '\n')) { + wstream.once('drain', () => { + fakeDataGenerator(i + 1); + }); + return; + } + } + wstream.end(); +}; +fakeDataGenerator(1); \ No newline at end of file diff --git a/database/SQL/testGres.sql b/database/SQL/testGres.sql new file mode 100644 index 0000000..485f432 --- /dev/null +++ b/database/SQL/testGres.sql @@ -0,0 +1,13 @@ +DROP DATABASE test; +CREATE DATABASE test; + +\c test; + +CREATE TABLE IF NOT EXISTS carousel( + id SERIAL PRIMARY KEY, + street VARCHAR(80), + imageUrl TEXT, + houseID INT +); + +\COPY carousel FROM 'newFile.tsv' DELIMITER E'\t'; \ No newline at end of file diff --git a/database/fakeData.js b/database/fakeData.js index d1a6436..236b51e 100644 --- a/database/fakeData.js +++ b/database/fakeData.js @@ -15,7 +15,7 @@ const imageGenerator = () => { for (let i = 1; i <= 100; i += 1) { const imageStorage = {}; imageStorage.imageUrl = homeUrls[randomNumGenerator(0, 4)]; - imageStorage.homeID = faker.random.number({ min: 1, max: 100 }); + imageStorage.homeID = faker.random.number({ min: 1, max: 5 }); imgData.push(imageStorage); } }; diff --git a/server/index.js b/server/index.js index 2b38b49..383e891 100644 --- a/server/index.js +++ b/server/index.js @@ -1,19 +1,17 @@ const express = require('express'); - const app = express(); const port = 3003; const path = require('path'); const bodyParser = require('body-parser'); - const dbIndex = require('../database/index.js'); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); -app.use(express.static(path.join(__dirname, '../client/dist'))); +app.use('/home/:id', express.static(path.join(__dirname, '../client/dist'))); app.get('/images/:houseID', (req, res) => { const id = req.params.houseID; - dbIndex.getAllImages(33, (err, results) => { + dbIndex.getAllImages(id, (err, results) => { if (err) { res.status(500).send(err); } else { diff --git a/test/__tests__/carouselTest.js b/test/__tests__/carouselTest.js index 197a46c..30ea0ca 100644 --- a/test/__tests__/carouselTest.js +++ b/test/__tests__/carouselTest.js @@ -1,3 +1,3 @@ import { shallow, mount, render } from 'enzyme'; import React from 'react'; -//import file to test +// import file to test