Sort components (#163)

* Move common components to the `common` directory
* rename style directory
* Move ForkAwesome to common
* Move initializers and restructure application-loader.tsx

src/components/common/pagination/pager-item.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export interface PageItemProps {
+    onClick: (index: number) => void
+    index: number
+}
+
+export const PagerItem: React.FC<PageItemProps> = ({ index, onClick }) => {
+  return (
+    <li className="page-item">
+      <span className="page-link" role="button" onClick={() => onClick(index)}>
+        {index + 1}
+      </span>
+    </li>
+  )
+}

src/components/common/pagination/pager-pagination.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from 'react'
+import { Pagination } from 'react-bootstrap'
+import { ShowIf } from '../show-if/show-if'
+import { PagerItem } from './pager-item'
+
+export interface PaginationProps {
+  numberOfPageButtonsToShowAfterAndBeforeCurrent: number
+  onPageChange: (pageIndex: number) => void
+  lastPageIndex: number
+}
+
+export const PagerPagination: React.FC<PaginationProps> = ({ numberOfPageButtonsToShowAfterAndBeforeCurrent, onPageChange, lastPageIndex }) => {
+  if (numberOfPageButtonsToShowAfterAndBeforeCurrent % 2 !== 0) {
+    throw new Error('number of pages to show must be even!')
+  }
+
+  const [pageIndex, setPageIndex] = useState(0)
+  const correctedPageIndex = Math.min(pageIndex, lastPageIndex)
+  const wantedUpperPageIndex = correctedPageIndex + numberOfPageButtonsToShowAfterAndBeforeCurrent
+  const wantedLowerPageIndex = correctedPageIndex - numberOfPageButtonsToShowAfterAndBeforeCurrent
+
+  useEffect(() => {
+    onPageChange(pageIndex)
+  }, [onPageChange, pageIndex])
+
+  const correctedLowerPageIndex =
+    Math.min(
+      Math.max(
+        Math.min(
+          wantedLowerPageIndex,
+          wantedLowerPageIndex + lastPageIndex - wantedUpperPageIndex
+        ),
+        0
+      ),
+      lastPageIndex
+    )
+
+  const correctedUpperPageIndex =
+    Math.max(
+      Math.min(
+        Math.max(
+          wantedUpperPageIndex,
+          wantedUpperPageIndex - wantedLowerPageIndex
+        ),
+        lastPageIndex
+      ),
+      0
+    )
+
+  const paginationItemsBefore = Array.from(new Array(correctedPageIndex - correctedLowerPageIndex)).map((k, index) => {
+    const itemIndex = correctedLowerPageIndex + index
+    return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex}/>
+  })
+
+  const paginationItemsAfter = Array.from(new Array(correctedUpperPageIndex - correctedPageIndex)).map((k, index) => {
+    const itemIndex = correctedPageIndex + index + 1
+    return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex}/>
+  })
+
+  return (
+    <Pagination>
+      <ShowIf condition={correctedLowerPageIndex > 0}>
+        <PagerItem key={0} index={0} onClick={setPageIndex}/>
+        <Pagination.Ellipsis disabled/>
+      </ShowIf>
+      {paginationItemsBefore}
+      <Pagination.Item active>{correctedPageIndex + 1}</Pagination.Item>
+      {paginationItemsAfter}
+      <ShowIf condition={correctedUpperPageIndex < lastPageIndex}>
+        <Pagination.Ellipsis disabled/>
+        <PagerItem key={lastPageIndex} index={lastPageIndex} onClick={setPageIndex}/>
+      </ShowIf>
+    </Pagination>
+  )
+}

src/components/common/pagination/pager.tsx

@@ -0,0 +1,25 @@
+import React, { Fragment, useEffect } from 'react'
+
+export interface PagerPageProps {
+    pageIndex: number
+    numberOfElementsPerPage: number
+    onLastPageIndexChange: (lastPageIndex: number) => void
+}
+
+export const Pager: React.FC<PagerPageProps> = ({ children, numberOfElementsPerPage, pageIndex, onLastPageIndexChange }) => {
+  const maxPageIndex = Math.ceil(React.Children.count(children) / numberOfElementsPerPage) - 1
+  const correctedPageIndex = Math.min(maxPageIndex, Math.max(0, pageIndex))
+
+  useEffect(() => {
+    onLastPageIndexChange(maxPageIndex)
+  }, [children, maxPageIndex, numberOfElementsPerPage, onLastPageIndexChange])
+
+  return <Fragment>
+    {
+      React.Children.toArray(children).filter((value, index) => {
+        const pageOfElement = Math.floor((index) / numberOfElementsPerPage)
+        return (pageOfElement === correctedPageIndex)
+      })
+    }
+  </Fragment>
+}