diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..7a9dfa0 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 54ef094..dedc0ec 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,26 @@ -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). - -## Available Scripts - -In the project directory, you can run: - -### `npm start` - -Runs the app in the development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. - -The page will reload if you make edits.
-You will also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.
-It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.
-Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting - -### Analyzing the Bundle Size - -This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size - -### Making a Progressive Web App - -This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app - -### Advanced Configuration - -This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration - -### Deployment - -This section has moved here: https://facebook.github.io/create-react-app/docs/deployment - -### `npm run build` fails to minify - -This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify +

Projeto Elo4

+ +[Elo4 - Clique aqui para visualizar!](http://honorable-mice.surge.sh/) + + +## O que funciona: +* Página Home com Carrosel e Quem somos; +* Header com botões; +* Renderização das páginas ao clicar nos botões; +* Renderização das página ao Home ao clicar no Logo; +* Página para preenchimento de formulário para anúncio de produtos e gerenciamento dos produtos já cadastrados; +* Página com os produtos que estão sendo vendidos. +* Filtragem por: + * Valor mínimo; + * Valor máximo; + * Nome do produto; +* Ordenação por: + * Nome; + * Preço; +* Footer. + + +## Bibliotecas utilizadas no projeto: +* Material UI; +* React Bootstrap; +* styled-components. diff --git a/package-lock.json b/package-lock.json index 5176811..049dcba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1201,6 +1201,11 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@emotion/hash": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", + "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" + }, "@emotion/is-prop-valid": { "version": "0.8.8", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", @@ -1430,6 +1435,82 @@ "@types/yargs": "^13.0.0" } }, + "@material-ui/core": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.11.2.tgz", + "integrity": "sha512-/D1+AQQeYX/WhT/FUk78UCRj8ch/RCglsQLYujYTIqPSJlwZHKcvHidNeVhODXeApojeXjkl0tWdk5C9ofwOkQ==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/styles": "^4.11.2", + "@material-ui/system": "^4.11.2", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "@types/react-transition-group": "^4.2.0", + "clsx": "^1.0.4", + "hoist-non-react-statics": "^3.3.2", + "popper.js": "1.16.1-lts", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0", + "react-transition-group": "^4.4.0" + } + }, + "@material-ui/icons": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz", + "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==", + "requires": { + "@babel/runtime": "^7.4.4" + } + }, + "@material-ui/styles": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.2.tgz", + "integrity": "sha512-xbItf8zkfD3FuGoD9f2vlcyPf9jTEtj9YTJoNNV+NMWaSAHXgrW6geqRoo/IwBuMjqpwqsZhct13e2nUyU9Ljw==", + "requires": { + "@babel/runtime": "^7.4.4", + "@emotion/hash": "^0.8.0", + "@material-ui/types": "^5.1.0", + "@material-ui/utils": "^4.11.2", + "clsx": "^1.0.4", + "csstype": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "jss": "^10.0.3", + "jss-plugin-camel-case": "^10.0.3", + "jss-plugin-default-unit": "^10.0.3", + "jss-plugin-global": "^10.0.3", + "jss-plugin-nested": "^10.0.3", + "jss-plugin-props-sort": "^10.0.3", + "jss-plugin-rule-value-function": "^10.0.3", + "jss-plugin-vendor-prefixer": "^10.0.3", + "prop-types": "^15.7.2" + } + }, + "@material-ui/system": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.11.2.tgz", + "integrity": "sha512-BELFJEel5E+5DMiZb6XXT3peWRn6UixRvBtKwSxqntmD0+zwbbfCij6jtGwwdJhN1qX/aXrKu10zX31GBaeR7A==", + "requires": { + "@babel/runtime": "^7.4.4", + "@material-ui/utils": "^4.11.2", + "csstype": "^2.5.2", + "prop-types": "^15.7.2" + } + }, + "@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==" + }, + "@material-ui/utils": { + "version": "4.11.2", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz", + "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==", + "requires": { + "@babel/runtime": "^7.4.4", + "prop-types": "^15.7.2", + "react-is": "^16.8.0 || ^17.0.0" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -1444,6 +1525,25 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, + "@popperjs/core": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz", + "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==" + }, + "@restart/context": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz", + "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==" + }, + "@restart/hooks": { + "version": "0.3.26", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz", + "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==", + "requires": { + "lodash": "^4.17.20", + "lodash-es": "^4.17.20" + } + }, "@sheerun/mutationobserver-shim": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz", @@ -1721,6 +1821,11 @@ "@babel/types": "^7.3.0" } }, + "@types/classnames": { + "version": "2.2.11", + "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz", + "integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==" + }, "@types/color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz", @@ -1740,6 +1845,11 @@ "@types/node": "*" } }, + "@types/invariant": { + "version": "2.2.34", + "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz", + "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -1816,6 +1926,14 @@ "@types/react": "*" } }, + "@types/react-transition-group": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", + "integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", + "requires": { + "@types/react": "*" + } + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -1920,6 +2038,11 @@ } } }, + "@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=" + }, "@types/yargs": { "version": "13.0.10", "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-13.0.10.tgz", @@ -2753,9 +2876,9 @@ "integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA==" }, "babel-plugin-styled-components": { - "version": "1.11.1", - "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz", - "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz", + "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==", "requires": { "@babel/helper-annotate-as-pure": "^7.0.0", "@babel/helper-module-imports": "^7.0.0", @@ -3153,6 +3276,11 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" }, + "bootstrap": { + "version": "5.0.0-beta1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.0.0-beta1.tgz", + "integrity": "sha512-UrHApw/WRmT7l2rlDdn5iXr7Jps/LlMZtJlLn9G41aGDfss48hyDeYyHtX1C6NHKVcmdUarGG+ve0LZB5iHyTQ==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -3607,6 +3735,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -3677,6 +3810,11 @@ "shallow-clone": "^0.1.2" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4303,6 +4441,11 @@ "cssom": "0.3.x" } }, + "csstype": { + "version": "2.6.14", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz", + "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==" + }, "cyclist": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz", @@ -4619,6 +4762,22 @@ "utila": "~0.4" } }, + "dom-helpers": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", + "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "requires": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + } + } + }, "dom-serializer": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz", @@ -6686,6 +6845,14 @@ "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=" }, + "indefinite-observable": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", + "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", + "requires": { + "symbol-observable": "1.2.0" + } + }, "indent-string": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", @@ -7946,6 +8113,215 @@ } } }, + "jss-plugin-camel-case": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.5.0.tgz", + "integrity": "sha512-GSjPL0adGAkuoqeYiXTgO7PlIrmjv5v8lA6TTBdfxbNYpxADOdGKJgIEkffhlyuIZHlPuuiFYTwUreLUmSn7rg==", + "requires": { + "@babel/runtime": "^7.3.1", + "hyphenate-style-name": "^1.0.3", + "jss": "10.5.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-default-unit": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.5.0.tgz", + "integrity": "sha512-rsbTtZGCMrbcb9beiDd+TwL991NGmsAgVYH0hATrYJtue9e+LH/Gn4yFD1ENwE+3JzF3A+rPnM2JuD9L/SIIWw==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-global": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.5.0.tgz", + "integrity": "sha512-FZd9+JE/3D7HMefEG54fEC0XiQ9rhGtDHAT/ols24y8sKQ1D5KIw6OyXEmIdKFmACgxZV2ARQ5pAUypxkk2IFQ==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-nested": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.5.0.tgz", + "integrity": "sha512-ejPlCLNlEGgx8jmMiDk/zarsCZk+DV0YqXfddpgzbO9Toamo0HweCFuwJ3ZO40UFOfqKwfpKMVH/3HUXgxkTMg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-props-sort": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.5.0.tgz", + "integrity": "sha512-kTLRvrOetFKz5vM88FAhLNeJIxfjhCepnvq65G7xsAQ/Wgy7HwO1BS/2wE5mx8iLaAWC6Rj5h16mhMk9sKdZxg==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-rule-value-function": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.5.0.tgz", + "integrity": "sha512-jXINGr8BSsB13JVuK274oEtk0LoooYSJqTBCGeBu2cG/VJ3+4FPs1gwLgsq24xTgKshtZ+WEQMVL34OprLidRA==", + "requires": { + "@babel/runtime": "^7.3.1", + "jss": "10.5.0", + "tiny-warning": "^1.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, + "jss-plugin-vendor-prefixer": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.5.0.tgz", + "integrity": "sha512-rux3gmfwDdOKCLDx0IQjTwTm03IfBa+Rm/hs747cOw5Q7O3RaTUIMPKjtVfc31Xr/XI9Abz2XEupk1/oMQ7zRA==", + "requires": { + "@babel/runtime": "^7.3.1", + "css-vendor": "^2.0.8", + "jss": "10.5.0" + }, + "dependencies": { + "css-vendor": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz", + "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-in-browser": "^1.0.2" + } + }, + "csstype": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", + "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" + }, + "jss": { + "version": "10.5.0", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.5.0.tgz", + "integrity": "sha512-B6151NvG+thUg3murLNHRPLxTLwQ13ep4SH5brj4d8qKtogOx/jupnpfkPGSHPqvcwKJaCLctpj2lEk+5yGwMw==", + "requires": { + "@babel/runtime": "^7.3.1", + "csstype": "^3.0.2", + "indefinite-observable": "^2.0.1", + "is-in-browser": "^1.1.3", + "tiny-warning": "^1.0.2" + } + } + } + }, "jss-preset-default": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz", @@ -8163,6 +8539,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz", "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" }, + "lodash-es": { + "version": "4.17.20", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz", + "integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==" + }, "lodash._reinterpolate": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", @@ -9381,6 +9762,11 @@ "ts-pnp": "^1.1.6" } }, + "popper.js": { + "version": "1.16.1-lts", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz", + "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==" + }, "portfinder": { "version": "1.0.28", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", @@ -10405,6 +10791,15 @@ "react-is": "^16.8.1" } }, + "prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "requires": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + } + }, "proxy-addr": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", @@ -10607,6 +11002,31 @@ } } }, + "react-bootstrap": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.4.3.tgz", + "integrity": "sha512-4tYhk26KRnK0myMEp2wvNjOvnHMwWfa6pWFIiCtj9wewYaTxP7TrCf7MwcIMBgUzyX0SJXx6UbbDG0+hObiXNg==", + "requires": { + "@babel/runtime": "^7.4.2", + "@restart/context": "^2.1.4", + "@restart/hooks": "^0.3.21", + "@types/classnames": "^2.2.10", + "@types/invariant": "^2.2.33", + "@types/prop-types": "^15.7.3", + "@types/react": ">=16.9.35", + "@types/react-transition-group": "^4.4.0", + "@types/warning": "^3.0.0", + "classnames": "^2.2.6", + "dom-helpers": "^5.1.2", + "invariant": "^2.2.4", + "prop-types": "^15.7.2", + "prop-types-extra": "^1.1.0", + "react-overlays": "^4.1.0", + "react-transition-group": "^4.4.1", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + } + }, "react-dev-utils": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz", @@ -10861,6 +11281,36 @@ } } }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-overlays": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz", + "integrity": "sha512-WtJifh081e6M24KnvTQoNjQEpz7HoLxqt8TwZM7LOYIkYJ8i/Ly1Xi7RVte87ZVnmqQ4PFaFiNHZhSINPSpdBQ==", + "requires": { + "@babel/runtime": "^7.12.1", + "@popperjs/core": "^2.5.3", + "@restart/hooks": "^0.3.25", + "@types/warning": "^3.0.0", + "dom-helpers": "^5.2.0", + "prop-types": "^15.7.2", + "uncontrollable": "^7.0.0", + "warning": "^4.0.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.12.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz", + "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + } + } + }, "react-scripts": { "version": "3.4.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.3.tgz", @@ -10921,6 +11371,17 @@ "workbox-webpack-plugin": "4.3.1" } }, + "react-transition-group": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", + "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "requires": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + } + }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", @@ -12411,9 +12872,9 @@ } }, "styled-components": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz", - "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz", + "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==", "requires": { "@babel/helper-module-imports": "^7.0.0", "@babel/traverse": "^7.4.5", @@ -12870,6 +13331,17 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "uncontrollable": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.1.1.tgz", + "integrity": "sha512-EcPYhot3uWTS3w00R32R2+vS8Vr53tttrvMj/yA1uYRhf8hbTG2GyugGqWDY0qIskxn0uTTojVd6wPYW9ZEf8Q==", + "requires": { + "@babel/runtime": "^7.6.3", + "@types/react": "^16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + } + }, "unicode-canonical-property-names-ecmascript": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz", @@ -13156,6 +13628,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.4.tgz", diff --git a/package.json b/package.json index 7d4d75f..eca2a78 100644 --- a/package.json +++ b/package.json @@ -3,16 +3,20 @@ "version": "0.1.0", "private": true, "dependencies": { + "@material-ui/core": "^4.11.2", + "@material-ui/icons": "^4.11.2", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "axios": "^0.19.2", + "bootstrap": "^5.0.0-beta1", "jss": "^10.1.1", "react": "^16.13.1", + "react-bootstrap": "^1.4.3", "react-dom": "^16.13.1", "react-jss": "8.0.0", "react-scripts": "^3.4.3", - "styled-components": "^5.1.0" + "styled-components": "^5.2.1" }, "scripts": { "start": "react-scripts start", diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index bcd5dfd..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/index.html b/public/index.html index 7fc348f..6dd09f4 100644 --- a/public/index.html +++ b/public/index.html @@ -25,7 +25,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Elo4 diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/src/App.css b/src/App.css index 74b5e05..4d99426 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,4 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +*{ + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index d4acf4b..647b0c7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,15 @@ -import React from 'react' -import { AppContainer } from './components/AppContainer' +import React from "react"; +import { AppContainer } from "./components/AppContainer"; -function App() { - return ( + +class App extends React.Component { + render() { + return ( +
- ) +
+ ); + } } -export default App +export default App; diff --git a/src/Components/Home/AboutUs.js b/src/Components/Home/AboutUs.js new file mode 100644 index 0000000..6922b7b --- /dev/null +++ b/src/Components/Home/AboutUs.js @@ -0,0 +1,68 @@ +import React from "react"; +import styled from "styled-components"; +import Logo from "../../imgs/elo4-logo.png"; + +const AboutUsContainer = styled.div` + display: flex; + padding: 2em; + background-color: #f2f2f2; + height: 25%; + color: #311355; + box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, + rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; + @media (min-device-width: 320px) and (max-device-width: 420px) { + flex-direction: column; + } +`; + +const Image = styled.img` + height: 80%; + width: auto; + @media (min-device-width: 320px) and (max-device-width: 420px) { + width: 80%; + } +`; + +const TextAboutUs = styled.p` + font-weight: bold; + text-align: justify; + margin-top: 5%; +`; + +const Differentials = styled.div` + display: flex; + justify-content: space-between; + margin-top: 15%; + font-weight: 700; + font-size: 15px; +`; + +class QuemSomos extends React.Component { + render() { + return ( + +
+ +
+
+

Quem somos?

+ + {" "} + A Elo4 é uma startup voltada à conexão de artesãos e artesãs para a + venda de produtos personalizados. Na Elo4, os clientes podem + encontrar uma variedade de produtos, como artigos para festas, + objetos de decoração, bijuterias, produtos religiosos, enxovais e + acessórios eco-friendly. + + + Atendimento 24/7 + Entrega Rápida + Pós-venda + +
+ + ); + } +} + +export default QuemSomos; diff --git a/src/Components/Home/Carrossel.js b/src/Components/Home/Carrossel.js new file mode 100644 index 0000000..4ed0e89 --- /dev/null +++ b/src/Components/Home/Carrossel.js @@ -0,0 +1,75 @@ +import React from "react"; +import Carousel from "react-bootstrap/Carousel"; +import Familia from "../../imgs/EmpresaFamilia.jpg"; +import JogoArtesão from "../../imgs/ObjetosArtesao.jpg"; +import Atendimento from "../../imgs/Atendimento.jpg"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; +import Col from "react-bootstrap/Col"; +import styled from "styled-components"; + +const CarroselDiv = styled.div` + padding: 4em 2em; + background-color: #f2f2f2; +`; + +class Carrossel extends React.Component { + render() { + return ( + + + + + + + First slide + +

Uma empresa para toda família!

+

+ Aqui você encontra diversos produtos artesanais feito + pelas mãos de diversas pessoas. +

+ + + + Third slide + +

Produtos Artesanais

+

+ Temos diversas categorias de produtos artesanais, como por + exemplo, jogos, bonecos, vasos, roupas e muitos outros. +

+ + + + Third slide + +

Atendimento.

+

+ Estamos em contato com o cliente sempre no que o mesmo + precisar durante todos os dias da semana. +

+ + + + + + + + ); + } +} + +export default Carrossel; diff --git a/src/Components/Home/Home.js b/src/Components/Home/Home.js new file mode 100644 index 0000000..afd0fbf --- /dev/null +++ b/src/Components/Home/Home.js @@ -0,0 +1,16 @@ +import React from "react"; +import AboutUs from "./AboutUs" +import Carrossel from "./Carrossel"; + +class Home extends React.Component { + render() { + return ( +
+ + +
+ ); + } +} + +export default Home; diff --git a/src/Components/ProductPage/Cart/Cart.js b/src/Components/ProductPage/Cart/Cart.js new file mode 100644 index 0000000..addeca3 --- /dev/null +++ b/src/Components/ProductPage/Cart/Cart.js @@ -0,0 +1,170 @@ +import React from "react"; +import styled from "styled-components"; +import ImgDelete from "../../../imgs/imgCart/delete.png"; + +const ProductCartContainer = styled.div` + background-color: #f2970b; + display: flex; + flex-direction: column; + align-items: center; + width: 250px; + margin: 20px 10px; + border-radius: 10px; +`; +const BoxCart = styled.div` + margin-top: 40px; + display: flex; + flex-direction: column; + text-align: center; +`; + +const BoxItemCart = styled.div` + margin-bottom: 20px; +`; + +const BoxProductNameAndDelete = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 15px; +`; + +const TagPnameProduct = styled.p` + margin: 0; + font-weight: 600; +`; + +const TagP = styled.p` + margin: 0; +`; + +const BtnDelete = styled.button` + border: none; + background-color: #f2970b; + opacity: 0.6; + + &:focus { + outline: none; + } + + &:hover { + opacity: 1; + } +`; + +const ImgBtnDelete = styled.img` + height: 20px; +`; + +const BoxDetailsCart = styled.div` + margin: 20px 0; + width: 250px; +`; + +const BoxSelectCart = styled.div` + margin: 15px 0; + display: flex; + justify-content: center; +`; + +const BoxBtnCheckout = styled.div` + display: flex; + justify-content: center; + margin-top: 30px; +`; + +const BtnCheckout = styled.button` + border: none; + border-radius: 5px; + background-color: white; + + &:hover { + background-color: #f1f1f1; + } +`; + +class Cart extends React.Component { + valueUpdate = (totalList) => { + let value = 0; + for (let i = 0; i < totalList.length; i++) { + value += totalList[i].price * totalList[i].quantidade; + } + return value; + }; + + checkout = () => { + alert("Compra concluída com sucesso! Volte sempre!!!"); + }; + + render() { + const productsCart = this.props.listCart; + const totalValue = this.valueUpdate(this.props.listCart); + const infosProductsCart = productsCart.map((product) => { + return ( + + + {product.name.toUpperCase()} + this.props.deleteProductCart(product.id)}> + + + + Quantidade: {product.quantidade} + + Valor do produto: R$ + {Number(product.price * product.quantidade) + .toFixed(2) + .replace(".", ",")} + + + ); + }); + + return ( + + +

