Skip to content

[REFACTOR] Remove duplicated and unnecessary code #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[REFACTOR] Remove duplicated and unnecessary code #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d32a788
add CardList and refactor the men and women comp
naimatofficial Mar 22, 2023
dcd6e63
refactor the Clothes component & remove extra code
naimatofficial Mar 22, 2023
26a9ce0
refactor the Accessories & ShowProduct
naimatofficial Mar 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27,541 changes: 26,840 additions & 701 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

60 changes: 21 additions & 39 deletions src/components/Accessories/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,26 @@
//Dependencies
import React, { Component } from 'react';
import {Icon} from 'react-materialize';
import { Link } from 'react-router-dom';
import React from "react";
//Internals
import PRODUCTS from '../Data';
import './styles.css';
import CardList from "../Cart/CardList";
import PRODUCTS from "../Data";
import "./styles.css";

class Accessories extends Component {
render() {
return(
<div className="accessories">
<div className="accessories-title">
<h4>Accessories</h4>
</div>
<div className="items">
{PRODUCTS.map((product) => {
if (product.category === "accessories") {
return(
<div className="item">
<Link to={`/products/${product.id}`}>
<div className="product-img">
<img alt={product.name} src={product.img} />
</div>
<div className="product-details">
<h1 id="product-name">{product.name}</h1>
<h4 id="product-description">{product.description}</h4>
</div>
</Link>
<div className="price-add">
<h5 id="product-price">${product.price}</h5>
<Icon small onClick={() => this.addProduct(product)} id="add-icon">add_shopping_cart</Icon>
</div>
</div>
)
}
})}
</div>
</div>
);
}
}
const Accessories = () => {
return (
<div className="accessories">
<div className="accessories-title">
<h4>Accessories</h4>
</div>
<div className="items">
{PRODUCTS.map(
(product) =>
product.category === "accessories" && (
<CardList product={product} key={product.id} />
)
)}
</div>
</div>
);
};

export default Accessories;
73 changes: 33 additions & 40 deletions src/components/BaseLayout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,42 @@
// Dependencies
import React, { Component } from 'react';
import React, { Component } from "react";
// Externals
import Navbar from './components/NavBar';
import Header from './components/Header';
import Footer from './components/Footer';
import './index.css';

const classNames = [
"first-header",
"second-header",
"third-header"
];
import Navbar from "./components/NavBar";
import Header from "./components/Header";
import Footer from "./components/Footer";
import "./index.css";

const classNames = ["first-header", "second-header", "third-header"];

export default class BaseLayout extends Component {
constructor(props) {
super(props);
this.state = {
index: 0,
};
}
constructor(props) {
super(props);
this.state = {
index: 0,
};
}

incrementIndex = () => {
const newIndex = this.state.index + 1;
this.setState({ index: newIndex })
}
incrementIndex = () => {
const newIndex = this.state.index + 1;
this.setState({ index: newIndex });
};

componentDidMount = () => {
setInterval(this.incrementIndex, 3000);
}
componentDidMount = () => {
setInterval(this.incrementIndex, 3000);
};

render() {
const index = this.state.index % classNames.length;
const className = classNames[index];
return(
<div>
<div className={className}>
<Navbar />
<Header />
</div>
<div className="content">
{this.props.children}
</div>
<Footer />
</div>
)
}
render() {
const index = this.state.index % classNames.length;
const className = classNames[index];
return (
<div>
<div className={className}>
<Navbar />
<Header />
</div>
<div className="content">{this.props.children}</div>
<Footer />
</div>
);
}
}
28 changes: 28 additions & 0 deletions src/components/Cart/CardList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
//Dependencies
import React from "react";
import { Icon } from "react-materialize";
import { Link } from "react-router-dom";

const ProductCard = ({ product }) => {
return (
<div className="item">
<Link to={`/products/${product.id}`}>
<div className="product-img">
<img alt={product.name} src={product.img} />
</div>
<div className="product-details">
<h1 id="product-name">{product.name}</h1>
<h4 id="product-description">{product.description}</h4>
</div>
</Link>
<div className="price-add">
<h5 id="product-price">${product.price}</h5>
<Icon small onClick={() => this.addProduct(product)} id="add-icon">
add_shopping_cart
</Icon>
</div>
</div>
);
};

export default ProductCard;
38 changes: 19 additions & 19 deletions src/components/Cart/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
//Dependencies
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import map from 'lodash/map';
import React, { Component } from "react";
import PropTypes from "prop-types";
import map from "lodash/map";
//Internals
import './index.css';
import "./index.css";

