Seed branch

.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']
+  }
+};

.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

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);

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}

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({

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 (
-    <div className={carouselStyle.carouselContainer}> 
+    <div className = {carouselStyle.carouselContainer}>
       {props.images.length === 0 ? '' : <img src={`${props.images[0].imageUrl}`} className={carouselStyle.firstImageContainer} id={imageCount} onClick={props.renderImage} />}
       {otherImages.map((image, index) => (
         <img key={index} src={`${image.imageUrl}`} className={carouselStyle.imageContainer} id={imageCount += 1} onClick={props.renderImage} />

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;
+
+

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;
+

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';

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);

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';

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);
   }
 };

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 {

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