online shop app
This commit is contained in:
+24
@@ -0,0 +1,24 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
node_modules
|
||||
@@ -1 +1,36 @@
|
||||
# online-shop
|
||||
# Online Shop
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
## Description
|
||||
---
|
||||
The Online Shop is build with React. It has custom responsive layout styled with SCSS. It makes an API call to fetch mock products from [Dummy JSON API](https://dummyjson.com/products) with Redux [RTK Query](https://redux-toolkit.js.org/rtk-query/overview). Added also Toastify for notifications.
|
||||
The application shows a product home page and a cart page, the routing is done with React Router.
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
---
|
||||
### Under the repository name, click on clone or download. In the terminal paste this command:
|
||||
|
||||
```git clone https://dadobos.github.io/online-shop.git```
|
||||
|
||||
### Open the project in VSCode or move inside the folder with:
|
||||
|
||||
```cd online-shop```
|
||||
|
||||
### Install the npm packages:
|
||||
|
||||
```npm install```
|
||||
|
||||
### Run the application with:
|
||||
|
||||
```npm start```
|
||||
|
||||
### In the browser open the "3000" port:
|
||||
|
||||
```http://localhost:3000/```
|
||||
Generated
+29220
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,49 @@
|
||||
{
|
||||
"name": "online-shop",
|
||||
"homepage": "https://dadobos.github.io/online-shop",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@reduxjs/toolkit": "^1.9.1",
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.4.4",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-toastify": "^9.1.1",
|
||||
"sass": "^1.56.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^4.0.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
|
||||
type="image/x-icon"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#335c67" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
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`.
|
||||
-->
|
||||
<title>Online Shop</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"short_name": "React Online Shop",
|
||||
"name": "React Online Shop",
|
||||
"icons": [
|
||||
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
|
||||
import { ToastContainer } from 'react-toastify';
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
import './App.scss';
|
||||
|
||||
import Navbar from './components/Navbar';
|
||||
import Footer from './components/Footer';
|
||||
import Home from './components/Home';
|
||||
import Cart from './components/Cart';
|
||||
import NotFound from './components/NotFound';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className='App'>
|
||||
<BrowserRouter>
|
||||
<ToastContainer />
|
||||
<Navbar />
|
||||
<Routes>
|
||||
<Route path='cart' exact element={<Cart />} />
|
||||
<Route path='/' exact element={<Home />} />
|
||||
<Route path='*' element={<NotFound />} />
|
||||
</Routes>
|
||||
<Footer/>
|
||||
</BrowserRouter>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
+476
@@ -0,0 +1,476 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap");
|
||||
|
||||
// Variables
|
||||
|
||||
// colors
|
||||
$OuterSpaceCrayola: #22363c;
|
||||
$DeepSpaceSparkle: #335c67;
|
||||
$Cultured: #eceff1;
|
||||
$PersianGreen: #009688;
|
||||
$SolidPink: #92374d;
|
||||
|
||||
//size
|
||||
$NavbarHeight: 64px;
|
||||
$FooterHeight: 22px;
|
||||
|
||||
$xs: 21rem; // 336px;
|
||||
$sm: 48rem; // 768px;
|
||||
$md: 64rem; // 1024px;
|
||||
$lg: 90rem; // 1440px;
|
||||
$xl: 120rem; // 1920px;
|
||||
$breakpoints: $xs, $sm, $md, $lg, $xl;
|
||||
|
||||
// Mixins
|
||||
@mixin layout($breakpoint, $direction: min) {
|
||||
@if $direction == min {
|
||||
@media (min-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@media (max-width: $breakpoint) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// use the custom value if the breakpoint is not part of the pre-defined list
|
||||
}
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin hover-animation {
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
// reset
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "Nanum Gothic Coding", monospace;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $PersianGreen;
|
||||
@include hover-animation();
|
||||
}
|
||||
|
||||
// layout
|
||||
.responsive-layout {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 1rem;
|
||||
@include layout($xl, min) {
|
||||
max-width: $lg;
|
||||
}
|
||||
@include layout($xl, max) {
|
||||
max-width: $lg;
|
||||
}
|
||||
|
||||
@include layout($lg, max) {
|
||||
max-width: $md;
|
||||
}
|
||||
|
||||
@include layout($md, max) {
|
||||
max-width: $sm;
|
||||
}
|
||||
@include layout($sm, max) {
|
||||
max-width: $xs;
|
||||
}
|
||||
}
|
||||
|
||||
// spinner
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
// aspect-ratio: 1;
|
||||
border-radius: 50%;
|
||||
background: $PersianGreen;
|
||||
--_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
|
||||
-webkit-mask: var(--_m);
|
||||
mask: var(--_m);
|
||||
-webkit-mask-composite: source-out;
|
||||
mask-composite: subtract;
|
||||
animation: spin 1s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
// navbar
|
||||
.navbar-background {
|
||||
background-color: $OuterSpaceCrayola;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
height: $NavbarHeight;
|
||||
align-items: center;
|
||||
@extend .responsive-layout;
|
||||
|
||||
.title {
|
||||
@include hover-animation();
|
||||
font-size: 2rem;
|
||||
float: left;
|
||||
color: $Cultured;
|
||||
@include layout($md, max) {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
@include layout($sm, max) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-bag {
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $Cultured;
|
||||
svg {
|
||||
color: $Cultured;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.nav-quantity {
|
||||
@include flex-center();
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: $PersianGreen;
|
||||
|
||||
margin-left: 5px;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// footer
|
||||
.footer {
|
||||
@include flex-center();
|
||||
height: $FooterHeight;
|
||||
color: $Cultured;
|
||||
background-color: $OuterSpaceCrayola;
|
||||
}
|
||||
|
||||
// home
|
||||
.home-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
|
||||
h2 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// card
|
||||
.card-list {
|
||||
margin: 1rem auto;
|
||||
padding: 1rem;
|
||||
border: 1px solid $DeepSpaceSparkle;
|
||||
border-radius: 4px;
|
||||
width: 250px;
|
||||
max-width: 100%;
|
||||
min-height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@include hover-animation();
|
||||
|
||||
button {
|
||||
border: 1px solid $PersianGreen;
|
||||
border-radius: 20px;
|
||||
outline: none;
|
||||
// background-color: $Cultured;
|
||||
// background-color: $PersianGreen;
|
||||
// color: $Cultured;
|
||||
color: $PersianGreen;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
height: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
letter-spacing: 1.1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 10rem;
|
||||
min-height: 8rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.image-container {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.category,
|
||||
.price,
|
||||
.discount,
|
||||
.stock {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
font-size: 14px;
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.category {
|
||||
span {
|
||||
background-color: $OuterSpaceCrayola;
|
||||
color: $Cultured;
|
||||
font-size: 10px;
|
||||
border-radius: 20px;
|
||||
padding: 0.2rem 0.5rem;
|
||||
// border-bottom: 1px solid #335c67;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cart
|
||||
.cart-container {
|
||||
min-height: calc(100vh - $NavbarHeight - $FooterHeight - 2rem);
|
||||
|
||||
.titles {
|
||||
margin: 2rem 0 1rem 0;
|
||||
border-bottom: 1px solid $OuterSpaceCrayola;
|
||||
.product-title {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
.total-title {
|
||||
padding-right: 0.5rem;
|
||||
justify-self: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
margin-top: 2rem;
|
||||
border-bottom: 0.5px solid $OuterSpaceCrayola;
|
||||
|
||||
.cart-product {
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
width: 100px;
|
||||
max-width: 100%;
|
||||
max-height: 100px;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
margin: 1rem;
|
||||
background: none;
|
||||
color: $SolidPink;
|
||||
&:hover {
|
||||
color: $PersianGreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quantity {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 130px;
|
||||
max-width: 100%;
|
||||
border: 0.5px solid $OuterSpaceCrayola;
|
||||
border-radius: 5px;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: none;
|
||||
padding: 0.7rem 1.5rem;
|
||||
cursor: pointer;
|
||||
// font-size: 2rem;
|
||||
}
|
||||
.count {
|
||||
padding: 0.7rem 0;
|
||||
}
|
||||
}
|
||||
.total-price {
|
||||
justify-self: right;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-item,
|
||||
.titles {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 3fr 1fr 1fr 1fr;
|
||||
column-gap: 0.5rem;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding-top: 2rem;
|
||||
|
||||
.clear-cart {
|
||||
@include hover-animation();
|
||||
width: 130px;
|
||||
max-width: 100%;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1.1px;
|
||||
border: 0.5px solid $SolidPink;
|
||||
color: $SolidPink;
|
||||
background: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.cart-checkout {
|
||||
width: 270px;
|
||||
max-width: 100%;
|
||||
.subtotal {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
.amount {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
@include hover-animation();
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
outline: none;
|
||||
background-color: $OuterSpaceCrayola;
|
||||
color: $Cultured;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
height: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
letter-spacing: 1.1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.continue-shopping {
|
||||
@include flex-center();
|
||||
}
|
||||
.no-cart-items {
|
||||
@include flex-center();
|
||||
flex-direction: column;
|
||||
min-height: calc(100vh - $NavbarHeight - $FooterHeight - 4rem);
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include layout($sm, max) {
|
||||
.titles {
|
||||
display: none;
|
||||
}
|
||||
.cart-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 20rem;
|
||||
border: 0.5px solid $OuterSpaceCrayola;
|
||||
border-radius: 4px;
|
||||
padding: 1rem;
|
||||
.cart-product {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
img {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
& > div > p {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
button{
|
||||
font-size: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
.price{
|
||||
margin-bottom: 1rem;
|
||||
&::before{
|
||||
content: "Price:";
|
||||
}
|
||||
}
|
||||
.total-price{
|
||||
margin-top: 1rem;
|
||||
&::before{
|
||||
content: "Total Price:";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cart-summary {
|
||||
flex-direction: column;
|
||||
.clear-cart {
|
||||
margin-bottom: 2rem;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// not found
|
||||
.not-found {
|
||||
@include flex-center();
|
||||
flex-direction: column;
|
||||
color: $OuterSpaceCrayola;
|
||||
min-height: calc(100vh - $NavbarHeight - $FooterHeight);
|
||||
h2 {
|
||||
height: 48px;
|
||||
}
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
// back to home button
|
||||
.back-to-home {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.go-to-cart {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const BackHomeButton = (props) => {
|
||||
const { text } = props;
|
||||
return (
|
||||
<Link to='/' className='back-to-home'>
|
||||
<span>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='16'
|
||||
height='16'
|
||||
fill='currentColor'
|
||||
className='bi bi-arrow-left'
|
||||
viewBox='0 0 16 16'>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span> {text}</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default BackHomeButton;
|
||||
@@ -0,0 +1,49 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { addToCart, getTotals } from '../features/cartSlice';
|
||||
|
||||
import { Capitalize } from '../features/Utils';
|
||||
|
||||
const Card = ({ product }) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const cart = useSelector((state) => state.cart);
|
||||
useEffect(() => {
|
||||
dispatch(getTotals());
|
||||
}, [cart, dispatch]);
|
||||
|
||||
const handleAddToCart = (product) => {
|
||||
dispatch(addToCart(product));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<h3 className='title'>{Capitalize(product.title)}</h3>
|
||||
<div className='image-container'>
|
||||
<img src={product.images[0]} alt={Capitalize(product.title)} />
|
||||
</div>
|
||||
<div className='category'>
|
||||
<span>{Capitalize(product.category)}</span>
|
||||
<span>{Capitalize(product.brand)}</span>
|
||||
</div>
|
||||
<p className='description'>{Capitalize(product.description)}</p>
|
||||
<div>
|
||||
<p className='discount'>
|
||||
<span>Discount: </span>
|
||||
<span>{product.discountPercentage}%</span>
|
||||
</p>
|
||||
<p className='price'>
|
||||
<span>Price:</span>
|
||||
<span>€{product.price}</span>
|
||||
</p>
|
||||
<p className='stock'>
|
||||
<span>Stoc:</span>
|
||||
<span>{product.stock}</span>
|
||||
</p>
|
||||
</div>
|
||||
<button onClick={() => handleAddToCart(product)}>Add to cart</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
addToCart,
|
||||
decreaseCart,
|
||||
removeFromCart,
|
||||
clearCart,
|
||||
getTotals,
|
||||
} from '../features/cartSlice';
|
||||
|
||||
import { Capitalize } from '../features/Utils';
|
||||
import BackHomeButton from './BackHomeButton';
|
||||
|
||||
const Cart = () => {
|
||||
const cart = useSelector((state) => state.cart);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(getTotals());
|
||||
}, [cart, dispatch]);
|
||||
|
||||
const handleRemoveFromCart = (cartItem) => {
|
||||
dispatch(removeFromCart(cartItem));
|
||||
};
|
||||
const handleDecreaseCart = (cartItem) => {
|
||||
dispatch(decreaseCart(cartItem));
|
||||
};
|
||||
const handleIncreaseCart = (cartItem) => {
|
||||
dispatch(addToCart(cartItem));
|
||||
};
|
||||
const handleClearCart = () => {
|
||||
dispatch(clearCart());
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='responsive-layout'>
|
||||
<div className='cart-container'>
|
||||
<h2>Cart</h2>
|
||||
{cart.cartItems.length === 0 ? (
|
||||
<div className='no-cart-items'>
|
||||
<p>Your cart is empty</p>
|
||||
<BackHomeButton text={'Start Shopping'} />
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className='titles'>
|
||||
<h3 className='product-title'>Product</h3>
|
||||
<h3>Price</h3>
|
||||
<h3>Quantity</h3>
|
||||
<h3 className='total-title'>Total</h3>
|
||||
</div>
|
||||
<>
|
||||
{cart.cartItems?.map((cartItem) => (
|
||||
<div className='cart-item' key={cartItem.id}>
|
||||
<div className='cart-product'>
|
||||
<img src={cartItem.images[0]} alt={cartItem.title} />
|
||||
<div>
|
||||
<h3>{Capitalize(cartItem.title)}</h3>
|
||||
<p>{cartItem.description}</p>
|
||||
<button onClick={() => handleRemoveFromCart(cartItem)}>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='price'>€{cartItem.price}</div>
|
||||
<div className='quantity'>
|
||||
<button onClick={() => handleDecreaseCart(cartItem)}>
|
||||
-
|
||||
</button>
|
||||
<div className='count'>{cartItem.cartQuantity}</div>
|
||||
<button onClick={() => handleIncreaseCart(cartItem)}>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div className='total-price'>
|
||||
€{cartItem.price * cartItem.cartQuantity}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
<div className='cart-summary'>
|
||||
<button className='clear-cart' onClick={() => handleClearCart()}>
|
||||
Clear Cart
|
||||
</button>
|
||||
<div className='cart-checkout'>
|
||||
<div className='subtotal'>
|
||||
<span>Subtotal</span>
|
||||
<span className='amount'>€{cart.cartTotalAmount}</span>
|
||||
</div>
|
||||
<button>Checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='continue-shopping'>
|
||||
<BackHomeButton text={'Continue Shopping'} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Cart;
|
||||
@@ -0,0 +1,9 @@
|
||||
const Footer = () => {
|
||||
const getCurrentYear = () => {
|
||||
return new Date().getFullYear();
|
||||
};
|
||||
|
||||
return <div className='footer'>Dan Dobos © {getCurrentYear()}</div>;
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const GoToCartButton = (props) => {
|
||||
const { text } = props;
|
||||
return (
|
||||
<div>
|
||||
{text}
|
||||
<br />
|
||||
<Link to='/cart' className='go-to-cart'>
|
||||
<span>Go To Cart </span>
|
||||
<span>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
width='14'
|
||||
height='8'
|
||||
fill='currentColor'
|
||||
className='bi bi-arrow-right'
|
||||
viewBox='0 0 16 16'>
|
||||
<path
|
||||
fillRule='evenodd'
|
||||
d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoToCartButton;
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useGetProductsQuery } from '../features/productsApi';
|
||||
import Card from './Card';
|
||||
|
||||
const Home = () => {
|
||||
const { data, error, isLoading } = useGetProductsQuery();
|
||||
|
||||
return (
|
||||
<div className='responsive-layout'>
|
||||
<section className='home-container'>
|
||||
<h2>Products</h2>
|
||||
{isLoading ? (
|
||||
<p className='spinner'></p>
|
||||
) : error ? (
|
||||
<p>An error occoured: {error} </p>
|
||||
) : (
|
||||
<>
|
||||
{data.products?.map((product) => (
|
||||
<article className='card-list' key={product.id}>
|
||||
<Card product={product} />
|
||||
</article>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
@@ -0,0 +1,32 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
const Navbar = () => {
|
||||
const { cartTotalQuantity } = useSelector((state) => state.cart);
|
||||
|
||||
return (
|
||||
<div className='navbar-background'>
|
||||
<nav className='navbar'>
|
||||
<Link to='/' className='title'>
|
||||
React Online Shop
|
||||
</Link>
|
||||
<Link to='/cart'>
|
||||
<div className='nav-bag'>
|
||||
<svg
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
fill='currentColor'
|
||||
className='bi bi-bag'
|
||||
viewBox='0 0 16 16'>
|
||||
<path d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z' />
|
||||
</svg>
|
||||
<span className='nav-quantity'>
|
||||
<span>{cartTotalQuantity}</span>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@@ -0,0 +1,13 @@
|
||||
import BackHomeButton from './BackHomeButton'
|
||||
|
||||
const NotFound = () => {
|
||||
return (
|
||||
<div className='not-found'>
|
||||
<h2>404</h2>
|
||||
<p>Page not found</p>
|
||||
<BackHomeButton text={"Home"}/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotFound;
|
||||
@@ -0,0 +1,3 @@
|
||||
export const Capitalize = (text) => {
|
||||
return text.replace(/[_-]/g, " ").replace(/(^\w|\s\w)(\S*)/g, (_,m1,m2) => m1.toUpperCase()+m2.toLowerCase())
|
||||
};
|
||||
@@ -0,0 +1,116 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Capitalize } from './Utils';
|
||||
import GoToCartButton from '../components/GoToCartButton';
|
||||
|
||||
const initialState = {
|
||||
cartItems: localStorage.getItem('cartItems')
|
||||
? JSON.parse(localStorage.getItem('cartItems'))
|
||||
: [],
|
||||
cartTotalQuantity: 0,
|
||||
cartTotalAmount: 0,
|
||||
};
|
||||
|
||||
const toastifyOptions = {
|
||||
position: 'bottom-left',
|
||||
icon: false,
|
||||
};
|
||||
|
||||
const cartSlice = createSlice({
|
||||
name: 'cart',
|
||||
initialState,
|
||||
reducers: {
|
||||
addToCart(state, action) {
|
||||
const itemIndex = state.cartItems.findIndex(
|
||||
(item) => item.id === action.payload.id
|
||||
);
|
||||
if (itemIndex >= 0) {
|
||||
state.cartItems[itemIndex].cartQuantity += 1;
|
||||
|
||||
let multipleItemsText = `Increased ${Capitalize(
|
||||
state.cartItems[itemIndex].title
|
||||
)} quantity to ${state.cartItems[itemIndex].cartQuantity}`;
|
||||
|
||||
|
||||
|
||||
toast.info(
|
||||
window.location.href.indexOf('cart') !== -1 ? (
|
||||
multipleItemsText
|
||||
) : (
|
||||
<GoToCartButton text={multipleItemsText} />
|
||||
),
|
||||
toastifyOptions
|
||||
);
|
||||
} else {
|
||||
const tempProduct = { ...action.payload, cartQuantity: 1 };
|
||||
state.cartItems.push(tempProduct);
|
||||
let firstItemText = `${Capitalize(action.payload.title)} added to cart`
|
||||
|
||||
toast.success(
|
||||
<GoToCartButton text={firstItemText} />,
|
||||
toastifyOptions
|
||||
);
|
||||
}
|
||||
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
|
||||
},
|
||||
removeFromCart(state, action) {
|
||||
const nextCartItems = state.cartItems.filter(
|
||||
(cartItem) => cartItem.id !== action.payload.id
|
||||
);
|
||||
state.cartItems = nextCartItems;
|
||||
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
|
||||
toast.error(`${Capitalize(action.payload.title)} removed from cart`, toastifyOptions);
|
||||
},
|
||||
decreaseCart(state, action) {
|
||||
const itemIndex = state.cartItems.findIndex(
|
||||
(cartItem) => cartItem.id === action.payload.id
|
||||
);
|
||||
if (state.cartItems[itemIndex].cartQuantity > 1) {
|
||||
state.cartItems[itemIndex].cartQuantity -= 1;
|
||||
toast.info(
|
||||
`Decreased ${Capitalize(action.payload.title)} cart quantity`,
|
||||
toastifyOptions
|
||||
);
|
||||
} else if (state.cartItems[itemIndex].cartQuantity === 1) {
|
||||
const nextCartItems = state.cartItems.filter(
|
||||
(cartItem) => cartItem.id !== action.payload.id
|
||||
);
|
||||
state.cartItems = nextCartItems;
|
||||
toast.error(
|
||||
`${Capitalize(action.payload.title)} removed from cart`,
|
||||
toastifyOptions
|
||||
);
|
||||
}
|
||||
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
|
||||
},
|
||||
clearCart(state, action) {
|
||||
state.cartItems = [];
|
||||
toast.error(`Cart cleared`, toastifyOptions);
|
||||
localStorage.setItem('cartItems', JSON.stringify(state.cartItems));
|
||||
},
|
||||
getTotals(state, action) {
|
||||
let { total, quantity } = state.cartItems.reduce(
|
||||
(cartTotal, cartItem) => {
|
||||
const { price, cartQuantity } = cartItem;
|
||||
const itemTotal = price * cartQuantity;
|
||||
|
||||
cartTotal.total += itemTotal;
|
||||
cartTotal.quantity += cartQuantity;
|
||||
|
||||
return cartTotal;
|
||||
},
|
||||
{
|
||||
total: 0,
|
||||
quantity: 0,
|
||||
}
|
||||
);
|
||||
state.cartTotalQuantity = quantity;
|
||||
state.cartTotalAmount = total;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { addToCart, removeFromCart, decreaseCart, clearCart, getTotals } =
|
||||
cartSlice.actions;
|
||||
|
||||
export default cartSlice.reducer;
|
||||
@@ -0,0 +1,13 @@
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
|
||||
|
||||
export const productsApi = createApi({
|
||||
reducerPath: 'productsApi',
|
||||
baseQuery: fetchBaseQuery({ baseUrl: 'https://dummyjson.com/' }),
|
||||
endpoints: (builder) => ({
|
||||
getProducts: builder.query({
|
||||
query: () => 'products',
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const { useGetProductsQuery } = productsApi;
|
||||
@@ -0,0 +1,30 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
import { configureStore } from '@reduxjs/toolkit';
|
||||
import { setupListeners } from '@reduxjs/toolkit/query';
|
||||
import { Provider } from 'react-redux';
|
||||
|
||||
import { productsApi } from './features/productsApi';
|
||||
import cartReducer from './features/cartSlice';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
cart: cartReducer,
|
||||
[productsApi.reducerPath]: productsApi.reducer,
|
||||
},
|
||||
middleware: (getDefaultMiddleware) =>
|
||||
getDefaultMiddleware().concat(productsApi.middleware),
|
||||
});
|
||||
|
||||
setupListeners(store.dispatch);
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<App />
|
||||
</Provider>
|
||||
</React.StrictMode>
|
||||
);
|
||||
Reference in New Issue
Block a user