crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduced constant variables for algolia search

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-24 15:56:53 +02:00
committed by fabioberger
parent 6a38f231b1
commit 6cbadcf8e9
9 changed files with 51 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/website/ts/components/docs/header.tsx
View File

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
import { Link } from '@0x/react-shared';
import { MobileNav } from 'ts/components/docs/mobileNav';
import { SearchInput } from 'ts/components/docs/search_input';
import { SearchInput } from 'ts/components/docs/search/search_input';
import { Hamburger } from 'ts/components/hamburger';
import { Logo } from 'ts/components/logo';

2
packages/website/ts/components/docs/hero.tsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import styled from 'styled-components';
import { SearchInput } from 'ts/components/docs/search_input';
import { SearchInput } from 'ts/components/docs/search/search_input';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';

2
packages/website/ts/components/docs/mobileNav.tsx
View File

@@ -5,7 +5,7 @@ import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { SearchInput } from 'ts/components/docs/search/search_input';
import { colors } from 'ts/style/colors';
import { zIndex } from 'ts/style/z_index';

27
packages/website/ts/components/docs/search/autocomplete.tsx
View File

@@ -1,12 +1,14 @@
import React, { useState } from 'react';
import Autosuggest from 'react-autosuggest';
import { Highlight, Snippet } from 'react-instantsearch-dom';
import { connectAutoComplete, Highlight, Snippet } from 'react-instantsearch-dom';
import styled from 'styled-components';
import { Link } from '@0x/react-shared';
import { colors } from 'ts/style/colors';
import { searchIndex } from 'ts/utils/algolia_search';
interface IAutoCompleteProps {
isHome?: boolean;
hits?: object[];
@@ -23,12 +25,7 @@ interface IWrapperProps {
currentRefinement?: string;
}
export const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({
isHome = false,
hits = [],
currentRefinement,
refine,
}) => {
const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({ isHome = false, hits = [], currentRefinement, refine }) => {
const [value, setValue] = useState<string>('');
const onChange = (event: IHitProps, { newValue }: IHitProps): void => setValue(newValue);
@@ -40,12 +37,10 @@ export const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({
// tslint:disable-next-line: no-empty
const onSuggestionHighlighted = (): void => {};
const getSuggestionValue = (hit: IHitProps): string => hit.textContent;
// tslint:disable-next-line: no-empty
const onSuggestionSelected = (event: IHitProps, { suggestion }: IHitProps): void => {};
const onSuggestionSelected = (event: IHitProps, { suggestion }: IHitProps): void => {
// tslint:disable-next-line: no-console
console.log(suggestion);
};
const getSuggestionValue = (hit: IHitProps): string => hit.textContent;
const renderSuggestion = (hit: IHitProps): React.ReactNode => {
return (
@@ -58,9 +53,11 @@ export const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({
};
const renderSectionTitle = (section: IHitProps): React.ReactNode => {
const { tools, guides } = searchIndex;
const titles: { [key: string]: any } = {
'0x_tools_test': 'Tools',
'0x_guides_test': 'Guides',
[tools]: 'Tools',
[guides]: 'Guides',
};
if (section.hits.length) {
@@ -346,3 +343,5 @@ const Wrapper = styled.div<IWrapperProps>`
}
}
`;
export const AutoComplete = connectAutoComplete(CustomAutoComplete);

19
packages/website/ts/components/docs/search/search_input.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Configure, Index, InstantSearch } from 'react-instantsearch-dom';
import { AutoComplete } from 'ts/components/docs/search/autocomplete';
import { searchClient, searchIndex } from 'ts/utils/algolia_search';
interface ISearchInputProps {
isHome?: boolean;
}
export const SearchInput: React.FC<ISearchInputProps> = ({ isHome }) => (
<InstantSearch searchClient={searchClient} indexName={searchIndex.tools}>
<AutoComplete isHome={isHome} />
<Configure hitsPerPage={5} distinct={true} />
<Index indexName={searchIndex.tools} />
<Index indexName={searchIndex.guides} />
</InstantSearch>
);

29
packages/website/ts/components/docs/search_input.tsx
View File

@@ -1,29 +0,0 @@
import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import { Configure, connectAutoComplete, Index, InstantSearch } from 'react-instantsearch-dom';
import { CustomAutoComplete } from 'ts/components/docs/search/autocomplete';
const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
interface ISearchInputProps {
isHome?: boolean;
}
const AutoComplete = connectAutoComplete(CustomAutoComplete);
export const SearchInput: React.FC<ISearchInputProps> = ({ isHome }) => (
<InstantSearch
searchClient={searchClient}
indexName="0x_tools_test"
onSearchStateChange={(searchState: any) => {
// console.log('searchState', searchState);
}}
>
<AutoComplete isHome={isHome} />
<Configure hitsPerPage={5} distinct={true} />
<Index indexName="0x_tools_test" />
<Index indexName="0x_guides_test" />
</InstantSearch>
);

11
packages/website/ts/pages/docs/guides.tsx
View File

@@ -1,21 +1,20 @@
import React from 'react';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import { Columns } from 'ts/components/docs/layout/columns';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Resource } from 'ts/components/docs/resource/resource';
import { Separator } from 'ts/components/docs/separator';
import { Filters } from 'ts/components/docs/sidebar/filters';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
import { searchClient, searchIndex } from 'ts/utils/algolia_search';
export const DocsGuides: React.FC = () => (
<DocsPageLayout title="Guides">
<InstantSearch searchClient={searchClient} indexName="0x_guides_test">
<InstantSearch searchClient={searchClient} indexName={searchIndex.guides}>
<Columns>
<Filters filters={filters} />
<Separator />
<Hits hitComponent={Resource} />
</Columns>
</InstantSearch>

9
packages/website/ts/pages/docs/tools.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import styled from 'styled-components';
import { FeatureLink } from 'ts/components/docs/feature_link';
@@ -12,16 +13,12 @@ import { ContentWrapper } from 'ts/components/docs/layout/content_wrapper';
import { DocsPageLayout } from 'ts/components/docs/layout/docs_page_layout';
import { Separator } from 'ts/components/docs/separator';
import { Hits, InstantSearch } from 'react-instantsearch-dom';
import algoliasearch from 'algoliasearch/lite';
const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
import { searchClient, searchIndex } from 'ts/utils/algolia_search';
export const DocsTools: React.FC = () => {
return (
<DocsPageLayout title="Tools">
<InstantSearch searchClient={searchClient} indexName="0x_tools_test">
<InstantSearch searchClient={searchClient} indexName={searchIndex.tools}>
<Columns>
<Filters filters={filters} />
<Separator />

8
packages/website/ts/utils/algolia_search.ts Normal file
View File

@@ -0,0 +1,8 @@
import algoliasearch from 'algoliasearch/lite';
export const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
export const searchIndex = {
guides: '0x_guides_test',
tools: '0x_tools_test',
};