diff --git a/src/pages/CitiesIndexPage.jsx b/src/pages/CitiesIndexPage.jsx
index ff82a73..a40db43 100644
--- a/src/pages/CitiesIndexPage.jsx
+++ b/src/pages/CitiesIndexPage.jsx
@@ -3,7 +3,6 @@ import CityModel from '../models/CityModel';
import CityShowPage from '../pages/CityShowPage'
import {Link} from 'react-router-dom'
import IndexCarousel from '../partials/IndexCarousel'
-import MultiCarousel from 'react-multi-carousel';
// const axios = require('axios').default;
import axios from 'axios'
@@ -16,7 +15,8 @@ import axios from 'axios'
class CitiesIndexPage extends Component {
state = {
cityData: [],
- inputVal: ''
+ inputVal: '',
+ inputImage:''
}
componentDidMount = () =>{
//make fetch called here, or at least reference the game model which has it
@@ -25,27 +25,20 @@ class CitiesIndexPage extends Component {
this.setState({cityData:data})
})
}
- renderCities(){
- const citiesJSX = this.state.cityData.map((cityObj, idx)=>{
- return(
-
-
{cityObj.city}
- {/* */}
-
- )
- })
- return citiesJSX
- }
handleChange =(event) => {
this.setState({inputVal:event.target.value})
}
+ handleImageChange =(event) => {
+ this.setState({inputImage:event.target.value})
+ }
handleFormSubmit = (event) => {
event.preventDefault()
console.log('form was submitted')
// start out by making the axios api call to ur db in the backend, need to hit the POST route and create a new city, need the underlying route to match what is set up in the express server
axios.post('http://localhost:4000/api/cities', {
//pass in the object of the new city, containing the actual data that is to be added, for now it is only the name of the city
- city: this.state.inputVal
+ city: this.state.inputVal,
+ image: this.state.inputImage
// the .then() returns our response from the server, the response is the data containing the new city
}).then((response)=>{
// because it's buried in some data we have to dig a bit to find it, look in the components tab in the google tools
@@ -63,9 +56,6 @@ class CitiesIndexPage extends Component {
console.log(this.state)
return (
- {/* */}
-
- )
- })
- return citiesJSX
- }
-
- render(){
+class IndexCarousel extends React.Component {
+ state = {redirect: null}
- return(
-
-
- {/* NEXT STEPS: MOVE CITY DATA INTO INDEXCAROUSEL, CREATE A FORM FOR NEW CITY NAME
- AND IMAGE, DYNAMICALLY ADD FORM DATA TO CAROUSEL */}
-
+ {/*