Add carousel to community page

iterative · Jan 21, 2020 · 95f93b8 · 95f93b8
1 parent 7ba0c16
commit 95f93b8
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 71 deletions.
diff --git a/pages/community.js b/pages/community.js
@@ -15,6 +15,17 @@ import { META_BASE_TITLE } from '../src/consts'
 
 const HeadInjector = () => (
   <Head>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      charSet="UTF-8"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
+    />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
+    />
     <title>{META_BASE_TITLE}</title>
   </Head>
 )

diff --git a/src/Community/Carousel/index.js b/src/Community/Carousel/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Slider from 'react-slick'
+
+import { OnlyDesktop, OnlyMobile } from '../../styles'
+
+import { SliderWrapper } from './styles'
+
+const imagesSliderProps = {
+  slidesToShow: 1,
+  slidesToScroll: 1,
+  initialSlide: 1,
+  adaptiveHeight: true,
+  infinite: true,
+  autoplay: true,
+  speed: 600,
+  dots: true,
+  arrows: false
+}
+
+export default function CommunityCarousel({ items }) {
+  return (
+    <>
+      <OnlyDesktop>{items}</OnlyDesktop>
+      <OnlyMobile>
+        <SliderWrapper>
+          <Slider {...imagesSliderProps}>{items}</Slider>
+        </SliderWrapper>
+      </OnlyMobile>
+    </>
+  )
+}
+
+CommunityCarousel.propTypes = {
+  items: PropTypes.array
+}
diff --git a/src/Community/Carousel/styles.js b/src/Community/Carousel/styles.js
@@ -0,0 +1,5 @@
+import styled from 'styled-components'
+
+export const SliderWrapper = styled.div`
+  margin-bottom: 10px;
+`
diff --git a/src/Community/Learn/index.js b/src/Community/Learn/index.js
@@ -4,6 +4,7 @@ import format from 'date-fns/format'
 
 import CommunityBlock from '../Block'
 import CommunityButton from '../Button'
+import CommunityCarousel from '../Carousel'
 import CommunitySection from '../Section'
 
 import { pluralizeComments } from '../../utils/i18n'
@@ -67,7 +68,66 @@ CommunityBlogPost.propTypes = {
   url: PropTypes.string
 }
 
