TemplatesTable.js

import React from 'react'
import styles from './TemplatesTable.css'
// Table, TableHeader, and TableBody handle CSS, not logic
import Table from '../utils/Table.component'
import TableHeader from '../utils/TableHeader.component'
import TableBody from '../utils/TableBody.component'
import { getTemplates } from './Templates.resource.js'
​
export default function TemplatesTable(props) {
  const [state, dispatch] = React.useReducer(reducer, initialState);
​
  React.useEffect(() => {
    const abortController = new AbortController()
​
    getTemplates(props.companyId, abortController.signal)
    .then(templates => {
      dispatch({
        type: 'loadedTemplates',
        templates
      })
    })
​
    return () => {
      abortController.abort()
    }
  })
​
  return (
    <>
      <Table>
        <TableHeader>
          <tr>
            <th>Template Name</th>
            <th>Included Sections</th>
            <th>Description</th>
            <th>Last updated</th>
          </tr>
        </TableHeader>
        <TableBody>
          {state.filteredTemplates.map(template => (
            <tr key={template.id}>
              <td>{template.name}</td>
              <td>{template.sections}</td>
              <td>{template.description}</td>
              <td>{template.lastUpdated}</td>
            </tr>
          ))}
        </TableBody>
      </Table>
      <div className={styles.footer}>
        Showing {(state.currentPage + 1) * state.pageSize} of {state.filteredTemplates.length} entries
        {/* Also components for changing current page and page size */}
      </div>
    </>
  )
}
​
const initialState = {
  currentPage: 0,
  pageSize: 10,
  sortColumn: 0,
  sortOrder: 'asc',
  searchValue: '',
  templates: [],
  filteredTemplates: [],
}
​
function reducer(state, action) {
  switch (action.type) {
    case "loadedTemplates":
      return {
        ...state,
        templates: action.templates,
        filteredTemplates: filterTemplates(action.templates, state.searchValue)
      }
    case "search":
      // TODO - implement
      return {
        ...state
      }
    case "nextPage":
      // TODO - implement
      return {
        ...state
      }
    case "previousPage":
      // TODO - implement
      return {
        ...state
      }
    case "changePageSize":
      // TODO - implement
      return {
        ...state
      }
    case "changeSort":
      // TODO - implement
      return {
        ...state
      }
    default:
      throw Error();
  }
}
​
function filterTemplates(templates, searchValue) {
  // TODO: do some filtering with FuzzySearch or something
  return templates
}