Merge pull request #22 from caij-consulting/styling

pre-filter functionality

src/App.js

@@ -19,6 +19,7 @@ class App extends Component {
       location: "",
       displayResult: false,
       textFilter: "",
+      categoryDropdown: "",
       // eventsJSX: "",
       // eventName: "",
       // eventStartTime: "",
@@ -76,6 +77,7 @@ class App extends Component {
             location={this.state.location}
             handleChange={this.handleChange}
             textFilter={this.state.textFilter}
+            categoryDropdown={this.state.categoryDropdown}
           />
         }
         <EmailForm />

src/components/DisplayResults.js

@@ -9,6 +9,8 @@ class DisplayResults extends Component {
             allEvents: [],
             filteredEvents: [],
             isLoading: true,
+            eventCategories: [],
+            userCategory: "",
         }
     }
     // converting time function to string so it can be passed as a number in template literals 
@@ -44,14 +46,21 @@ class DisplayResults extends Component {
             // console.log(response);
             response = response.data._embedded.events;
             console.log(response)
+            // console.log(allEvents)
             this.setState({
+                // allEvents is the good return we never modify
                 allEvents: response,
+                // filteredEvents is it item we want to modify based on user input
                 filteredEvents: response,
                 isLoading: false,
+
             })
+            this.getEventCategories();
+
         })
     }
-    filterEventName = (name) => {
+    filterEventName = (e, name) => {
+        e.preventDefault();
         if(!name){
             this.setState({
                 filteredEvents: [...this.state.allEvents],
@@ -64,8 +73,59 @@ class DisplayResults extends Component {
         this.setState({
             filteredEvents: [...filteredEvents],
         })
-
     }
+
+    getEventCategories = () => {
+        // loop through all events 
+        let eventCategories = ["All Events"];
+        for (let i = 0; i < this.state.allEvents.length; i ++) {
+            let eventCategory = this.state.allEvents[i].classifications[0].segment.name;
+            console.log(eventCategory);
+            if (!eventCategories.includes(eventCategory)) {
+                eventCategories.push(eventCategory)
+            }
+        }
+        console.log(eventCategories);
+        this.setState({
+            // ... copies the items to the array
+            eventCategories: [...eventCategories],
+        })
+    }
+
+    // this is a button
+    filterByEventCategories = (e, category) => {
+        e.preventDefault();
+        console.log(category);
+
+
+    }
+
+
+
+    // filterEventName = (name) => {
+    //     if (!name) {
+    //         this.setState({
+    //             filteredEvents: [...this.state.allEvents],
+    //         })
+    //     }
+    //     let copyOfAllEvents = [...this.state.allEvents];
+    //     let filteredEvents = copyOfAllEvents.filter((eventObject) => {
+    //         return eventObject.name.toUpperCase().includes(name.toUpperCase());
+    //     })
+    //     this.setState({
+    //         filteredEvents: [...filteredEvents],
+    //     })
+    // }
+
+
+
+    // once get array, map it to show all categories then can work on filter
+
+    // if user choice === api event category name, show api result for that filter
+
+
+
+
     componentDidMount() {
         let date = this.props.date;
         let timeStart = this.props.timeStart;
@@ -74,22 +134,47 @@ class DisplayResults extends Component {
         let endDateTime = this.formatDate(date, timeEnd);
         let location = this.props.location;
         this.getTicketmasterData(location, startDateTime, endDateTime);
+
     }
+
+
+
     render() {
         return (
             this.state.isLoading ? <h1>Getting Your Events...</h1> :
 
                 <div className="display-events">
                     <div className="display-content">
                         {/* errorhandling here : write a condition if city name is found in API, do below. else "Please enter a valid city name and date/time range*/}
-                        <label htmlFor="textFilter">Enter Text to Filter</label>
-                        <input
-                            type="text"
-                            name="textFilter"
-                            onChange={(event) => { this.props.handleChange(event) }}
-                            required={true}
-                            value={this.props.textFilter} />
-                        <button onClick={() => this.filterEventName(this.props.textFilter)}>Filter</button>
+                        <form action="submit">
+                        {/*wrote submit bc this attribute usually works with backend*/}
+                            <label htmlFor="textFilter">Enter Text to Filter</label>
+                            <input
+                                type="text"
+                                required={true}
+
+                                onChange={(event) => { this.props.handleChange(event) }}
+                                name="textFilter"
+                                value={this.props.textFilter} />
+                            <button onClick={(e) => this.filterEventName(e,this.props.textFilter)}>Filter</button>
+
+                            <label htmlFor="allCategories">Event Categories</label>
+                            <select
+                                onChange={(event) => { this.props.handleChange(event) }}
+                                name="categoryDropdown" 
+                                value={this.props.categoryDropdown}
+                                id="">
+                                {this.state.eventCategories.map((category) => {
+                                    return (
+                                        <option value={category}> {category} </option>
+                                    )
+                                })}
+                            </select>
+                            <button
+                                onClick={(e)=>this.filterByEventCategories(e,this.props.categoryDropdown)}>
+                            filter by category         
+                            </button>            
+                        </form>
                         {
                         this.state.filteredEvents.map((eventObject) => {
                             return (