finished cleaning client folder javascript

client/src/components/LoginForm.js

@@ -12,7 +12,6 @@ const LoginForm = ({
     successMessage,
     user
 }) => (
-    // Feel free to change anything outside of the form tags. You can also change any of the classNames in accordance with style
     <Card className='container login-page'>
         <form action='/' onSubmit={onSubmit}>
         <div className="field-container">

client/src/components/SearchBar/SearchBar.js

@@ -26,6 +26,7 @@ class SearchBar extends React.Component {
         this.handleFormSubmit = this.handleFormSubmit.bind(this);
     }
 
+    // Load all terms from database to feed to autocomplete functionality
     componentDidMount() {
         axios.get('/term/all')
             .then(res => { 
@@ -40,7 +41,7 @@ class SearchBar extends React.Component {
 
         }
 
-
+    // Handles user input in search bar
     handleChange = inputValue => {
 
         const input = inputValue
@@ -49,23 +50,16 @@ class SearchBar extends React.Component {
         });
     };
 
+    // Handles user submission in the search bar
     handleFormSubmit = event => {
         event.preventDefault();
         axios.get(`/search/${this.state.search}`)
             .then(res => {
-
-                if (res.data.length > 1) {
-
-                    this.setState({ 
-                        results: res.data,
-                        resultsNum: res.data.length
-                    })
-                } else if (res.data.length === 1) {
+                if (res.data.length === 1) {
 
                     window.location.replace(`/search/${res.data[0].word}`)
                     // Redirect to the page with res.data.word
-                } else {
-
+                } else { 
                     this.setState({ 
                         results: res.data,
                         resultsNum: res.data.length
@@ -96,16 +90,6 @@ class SearchBar extends React.Component {
                     <button type="submit" className="search-btn" ></button>
                 </form>
             </div>
-            {this.state.resultsNum > 1 &&
-            (<div>
-                {this.state.results.map(result => {
-                    return (
-                        <div key={result._id}>
-                            <h5><Link to={`/term/${result.word}`}>{result.word}</Link></h5>
-                        </div>
-                    )
-                })}
-            </div>)}
             {this.state.resultsNum === 0 && (
                 Auth.isUserAuthenticated() ? (
                     <div className="no-search-results">Would you like to add <Link to='/addterm' className="results-link">{this.state.search}</Link> to our library?</div>

client/src/components/WordOfTheDay/WordOfTheDay.js

@@ -10,9 +10,12 @@ class WordOfTheDay extends Component {
     this.state = {
         word: {}
     }
+
+    this.selectRandomWord = this.selectRandomWord.bind(this)
 }
 
-    componentDidMount() {
+    // Loads all terms from database, selects a random term from that response and sets the state with chosen term
+    selectRandomWord () {
         axios.get('/term/all')
             .then(res => {
                 const number = Math.floor(Math.random() * res.data.length)
@@ -21,10 +24,10 @@ class WordOfTheDay extends Component {
             })
             .catch(err => console.log(err));
     }
-
-    // function refreshPage(){ 
-    //     window.location.reload(); 
-    // }
+    
+    componentDidMount() {
+        this.selectRandomWord();
+    }
 
 
     render() {
@@ -35,7 +38,7 @@ class WordOfTheDay extends Component {
                 <h1 className="word">{this.state.word.word}</h1>
                 <p className="definition">{this.state.word.summary}</p>
                 <button><Link to={`/search/${this.state.word.word}`} className="word-link">Learn More</Link></button>
-                <button type="button" onClick={() => window.location.reload()}>Next Term</button>
+                <button type="button" onClick={this.selectRandomWord}>Next Term</button>
             </div>
         )
     }