Carrinho

+ + {infosProductsCart} +
+

+ Total: R$ {Number(totalValue).toFixed(2).replace(".", ",")}{" "} +

+
+ + + + + + + + + + + + Finalizar Compra + + + + ); + } +} + +export default Cart; diff --git a/src/Components/ProductPage/ContentProduct/ContentProduct.js b/src/Components/ProductPage/ContentProduct/ContentProduct.js new file mode 100644 index 0000000..987adfa --- /dev/null +++ b/src/Components/ProductPage/ContentProduct/ContentProduct.js @@ -0,0 +1,24 @@ +import React from "react"; +import styled from "styled-components"; +import HeaderContentProducts from "./HeadeContectProdutcts/HeaderContentProducts"; +import Product from "./ProductCard/Product"; + +const ProductContentProduct = styled.div` + width: 100%; + margin: 20px 0; +`; + +export default class ContentProduct extends React.Component { + render() { + return ( + + + + + ); + } +} diff --git a/src/Components/ProductPage/ContentProduct/HeadeContectProdutcts/HeaderContentProducts.js b/src/Components/ProductPage/ContentProduct/HeadeContectProdutcts/HeaderContentProducts.js new file mode 100644 index 0000000..7484238 --- /dev/null +++ b/src/Components/ProductPage/ContentProduct/HeadeContectProdutcts/HeaderContentProducts.js @@ -0,0 +1,33 @@ +import React from "react"; +import styled from "styled-components"; + +const HeaderProductContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-around; + margin: 40px 0 20px 0; +`; + +const TitleProductsContainer = styled.div``; + +export default class HeaderContentProducts extends React.Component { + render() { + return ( + + +

Produtos

+ + +
+ +
+ + ); + } +} diff --git a/src/Components/ProductPage/ContentProduct/ProductCard/Product.js b/src/Components/ProductPage/ContentProduct/ProductCard/Product.js new file mode 100644 index 0000000..8b69cfe --- /dev/null +++ b/src/Components/ProductPage/ContentProduct/ProductCard/Product.js @@ -0,0 +1,19 @@ +import React from "react"; +import styled from "styled-components"; +import ProductCard from "./ProductCard/ProductCard"; + +const ProductContainer = styled.div``; + +export default class Product extends React.Component { + render() { + return ( + + + + ); + } +} diff --git a/src/Components/ProductPage/ContentProduct/ProductCard/ProductCard/ProductCard.js b/src/Components/ProductPage/ContentProduct/ProductCard/ProductCard/ProductCard.js new file mode 100644 index 0000000..9bbd584 --- /dev/null +++ b/src/Components/ProductPage/ContentProduct/ProductCard/ProductCard/ProductCard.js @@ -0,0 +1,96 @@ +import React from "react"; +import styled from "styled-components"; + +const ProductCardContainer = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; +`; + +const ProductCardBox = styled.div` + margin: 15px; + text-align: center; + padding: 10px; + + &:hover { + box-shadow: 0px 0px 10px 10px #f1f1f1; + } +`; + +const Img = styled.img` + width: 200px; + height: 300px; +`; + +const TagP = styled.p` + margin: 0; +`; + +const BtnAddCart = styled.button` + border: none; + background-color: #f2970b; + border-radius: 5px; + transition: 0.5s; + margin-top: 5px; + + &:focus { + outline: none; + } + + &:hover { + transform: scale(1.1); + } +`; + +export default class ProductCard extends React.Component { + render() { + const newArray = [...this.props.products]; + + if (this.props.valueOrder === "Crescente") { + newArray.sort(function (a, b) { + return a.price - b.price; + }); + } else if (this.props.valueOrder === "Decrescente") { + newArray.sort(function (a, b) { + return b.price - a.price; + }); + } else if (this.props.valueOrder === "nomeAZ") { + newArray.sort(function (a, b) { + if (a.name > b.name) { + return 1; + } else if (a.name < b.name) { + return -1; + } /* else { + return 0; + } */ + }); + } else if (this.props.valueOrder === "nomeZA") { + newArray.sort(function (a, b) { + if (a.name < b.name) { + return 1; + } else if (a.name > b.name) { + return -1; + } /* else { + return 0; + } */ + }); + } + + const productsRender = newArray.map((product) => { + return ( + + imagem do produto +

{product.name}

+ {product.description} + + Valor: R$ {Number(product.price).toFixed(2).replace(".", ",")} + + this.props.onClickAddToCart(product)}> + Adicionar ao Carrinho + + + ); + }); + return {productsRender}; + } +} diff --git a/src/Components/ProductPage/ProductAside/ProductAside.js b/src/Components/ProductPage/ProductAside/ProductAside.js new file mode 100644 index 0000000..c2b8b1e --- /dev/null +++ b/src/Components/ProductPage/ProductAside/ProductAside.js @@ -0,0 +1,84 @@ +import React from "react"; +import styled from "styled-components"; + +const ProductAsideContainer = styled.div` + background-color: #f2970b; + width: 350px; + display: flex; + justify-content: center; + margin: 20px 10px; + border-radius: 10px; +`; + +const TitleAside = styled.h1` + margin-top: 40px; +`; + +const AsideBox = styled.div` + position: fixed; + width: 200px; + text-align: center; +`; + +const AsideBoxItem = styled.div` + display: flex; + flex-direction: column; + width: 170px; + margin: 0px auto; + padding: 2px 0; + text-align: initial; +`; + +const InputFilter = styled.input` + border-radius: 5px; + border: none; + + &:hover { + background-color: #f1f1f1; + } +`; + +const SelectFilter = styled.select` + margin-top: 20px; + text-align-last: center; +`; + +export default class ProductAside extends React.Component { + render() { + return ( + + + Filtro + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} diff --git a/src/components/AddProductPage/AddProductPage.js b/src/components/AddProductPage/AddProductPage.js new file mode 100644 index 0000000..a7d4681 --- /dev/null +++ b/src/components/AddProductPage/AddProductPage.js @@ -0,0 +1,332 @@ +import React, { Component } from "react"; +import axios from "axios"; +import { + TextField, + Button, + InputLabel, + Select, + FormControl, + MenuItem, +} from "@material-ui/core/"; +import styled from "styled-components"; + +const DivFormSell = styled.div` + width: 80%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; +`; + +const Input = styled(TextField)` + width: ${(props) => props.tamanho}; +`; +const InputDiv = styled.div` + width: ${(props) => props.tamanho}; + margin: 5px; + display: flex; +`; +const ButtonDiv = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; + width: 80%; +`; + +const ContainerProducts = styled.div` + border: 1px dotted #f2a649; + min-width: 300px; + margin: 10px; + justify-content: center; + align-items: center; + text-align: center; + display: flex; + flex-direction: column; +`; + +class AddProductPage extends Component { + state = { + inputName: "", + inputDescription: "", + inputPrice: 0, + paymentMethod: "", + selectCategory: "", + inputImage: [], + selectinstallments: 1, + productList: [], + }; + + componentDidMount() { + this.getProducts(); + } + + getProducts = () => { + axios + .get( + "https://us-central1-labenu-apis.cloudfunctions.net/eloFourOne/products" + ) + .then((response) => { + this.setState({ productList: response.data.products }); + }) + .catch((error) => { + alert("Não funcionou."); + }); + }; + + postProduct = () => { + const body = { + name: this.state.inputName, + description: this.state.inputDescription, + price: this.state.inputPrice, + paymentMethod: this.state.paymentMethod, + category: this.state.selectCategory, + photos: [this.state.inputImage], + installments: this.state.selectinstallments, + }; + + axios + .post( + "https://us-central1-labenu-apis.cloudfunctions.net/eloFourOne/products", + body + ) + .then((response) => { + alert("Produto cadastrado!"); + this.setState({ + inputName: "", + inputDescription: "", + inputPrice: 0, + paymentMethod: "", + selectCategory: "", + inputImage: [], + selectinstallments: 1, + }); + }) + .catch((error) => { + alert("Erro ao cadastrar produto,tente novamente."); + }); + }; + + onChangeInputName = (event) => { + this.setState({ inputName: event.target.value }); + }; + + onChangeInputDescription = (event) => { + this.setState({ inputDescription: event.target.value }); + }; + + onChangeInputPrice = (event) => { + this.setState({ inputPrice: event.target.value }); + }; + + onChangePaymentMethod = (event) => { + this.setState({ paymentMethod: event.target.value }); + }; + + onChangeSelectCategory = (event) => { + this.setState({ selectCategory: event.target.value }); + }; + + onChangeInputImage = (event) => { + this.setState({ inputImage: event.target.value }); + }; + + onChangeSelectinstallments = (event) => { + this.setState({ selectinstallments: event.target.value }); + }; + + deleteProduct = (id) => { + if (window.confirm("Quer mesmo deletar o anúncio do produto?")) { + axios + .delete( + `https://us-central1-labenu-apis.cloudfunctions.net/eloFourOne/products/${id}` + ) + .then((response) => { + alert("Anúncio do produto retirado."); + this.getProducts(); + }) + .catch((error) => { + alert("Produto não foi retirado, tente novamente."); + }); + } + }; + + render() { + return ( + +

Área do Vendedor:

+ + + + + + + + + + + + + + + + + Categoria + + + + Forma de Pagamento + + + + + Parcelas + + + + + + + + +

Gerenciar produtos cadastrados:

+
+ {this.state.productList.map((product) => { + return ( + +

+ Nome do produto: {product.name} +

+

+ Descrição: + {product.description} +

+

+ Preço: R$ + {product.price},00 +

+

+ Categoria: + {product.category} +

+ + + ); + })} + + ); + } +} + +export default AddProductPage; diff --git a/src/components/AppContainer.js b/src/components/AppContainer.js index 06b7967..176c277 100644 --- a/src/components/AppContainer.js +++ b/src/components/AppContainer.js @@ -1,11 +1,56 @@ -import React, { Component } from 'react' +import React, { Component } from "react"; +import Footer from "../components/Footer/Footer"; +import Home from "../components/Home/Home"; +import { LayoutHeader } from "../components/Header/LayoutHeader"; +import AddProductPage from "./AddProductPage/AddProductPage"; +import ProductPage from "./ProductPage/ProductPage"; export class AppContainer extends Component { + state = { + currentPage: "home", + }; + + goToHome = () => { + this.setState({ currentPage: "home" }); + }; + + goToForm = () => { + this.setState({ currentPage: "form" }); + }; + + goToProducts = () => { + this.setState({ currentPage: "products" }); + }; + render() { + let renderPage = ""; + switch (this.state.currentPage) { + case "home": + renderPage = ; + break; + case "products": + renderPage = ; + break; + + case "form": + renderPage = ; + break; + + default: + renderPage = ; + } + return (
-

Pronto para começar!

+ + {renderPage} +
- ) + ); } } diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..a33dd90 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,80 @@ +import React from "react"; +import styled from "styled-components"; +import FacebookIcon from "@material-ui/icons/Facebook"; +import InstagramIcon from "@material-ui/icons/Instagram"; +import TwitterIcon from "@material-ui/icons/Twitter"; + +const FooterContainer = styled.div` + width: 100%; + background-color: #5b5b58; +`; + +const BoxFooter = styled.div` + width: 70vw; + height: 10vh; + margin: 0 auto; + display: flex; + flex-direction: block; + justify-items: center; + justify-content: space-around; + align-items: center; + color: white; + font-size: 1.2em; +`; + +const Paragraph = styled.p` + display: flex; + flex-direction: block; + align-items: center; + margin: 0 20px 0 0; +`; + +const LinksMidia = styled.a` + text-decoration: none; + color: inherit; + display: flex; + flex-direction: block; + padding: 5px; + + &:hover { + color: #f2970b; + } +`; +const DivIcons = styled.div` + display: flex; + width: 150px; + justify-content: space-between; +`; + +const DivParagraphs = styled.div` + display: flex; +`; + +class Footer extends React.Component { + render() { + return ( + + + + + {" "} + + + + + + + + + | + + E-mail: contato@elo4.com.br + Telefone: +55 (011) 3366-3366 + + + + ); + } +} + +export default Footer; diff --git a/src/components/Header/LayoutHeader.js b/src/components/Header/LayoutHeader.js new file mode 100644 index 0000000..2fdba8b --- /dev/null +++ b/src/components/Header/LayoutHeader.js @@ -0,0 +1,95 @@ +import React from "react"; +import styled from "styled-components"; +import LogoImg from "../../imgs/elo4-logo-cortada.png"; + +const BoxHeader = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + height: 10vh; +`; + +const NavBar = styled.nav` + display: flex; + justify-content: space-between; + align-items: center; + height: 10vh; + width: 100vw; + background-color: #f2970b; +`; +const HiperlinkHome = styled.a` + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + text-decoration: none; +`; +const ImgLogoHeader = styled.img` + display: flex; + justify-content: center; + align-items: center; + height: 10vh; +`; +const UlistsBtnHeader = styled.ul` + list-style: none; + display: flex; + align-items: center; + justify-content: center; + align-content: center; + font-family: "Roboto", sans-serif; + margin: 0vh 10vh; +`; +const ListBtnHeader = styled.li` + margin: 0vh 10vh; + font-size: 3.2vh; + display: flex; + align-items: center; + justify-content: center; +`; + +const ButtonHeader = styled.button` + padding: 1vh; + height: 6vh; + width: 25vh; + border-radius: 10px; + border-width: 0.2vh; + background: #f2f2f2; + cursor: pointer; + font-size: 2.5vh; + + &:focus { + outline: none; + } +`; + +export class LayoutHeader extends React.Component { + render() { + return ( + + +
+ + + +
+ + + + Produtos + + + + + Anunciar Produtos + + + + + + ); + } +} diff --git a/src/components/ProductPage/ProductPage.js b/src/components/ProductPage/ProductPage.js new file mode 100644 index 0000000..fe35b79 --- /dev/null +++ b/src/components/ProductPage/ProductPage.js @@ -0,0 +1,241 @@ +import React from "react"; +import styled from "styled-components"; +import ProductAside from "./ProductAside/ProductAside"; +import ContentProduct from "./ContentProduct/ContentProduct"; +import Cart from "./Cart/Cart"; +import ShoppingCart from "../../imgs/imgCart/shopping-cart.png"; +import axios from "axios"; + +const ProductPageContainer = styled.div` + display: flex; + min-height: 80vh; +`; + +const BtnCartContainer = styled.div` + position: fixed; + right: 40px; + bottom: 100px; +`; + +const ImgCart = styled.img` + height: 40px; + cursor: pointer; +`; + +export default class ProductPage extends React.Component { + state = { + showCart: false, + products: [], + listCart: [], + productsFiltered: [], + order: "", + valueMin: 0, + valueMax: 0, + inputSearch: "", + categorySelect: '', + }; + + changeCart = () => { + this.setState({ showCart: !this.state.showCart }); + }; + + componentDidMount() { + this.getAllProducts(); + } + + getAllProducts = () => { + axios + .get( + "https://us-central1-labenu-apis.cloudfunctions.net/eloFourOne/products" + ) + .then((response) => { + this.setState({ + products: response.data.products, + productsFiltered: response.data.products, + }); + }) + .catch((error) => {}); + }; + + addCart = (addProduct) => { + let newListCart = [...this.state.listCart]; + let productShow = this.state.listCart.findIndex( + (product) => product.id === addProduct.id + ); + if (productShow > -1) { + newListCart[productShow].quantidade++; + } else { + addProduct.quantidade = 1; + newListCart.push(addProduct); + } + this.setState({ listCart: newListCart }); + }; + + deleteProductCart = (id) => { + let productDelete = [...this.state.listCart]; + let productCart = this.state.listCart.findIndex( + (product) => product.id === id + ); + + productDelete.splice(productCart, 1); + this.setState({ listCart: productDelete }); + }; + + onChangeProducts = (e) => { + if (e.target.value === "Crescente") { + this.setState({ order: e.target.value }); + } else if (e.target.value === "Decrescente") { + this.setState({ order: e.target.value }); + } else if (e.target.value === "nomeAZ") { + this.setState({ order: e.target.value }); + } else if (e.target.value === "nomeZA") { + this.setState({ order: e.target.value }); + } else if (e.target.value === "Sem ordem") { + this.setState({ order: e.target.value }); + } + }; + + onChangeValueMin = (e) => { + this.setState({ valueMin: e.target.value }); + this.filterProducts( + e.target.value, + this.state.valueMax, + this.state.inputSearch + ); + }; + + onChangeValueMax = (e) => { + if (e.target.value) { + this.setState({ valueMax: e.target.value }); + this.filterProducts( + this.state.valueMin, + e.target.value, + this.state.valueNomeProduto + ); + } else { + this.setState({ + valueMax: Infinity, + }); + this.filterProducts( + this.state.valueMin, + Infinity, + this.state.valueNomeProduto + ); + } + }; + + onChangeInputSearch = (e) => { + this.setState({ inputSearch: e.target.value }); + this.filterProducts( + this.state.valueMin, + this.state.valueMax, + e.target.value + ); + }; + + filterProducts = ( + valueMin = this.state.valueMin, + valueMax = this.state.valueMax, + inputSearch = this.state.inputSearch + ) => { + const productsListFiltered = this.state.productsFiltered + .filter((product) => { + return Number(product.price) >= Number(valueMin); + }) + .filter((product) => { + return Number(product.price) <= Number(valueMax); + }) + .filter((product) => { + const productName = product.name.toLowerCase(); + return productName.includes(inputSearch.toLocaleLowerCase()); + }); + + this.setState({ products: productsListFiltered }); + return productsListFiltered; + }; + + onChangeCategorySelect = (e) => { + if (e.target.value === "acessorios") { + this.setState({ categorySelect: e.target.value }, () => + this.filterSelect(this.state.categorySelect)); + + } else if (e.target.value === "festa") { + this.setState({ categorySelect: e.target.value }, () => + this.filterSelect(this.state.categorySelect)); + + } else if (e.target.value === "bijuterias") { + this.setState({ categorySelect: e.target.value }, () => + this.filterSelect(this.state.categorySelect)); + + } else if (e.target.value === "jogos") { + this.setState({ categorySelect: e.target.value }, () => + this.filterSelect(this.state.categorySelect)); + + } else if (e.target.value === "roupas") { + this.setState({ categorySelect: e.target.value }, () => + this.filterSelect(this.state.categorySelect)); + + } + }; + + filterSelect = (category) =>{ + if(category !== ''){ + const productsFilteredByCategory = this.state.productsFiltered.filter((product) =>{ + return product.category === category + }) + .filter((product) =>{ + return product.category === category + }) + .filter((product) =>{ + return product.category === category + }) + .filter((product) =>{ + return product.category === category + }) + .filter((product) =>{ + return product.category === category + }) + + + this.setState({products: productsFilteredByCategory}) + return productsFilteredByCategory + } + } + + render() { + console.log(this.state.categorySelect) + return ( + + + + {this.state.showCart && ( + + )} + + + + + ); + } +} diff --git a/src/imgs/Atendimento.jpg b/src/imgs/Atendimento.jpg new file mode 100644 index 0000000..4021e43 Binary files /dev/null and b/src/imgs/Atendimento.jpg differ diff --git a/src/imgs/EmpresaFamilia.jpg b/src/imgs/EmpresaFamilia.jpg new file mode 100644 index 0000000..2d1308d Binary files /dev/null and b/src/imgs/EmpresaFamilia.jpg differ diff --git a/src/imgs/ObjetosArtesao.jpg b/src/imgs/ObjetosArtesao.jpg new file mode 100644 index 0000000..fb5c711 Binary files /dev/null and b/src/imgs/ObjetosArtesao.jpg differ diff --git a/src/imgs/elo4-logo-cortada.png b/src/imgs/elo4-logo-cortada.png new file mode 100644 index 0000000..d20d51f Binary files /dev/null and b/src/imgs/elo4-logo-cortada.png differ diff --git a/src/imgs/elo4-logo.png b/src/imgs/elo4-logo.png new file mode 100644 index 0000000..17fc038 Binary files /dev/null and b/src/imgs/elo4-logo.png differ diff --git a/src/imgs/imgCart/delete.png b/src/imgs/imgCart/delete.png new file mode 100644 index 0000000..526592f Binary files /dev/null and b/src/imgs/imgCart/delete.png differ diff --git a/src/imgs/imgCart/shopping-cart.png b/src/imgs/imgCart/shopping-cart.png new file mode 100644 index 0000000..24c1459 Binary files /dev/null and b/src/imgs/imgCart/shopping-cart.png differ diff --git a/src/index.js b/src/index.js index f5185c1..c12eccc 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render(