New explore communities

shared/graphql/queries/community/getCommunities.js

@@ -15,7 +15,7 @@ export type GetCommunitiesType = Array<?Node>;
 
 export const getCommunitiesByIdsQuery = gql`
   query getCommunitiesByIds($ids: [ID]) {
-    community(ids: $ids) {
+    communities(ids: $ids) {
       ...communityInfo
       ...communityMetaData
     }
@@ -40,7 +40,7 @@ export const getCommunitiesByIds = graphql(
 
 export const getCommunitiesBySlugsQuery = gql`
   query getCommunitiesBySlugs($slugs: [LowercaseString]) {
-    community(slugs: $slugs) {
+    communities(slugs: $slugs) {
       ...communityInfo
       ...communityMetaData
     }

src/views/explore/collections.js

@@ -2,6 +2,27 @@ export const collections = [
   {
     title: 'Top Communities',
     curatedContentType: 'top-communities-by-members',
+    communities: [
+      'spectrum',
+      'zeit',
+      'codepen',
+      'next-js',
+      'figma',
+      'react',
+      'specfm',
+      'product-design',
+      'sketch',
+      'styled-components',
+      'framer',
+      'frontend',
+      'wip',
+      'abstract',
+      'crypto',
+      'sketchcasts',
+      'tech-tea',
+      'design-code',
+      'journalism',
+    ],
   },
   {
     title: 'Design',
@@ -24,11 +45,9 @@ export const collections = [
           'up-coming',
           'sketchcasts',
           'google-design',
-          // 'breadtime',
           'design-code',
-          // 'playbook',
+          'codepen',
           'vectors',
-          // 'smashingmag',
           'designhunt',
         ],
       },
@@ -56,6 +75,7 @@ export const collections = [
         title: 'Web Frameworks',
         communities: [
           'react',
+          'next-js',
           'node',
           'vue-js',
           'angular',
@@ -136,13 +156,7 @@ export const collections = [
       },
       {
         title: 'Share your hobbies',
-        communities: [
-          'music',
-          // 'photography',
-          // 'movies-tv',
-          'tabletop-rpg',
-          'gaming',
-        ],
+        communities: ['music', 'photography', 'tabletop-rpg', 'gaming'],
       },
       {
         title: 'Find a new gig',

src/views/explore/view.js

@@ -15,20 +15,32 @@ import {
   CollectionWrapper,
   LoadingContainer,
 } from './style';
-import { getCommunitiesByCuratedContentType } from 'shared/graphql/queries/community/getCommunities';
+import { getCommunitiesBySlug } from 'shared/graphql/queries/community/getCommunities';
 import type { GetCommunitiesType } from 'shared/graphql/queries/community/getCommunities';
 import { Loading } from '../../components/loading';
 import { SegmentedControl, Segment } from '../../components/segmentedControl';
 import { track, transformations, events } from 'src/helpers/analytics';
 import { ErrorBoundary } from 'src/components/error';
 
-export const Charts = () => {
-  const ChartGrid = styled.div`
-    display: flex;
-    flex-direction: column;
-    flex: auto;
-  `;
+const ChartGrid = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+`;
+
+const ThisSegment = styled(Segment)`
+  @media (max-width: 768px) {
+    &:first-of-type {
+      color: ${props => props.theme.text.alt};
+      border-bottom: 2px solid ${props => props.theme.bg.border};
+    }
+    &:not(:first-of-type) {
+      display: none;
+    }
+  }
+`;
 
+export const Charts = () => {
   return <ChartGrid>{collections && <CollectionSwitcher />}</ChartGrid>;
 };
 
@@ -53,18 +65,6 @@ class CollectionSwitcher extends React.Component<Props, State> {
   }
 
   render() {
-    const ThisSegment = styled(Segment)`
-      @media (max-width: 768px) {
-        &:first-of-type {
-          color: ${props => props.theme.text.alt};
-          border-bottom: 2px solid ${props => props.theme.bg.border};
-        }
-        &:not(:first-of-type) {
-          display: none;
-        }
-      }
-    `;
-
     return (
       <Collections>
         <SegmentedControl>
@@ -85,11 +85,19 @@ class CollectionSwitcher extends React.Component<Props, State> {
 
         <CollectionWrapper>
           {collections.map((collection, index) => {
+            // NOTE(@mxstbr): [].concat.apply([], ...) flattens the array
+            const communitySlugs = collection.categories
+              ? [].concat.apply(
+                  [],
+                  collection.categories.map(({ communities }) => communities)
+                )
+              : collection.communities || [];
             return (
               <CategoryWrapper key={index}>
                 {collection.curatedContentType === this.state.selectedView && (
                   <Category
                     categories={collection.categories}
+                    slugs={communitySlugs}
                     curatedContentType={collection.curatedContentType}
                   />
                 )}
@@ -218,6 +226,6 @@ const map = state => ({ currentUser: state.users.currentUser });
 export const Category = compose(
   // $FlowIssue
   connect(map),
-  getCommunitiesByCuratedContentType,
+  getCommunitiesBySlug,
   viewNetworkHandler
 )(CategoryList);