Skip to content

Commit 7d87cd9

Browse files
MichaelDeBoeySaraVieira
MichaelDeBoey
authored and
SaraVieira
committed
Refactor Search to functional components with hooks (codesandbox#1943)
1 parent 0c15dd7 commit 7d87cd9

File tree

6 files changed

+228
-215
lines changed

6 files changed

+228
-215
lines changed

‎packages/app/src/app/pages/Search/Filters/Filter/Sort.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import React, { Component } from 'react';
1+
import React, { useCallback, useState } from 'react';
22
import Down from 'react-icons/lib/md/expand-more';
33
import Up from 'react-icons/lib/md/expand-less';
44
import { SortBy } from 'react-instantsearch-dom';
55

6-
import { Container, Title, Button } from './elements';
6+
import { Button, Container, Title } from './elements';
77

8-
class Filter extends Component {
9-
state = { open: false };
8+
const Sort = ({ defaultRefinement, items, title }) => {
9+
const [open, setOpen] = useState(false);
1010

11-
toggle = () => this.setState(({ open }) => ({ open: !open }));
12-
render() {
13-
const { title, defaultRefinement, items } = this.props;
14-
const { open } = this.state;
15-
return (
16-
<Container open={open}>
17-
<Title>
18-
<span>{title}</span>
19-
<Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
20-
</Title>
21-
<SortBy defaultRefinement={defaultRefinement} items={items} />
22-
</Container>
23-
);
24-
}
25-
}
26-
export default Filter;
11+
const toggle = useCallback(() => {
12+
setOpen(isOpen => !isOpen);
13+
}, []);
14+
15+
return (
16+
<Container open={open}>
17+
<Title>
18+
<span>{title}</span>
19+
20+
<Button onClick={toggle}>{open ? <Up /> : <Down />}</Button>
21+
</Title>
22+
23+
<SortBy defaultRefinement={defaultRefinement} items={items} />
24+
</Container>
25+
);
26+
};
27+
28+
export default Sort;

‎packages/app/src/app/pages/Search/Filters/Filter/index.js‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import React, { Component } from 'react';
1+
import React, { useCallback, useState } from 'react';
22
import Down from 'react-icons/lib/md/expand-more';
33
import Up from 'react-icons/lib/md/expand-less';
44
import { RefinementList } from 'react-instantsearch/dom';
55

6-
import { Container, Title, Button } from './elements';
6+
import { Button, Container, Title } from './elements';
77

8-
class Filter extends Component {
9-
state = { open: false };
8+
const Filter = ({
9+
attributeName,
10+
noSearch,
11+
operator,
12+
title,
13+
transformItems,
14+
}) => {
15+
const [open, setOpen] = useState(false);
16+
17+
const toggle = useCallback(() => {
18+
setOpen(isOpen => !isOpen);
19+
}, []);
20+
21+
return (
22+
<Container open={open}>
23+
<Title>
24+
<span>{title}</span>
25+
26+
<Button onClick={toggle}>{open ? <Up /> : <Down />}</Button>
27+
</Title>
28+
29+
<RefinementList
30+
transformItems={transformItems}
31+
searchable={!noSearch}
32+
showMore={!noSearch}
33+
operator={operator}
34+
attribute={attributeName}
35+
/>
36+
</Container>
37+
);
38+
};
1039

11-
toggle = () => this.setState(({ open }) => ({ open: !open }));
12-
render() {
13-
const { title, attributeName, operator, noSearch } = this.props;
14-
const { open } = this.state;
15-
return (
16-
<Container open={open}>
17-
<Title>
18-
<span>{title}</span>
19-
<Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
20-
</Title>
21-
<RefinementList
22-
transformItems={this.props.transformItems}
23-
searchable={!noSearch}
24-
showMore={!noSearch}
25-
operator={operator}
26-
attribute={attributeName}
27-
/>
28-
</Container>
29-
);
30-
}
31-
}
3240
export default Filter;

‎packages/app/src/app/pages/Search/Filters/index.js‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,47 @@
1-
import React from 'react';
21
import getTemplate from '@codesandbox/common/lib/templates';
32
import { ALGOLIA_DEFAULT_INDEX } from '@codesandbox/common/lib/utils/config';
3+
import React from 'react';
44

5+
import { Container } from './elements';
56
import Filter from './Filter';
67
import Sort from './Filter/Sort';
7-
import { Container } from './elements';
88

9-
function Filters() {
10-
return (
11-
<Container>
12-
<Sort
13-
title="Sort By"
14-
items={[
15-
{ value: ALGOLIA_DEFAULT_INDEX, label: 'Views' },
16-
{ value: `${ALGOLIA_DEFAULT_INDEX}_likes`, label: 'Likes' },
17-
{ value: `${ALGOLIA_DEFAULT_INDEX}_date`, label: 'Date' },
18-
]}
19-
defaultRefinement={ALGOLIA_DEFAULT_INDEX}
20-
/>
21-
<Filter
22-
title="Templates"
23-
operator="or"
24-
attributeName="template"
25-
transformItems={items =>
26-
items.map(({ label, ...item }) => {
27-
const template = getTemplate(label);
9+
const Filters = () => (
10+
<Container>
11+
<Sort
12+
defaultRefinement={ALGOLIA_DEFAULT_INDEX}
13+
items={[
14+
{ value: ALGOLIA_DEFAULT_INDEX, label: 'Views' },
15+
{ value: `${ALGOLIA_DEFAULT_INDEX}_likes`, label: 'Likes' },
16+
{ value: `${ALGOLIA_DEFAULT_INDEX}_date`, label: 'Date' },
17+
]}
18+
title="Sort By"
19+
/>
20+
21+
<Filter
22+
attributeName="template"
23+
operator="or"
24+
title="Templates"
25+
transformItems={items =>
26+
items.map(({ label, ...item }) => {
27+
const { name, niceName } = getTemplate(label);
28+
29+
return {
30+
...item,
31+
label: name === label ? niceName : label,
32+
};
33+
})
34+
}
35+
/>
36+
37+
<Filter
38+
attributeName="npm_dependencies.dependency"
39+
operator="and"
40+
title="Dependencies"
41+
/>
2842

29-
return {
30-
...item,
31-
label: template.name === label ? template.niceName : label,
32-
};
33-
})
34-
}
35-
/>
36-
<Filter
37-
title="Dependencies"
38-
operator="and"
39-
attributeName="npm_dependencies.dependency"
40-
/>
41-
<Filter title="Tags" operator="or" attributeName="tags" />
42-
</Container>
43-
);
44-
}
43+
<Filter attributeName="tags" operator="or" title="Tags" />
44+
</Container>
45+
);
4546

4647
export default Filters;

‎packages/app/src/app/pages/Search/ResultInfo/index.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ import { Stats, ClearRefinements } from 'react-instantsearch/dom';
33

44
import { ClearAllContainer } from './elements';
55

6-
function ResultInfo() {
7-
return (
8-
<div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
9-
<Stats
10-
translations={{
11-
stats: nbHits => `${nbHits.toLocaleString()} results found`,
12-
}}
13-
/>
14-
<ClearAllContainer>
15-
<ClearRefinements />
16-
</ClearAllContainer>
17-
</div>
18-
);
19-
}
6+
const ResultInfo = () => (
7+
<div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
8+
<Stats
9+
translations={{
10+
stats: nbHits => `${nbHits.toLocaleString()} results found`,
11+
}}
12+
/>
13+
14+
<ClearAllContainer>
15+
<ClearRefinements />
16+
</ClearAllContainer>
17+
</div>
18+
);
2019

2120
export default ResultInfo;

‎packages/app/src/app/pages/Search/Results/index.js‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,46 @@
1-
import React from 'react';
2-
3-
import { Hits, Pagination } from 'react-instantsearch/dom';
41
import Centered from '@codesandbox/common/lib/components/flex/Centered';
52
import SandboxCard from '@codesandbox/common/lib/components/SandboxCard';
6-
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
73
import Margin from '@codesandbox/common/lib/components/spacing/Margin';
84
import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
5+
import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
6+
import React from 'react';
7+
import { Hits, Pagination } from 'react-instantsearch/dom';
98

109
import ResultInfo from '../ResultInfo';
1110
import { Container } from './elements';
1211

13-
const Results = () => {
14-
const selectSandbox = hit =>
15-
window.open(
16-
sandboxUrl({ id: hit.objectID, alias: hit.alias, git: hit.git })
17-
);
12+
const selectSandbox = ({ alias, git, objectID }) =>
13+
window.open(sandboxUrl({ alias, id: objectID, git }));
1814

19-
return (
20-
<Container>
21-
<ResultInfo />
22-
<Margin bottom={2}>
23-
<Hits
24-
hitComponent={({ hit }) => (
25-
<SandboxCard
26-
selectSandbox={() => selectSandbox(hit)}
27-
noHeight
28-
sandbox={{
29-
...hit,
30-
title: getSandboxName({
31-
id: hit.objectID,
32-
alias: hit.alias,
33-
git: hit.git,
34-
title: hit.title,
35-
}),
15+
const Results = () => (
16+
<Container>
17+
<ResultInfo />
18+
19+
<Margin bottom={2}>
20+
<Hits
21+
hitComponent={({ hit }) => (
22+
<SandboxCard
23+
selectSandbox={() => selectSandbox(hit)}
24+
noHeight
25+
sandbox={{
26+
...hit,
27+
title: getSandboxName({
3628
id: hit.objectID,
37-
}}
38-
/>
39-
)}
40-
/>
41-
</Margin>
42-
<Centered horizontal>
43-
<Pagination />
44-
</Centered>
45-
</Container>
46-
);
47-
};
29+
alias: hit.alias,
30+
git: hit.git,
31+
title: hit.title,
32+
}),
33+
id: hit.objectID,
34+
}}
35+
/>
36+
)}
37+
/>
38+
</Margin>
39+
40+
<Centered horizontal>
41+
<Pagination />
42+
</Centered>
43+
</Container>
44+
);
4845

4946
export default Results;

0 commit comments

Comments
 (0)