fix: Move content into to frontend directory

Doing this BEFORE the merge prevents a lot of merge conflicts.

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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

@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+
+export interface PageItemProps {
+  onClick: (index: number) => void
+  index: number
+}
+
+/**
+ * Renders a number and adds an onClick handler to it.
+ *
+ * @param index The number to render
+ * @param onClick The onClick Handler
+ */
+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>
+  )
+}

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

@@ -0,0 +1,87 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useEffect, useMemo, 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
+}
+
+/**
+ * Renders a pagination menu to move back and forth between pages.
+ *
+ * @param numberOfPageButtonsToShowAfterAndBeforeCurrent The number of buttons that should be shown before and after the current button.
+ * @param onPageChange The callback when one of the buttons is clicked
+ * @param lastPageIndex The index of the last page
+ */
+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 = useMemo(
+    () =>
+      Math.min(
+        Math.max(Math.min(wantedLowerPageIndex, wantedLowerPageIndex + lastPageIndex - wantedUpperPageIndex), 0),
+        lastPageIndex
+      ),
+    [wantedLowerPageIndex, lastPageIndex, wantedUpperPageIndex]
+  )
+
+  const correctedUpperPageIndex = useMemo(
+    () =>
+      Math.max(Math.min(Math.max(wantedUpperPageIndex, wantedUpperPageIndex - wantedLowerPageIndex), lastPageIndex), 0),
+    [wantedUpperPageIndex, lastPageIndex, wantedLowerPageIndex]
+  )
+
+  const paginationItemsBefore = useMemo(() => {
+    return new Array(correctedPageIndex - correctedLowerPageIndex).map((k, index) => {
+      const itemIndex = correctedLowerPageIndex + index
+      return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex} />
+    })
+  }, [correctedPageIndex, correctedLowerPageIndex, setPageIndex])
+
+  const paginationItemsAfter = useMemo(() => {
+    return new Array(correctedUpperPageIndex - correctedPageIndex).map((k, index) => {
+      const itemIndex = correctedPageIndex + index + 1
+      return <PagerItem key={itemIndex} index={itemIndex} onClick={setPageIndex} />
+    })
+  }, [correctedUpperPageIndex, correctedPageIndex, setPageIndex])
+
+  return (
+    <Pagination dir='ltr'>
+      <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>
+  )
+}

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

@@ -0,0 +1,45 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { PropsWithChildren } from 'react'
+import React, { Fragment, useEffect, useMemo } from 'react'
+
+export interface PagerPageProps {
+  pageIndex: number
+  numberOfElementsPerPage: number
+  onLastPageIndexChange: (lastPageIndex: number) => void
+}
+
+/**
+ * Renders a limited number of the given children.
+ *
+ * @param children The children to render
+ * @param numberOfElementsPerPage The number of elements per page
+ * @param pageIndex Which page of the children to render
+ * @param onLastPageIndexChange A callback to notify about changes to the maximal page number
+ */
+export const Pager: React.FC<PropsWithChildren<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])
+
+  const filteredChildren = useMemo(() => {
+    return React.Children.toArray(children).filter((value, index) => {
+      const pageOfElement = Math.floor(index / numberOfElementsPerPage)
+      return pageOfElement === correctedPageIndex
+    })
+  }, [children, numberOfElementsPerPage, correctedPageIndex])
+
+  return <Fragment>{filteredChildren}</Fragment>
+}