Connected guides to algolia

packages/website/ts/components/docs/resource/level.tsx

@@ -5,14 +5,14 @@ import { RatingBar } from 'ts/components/docs/resource/rating_bar';
 
 import { colors } from 'ts/style/colors';
 
-export interface LevelProps {
+interface ILevelProps {
     difficulty: Difficulty;
 }
 
 export enum Difficulty {
-    Beginner = 'beginner',
-    Intermediate = 'intermediate',
-    Advanced = 'advanced',
+    Beginner = 'Beginner',
+    Intermediate = 'Intermediate',
+    Advanced = 'Advanced',
 }
 
 const difficulties = {
@@ -30,12 +30,12 @@ const difficulties = {
     },
 };
 
-export const Level: React.FC<LevelProps> = ({ difficulty }) => {
-    const info = difficulties[difficulty];
+export const Level: React.FC<ILevelProps> = ({ difficulty }) => {
+    const { label, rating } = difficulties[difficulty];
     return (
         <LevelWrapper>
-            <DifficultyLabel>{info.label}</DifficultyLabel>
-            <RatingBar rating={info.rating} />
+            <DifficultyLabel>{label}</DifficultyLabel>
+            <RatingBar rating={rating} />
         </LevelWrapper>
     );
 };

packages/website/ts/components/docs/resource/resource.tsx

@@ -9,19 +9,27 @@ import { Heading, Paragraph } from 'ts/components/text';
 
 import { colors } from 'ts/style/colors';
 
+interface IHitProps {
+    hit: IResourceProps;
+}
 export interface IResourceProps {
-    heading?: string;
+    title?: string;
     description?: string;
+    difficulty?: Difficulty;
     isCommunity?: boolean;
     url: string;
     tags: string[];
 }
 
-export const Resource: React.FC<IResourceProps> = ({ heading, description, isCommunity, url, tags }) => {
+export const Resource: React.FC<IHitProps> = ({ hit }) => {
+    const { title, difficulty, description, isCommunity, tags, url } = hit;
+
+    console.log('hit', hit);
+
     return (
         <ResourceWrapper>
             <Heading color={colors.brandDark} size="small" marginBottom="8px">
-                <Link to={url}>{heading}</Link>
+                <Link to={url}>{title}</Link>
             </Heading>
             <Paragraph size="default" marginBottom="10px">
                 {description}
@@ -33,7 +41,7 @@ export const Resource: React.FC<IResourceProps> = ({ heading, description, isCom
                         <Tag key={`tag-${index}`}>{label}</Tag>
                     ))}
                 </Tags>
-                <Level difficulty={Difficulty.Beginner} />
+                <Level difficulty={difficulty} />
             </Meta>
         </ResourceWrapper>
     );

packages/website/ts/components/docs/sidebar/filters_group.tsx

@@ -12,16 +12,22 @@ interface IFilterListProps {
     refine: (value: string) => void;
 }
 
-const FiltersList: React.FC<IFilterListProps> = ({ items, heading, refine }) => (
-    <FiltersGroupWrapper>
-        <Heading asElement="h3" size={18} fontWeight="400" marginBottom="1rem">
-            {heading}
-        </Heading>
-        {items.map((item: IFilterProps, index: number) => (
-            <Filter key={`filter-${index}`} refine={refine} {...item} />
-        ))}
-    </FiltersGroupWrapper>
-);
+const FiltersList: React.FC<IFilterListProps> = ({ items, heading, refine }) => {
+    if (!items.length) {
+        return null;
+    }
+
+    return (
+        <FiltersGroupWrapper>
+            <Heading asElement="h3" size={18} fontWeight="400" marginBottom="1rem">
+                {heading}
+            </Heading>
+            {items.map((item: IFilterProps, index: number) => (
+                <Filter key={`filter-${index}`} refine={refine} {...item} />
+            ))}
+        </FiltersGroupWrapper>
+    );
+};
 
 export const FiltersGroup = connectRefinementList(FiltersList);
 

packages/website/ts/pages/docs/guides.tsx

@@ -7,48 +7,14 @@ import { Filters } from 'ts/components/docs/sidebar/filters';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { DocumentTitle } from 'ts/components/document_title';
 import { Section } from 'ts/components/newLayout';
+
 import { documentConstants } from 'ts/utils/document_meta_constants';
 
-export const DocsGuides: React.FC = () => {
-    return (
-        <SiteWrap theme="light">
-            <DocumentTitle {...documentConstants.DOCS} />
-            <Hero title="Guides" />
-            <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
-                <Columns>
-                    <Filters filters={filters} />
-                    <article>
-                        {resources.map((resource, index) => (
-                            <Resource key={`resource-${index}`} {...resource} />
-                        ))}
-                    </article>
-                </Columns>
-            </Section>
-        </SiteWrap>
-    );
-};
+import { ClearRefinements, Hits, InstantSearch } from 'react-instantsearch-dom';
 
-const Columns = styled.div`
-    display: grid;
-    grid-template-columns: 250px 1fr;
-    grid-column-gap: 98px;
-    grid-row-gap: 30px;
+import algoliasearch from 'algoliasearch/lite';
 
-    @media (max-width: 900px) {
-        grid-template-columns: 1fr;
-    }
-`;
-
-const filters = [
-    {
-        attribute: 'Topic',
-        heading: 'Topic',
-    },
-    {
-        attribute: 'Difficulty',
-        heading: 'Level',
-    },
-];
+const searchClient = algoliasearch('39X6WOJZKW', '6acba761a34d99781628c6178af1e16c');
 
 const resources = [
     {
@@ -67,3 +33,45 @@ const resources = [
         url: 'https://0x.org',
     },
 ];
+
+export const DocsGuides: React.FC = () => {
+    return (
+        <SiteWrap theme="light">
+            <DocumentTitle {...documentConstants.DOCS} />
+            <Hero title="Guides" />
+            <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
+                <InstantSearch searchClient={searchClient} indexName="0x_guides_test">
+                    <ClearRefinements />
+                    <Columns>
+                        <Filters filters={filters} />
+                        <article>
+                            <Hits hitComponent={Resource} />
+                        </article>
+                    </Columns>
+                </InstantSearch>
+            </Section>
+        </SiteWrap>
+    );
+};
+
+const Columns = styled.div`
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    grid-column-gap: 98px;
+    grid-row-gap: 30px;
+
+    @media (max-width: 900px) {
+        grid-template-columns: 1fr;
+    }
+`;
+
+const filters = [
+    {
+        attribute: 'topic',
+        heading: 'Topic',
+    },
+    {
+        attribute: 'difficulty',
+        heading: 'Level',
+    },
+];

packages/website/ts/pages/docs/page_template.tsx

@@ -199,9 +199,9 @@ export const DocsPageTemplate: React.FC = () => {
                             <Heading asElement="h2" size="default">
                                 Resources
                             </Heading>
-                            {resources.map((resource, index) => (
+                            {/* {resources.map((resource, index) => (
                                 <Resource key={`resource-${index}`} {...resource} />
-                            ))}
+                            ))} */}
                         </div>
                         <div>
                             <Heading asElement="h2" size="default">

packages/website/ts/pages/docs/tools.tsx

@@ -47,7 +47,7 @@ export const DocsTools: React.FC = () => {
                                 ))}
                             </FeaturedToolsWrapper>
 
-                            <ResourcesWrapper>
+                            {/* <ResourcesWrapper>
                                 <Heading asElement="h2" size="default">
                                     Docker Images
                                 </Heading>
@@ -55,8 +55,8 @@ export const DocsTools: React.FC = () => {
                                 {resources.map((resource, index) => (
                                     <Resource key={`resource-${index}`} {...resource} />
                                 ))}
-                            </ResourcesWrapper>
-
+                            </ResourcesWrapper> */}
+                            {/* 
                             <ResourcesWrapper>
                                 <Heading asElement="h2" size="default">
                                     TypeScript Libraries
@@ -65,7 +65,7 @@ export const DocsTools: React.FC = () => {
                                 {resources.map((resource, index) => (
                                     <Resource key={`resource-${index}`} {...resource} />
                                 ))}
-                            </ResourcesWrapper>
+                            </ResourcesWrapper> */}
                         </article>
                     </Columns>
                 </InstantSearch>