upgraded react and react-dom

2020-08-03 12:33:21 -04:00
parent 661e885905
commit d1262fd023
4 changed files with 114 additions and 148 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -2859,11 +2859,6 @@
        }
      }
    },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
-    },
    "clean-css": {
      "version": "4.2.1",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz",
@@ -5063,6 +5058,14 @@
        }
      }
    },
+    "dom7": {
+      "version": "3.0.0-alpha.7",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-3.0.0-alpha.7.tgz",
+      "integrity": "sha512-3epkQPsKsbk2Dixqqgm2DT/KzhiAPByjDK7emu6owwFLbM5UoiqWKgdsH+6PpMEgoeR6Ex/bW1UbOe0FWZU0zg==",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
    "domain-browser": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
@@ -5274,11 +5277,6 @@
        }
      }
    },
-    "enquire.js": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
-      "integrity": "sha1-PoeAybi4NQhMP2DhZtvDwqPImBQ="
-    },
    "entities": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
@@ -9610,14 +9608,6 @@
      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
      "dev": true
    },
-    "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",
@@ -9821,11 +9811,6 @@
      "integrity": "sha1-+6HEUkwZ7ppfgTa0YJ8BfPTe1pI=",
      "dev": true
    },
-    "lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
-    },
    "lodash.escape": {
      "version": "3.2.0",
      "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-3.2.0.tgz",
@@ -12281,25 +12266,24 @@
      "dev": true
    },
    "react": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz",
-      "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.11.0"
+        "prop-types": "^15.6.2"
      }
    },
    "react-dom": {
-      "version": "16.6.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.1.tgz",
-      "integrity": "sha512-zm+wBuEMGm009Wt1uE4Zw5KcXOW7qC4E/xW/fpJsCsbOco4U/R84u+DzzO/S4SYSdNBcqcaulcp4w3FXl8pImw==",
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
+      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1",
        "prop-types": "^15.6.2",
-        "scheduler": "^0.11.0"
+        "scheduler": "^0.19.1"
      }
    },
    "react-is": {
@@ -12388,18 +12372,6 @@
        "warning": "^4.0.1"
      }
    },
-    "react-slick": {
-      "version": "0.27.1",
-      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.27.1.tgz",
-      "integrity": "sha512-dlT8QW37XahezqcnJ/qquktzNvd9R16bBXoN7CsTab1EzUL1QqieYqYkn+A/eBetxeRUy2Z9kW+XnljZboju0w==",
-      "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"
-      }
-    },
    "read-all-stream": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
@@ -12798,11 +12770,6 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
-    "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.8.1",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.8.1.tgz",
@@ -13209,9 +13176,9 @@
      "dev": true
    },
    "scheduler": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz",
-      "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
      "requires": {
        "loose-envify": "^1.1.0",
        "object-assign": "^4.1.1"
@@ -14030,6 +13997,11 @@
        "tweetnacl": "~0.14.0"
      }
    },
+    "ssr-window": {
+      "version": "3.0.0-alpha.4",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-3.0.0-alpha.4.tgz",
+      "integrity": "sha512-+dBRP/pZ+VyITxTzD0lMDzDwN/BmfUl8xi2e6t5Nz4+FqUphfcBLB1OOUSYCRNFB25rD3c8AJRYpY5rHTbL+kg=="
+    },
    "ssri": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.3.0.tgz",
@@ -14142,11 +14114,6 @@
      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
      "dev": true
    },
-    "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-width": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
@@ -14793,6 +14760,15 @@
        }
      }
    },
+    "swiper": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-6.1.1.tgz",
+      "integrity": "sha512-w6rmEUnpuSWvzuIDJ+nTi7YQ4+pvr++zUnBO2VxkzOZbzQzcMNKNw1yj0RFEok682IHDPCs3LXSl8zSQ+zDEdw==",
+      "requires": {
+        "dom7": "^3.0.0-alpha.7",
+        "ssr-window": "^3.0.0-alpha.4"
+      }
+    },
    "symbol-observable": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -19,14 +19,14 @@
    "axios": "^0.18.1",
    "lodash": "^4.17.19",
    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
    "react-redux": "^6.0.1",
    "react-router-dom": "^4.3.1",
-    "react-slick": "^0.27.1",
    "redux": "^4.0.1",
    "redux-promise": "^0.6.0",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "swiper": "^6.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
--- a/src/containers/DisplayMovieRow.js
+++ b/src/containers/DisplayMovieRow.js
@@ -1,9 +1,17 @@
 import React, { Component } from 'react';
-import Slider from "react-slick";
-
+import { Swiper, SwiperSlide } from 'swiper/react';
+// Import Swiper styles
+import 'swiper/swiper.scss';
+import 'swiper/components/navigation/navigation.scss';
+import 'swiper/components/pagination/pagination.scss';
+import 'swiper/components/scrollbar/scrollbar.scss';
+import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

 import MovieGenre from '../components/MovieGenre';

