New table search

src/pages/NewTable/NewTablePageTest.js

@@ -7,14 +7,14 @@ import getAllEntries from '../../api/getAllEntries';
 import NewTable from './NewTable';
 import Loading from '../../components/generic/Loading';
 import { CALC_PAGES, ELEMENTS_PER_PAGE } from '../../utils/globals';
+import searchQueryHandler from './searchHandler';
 
 const NewTablePageTest = (props) => {
+  // eslint-disable-next-line
   const [entriesFromApi, setEntriesFromApi] = React.useState([]);
   const [entriesAll, setEntriesAll] = React.useState([]);
   const [entries, setEntries] = React.useState([]);
-  // eslint-disable-next-line
   const [pageNr, setPageNr] = React.useState(1);
-  // eslint-disable-next-line
   const [loading, setLoading] = React.useState(true);
   // eslint-disable-next-line
   const [scoresSorted, setScoresSorted] = React.useState([]);
@@ -60,20 +60,24 @@ const NewTablePageTest = (props) => {
     return null;
   };
 
-  console.log(entriesFromApi);
-  console.log(entriesAll);
-  console.log(entries);
-
   const n = (pageNr - 1) * (ELEMENTS_PER_PAGE * 2);
   let elements = entries.slice(n, n + ELEMENTS_PER_PAGE * 2);
 
   if (!loading) {
     return (
-      <FlexColumn padding="24px" as="section" width="100%" maxWidth="1600px">
+      <FlexColumn
-        <H2 as="h2" margin="0 0 32px 0">
+        padding="24px"
-          New Table Test
+        gap="32px"
-        </H2>
+        as="section"
-        <Search searchQueryHandler={() => console.log('siema')} />
+        width="100%"
+        maxWidth="1600px"
+      >
+        <H2 as="h2">New Table Test</H2>
+        <Search
+          searchQueryHandler={(event) =>
+            searchQueryHandler(event, entriesAll, setPageNr, setEntries)
+          }
+        />
         {elements.length > 0 && entries[0] && (
           <NewTable items={elements} orderedKeys={orderKeys(entries[0])} />
         )}

src/pages/NewTable/components/TableRowItems/TableRowItems.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { RENDER_WHEN } from '../../../../utils/globals';
 
 const TableRowItems = ({ orderedKeys, item, i }) => {
   return (
@@ -6,7 +7,7 @@ const TableRowItems = ({ orderedKeys, item, i }) => {
       {orderedKeys.map((keyValue, j) => {
         return (
           <td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
-            {item[keyValue]}
+            {keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]}
           </td>
         );
       })}

src/pages/NewTable/searchHandler.js

@@ -0,0 +1,18 @@
+const searchQueryHandler = (event, entriesAll, setPageNr, setEntries) => {
+  let searchQuery = event.target.value;
+  let submissionsToRender = [];
+  setPageNr(1);
+  if (searchQuery === '') setEntries(entriesAll);
+  else {
+    for (let entry of entriesAll) {
+      const { when } = entry;
+      const otherKeys = Object.values(entry).join(' ');
+      const str = `${when.slice(11, 16)} ${when.slice(0, 10)} ${otherKeys}`;
+      if (str.toLowerCase().includes(searchQuery.toLowerCase()))
+        submissionsToRender.push(entry);
+    }
+    setEntries(submissionsToRender);
+  }
+};
+
+export default searchQueryHandler;

src/pages/NewTable/styles/SortButtonContainerStyle.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { FlexRow } from '../../../utils/containers';
 
 const getRightAttribute = (column) => {
-  const staticColumns = ['id', 'when', 'submitter'];
+  const staticColumns = ['id', 'when'];
   if (staticColumns.includes(column)) return '32%';
   return '16%';
 };