Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 5cd7a5c

Browse filesBrowse files
kamijin-fantakamijin-fanta
authored
Merge pull request #384 from gabrii/master
Preview search fixes and enhancements
2 parents b8fc81c + 7f3ad0a commit 5cd7a5c
Copy full SHA for 5cd7a5c

File tree

7 files changed

+73
-48
lines changed
Filter options

7 files changed

+73
-48
lines changed

‎packages/preview/next.config.js

Copy file name to clipboardExpand all lines: packages/preview/next.config.js
+1-3Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,5 @@ module.exports = withPWA({
3030
return config;
3131
},
3232
assetPrefix: process.env.BASE_PATH || "",
33-
publicRuntimeConfig: {
34-
basePath: process.env.BASE_PATH || "",
35-
},
33+
basePath: process.env.BASE_PATH || "",
3634
});

‎packages/preview/src/components/@core/icon/index.tsx

Copy file name to clipboardExpand all lines: packages/preview/src/components/@core/icon/index.tsx
+10-2Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,26 @@ import toast from "cogo-toast";
22
import copy from "copy-to-clipboard";
33
import React from "react";
44

5-
function Icon({ icon, name }) {
5+
function Icon({ icon, name, highlightPattern = null }) {
66
const copyToClipboard = () => {
77
copy(name);
88
toast.success(`Copied '${name}' to clipboard`, {
99
position: "bottom-center"
1010
});
1111
};
1212

13+
const highlightedName = () => {
14+
if (highlightPattern)
15+
return name
16+
.split(highlightPattern)
17+
.map((part) => (part.match(highlightPattern) ? <b>{part}</b> : part));
18+
return name;
19+
};
20+
1321
return (
1422
<div className="item" tabIndex={0} onClick={copyToClipboard} key={name}>
1523
<div className="icon h2">{typeof icon === "function" && icon()}</div>
16-
<div className="name">{name}</div>
24+
<div className="name">{highlightedName()}</div>
1725
</div>
1826
);
1927
}

‎packages/preview/src/components/@core/sidebar/index.tsx

Copy file name to clipboardExpand all lines: packages/preview/src/components/@core/sidebar/index.tsx
+20-4Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,32 @@ import React, { useState } from "react";
66
import ActiveLink from "../active-link";
77
import Heading from "../heading";
88

9+
const searchPath = "/search";
10+
911
export default function Sidebar() {
1012
const iconsList = ALL_ICONS.sort((a, b) => (a.name > b.name ? 1 : -1));
1113
const router = useRouter();
1214
const [isOpen, setIsOpen] = useState(false);
15+
const [inputQuery, setInputQuery] = useState(null);
16+
17+
const { query, setQuery, setResults } = React.useContext(Context);
1318

14-
const { setQuery, setResults } = React.useContext(Context);
19+
const setQueryEveywhere = (query) => {
20+
setQuery(query); // Context
21+
setInputQuery(query); // State for this component
22+
};
1523

1624
const onSearch = e => {
17-
setQuery(e.target.value.toLowerCase());
25+
const query = e.target.value.toLowerCase();
26+
router.push({ pathname: searchPath, query: query ? { q: query } : null });
27+
setQueryEveywhere(query);
1828
setResults(prevResult => {
1929
return {}
2030
});
2131
};
2232

2333
const goToSearch = e => {
24-
router.push("/search");
34+
if (!router.asPath.includes(searchPath)) router.push(searchPath);
2535
};
2636

2737
const onBlur = event => {
@@ -43,6 +53,7 @@ export default function Sidebar() {
4353
onFocus={goToSearch}
4454
onBlur={onBlur}
4555
onChange={onSearch}
56+
value={inputQuery !== null ? inputQuery : query}
4657
/>
4758
</div>
4859

@@ -55,7 +66,12 @@ export default function Sidebar() {
5566
{iconsList.map(icon => (
5667
<li key={icon.id}>
5768
<ActiveLink href={{ pathname: "icons", query: { name: icon.id } }}>
58-
<a className="rounded px2 py1">{icon.name}</a>
69+
<a
70+
className="rounded px2 py1"
71+
onClick={(e) => setQueryEveywhere("")}
72+
>
73+
{icon.name}
74+
</a>
5975
</ActiveLink>
6076
</li>
6177
))}

‎packages/preview/src/components/pages/search/index.tsx

Copy file name to clipboardExpand all lines: packages/preview/src/components/pages/search/index.tsx
+22-28Lines changed: 22 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,34 +7,28 @@ import SearchIconSet from "./search-iconset";
77
export default function SearchPageComponent() {
88
const allIcons = ALL_ICONS;
99

10-
const { query, results, setResults } = React.useContext(Context);
10+
const { query } = React.useContext(Context);
1111

12-
const getTotal = (results: object) => {
13-
return results ?
14-
Object.values(results).reduce((p: number, c: number) => p + c, 0) :
15-
0
12+
if (query.length > 2) {
13+
const hightlightPattern = new RegExp(`(${query})`, "i");
14+
return (
15+
<>
16+
<h2>
17+
Results for: <i>{query}</i>
18+
</h2>
19+
<div className="icons">
20+
{allIcons.map((icon) => (
21+
<SearchIconSet
22+
key={icon.id}
23+
icon={icon}
24+
query={query}
25+
highlightPattern={hightlightPattern}
26+
/>
27+
))}
28+
</div>
29+
<h3 className="no-results"/>
30+
</>
31+
);
1632
}
17-
18-
return query.length > 2 ? (
19-
<>
20-
<h2>
21-
Results for: <i>{query}</i>
22-
</h2>
23-
<div className="icons">
24-
{allIcons.map(icon => (
25-
<SearchIconSet
26-
key={icon.id}
27-
icon={icon}
28-
query={query}
29-
setResults={setResults} />
30-
))}
31-
</div>
32-
{
33-
getTotal(results) === 0 &&
34-
<h3>No icons found</h3>
35-
}
36-
</>
37-
) : (
38-
<h2>Please enter at least 3 characters to search...</h2>
39-
);
33+
return <h2>Please enter at least 3 characters to search...</h2>;
4034
}

‎packages/preview/src/components/pages/search/search-iconset.tsx

Copy file name to clipboardExpand all lines: packages/preview/src/components/pages/search/search-iconset.tsx
+8-11Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { getIcons } from "@utils/getIcons";
55

66
import SearchPageIconLoading from "./loading";
77

8-
export default function SearchIconSet({ icon, query, setResults }) {
8+
export default function SearchIconSet({ icon, query, highlightPattern }) {
99
const IconSet = loadable.lib(() => getIcons(icon.id));
1010

1111
return (
@@ -16,16 +16,13 @@ export default function SearchIconSet({ icon, query, setResults }) {
1616
return (
1717
<>
1818
{found.map(name => (
19-
<Icon key={name} icon={icons[name]} name={name} />
20-
))}
21-
{setResults(prevResults => {
22-
return prevResults.hasOwnProperty(icon.id) ?
23-
prevResults :
24-
{
25-
...prevResults,
26-
[icon.id]: found.length
27-
}
28-
})}
19+
<Icon
20+
key={name}
21+
icon={icons[name]}
22+
name={name}
23+
highlightPattern={highlightPattern}
24+
/>
25+
))}
2926
</>
3027
)
3128
}}

‎packages/preview/src/pages/search.tsx

Copy file name to clipboardExpand all lines: packages/preview/src/pages/search.tsx
+8Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
import Container from "@components/@core/container";
22
import SearchPageComponent from "@components/pages/search";
33
import React from "react";
4+
import { useRouter } from "next/router";
5+
import { Context } from "@utils/search-context";
46

57
export default function SearchPage() {
8+
const router = useRouter();
9+
const { q } = router.query;
10+
const { query, setQuery } = React.useContext(Context);
11+
12+
if (!query && q) setQuery(q);
13+
614
return (
715
<Container title="🔍 Search">
816
<SearchPageComponent />

‎packages/preview/src/styles/_components.scss

Copy file name to clipboardExpand all lines: packages/preview/src/styles/_components.scss
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,3 +237,7 @@ a {
237237
display: none;
238238
}
239239
}
240+
241+
.icons:empty + .no-results:after {
242+
content: "No icons found";
243+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.