Filter bookmark

src/api/growers.js

@@ -48,7 +48,7 @@ export default {
     }
   },
 
-  getCount(filter) {
+  getCount(filter, abortController) {
     try {
       const filterObj = filter?.getWhereObj ? filter.getWhereObj() : {};
       const query = `${QUERY_API}/v2/growers/count${
@@ -59,6 +59,7 @@ export default {
           'content-type': 'application/json',
           Authorization: session.token,
         },
+        signal: abortController?.signal,
       }).then(handleResponse);
     } catch (error) {
       handleError(error);

src/api/treeTrackerApi.js

@@ -137,8 +137,7 @@ export default {
   /**
    * Captures
    */
-
-  getCaptures({ limit = 25, offset = 0, order, filter = {} }) {
+  getCaptures({ limit = 25, offset = 0, order, filter = {} }, abortController) {
     try {
       const where = filter.getWhereObj ? filter.getWhereObj() : {};
       let filterObj = { ...where, limit, offset, order };
@@ -152,6 +151,7 @@ export default {
           'content-type': 'application/json',
           Authorization: session.token,
         },
+        signal: abortController?.signal,
       }).then(handleResponse);
     } catch (error) {
       handleError(error);

src/common/utils.js

@@ -59,3 +59,21 @@ export const localeSort = (arr, order) => {
     return sortVal * orderVal;
   });
 };
+
+export const handleQuerySearchParams = (newParams) => {
+  const oldSearch = window.location.search;
+  let searchParams = new URLSearchParams();
+  Object.keys(newParams).forEach((key) => {
+    const value = newParams[key];
+    if (value) {
+      searchParams.set(key, value.toString());
+    }
+  });
+
+  let url = new URL(window.location.href);
+  url.search = searchParams.toString();
+
+  if (url.search !== oldSearch) {
+    window.history.pushState({}, '', url.search || location.pathname);
+  }
+};

src/components/CaptureFilter.js

@@ -93,7 +93,9 @@ function Filter(props) {
   const [speciesId, setSpeciesId] = useState(filter?.speciesId || ALL_SPECIES);
   const [tag, setTag] = useState(null);
   const [tagSearchString, setTagSearchString] = useState('');
-  const [organizationId, setOrganizationId] = useState(ALL_ORGANIZATIONS);
+  const [organizationId, setOrganizationId] = useState(
+    filter?.organization_id || ALL_ORGANIZATIONS
+  );
   const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
 
   const handleStartDateChange = (date) => {

src/components/CaptureMatching/CaptureMatchingView.js

@@ -506,8 +506,11 @@ function CaptureMatchingView() {
 
   const getGrowerRegDate = () => {
     if (Object.keys(growerAccount).length !== 0) {
-      return 'Joined at ' + getDateTimeStringLocale(
-        growerAccount.first_registration_at || growerAccount.created_at
+      return (
+        'Joined at ' +
+        getDateTimeStringLocale(
+          growerAccount.first_registration_at || growerAccount.created_at
+        )
       );
     }
     return '';

src/components/Filter.js

@@ -83,7 +83,7 @@ function Filter(props) {
   };
 
   const formatDate = (date) => {
-    return convertDateToDefaultSqlDate(date);
+    return convertDateToDefaultSqlDate(new Date(date));
   };
 
   function handleCloseClick() {

src/components/FilterTop.js

@@ -93,7 +93,7 @@ function Filter(props) {
   const [tag, setTag] = useState(null);
   const [tagSearchString, setTagSearchString] = useState('');
   const [organizationId, setOrganizationId] = useState(
-    filter?.organizationId || ALL_ORGANIZATIONS
+    filter?.organization_id || ALL_ORGANIZATIONS
   );
   // const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
 
@@ -106,7 +106,7 @@ function Filter(props) {
   };
 
   const formatDate = (date) => {
-    return convertDateToDefaultSqlDate(date);
+    return convertDateToDefaultSqlDate(new Date(date));
   };
 
   function handleSubmit(e) {

src/components/FilterTopGrower.js

@@ -53,7 +53,9 @@ function FilterTopGrower(props) {
   const [personId, setPersonId] = useState(filter?.personId || '');
   const [firstName, setFirstName] = useState(filter?.firstName || '');
   const [lastName, setLastName] = useState(filter?.lastName || '');
-  const [organizationId, setOrganizationId] = useState(ALL_ORGANIZATIONS);
+  const [organizationId, setOrganizationId] = useState(
+    filter?.organization_id || ALL_ORGANIZATIONS
+  );
   const [email, setEmail] = useState(filter?.email || '');
   const [phone, setPhone] = useState(filter?.phone || '');
   const [wallet, setWallet] = useState(filter?.wallet || filterOptionAll);

src/components/PrivateRoute.js

@@ -2,15 +2,19 @@ import React, { useContext } from 'react';
 import { Route, Redirect } from 'react-router-dom';
 import { AppContext } from '../context/AppContext';
 
-export default function PrivateRoute({ component: Component, ...rest }) {
+export default function PrivateRoute({
+  component: Component,
+  search,
+  ...rest
+}) {
   const appContext = useContext(AppContext);
 
   return (
     <Route
       {...rest}
       render={(props) =>
         appContext.user ? (
-          <Component {...props} />
+          <Component search={search} {...props} />
         ) : (
           <Redirect
             to={{

src/context/CapturesContext.js

@@ -3,20 +3,28 @@ import FilterModel, { ALL_ORGANIZATIONS } from '../models/Filter';
 import api from '../api/treeTrackerApi';
 // import { captureStatus } from '../common/variables';
 import { AppContext } from './AppContext.js';
-import { setOrganizationFilter } from '../common/utils';
+import {
+  setOrganizationFilter,
+  handleQuerySearchParams,
+} from '../common/utils';
 
 import * as loglevel from 'loglevel';
 const log = loglevel.getLogger('../context/CapturesContext');
 
+const DEFAULT_ROWS_PER_PAGE = 25;
+const DEFAULT_PAGE = 0;
+const DEFAULT_ORDER = 'desc';
+const DEFAULT_ORDER_BY = 'created_at';
+
 export const CapturesContext = createContext({
   isLoading: false,
   captures: [],
   captureCount: 0,
   capture: {},
-  page: 0,
-  rowsPerPage: 25,
-  order: 'desc',
-  orderBy: 'timeCreated',
+  page: DEFAULT_PAGE,
+  rowsPerPage: DEFAULT_ROWS_PER_PAGE,
+  order: DEFAULT_ORDER,
+  orderBy: DEFAULT_ORDER_BY,
   filter: new FilterModel(),
   setRowsPerPage: () => {},
   setPage: () => {},
@@ -31,19 +39,43 @@ export const CapturesContext = createContext({
 
 export function CapturesProvider(props) {
   const { orgId, orgList } = useContext(AppContext);
+  const { searchParams } = props;
+
+  const {
+    rowsPerPage: rowsPerPageParam = undefined,
+    page: pageParam = undefined,
+    order: orderParam = undefined,
+    orderBy: orderByParam = undefined,
+    ...filterParams
+  } = Object.fromEntries(searchParams || []);
+
   const [captures, setCaptures] = useState([]);
   const [captureCount, setCaptureCount] = useState(0);
   const [capture, setCapture] = useState({});
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
-  const [order, setOrder] = useState('desc');
-  const [orderBy, setOrderBy] = useState('created_at');
+  const [page, setPage] = useState(Number(pageParam) || DEFAULT_PAGE);
+  const [rowsPerPage, setRowsPerPage] = useState(
+    Number(rowsPerPageParam) || DEFAULT_ROWS_PER_PAGE
+  );
+  const [order, setOrder] = useState(orderParam || DEFAULT_ORDER);
+  const [orderBy, setOrderBy] = useState(orderByParam || DEFAULT_ORDER_BY);
   const [isLoading, setIsLoading] = useState(false);
   const [filter, setFilter] = useState(
-    new FilterModel({ organization_id: ALL_ORGANIZATIONS })
+    FilterModel.fromSearchParams({
+      organization_id: ALL_ORGANIZATIONS,
+      ...filterParams,
+    })
   );
 
   useEffect(() => {
+    handleQuerySearchParams({
+      rowsPerPage:
+        rowsPerPage === DEFAULT_ROWS_PER_PAGE ? undefined : rowsPerPage,
+      page: page === DEFAULT_PAGE ? undefined : page,
+      order: order === DEFAULT_ORDER ? undefined : order,
+      orderBy: orderBy === DEFAULT_ORDER_BY ? undefined : orderBy,
+      ...filter.toSearchParams(),
+    });
+
     const abortController = new AbortController();
     // orgId can be either null or an [] of uuids
     if (orgId !== undefined) {
@@ -52,6 +84,27 @@ export function CapturesProvider(props) {
     return () => abortController.abort();
   }, [filter, rowsPerPage, page, order, orderBy, orgId]);
 
+  useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
+    const {
+      rowsPerPage: rowsPerPageParam = undefined,
+      page: pageParam = undefined,
+      order: orderParam = undefined,
+      orderBy: orderByParam = undefined,
+      ...filterParams
+    } = Object.fromEntries(searchParams);
+
+    setFilter(FilterModel.fromSearchParams(filterParams));
+
+    setPage(Number(pageParam) || DEFAULT_PAGE);
+    setRowsPerPage(Number(rowsPerPageParam) || DEFAULT_ROWS_PER_PAGE);
+    setOrder(orderParam || DEFAULT_ORDER);
+    setOrderBy(orderByParam || DEFAULT_ORDER_BY);
+  }, [searchParams]);
+
   const getCaptures = async (abortController) => {
     log.debug('4 - load captures', filter);
 

src/context/GrowerContext.js

@@ -2,16 +2,22 @@ import React, { useContext, useState, useEffect, createContext } from 'react';
 import { AppContext } from './AppContext.js';
 import FilterGrower, { ALL_ORGANIZATIONS } from 'models/FilterGrower';
 import api from 'api/growers';
-import { setOrganizationFilter } from '../common/utils';
+import {
+  setOrganizationFilter,
+  handleQuerySearchParams,
+} from '../common/utils';
 import * as loglevel from 'loglevel';
 
 const log = loglevel.getLogger('context/GrowerContext');
 
+const DEFAULT_PAGE_SIZE = 24;
+const DEFAULT_CURRENT_PAGE = 0;
+
 export const GrowerContext = createContext({
   growers: [],
-  pageSize: 24,
+  pageSize: DEFAULT_PAGE_SIZE,
   count: null,
-  currentPage: 0,
+  currentPage: DEFAULT_CURRENT_PAGE,
   filter: new FilterGrower(),
   isLoading: false,
   totalGrowerCount: null,
@@ -30,26 +36,65 @@ export const GrowerContext = createContext({
 
 export function GrowerProvider(props) {
   const { orgId, orgList } = useContext(AppContext);
+  const { searchParams } = props;
+
+  const {
+    pageSize: pageSizeParam = undefined,
+    currentPage: currentPageParam = undefined,
+    ...filterParams
+  } = Object.fromEntries(searchParams || []);
+
   const [growers, setGrowers] = useState([]);
-  const [pageSize, setPageSize] = useState(24);
+  const [pageSize, setPageSize] = useState(
+    Number(pageSizeParam) || DEFAULT_PAGE_SIZE
+  );
   const [count, setCount] = useState(null);
-  const [currentPage, setCurrentPage] = useState(0);
+  const [currentPage, setCurrentPage] = useState(
+    Number(currentPageParam) || DEFAULT_CURRENT_PAGE
+  );
   const [filter, setFilter] = useState(
-    new FilterGrower({ organization_id: ALL_ORGANIZATIONS })
+    FilterGrower.fromSearchParams({
+      organization_id: ALL_ORGANIZATIONS,
+      ...filterParams,
+    })
   );
   const [isLoading, setIsLoading] = useState(false);
   const [totalGrowerCount, setTotalGrowerCount] = useState(null);
 
   useEffect(() => {
+    if (searchParams) {
+      handleQuerySearchParams({
+        pageSize: pageSize === DEFAULT_PAGE_SIZE ? undefined : pageSize,
+        currentPage:
+          currentPage === DEFAULT_CURRENT_PAGE ? undefined : currentPage,
+        ...filter.toSearchParams(),
+      });
+    }
+
     const abortController = new AbortController();
     // orgId can be either null or an [] of uuids
     if (orgId !== undefined) {
       load({ signal: abortController.signal });
-      // getCount();
+      // getCount({ signal: abortController.signal });
     }
     return () => abortController.abort();
   }, [filter, pageSize, currentPage, orgId]);
 
+  useEffect(() => {
+    if (!searchParams) {
+      return;
+    }
+
+    const {
+      pageSize: pageSizeParam = undefined,
+      currentPage: currentPageParam = undefined,
+      ...filterParams
+    } = Object.fromEntries(searchParams);
+    setFilter(FilterGrower.fromSearchParams(filterParams));
+    setPageSize(Number(pageSizeParam) || DEFAULT_PAGE_SIZE);
+    setCurrentPage(Number(currentPageParam) || DEFAULT_CURRENT_PAGE);
+  }, [searchParams]);
+
   // EVENT HANDLERS
 
   const changePageSize = async (pageSize) => {
@@ -100,7 +145,7 @@ export function GrowerProvider(props) {
     };
   };
 
-  const getCount = async () => {
+  const getCount = async (abortController) => {
     //set correct values for organization_id, an array of uuids for ALL_ORGANIZATIONS or a uuid string if provided
     const finalFilter = setOrganizationFilter(
       filter.getWhereObj(),
@@ -112,6 +157,7 @@ export function GrowerProvider(props) {
 
     const { count } = await api.getCount({
       filter: new FilterGrower(finalFilter),
+      abortController,
     });
     setCount(Number(count));
   };