jeffersonribeiro / react-shopping-cart Goto Github PK
View Code? Open in Web Editor NEW๐๏ธ Simple ecommerce cart application built with Typescript and React
Home Page: https://react-shopping-cart-67954.firebaseapp.com/
๐๏ธ Simple ecommerce cart application built with Typescript and React
Home Page: https://react-shopping-cart-67954.firebaseapp.com/
Hi,
thank you for this sample.
my package.json i:
{ "name": "clientapp", "version": "0.1.0", "private": true, "dependencies": { "axios": "^0.19.0", "babel-polyfill": "^6.26.0", "bootstrap": "^4.3.1", "concurrently": "^4.1.2", "connected-react-router": "^6.5.2", "cors": "^2.8.5", "express": "^4.17.1", "history": "^4.9.0", "react": "^16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-scripts": "3.1.1", "reactstrap": "^8.0.1", "redux": "^4.0.4", "redux-thunk": "^2.3.0" }, "scripts": { "start": "concurrently \"npm run server\" \"react-scripts start\"", "server": "nodemon server/app", "wdio": "wdio", "build": "react-scripts build", "test": "react-scripts test", "test:coverage": "npm run test -- --coverage", "format": "prettier --write \"**/*.+(js|json|css)\"", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "jest": { "collectCoverageFrom": [ "src/**/*.{js,jsx}", "!/node_modules/", "!src/index.js", "!src/Root.js" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "moxios": "^0.4.0", "chai": "^4.2.0", "enzyme": "^3.7.0", "enzyme-adapter-react-16": "^1.7.0", "enzyme-to-json": "^3.3.4", "fetch-mock": "^7.2.5", "firebase-tools": "^6.2.2", "node-sass": "^4.10.0", "nodemon": "^1.18.6", "prop-types": "^15.6.2", "react-test-renderer": "^16.6.3", "redux-mock-store": "^1.5.3", "sinon": "^7.1.1", "wdio-mocha-framework": "^0.6.4", "wdio-selenium-standalone-service": "0.0.12", "wdio-spec-reporter": "^0.1.5", "webdriverio": "^4.14.1" }, "keywords": [], "description": "Shopping cart" }
i am getting these warnings in my browser console.
react-dom.development.js:12029 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
npx react-codemod rename-unsafe-lifecycles
in your project source folder.Please update the following components: FloatCart, Shelf
printWarning @ react-dom.development.js:12029
webpackHotDevClient.js:120 ./node_modules/process/browser.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
How to reset redux store after checkout ?
I think this part is redundant as you did not use filters props in the component
const mapStateToProps = state => ({
filters: state.filters.items
});
export default connect(
mapStateToProps,
{ updateFilters }
)(Filter);
I think the first argument of connect
should be null
, or you may have an explanation for this!!
Hello,
If payment is handled on the frontend, anyone can manipulate the total price in local storage and can make the payment flow successful.
How to add category and color option for items. Also need sorting for category.
Hi,
Just a few ideas:
I was thinking it is best to make the X (of removing an item from the cart) White hover to Yellow, because now it's black - hover to white, and it took me a little time to see it.
The sizing of the shirts filter is working ok, but I'm missing a line under each item, something like: "available on: M, L, XL, XXL", because for example if I choose both L and XL in the filter (so I see that the same shirt available in both sizes, but I can't choose which size I want unless I filter only one size.
Shipping section in the cart? even if it's free, it would be nice to see Shippment: 0$ for example.
I find whenever the filter/sorting changed, Axios is used to fetch the same remote JSON files, it is not a good practice, as it makes unnecessary server load.
Shall we refactor it so it is only called once?
[email protected] start /Users/krish/Desktop/react-shopping-cart-master
react-scripts start
sh: react-scripts: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] start: react-scripts start
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/krish/.npm/_logs/2018-12-04T06_03_15_555Z-debug.log
krishs-MacBook-Pro:react-shopping-cart-master krish$
npm -v
6.4.1
node -v
v10.14.1
I can't see anything on IE 11
After npm install & npm start, I am getting this error.
Error: ENOENT: no such file or directory, scandir 'D:\jeffersonRibeiro\react-shopping-cart\node_modules\node-sass\vendor'
Failed to compile
./src/index.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/index.scss)
Error: ENOENT: no such file or directory, scandir 'D:\jeffersonRibeiro\react-shopping-cart\node_modules\node-sass\vendor'
I am wondering if there is a tutorial somewhere for this. This is so cool. Thanks
I can't see anything on IE 11
I need to integrate the shopping cart with firebase datastore, but don't know how to because this project still lack document and hard to develop or maintain.
When i try to npm install
on branch master
, install fails
Environment
npm : v6.14.4
node : v14.4.9
branch : master
os : mac 11.3.1
How can I show a product quantity counter on the "Add to Cart" button?
Also, is there a good way to implement Increment and Decrement of product quantity just beside the Add To Cart button?
P.S Loved your work. It helped me a lot understanding Redux and also helped me learn a good project structure. Keep up the Good Work ๐
Hi,
I am running the app using npm start
. I try to access http://localhost:3000
and it fails.
What's the actual URL:PORT for the client app?
componentWillReceiveProps(nextProps) {
const { filters: nextFilters, sort: nextSort } = nextProps;
const { filters } = this.props;
if (nextFilters.length !== filters.length) {
this.handleFetchProducts(nextFilters, undefined);
}
if (nextSort !== this.props.sort) {
this.handleFetchProducts(undefined, nextSort);
}
}
Hi, inside componentWillReceiveProps, I am confused how does the coming props nextFilter and nextSort get stored in filters and sort each time, and what does this command line mean here: const { filters : nextFilters, sort: nextSort } = nextProps;
Thank you!
I want to use the react shopping cart, but I am selling a service not a quantity, so the quantity is always just one. the service choices are actually one month, 3 month, or one year, Is there a way to remove quantity or just set it to one.
I would like to change the url params to reflect the actual filters.
If you know how to implement that using react-router, feel free to send a PR.
PS D:\react-shopping-cart> npm install
npm WARN tar ENOENT: no such file or directory, open 'D:\react-shopping-cart\node_modules.staging\string_decoder-f6d3fcd9\lib\string_decoder.js'
npm ERR! code E404
npm ERR! 404 Not Found: [email protected]
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_34_24_126Z-debug.log
PS D:\react-shopping-cart> npm run server
[email protected] server D:\react-shopping-cart
nodemon server.js
'nodemon' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] server: nodemon server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_34_45_808Z-debug.log
PS D:\react-shopping-cart> npm start
[email protected] start D:\react-shopping-cart
react-scripts start
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: react-scripts start
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Wonder\AppData\Roaming\npm-cache_logs\2018-12-04T06_36_30_836Z-debug.log
Tutorial please sir !
Hi Jeff,
Good day, I was trying to test your shopping cart, running build and deploying on a test server, but can't seem to work it, since I'm running it on a sub folder, found out that the minified index.html were sourcing assets to the root folder. Is there any chance I can run this build with a custom source path for all css, images and JS assets?
Thanks in advance.
Regards,
Juven
I'm trying to find an alternative way to update the cart without using componentWillReceiveProps since this component lifecycle will be depreciated. I've attempted to use componentDidUpdate, but it updates the cart multiple times. I looked in getDerivedStateFromProps, but it seems to be a little too complicated for my understanding.
I found an alternative solution to update the cart from the Product Component itself when a user clicks on the product, but then I run into the issue of opening the Float Cart when the user adds a new product to the cart.
Any advice/direction would be helpful.
Thanks
I am confused about that part
componentWillReceiveProps(nextProps) {
const { filters: nextFilters, sort: nextSort } = nextProps;
if (nextFilters !== this.props.filters) {
this.handleFetchProducts(nextFilters, undefined);
}
}
You are comparing two arrays which always will return false and this would make your condition always true
[1, 2] === [1, 2] // false
Don't you think that it's a bad behaviour in your code???
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.