From 8e22fc06d2fa8eab7b5fc5f327e82ea4ef1404c9 Mon Sep 17 00:00:00 2001 From: andres alcocer Date: Sat, 30 Mar 2019 11:28:15 -0400 Subject: [PATCH] restructured folder project --- .gitignore | 3 + package-lock.json | 199 +++++++----------- package.json | 15 +- .../Navbar => components}/DropdownContent.js | 8 +- src/components/{Footer => }/Footer.js | 0 src/components/Header.js | 32 +++ src/components/Header/Header.js | 40 ---- src/components/ModalMovieDetails.js | 37 ++++ .../ModalMovieDetails/ModalMovieDetails.js | 41 ---- src/components/Movie/Movie.js | 11 +- src/components/Movie/MovieDetails.js | 36 ++++ .../Movie/MovieDetails/MovieDetails.js | 41 ---- src/components/MovieGenre.js | 15 ++ src/components/MovieGenreImage.js | 16 ++ .../{NavigationItem => }/NavigationItem.js | 6 +- src/components/UI/Backdrop.js | 9 + src/components/UI/Backdrop/Backdrop.js | 10 - src/components/UI/Modal.js | 23 ++ src/components/UI/Modal/Modal.js | 27 --- src/containers/App.js | 6 +- src/containers/{Layout => }/Layout.js | 34 +-- .../{Layout/MainContent => }/MainContent.js | 6 +- .../{MovieGenreRow => }/MovieGenreRow.js | 176 ++++++++-------- src/containers/MovieGenreRow/MovieGenre.js | 25 --- .../MovieGenreRow/MovieGenreImage.js | 25 --- src/containers/{Navbar => }/Navbar.js | 53 ++--- src/hoc/{Aux => }/Aux.js | 0 src/index.html | 11 +- webpack.config.js | 15 +- 29 files changed, 413 insertions(+), 507 deletions(-) rename src/{containers/Navbar => components}/DropdownContent.js (93%) rename src/components/{Footer => }/Footer.js (100%) create mode 100644 src/components/Header.js delete mode 100644 src/components/Header/Header.js create mode 100644 src/components/ModalMovieDetails.js delete mode 100644 src/components/ModalMovieDetails/ModalMovieDetails.js create mode 100644 src/components/Movie/MovieDetails.js delete mode 100644 src/components/Movie/MovieDetails/MovieDetails.js create mode 100644 src/components/MovieGenre.js create mode 100644 src/components/MovieGenreImage.js rename src/components/{NavigationItem => }/NavigationItem.js (69%) create mode 100644 src/components/UI/Backdrop.js delete mode 100644 src/components/UI/Backdrop/Backdrop.js create mode 100644 src/components/UI/Modal.js delete mode 100644 src/components/UI/Modal/Modal.js rename src/containers/{Layout => }/Layout.js (81%) rename src/containers/{Layout/MainContent => }/MainContent.js (85%) rename src/containers/{MovieGenreRow => }/MovieGenreRow.js (60%) delete mode 100644 src/containers/MovieGenreRow/MovieGenre.js delete mode 100644 src/containers/MovieGenreRow/MovieGenreImage.js rename src/containers/{Navbar => }/Navbar.js (65%) rename src/hoc/{Aux => }/Aux.js (100%) diff --git a/.gitignore b/.gitignore index 43287f2..f26bccb 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,9 @@ node_modules # Build files dist/ +# Environment varialbes +.env + # Logs logs *.log diff --git a/package-lock.json b/package-lock.json index 8524933..ae758ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1099,7 +1099,6 @@ "version": "1.3.5", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", - "dev": true, "requires": { "mime-types": "~2.1.18", "negotiator": "0.6.1" @@ -1427,7 +1426,6 @@ "version": "0.18.0", "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz", "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", - "dev": true, "requires": { "follow-redirects": "^1.3.0", "is-buffer": "^1.1.5" @@ -1903,7 +1901,6 @@ "version": "1.18.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.3.tgz", "integrity": "sha1-WykhmP/dVTs6DyDe0FkrlWlVyLQ=", - "dev": true, "requires": { "bytes": "3.0.0", "content-type": "~1.0.4", @@ -2162,8 +2159,7 @@ "bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=", - "dev": true + "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" }, "cacache": { "version": "10.0.4", @@ -2695,14 +2691,12 @@ "content-disposition": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", - "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=", - "dev": true + "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" }, "content-type": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", - "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==", - "dev": true + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" }, "convert-source-map": { "version": "1.6.0", @@ -2716,14 +2710,12 @@ "cookie": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", - "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=", - "dev": true + "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" }, "cookie-signature": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=", - "dev": true + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" }, "copy-concurrently": { "version": "1.0.5", @@ -3859,7 +3851,6 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -4108,8 +4099,7 @@ "depd": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", - "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=", - "dev": true + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" }, "des.js": { "version": "1.0.0", @@ -4124,8 +4114,7 @@ "destroy": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", - "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", - "dev": true + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" }, "detect-node": { "version": "2.0.4", @@ -4257,6 +4246,12 @@ "is-obj": "^1.0.0" } }, + "dotenv": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-6.2.0.tgz", + "integrity": "sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==", + "dev": true + }, "download": { "version": "6.2.5", "resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz", @@ -4334,8 +4329,7 @@ "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", - "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", - "dev": true + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" }, "electron-to-chromium": { "version": "1.3.84", @@ -4367,8 +4361,7 @@ "encodeurl": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=", - "dev": true + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" }, "end-of-stream": { "version": "1.4.1", @@ -4451,8 +4444,7 @@ "escape-html": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", - "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=", - "dev": true + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" }, "escape-string-regexp": { "version": "1.0.5", @@ -4500,8 +4492,7 @@ "etag": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", - "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=", - "dev": true + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, "eventemitter3": { "version": "3.1.0", @@ -4707,7 +4698,6 @@ "version": "4.16.4", "resolved": "https://registry.npmjs.org/express/-/express-4.16.4.tgz", "integrity": "sha512-j12Uuyb4FMrd/qQAm6uCHAkPtO8FDTRJZBDd5D2KOL2eLaz1yUNdUB/NOIyq0iU4q4cFarsUCrnFDPBcnksuOg==", - "dev": true, "requires": { "accepts": "~1.3.5", "array-flatten": "1.1.1", @@ -4744,8 +4734,7 @@ "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", - "dev": true + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" } } }, @@ -5064,7 +5053,6 @@ "version": "1.1.1", "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", - "dev": true, "requires": { "debug": "2.6.9", "encodeurl": "~1.0.2", @@ -5133,7 +5121,6 @@ "version": "1.5.9", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.9.tgz", "integrity": "sha512-Bh65EZI/RU8nx0wbYF9shkFZlqLP+6WT/5FnA3cE/djNSuKNHJEinGGZgu/cQEkeeb2GdFOgenAmn8qaqYke2w==", - "dev": true, "requires": { "debug": "=3.1.0" }, @@ -5142,7 +5129,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -5184,8 +5170,7 @@ "forwarded": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", - "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=", - "dev": true + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" }, "fragment-cache": { "version": "0.2.1", @@ -5199,8 +5184,7 @@ "fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", - "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=", - "dev": true + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" }, "from2": { "version": "2.3.0", @@ -5256,7 +5240,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5277,12 +5262,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5297,17 +5284,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5424,7 +5414,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5436,6 +5427,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5450,6 +5442,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5457,12 +5450,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5481,6 +5476,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5561,7 +5557,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5573,6 +5570,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5658,7 +5656,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5694,6 +5693,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5713,6 +5713,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5756,12 +5757,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -6793,7 +6796,6 @@ "version": "4.7.2", "resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz", "integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==", - "dev": true, "requires": { "invariant": "^2.2.1", "loose-envify": "^1.2.0", @@ -6806,7 +6808,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -6827,8 +6828,7 @@ "hoist-non-react-statics": { "version": "2.5.5", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz", - "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==", - "dev": true + "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==" }, "hosted-git-info": { "version": "2.7.1", @@ -7016,7 +7016,6 @@ "version": "1.6.3", "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", - "dev": true, "requires": { "depd": "~1.1.2", "inherits": "2.0.3", @@ -7074,7 +7073,6 @@ "version": "0.4.23", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz", "integrity": "sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==", - "dev": true, "requires": { "safer-buffer": ">= 2.1.2 < 3" } @@ -7379,8 +7377,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -7418,7 +7415,6 @@ "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -7444,8 +7440,7 @@ "ipaddr.js": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz", - "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=", - "dev": true + "integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4=" }, "is-absolute": { "version": "0.1.7", @@ -7500,8 +7495,7 @@ "is-buffer": { "version": "1.1.6", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", - "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", - "dev": true + "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, "is-builtin-module": { "version": "1.0.0", @@ -7927,8 +7921,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.12.0", @@ -8331,7 +8324,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -8445,8 +8437,7 @@ "media-typer": { "version": "0.3.0", "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", - "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", - "dev": true + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, "mem": { "version": "4.0.0", @@ -8504,8 +8495,7 @@ "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", - "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=", - "dev": true + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" }, "merge-stream": { "version": "1.0.1", @@ -8519,8 +8509,7 @@ "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", - "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=", - "dev": true + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" }, "micromatch": { "version": "3.1.10", @@ -8556,20 +8545,17 @@ "mime": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", - "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==", - "dev": true + "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" }, "mime-db": { "version": "1.37.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz", - "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==", - "dev": true + "integrity": "sha512-R3C4db6bgQhlIhPU48fUtdVmKnflq+hRdad7IyKhtFj06VPNVdk2RhiYL3UjQIlso8L+YxAtFkobT0VK+S/ybg==" }, "mime-types": { "version": "2.1.21", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz", "integrity": "sha512-3iL6DbwpyLzjR3xHSFNFeb9Nz/M8WDkX33t1GFQnFOllWk8pOrh/LSrB5OXlnlW5P9LH73X6loW/eogc+F5lJg==", - "dev": true, "requires": { "mime-db": "~1.37.0" } @@ -8731,8 +8717,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "multicast-dns": { "version": "6.2.3", @@ -8822,8 +8807,7 @@ "negotiator": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", - "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=", - "dev": true + "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, "neo-async": { "version": "2.6.0", @@ -9104,8 +9088,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-copy": { "version": "0.1.0", @@ -9215,7 +9198,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", - "dev": true, "requires": { "ee-first": "1.1.1" } @@ -9511,8 +9493,7 @@ "parseurl": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", - "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=", - "dev": true + "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" }, "pascalcase": { "version": "0.1.1", @@ -9565,8 +9546,7 @@ "path-to-regexp": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", - "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=", - "dev": true + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" }, "path-type": { "version": "1.1.0", @@ -10641,7 +10621,6 @@ "version": "15.6.2", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", - "dev": true, "requires": { "loose-envify": "^1.3.1", "object-assign": "^4.1.1" @@ -10657,7 +10636,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz", "integrity": "sha512-5erio2h9jp5CHGwcybmxmVqHmnCBZeewlfJ0pex+UW7Qny7OOZXTtH56TGNyBizkgiOwhJtMKrVzDTeKcySZwA==", - "dev": true, "requires": { "forwarded": "~0.1.2", "ipaddr.js": "1.8.0" @@ -10731,8 +10709,7 @@ "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", - "dev": true + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" }, "query-string": { "version": "5.1.1", @@ -10810,14 +10787,12 @@ "range-parser": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", - "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=", - "dev": true + "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" }, "raw-body": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.3.tgz", "integrity": "sha512-9esiElv1BrZoI3rCDuOuKCBRbuApGGaDPQfjSflGxdy4oyzqghxu6klEkkVIvBje+FF0BX9coEv8KqW6X/7njw==", - "dev": true, "requires": { "bytes": "3.0.0", "http-errors": "1.6.3", @@ -10849,7 +10824,6 @@ "version": "16.6.1", "resolved": "https://registry.npmjs.org/react/-/react-16.6.1.tgz", "integrity": "sha512-OtawJThYlvRgm9BXK+xTL7BIlDx8vv21j+fbQDjRRUyok6y7NyjlweGorielTahLZHYIdKUoK2Dp9ByVWuMqxw==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -10861,7 +10835,6 @@ "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==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", @@ -10873,7 +10846,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz", "integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==", - "dev": true, "requires": { "history": "^4.7.2", "hoist-non-react-statics": "^2.5.0", @@ -10887,14 +10859,12 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" }, "path-to-regexp": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", - "dev": true, "requires": { "isarray": "0.0.1" } @@ -10905,7 +10875,6 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz", "integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==", - "dev": true, "requires": { "history": "^4.7.2", "invariant": "^2.2.4", @@ -11243,8 +11212,7 @@ "resolve-pathname": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz", - "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==", - "dev": true + "integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg==" }, "resolve-url": { "version": "0.2.1", @@ -11316,8 +11284,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safe-regex": { "version": "1.1.0", @@ -11331,8 +11298,7 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" }, "sass-graph": { "version": "2.2.4", @@ -11496,7 +11462,6 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.11.0.tgz", "integrity": "sha512-MAYbBfmiEHxF0W+c4CxMpEqMYK+rYF584VP/qMKSiHM6lTkBKKYOJaDiSILpJHla6hBOsVd6GucPL46o2Uq3sg==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -11593,7 +11558,6 @@ "version": "0.16.2", "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", - "dev": true, "requires": { "debug": "2.6.9", "depd": "~1.1.2", @@ -11635,7 +11599,6 @@ "version": "1.13.2", "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", - "dev": true, "requires": { "encodeurl": "~1.0.2", "escape-html": "~1.0.3", @@ -11687,8 +11650,7 @@ "setprototypeof": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", - "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==", - "dev": true + "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" }, "sha.js": { "version": "2.4.11", @@ -12172,8 +12134,7 @@ "statuses": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", - "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==", - "dev": true + "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" }, "stdout-stream": { "version": "1.4.1", @@ -12812,7 +12773,6 @@ "version": "1.6.16", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", - "dev": true, "requires": { "media-typer": "0.3.0", "mime-types": "~2.1.18" @@ -13134,8 +13094,7 @@ "unpipe": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", - "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=", - "dev": true + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" }, "unquote": { "version": "1.1.1", @@ -13316,8 +13275,7 @@ "utils-merge": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", - "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=", - "dev": true + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" }, "uuid": { "version": "3.3.2", @@ -13350,14 +13308,12 @@ "value-equal": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz", - "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==", - "dev": true + "integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw==" }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", - "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=", - "dev": true + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" }, "vendors": { "version": "1.0.2", @@ -13452,7 +13408,6 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz", "integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index eebeaf9..472fbbd 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,14 @@ }, "author": "Andres Alcocer", "license": "ISC", + "dependencies": { + "react": "^16.6.1", + "react-dom": "^16.6.1", + "react-router-dom": "^4.3.1", + "express": "^4.16.4", + "axios": "^0.18.0", + "prop-types": "^15.6.2" + }, "devDependencies": { "@babel/core": "^7.1.5", "@babel/plugin-proposal-class-properties": "^7.0.0", @@ -22,12 +30,11 @@ "@babel/polyfill": "^7.0.0-beta.51", "@babel/preset-env": "^7.1.5", "@babel/preset-react": "^7.0.0", - "axios": "^0.18.0", "babel-loader": "^8.0.4", "clean-webpack-plugin": "^1.0.0", "copy-webpack-plugin": "^4.6.0", "css-loader": "^1.0.1", - "express": "^4.16.4", + "dotenv": "^6.2.0", "extract-text-webpack-plugin": "^3.0.2", "file-loader": "^2.0.0", "html-loader": "^0.5.5", @@ -36,10 +43,6 @@ "mini-css-extract-plugin": "^0.4.4", "node-sass": "^4.10.0", "optimize-css-assets-webpack-plugin": "^5.0.1", - "prop-types": "^15.6.2", - "react": "^16.6.1", - "react-dom": "^16.6.1", - "react-router-dom": "^4.3.1", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "svg-inline-loader": "^0.8.0", diff --git a/src/containers/Navbar/DropdownContent.js b/src/components/DropdownContent.js similarity index 93% rename from src/containers/Navbar/DropdownContent.js rename to src/components/DropdownContent.js index e032388..1972283 100644 --- a/src/containers/Navbar/DropdownContent.js +++ b/src/components/DropdownContent.js @@ -1,8 +1,8 @@ -import React from 'react'; +import React from 'react'; const dropdownContent = () => ( - +
@@ -28,9 +28,7 @@ const dropdownContent = () => (
- - ); -export default dropdownContent; +export default dropdownContent; diff --git a/src/components/Footer/Footer.js b/src/components/Footer.js similarity index 100% rename from src/components/Footer/Footer.js rename to src/components/Footer.js diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 0000000..c466eca --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,32 @@ +import React from 'react'; + +import PlayLogo from '../static/images/play-button.svg'; +import AddLogo from '../static/images/add.svg'; + + +export default function Header(props) { + const backgroundStyle = { + backgroundSize: "cover", + backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})`, + backgroundPosition: "center", + } + + return ( +
+
+

{props.movie.name}

+ + + +

{props.movie.overview}

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js deleted file mode 100644 index df16aba..0000000 --- a/src/components/Header/Header.js +++ /dev/null @@ -1,40 +0,0 @@ -import React, { Component } from 'react'; -import PlayLogo from '../../static/images/play-button.svg'; -import AddLogo from '../../static/images/add.svg'; - - -class Header extends Component { - - render() { - - /** Background image for the header component */ - const backgroundStyle = { - backgroundSize: "cover", - backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`, - backgroundPosition: "center", - } - - return ( -
-
-

{this.props.movie.name}

- - - - -

{this.props.movie.overview}

-
-
-
- ) - - } -} - -export default Header; \ No newline at end of file diff --git a/src/components/ModalMovieDetails.js b/src/components/ModalMovieDetails.js new file mode 100644 index 0000000..0598443 --- /dev/null +++ b/src/components/ModalMovieDetails.js @@ -0,0 +1,37 @@ +import React from 'react'; +import Aux from '../hoc/Aux'; +import AddIcon from '../static/images/add.svg'; +import PlayIcon from '../static/images/play-button.svg'; + +import React from 'react' + +export default function ModalMovieDetails(props) { + return ( + +
+

+ {props.movie.title || props.movie.name} +

+

+ + Rating: {props.movie.vote_average * 10}%{" "} + + Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m +

+

+ {props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} + {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""} +

+

{props.movie.overview}

+ + +
+ + ); +} \ No newline at end of file diff --git a/src/components/ModalMovieDetails/ModalMovieDetails.js b/src/components/ModalMovieDetails/ModalMovieDetails.js deleted file mode 100644 index c851d18..0000000 --- a/src/components/ModalMovieDetails/ModalMovieDetails.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react'; -import Aux from '../../hoc/Aux/Aux'; -import AddIcon from '../../static/images/add.svg'; -import PlayIcon from '../../static/images/play-button.svg'; - - -class ModalMovieDetails extends Component { - - - render() { - - return -
-

