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

restructured folder project

Browse Source
This commit is contained in:
andres alcocer
2019-03-30 11:28:15 -04:00
parent cd816828ad
commit 8e22fc06d2
29 changed files with 413 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -4,6 +4,9 @@ node_modules
# Build files
dist/
# Environment varialbes
.env
# Logs
logs
*.log

199
package-lock.json generated
View File

@@ -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"
}

15
package.json
View File

@@ -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",

2
src/containers/Navbar/DropdownContent.js → src/components/DropdownContent.js
View File

@@ -28,8 +28,6 @@ const dropdownContent = () => (
</div>
</div>
</div>
);
export default dropdownContent;

0
src/components/Footer/Footer.js → src/components/Footer.js
View File

32
src/components/Header.js Normal file
View File

@@ -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 (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{props.movie.name}</h1>
<button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>
</header>
)
}

40
src/components/Header/Header.js
View File

@@ -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 (
<header style={backgroundStyle} className="header">
<div className="header__container">
<h1 className="header__container-heading">{this.props.movie.name}</h1>
<button onClick={() => alert("not a movie!")} className="header__container-btnPlay">
<PlayLogo className="header__container-btnMyList-play" />
Play
</button>
<button className="header__container-btnMyList">
<AddLogo className="header__container-btnMyList-add" />
My List
</button>
<p className="header__container-overview">{this.props.movie.overview}</p>
</div>
<div className="header--fadeBottom"></div>
</header>
)
}
}
export default Header;

37
src/components/ModalMovieDetails.js Normal file
View File

@@ -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 (
<Aux>
<div className="modal__container">
<h1 className="modal__title">
{props.movie.title || props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {props.movie.vote_average * 10}%{" "}
</span>
Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
{props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>
);
}

41
src/components/ModalMovieDetails/ModalMovieDetails.js
View File

@@ -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 <Aux>
<div className="modal__container">
<h1 className="modal__title">
{this.props.movie.title || this.props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "}
</span>
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
</p>
<p className="modal__episode">
{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 : ""}
</p>
<p className="modal__overview">{this.props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>;
}
}
export default ModalMovieDetails;

7
src/components/Movie/Movie.js
View File

@@ -1,11 +1,10 @@
import React from 'react';
const movieRow = (props) => (
<div className="movie">
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
<div onClick={props.movieDetails} className="movie__column-poster">
<img src={props.movieImage} alt="" className="movie__poster" />
</div>
</div>
);

36
src/components/Movie/MovieDetails.js Normal file
View File

@@ -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 (
<Aux>
<div className="modal__container">
<h1 className="modal__title">
{props.movie.title || props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {props.movie.vote_average * 10}%{" "}
</span>
Release date: {props.movie.release_date || props.movie.first_air_date} Runtime: {props.movie.runtime || props.movie.episode_run_time}m
</p>
<p className="modal__episode">
{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""}
{props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}
</p>
<p className="modal__overview">{props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>
);
}

41
src/components/Movie/MovieDetails/MovieDetails.js
View File

@@ -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 <Aux>
<div className="modal__container">
<h1 className="modal__title">
{this.props.movie.title || this.props.movie.name}
</h1>
<p className="modal__info">
<span className="modal__rating">
Rating: {this.props.movie.vote_average * 10}%{" "}
</span>
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
</p>
<p className="modal__episode">
{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 : ""}
</p>
<p className="modal__overview">{this.props.movie.overview}</p>
<button className="modal__btn modal__btn--red">
<PlayIcon className="modal__btn--icon" />
Play
</button>
<button className="modal__btn">
<AddIcon className="modal__btn--icon" />
My List
</button>
</div>
</Aux>;
}
}
export default MovieDetails;

15
src/components/MovieGenre.js Normal file
View File

@@ -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 (
<div onClick={props.movieDetailsModal}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
);
}

16
src/components/MovieGenreImage.js Normal file
View File

@@ -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 (
<div onClick={props.movieDetailsModal}
className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={props.posterUrl} className="movieShowcase__container--movie-image" />
</div>
);
}

4
src/components/NavigationItem/NavigationItem.js → src/components/NavigationItem.js
View File

@@ -2,10 +2,8 @@ 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>
to={props.link}>{props.children}</NavLink>
)
export default navigationItem;

9
src/components/UI/Backdrop.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
const backdrop = (props) => (
props.show ? <div
onClick={props.toggleBackdrop}
className="backdrop"></div> : null
);
export default backdrop;

10
src/components/UI/Backdrop/Backdrop.js
View File

@@ -1,10 +0,0 @@
import React from 'react';
const backdrop = (props) => (
props.show ? <div
onClick={props.toggleBackdrop}
className="backdrop"></div> : null
);
export default backdrop;

23
src/components/UI/Modal.js Normal file
View File

@@ -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 (
<Aux>
<Backdrop show={props.show} toggleBackdrop={props.modalClosed} />
<div
style={backgroundStyle}
className={(props.show ? "modal show" : "modal hide")}>
{props.children}
</div>
</Aux>
)
}

27
src/components/UI/Modal/Modal.js
View File

@@ -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 (
<Aux>
<Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
<div
style={backgroundStyle}
className={(this.props.show ? "modal show" : "modal hide")}>
{this.props.children}
</div>
</Aux>
);
}
}
export default Modal;

6
src/containers/App.js
View File

@@ -1,16 +1,14 @@
import React, { Component } from 'react';
import Layout from './Layout/Layout';
import Layout from './Layout';
class App extends Component {
render() {
return (
<Layout/>
<Layout />
)
}
}
export default App;

