Skip to content

Commit

Permalink
mostly variable renaming
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmoniava
gmoniava committed Oct 13, 2020
1 parent 8c99ab3 commit 6601260
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 47 deletions.
46 changes: 18 additions & 28 deletions src/Components/Details/Details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,11 @@ class ConnectedDetails extends Component {
constructor(props) {
super(props);

this.isCompMounted = false;

this.state = {
relatedItems: [],
quantity: 1,
item: null,
itemLoading: false
itemLoading: false,
};
}

Expand All @@ -28,18 +26,15 @@ class ConnectedDetails extends Component {
let item = await Api.getItemUsingID(productId);

let relatedItems = await Api.searchItems({
category: item.category
category: item.category,
});

// Make sure this component is still mounted before we set state..
if (this.isCompMounted) {
this.setState({
item,
quantity: 1,
relatedItems: relatedItems.data.filter(x => x.id !== item.id),
itemLoading: false
});
}
this.setState({
item,
quantity: 1,
relatedItems: relatedItems.data.filter((x) => x.id !== item.id),
itemLoading: false,
});
}

componentDidUpdate(prevProps, prevState, snapshot) {
Expand All @@ -50,14 +45,9 @@ class ConnectedDetails extends Component {
}

componentDidMount() {
this.isCompMounted = true;
this.fetchProductAndRelatedItems(this.props.match.params.id);
}

componentWillUnmount() {
this.isCompMounted = false;
}

render() {
if (this.state.itemLoading) {
return <CircularProgress className="circular" />;
Expand All @@ -73,7 +63,7 @@ class ConnectedDetails extends Component {
style={{
marginBottom: 20,
marginTop: 10,
fontSize: 22
fontSize: 22,
}}
>
{this.state.item.name}
Expand All @@ -87,20 +77,20 @@ class ConnectedDetails extends Component {
style={{
border: "1px solid lightgray",
borderRadius: "5px",
objectFit: "cover"
objectFit: "cover",
}}
/>
<div
style={{
flex: 1,
marginLeft: 20,
display: "flex",
flexDirection: "column"
flexDirection: "column",
}}
>
<div
style={{
fontSize: 16
fontSize: 16,
}}
>
Price: {this.state.item.price} $
Expand All @@ -117,7 +107,7 @@ class ConnectedDetails extends Component {
style={{ marginTop: 20, marginBottom: 10, width: 70 }}
label="Quantity"
inputProps={{ min: 1, max: 10, step: 1 }}
onChange={e => {
onChange={(e) => {
this.setState({ quantity: parseInt(e.target.value) });
}}
/>
Expand All @@ -129,7 +119,7 @@ class ConnectedDetails extends Component {
this.props.dispatch(
addItemInCart({
...this.state.item,
quantity: this.state.quantity
quantity: this.state.quantity,
})
);
}}
Expand All @@ -144,7 +134,7 @@ class ConnectedDetails extends Component {
style={{
marginTop: 20,
marginBottom: 20,
fontSize: 22
fontSize: 22,
}}
>
Product Description
Expand All @@ -153,7 +143,7 @@ class ConnectedDetails extends Component {
style={{
maxHeight: 200,
fontSize: 13,
overflow: "auto"
overflow: "auto",
}}
>
{this.state.item.description
Expand All @@ -166,12 +156,12 @@ class ConnectedDetails extends Component {
style={{
marginTop: 20,
marginBottom: 10,
fontSize: 22
fontSize: 22,
}}
>
Related Items
</div>
{this.state.relatedItems.slice(0, 3).map(x => {
{this.state.relatedItems.slice(0, 3).map((x) => {
return <Item key={x.id} item={x} />;
})}
</div>
Expand Down
22 changes: 13 additions & 9 deletions src/Components/ProductList/ProductList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,32 @@ import ProductsHeader from "../ProductsHeader/ProductsHeader";
// This component is responsible for fetching products.
// It determines from query string which products to fetch.
// The URL is checked on initial mount and when URL changes.
// Lot of the state for this component and its children
// lives actually in the query string (e.g., category of products, price filter).
// The flow is on user action, we modify the query string, then new products are refetched.

class ProductList extends Component {
constructor(props) {
super(props);

this.state = {
loading: false,
totalItemsCount: null,
items: []
items: [],
};
this.updateQueryStr = this.updateQueryStr.bind(this);
}

async fetchData() {
this.setState({ loading: true });

// Parse the query string
let qsAsObject = queryString.parse(this.props.location.search);

let results = await Api.searchItems(qsAsObject);
let parsedQueryStr = queryString.parse(this.props.location.search);
let results = await Api.searchItems(parsedQueryStr);

this.setState({
items: results.data,
loading: false,
totalItemsCount: results.totalLength
totalItemsCount: results.totalLength,
});
}

Expand All @@ -41,9 +43,11 @@ class ProductList extends Component {
}

updateQueryStr(newValues) {
let current = queryString.parse(this.props.location.search);
let currentQueryStr = queryString.parse(this.props.location.search);

// Navigate to the new URL
this.props.history.push(
"/?" + queryString.stringify({ ...current, ...newValues })
"/?" + queryString.stringify({ ...currentQueryStr, ...newValues })
);
}

Expand Down Expand Up @@ -81,7 +85,7 @@ class ProductList extends Component {
/>

<div style={{ flex: 1 }}>
{this.state.items.map(item => {
{this.state.items.map((item) => {
return <Item key={item.id} item={item} />;
})}
</div>
Expand Down
19 changes: 9 additions & 10 deletions src/Components/ProductsHeader/ProductsHeader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,20 @@ import { withRouter } from "react-router-dom";

class ProductsHeader extends Component {
state = {
openPriceDialog: false
openPriceDialog: false,
};

render() {
let { parsedQueryStr, totalItemsCount, updateQueryStr } = this.props;

// Lot of values come from the query string.
let usePriceFilter = parsedQueryStr.usePriceFilter === "true";
let minPrice = parsedQueryStr.minPrice || 0;
let maxPrice = parsedQueryStr.maxPrice || 1000;
let sortValue = parsedQueryStr.sortValue || "lh";
let keyword = parsedQueryStr.term;
let category = parsedQueryStr.category;

let subtitle = (
let pageSubtitle = (
<div>
<span style={{ fontSize: 12, color: "gray" }}>
{totalItemsCount +
Expand All @@ -37,7 +36,7 @@ class ProductsHeader extends Component {
style={{
fontWeight: "bold",
fontSize: 12,
color: "gray"
color: "gray",
}}
>
{keyword}
Expand All @@ -51,18 +50,18 @@ class ProductsHeader extends Component {
<div style={{ padding: 10, display: "flex", alignItems: "center" }}>
<div style={{ flex: 1, fontSize: 24 }}>
<div>{category ? category : "Popular Products"}</div>
{subtitle}
{pageSubtitle}
</div>

<FormControlLabel
control={
<Checkbox
color="primary"
checked={usePriceFilter}
onChange={e => {
onChange={(e) => {
updateQueryStr({
usePriceFilter: e.target.checked,
page: 1
page: 1,
});
}}
/>
Expand All @@ -76,7 +75,7 @@ class ProductsHeader extends Component {
style={{ marginRight: 20 }}
onClick={() => {
this.setState({
openPriceDialog: true
openPriceDialog: true,
});
}}
>
Expand All @@ -86,7 +85,7 @@ class ProductsHeader extends Component {
)}
<Select
value={sortValue}
onChange={e => {
onChange={(e) => {
updateQueryStr({ sortValue: e.target.value });
}}
>
Expand All @@ -106,7 +105,7 @@ class ProductsHeader extends Component {
}}
onClose={() =>
this.setState({
openPriceDialog: false
openPriceDialog: false,
})
}
/>
Expand Down

0 comments on commit 6601260

Please sign in to comment.