diff --git a/index.html b/index.html index 5956140..ec790e0 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,19 @@ - - - + + + + + + Document - Hello World - - -
+ + + + +
+ - + + + diff --git a/oops.gif b/oops.gif new file mode 100644 index 0000000..81fef9f Binary files /dev/null and b/oops.gif differ diff --git a/package-lock.json b/package-lock.json index 8ca987c..74429a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -349,14 +349,12 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", - "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=", - "dev": true + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" }, "anymatch": { "version": "2.0.0", @@ -549,7 +547,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=", - "dev": true, "requires": { "chalk": "^1.1.3", "esutils": "^2.0.2", @@ -559,8 +556,7 @@ "js-tokens": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz", - "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=", - "dev": true + "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=" } } }, @@ -619,7 +615,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz", "integrity": "sha1-FMGeXxQte0fxmlJDHlKxzLxAozA=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-traverse": "^6.24.1", @@ -630,7 +625,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz", "integrity": "sha1-zORReto1b0IgvK6KAsKzRvmlZmQ=", - "dev": true, "requires": { "babel-helper-explode-assignable-expression": "^6.24.1", "babel-runtime": "^6.22.0", @@ -676,7 +670,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz", "integrity": "sha1-8luCz33BBDPFX3BZLVdGQArCLKo=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-traverse": "^6.24.1", @@ -687,7 +680,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz", "integrity": "sha1-fcKjkQ3uAHBW4eMdZAztPVTqqes=", - "dev": true, "requires": { "babel-helper-bindify-decorators": "^6.24.1", "babel-runtime": "^6.22.0", @@ -699,7 +691,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz", "integrity": "sha1-00dbjAPtmCQqJbSDUasYOZ01gKk=", - "dev": true, "requires": { "babel-helper-get-function-arity": "^6.24.1", "babel-runtime": "^6.22.0", @@ -712,7 +703,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz", "integrity": "sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=", - "dev": true, "requires": { "babel-runtime": "^6.22.0", "babel-types": "^6.24.1" @@ -753,7 +743,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz", "integrity": "sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=", - "dev": true, "requires": { "babel-helper-function-name": "^6.24.1", "babel-runtime": "^6.22.0", @@ -801,7 +790,6 @@ "version": "6.23.0", "resolved": "https://registry.npmjs.org/babel-messages/-/babel-messages-6.23.0.tgz", "integrity": "sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=", - "dev": true, "requires": { "babel-runtime": "^6.22.0" } @@ -818,14 +806,12 @@ "babel-plugin-syntax-async-functions": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz", - "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", - "dev": true + "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=" }, "babel-plugin-syntax-async-generators": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz", - "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=", - "dev": true + "integrity": "sha1-a8lj67FuzLrmuStZbrfzXDQqi5o=" }, "babel-plugin-syntax-class-constructor-call": { "version": "6.18.0", @@ -836,26 +822,22 @@ "babel-plugin-syntax-class-properties": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz", - "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=", - "dev": true + "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=" }, "babel-plugin-syntax-decorators": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", - "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=", - "dev": true + "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=" }, "babel-plugin-syntax-dynamic-import": { "version": "6.18.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", - "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=", - "dev": true + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" }, "babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", - "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=", - "dev": true + "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=" }, "babel-plugin-syntax-export-extensions": { "version": "6.13.0", @@ -878,20 +860,17 @@ "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", - "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=", - "dev": true + "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=" }, "babel-plugin-syntax-trailing-function-commas": { "version": "6.22.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz", - "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=", - "dev": true + "integrity": "sha1-ugNgk3+NBuQBgKQ/4NVhb/9TLPM=" }, "babel-plugin-transform-async-generator-functions": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz", "integrity": "sha1-8FiQAUX9PpkHpt3yjaWfIVJYpds=", - "dev": true, "requires": { "babel-helper-remap-async-to-generator": "^6.24.1", "babel-plugin-syntax-async-generators": "^6.5.0", @@ -902,7 +881,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz", "integrity": "sha1-ZTbjeK/2yx1VF6wOQOs+n8jQh2E=", - "dev": true, "requires": { "babel-helper-remap-async-to-generator": "^6.24.1", "babel-plugin-syntax-async-functions": "^6.8.0", @@ -924,7 +902,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz", "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=", - "dev": true, "requires": { "babel-helper-function-name": "^6.24.1", "babel-plugin-syntax-class-properties": "^6.8.0", @@ -936,7 +913,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz", "integrity": "sha1-eIAT2PjGtSIr33s0Q5Df13Vp4k0=", - "dev": true, "requires": { "babel-helper-explode-class": "^6.24.1", "babel-plugin-syntax-decorators": "^6.13.0", @@ -1183,7 +1159,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz", "integrity": "sha1-KrDJx/MJj6SJB3cruBP+QejeOg4=", - "dev": true, "requires": { "babel-helper-builder-binary-assignment-operator-visitor": "^6.24.1", "babel-plugin-syntax-exponentiation-operator": "^6.8.0", @@ -1214,7 +1189,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz", "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=", - "dev": true, "requires": { "babel-plugin-syntax-object-rest-spread": "^6.8.0", "babel-runtime": "^6.26.0" @@ -1387,7 +1361,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz", "integrity": "sha1-2eKWD7PXEYfw5k7sYrwHdnIZvcE=", - "dev": true, "requires": { "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-transform-class-properties": "^6.24.1", @@ -1399,7 +1372,6 @@ "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz", "integrity": "sha1-g2raCp56f6N8sTj7kyb4eTSkg5U=", - "dev": true, "requires": { "babel-plugin-syntax-trailing-function-commas": "^6.22.0", "babel-plugin-transform-async-generator-functions": "^6.24.1", @@ -1435,7 +1407,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -1444,8 +1415,7 @@ "core-js": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", - "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==", - "dev": true + "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==" } } }, @@ -1453,7 +1423,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-template/-/babel-template-6.26.0.tgz", "integrity": "sha1-3gPi0WOWsGn0bdn/+FIfsaDjXgI=", - "dev": true, "requires": { "babel-runtime": "^6.26.0", "babel-traverse": "^6.26.0", @@ -1466,7 +1435,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-traverse/-/babel-traverse-6.26.0.tgz", "integrity": "sha1-RqnL1+3MYsjlwGTi0tjQ9ANXZu4=", - "dev": true, "requires": { "babel-code-frame": "^6.26.0", "babel-messages": "^6.23.0", @@ -1483,7 +1451,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-types/-/babel-types-6.26.0.tgz", "integrity": "sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=", - "dev": true, "requires": { "babel-runtime": "^6.26.0", "esutils": "^2.0.2", @@ -1494,8 +1461,7 @@ "babylon": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", - "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==", - "dev": true + "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, "balanced-match": { "version": "1.0.0", @@ -1831,7 +1797,6 @@ "version": "1.1.3", "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", - "dev": true, "requires": { "ansi-styles": "^2.2.1", "escape-string-regexp": "^1.0.2", @@ -1915,6 +1880,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "cli-cursor": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz", @@ -2313,7 +2283,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" } @@ -2600,8 +2569,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "eslint-scope": { "version": "3.7.3", @@ -2637,8 +2605,7 @@ "esutils": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz", - "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=", - "dev": true + "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=" }, "events": { "version": "1.1.1", @@ -3808,8 +3775,7 @@ "globals": { "version": "9.18.0", "resolved": "https://registry.npmjs.org/globals/-/globals-9.18.0.tgz", - "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==", - "dev": true + "integrity": "sha512-S0nG3CLEQiY/ILxqtztTWH/3iRRdyBLw6KMDxnKMchrtbj2OFmehVh0WUCfW3DUrIgx/qFrJPICrq4Z4sTR9UQ==" }, "globby": { "version": "6.1.0", @@ -3915,7 +3881,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4208,7 +4173,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" } @@ -4933,8 +4897,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.debounce": { "version": "4.0.8", @@ -5345,8 +5308,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=" }, "multimatch": { "version": "2.1.0", @@ -6253,8 +6215,7 @@ "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" }, "regenerator-transform": { "version": "0.10.1", @@ -6992,7 +6953,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7033,8 +6993,7 @@ "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", - "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=", - "dev": true + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" }, "symbol-observable": { "version": "1.0.1", @@ -7127,8 +7086,7 @@ "to-fast-properties": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-1.0.3.tgz", - "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=", - "dev": true + "integrity": "sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=" }, "to-object-path": { "version": "0.3.0", diff --git a/package.json b/package.json index 26c045b..b746b70 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,14 @@ ] }, "dependencies": { + "babel-preset-stage-2": "^6.24.1", + "classnames": "^2.2.6", "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies": { "babel-loader": "^7.1.3", + "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "babel-preset-react": "^6.24.1", "webpack": "4.12.0", diff --git a/placeholder.jpg b/placeholder.jpg new file mode 100644 index 0000000..766b1c6 Binary files /dev/null and b/placeholder.jpg differ diff --git a/src/components/App.js b/src/components/App.js index 9520f77..f3b60ed 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,17 +1,112 @@ -import React from 'react'; +import React from "react"; +import Films from "./Films"; +import Search from "./Search"; class App extends React.Component { - constructor(){ + constructor() { super(); + + this.state = { films: [], pageNum: 1, currentSearchFlim: "love", unFound: {gif: '', h6: ''}, hideButtons: true}; + this.handleNext = this.handleNext.bind(this); + this.handlePrevious = this.handlePrevious.bind(this); + this.fetchIMDB = this.fetchIMDB.bind(this); + // this.filmSearch = this.filmSearch.bind(this); + // this.IMDBData= this.IMDBData.bind(this); + this.notFound = this.notFound.bind(this); + // this.searchText = this.searchText.bind(this); + this.receiveSearch = this.receiveSearch.bind(this); + } + + componentDidMount() { + this.receiveSearch(this.state.currentSearchFlim); + + } + + notFound(){ + this.setState({unFound:{gif:'/oops.gif', h6:"Terribly sorry, we couldn't find that"}}); } - render(){ + handleNext() { + + // this.setState(prevState =>Object.assign({}, prevState, { pageNum: prevState.pageNum + 1 })) + // this.setState(prevState => ({...prevState, pageNum: prevState.pageNum + 1})); + // this.setState({pageNum: this.state.pageNum + 1}) + // this.setState( prevState => ({pageNum: prevState.pageNum + 1})) + // this.receiveSearch(this.state.currentSearchFlim) + this.setState({pageNum:this.state.pageNum + 1}, () => this.receiveSearch(this.state.currentSearchFlim)) + + } + + handlePrevious() { + // event.preventDefault(); + // this.setState({pageNum: this.state.pageNum - 1}) + // this.receiveSearch(this.state.currentSearchFlim) + this.setState({pageNum:this.state.pageNum - 1}, () => this.receiveSearch(this.state.currentSearchFlim)) + + } + + receiveSearch(filmSearchQuery) { + this.setState( prevState => ({currentSearchFlim: filmSearchQuery})) + // this.setState(prevState => Object.assign({}, prevState, { currentSearchFlim: filmSearchQuery})) + const searchURL = `https://www.omdbapi.com/?s=${filmSearchQuery}&page=${this.state.pageNum}&apikey=73071eff`; + this.fetchIMDB(searchURL); + + } + + // Initial Search Fetch + fetchIMDB(searchURL) { + fetch(searchURL) + .then( + response => (response.ok ? response.json() : Promise.reject(response)) + ) + .then(films => { + if (films.Response === "False") { + this.notFound(); + // alert("WHOOPS!"); + this.setState({ films:[]}); + // this.setState({unfound:{gif: '', h6: ''}}) + } else { + console.log(films); + this.setState({ films: films.Search, unfound: {gif: '', h6: ''}}); //unforund reset not working + // this.setState({pageNum:1}); //pagenum reset not working + } + }) + // .catch(error => console.log("catch error", error)); + } + + + + // hideButtonsFunction(){ + // this.setState({showSlider: false}) + + + + render() { + + + // const buttonsHider = cx('lower__buttons', {'lower__buttons__hidden': this.state.hidebuttons}) + return (
- React cinema app + + + + + +
+ {this.state.unFound.h6} + +
+ +
+
+ + +
+ ˄
- ) + ); } } -export default App; +export default App; \ No newline at end of file diff --git a/src/components/Film.js b/src/components/Film.js new file mode 100644 index 0000000..6f78a91 --- /dev/null +++ b/src/components/Film.js @@ -0,0 +1,164 @@ +import React from 'react'; +import cx from 'classnames'; + + +class Film extends React.Component{ + constructor(){ + super(); + this.state={moreFilmInfo: [], showSlider: false, trailerYoutubeInfo: [], test: [], placeholder: '/placeholder.jpg', failed: true,}; + this.fetchMoreInfo = this.fetchMoreInfo.bind(this); + this.closeSliderFunction = this.closeSliderFunction.bind(this); + // this.trailerVideo = this.trailerVideo.bind(this); + + // this.fallback = () => { + // if (this.props.fallbackSrc) { + // this.setState({ failed: true }); + // } + // }; + + } + + + + //async fetch + fetchMoreInfo(){ + Promise.all([ + fetch(`https://www.omdbapi.com/?i=${this.props.film.imdbID}&apikey=73071eff`), + // fetch(`https://api.themoviedb.org/3/movie/tt0112864/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US`), + fetch(`https://api.themoviedb.org/3/movie/${this.props.film.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US`), + fetch(`https://www.omdbapi.com/?i=${this.props.film.imdbID}&apikey=73071eff`) + ]) + .then(([res1, res2, res3]) => Promise.all([res1.json(), res2.json(), res3.json()])) + .then(([moreFilmInfo, trailerYoutubeInfo, test]) => this.setState({ + moreFilmInfo: moreFilmInfo, + trailerYoutubeInfo: `http://www.youtube.com/embed/${trailerYoutubeInfo.results[0].key}?modestbranding=1&rel=0&iv_load_policy=3&theme=light`, + test: test, + showSlider: true + }) + + ); + + } + + // //

URL:https://www.youtube.com/watch?v=${this.state.trailerYoutubeInfo}

+ +// Multiple fetches -> + + // fetchMoreInfo(){ //default for now + // const movieURL = `https://www.omdbapi.com/?i=${this.props.film.imdbID}&apikey=73071eff`; + // fetch(movieURL) + // .then(function(response) { + + // return response.json(); + // }) + // .then(moreFilmInfo=> { + // this.setState({moreFilmInfo: moreFilmInfo, showSlider: true}) + // // console.log(find); + // } + // ); + // // .catch(function(error) { + // // displayErrorToUser3(`${error} ahhhh server problem`); + // // }); + // } + + // trailerVideo(){ //default for now + // const ytURL = `https://api.themoviedb.org/3/movie/${this.props.film.imdbID}/videos?api_key=8aed3c92a5c6ef5e792ffaf51ac22616&language=en-US`; + // fetch(ytURL) + // .then(function(response) { + + // return response.json(); + // }) + // .then(trailerYoutubeInfo=> { + // this.setState({trailerYoutubeInfo: trailerYoutubeInfo}) + // // console.log(find); + // } + // ); + // // .catch(function(error) { + // // displayErrorToUser3(`${error} ahhhh server problem`); + // // }); + // } + + //end of fetches + + closeSliderFunction(){ + this.setState({showSlider: false}) + + + // function to pause trailer video on close + var iframe = element.querySelector( 'iframe'); + var video = element.querySelector( 'video' ); + console.log(iframe); + if ( iframe ) { + var iframeSrc = iframe.src; + iframe.src = iframeSrc; + } + if ( video ) { + video.pause(); + } + + } + + render() { + + // if (this.state.failed) { + // return ; + // } else { + // return ; + // } + + // const url = 'https://media.giphy.com/media/l2JJDrvnFUEboRgSQ/giphy.gif'; + // const brokenUrl = url.replace('gif','glif'); + // const fallbackUrl = 'https://media.giphy.com/media/uprwwjptZW4Za/giphy.gif'; + + + + //Slider Toggle + const sliderView = cx('hidden', {'moreInfo': this.state.showSlider}) + // const sliderClose = cx('moreinfo', {'hidden': this.state.showSlider}) + + return ( + +
+
+
+

{this.props.film.Title}

+

{this.props.film.Year}

+
+ +
+ + {/*

Broken image:

+ +

Good image:

+ */} + + + {/* */} + {/* this.img = img} onError={ () => this.img.src = '/placeholder.jpg'/> */} + +
+
+

X

+

{this.state.moreFilmInfo.Title}

+
+

{this.state.moreFilmInfo.Genre}

+

{this.state.moreFilmInfo.Plot}

+
+ {/*

{this.state.test.Plot}

*/} + {/* */} + + {/* */} +

{this.state.trailerYoutubeInfo.id}

+
+
+
+ + ); + // console.log(this.state.moreFilmInfo.Plot); + // console.log(this.state.trailerYoutubeInfo); + // console.log(this.state.test); + } + +} + +export default Film; \ No newline at end of file diff --git a/src/components/Films.js b/src/components/Films.js new file mode 100644 index 0000000..f05fd45 --- /dev/null +++ b/src/components/Films.js @@ -0,0 +1,28 @@ +import React from 'react'; +import Film from './Film'; + + + +class Films extends React.Component { + constructor(){ + super(); + + } + + + render(){ + console.log(this.props.films) + return ( +
+ {this.props.films.map((film, index) => { + return ; + })} + +
+ ) + } +} + + + +export default Films; \ No newline at end of file diff --git a/src/components/Moreinfo.js b/src/components/Moreinfo.js new file mode 100644 index 0000000..d7c342f --- /dev/null +++ b/src/components/Moreinfo.js @@ -0,0 +1,22 @@ +import React from 'react'; + +class MoreInfo extends React.Component{ + constructor(){ + super(); + } + + + render(){ + + return ( +
+

{this.props.allInfo.Title}

+ +
+ ) + } +} + + + +export default MoreInfo; \ No newline at end of file diff --git a/src/components/Search.js b/src/components/Search.js new file mode 100644 index 0000000..134b767 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,37 @@ +import React from 'react'; + +class Search extends React.Component { + constructor(){ + super(); + this.state={textValue:''}; + this.handleChange = this.handleChange.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleChange(event){ + this.setState({textValue: event.target.value}); + } + + handleSubmit(event){ + event.preventDefault(); + this.props.receiveSearch(this.state.textValue); + } + + render(){ + return ( +
+

Quelle Films

 + + {/*

Quelle Films

*/} + +
+ ) + } +} + + + +export default Search; \ No newline at end of file diff --git a/style.css b/style.css index e69de29..f5b4b2b 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,341 @@ +*{ + box-sizing: border-box; + margin:0; + padding:0; + /* background-color: black; + color: white; */ + background-color: white; + color: black; + scroll-behavior: smooth; + font-family: 'Archivo Black', sans-serif; + + } + + a{ + + + + } + + body{ + display:flex; + justify-content: center; + /* max-width:1400px; */ + + + /* background-color: beige; */ + } + + a:link, a:visited, a:hover a:active { + text-decoration: none; +} + + + h1 { + display:flex; + justify-content: center; + justify-content: space-around; + margin-bottom: 10px; + margin-top:10px; + background-color:light-grey; + + } + + h1 a:hover { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ff9800' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E"); + background-position: 0 100%; + background-size: auto 6px; + background-repeat: repeat-x; + text-decoration: none; + } + + h2{ + font-size: 0.8em; + /* margin-bottom: 1em; */ + /* margin-left: 10px; + margin-bottom: 16px; */ + } + + h3{ + font-size: 0.8em; + } + + .search{ + background-color: light-grey; + } + +.search__wrapper { + display:flex; + justify-content: center; + background-color: light-grey; + +} + +.search__input{ + padding:8px 15px; + background:rgba(50, 50, 50, 0.2); + border:0px solid #dbdbdb; + border-radius: 10px 0px 0px 10px; + -moz-border-radius: 10px 0px 0px 10px; + -webkit-border-radius: 10px 0px 0px 10px; + font-size: 10px; +} + +.search__btn { + position:relative; + padding:8px 11px; + left:0px; + border:2px solid #207cca; + background-color:#207cca; + color:#fafafa; + border-radius: 0px 10px 10px 0px; + -moz-border-radius: 0px 10px 10px 0px; + -webkit-border-radius: 0px 10px 10px 0px; +} + +.search__btn:hover { + background-color:#fafafa; + color:#5c89b1; +} + +.film_results{ + + margin: 40px; +} + +.film__titles{ + width: 220px; +margin-bottom:20px; +height: 60px; +} + + .films { + display:flex; + flex-wrap: wrap; + justify-content: center; + + } + + .film { + + } + + .film img { + cursor:pointer; + height: 360px; + width:230px; + /* width: 100%; */ + border-radius: 15px 15px 15px 15px; + -moz-border-radius: 15px 15px 15px 15px; + -webkit-border-radius: 15px 15px 15px 15px; + + /* border: 0px solid #000000; + -webkit-box-shadow: 10px 10px 46px -1px rgb(255, 255, 255); +-moz-box-shadow: 10px 10px 46px -1px rgb(255, 255, 255); +box-shadow: 10px 10px 46px -1px rgb(255, 255, 255); */ + + + border: 0px solid #000000; + -webkit-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +-moz-box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +box-shadow: 10px 10px 46px -1px rgba(0,0,0,0.5); +} + +/* .film img:hover{ + background-color:#000; + opacity:0.7; + +} */ + +.film img:hover { + /* animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; */ + background-color:#000; + opacity:0.7; + animation: bounce 1s; +} + +@keyframes bounce { + 0%, 20%, 60%, 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + + 40% { + -webkit-transform: translateY(-20px); + transform: translateY(-20px); + } + + 80% { + -webkit-transform: translateY(-10px); + transform: translateY(-10px); + } +} + +.trailer{ + width:100vw; + height: 56.25vw; + opacity: 1; + z-index: 2; + background-color: #000; +} + +.more__info__text{ +font-size:10px; +margin-bottom: 30px; +} + +.more__info__title{ + margin-bottom: 10px; + +} + +.cry { + width: 100%; +} + +.cry img{ + padding-bottom;20px; + + +} +.oops { + padding-top: 20px; + /* padding-bottom: 20px; */ + width: 100%; + position: center; + text-align: center; + /* display:flex; */ + /* justify-content: center; */ + + + +} + +h6{ + size: 0.5em; +} + + + .hidden{ + position: fixed; + bottom: -100%; + left: 0px; + width: 100vw; + height: 100vh; + background-color: white; + transition:bottom 0.5s; + margin-right:0px; + opacity: 0.9; + z-index: 1; + animation: bounce 1s; + + + + } + .closer{ + + + text-align:right; + margin: 25px; + } + + .moreInfo{ +bottom: 0; +animation: bounce 1s; + } + + + .lower__button__1 { + position:relative; + padding:8px 11px; + left:0px; + border:2px solid #207cca; + background-color:#207cca; + color:#fafafa; + border-radius: 0px 10px 10px 0px; + -moz-border-radius: 0px 10px 10px 0px; + -webkit-border-radius: 0px 10px 10px 0px; + } + + .lower__button__1:hover { + background-color:#fafafa; + color:#5c89b1; + } + + .lower__button__2 { + position:relative; + padding:8px 11px; + left:0px; + border:2px solid #207cca; + background-color:#207cca; + color:#fafafa; + border-radius: 10px 0px 0px 10px; + -moz-border-radius: 10px 0px 0px 10px; + -webkit-border-radius: 10px 0px 0px 10px; + } + + .lower__button__2:hover { + background-color:#fafafa; + color:#5c89b1; + } + + + .lower__buttons__wrapper{ + display:flex; + justify-content: center; + + } + + .lower__buttons__wrapper__hidden{ + display:none; + } + + .uparrow { + /* position: fixed; */ + position: -webkit-sticky; /* Safari */ + position: sticky; + bottom: 0; + width: 2em; + height: 2em; + display:flex; + justify-content: flex-end; + /* padding-left: 8%; + padding-bottom: 5%; */ + /* transition:bottom 0.5s; */ + font-weight:bold; + padding:8px; + left:0px; + border:2px solid #207cca; + background-color:#207cca; + color:#fafafa; + border-radius: 5px 5px 5px 5px; + -moz-border-radius: 5px 5px 5px 5px; + -webkit-border-radius: 5px 5px 5px 5px; + + } + + /* Large devices (desktops, 960px and up) */ +@media (min-width: 960px) { + + + .trailer{ + width:80vw; + height: 41.25vw; + margin-left: 10vw; + margin-right: 10vw; + + } + + .more__info__text{ + margin-left: 10vw; + margin-right: 10vw; + } +.more__info__title{ + margin-left: 10vw; + margin-right: 10vw; +} + +} diff --git a/webpack.config.js b/webpack.config.js index 9355dc3..de3fe9e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,10 +10,27 @@ module.exports = { module: { rules: [ { - test: /\.js$/, - exclude: /(node_modules)/, - loader: require.resolve('babel-loader') - } - ] - } -}; +// test: /\.js$/, +// exclude: /(node_modules)/, +// loader: require.resolve('babel-loader') +// } +// ] +// } +// }; + + + + test: /\.jsx?$/, + exclude: /node_modules/, + loader: 'babel-loader', + options: { + presets: ['env'], + plugins: ['babel-plugin-transform-object-rest-spread'] // added + } + // query: { + // presets:[ 'es2015', 'react', 'stage-2' ] + // } + } + ] +} +} \ No newline at end of file