Add page headers

src/components/layout/GenericPageHeader.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import {
+  IconButton,
+  ButtonGroup,
+  ButtonToolbar,
+  Icon,
+  Input,
+  InputGroup,
+} from 'rsuite';
+
+const GenericPageHeader = ({
+  title,
+  tags,
+  handleSearch,
+  showViewTypeButtons,
+}: any) => {
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span>
+          <h1>{title}</h1>
+        </span>
+        <span
+          style={{
+            alignSelf: 'center',
+          }}
+        >
+          <InputGroup inside>
+            <Input size="md" onChange={handleSearch} />
+            <InputGroup.Addon>
+              <Icon icon="search" />
+            </InputGroup.Addon>
+          </InputGroup>
+        </span>
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <span style={{ alignSelf: 'center' }}>{tags}</span>
+        {showViewTypeButtons && (
+          <span style={{ alignSelf: 'center' }}>
+            <ButtonToolbar>
+              <ButtonGroup>
+                <IconButton icon={<Icon icon="list" />} appearance="link" />
+                <IconButton icon={<Icon icon="th-large" />} appearance="link" />
+              </ButtonGroup>
+            </ButtonToolbar>
+          </span>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default GenericPageHeader;

src/components/playlist/PlaylistList.tsx

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useQuery } from 'react-query';
 import { useHistory } from 'react-router-dom';
+import { Tag } from 'rsuite';
+
 import { getPlaylists } from '../../api/api';
 import ListViewType from '../viewtypes/ListViewType';
 import Loader from '../loader/Loader';
 import GenericPage from '../layout/GenericPage';
+import GenericPageHeader from '../layout/GenericPageHeader';
 
 const tableColumns = [
   {
@@ -42,12 +45,17 @@ const PlaylistList = () => {
     'playlists',
     getPlaylists
   );
+  const [searchQuery, setSearchQuery] = useState('');
   const history = useHistory();
 
   const handleRowClick = (e: any) => {
     history.push(`playlist/${e.id}`);
   };
 
+  const handleSearch = (e: any) => {
+    setSearchQuery(e);
+  };
+
   if (isLoading) {
     return <Loader />;
   }
@@ -57,21 +65,35 @@ const PlaylistList = () => {
   }
 
   return (
-    <GenericPage header={<h1>Playlists</h1>}>
+    <GenericPage
+      header={
+        <GenericPageHeader
+          title="Playlists"
+          tags={<Tag>{playlists.length} playlists</Tag>}
+          handleSearch={handleSearch}
+          showViewTypeButtons
+        />
+      }
+    >
       <ListViewType
-        data={playlists}
+        data={
+          searchQuery === ''
+            ? playlists
+            : playlists.filter((playlist: any) => {
+                return (
+                  playlist.name
+                    .toLowerCase()
+                    .includes(searchQuery.toLowerCase()) ||
+                  playlist.comment
+                    ?.toLowerCase()
+                    .includes(searchQuery.toLowerCase())
+                );
+              })
+        }
         handleRowClick={handleRowClick}
         tableColumns={tableColumns}
-        virtualized={false}
-        autoHeight
-      >
-        {/* <Table.Column width={150} align="center" flexGrow={1}>
-          <Table.HeaderCell>Actions</Table.HeaderCell>
-          <Table.Cell>
-            <Icon icon="ellipsis-v" />
-          </Table.Cell>
-        </Table.Column> */}
-      </ListViewType>
+        virtualized
+      />
     </GenericPage>
   );
 };

src/styles/GenericPage.global.css

@@ -1,3 +1,11 @@
 .container__page {
-  padding: 1rem 1rem 6rem 1rem;
+  padding: 0px 0px 95px 0px;
+}
+
+.page__header {
+  padding: 20px 20px 0px 20px;
+}
+
+.page__content {
+  padding: 10px;
 }