From 4b1b2515a468fc43c21faee69bd362b2a7c82499 Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Mon, 18 Jun 2018 15:00:55 -0700 Subject: [PATCH 01/42] Added axios to project. --- package-lock.json | 9 +++++++++ package.json | 3 ++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 79f52b34f..2bdc7a2f0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -434,6 +434,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz", "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.5.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz", diff --git a/package.json b/package.json index 951a38e2f..b5d697449 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-scripts": "1.1.4" @@ -13,4 +14,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} From 394e6b61760de5dfd4ceafe4546f733925752f41 Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Mon, 18 Jun 2018 15:01:35 -0700 Subject: [PATCH 02/42] Added movie, customer and container components files. --- src/App.js | 11 +++++------ src/components/Container.js | 21 +++++++++++++++++++++ src/components/Customer.js | 16 ++++++++++++++++ src/components/Movie.js | 15 +++++++++++++++ 4 files changed, 57 insertions(+), 6 deletions(-) create mode 100644 src/components/Container.js create mode 100644 src/components/Customer.js create mode 100644 src/components/Movie.js diff --git a/src/App.js b/src/App.js index 203067e4d..a10b30cec 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,17 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; + import './App.css'; +import Container from './components/Container' class App extends Component { render() { return (
- logo -

Welcome to React

+

Welcome to VideOcto

-

- To get started, edit src/App.js and save to reload. -

+ +
); } diff --git a/src/components/Container.js b/src/components/Container.js new file mode 100644 index 000000000..a22d5ecec --- /dev/null +++ b/src/components/Container.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Movie from './Movie' +import Customer from './Customer' + + +class Container extends Component { + render() { + return ( +
+ + +
+ + ); + } +} + + +export default Container; diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..9a0497431 --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + + + +class Customer extends Component { + render() { + return ( + 'Im a customer' + ); + } +} + + +export default Customer; diff --git a/src/components/Movie.js b/src/components/Movie.js new file mode 100644 index 000000000..023ddd789 --- /dev/null +++ b/src/components/Movie.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; + + +class Movie extends Component { + render() { + return ( + 'hello im in movie!' + ); + } +} + + +export default Movie; From 5bca8025b0b0732baddd1610a1e9049ddce1133e Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Mon, 18 Jun 2018 15:20:44 -0700 Subject: [PATCH 03/42] added functions to get movies and get customers from the api. --- src/components/Container.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/Container.js b/src/components/Container.js index a22d5ecec..1f2e32ec7 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -4,13 +4,38 @@ import axios from 'axios'; import Movie from './Movie' import Customer from './Customer' - +URL = 'http://localhost:3000/'; class Container extends Component { + +getMovies() { + axios.get(`${URL}/movies`) + .then((response) => { + console.log(response); + }) + .catch((error)=> { + console.log(error); + }) +} + +getCustomers() { + axios.get(`${URL}/customers`) + .then((response) => { + console.log(response); + }) + .catch((error)=> { + console.log(error); + }) +} + render() { + const movies = this.getMovies(); + const customers = this.getCustomers(); return (
+ {movies} + {customers}
); From 5ad6dddaccd280dedb95e8d864709ff2268810dd Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Mon, 18 Jun 2018 16:22:23 -0700 Subject: [PATCH 04/42] working on passing library data to customer and movie collection to each component. --- src/components/Container.js | 41 ++++++++++++++++++++-------- src/components/CustomerCollection.js | 16 +++++++++++ src/components/MovieCollection.js | 22 +++++++++++++++ 3 files changed, 68 insertions(+), 11 deletions(-) create mode 100644 src/components/CustomerCollection.js create mode 100644 src/components/MovieCollection.js diff --git a/src/components/Container.js b/src/components/Container.js index 1f2e32ec7..dcccd8f2b 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,16 +1,31 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import axios from 'axios'; -import Movie from './Movie' -import Customer from './Customer' +import MovieCollection from './MovieCollection' +import CustomerCollection from './CustomerCollection' URL = 'http://localhost:3000/'; class Container extends Component { -getMovies() { +constructor() { + super(); + this.state = { + movies: [] + } +} + +componentDidMount() { +// getMovies() { axios.get(`${URL}/movies`) .then((response) => { - console.log(response); + console.log(response.data); +const all_movies = response.data.map((movie)=>{ + return movie +}); + + this.setState({ + movies: all_movies + }) }) .catch((error)=> { console.log(error); @@ -20,7 +35,10 @@ getMovies() { getCustomers() { axios.get(`${URL}/customers`) .then((response) => { - console.log(response); + console.log(response.data); + return ( + response.data + ) }) .catch((error)=> { console.log(error); @@ -28,14 +46,15 @@ getCustomers() { } render() { - const movies = this.getMovies(); - const customers = this.getCustomers(); + // const movies = this.getMovies(); + // const customers = this.getCustomers(); return (
- - - {movies} - {customers} +

here?

+ + + +
); diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js new file mode 100644 index 000000000..a287526cc --- /dev/null +++ b/src/components/CustomerCollection.js @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + + + +class CustomerCollection extends Component { + render() { + return ( + 'we are the customer collection' + ); + } +} + + +export default CustomerCollection; diff --git a/src/components/MovieCollection.js b/src/components/MovieCollection.js new file mode 100644 index 000000000..10320be7c --- /dev/null +++ b/src/components/MovieCollection.js @@ -0,0 +1,22 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + + + +class MovieCollection extends Component { + // static propTypes = { + // movies:PropTypes.array.isRequired, + // } + render() { + console.log(this.props); + + return ( +

{this.props.movies} +

+ ); + } +} + + +export default MovieCollection; From cbde52665ed9efed8f9651af473e590d28c72d1a Mon Sep 17 00:00:00 2001 From: Winifred Irarrazaval Date: Mon, 18 Jun 2018 16:26:07 -0700 Subject: [PATCH 05/42] changes --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 951a38e2f..120e3bd86 100644 --- a/package.json +++ b/package.json @@ -13,4 +13,4 @@ "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } -} \ No newline at end of file +} From c9ae170bb8d8344a28cc563d4ba3d42c25cf3553 Mon Sep 17 00:00:00 2001 From: Winifred Irarrazaval Date: Mon, 18 Jun 2018 16:42:10 -0700 Subject: [PATCH 06/42] we are getting every title --- src/components/Container.js | 2 +- src/components/Movie.js | 6 ++++- src/components/MovieCollection.js | 38 +++++++++++++++++++++++++++---- 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/src/components/Container.js b/src/components/Container.js index dcccd8f2b..2f7a9df88 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -4,7 +4,7 @@ import axios from 'axios'; import MovieCollection from './MovieCollection' import CustomerCollection from './CustomerCollection' -URL = 'http://localhost:3000/'; + class Container extends Component { constructor() { diff --git a/src/components/Movie.js b/src/components/Movie.js index 023ddd789..cb941f9c4 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -4,9 +4,13 @@ import axios from 'axios'; class Movie extends Component { + + render() { return ( - 'hello im in movie!' +

+ {this.props.title} +

); } } diff --git a/src/components/MovieCollection.js b/src/components/MovieCollection.js index 10320be7c..01d5f78fc 100644 --- a/src/components/MovieCollection.js +++ b/src/components/MovieCollection.js @@ -1,19 +1,49 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from "axios"; +import Movie from "./Movie" - +URL = 'http://localhost:3000/'; class MovieCollection extends Component { // static propTypes = { // movies:PropTypes.array.isRequired, // } + + constructor(){ + super(); + this.state= { + movies: [] + } + } + + componentDidMount(){ + + axios.get(`${URL}/movies`) + .then((response) => { + console.log(response.data); + + const all_movies = response.data; + + this.setState({ + movies: all_movies + }) + }) + .catch((error)=> { + console.log(error); + }) + } render() { - console.log(this.props); + const each_movie = this.state.movies.map((movie, index)=>{ + console.log(movie.title); + return + }) return ( -

{this.props.movies} -

+
+ {each_movie} +
); } } From 25a130ff3b1c6491d6a6b50749773de5179bdaf6 Mon Sep 17 00:00:00 2001 From: Winifred Irarrazaval Date: Mon, 18 Jun 2018 16:47:54 -0700 Subject: [PATCH 07/42] we can reach all the info --- src/components/Customer.js | 4 ++- src/components/CustomerCollection.js | 41 ++++++++++++++++++++++++++-- src/components/MovieCollection.js | 2 +- 3 files changed, 42 insertions(+), 5 deletions(-) diff --git a/src/components/Customer.js b/src/components/Customer.js index 9a0497431..1e8480393 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -7,7 +7,9 @@ import axios from 'axios'; class Customer extends Component { render() { return ( - 'Im a customer' +

+ {this.props.name} +

); } } diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js index a287526cc..1c9edcf43 100644 --- a/src/components/CustomerCollection.js +++ b/src/components/CustomerCollection.js @@ -1,16 +1,51 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from "axios"; +import Customer from "./Customer" - +const URL = 'http://localhost:3000/'; class CustomerCollection extends Component { + // static propTypes = { + // customers:PropTypes.array.isRequired, + // } + + constructor(){ + super(); + this.state= { + customers: [] + } + } + + componentDidMount(){ + + axios.get(`${URL}/customers`) + .then((response) => { + console.log(response.data); + + const all_customers = response.data; + + this.setState({ + customers: all_customers + }) + }) + .catch((error)=> { + console.log(error); + }) + } render() { + const each_customer = this.state.customers.map((customer, index)=>{ + console.log(customer.name); + return + }) + return ( - 'we are the customer collection' +
+ {each_customer} +
); } } - export default CustomerCollection; diff --git a/src/components/MovieCollection.js b/src/components/MovieCollection.js index 01d5f78fc..aa4fb7eb5 100644 --- a/src/components/MovieCollection.js +++ b/src/components/MovieCollection.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import axios from "axios"; import Movie from "./Movie" -URL = 'http://localhost:3000/'; +const URL = 'http://localhost:3000/'; class MovieCollection extends Component { From 0b905ac419d23b11d7f04114168f485276851833 Mon Sep 17 00:00:00 2001 From: Winifred Irarrazaval Date: Tue, 19 Jun 2018 09:57:57 -0700 Subject: [PATCH 08/42] ve have our data working in the react part --- src/components/Container.js | 47 +++------------------------- src/components/Customer.js | 8 +++-- src/components/CustomerCollection.js | 3 ++ src/components/Movie.js | 9 ++++-- src/components/MovieCollection.js | 3 ++ 5 files changed, 21 insertions(+), 49 deletions(-) diff --git a/src/components/Container.js b/src/components/Container.js index 2f7a9df88..5040449e2 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,60 +1,21 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; + import MovieCollection from './MovieCollection' import CustomerCollection from './CustomerCollection' class Container extends Component { -constructor() { - super(); - this.state = { - movies: [] - } -} - -componentDidMount() { -// getMovies() { - axios.get(`${URL}/movies`) - .then((response) => { - console.log(response.data); -const all_movies = response.data.map((movie)=>{ - return movie -}); - this.setState({ - movies: all_movies - }) - }) - .catch((error)=> { - console.log(error); - }) -} - -getCustomers() { - axios.get(`${URL}/customers`) - .then((response) => { - console.log(response.data); - return ( - response.data - ) - }) - .catch((error)=> { - console.log(error); - }) -} render() { - // const movies = this.getMovies(); - // const customers = this.getCustomers(); + return (

here?

- - - - + +
); diff --git a/src/components/Customer.js b/src/components/Customer.js index 1e8480393..4027d8444 100644 --- a/src/components/Customer.js +++ b/src/components/Customer.js @@ -1,15 +1,17 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; class Customer extends Component { + static propTypes = { + name: PropTypes.string.isRequired + } render() { return ( -

+

  • {this.props.name} -

    +
    • ); } } diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js index 1c9edcf43..cf3815e2e 100644 --- a/src/components/CustomerCollection.js +++ b/src/components/CustomerCollection.js @@ -42,7 +42,10 @@ class CustomerCollection extends Component { return (
    +

    CUSTOMERS

    +
      {each_customer} +
    ); } diff --git a/src/components/Movie.js b/src/components/Movie.js index cb941f9c4..10f07ae26 100644 --- a/src/components/Movie.js +++ b/src/components/Movie.js @@ -1,16 +1,19 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import axios from 'axios'; + class Movie extends Component { + static propTypes = { + title: PropTypes.string.isRequired + } render() { return ( -

    +

  • {this.props.title} -

    +
    • ); } } diff --git a/src/components/MovieCollection.js b/src/components/MovieCollection.js index aa4fb7eb5..249bc90b3 100644 --- a/src/components/MovieCollection.js +++ b/src/components/MovieCollection.js @@ -42,7 +42,10 @@ class MovieCollection extends Component { return (
    +

    MOVIES

    +
      {each_movie} +
    ); } From d0ae03f301095f9b760b040759f8c0edb5bf80d9 Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Tue, 19 Jun 2018 10:05:32 -0700 Subject: [PATCH 09/42] added the browser router to have the links to library and customers. --- package-lock.json | 72 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/components/Container.js | 26 ++++++++++---- 3 files changed, 92 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bdc7a2f0..cdd05bc6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4666,6 +4666,28 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, + "history": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", + "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", + "requires": { + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "resolve-pathname": "2.2.0", + "value-equal": "0.4.0", + "warning": "3.0.0" + }, + "dependencies": { + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.3.1" + } + } + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -4676,6 +4698,11 @@ "minimalistic-crypto-utils": "1.0.1" } }, + "hoist-non-react-statics": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" + }, "home-or-tmp": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz", @@ -8818,6 +8845,33 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-router": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", + "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", + "requires": { + "history": "4.7.2", + "hoist-non-react-statics": "2.5.5", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "path-to-regexp": "1.7.0", + "prop-types": "15.6.1", + "warning": "4.0.1" + } + }, + "react-router-dom": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", + "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", + "requires": { + "history": "4.7.2", + "invariant": "2.2.4", + "loose-envify": "1.3.1", + "prop-types": "15.6.1", + "react-router": "4.3.1", + "warning": "4.0.1" + } + }, "react-scripts": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-1.1.4.tgz", @@ -9240,6 +9294,11 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-1.0.1.tgz", "integrity": "sha1-Jsv+k10a7uq7Kbw/5a6wHpPUQiY=" }, + "resolve-pathname": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" + }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -10573,6 +10632,11 @@ "spdx-expression-parse": "3.0.0" } }, + "value-equal": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -10609,6 +10673,14 @@ "makeerror": "1.0.11" } }, + "warning": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.1.tgz", + "integrity": "sha512-rAVtTNZw+cQPjvGp1ox0XC5Q2IBFyqoqh+QII4J/oguyu83Bax1apbo2eqB8bHRS+fqYUBagys6lqUoVwKSmXQ==", + "requires": { + "loose-envify": "1.3.1" + } + }, "watch": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/watch/-/watch-0.10.0.tgz", diff --git a/package.json b/package.json index b5d697449..d170d92c8 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "axios": "^0.18.0", "react": "^16.4.1", "react-dom": "^16.4.1", + "react-router-dom": "^4.3.1", "react-scripts": "1.1.4" }, "scripts": { diff --git a/src/components/Container.js b/src/components/Container.js index 5040449e2..5eb25fd89 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,23 +1,35 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - import MovieCollection from './MovieCollection' import CustomerCollection from './CustomerCollection' +import { BrowserRouter as Router, Route, Link } from "react-router-dom"; -class Container extends Component { +class Container extends Component { render() { return ( +
    -

    here?

    - - -
    +
      +
    • + Library +
      • +
    • + Customers +
      • +
    + +
    + + + + + +     ); } } From d57a6647e454d827d2daeba2c32070ba2effc718 Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Tue, 19 Jun 2018 10:14:13 -0700 Subject: [PATCH 10/42] Added a search form component and added links to home and search. --- src/components/Container.js | 9 +++++++++ src/components/SearchForm.js | 18 ++++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 src/components/SearchForm.js diff --git a/src/components/Container.js b/src/components/Container.js index 5eb25fd89..5878763b0 100644 --- a/src/components/Container.js +++ b/src/components/Container.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import MovieCollection from './MovieCollection' import CustomerCollection from './CustomerCollection' +import SearchForm from './SearchForm' import { BrowserRouter as Router, Route, Link } from "react-router-dom"; @@ -14,6 +15,12 @@ class Container extends Component {
      +
    • + Home +
      • +
    • + Search +
    • Library
      • @@ -25,6 +32,8 @@ class Container extends Component {
      + + diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js new file mode 100644 index 000000000..e6ec3d46e --- /dev/null +++ b/src/components/SearchForm.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; + + + +class SearchForm extends Component { + // static propTypes = { + // name: PropTypes.string.isRequired + // } + render() { + return ( + 'im in search' + ); + } +} + + +export default SearchForm; From 0a7b1f5f7fa186e4d83f3c02d4004dc2aac84d70 Mon Sep 17 00:00:00 2001 From: Brenda Rios Date: Tue, 19 Jun 2018 10:43:57 -0700 Subject: [PATCH 11/42] added form to search form component. --- src/components/SearchForm.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/SearchForm.js b/src/components/SearchForm.js index e6ec3d46e..6c82896e0 100644 --- a/src/components/SearchForm.js +++ b/src/components/SearchForm.js @@ -9,7 +9,11 @@ class SearchForm extends Component { // } render() { return ( - 'im in search' +
      + +