24
src/containers/Layout/Layout.js → src/containers/Layout.js
View File

@@ -1,11 +1,11 @@
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 = <Movie
movieDetails={() => 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);
@@ -112,12 +112,12 @@ class Layout extends Component {
<Navbar showMovies={this.onSearchHandler} />
{
this.state.toggleMovieList ? <MainContent /> : <div
className="search-container">{this.state.MovieList}</div>
className="search-container">{this.state.MovieList}</div>
}
<Modal show={this.state.toggleModal}
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
modalClosed={this.closeModal}
movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>

6
src/containers/Layout/MainContent/MainContent.js → src/containers/MainContent.js
View File

@@ -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";

118
src/containers/MovieGenreRow/MovieGenreRow.js → src/containers/MovieGenreRow.js
View File

@@ -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 {
@@ -46,7 +46,7 @@ class MovieGenreRow extends Component {
}
closeModal = () => {
this.setState({toggleModal: false})
this.setState({ toggleModal: false })
}
@@ -73,7 +73,7 @@ class MovieGenreRow extends Component {
}
})
return movieRows;
return movieRows;
}
@@ -211,61 +211,61 @@ class MovieGenreRow extends Component {
})
}
render() {
render() {
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}
</div>
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{this.state.trendingMovieRow}
</div>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{this.state.topRatedRow}
</div>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{this.state.actionMovieRow}
</div>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{this.state.comedyMovieRow}
</div>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{this.state.horrorMovieRow}
</div>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{this.state.romanceMovieRow}
</div>
<h1 className="movieShowcase__heading">Animated Films</h1>
<div className="movieShowcase__container">
{this.state.animatedMovieRow}
</div>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview}/>
</Modal>
return (
<div className="movieShowcase">
<h1 className="movieShowcase__heading">NETFLIX ORIGINALS</h1>
<div className="movieShowcase__container">
{this.state.netflixOriginalsRow}
</div>
);
}
<h1 className="movieShowcase__heading">Trending Now</h1>
<div className="movieShowcase__container">
{this.state.trendingMovieRow}
</div>
<h1 className="movieShowcase__heading">Top Rated</h1>
<div className="movieShowcase__container">
{this.state.topRatedRow}
</div>
<h1 className="movieShowcase__heading">Action Movies</h1>
<div className="movieShowcase__container">
{this.state.actionMovieRow}
</div>
<h1 className="movieShowcase__heading">Comedy Movies</h1>
<div className="movieShowcase__container">
{this.state.comedyMovieRow}
</div>
<h1 className="movieShowcase__heading">Horror Movies</h1>
<div className="movieShowcase__container">
{this.state.horrorMovieRow}
</div>
<h1 className="movieShowcase__heading">Romance Movies</h1>
<div className="movieShowcase__container">
{this.state.romanceMovieRow}
</div>
<h1 className="movieShowcase__heading">Animated Films</h1>
<div className="movieShowcase__container">
{this.state.animatedMovieRow}
</div>
<h1 className="movieShowcase__heading">Documentaries</h1>
<div className="movieShowcase__container">
{this.state.documentaryRow}
</div>
<Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieOverview}>
<MovieDetails movie={this.state.movieOverview} />
</Modal>
</div>
);
}
}
export default MovieGenreRow;

25
src/containers/MovieGenreRow/MovieGenre.js
View File

@@ -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 (
<div onClick={this.props.movieDetailsModal}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div>
);
}
}
export default MovieGenre;

25
src/containers/MovieGenreRow/MovieGenreImage.js
View File

@@ -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 (
<div onClick={this.props.movieDetailsModal}
className={ "movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
<img src={this.props.posterUrl} className="movieShowcase__container--movie-image"/>
</div>
);
}
}
export default MovieGenreImage;

33
src/containers/Navbar/Navbar.js → src/containers/Navbar.js
View File

@@ -1,16 +1,16 @@
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);
@@ -22,7 +22,7 @@ class navigation extends Component {
/** 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) {
@@ -31,13 +31,14 @@ class navigation extends Component {
}
render () {
render() {
const { scrolling } = this.state;
const { showMovies } = this.props;
return (
<nav className={"navigation " + (this.state.scrolling ? "black" : "")} >
<nav className={"navigation " + (scrolling ? "black" : "")} >
<ul className="navigation__container">
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt=""/></NavigationItem>
<NavigationItem link="/" exact><img className="navigation__container--logo" src={NetflixLogo} alt="" /></NavigationItem>
<DropdownArrow className="navigation__container--downArrow-2"></DropdownArrow>
<div className="navigation__container-link pseudo-link">Home</div>
<div className="navigation__container-link pseudo-link">TV Shows</div>
@@ -50,7 +51,7 @@ class navigation extends Component {
<SearchLogo className="logo" />
<input
onChange={this.props.showMovies}
onChange={showMovies}
className="navigation__container--left__input"
type="text"
placeholder="Title, genres, people" />
@@ -62,7 +63,7 @@ class navigation extends Component {
<BellLogo className="navigation__container--bellLogo" />
<DropdownContent />
<DropdownArrow className="navigation__container--downArrow"/>
<DropdownArrow className="navigation__container--downArrow" />
</ul>
</nav>

0
src/hoc/Aux/Aux.js → src/hoc/Aux.js
View File

9
src/index.html
View File

@@ -14,12 +14,3 @@
</body>
</html>

11
webpack.config.js
View File

@@ -10,7 +10,6 @@ module.exports = {
output: {
filename: "bundle.js",
},
module: {
rules: [
{
@@ -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']),
]
};