gregdanko92 · jekkiboi · Sep 8, 2021 · Sep 8, 2021 · Sep 8, 2021
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "react-multi-carousel": "^2.6.5",
     "react-router-dom": "^5.2.1",
     "react-scripts": "4.0.3",
+    "react-slick": "^0.28.1",
     "reactstrap": "^8.10.0",
     "rowdy-logger": "^1.0.2",
     "web-vitals": "^1.1.2"

diff --git a/public/index.html b/public/index.html
@@ -1,15 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -24,7 +26,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Wayfarer App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -6,17 +6,9 @@
       "src": "favicon.ico",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
     }
+
+
   ],
   "start_url": ".",
   "display": "standalone",

diff --git a/src/App.css b/src/App.css
@@ -67,5 +67,13 @@ border: 1px solid black;
   height: 100vh;
 }
 /* .city-show-page{
+} */
 
-} */
+
+
+/* Styling the Index Carousel */
+/* .carousel-pics{
+} */
+.cityindeximage{
+  width:100px;
+}
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 function Header(){
     return(
         <div className='header'>
-           <span class='inlineheader'> 
+           <span className='inlineheader'> 
                 <img className='logobanner' src={process.env.PUBLIC_URL + '/images/banner.png'} alt="" />
                 <span className='headerlinks'>
                     <ul className='something'>

diff --git 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(
-        <Link key={idx} to={`/cities/${cityObj._id}`}>
-            <h3>{cityObj.city}</h3>
-          {/* <CityShowPage cityObj={cityObj}/> */}
-        </Link>
-      )
-    })
-    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,19 +56,26 @@ class CitiesIndexPage extends Component {
     console.log(this.state)
     return (
       <div>
-        <h1>All Cities</h1>
-
-        <div>{this.renderCities()}</div>
         <h2>Add a City</h2>
         <form onSubmit={this.handleFormSubmit}>
           <input 
           type='text'
           value={this.state.inputVal}
           onChange={this.handleChange}
           />
+          <h2>Add a Pic</h2>
+          <input 
+          type='text'
+          value={this.state.inputImage}
+          onChange={this.handleImageChange}
+          />
           <input type='submit' />
         </form>
-        <IndexCarousel  />
+        <div className='carousel-container'>
+        <IndexCarousel  
+        cityData={this.state.cityData}
+        />
+        </div>
       </div>
     );
   }