+function CommunityUserContent({ url, title, author, date, color }) {
+  return (
+    <Line key={url}>
+      <Link color={color} href={url}>
+        {title}
+      </Link>
+      <Meta>
+        {author} • {format(date, 'MMMM, d')}
+      </Meta>
+    </Line>
+  )
+}
+
+CommunityUserContent.propTypes = {
+  color: PropTypes.string,
+  author: PropTypes.string,
+  date: PropTypes.string,
+  title: PropTypes.string,
+  url: PropTypes.string
+}
+
+function CommunityDocumentation({ url, title, description, color }) {
+  return (
+    <Line key={url}>
+      <Link color={color} large href={url}>
+        {title}
+      </Link>
+      <Meta>{description}</Meta>
+    </Line>
+  )
+}
+
+CommunityDocumentation.propTypes = {
+  color: PropTypes.string,
+  description: PropTypes.string,
+  title: PropTypes.string,
+  url: PropTypes.string
+}
+
 export default function CommunityLearn({ posts, theme }) {
+  const postItems = posts.map(post => (
+    <CommunityBlogPost {...post} key={post.url} color={theme.color} />
+  ))
+
+  const userContentItems = userContent.map(userContent => (
+    <CommunityUserContent
+      {...userContent}
+      key={userContent.url}
+      color={theme.color}
+    />
+  ))
+
+  const documentationItems = documentation.map(documentation => (
+    <CommunityDocumentation
+      {...documentation}
+      key={documentation.url}
+      color={theme.color}
+    />
+  ))
+
   return (
     <Wrapper>
       <CommunitySection
@@ -90,14 +150,7 @@ export default function CommunityLearn({ posts, theme }) {
               }
               icon="/static/img/community/documentation.svg"
             >
-              {documentation.map(({ url, title, description }) => (
-                <Line key={url}>
-                  <Link color={theme.color} large href={url}>
-                    {title}
-                  </Link>
-                  <Meta>{description}</Meta>
-                </Line>
-              ))}
+              <CommunityCarousel items={documentationItems} />
             </CommunityBlock>
           </Item>
           <Item>
@@ -113,13 +166,7 @@ export default function CommunityLearn({ posts, theme }) {
               icon="/static/img/community/blog.svg"
             >
               {posts.length ? (
-                posts.map(post => (
-                  <CommunityBlogPost
-                    {...post}
-                    key={post.url}
-                    color={theme.color}
-                  />
-                ))
+                <CommunityCarousel items={postItems} />
               ) : (
                 <Placeholder>Blog is unavailable right now</Placeholder>
               )}
@@ -130,16 +177,7 @@ export default function CommunityLearn({ posts, theme }) {
               title="User Content"
               icon="/static/img/community/user_content.svg"
             >
-              {userContent.map(({ url, title, author, date }) => (
-                <Line key={url}>
-                  <Link color={theme.color} href={url}>
-                    {title}
-                  </Link>
-                  <Meta>
-                    {author} • {format(date, 'MMMM, d')}
-                  </Meta>
-                </Line>
-              ))}
+              <CommunityCarousel items={userContentItems} />
             </CommunityBlock>
           </Item>
         </Items>

diff --git a/src/Community/Meet/index.js b/src/Community/Meet/index.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import formatDistanceToNow from 'date-fns/formatDistanceToNow'
 
 import CommunityBlock from '../Block'
+import CommunityCarousel from '../Carousel'
 import CommunityButton from '../Button'
 import CommunitySection from '../Section'
 
@@ -25,7 +26,64 @@ import {
   Wrapper
 } from '../styles'
 
+function CommunityTopic({ url, title, date, comments, color }) {
+  return (
+    <Line>
+      <Link color={color} href={url} target="_blank" rel="norefferer nofollow">
+        {title}
+      </Link>
+      <Meta>
+        <Comments href={url} target="_blank" rel="norefferer nofollow">
+          {pluralizeComments(comments)}
+        </Comments>
+        &nbsp; last activity {formatDistanceToNow(new Date(date), 'MMMM, d')}{' '}
+        ago
+      </Meta>
+    </Line>
+  )
+}
+
+CommunityTopic.propTypes = {
+  url: PropTypes.string,
+  title: PropTypes.string,
+  date: PropTypes.string,
+  comments: PropTypes.number,
+  color: PropTypes.string
+}
+
+function CommunityIssue({ url, title, date, comments, color }) {
+  return (
+    <Line>
+      <Link color={color} href={url} target="_black" rel="noreferrer nofollow">
+        {title}
+      </Link>
+      <Meta>
+        <Comments href={url} target="_black" rel="noreferrer nofollow">
+          {pluralizeComments(comments)}
+        </Comments>
+        &nbsp;opened {formatDistanceToNow(new Date(date), 'MMMM, d')} ago
+      </Meta>
+    </Line>
+  )
+}
+
+CommunityIssue.propTypes = {
+  url: PropTypes.string,
+  title: PropTypes.string,
+  date: PropTypes.string,
+  comments: PropTypes.number,
+  color: PropTypes.string
+}
+
 export default function CommunityMeet({ issues, theme, topics }) {
+  const topicsItems = topics.map(topic => (
+    <CommunityTopic {...topic} key={topic.url} color={theme.color} />
+  ))
+
+  const issuesItems = issues.map(issue => (
+    <CommunityIssue {...issue} key={issue.url} color={theme.color} />
+  ))
+
   return (
     <Wrapper>
       <CommunitySection
@@ -77,29 +135,7 @@ export default function CommunityMeet({ issues, theme, topics }) {
               icon="/static/img/community/discourse.svg"
             >
               {topics.length ? (
-                topics.map(({ url, title, date, comments }) => (
-                  <Line key={url}>
-                    <Link
-                      color={theme.color}
-                      href={url}
-                      target="_blank"
-                      rel="norefferer nofollow"
-                    >
-                      {title}
-                    </Link>
-                    <Meta>
-                      <Comments
-                        href={url}
-                        target="_blank"
-                        rel="norefferer nofollow"
-                      >
-                        {pluralizeComments(comments)}
-                      </Comments>
-                      &nbsp; last activity{' '}
-                      {formatDistanceToNow(new Date(date), 'MMMM, d')} ago
-                    </Meta>
-                  </Line>
-                ))
+                <CommunityCarousel items={topicsItems} />
               ) : (
                 <Placeholder>Forum is unavailable right now</Placeholder>
               )}
@@ -118,29 +154,7 @@ export default function CommunityMeet({ issues, theme, topics }) {
               icon="/static/img/community/github.svg"
             >
               {issues.length ? (
-                issues.map(({ url, title, date, comments }) => (
-                  <Line key={url}>
-                    <Link
-                      color={theme.color}
-                      href={url}
-                      target="_black"
-                      rel="noreferrer nofollow"
-                    >
-                      {title}
-                    </Link>
-                    <Meta>
-                      <Comments
-                        href={url}
-                        target="_black"
-                        rel="noreferrer nofollow"
-                      >
-                        {pluralizeComments(comments)}
-                      </Comments>
-                      &nbsp;opened{' '}
-                      {formatDistanceToNow(new Date(date), 'MMMM, d')} ago
-                    </Meta>
-                  </Line>
-                ))
+                <CommunityCarousel items={issuesItems} />
               ) : (
                 <Placeholder>Github is unavailable right now</Placeholder>
               )}