Skip to content

Commit 91b3abc

Browse files
albertodev7albertodev7
committed
Fixing unnecesery rerenders and bulding ui for filters
1 parent 2fea687 commit 91b3abc

File tree

6 files changed

+203
-62
lines changed

6 files changed

+203
-62
lines changed

‎client/src/Containers/Filters/index.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Container } from 'unstated'
2+
3+
interface State {
4+
guests: number
5+
priceMin: number
6+
priceMax: number
7+
}
8+
9+
export class Filter extends Container<State> {
10+
public readonly state = {
11+
guests: 1,
12+
priceMin: 0,
13+
priceMax: 10000000
14+
}
15+
16+
public updateState = (newState: object) => this.setState(newState)
17+
}

‎client/src/Graphql/SearchListings/index.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,18 @@ interface Props {
3333
children: (values: WithListings) => React.ReactNode
3434
}
3535

36-
export class SearchListingsQuery extends React.PureComponent<Props> {
36+
export class SearchListingsQuery extends React.Component<Props> {
37+
public shouldComponentUpdate(nextProps: Props) {
38+
if (this.props.address !== nextProps.address) {
39+
return true
40+
}
41+
42+
return false
43+
}
44+
3745
public render() {
3846
const { address } = this.props
39-
console.log(address)
47+
4048
return (
4149
<Query query={searchListingsQuery} variables={{ address }}>
4250
{({ data, loading }) => {

‎client/src/Pages/Listings/Components/Filters/index.tsx

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,48 @@
11
import * as React from 'react'
22

3-
import { Container, FilterItem } from './style'
4-
5-
export const Filters: React.SFC<{}> = () => (
6-
<Container>
7-
<FilterItem>Data</FilterItem>
8-
<FilterItem>Goście</FilterItem>
9-
<FilterItem>Rodzaj miejsca</FilterItem>
10-
<FilterItem>Cena</FilterItem>
11-
</Container>
12-
)
3+
import { Container, FilterItem, PopOver } from './style'
4+
5+
interface State {
6+
show: string
7+
}
8+
9+
export class Filters extends React.PureComponent<{}, State> {
10+
public readonly state = {
11+
show: ''
12+
}
13+
14+
private toggle = (toShow: string) =>
15+
this.setState(({ show }) => ({ show: toShow === show ? '' : toShow }))
16+
17+
public render() {
18+
const { show } = this.state
19+
20+
return (
21+
<Container>
22+
<FilterItem
23+
onClick={() => this.toggle('date')}
24+
focus={show === 'date'}
25+
>
26+
Data
27+
{show === 'date' && <PopOver />}
28+
</FilterItem>
29+
30+
<FilterItem
31+
onClick={() => this.toggle('guests')}
32+
focus={show === 'guests'}
33+
>
34+
Goscie
35+
{show === 'guests' && <PopOver />}
36+
</FilterItem>
37+
38+
<FilterItem
39+
onClick={() => this.toggle('price')}
40+
focus={show === 'price'}
41+
>
42+
Cena
43+
{show === 'price' && <PopOver />}
44+
</FilterItem>
45+
</Container>
46+
)
47+
}
48+
}

‎client/src/Pages/Listings/Components/Filters/style.tsx

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import styled from 'styled-components'
1+
import styled, { css } from 'styled-components'
2+
3+
interface FilterItemProps {
4+
focus?: boolean
5+
}
26

37
export const Container = styled.div`
48
width: 100%;
@@ -10,17 +14,42 @@ export const Container = styled.div`
1014
border-bottom: 1px solid #e3e3e3;
1115
box-sizing: border-box;
1216
`
13-
export const FilterItem = styled.div`
17+
export const FilterItem = styled.div<FilterItemProps>`
1418
margin: 0 10px 0 10px;
1519
padding: 6px 12px 6px 12px;
20+
position: relative;
1621
border-radius: 4px;
1722
border: 1px solid #dbdfdf;
1823
font-size: 14px;
1924
box-sizing: border-box;
2025
transition: background 200ms ease;
2126
cursor: pointer;
27+
user-select: none;
2228
2329
&:hover {
2430
background-color: #dbdfdf;
2531
}
32+
33+
${p =>
34+
p.focus &&
35+
css`
36+
background-color: #008387;
37+
border: 1px solid #008387;
38+
color: white;
39+
40+
&:hover {
41+
background-color: rgb(0, 108, 112);
42+
}
43+
`};
44+
`
45+
export const PopOver = styled.div`
46+
position: absolute;
47+
top: 43px;
48+
left: -2px;
49+
width: 250px;
50+
height: 200px;
51+
border-radius: 4px;
52+
border: 1px solid lightgray;
53+
background-color: white;
54+
/* box-shadow: 0px 0px 15px lightgray; */
2655
`

‎client/src/Pages/Listings/Components/ListingsList/Components/ListingItem/index.tsx

Lines changed: 94 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -31,49 +31,102 @@ interface Props {
3131

3232
const getRoute = (id: number) => `/listing/${id}`
3333

34-
export const ListingItem: React.SFC<Props> = ({
35-
id,
36-
name,
37-
category,
38-
description,
39-
price,
40-
beds,
41-
guests,
42-
lat,
43-
lng,
44-
amenities,
45-
setPostion
46-
}) => (
47-
<Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
48-
<Container onMouseEnter={() => setPostion(lat, lng)}>
49-
<Image src="https://a0.muscache.com/im/pictures/126e41c4-2a1b-4251-b516-d239351126f7.jpg?aki_policy=large" />
34+
// export const ListingItem: React.SFC<Props> = ({
35+
// id,
36+
// name,
37+
// category,
38+
// description,
39+
// price,
40+
// beds,
41+
// guests,
42+
// lat,
43+
// lng,
44+
// amenities,
45+
// setPostion
46+
// }) => (
47+
// <Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
48+
// <Container onMouseEnter={() => setPostion(lat, lng)}>
49+
// <Image src="https://a0.muscache.com/im/pictures/126e41c4-2a1b-4251-b516-d239351126f7.jpg?aki_policy=large" />
5050

51-
<Row>
52-
<Details>
53-
<Subtitle>CAŁY APARTAMENT</Subtitle>
54-
<Title>{name}</Title>
51+
// <Row>
52+
// <Details>
53+
// <Subtitle>CAŁY APARTAMENT</Subtitle>
54+
// <Title>{name}</Title>
5555

56-
<RoomsDetails>
57-
<SmallText>{guests} goście •</SmallText>
58-
<SmallText>1 sypialnia •</SmallText>
59-
<SmallText>{beds} Łóżko •</SmallText>
60-
<SmallText>1 Łazienka</SmallText>
61-
</RoomsDetails>
56+
// <RoomsDetails>
57+
// <SmallText>{guests} goście •</SmallText>
58+
// <SmallText>1 sypialnia •</SmallText>
59+
// <SmallText>{beds} Łóżko •</SmallText>
60+
// <SmallText>1 Łazienka</SmallText>
61+
// </RoomsDetails>
6262

63-
<RoomsDetails>
64-
{amenities.map((amenitie, i) => (
65-
<SmallText key={i}>{amenitie} •</SmallText>
66-
))}
67-
</RoomsDetails>
68-
</Details>
63+
// <RoomsDetails>
64+
// {amenities.map((amenitie, i) => (
65+
// <SmallText key={i}>{amenitie} •</SmallText>
66+
// ))}
67+
// </RoomsDetails>
68+
// </Details>
6969

70-
<Pricing>
71-
<Title>{price} zł</Title>
72-
<VerySmallText>za dzien</VerySmallText>
70+
// <Pricing>
71+
// <Title>{price} zł</Title>
72+
// <VerySmallText>za dzien</VerySmallText>
7373

74-
<Stars />
75-
</Pricing>
76-
</Row>
77-
</Container>
78-
</Link>
79-
)
74+
// <Stars />
75+
// </Pricing>
76+
// </Row>
77+
// </Container>
78+
// </Link>
79+
// )
80+
81+
export class ListingItem extends React.PureComponent<Props> {
82+
public render() {
83+
const {
84+
id,
85+
name,
86+
// category,
87+
// description,
88+
price,
89+
beds,
90+
guests,
91+
lat,
92+
lng,
93+
amenities,
94+
setPostion
95+
} = this.props
96+
console.log('RERENDER LISTING ITEM')
97+
return (
98+
<Link to={getRoute(id)} style={{ textDecoration: 'none' }}>
99+
<Container onMouseEnter={() => setPostion(lat, lng)}>
100+
<Image src="https://a0.muscache.com/im/pictures/126e41c4-2a1b-4251-b516-d239351126f7.jpg?aki_policy=large" />
101+
102+
<Row>
103+
<Details>
104+
<Subtitle>CAŁY APARTAMENT</Subtitle>
105+
<Title>{name}</Title>
106+
107+
<RoomsDetails>
108+
<SmallText>{guests} goście •</SmallText>
109+
<SmallText>1 sypialnia •</SmallText>
110+
<SmallText>{beds} Łóżko •</SmallText>
111+
<SmallText>1 Łazienka</SmallText>
112+
</RoomsDetails>
113+
114+
<RoomsDetails>
115+
{amenities.map((amenitie, i) => (
116+
<SmallText key={i}>{amenitie} •</SmallText>
117+
))}
118+
</RoomsDetails>
119+
</Details>
120+
121+
<Pricing>
122+
<Title>{price} zł</Title>
123+
<VerySmallText>za dzien</VerySmallText>
124+
125+
<Stars />
126+
</Pricing>
127+
</Row>
128+
</Container>
129+
</Link>
130+
)
131+
}
132+
}

‎client/src/Pages/Listings/Components/Map/index.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,10 @@ import { Location } from 'src/Containers/Location'
66

77
export const Map = withGoogleMap(() => (
88
<Subscribe to={[Location]}>
9-
{({ state: { center, marker, place } }: Location) =>
10-
(console.log(place.length, 'LENG') as any) || (
11-
<GoogleMap zoom={place.length > 1 ? 13 : 6} center={center}>
12-
{marker.lat && <Marker position={marker} />}
13-
</GoogleMap>
14-
)
15-
}
9+
{({ state: { center, marker, place } }: Location) => (
10+
<GoogleMap zoom={place.length > 1 ? 13 : 6} center={center}>
11+
{marker.lat && <Marker position={marker} />}
12+
</GoogleMap>
13+
)}
1614
</Subscribe>
1715
))

0 commit comments

Comments
 (0)