class CartProducts extends Component {
static propTypes = {
addItemToCart: PropTypes.func.isRequired,
};
static propTypes = {
addItemToCart: PropTypes.func.isRequired,
};

render() {
return(
<div>
<h1>This is the cart</h1>
<div className="items">
{map(this.props.cartProducts, (product) => {
<h1>{product.name}</h1>
})}
</div>
</div>
);
}
render() {
return (
<div>
<h1>This is the cart</h1>
<div className="items">
{map(this.props.cartProducts, (product) => (
<h1>{product.name}</h1>
))}
</div>
</div>
);
}
}

export default CartProducts;
42 changes: 14 additions & 28 deletions src/components/Clothes/ClothesItems/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,20 @@
//Dependencies
import React from 'react';
import { Icon } from 'react-materialize';
import { Link } from 'react-router-dom';
import React from "react";

//Internals
import PRODUCTS from '../../Data';
import PRODUCTS from "../../Data";
import CardList from "../../Cart/CardList";

const ClothesItems = () => (
<div className="items">
{PRODUCTS.map((product) => {
if (product.category === "clothes") {
return(
<div className="item">
<Link to={`/products/${product.id}`}>
<div className="product-img">
<img alt={product.name} src={product.img} />
</div>
<div className="product-details">
<h1 id="product-name">{product.name}</h1>
<h4 id="product-description">{product.description}</h4>
</div>
</Link>
<div className="price-add">
<h5 id="product-price">${product.price}</h5>
<Icon small onClick={() => this.addProduct(product)} id="add-icon">add_shopping_cart</Icon>
</div>
</div>
)
}
})}
</div>
)
<div className="items">
{PRODUCTS.map((product) => {
return (
product.category === "clothes" && (
<CardList product={product} key={product.id} />
)
);
})}
</div>
);

export default ClothesItems;
51 changes: 26 additions & 25 deletions src/components/Items/AllItems/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
//Dependencies
import React from 'react';
import { Icon } from 'react-materialize';
import { Link } from 'react-router-dom';
import map from 'lodash/map';
import React from "react";
import map from "lodash/map";
//Internals
import PRODUCTS from '../../Data';
import PRODUCTS from "../../Data";
import CardList from "../../Cart/CardList";

const AllItems = () => (
<div className="items">
{map(PRODUCTS, (product)=> (
<div key={product.id} className="item">
<Link to={`/products/${product.id}`}>
<div className="product-img">
<img alt={product.name} src={product.img} />
</div>
<div className="product-details">
<h1 id="product-name">{product.name}</h1>
<h4 id="product-description">{product.description}</h4>
</div>
</Link>
<div className="price-add">
<h5 id="product-price">${product.price}</h5>
<Icon small id="add-icon">add_shopping_cart</Icon>
</div>
</div>
))}
</div>
)
<div className="items">
{map(PRODUCTS, (product) => (
<CardList product={product} key={product.id} />
))}
</div>
);

export default AllItems;

// <div key={product.id} className="item">
// <Link to={`/products/${product.id}`}>
// <div className="product-img">
// <img alt={product.name} src={product.img} />
// </div>
// <div className="product-details">
// <h1 id="product-name">{product.name}</h1>
// <h4 id="product-description">{product.description}</h4>
// </div>
// </Link>
// <div className="price-add">
// <h5 id="product-price">${product.price}</h5>
// <Icon small id="add-icon">add_shopping_cart</Icon>
// </div>
// </div>
42 changes: 14 additions & 28 deletions src/components/Men/MenItems/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,20 @@
//Dependencies
import React from 'react';
import { Icon } from 'react-materialize';
import { Link } from 'react-router-dom';
import React from "react";

//Internals
import PRODUCTS from '../../Data';
import PRODUCTS from "../../Data";
import CardList from "../../Cart/CardList";

const MenItems = () => (
<div className="items">
{PRODUCTS.map((product) => {
if (product.gender === "men") {
return(
<div className="item">
<Link to={`/products/${product.id}`}>
<div className="product-img">
<img alt={product.name} src={product.img} />
</div>
<div className="product-details">
<h1 id="product-name">{product.name}</h1>
<h4 id="product-description">{product.description}</h4>
</div>
</Link>
<div className="price-add">
<h5 id="product-price">${product.price}</h5>
<Icon small onClick={() => this.addProduct(product)} id="add-icon">add_shopping_cart</Icon>
</div>
</div>
)
}
})}
</div>
)
<div className="items">
{PRODUCTS.map((product) => {
return (
product.gender === "men" && (
<CardList product={product} key={product.id} />
)
);
})}
</div>
);

export default MenItems;
Loading