diff --git a/src/pages/NewTable/NewTablePageTest.js b/src/pages/NewTable/NewTablePageTest.js index 34421eb..9af3590 100644 --- a/src/pages/NewTable/NewTablePageTest.js +++ b/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 ( - -

- New Table Test -

- console.log('siema')} /> + +

New Table Test

+ + searchQueryHandler(event, entriesAll, setPageNr, setEntries) + } + /> {elements.length > 0 && entries[0] && ( )} diff --git a/src/pages/NewTable/components/TableRowItems/TableRowItems.js b/src/pages/NewTable/components/TableRowItems/TableRowItems.js index 502125f..ed0ae80 100644 --- a/src/pages/NewTable/components/TableRowItems/TableRowItems.js +++ b/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 ( - {item[keyValue]} + {keyValue === 'when' ? RENDER_WHEN(item[keyValue]) : item[keyValue]} ); })} diff --git a/src/pages/NewTable/searchHandler.js b/src/pages/NewTable/searchHandler.js new file mode 100644 index 0000000..2ec9fbd --- /dev/null +++ b/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; diff --git a/src/pages/NewTable/styles/SortButtonContainerStyle.js b/src/pages/NewTable/styles/SortButtonContainerStyle.js index 91940bb..552edb4 100644 --- a/src/pages/NewTable/styles/SortButtonContainerStyle.js +++ b/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%'; };