feature(ui) - pagination wip

frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { fetchLiveList } from 'Duck/sessions';
 import { connect } from 'react-redux';
-import { NoContent, Loader, LoadMoreButton } from 'UI';
+import { NoContent, Loader, LoadMoreButton, Pagination } from 'UI';
 import { List, Map } from 'immutable';
 import SessionItem from 'Shared/SessionItem';
 import withPermissions from 'HOCs/withPermissions'
@@ -135,6 +135,13 @@ function LiveSessionList(props: Props) {
           <SortOrderButton onChange={(state) => props.updateSort({ order: state })} sortOrder={sort.order} />
         </div>
       </div>
+      <div className="w-full flex items-center justify-center py-6">
+        <Pagination
+          page={currentPage}
+          totalPages={30}
+          onChange={(page) => null}
+        />
+      </div>
       <NoContent
         title={"No live sessions."}
         subtext={
@@ -160,11 +167,16 @@ function LiveSessionList(props: Props) {
             />
           ))}
 
-          <LoadMoreButton
+          {/* <LoadMoreButton
             className="my-6"
             displayedCount={displayedCount}
             totalCount={sessions.size}
             onClick={addPage}
+          /> */}
+          <Pagination
+            currentPage={1}
+            totalCount={30}
+            onChange={(page) => null}
           />
         </Loader>
       </NoContent>

frontend/app/components/ui/Pagination/Pagination.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { Icon } from 'UI'
+import cn from 'classnames'
+
+interface Props {
+    page: number
+    totalPages: number
+    onPageChange: (page: number) => void
+    limit?: number 
+}
+export default function Pagination(props: Props) {
+    const { page, totalPages, onPageChange, limit = 5 } = props;
+    return (
+        <div className="flex items-center">
+            <button
+                className={cn("pagination-previous py-2 px-3", { "opacity-50": page === 1 })}
+                disabled={page === 1}
+                onClick={() => onPageChange(page - 1)}
+            >
+                <Icon name="chevron-left" size="18" />
+            </button>
+            <span className="mr-2 color-gray-medium">Page</span>
+            <input type="number" className="p-1 bg-white border rounded w-16" value={page} />
+            <span className="mx-3 color-gray-medium">of</span>
+            <span >{totalPages}</span>
+            <button
+                className="pagination-next py-2 px-3"
+                disabled={page === totalPages}
+                onClick={() => onPageChange(page + 1)}
+            >
+                <Icon name="chevron-right" size="18" />
+            </button>
+        </div>
+    )
+}

frontend/app/components/ui/Pagination/index.ts

@@ -0,0 +1 @@
+export { default } from './Pagination';

frontend/app/components/ui/index.js

@@ -55,5 +55,6 @@ export { default as HighlightCode } from './HighlightCode';
 export { default as NoPermission } from './NoPermission';
 export { default as NoSessionPermission } from './NoSessionPermission';
 export { default as HelpText } from './HelpText';
+export { default as Pagination } from './Pagination';
 
 export { Input, Modal, Form, Message, Card } from 'semantic-ui-react';

frontend/app/svg/icons/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+</svg>

frontend/app/svg/icons/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+</svg>