Added Pagination component, updated usages

• Added:
- Pagination component, updated usages

app/javascript/gabsocial/components/modal/media_modal.js

@@ -7,6 +7,7 @@ import Video from '../video'
 import ExtendedVideoPlayer from '../extended_video_player'
 import Button from '../button'
 import ImageLoader from '../image_loader'
+import Pagination from '../pagination'
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -56,9 +57,8 @@ class MediaModal extends ImmutablePureComponent {
     this.setState({ index: (this.props.media.size + this.getIndex() - 1) % this.props.media.size })
   }
 
-  handleChangeIndex = (e) => {
-    const index = Number(e.currentTarget.getAttribute('data-index'))
-    this.setState({ index: index % this.props.media.size })
+  handleChangeIndex = (i) => {
+    this.setState({ index: i % this.props.media.size })
   }
 
   handleKeyDown = (e) => {
@@ -129,7 +129,6 @@ class MediaModal extends ImmutablePureComponent {
     const { navigationHidden } = this.state
 
     const index = this.getIndex()
-    let pagination = []
 
     const leftNav = media.size > 1 && (
       <Button
@@ -154,28 +153,6 @@ class MediaModal extends ImmutablePureComponent {
       />
     )
 
-    if (media.size > 1) {
-      pagination = media.map((item, i) => {
-        const btnClasses = CX({
-          default: 1,
-          width10PX: 1,
-          height10PX: 1,
-          outlineNone: 1,
-          circle: 1,
-          cursorPointer: 1,
-          bgPrimaryOpaque: i !== index,
-          bgPrimary: i === index,
-          boxShadowDot: i === index,
-        })
-
-        return (
-          <li className={[_s.default, _s.px5].join(' ')} key={`media-pagination-${i}`}>
-            <button tabIndex='0' className={btnClasses} onClick={this.handleChangeIndex} data-index={i} />
-          </li>
-        )
-      })
-    }
-
     const content = media.map((image) => {
       const width = image.getIn(['meta', 'original', 'width']) || null
       const height = image.getIn(['meta', 'original', 'height']) || null
@@ -298,9 +275,16 @@ class MediaModal extends ImmutablePureComponent {
 
         </div>
 
-        <ul className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15, _s.flexRow, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15, _s.listStyleNone].join(' ')}>
-          {pagination}
-        </ul>
+        {
+          media.size > 1 &&
+          <div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
+            <Pagination
+              count={media.size}
+              activeIndex={index}
+              onClick={this.handleChangeIndex}          
+            />
+          </div>
+        }
       </div>
     )
   }

app/javascript/gabsocial/components/pagination.js

@@ -0,0 +1,73 @@
+import { CX } from '../constants'
+
+const COLORS = {
+  primary: 'primary',
+  brand: 'brand',
+}
+
+class Pagination extends PureComponent {
+
+  handleClickIndex = (i) => {
+    this.props.onClick(i)
+  }
+
+  render() {
+    const {
+      activeIndex,
+      color,
+      count,
+    } = this.props
+
+    if (isNaN(count)) return
+
+    return (
+      <ul className={[_s.default, _s.flexRow, _s.listStyleNone].join(' ')}>
+        {
+          Array.apply(null, {
+            length: count
+          }).map((_, i) => {
+            const btnClasses = CX({
+              default: 1,
+              width10PX: 1,
+              height10PX: 1,
+              outlineNone: 1,
+              circle: 1,
+              cursorPointer: 1,
+              bgPrimaryOpaque: i !== activeIndex && color === COLORS.primary,
+              bgPrimary: i === activeIndex && color === COLORS.primary,
+              boxShadowDot: i === activeIndex && color === COLORS.primary,
+              bgBrandLightOpaque: i !== activeIndex && color === COLORS.brand,
+              bgBrand: i === activeIndex && color === COLORS.brand,
+            })
+
+            return (
+              <li className={[_s.default, _s.px5].join(' ')} key={`pagination-${i}`}>
+                <button
+                  tabIndex='0'
+                  className={btnClasses}
+                  onClick={() => this.handleClickIndex(i)}
+                  data-index={i}
+                />
+              </li>
+            )
+          })
+        }
+      </ul>
+    )
+
+  }
+
+}
+
+Pagination.propTypes = {
+  activeIndex: PropTypes.number.isRequired,
+  color: PropTypes.string.isRequired,
+  count: PropTypes.number.isRequired,
+  onClick: PropTypes.number.isRequired,
+}
+
+Pagination.defaultProps = {
+  color: COLORS.primary,
+}
+
+export default Pagination

app/javascript/gabsocial/features/introduction.js

@@ -21,6 +21,7 @@ import Icon from '../components/icon'
 import Image from '../components/image'
 import Input from '../components/input'
 import Text from '../components/text'
+import Pagination from '../components/pagination'
 import ComposeFormContainer from './compose/containers/compose_form_container'
 import Responsive from './ui/util/responsive_component'
 
@@ -275,9 +276,7 @@ class Introduction extends ImmutablePureComponent {
     window.addEventListener('keyup', this.handleKeyUp)
   }
 
-  handleDot = (e) => {
-    const i = Number(e.currentTarget.getAttribute('data-index'))
-    e.preventDefault()
+  handleDot = (i) => {
     this.setState({ currentIndex: i })
   }
 
@@ -338,25 +337,6 @@ class Introduction extends ImmutablePureComponent {
     ]
     const title = titles[currentIndex]
 
-    const pagination = pages.map((page, i) => {
-      const btnClasses = CX({
-        default: 1,
-        width10PX: 1,
-        height10PX: 1,
-        outlineNone: 1,
-        circle: 1,
-        cursorPointer: 1,
-        bgBrandLightOpaque: i !== currentIndex,
-        bgBrand: i === currentIndex,
-      })
-
-      return (
-        <li className={[_s.default, _s.px5].join(' ')} key={`intro-slide-${i}`}>
-          <button tabIndex='0' className={btnClasses} onClick={this.handleDot} data-index={i} />
-        </li>
-      )
-    })
-
     const nextTitle = currentIndex === 3 ? 'Finish' : 'Next'
 
     return (
@@ -429,9 +409,16 @@ class Introduction extends ImmutablePureComponent {
               />
             }
           </div>
-          <ul className={[_s.default, _s.height100PC, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.listStyleNone].join(' ')}>
-            {pagination}
-          </ul>
+            
+          <div className={[_s.default, _s.height100PC, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
+            <Pagination
+              count={pages.length}
+              activeIndex={currentIndex}
+              onClick={this.handleDot}
+              color='brand'
+            />
+          </div>
+          
           <Button
             isText
             href={currentIndex === 3 ? '/home' : undefined}