diff --git a/package-lock.json b/package-lock.json index 0e124b2..0301049 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1879,6 +1879,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "1.7.0", + "is-buffer": "1.1.6" + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", diff --git a/src/App.js b/src/App.js index 768eeda..64568d1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,13 @@ import React from 'react'; +import Quote from './quote/Quote' function App() { - return ( -
Welcome To Momentum
- ); + return ( +
+
Welcome To Momentum
+ +
+ ); } export default App; diff --git a/src/quote/Data.js b/src/quote/Data.jsx similarity index 88% rename from src/quote/Data.js rename to src/quote/Data.jsx index b55d72c..8c08c31 100644 --- a/src/quote/Data.js +++ b/src/quote/Data.jsx @@ -6,10 +6,6 @@ class Data extends Component { }; - constructor(props){ - super(props); - } - render() { return (
diff --git a/src/quote/Quote.js b/src/quote/Quote.jsx similarity index 51% rename from src/quote/Quote.js rename to src/quote/Quote.jsx index 347c167..28f02f9 100644 --- a/src/quote/Quote.js +++ b/src/quote/Quote.jsx @@ -5,19 +5,21 @@ import QuoteList from './QuoteList'; class Quote extends Component { state = { - + searchData: '' }; - constructor(props){ - super(props); - } + getSearchData = (data) =>{ + this.setState({ + searchData: data + }) + }; render() { return (
- - - + + +
); } diff --git a/src/quote/QuoteList.js b/src/quote/QuoteList.js deleted file mode 100644 index 44c5bb0..0000000 --- a/src/quote/QuoteList.js +++ /dev/null @@ -1,30 +0,0 @@ -import React, {Component} from 'react'; -import PropTypes from "prop-types"; -import QuoteListItemClass from "./js/QuoteListItemClass"; -import QuoteListItem from "./QuoteListItem"; - -class QuoteList extends Component { - state = {}; - - constructor(props) { - super(props); - } - - render() { - return ( -
- -
- ); - } -} - -QuoteListItem.propTypes = { - quoteList: PropTypes.arrayOf(PropTypes.instanceOf(QuoteListItemClass)).isRequired -}; - -export default QuoteList; diff --git a/src/quote/QuoteList.jsx b/src/quote/QuoteList.jsx new file mode 100644 index 0000000..c45ed6e --- /dev/null +++ b/src/quote/QuoteList.jsx @@ -0,0 +1,42 @@ +import React, {Component} from 'react'; +import PropTypes from "prop-types"; +import QuoteListItemClass from "./js/QuoteListItemClass"; +import QuoteListItem from "./QuoteListItem"; + +class QuoteList extends Component { + state = {}; + + render() { + return ( +
+ +
+ ); + } +} + +QuoteList.propTypes = { + quoteList: PropTypes.arrayOf(PropTypes.instanceOf(QuoteListItemClass)).isRequired, + searchString: PropTypes.string +}; + +QuoteList.defaultProps = { + quoteList: [ + new QuoteListItemClass('Helen Keller','The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.'), + new QuoteListItemClass('Oscar Wilde','Keep love in your heart. A life without it is like a sunless garden when the flowers are dead.'), + new QuoteListItemClass('Aristotle','It is during our darkest moments that we must focus to see the light.'), + new QuoteListItemClass('Maya Angelou','Try to be a rainbow in someone\'s cloud.'), + new QuoteListItemClass('Joseph Campbell\n','Find a place inside where there\'s joy, and the joy will burn out the pain.'), + new QuoteListItemClass('Audrey Hepburn','Nothing is impossible, the word itself says \'I\'m possible\'!'), + new QuoteListItemClass('Robert Louis Stevenson','Don\'t judge each day by the harvest you reap but by the seeds that you plant.'), + new QuoteListItemClass('Buddha','Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.\n'), + new QuoteListItemClass('Edmund Burke','The only thing necessary for the triumph of evil is for good men to do nothing.'), + new QuoteListItemClass('Lucius Annaeus Seneca','One of the most beautiful qualities of true friendship is to understand and to be understood.'), + ] +}; + +export default QuoteList; diff --git a/src/quote/QuoteListItem.js b/src/quote/QuoteListItem.js deleted file mode 100644 index 420d5bd..0000000 --- a/src/quote/QuoteListItem.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from "prop-types"; -import QuoteListItemClass from './js/QuoteListItemClass' - -class QuoteListItem extends Component { - state = { - - }; - - constructor(props){ - super(props); - } - - render() { - return ( -
  • - {this.props.quote.name} - {this.props.quote.data} -
    • - ); - } -} - -QuoteListItem.propTypes = { - quote: PropTypes.instanceOf(QuoteListItemClass).isRequired -}; - -export default QuoteListItem; diff --git a/src/quote/QuoteListItem.jsx b/src/quote/QuoteListItem.jsx new file mode 100644 index 0000000..eb075f9 --- /dev/null +++ b/src/quote/QuoteListItem.jsx @@ -0,0 +1,36 @@ +import React, {Component} from 'react'; +import PropTypes from "prop-types"; +import QuoteListItemClass from './js/QuoteListItemClass' +import './css/QuoteListItem.css' + +class QuoteListItem extends Component { + state = {}; + + setHighlight = () => { + const idx = this.props.quote.data.indexOf(this.props.searchString); + if (idx !== -1 ) { + return (<> + {this.props.quote.data.slice(0, idx)} + {this.props.quote.data.slice(idx, idx + this.props.searchString.length)} + {this.props.quote.data.slice(idx + this.props.searchString.length, this.props.quote.data.length)} + ); + } else { + return {this.props.quote.data}; + } + }; + + render() { + return ( +
  • + {this.props.quote.name} - {this.setHighlight()} +
    • + ); + } +} + +QuoteListItem.propTypes = { + quote: PropTypes.instanceOf(QuoteListItemClass).isRequired, + searchString: PropTypes.string +}; + +export default QuoteListItem; diff --git a/src/quote/Search.js b/src/quote/Search.js deleted file mode 100644 index c02ec16..0000000 --- a/src/quote/Search.js +++ /dev/null @@ -1,20 +0,0 @@ -import React, { Component } from 'react'; - -class Search extends Component { - state = { - - }; - - constructor(props){ - super(props); - } - - render() { - return ( - - - ); - } -} - -export default Search; diff --git a/src/quote/Search.jsx b/src/quote/Search.jsx new file mode 100644 index 0000000..d4c520e --- /dev/null +++ b/src/quote/Search.jsx @@ -0,0 +1,29 @@ +import React, {Component} from 'react'; + +class Search extends Component { + state = { + data: '' + }; + + handleChange = (e) => { + this.props.getSearchData(e.target.value); + this.setState({ + data: e.target.value, + }) + }; + + onClick = () => { + + }; + + render() { + return ( +
    + + +
    + ); + } +} + +export default Search; diff --git a/src/quote/css/QuoteListItem.css b/src/quote/css/QuoteListItem.css new file mode 100644 index 0000000..45bdf4b --- /dev/null +++ b/src/quote/css/QuoteListItem.css @@ -0,0 +1,3 @@ +b{ + background-color: skyblue; +} \ No newline at end of file