From 00898da7ecf2fb8127416acda863b8ca5e369c48 Mon Sep 17 00:00:00 2001 From: jekkiboi Date: Tue, 7 Sep 2021 17:02:08 -0700 Subject: [PATCH 1/2] delete stuff --- package-lock.json | 75 ++++++++++++++++++++++ package.json | 1 + public/index.html | 2 + public/manifest.json | 12 +--- src/App.css | 10 ++- src/components/Header.jsx | 2 +- src/pages/CitiesIndexPage.jsx | 38 +++++------ src/partials/IndexCarousel.jsx | 111 ++++++++++++++++----------------- 8 files changed, 163 insertions(+), 88 deletions(-) diff --git a/package-lock.json b/package-lock.json index b110d29..1b3a349 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,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" @@ -7508,6 +7509,11 @@ "node": ">=4.3.0 <5.0.0 || >=5.10" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=" + }, "node_modules/enquirer": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", @@ -13253,6 +13259,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -17123,6 +17137,22 @@ } } }, + "node_modules/react-slick": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.28.1.tgz", + "integrity": "sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -17608,6 +17638,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", @@ -19014,6 +19049,11 @@ "safe-buffer": "~5.1.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -27750,6 +27790,11 @@ } } }, + "enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ=" + }, "enquirer": { "version": "2.3.6", "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz", @@ -32015,6 +32060,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=" }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=", + "requires": { + "string-convert": "^0.2.0" + } + }, "json3": { "version": "3.3.3", "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz", @@ -35103,6 +35156,18 @@ "workbox-webpack-plugin": "5.1.4" } }, + "react-slick": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.28.1.tgz", + "integrity": "sha512-JwRQXoWGJRbUTE7eZI1rGIHaXX/4YuwX6gn7ulfvUZ4vFDVQAA25HcsHSYaUiRCduTr6rskyIuyPMpuG6bbluw==", + "requires": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + } + }, "react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -35475,6 +35540,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz", @@ -36642,6 +36712,11 @@ "safe-buffer": "~5.1.0" } }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=" + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index a796d52..da60562 100644 --- 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 index aa069f2..db6668f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,8 @@ + + diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..773e443 100644 --- 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 index 832756a..19aeaae 100644 --- a/src/App.css +++ b/src/App.css @@ -67,5 +67,13 @@ border: 1px solid black; height: 100vh; } /* .city-show-page{ +} */ -} */ \ No newline at end of file + + +/* Styling the Index Carousel */ +/* .carousel-pics{ +} */ +.cityindeximage{ + width:100px; +} \ No newline at end of file diff --git a/src/components/Header.jsx b/src/components/Header.jsx index d6ee6a2..f2dc4d9 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -3,7 +3,7 @@ import React from 'react'; function Header(){ return(
- +
    diff --git a/src/pages/CitiesIndexPage.jsx b/src/pages/CitiesIndexPage.jsx index ff82a73..e4a3135 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,22 @@ 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 +58,6 @@ class CitiesIndexPage extends Component { console.log(this.state) return (
    -

    All Cities

    - -
    {this.renderCities()}

    Add a City

    +

    Add a Pic

    +
    - +
    + +
    ); } diff --git a/src/partials/IndexCarousel.jsx b/src/partials/IndexCarousel.jsx index 932075d..fd8a5fe 100644 --- a/src/partials/IndexCarousel.jsx +++ b/src/partials/IndexCarousel.jsx @@ -1,66 +1,61 @@ -import Carousel from 'react-multi-carousel'; +import Slider from 'react-slick'; import React from 'react' -import 'react-multi-carousel/lib/styles.css' +// import "~slick-carousel/slick/slick.css"; +// import "~slick-carousel/slick/slick-theme.css"; +import { Link, Redirect } from 'react-router-dom' +import axios from 'axios'; -const responsive= { - desktop: { - breakpoint: { max: 3000, min: 1024 }, - items: 3, - slidesToSlide: 3 // optional, default to 1. - }, - tablet: { - breakpoint: { max: 1024, min: 464 }, - items: 2, - slidesToSlide: 2 // optional, default to 1. - }, - mobile: { - breakpoint: { max: 464, min: 0 }, - items: 1, - slidesToSlide: 1 // optional, default to 1. - } - }; - class IndexCarousel extends React.Component { - renderCities(){ - const citiesJSX = this.state.cityData.map((cityObj, idx)=>{ - return( - -

    {cityObj.city}

    - {/* */} - - ) - }) - return citiesJSX - } - - render(){ - return( +class IndexCarousel extends React.Component { + state = {redirect:false} - - {/* NEXT STEPS: MOVE CITY DATA INTO INDEXCAROUSEL, CREATE A FORM FOR NEW CITY NAME - AND IMAGE, DYNAMICALLY ADD FORM DATA TO CAROUSEL */} -
    Item 1
    -
    Item 2
    -
    Item 3
    -
    Item 4
    -     - ) - } + handleDelete = (id) => { + axios.delete(`http://localhost:4000/api/cities/${id}`) + .then(() => { + this.setState({redirect:true}) + }) } + carouselItems = () => { + const citiesJSX = this.props.cityData.map((cityObj, idx) => { + return ( +
    + +

    {cityObj.city}

    + + {/* */} + + +
    + ) + }) + return citiesJSX + } + + render() { + if (this.state.redirect===true){ + return + } + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 3, + slidesToScroll: 2, + + }; + return ( +
    +

    Single Item

    + + {this.carouselItems()} + +
    + ); + } +} + export default IndexCarousel \ No newline at end of file From a0593b8522a8b62e58737a087247eef146e2a10e Mon Sep 17 00:00:00 2001 From: jekkiboi Date: Tue, 7 Sep 2021 20:10:43 -0700 Subject: [PATCH 2/2] changes --- public/index.html | 6 +++--- src/pages/CitiesIndexPage.jsx | 2 -- src/partials/IndexCarousel.jsx | 28 +++++++++++++++++----------- 3 files changed, 20 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index db6668f..8378d4c 100644 --- a/public/index.html +++ b/public/index.html @@ -4,14 +4,14 @@ - + - + - React App + Wayfarer App diff --git a/src/pages/CitiesIndexPage.jsx b/src/pages/CitiesIndexPage.jsx index e4a3135..a40db43 100644 --- a/src/pages/CitiesIndexPage.jsx +++ b/src/pages/CitiesIndexPage.jsx @@ -25,11 +25,9 @@ class CitiesIndexPage extends Component { this.setState({cityData:data}) }) } - handleChange =(event) => { this.setState({inputVal:event.target.value}) } - handleImageChange =(event) => { this.setState({inputImage:event.target.value}) } diff --git a/src/partials/IndexCarousel.jsx b/src/partials/IndexCarousel.jsx index fd8a5fe..12e71ab 100644 --- a/src/partials/IndexCarousel.jsx +++ b/src/partials/IndexCarousel.jsx @@ -5,15 +5,13 @@ import React from 'react' import { Link, Redirect } from 'react-router-dom' import axios from 'axios'; - - class IndexCarousel extends React.Component { - state = {redirect:false} + state = {redirect: null} handleDelete = (id) => { axios.delete(`http://localhost:4000/api/cities/${id}`) .then(() => { - this.setState({redirect:true}) + this.setState({redirect:'/cities'}) }) } carouselItems = () => { @@ -33,28 +31,36 @@ class IndexCarousel extends React.Component { }) return citiesJSX } - render() { - if (this.state.redirect===true){ - return + // if (this.state.redirect===true){ + // return + // } + if (this.state.redirect){ + return } const settings = { dots: true, infinite: true, speed: 500, - slidesToShow: 3, - slidesToScroll: 2, - + slidesToShow: 1, + slidesToScroll: 1, }; + if (this.props.cityData.length < 3){ + settings.slidesToShow= this.props.cityData.length + } else if (this.props.cityData.length >= 3){ + settings.slidesToShow= 3 + } return (
    -

    Single Item

    +

    Single Item

    {this.carouselItems()}
    ); + } + }