Results data table

frontend/compositions/index.tsx

@@ -13,6 +13,7 @@ import ProfileType from "./profile-type"
 import EditProfileInfo from "./profile-edit"
 import SavedResults from "./profile-saved-tables/saved-results"
 import SavedSearches from "./profile-saved-tables/saved-searches"
+import SearchResultsTable from "./search-results"
 import LandingPage from "./landingpage/landing"
 
 export {
@@ -28,6 +29,7 @@ export {
  ProfileInfo,
  EditProfileInfo,
  ProfileType,
+ SearchResultsTable,
  SavedResults,
  SavedSearches,
  LandingPage

frontend/compositions/profile-saved-tables/saved-results.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { ComponentMeta } from "@storybook/react"
+import SavedResults from "./saved-results"
+import { mockSavedResults } from "../../models/mock-data"
+
+export default {
+ title: "Compositions/Saved Results",
+ component: SavedResults
+} as ComponentMeta<typeof SavedResults>
+
+export const Default = <SavedResults data={mockSavedResults} />

frontend/compositions/profile-saved-tables/saved-results.tsx

@@ -1,17 +1,19 @@
 import SavedTable from "./saved-table"
 import { faAngleRight } from "@fortawesome/free-solid-svg-icons"
 
-import { resultsColumns } from "../../models/search-meta"
-import { savedResultsData } from "../../models/mock-data"
+import { SavedResultsType, resultsColumns } from "../../models/saved-table"
+import { mockSavedResults } from "../../models/mock-data"
 
-// TODO: retrieve user saved results from API
+interface SavedResultsProps {
+ data?: Array<SavedResultsType>
+}
 
-export default function SavedResults() {
+export default function SavedResults({ data = mockSavedResults }: SavedResultsProps) {
  return SavedTable({
  itemTitle: "Results",
  tableColumns: resultsColumns,
- tableData: savedResultsData,
- rowIdName: "recordId",
+ tableData: data,
+ rowIdName: "id",
  expandIcon: faAngleRight
  })
 }

frontend/compositions/profile-saved-tables/saved-searches.stories.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+import { ComponentMeta } from "@storybook/react"
+import SavedSearches from "./saved-searches"
+// import { mockSavedSearches } from "../../models/mock-data"
+
+export default {
+ title: "Compositions/Saved Searches",
+ component: SavedSearches
+} as ComponentMeta<typeof SavedSearches>
+
+export const Default = <SavedSearches />

frontend/compositions/profile-saved-tables/saved-searches.tsx

@@ -1,16 +1,20 @@
 import SavedTable from "./saved-table"
 import { faCaretRight } from "@fortawesome/free-solid-svg-icons"
 
-import { searchesColumns } from "../../models/search-meta"
-import { savedSearchData } from "../../models/mock-data"
+import { searchesColumns, SavedSearchType } from "../../models/saved-table"
+import { mockSavedSearches } from "../../models/mock-data"
 
 // TODO: retrieve user saved searches from API
 
-export default function SavedSearches() {
+interface SavedSearchProps {
+ data?: Array<SavedSearchType>
+}
+
+export default function SavedSearches({ data = mockSavedSearches }: SavedSearchProps) {
  return SavedTable({
  itemTitle: "Searches",
  tableColumns: searchesColumns,
- tableData: savedSearchData,
+ tableData: data,
  rowIdName: "results",
  expandIcon: faCaretRight
  })

frontend/compositions/profile-saved-tables/saved-table.stories.tsx

@@ -3,8 +3,8 @@ import { ComponentStory, ComponentMeta } from "@storybook/react"
 import SavedTable from "./saved-table"
 import { faAngleRight, faCaretRight } from "@fortawesome/free-solid-svg-icons"
 
-import { resultsColumns, searchesColumns } from "../../models/search-meta"
-import { savedResultsData, savedSearchData } from "../../models/mock-data"
+import { resultsColumns, searchesColumns } from "../../models/saved-table"
+import { mockSavedSearches, mockSavedResults } from "../../models/mock-data"
 
 export default {
  title: "Compositions/Saved Table",
@@ -17,7 +17,7 @@ export const SavedResultsTable = Template.bind({})
 SavedResultsTable.args = {
  itemTitle: "Results",
  tableColumns: resultsColumns,
- tableData: savedResultsData,
+ tableData: mockSavedResults,
  rowIdName: "recordId",
  expandIcon: faAngleRight
 }
@@ -26,7 +26,7 @@ export const SavedSearchTable = Template.bind({})
 SavedSearchTable.args = {
  itemTitle: "Searches",
  tableColumns: searchesColumns,
- tableData: savedSearchData,
+ tableData: mockSavedSearches,
  rowIdName: "results",
  expandIcon: faCaretRight
 }

frontend/compositions/profile-saved-tables/saved-table.tsx

@@ -1,5 +1,13 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import {
+ faArrowUp,
+ faArrowDown,
+ faAngleRight,
+ faAngleLeft,
+ faAngleDoubleRight,
+ faAngleDoubleLeft
+} from "@fortawesome/free-solid-svg-icons"
 import * as React from "react"
 import { useTable, usePagination, Column } from "react-table"
 
@@ -28,7 +36,12 @@ export default function SavedTable(props: SavedTableProps) {
  dataFooter,
  dataRowPage,
  dataRows,
- expandRecordButton
+ pageBtn,
+ actionBtn,
+ sortArrow,
+ recordCount,
+ pageCnt,
+ goto
  } = styles
 
  const data = useMemo(() => tableData, [tableData])
@@ -103,12 +116,11 @@ export default function SavedTable(props: SavedTableProps) {
  // eslint-disable-next-line react/jsx-key
  <tr {...row.getRowProps()} className={dataRows}>
  {row.cells.map((cell) => {
- const { id } = cell.column
- if (id === rowIdName) {
+ if (cell.column.id === rowIdName) {
  return (
  <td>
  <FontAwesomeIcon
- className={expandRecordButton}
+ className={actionBtn}
  icon={expandIcon}
  onClick={() => viewRecord(cell.value)}
  />
@@ -124,36 +136,45 @@ export default function SavedTable(props: SavedTableProps) {
  )
  })}
  </tbody>
- <tfoot className={dataFooter}>
- <tr>
- <td>{data.length.toLocaleString()} records found</td>
- <td colSpan={4}></td>
- <td>
- Show{" "}
- <input
- className={dataRowPage}
- min={1}
- max={10}
- onBlur={handleBlur}
- onChange={handleChange}
- type="number"
- value={pageSizeValue}
- />{" "}
- rows
- </td>
- <td>
- {" "}
- <button onClick={() => previousPage()} disabled={!canPreviousPage}>
- {"<"}
- </button>{" "}
- {pageIndex + 1} of {pageOptions.length}{" "}
- <button onClick={() => nextPage()} disabled={!canNextPage}>
- {">"}
- </button>{" "}
- </td>
- </tr>
- </tfoot>
  </table>
+ <div className={dataFooter}>
+ <span className={recordCount}>Found {data.length.toLocaleString()} records</span>
+ <button className={pageBtn} onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
+ <FontAwesomeIcon icon={faAngleDoubleLeft} />
+ </button>
+ <button className={pageBtn} onClick={() => previousPage()} disabled={!canPreviousPage}>
+ <FontAwesomeIcon icon={faAngleLeft} />
+ </button>
+ <span className={pageCnt}>
+ Page <strong>{pageIndex + 1}</strong> of <strong>{pageOptions.length}</strong>{" "}
+ </span>
+ <button className={styles.pageBtn} onClick={() => nextPage()} disabled={!canNextPage}>
+ <FontAwesomeIcon icon={faAngleRight} />
+ </button>
+ <button className={pageBtn} onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
+ <FontAwesomeIcon icon={faAngleDoubleRight} />
+ </button>
+ <span className={goto}>
+ Go to page:{" "}
+ <input
+ type="number"
+ className={dataRowPage}
+ defaultValue={pageIndex + 1}
+ onChange={(e) => {
+ const page = e.target.value ? Number(e.target.value) - 1 : 0
+ gotoPage(page)
+ }}
+ style={{ width: "50px", textAlign: "right" }}
+ />
+ </span>{" "}
+ <select value={pageSize} onChange={(e) => setPageSize(Number(e.target.value))}>
+ {[10, 20, 30, 40, 50].map((pageSize) => (
+ <option key={pageSize} value={pageSize}>
+ Show {pageSize}
+ </option>
+ ))}
+ </select>
+ </div>
  </div>
  )
 }

frontend/compositions/profile-saved-tables/saved.module.css

@@ -75,3 +75,15 @@
  -webkit-appearance: none;
  margin: 0;
 }
+
+.actionBtn {
+ cursor: pointer;
+}
+
+.sortArrow {
+ margin-left: 0.3rem;
+}
+
+.pageBtn {
+ margin: 0 1rem;
+}

frontend/compositions/profile-type/profile-type.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react"
 import { ComponentStory, ComponentMeta } from "@storybook/react"
 import ProfileType from "."
-import users from "../../models/mock-data/users.json"
 
 export default {
  title: "Compositions/Profile Type",
@@ -10,12 +9,4 @@ export default {
 
 const Template: ComponentStory<typeof ProfileType> = (args) => <ProfileType {...args} />
 
-export const PublicProfile = Template.bind({})
-PublicProfile.args = {
- userData: users[0]
-}
-
-export const PassportProfile = Template.bind({})
-PassportProfile.args = {
- userData: users[1]
-}
+export const Default = Template.bind({})