Pass filter groups as props

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

@@ -3,18 +3,20 @@ import * as CopyToClipboard from 'react-copy-to-clipboard';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 
 import { Button } from 'ts/components/button';
+import { Filter } from 'ts/components/docs/sidebar/filter';
 import { Heading } from 'ts/components/text';
 import { Container } from 'ts/components/ui/container';
-import { Filter } from 'ts/components/docs/sidebar/filter';
 import { colors } from 'ts/style/colors';
 import { styled } from 'ts/style/theme';
 import { zIndex } from 'ts/style/z_index';
 
-export interface FiltersProps {}
+export interface FiltersProps {
+    groups: FilterGroup[];
+}
 
 export interface FiltersState {}
 
-interface Group {
+export interface FilterGroup {
     heading: string;
     name: string;
     filters: FilterProps[];
@@ -25,56 +27,14 @@ interface FilterProps {
     label: string;
 }
 
-const groups: Group[] = [
-    {
-        heading: 'Topic',
-        name: 'topic',
-        filters: [
-            {
-                value: 'mesh',
-                label: 'Mesh',
-            },
-            {
-                value: 'testing',
-                label: 'Testing',
-            },
-            {
-                value: 'mesh',
-                label: 'Mesh',
-            },
-            {
-                value: 'testing',
-                label: 'Testing',
-            },
-        ],
-    },
-    {
-        heading: 'Level',
-        name: 'level',
-        filters: [
-            {
-                value: 'beginner',
-                label: 'Beginner',
-            },
-            {
-                value: 'intermediate',
-                label: 'Intermediate',
-            },
-            {
-                value: 'advanced',
-                label: 'Advanced',
-            },
-        ],
-    },
-];
-
 export class Filters extends React.Component<FiltersProps, FiltersState> {
     public static defaultProps = {};
     public state: FiltersState = {};
     public render(): React.ReactNode {
+        const { groups } = this.props;
         return (
             <Wrapper>
-                {groups.map(({ heading, name, filters }: Group, index) => (
+                {groups.map(({ heading, name, filters }: FilterGroup, index) => (
                     <GroupWrapper key={`filter-group-${index}`}>
                         <GroupHeading asElement="h3">{heading}</GroupHeading>
                         {filters.map(({ value, label }: FilterProps, index) => (
@@ -85,9 +45,6 @@ export class Filters extends React.Component<FiltersProps, FiltersState> {
             </Wrapper>
         );
     }
-    /*private readonly _handleCopyClick = () => {
-        this.setState({ didCopyFilters: true });
-    };*/
 }
 
 const Wrapper = styled.div`

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

@@ -14,7 +14,8 @@ import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
 import { Note } from 'ts/components/docs/note';
 import { Resource } from 'ts/components/docs/resource/resource';
 import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
-import { Filters } from 'ts/components/docs/sidebar/filters';
+import { ChapterLinks } from 'ts/components/docs/sidebar/chapter_links';
+import { FilterGroup, Filters } from 'ts/components/docs/sidebar/filters';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { StepLinkConfig } from 'ts/components/docs/step_link';
 import { StepLinks } from 'ts/components/docs/step_links';
@@ -28,7 +29,6 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 import { documentConstants } from 'ts/utils/document_meta_constants';
-import { ChapterLinks } from 'ts/components/docs/sidebar/chapter_links';
 
 interface Props {
     location: Location;
@@ -58,6 +58,49 @@ const usefulLinks: StepLinkConfig[] = [
     },
 ];
 
+const filterGroups: FilterGroup[] = [
+    {
+        heading: 'Topic',
+        name: 'topic',
+        filters: [
+            {
+                value: 'Mesh',
+                label: 'Mesh',
+            },
+            {
+                value: 'Testing',
+                label: 'Testing',
+            },
+            {
+                value: 'Coordinator Model',
+                label: 'Coordinator Model',
+            },
+            {
+                value: 'Protocol developer',
+                label: 'Protocol developer',
+            },
+        ],
+    },
+    {
+        heading: 'Level',
+        name: 'level',
+        filters: [
+            {
+                value: 'Beginner',
+                label: 'Beginner',
+            },
+            {
+                value: 'Intermediate',
+                label: 'Intermediate',
+            },
+            {
+                value: 'Advanced',
+                label: 'Advanced',
+            },
+        ],
+    },
+];
+
 export class DocsPageTemplate extends React.Component<Props> {
     public render(): React.ReactNode {
         return (
@@ -67,7 +110,7 @@ export class DocsPageTemplate extends React.Component<Props> {
                 <Section maxWidth={'1030px'} isPadded={false} padding="0 0">
                     <Columns>
                         <aside>
-                            <Filters />
+                            <Filters groups={filterGroups} />
                             <ChapterLinks />
                         </aside>
                         <article>