+// install Swiper components
+SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
+
 const getMovieRows = (movies, url, selectMovieHandler) => {
  const movieRow = movies.map((movie) => {
    let movieImageUrl =
@@ -46,62 +54,6 @@ export default class DisplayMovieRow extends Component {

  render() {
    console.log('DisplayMovie.render()', this.props.movies);
-    const settings = {
-      dots: true,
-      infinite: true,
-      speed: 1000,
-      draggable: false,
-      slidesToShow: 6,
-      slidesToScroll: 6,
-      initialSlide: 0,
-      responsive: [
-        {
-          breakpoint: 1824,
-          settings: {
-            slidesToShow: 6,
-            slidesToScroll: 6,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 1300,
-          settings: {
-            slidesToShow: 5,
-            slidesToScroll: 5,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 1100,
-          settings: {
-            slidesToShow: 4,
-            slidesToScroll: 4,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 798,
-          settings: {
-            slidesToShow: 3,
-            slidesToScroll: 3,
-            infinite: true,
-            dots: true
-          }
-        },
-        {
-          breakpoint: 500,
-          settings: {
-            slidesToShow: 2,
-            slidesToScroll: 2,
-            infinite: true,
-            dots: true
-          }
-        }
-      ]
-    };
    let netflixUrl = false;
    if (
      this.props.url ===
@@ -113,12 +65,28 @@ export default class DisplayMovieRow extends Component {
    return (
      <>
        <h1 className="movieShowcase__heading">{this.props.title}</h1>
-        <Slider
-          // className="movieShowcase__container"
-          {...settings}
+        <Swiper
+          spaceBetween={50}
+          slidesPerView={3}
+          navigation
+          pagination={{ clickable: true }}
+          scrollbar={{ draggable: true }}
+          onSwiper={(swiper) => console.log(swiper)}
+          onSlideChange={() => console.log('slide change')}
        >
+          <SwiperSlide>Slide 1</SwiperSlide>
+          <SwiperSlide>Slide 2</SwiperSlide>
+          <SwiperSlide>Slide 3</SwiperSlide>
+          <SwiperSlide>Slide 4</SwiperSlide>
+        </Swiper>
+      </>
+    );
+  }
+}

-          {this.props.movies.map((movie, idx) => {
+{/* <div className="movieShowcase__container">
+  {
+    this.props.movies.map((movie) => {
      let movieImageUrl =
        'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
      if (
@@ -129,18 +97,10 @@ export default class DisplayMovieRow extends Component {
          'https://image.tmdb.org/t/p/original/' + movie.poster_path;
      }
      return (
-              <div
-                className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
-              >
-                <img
-                  className="movieShowcase__container--movie-image"
-                  src={movieImageUrl}
-                />
+        <div className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
+          <img src={movieImageUrl} className="movieShowcase__container--movie-image" />
        </div>
-            );
-          })}
-        </Slider>
-      </>
-    );
-  }
+      )
+    })
  }
+</div> */}
--- a/src/static/sass/components/_movieShowcase.scss
+++ b/src/static/sass/components/_movieShowcase.scss
@@ -15,11 +15,11 @@
      overflow-y: hidden;
      transition: transform 450ms;
      overflow: -moz-hidden-unscrollable;
-      overflow-x: scroll;
+      // overflow-x: scroll;
      display: flex;
      width: 95vw;
-      overflow: -moz-scrollbars-horizontal;
-      grid-template-columns: repeat(20, 1fr);
+      // overflow: -moz-scrollbars-horizontal;
+      // grid-template-columns: repeat(20, 1fr);
      column-gap: 0;

      @include responsive(phone) {
@@ -86,6 +86,7 @@
         padding-bottom: 4rem;
         height: 21.5rem;
         min-height: 0;
+         object-fit: contain;

         @include responsive(tab_port) {
            height: 18.5rem;
@@ -101,6 +102,7 @@

         &-image {
            height: 100%;
+            // object-fit: contain;
         }

         &__netflix {
@@ -124,3 +126,31 @@
      }
   }
 }
+
+// Slick carousel override styles
+.slick-track {
+   transition: transform 450ms;
+
+   &:hover>div.movieShowcase__container--movie-image {
+      opacity: .3;
+
+      &:hover {
+         transform: scale(1.5);
+         opacity: 1;
+      }
+   }
+}
+
+.slick-slider {
+   margin-right: 4rem;
+   // right: -5px !important;
+}
+
+.slick-prev {
+   left: 0 !important;
+   z-index: 10000;
+}
+
+.slick-next {
+   right: 0 !important;
+}