- {this.props.movie.title || this.props.movie.name} -

-

- - Rating: {this.props.movie.vote_average * 10}%{" "} - - Release date: {this.props.movie.release_date || this.props.movie.first_air_date } Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m -

-

- {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} - {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""} -

-

{this.props.movie.overview}

- - -
- ; - } -} - -export default ModalMovieDetails; \ No newline at end of file diff --git a/src/components/Movie/Movie.js b/src/components/Movie/Movie.js index 65908ba..20c5088 100644 --- a/src/components/Movie/Movie.js +++ b/src/components/Movie/Movie.js @@ -1,12 +1,11 @@ import React from 'react'; - -const movieRow = (props) => ( +const movieRow = (props) => (
-
- -
-
+
+ +
+ ); export default movieRow; \ No newline at end of file diff --git a/src/components/Movie/MovieDetails.js b/src/components/Movie/MovieDetails.js new file mode 100644 index 0000000..87a5cb6 --- /dev/null +++ b/src/components/Movie/MovieDetails.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import Aux from '../../hoc/Aux'; +import AddIcon from '../../static/images/add.svg'; +import PlayIcon from '../../static/images/play-button.svg'; + +export default function MovieDetails(props) { + return ( + +
+

+ {props.movie.title || props.movie.name} +

+

+ + Rating: {props.movie.vote_average * 10}%{" "} + + Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m +

+

+ {props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} + {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""} +

+

{props.movie.overview}

+ + +
+ + ); +} \ No newline at end of file diff --git a/src/components/Movie/MovieDetails/MovieDetails.js b/src/components/Movie/MovieDetails/MovieDetails.js deleted file mode 100644 index 2b89cf8..0000000 --- a/src/components/Movie/MovieDetails/MovieDetails.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react'; -import Aux from '../../../hoc/Aux/Aux'; -import AddIcon from '../../../static/images/add.svg'; -import PlayIcon from '../../../static/images/play-button.svg'; - - -class MovieDetails extends Component { - - - render() { - - return -
-

- {this.props.movie.title || this.props.movie.name} -

-

- - Rating: {this.props.movie.vote_average * 10}%{" "} - - Release date: {this.props.movie.release_date || this.props.movie.first_air_date } Runtime: { this.props.movie.runtime || this.props.movie.episode_run_time}m -

-

- {this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""} - {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""} -

-

{this.props.movie.overview}

- - -
- ; - } -} - -export default MovieDetails; \ No newline at end of file diff --git a/src/components/MovieGenre.js b/src/components/MovieGenre.js new file mode 100644 index 0000000..87b19e1 --- /dev/null +++ b/src/components/MovieGenre.js @@ -0,0 +1,15 @@ +import React from 'react'; + +export default function MovieGenre(props) { + let netflixUrl = false; + if (props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { + netflixUrl = true; + } + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/MovieGenreImage.js b/src/components/MovieGenreImage.js new file mode 100644 index 0000000..72cae2e --- /dev/null +++ b/src/components/MovieGenreImage.js @@ -0,0 +1,16 @@ +import React from 'react' + +export default function MovieGenreImage(props) { + let netflixUrl = false; + + if (props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { + netflixUrl = true; + } + + return ( +
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/NavigationItem/NavigationItem.js b/src/components/NavigationItem.js similarity index 69% rename from src/components/NavigationItem/NavigationItem.js rename to src/components/NavigationItem.js index c96fc31..4df2460 100644 --- a/src/components/NavigationItem/NavigationItem.js +++ b/src/components/NavigationItem.js @@ -1,11 +1,9 @@ -import React from 'react'; +import React from 'react'; import { NavLink } from 'react-router-dom'; const navigationItem = (props) => ( - {props.children} - + to={props.link}>{props.children} ) export default navigationItem; \ No newline at end of file diff --git a/src/components/UI/Backdrop.js b/src/components/UI/Backdrop.js new file mode 100644 index 0000000..c3b9119 --- /dev/null +++ b/src/components/UI/Backdrop.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const backdrop = (props) => ( + props.show ?
: null +); + +export default backdrop; \ No newline at end of file diff --git a/src/components/UI/Backdrop/Backdrop.js b/src/components/UI/Backdrop/Backdrop.js deleted file mode 100644 index 8a9ab61..0000000 --- a/src/components/UI/Backdrop/Backdrop.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - - -const backdrop = (props) => ( - props.show ?
: null -); - -export default backdrop; \ No newline at end of file diff --git a/src/components/UI/Modal.js b/src/components/UI/Modal.js new file mode 100644 index 0000000..da40b3f --- /dev/null +++ b/src/components/UI/Modal.js @@ -0,0 +1,23 @@ +import React from 'react' + +import Aux from '../../hoc/Aux'; +import Backdrop from './Backdrop' + + +export default function Modal(props) { + const backgroundStyle = { + backgroundSize: "cover", + backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path || props.movie.poster_path})`, + } + + return ( + + +
+ {props.children} +
+ + ) +} diff --git a/src/components/UI/Modal/Modal.js b/src/components/UI/Modal/Modal.js deleted file mode 100644 index 52c4480..0000000 --- a/src/components/UI/Modal/Modal.js +++ /dev/null @@ -1,27 +0,0 @@ -import React, {Component} from 'react'; -import Aux from '../../../hoc/Aux/Aux'; -import Backdrop from '../Backdrop/Backdrop' - - -class Modal extends Component { - - render() { - const backgroundStyle = { - backgroundSize: "cover", - backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`, - } - return ( - - -
- {this.props.children} -
- - ); - } - -} - -export default Modal; \ No newline at end of file diff --git a/src/containers/App.js b/src/containers/App.js index f406d09..874df57 100644 --- a/src/containers/App.js +++ b/src/containers/App.js @@ -1,16 +1,14 @@ import React, { Component } from 'react'; - -import Layout from './Layout/Layout'; +import Layout from './Layout'; class App extends Component { render() { return ( - + ) } - } export default App; diff --git a/src/containers/Layout/Layout.js b/src/containers/Layout.js similarity index 81% rename from src/containers/Layout/Layout.js rename to src/containers/Layout.js index b8942f4..52f3b50 100644 --- a/src/containers/Layout/Layout.js +++ b/src/containers/Layout.js @@ -1,11 +1,11 @@ -import React, { Component } from 'react'; -import axios from "axios"; +import React, { Component } from 'react'; +import axios from "axios"; -import Navbar from '../Navbar/Navbar'; -import MainContent from '../Layout/MainContent/MainContent'; -import Movie from '../../components/Movie/Movie'; -import Modal from '../../components/UI/Modal/Modal'; -import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; +import Navbar from './Navbar'; +import MainContent from './MainContent'; +import Movie from '../components/Movie/Movie'; +import Modal from '../components/UI/Modal'; +import MovieDetails from '../components/Movie/MovieDetails'; class Layout extends Component { @@ -39,10 +39,10 @@ class Layout extends Component { /** Set the movie object to our Movie component */ const movieComponent = this.selectMovieHandler(movie)} - key={movie.id} - movieImage={movieImageUrl} - movie={movie} /> + movieDetails={() => this.selectMovieHandler(movie)} + key={movie.id} + movieImage={movieImageUrl} + movie={movie} /> /** Push our movie component to our movieRows array */ movieRows.push(movieComponent); @@ -93,7 +93,7 @@ class Layout extends Component { axios.get(url) .then(res => { const movieData = res.data; - + this.setState({ movieOverview: movieData }); }).catch(error => { console.log(error); @@ -112,13 +112,13 @@ class Layout extends Component { { this.state.toggleMovieList ? :
{this.state.MovieList}
+ className="search-container">{this.state.MovieList} } - - + + diff --git a/src/containers/Layout/MainContent/MainContent.js b/src/containers/MainContent.js similarity index 85% rename from src/containers/Layout/MainContent/MainContent.js rename to src/containers/MainContent.js index cc976ba..209a4e3 100644 --- a/src/containers/Layout/MainContent/MainContent.js +++ b/src/containers/MainContent.js @@ -1,8 +1,8 @@ import React, { Component } from 'react'; import axios from 'axios'; -import Header from '../../../components/Header/Header'; -import MovieGenreRow from '../../MovieGenreRow/MovieGenreRow'; -import Footer from '../../../components/Footer/Footer'; +import Header from '../components/Header'; +import MovieGenreRow from './MovieGenreRow'; +import Footer from '../components/Footer'; import { BrowserRouter } from "react-router-dom"; diff --git a/src/containers/MovieGenreRow/MovieGenreRow.js b/src/containers/MovieGenreRow.js similarity index 60% rename from src/containers/MovieGenreRow/MovieGenreRow.js rename to src/containers/MovieGenreRow.js index 0ecf5b1..4eb51bf 100644 --- a/src/containers/MovieGenreRow/MovieGenreRow.js +++ b/src/containers/MovieGenreRow.js @@ -1,8 +1,8 @@ import React, { Component } from "react"; -import axios from '../../axios-movies'; -import MovieGenre from './MovieGenre'; -import Modal from "../../components/UI/Modal/Modal"; -import MovieDetails from '../../components/Movie/MovieDetails/MovieDetails'; +import axios from '../axios-movies'; +import MovieGenre from '../components/MovieGenre'; +import Modal from "../components/UI/Modal"; +import MovieDetails from '../components/Movie/MovieDetails'; class MovieGenreRow extends Component { @@ -23,46 +23,46 @@ class MovieGenreRow extends Component { /** Make all API calls as soon as our MovieGenreRow component mounts. */ componentWillMount() { - this.getTrending(); - this.getTopRated(); - this.getComedyMovies(); - this.getActionMovies(); - this.getHorrorMovies(); - this.getNetflixMovies(); - this.getRomanceMovies(); - this.getDocumentaries(); - this.getAnimatedMovies(); + this.getTrending(); + this.getTopRated(); + this.getComedyMovies(); + this.getActionMovies(); + this.getHorrorMovies(); + this.getNetflixMovies(); + this.getRomanceMovies(); + this.getDocumentaries(); + this.getAnimatedMovies(); } - + /** Get the movie details for a single movie @param {object} movieObject - A single movie object */ getMovieDetails = (movieObject) => { console.log(movieObject); - this.setState({ toggleModal: true }); - this.setState({ movieOverview: movieObject }); - + this.setState({ toggleModal: true }); + this.setState({ movieOverview: movieObject }); + } closeModal = () => { - this.setState({toggleModal: false}) + this.setState({ toggleModal: false }) } /** Extract our movie data and pass it to our MovieGenre Component. */ getMovieRows = (res, url) => { - const results = res.data.results; - let movieRows = []; - + const results = res.data.results; + let movieRows = []; + results.forEach((movie) => { let movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.backdrop_path; if (url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { movieImageUrl = "https://image.tmdb.org/t/p/original/" + movie.poster_path; } - + if (movie.poster_path && movie.backdrop_path !== null) { - + const movieComponent = this.getMovieDetails(movie)} key={movie.id} @@ -72,21 +72,21 @@ class MovieGenreRow extends Component { movieRows.push(movieComponent); } }) - - return movieRows; - + + return movieRows; + } /** * Send request for movies that are popular right now */ getTrending = () => { - const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; - + const url = "/trending/all/week?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; + axios.get(url) .then(res => { const movieRows = this.getMovieRows(res, url); - + this.setState({ trendingMovieRow: movieRows }); }) .catch(error => { @@ -98,15 +98,15 @@ class MovieGenreRow extends Component { * Send request for movies that are top rated */ getTopRated = () => { - const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; + const url = "/movie/top_rated?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&language=en-US"; axios.get(url) .then(res => { const movieRows = this.getMovieRows(res, url); - this.setState({ topRatedRow: movieRows }); + this.setState({ topRatedRow: movieRows }); }).catch(error => { - console.log(error); + console.log(error); }) } @@ -118,12 +118,12 @@ class MovieGenreRow extends Component { axios.get(url) .then(res => { - const movieRows = this.getMovieRows(res, url); + const movieRows = this.getMovieRows(res, url); - this.setState({ netflixOriginalsRow: movieRows }); + this.setState({ netflixOriginalsRow: movieRows }); }) .catch(error => { - console.log(error); + console.log(error); }) } @@ -211,61 +211,61 @@ class MovieGenreRow extends Component { }) } - render() { + render() { - return ( -
-

NETFLIX ORIGINALS

-
- {this.state.netflixOriginalsRow} -
- -

Trending Now

-
- {this.state.trendingMovieRow} -
- -

Top Rated

-
- {this.state.topRatedRow} -
- -

Action Movies

-
- {this.state.actionMovieRow} -
- -

Comedy Movies

-
- {this.state.comedyMovieRow} -
- -

Horror Movies

-
- {this.state.horrorMovieRow} -
- -

Romance Movies

-
- {this.state.romanceMovieRow} -
- -

Animated Films

-
- {this.state.animatedMovieRow} -
- -

Documentaries

-
- {this.state.documentaryRow} -
- - - - + return ( +
+

NETFLIX ORIGINALS

+
+ {this.state.netflixOriginalsRow}
- ); - } + +

Trending Now

+
+ {this.state.trendingMovieRow} +
+ +

Top Rated

+
+ {this.state.topRatedRow} +
+ +

Action Movies

+
+ {this.state.actionMovieRow} +
+ +

Comedy Movies

+
+ {this.state.comedyMovieRow} +
+ +

Horror Movies

+
+ {this.state.horrorMovieRow} +
+ +

Romance Movies

+
+ {this.state.romanceMovieRow} +
+ +

Animated Films

+
+ {this.state.animatedMovieRow} +
+ +

Documentaries

+
+ {this.state.documentaryRow} +
+ + + + +
+ ); + } } export default MovieGenreRow; diff --git a/src/containers/MovieGenreRow/MovieGenre.js b/src/containers/MovieGenreRow/MovieGenre.js deleted file mode 100644 index 3e928a1..0000000 --- a/src/containers/MovieGenreRow/MovieGenre.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react'; - - -class MovieGenre extends Component { - - - render() { - let netflixUrl = false; - - if (this.props.url === "/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { - netflixUrl = true; - } - - return ( - -
- -
- - ); - } -} - -export default MovieGenre; \ No newline at end of file diff --git a/src/containers/MovieGenreRow/MovieGenreImage.js b/src/containers/MovieGenreRow/MovieGenreImage.js deleted file mode 100644 index 0ad8bd3..0000000 --- a/src/containers/MovieGenreRow/MovieGenreImage.js +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react'; - - -class MovieGenreImage extends Component { - - - render() { - let netflixUrl = false; - - if (this.props.url === "https://api.themoviedb.org/3/discover/tv?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0&with_networks=213") { - netflixUrl = true; - } - - return ( - -
- -
- - ); - } -} - -export default MovieGenreImage; \ No newline at end of file diff --git a/src/containers/Navbar/Navbar.js b/src/containers/Navbar.js similarity index 65% rename from src/containers/Navbar/Navbar.js rename to src/containers/Navbar.js index ef1f816..7086faf 100644 --- a/src/containers/Navbar/Navbar.js +++ b/src/containers/Navbar.js @@ -1,28 +1,28 @@ import React, { Component } from 'react'; -import NavigationItem from '../../components/NavigationItem/NavigationItem' -import SearchLogo from '../../static/images/search-icon.svg'; -import NetflixLogo from '../../static/images/Netflix_Logo_RGB.png'; -import BellLogo from '../../static/images/bell-logo.svg'; -import DropdownArrow from '../../static/images/drop-down-arrow.svg'; -import DropdownContent from "./DropdownContent"; +import NavigationItem from '../components/NavigationItem' +import SearchLogo from '../static/images/search-icon.svg'; +import NetflixLogo from '../static/images/Netflix_Logo_RGB.png'; +import BellLogo from '../static/images/bell-logo.svg'; +import DropdownArrow from '../static/images/drop-down-arrow.svg'; +import DropdownContent from "../components/DropdownContent"; class navigation extends Component { - state = { - scrolling: false - } + state = { + scrolling: false + } componentDidMount() { - window.addEventListener('scroll', this.handleScroll); + window.addEventListener('scroll', this.handleScroll); } componentWillUnmount() { - window.removeEventListener('scroll', this.handleScroll); + window.removeEventListener('scroll', this.handleScroll); } /** changes the scrolling state depending on the Y-position */ handleScroll = (event) => { - if (window.scrollY === 0 ) { + if (window.scrollY === 0) { this.setState({ scrolling: false }); } else if (window.scrollY > 50) { @@ -30,44 +30,45 @@ class navigation extends Component { } } - - render () { + render() { + const { scrolling } = this.state; + const { showMovies } = this.props; return ( -
+
KIDS
DVD
- + - - + + ) } -} +} export default navigation; \ No newline at end of file diff --git a/src/hoc/Aux/Aux.js b/src/hoc/Aux.js similarity index 100% rename from src/hoc/Aux/Aux.js rename to src/hoc/Aux.js diff --git a/src/index.html b/src/index.html index 2cb3d8b..0d117d9 100644 --- a/src/index.html +++ b/src/index.html @@ -13,13 +13,4 @@
- - - - - - - - - - + \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 11a785c..fc9ff91 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,11 +6,10 @@ const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { - entry: "./src/index.js", + entry: "./src/index.js", output: { filename: "bundle.js", }, - module: { rules: [ { @@ -26,7 +25,7 @@ module.exports = { use: { loader: 'svg-react-loader' } - + }, { test: /\.scss$/, @@ -37,7 +36,6 @@ module.exports = { publicPath: '../' } }, - // 'style-loader', 'css-loader', 'sass-loader' ] @@ -55,19 +53,22 @@ module.exports = { }, ], } - ] // end rules array + ] + }, + node: { + fs: "empty" }, plugins: [ new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }), - new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images'}]), + new CopyWebpackPlugin([{ from: 'src/static/images', to: 'static/images' }]), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "main.css" }), - new CleanWebpackPlugin(['dist']) + new CleanWebpackPlugin(['dist']), ] }; \ No newline at end of file