Skip to content

Commit

Permalink
Clickable tags
Browse files Browse the repository at this point in the history
  • Loading branch information
stereobooster committed Feb 17, 2019
1 parent c8c926f commit fb3ed68
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 22 deletions.
23 changes: 16 additions & 7 deletions site/src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Pre = styled.pre`
padding: 0.6rem;
`;

const Tag = styled.span`
const Tag = styled.a`
font-size: 0.8rem;
background: #d9ffab;
border-bottom: 1px solid #b6de86;
Expand All @@ -57,7 +57,9 @@ const ResultsCount = styled.div`

const IndexPage = () => {
const [term, setTerm] = useState("");
const results = findHooks(term.trim(), sortedHooks);
const search = term.trim();
const results = findHooks(search, sortedHooks);
const tagsToSearch = search === "#" ? ["#"] : [search, search.replace("#", "")];

return (
<Layout>
Expand All @@ -82,14 +84,14 @@ const IndexPage = () => {
<Hook key={`${hook.repositoryUrl}-${hook.name}`}>
<RepositoryLink href={hook.repositoryUrl}>
<Highlighter
searchWords={[term]}
searchWords={[githubName(search)]}
autoEscape={true}
textToHighlight={githubName(hook.repositoryUrl)}
/>
</RepositoryLink>
<Name>
<Highlighter
searchWords={[term]}
searchWords={[search]}
autoEscape={true}
textToHighlight={hook.name}
/>
Expand All @@ -99,11 +101,18 @@ const IndexPage = () => {
</Pre>
<div>
{hook.tags.map(tag => (
<Tag key={tag}>
<Tag
key={tag}
href={`#${tag}`}
onClick={(e) => {
e.preventDefault()
setTerm(`#${tag}`);
}}
>
<Highlighter
searchWords={[term]}
searchWords={tagsToSearch}
autoEscape={true}
textToHighlight={tag}
textToHighlight={`#${tag}`}
/>
</Tag>
))}
Expand Down
35 changes: 20 additions & 15 deletions site/src/utils.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import Cache from "tmp-cache";

const memoize = fn => {
const cache = {};
const cache = new Cache(300);
return arg => {
if (!(arg in cache)) cache[arg] = fn(arg);
return cache[arg];
if (!cache.has(arg)) cache.set(arg, fn(arg));
return cache.get(arg);
};
};

Expand All @@ -24,21 +24,26 @@ const memoizeSearch = fn => {
};

export const githubName = memoize(link =>
link.replace("https://github.com/", "")
link.replace(/^https:\/\/github.com\//, "")
);

const lower = memoize(str => str.toLowerCase());

const lowerArray = memoize(tags => tags.map(tag => tag.toLowerCase()));

export const findHooks = memoizeSearch(
(term, arr) =>
term === ""
? arr
: arr.filter(
hook =>
lower(hook.name).includes(lower(term)) ||
lower(githubName(hook.repositoryUrl)).includes(lower(term)) ||
lowerArray(hook.tags).some(tag => tag.includes(lower(term)))
)
);
export const findHooks = memoizeSearch((term, arr) => {
if (term === "") return arr;
if (term === "#")
return arr.filter(hook => hook.tags && hook.tags.length > 0);
if (term[0] === "#") {
const tagToSearch = lower(term.substring(1));
return arr.filter(hook =>
lowerArray(hook.tags).some(tag => tag.includes(tagToSearch))
);
}
return arr.filter(
hook =>
lower(hook.name).includes(lower(term)) ||
lower(hook.repositoryUrl).includes(lower(term))
);
});

0 comments on commit fb3ed68

Please sign in to comment.