Sorting tools by difficulty and alphabetically. Removed icons from featured tools. Extracted common difficultyOrder constant

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

@@ -6,6 +6,7 @@ import { Filter, IFilterProps } from 'ts/components/docs/sidebar/filter';
 import { Heading } from 'ts/components/text';
 
 import { styled } from 'ts/style/theme';
+import { difficultyOrder } from 'ts/utils/algolia_constants';
 
 interface IFilterListProps {
     attribute: string;
@@ -42,8 +43,7 @@ const FiltersList: React.FC<IFilterListProps> = ({
     const sortAlphabetically = (_items: IFilterProps[]) => _.orderBy(_items, 'label', 'asc');
 
     const sortByDifficulty = (_items: IFilterProps[]) => {
-        const order = ['Beginner', 'Intermediate', 'Advanced'];
-        return _items.sort((a, b) => order.indexOf(a.label) - order.indexOf(b.label));
+        return _items.sort((a, b) => difficultyOrder.indexOf(a.label) - difficultyOrder.indexOf(b.label));
     };
 
     const sortFilters = (_items: IFilterProps[]) =>

packages/website/ts/components/docs/tools/feature_link.tsx

@@ -22,7 +22,6 @@ export const FeatureLink: React.FC<IFeatureLinkProps> = ({ description, external
 
     return (
         <FeatureLinkWrapper shouldOpenInNewTab={externalUrl ? true : false} to={to}>
-            <StyledIcon color={colors.brandLight} name="flexibleIntegration" size={60} />
             <Content>
                 <div>
                     <Heading asElement="h3" size="small" marginBottom="6px">
@@ -48,15 +47,6 @@ export const FeatureLink: React.FC<IFeatureLinkProps> = ({ description, external
     );
 };
 
-const StyledIcon = styled(Icon)`
-    margin-bottom: 12px;
-
-    @media (min-width: 500px) {
-        margin-bottom: 0;
-        margin-right: 30px;
-    }
-`;
-
 const FeatureLinkWrapper = styled(Link)`
     border: 1px solid #dbdfdd;
     padding: 30px;

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

@@ -10,15 +10,13 @@ import { Filters } from 'ts/components/docs/sidebar/filters';
 
 import { IHit } from 'ts/components/docs/search/autocomplete';
 
-import { getNameToSearchIndex, hitsPerPage, searchClient } from 'ts/utils/algolia_constants';
+import { difficultyOrder, getNameToSearchIndex, hitsPerPage, searchClient } from 'ts/utils/algolia_constants';
 import { environments } from 'ts/utils/environments';
 
 interface IHitsProps {
     hits: IHit[];
 }
 
-const DIFFICULTY_ORDER = ['Beginner', 'Intermediate', 'Advanced'];
-
 export const DocsGuides: React.FC = () => {
     const nameToSearchIndex = getNameToSearchIndex(environments.getEnvironment());
     return (
@@ -38,7 +36,7 @@ export const DocsGuides: React.FC = () => {
 const Hits: React.FC<IHitsProps> = ({ hits }) => {
     return (
         <div>
-            {DIFFICULTY_ORDER.map(difficulty => {
+            {difficultyOrder.map(difficulty => {
                 const filteredHits = hits.filter((hit: any) => hit.difficulty === difficulty);
                 const sortedHits = _.orderBy(filteredHits, [hit => hit.title.toLowerCase()], ['asc']);
 

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

@@ -16,7 +16,7 @@ import { Separator } from 'ts/components/docs/shared/separator';
 
 import { IHit } from 'ts/components/docs/search/autocomplete';
 
-import { getNameToSearchIndex, hitsPerPage, searchClient } from 'ts/utils/algolia_constants';
+import { difficultyOrder, getNameToSearchIndex, hitsPerPage, searchClient } from 'ts/utils/algolia_constants';
 import { environments } from 'ts/utils/environments';
 
 interface IHitsProps {
@@ -41,6 +41,65 @@ export const DocsTools: React.FC = () => {
     );
 };
 
+const Hits: React.FC<IHitsProps> = ({ hits }) => (
+    <>
+        <FeaturedTools hits={hits} />
+        <GroupedTools hits={hits} />
+    </>
+);
+
+const CustomHits = connectHits(Hits);
+
+const FeaturedTools: React.FC<IHitsProps> = ({ hits }) => {
+    const featuredTools = hits.filter((hit: IHit) => hit.isFeatured);
+
+    if (featuredTools.length === 0) {
+        return null;
+    } else {
+        const sortedFeaturedTools = _.orderBy(featuredTools, [hit => hit.title.toLowerCase()], ['asc']);
+
+        return (
+            <FeaturedToolsWrapper>
+                <Heading asElement="h2" size="default">
+                    Featured Tools
+                </Heading>
+                {sortedFeaturedTools.map((hit: IHit, index: number) => (
+                    <FeatureLink key={`featuredLink-${index}`} {...hit} />
+                ))}
+            </FeaturedToolsWrapper>
+        );
+    }
+};
+
+const GroupedTools: React.FC<IHitsProps> = ({ hits }) => {
+    const contentTypes = getUniqueContentTypes(hits);
+
+    return (
+        <>
+            {contentTypes.map(type => {
+                const filteredByType = hits.filter((hit: any) => hit.type === type && !hit.isHidden);
+
+                return (
+                    <ResourcesWrapper key={type}>
+                        <Heading asElement="h2" size="default">
+                            {type}
+                        </Heading>
+
+                        {difficultyOrder.map(difficulty => {
+                            const filteredHits = filteredByType.filter((hit: any) => hit.difficulty === difficulty);
+                            const sortedHits = _.orderBy(filteredHits, [hit => hit.title.toLowerCase()], ['asc']);
+
+                            return sortedHits.map((hit: any, index: number) => (
+                                <Resource key={`resource-${index}`} hit={hit} />
+                            ));
+                        })}
+                    </ResourcesWrapper>
+                );
+            })}
+        </>
+    );
+};
+
 function getUniqueContentTypes(hits: IHit[]): string[] {
     const contentTypes: string[] = [];
 
@@ -53,44 +112,6 @@ function getUniqueContentTypes(hits: IHit[]): string[] {
     return contentTypes;
 }
 
-const Hits: React.FC<IHitsProps> = ({ hits }) => {
-    const contentTypes = getUniqueContentTypes(hits);
-    const featuredTools = hits.filter((hit: IHit) => hit.isFeatured);
-
-    return (
-        <>
-            {featuredTools.length > 0 && (
-                <FeaturedToolsWrapper>
-                    <Heading asElement="h2" size="default">
-                        Featured Tools
-                    </Heading>
-                    {featuredTools.map((hit: IHit, index: number) => (
-                        <FeatureLink key={`featuredLink-${index}`} {...hit} />
-                    ))}
-                </FeaturedToolsWrapper>
-            )}
-
-            {contentTypes.map(type => {
-                const filteredHits = hits.filter((hit: any) => hit.type === type && !hit.isHidden);
-                const sortedHits = _.orderBy(filteredHits, ['isCommunity', 'title'], ['asc', 'asc']);
-
-                return (
-                    <ResourcesWrapper key={type}>
-                        <Heading asElement="h2" size="default">
-                            {type}
-                        </Heading>
-                        {sortedHits.map((hit: any, index: number) => (
-                            <Resource key={`resource-${index}`} hit={hit} />
-                        ))}
-                    </ResourcesWrapper>
-                );
-            })}
-        </>
-    );
-};
-
-const CustomHits = connectHits(Hits);
-
 const FeaturedToolsWrapper = styled.div`
     margin-bottom: 50px;
 `;

packages/website/ts/utils/algolia_constants.ts

@@ -8,6 +8,8 @@ export const ALGOLIA_APP_ID = 'HWXKQZ6EUX';
 const ALGOLIA_CLIENT_API_KEY = '15a66580bc61181a2ee45931f3d35994';
 export const searchClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_CLIENT_API_KEY);
 
+export const difficultyOrder = ['Beginner', 'Intermediate', 'Advanced'];
+
 export const hitsPerPage = {
     autocomplete: 5,
     pages: ALGOLIA_MAX_NUMBER_HITS, // Maximum set by algolia