psmattas/Netflix-Clone
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #19 from AndresXI/carousel-component

Browse Source 
Carousel component
This commit is contained in:
Andres Alcocer
2020-08-05 14:36:49 -04:00
committed by GitHub
parent caee6b8726 38423bddf3
commit 057d454087
26 changed files with 470 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
package-lock.json generated
View File

@@ -1617,7 +1617,7 @@
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true,
"requires": {
@@ -1656,22 +1656,6 @@
"integrity": "sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==",
"dev": true
},
"async": {
<<<<<<< HEAD
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
"dev": true,
"requires": {
"lodash": "^4.17.14"
}
=======
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
"dev": true
>>>>>>> refs/remotes/origin/master
},
"async-each": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
@@ -1767,7 +1751,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -1786,7 +1770,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -2126,7 +2110,7 @@
},
"p-cancelable": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
"resolved": "http://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
"integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
"dev": true
},
@@ -2504,13 +2488,13 @@
"dependencies": {
"file-type": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"resolved": "http://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
"dev": true
},
"uuid": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
"resolved": "http://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
"integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
"dev": true
}
@@ -2542,7 +2526,7 @@
},
"cacache": {
"version": "10.0.4",
"resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
"resolved": "http://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
"integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
"dev": true,
"requires": {
@@ -3491,7 +3475,7 @@
},
"css-select": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
"resolved": "http://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
"integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
"dev": true,
"requires": {
@@ -3520,7 +3504,7 @@
"dependencies": {
"jsesc": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
"dev": true
},
@@ -3537,7 +3521,7 @@
},
"regjsgen": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
"resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
"integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc=",
"dev": true
},
@@ -4022,7 +4006,7 @@
},
"bin-build": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/bin-build/-/bin-build-2.2.0.tgz",
"resolved": "http://registry.npmjs.org/bin-build/-/bin-build-2.2.0.tgz",
"integrity": "sha1-EfjdYfcP/Por3KpbRvXo/t1CIcw=",
"dev": true,
"requires": {
@@ -4046,7 +4030,7 @@
},
"bin-version": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/bin-version/-/bin-version-1.0.4.tgz",
"resolved": "http://registry.npmjs.org/bin-version/-/bin-version-1.0.4.tgz",
"integrity": "sha1-nrSY7m/Xb3q5p8FgQ2+JV5Q1144=",
"dev": true,
"requires": {
@@ -4055,7 +4039,7 @@
},
"bin-version-check": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-2.1.0.tgz",
"resolved": "http://registry.npmjs.org/bin-version-check/-/bin-version-check-2.1.0.tgz",
"integrity": "sha1-5OXfKQuQaffRETJAMe/BP90RpbA=",
"dev": true,
"requires": {
@@ -4067,7 +4051,7 @@
},
"bin-wrapper": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-3.0.2.tgz",
"resolved": "http://registry.npmjs.org/bin-wrapper/-/bin-wrapper-3.0.2.tgz",
"integrity": "sha1-Z9MwYmLksaXy+I7iNGT2plVneus=",
"dev": true,
"requires": {
@@ -4101,7 +4085,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -4341,7 +4325,7 @@
},
"file-type": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"resolved": "http://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
"dev": true
},
@@ -4364,7 +4348,7 @@
},
"find-versions": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/find-versions/-/find-versions-1.2.1.tgz",
"resolved": "http://registry.npmjs.org/find-versions/-/find-versions-1.2.1.tgz",
"integrity": "sha1-y96fEuOFdaCvG+G5osXV/Y8Ya2I=",
"dev": true,
"requires": {
@@ -4385,7 +4369,7 @@
},
"got": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/got/-/got-5.7.1.tgz",
"resolved": "http://registry.npmjs.org/got/-/got-5.7.1.tgz",
"integrity": "sha1-X4FjWmHkplifGAVp6k44FoClHzU=",
"dev": true,
"requires": {
@@ -4494,7 +4478,7 @@
},
"semver": {
"version": "4.3.6",
"resolved": "https://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"resolved": "http://registry.npmjs.org/semver/-/semver-4.3.6.tgz",
"integrity": "sha1-MAvG4OhjdPe6YQaLWx7NV/xlMto=",
"dev": true
},
@@ -4512,7 +4496,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -4521,7 +4505,7 @@
},
"strip-dirs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-1.1.1.tgz",
"resolved": "http://registry.npmjs.org/strip-dirs/-/strip-dirs-1.1.1.tgz",
"integrity": "sha1-lgu9EoeETzl1pFWKoQOoJV4kVqA=",
"dev": true,
"requires": {
@@ -4551,7 +4535,7 @@
},
"through2": {
"version": "0.6.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
"dev": true,
"requires": {
@@ -4573,7 +4557,7 @@
},
"uuid": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
"resolved": "http://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
"integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
"dev": true
},
@@ -4655,7 +4639,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -4743,13 +4727,13 @@
"dependencies": {
"file-type": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"resolved": "http://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
"dev": true
},
"get-stream": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
"resolved": "http://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
"integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
"dev": true,
"requires": {
@@ -4759,7 +4743,7 @@
},
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -5068,12 +5052,20 @@
"dependencies": {
"domelementtype": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
"dev": true
}
}
},
"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",
@@ -5352,8 +5344,7 @@
"escape-string-regexp": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
"dev": true
"integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
},
"eslint": {
"version": "6.8.0",
@@ -6179,7 +6170,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -6509,7 +6500,7 @@
},
"fast-deep-equal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"resolved": "http://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
"integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=",
"dev": true
},
@@ -7040,7 +7031,7 @@
},
"get-stream": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
"dev": true
},
@@ -7322,7 +7313,7 @@
},
"through2": {
"version": "0.6.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
"dev": true,
"requires": {
@@ -7388,7 +7379,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -7483,7 +7474,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -7606,7 +7597,7 @@
},
"file-type": {
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"resolved": "http://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
"dev": true
},
@@ -7648,7 +7639,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -7657,7 +7648,7 @@
},
"strip-dirs": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-1.1.1.tgz",
"resolved": "http://registry.npmjs.org/strip-dirs/-/strip-dirs-1.1.1.tgz",
"integrity": "sha1-lgu9EoeETzl1pFWKoQOoJV4kVqA=",
"dev": true,
"requires": {
@@ -7677,7 +7668,7 @@
},
"through2": {
"version": "0.6.5",
"resolved": "https://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"resolved": "http://registry.npmjs.org/through2/-/through2-0.6.5.tgz",
"integrity": "sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=",
"dev": true,
"requires": {
@@ -7770,7 +7761,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -7801,7 +7792,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -7871,7 +7862,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
"integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
},
@@ -7879,8 +7869,7 @@
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
}
}
},
@@ -8364,7 +8353,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -9730,7 +9719,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@@ -9764,15 +9753,9 @@
}
},
"lodash": {
<<<<<<< HEAD
"version": "4.17.19",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
"integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ=="
=======
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
>>>>>>> refs/remotes/origin/master
},
"lodash._basecopy": {
"version": "3.0.1",
@@ -9872,15 +9855,6 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
<<<<<<< HEAD
=======
"lodash.mergewith": {
"version": "4.6.2",
"resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
"integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
"dev": true
},
>>>>>>> refs/remotes/origin/master
"lodash.restparam": {
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
@@ -11149,22 +11123,15 @@
"integrity": "sha1-cTfmmzKYuzQiR6G77jiByA4v14s=",
"dev": true,
"requires": {
<<<<<<< HEAD
"is-stream": "^1.0.1",
"readable-stream": "^2.0.1"
=======
"graceful-fs": "^4.1.2",
"pify": "^2.0.0",
"pinkie-promise": "^2.0.0"
},
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
}
>>>>>>> refs/remotes/origin/master
}
},
"original": {
@@ -11580,6 +11547,15 @@
"mkdirp": "^0.5.1"
},
"dependencies": {
"async": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
"integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
"dev": true,
"requires": {
"lodash": "^4.17.14"
}
},
"debug": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
@@ -12290,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": {
@@ -12316,6 +12291,12 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",
"integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA=="
},
"react-owl-carousel2": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/react-owl-carousel2/-/react-owl-carousel2-0.3.0.tgz",
"integrity": "sha512-f6RYdNn7BD3npMfS7d88utPMfje8qsAKAftUtQ0F9imjvKHtTngP013mdqOcllsJ/75f4/uu2vA14kVBwUvEZA==",
"dev": true
},
"react-redux": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-6.0.1.tgz",
@@ -12668,7 +12649,7 @@
"dependencies": {
"jsesc": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"resolved": "http://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
"integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
"dev": true
}
@@ -12707,7 +12688,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -13010,6 +12991,17 @@
"string-width": "^3.1.0",
"strip-ansi": "^5.2.0",
"wrap-ansi": "^5.1.0"
},
"dependencies": {
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
}
}
},
"decamelize": {
@@ -13049,7 +13041,11 @@
"path-exists": "^3.0.0"
}
},
<<<<<<< HEAD
"os-locale": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk="
},
"p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -13063,12 +13059,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
"integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
=======
"os-locale": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
"integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
>>>>>>> refs/remotes/origin/master
"dev": true,
"requires": {
"p-limit": "^2.0.0"
@@ -13095,22 +13085,23 @@
"emoji-regex": "^7.0.1",
"is-fullwidth-code-point": "^2.0.0",
"strip-ansi": "^5.1.0"
},
"dependencies": {
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
}
}
},
"strip-ansi": {
<<<<<<< HEAD
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
=======
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
>>>>>>> refs/remotes/origin/master
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8="
},
"wrap-ansi": {
"version": "5.1.0",
@@ -13121,6 +13112,17 @@
"ansi-styles": "^3.2.0",
"string-width": "^3.0.0",
"strip-ansi": "^5.0.0"
},
"dependencies": {
"strip-ansi": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"
}
}
}
},
"yargs": {
@@ -13174,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"
@@ -13225,7 +13227,7 @@
"dependencies": {
"commander": {
"version": "2.8.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
"resolved": "http://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
"integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
"dev": true,
"requires": {
@@ -13950,7 +13952,7 @@
},
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"dev": true,
"requires": {
@@ -13963,7 +13965,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -13995,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",
@@ -14753,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",
@@ -14869,23 +14885,26 @@
"trim": "0.0.1"
},
"dependencies": {
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
"requires": {
"escape-string-regexp": "^1.0.2",
"has-ansi": "^2.0.0",
"strip-ansi": "^3.0.0"
}
},
"process-nextick-args": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
"integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
"dev": true
},
<<<<<<< HEAD
"readable-stream": {
"version": "2.2.9",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz",
"integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=",
=======
"chalk": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
"integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
>>>>>>> refs/remotes/origin/master
"dev": true,
"requires": {
"buffer-shims": "~1.0.0",
@@ -14897,21 +14916,19 @@
"util-deprecate": "~1.0.1"
}
},
<<<<<<< HEAD
"string_decoder": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
"integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
=======
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
>>>>>>> refs/remotes/origin/master
"dev": true,
"requires": {
"safe-buffer": "~5.1.0"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8="
}
}
},
@@ -16754,7 +16771,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@@ -16889,15 +16906,9 @@
}
},
"strip-ansi": {
<<<<<<< HEAD
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
"integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
=======
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
>>>>>>> refs/remotes/origin/master
"dev": true,
"requires": {
"ansi-regex": "^4.1.0"

8
package.json
View File

@@ -19,13 +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",
"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",
@@ -58,6 +59,7 @@
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^2.0.5",
"react-owl-carousel2": "^0.3.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",

37
src/components/MovieGenre.js
View File

@@ -1,37 +0,0 @@
import React, { Component } from 'react'
import Modal from '../components/UI/Modal';
import MovieDetails from '../components/Movie/MovieDetails';
export default class MovieGenre extends Component {
state = {
toggleModal: false
}
handleToggleModal = () => {
this.setState({ toggleModal: true });
}
closeModal = () => {
this.setState({ toggleModal: false })
}
render() {
let netflixUrl = false;
if (this.props.url === `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`) {
netflixUrl = true;
}
return (
<>
<div onClick={() => this.handleToggleModal()}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
<Modal show={this.state.toggleModal} movie={this.props.movie} modalClosed={this.closeModal}>
<MovieDetails movie={this.props.movie} />
</Modal>
</>
)
}
}

26
src/components/MovieGenreImage.js
View File

@@ -1,26 +0,0 @@
import React from 'react';
export default function MovieGenreImage(props) {
let netflixUrl = false;
if (
props.url ===
`https://api.themoviedb.org/3/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
netflixUrl = true;
}
return (
<div
onClick={props.movieDetailsModal}
className={
'movieShowcase__container--movie' + (netflixUrl ? '__netflix' : '')
}
>
<img
src={props.posterUrl}
className="movieShowcase__container--movie-image"
/>
</div>
);
}

14
src/components/NavigationItem.js
View File

@@ -1,14 +0,0 @@
// import React from 'react';
// import { NavLink } from 'react-router-dom';
// const navigationItem = (props) => (
// <NavLink
// // className="navigation__container-link"
// exact={props.exact}
// to={props.link}
// >
// {props.children}
// </NavLink>
// );
// export default navigationItem;

38
src/containers/ActionMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchActionMovies } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class ActionMovies extends Component {
componentWillMount() {
this.props.fetchActionMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.actionMovies.data) {
const url = `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`;
movies = getMovieRows(this.props.actionMovies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { actionMovies: state.action };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchActionMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ActionMovies);

38
src/containers/ComedyMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchComedyMovies } from '../store/actions/index';
class ComedyMovies extends Component {
componentWillMount() {
this.props.fetchComedyMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.comedy };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchComedyMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(ComedyMovies);

109
src/containers/DisplayMovieRow.js Normal file
View File

@@ -0,0 +1,109 @@
import React, { Component } from 'react';
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';
// install Swiper components
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
export default class DisplayMovieRow extends Component {
constructor(props) {
super(props);
this.state = {
value: 0,
width: window.innerWidth
};
}
componentDidMount() {
window.addEventListener("resize", this.handleResize);
}
componentWillUnMount() {
window.addEventListener("resize", this.handleResize);
}
handleResize = (e) => {
this.setState({ width: window.innerWidth });
};
onSlideChange = (value) => {
this.setState({ value })
}
render() {
const { width } = this.state;
let netflixUrl = false;
if (
this.props.url ===
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
netflixUrl = true;
}
return (
<>
<h1 className="movieShowcase__heading">{this.props.title}</h1>
<Swiper
className="movieShowcase__container"
navigation
grabCursor={false}
draggable={false}
loop={true}
loopAdditionalSlides={2}
breakpoints={{
1378: {
slidesPerView: 5,
slidesPerGroup: 5
},
998: {
slidesPerView: 4,
slidesPerGroup: 4
},
625: {
slidesPerView: 3,
slidesPerGroup: 3,
},
0: {
slidesPerView: 2,
slidesPerGroup: 2
},
}}
preventClicksPropagation={true}
preventClicks={true}
scrollbar={{ draggable: false, hide: true }}
slideToClickedSlide={false}
pagination={{ clickable: true }}
>
{
this.props.movies.map((movie, idx) => {
let movieImageUrl =
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
if (
this.props.url ===
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
) {
movieImageUrl =
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
}
if (movie.poster_path && movie.backdrop_path !== null) {
return (
<SwiperSlide
onClick={() => this.props.selectMovieHandler(movie)}
key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}
>
<img src={movieImageUrl} className="movieShowcase__container--movie-image" />
</SwiperSlide>
)
}
})
}
</Swiper>
</>
);
}
}

38
src/containers/Documentaries.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchDocumentaries } from '../store/actions/index';
class Documentaries extends Component {
componentWillMount() {
this.props.fetchDocumentaries();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.documentary };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchDocumentaries }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(Documentaries);

30
src/containers/Home.js
View File

@@ -17,28 +17,10 @@ class Home extends Component {
/* Get the appropriate details for a specific movie that was clicked */
// selectMovieHandler = (movie) => {
// this.setState({ toggleModal: true });
// let url;
// /** Make the appropriate API call to get the details for a single movie or tv show. */
// if (movie.media_type === "movie") {
// const movieId = movie.id;
// url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${process.env.API_KEY}`;
// } else if (movie.media_type === "tv") {
// const tvId = movie.id
// url = `https://api.themoviedb.org/3/tv/${tvId}?api_key=${process.env.API_KEY}`;
// }
// axios.get(url)
// .then(res => {
// const movieData = res.data;
// this.setState({ movieOverview: movieData });
// }).catch(error => {
// console.log(error);
// });
// }
selectMovieHandler = async (movie) => {
this.setState({ toggleModal: true });
await this.setState({ movieOverview: movie });
}
closeModal = () => {
this.setState({ toggleModal: false });
@@ -47,8 +29,8 @@ class Home extends Component {
render() {
return (
<>
<div class="main-content">
<MainContent />
<div className="main-content">
<MainContent selectMovieHandler={this.selectMovieHandler} />
</div>
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}

38
src/containers/HorrorMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchHorrorMovies } from '../store/actions/index';
class HorrorMovies extends Component {
componentWillMount() {
this.props.fetchHorrorMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.horror };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchHorrorMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(HorrorMovies);

146
src/containers/MainContent.js
View File

@@ -1,27 +1,102 @@
import React, { Component } from 'react';
import axios from 'axios';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Header from '../components/Header';
import Footer from '../components/Footer';
import TrendingMovies from './TrendingMovies';
import NetflixOriginals from './NetflixOriginals';
import TopRated from './TopRated';
import ActionMovies from './ActionMovies';
import ComedyMovies from './ComedyMovies';
import Documentaries from './Documentaries';
import {
fetchNetflixOriginals,
fetchTrending,
fetchTopRated,
fetchActionMovies,
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies
} from '../store/actions/index';
import DisplayMovieRow from './DisplayMovieRow';
class MainContent extends Component {
state = {
/** Will hold our chosen movie to display on the header */
selectedMovie: {}
selectedMovie: {},
movieInfo: [
{
title: 'Netflix Originals',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`,
movies: [],
},
{
title: 'Trending Now',
url: `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`,
movies: [],
},
{
title: 'Top Rated',
url: `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`,
movies: [],
},
{
title: 'Action Movies',
url: `/discover/movie?api_key=${process.env.API_KEY}&with_genres=28`,
movies: [],
},
{
title: 'Comedy Movies',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=35`,
movies: [],
},
{
title: 'Horror Movies',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=27`,
movies: [],
},
{
title: 'Documentaries',
url: `/discover/tv?api_key=${process.env.API_KEY}&with_genres=99`,
movies: [],
},
],
};
componentDidMount = () => {
this.getMovie();
};
componentDidMount = async () => {
await this.getMovie();
await this.props.fetchNetflixOriginals();
await this.props.fetchTrending();
await this.props.fetchTopRated();
await this.props.fetchActionMovies();
await this.props.fetchComedyMovies();
await this.props.fetchDocumentaries();
await this.props.fetchHorrorMovies();
const newMoviesArray = this.state.movieInfo.map((movie) => {
if (movie.title === 'Netflix Originals') {
movie.movies.push(...this.props.netflixOriginals.data)
}
if (movie.title === 'Trending Now') {
movie.movies.push(...this.props.trending.data)
}
if (movie.title === 'Top Rated') {
movie.movies.push(...this.props.topRated.data)
}
if (movie.title === 'Action Movies') {
movie.movies.push(...this.props.actionMovies.data)
}
if (movie.title === 'Comedy Movies') {
movie.movies.push(...this.props.comedyMovies.data)
}
if (movie.title === 'Documentaries') {
movie.movies.push(...this.props.documentaries.data)
}
if (movie.title === 'Horror Movies') {
movie.movies.push(...this.props.horrorMovies.data)
}
return movie
})
await this.setState({ movieInfo: newMoviesArray })
};
getMovie = () => {
/** Movie Id for the Narcos series */
@@ -44,12 +119,20 @@ class MainContent extends Component {
<div className="container">
<Header movie={this.state.selectedMovie} />
<div className="movieShowcase">
<NetflixOriginals />
<TrendingMovies />
<TopRated />
<ActionMovies />
<ComedyMovies />
<Documentaries />
{
this.state.movieInfo.map((info) => {
if (info.movies.length > 0) {
return (
<DisplayMovieRow
selectMovieHandler={this.props.selectMovieHandler}
key={info.title}
title={info.title}
url={info.url}
movies={info.movies}
/>)
}
})
}
</div>
<Footer />
</div>
@@ -57,4 +140,31 @@ class MainContent extends Component {
}
}
export default MainContent;
const mapStateToProps = (state) => {
return {
netflixOriginals: state.netflixOriginals,
trending: state.trending,
topRated: state.topRated,
actionMovies: state.action,
comedyMovies: state.comedy,
documentaries: state.documentary,
horrorMovies: state.horror
};
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({
fetchNetflixOriginals,
fetchTrending,
fetchTopRated,
fetchActionMovies,
fetchComedyMovies,
fetchDocumentaries,
fetchHorrorMovies
}, dispatch);
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(MainContent);

38
src/containers/NetflixOriginals.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchNetflixOriginals } from '../store/actions/index';
class NetflixOriginals extends Component {
componentWillMount() {
this.props.fetchNetflixOriginals();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.netflixOriginals };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchNetflixOriginals }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(NetflixOriginals);

38
src/containers/RomanceMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { getMovieRows } from '../getMovie';
import { fetchRomanceMovies } from '../store/actions/index';
class RomanceMovies extends Component {
componentWillMount() {
this.props.fetchRomanceMovies();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.movies.data) {
const url = `/discover/tv?api_key=${process.env.API_KEY}&with_genres=10749`;
movies = getMovieRows(this.props.movies.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { movies: state.romance };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchRomanceMovies }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(RomanceMovies);

38
src/containers/TopRated.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTopRated } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TopRated extends Component {
componentWillMount() {
this.props.fetchTopRated();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.topRated.data) {
const url = `/movie/top_rated?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.topRated.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { topRated: state.topRated };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTopRated }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TopRated);

38
src/containers/TrendingMovies.js
View File

@@ -1,38 +0,0 @@
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { fetchTrending } from '../store/actions/index';
import { getMovieRows } from '../getMovie';
class TrendingMovies extends Component {
componentWillMount() {
this.props.fetchTrending();
}
render() {
let movies;
// Call getMoviesRows function only when we get the data back
// from the API through redux
if (this.props.trending.data) {
const url = `/trending/all/week?api_key=${process.env.API_KEY}&language=en-US`;
movies = getMovieRows(this.props.trending.data, url);
}
return (
<>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">{movies}</div>
</>
);
}
}
const mapStateToProps = (state) => {
return { trending: state.trending };
};
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ fetchTrending }, dispatch);
};
export default connect(mapStateToProps, mapDispatchToProps)(TrendingMovies);

4
src/index.html
View File

@@ -5,6 +5,10 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Hind:400,500,700|Ramabhadra" rel="stylesheet">
<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 http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix Clone</title>
</head>

2
src/index.js
View File

@@ -13,9 +13,7 @@ import './static/sass/style.scss';
const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
// TODO
// - fix styling issue
// - implement carousel
// - fix modal backdrop bug
const app = (
<Provider store={createStoreWithMiddleware(reducers)}>
<App />

0
src/static/sass/abstracts/_mixins.scss
View File

2
src/static/sass/base/_animations.scss
View File

@@ -1,2 +0,0 @@

0
src/static/sass/base/_utils.scss
View File

2
src/static/sass/components/_backdrop.scss
View File

@@ -6,5 +6,5 @@
left: 0;
top: 0;
background-color: rgba($color-background, .7);
transition: all .5s;
transition: all .3s;
}

1
src/static/sass/components/_modal.scss
View File

@@ -8,6 +8,7 @@
height: 52rem;
opacity: 0;
box-shadow: 0 1.5rem 4rem rgba($color-dark, .15);
transition: all .3s;
@include responsive(tab_port) {
height: 38rem;

116
src/static/sass/components/_movieShowcase.scss
View File

@@ -1,3 +1,46 @@
// Override swiper styles
.swiper-pagination {
top: 0;
height: 2rem;
text-align: right;
padding-right: 4rem;
}
.swiper-pagination-bullet {
background-color: rgb(255, 255, 255);
}
.swiper-container-horizontal>.swiper-pagination-bullets {
bottom: 0;
left: 0;
width: 100%;
}
div.swiper-button-prev,
div.swiper-button-next {
transition: all .3s;
color: rgb(255, 255, 255);
&:hover {
transform: scale(1.2);
transition: all .3s;
}
}
.swiper-wrapper:hover .swiper-slide {
opacity: .3;
&:hover {
transform: scale(1.3);
opacity: 1;
@include responsive(tab_port) {
transform: scale(1.2);
}
}
}
.movieShowcase {
background-color: $color-background;
grid-column: 2 / 13;
@@ -12,47 +55,17 @@
}
&__container {
overflow-y: hidden;
transition: transform 450ms;
overflow: -moz-hidden-unscrollable;
overflow-x: scroll;
display: flex;
width: 95vw;
overflow: -moz-scrollbars-horizontal;
grid-template-columns: repeat(20, 1fr);
column-gap: 0;
@include responsive(phone) {
width: 98vw;
}
&:hover &--movie {
opacity: .3;
&:hover {
transform: scale(1.5);
opacity: 1;
}
}
&:hover>* {
// transform: translate3d(-5rem, 0, 0);
@include responsive(tab_port) {
transform: translate3d(-5rem, 0, 0);
}
// @include responsive(phone) {
// // transform: translate3d(-3rem, 0, 0);
// }
}
&--movie:hover~&--movie {
// transform: translate3d(6rem, 0, 0);
transform: translate3d(5rem, 0, 0);
@include responsive(tab_port) {
transform: translate3d(4.5rem, 0, 0);
transform: translate3d(3rem, 0, 0);
}
@include responsive(phone) {
@@ -60,21 +73,21 @@
}
}
&:hover>&--movie__netflix {
transform: translate3d(-1rem, 0, 0);
}
&--movie__netflix:hover~&--movie__netflix {
transform: translate3d(1rem, 0, 0);
}
&:hover &--movie__netflix {
opacity: .3;
&:hover {
transform: scale(1.1);
opacity: 1;
@include responsive(tab_port) {
transform: scale(1.05);
}
@include responsive(phone) {
transform: scale(1.05);
}
}
}
@@ -84,16 +97,8 @@
transform: center left;
padding-top: 3.5rem;
padding-bottom: 4rem;
height: 21.5rem;
min-height: 0;
@include responsive(tab_port) {
height: 18.5rem;
}
@include responsive(phone) {
height: 14rem;
}
object-fit: contain;
&:not(:last-child) {
padding-right: .5rem;
@@ -101,7 +106,8 @@
&-image {
height: 100%;
width: 100%;
object-fit: contain;
}
&__netflix {
@@ -109,20 +115,10 @@
padding-top: 3rem;
padding-bottom: 4rem;
padding-right: 1rem;
height: 52rem;
cursor: pointer;
transition: all 450ms;
transform: center left;
@include responsive(tab_port) {
height: 42rem;
}
@include responsive(phone) {
height: 34rem;
}
}
}
}
}

8
src/static/sass/style.scss
View File

@@ -1,12 +1,9 @@
@import "abstracts/functions";
@import "abstracts/mixins";
@import "abstracts/variables";
@import "base/animations";
@import "base/base";
@import "base/utils";
@import "components/backdrop";
@import "components/backdrop";
@import "components/modal";
@import "components/search";
@import "components/movie";
@@ -14,5 +11,4 @@
@import "layout/footer";
@import "layout/header";
@import "layout/navigation";
@import "layout/navigation";

7
webpack.config.js
View File

@@ -16,8 +16,6 @@ module.exports = () => {
return prev;
}, {});
console.log('keys', envKeys);
return {
entry: './src/index.js',
output: {
@@ -41,6 +39,11 @@ module.exports = () => {
loader: 'svg-react-loader',
},
},
{
test: /\.css$/,
include: /node_modules/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
use: [