feat: update filters to use keys that match new apis

src/components/CaptureDetailDialog.js

@@ -113,27 +113,7 @@ function CaptureDetailDialog({ open, captureId, onClose, page }) {
     const current = cdContext.capture;
     if (current) {
       // map the keys from legacy to new api keys
-      setRenderCapture({
-        status: current.status,
-        id: current.id || current.uuid,
-        reference_id: current.reference_id || current.id,
-        grower_account_id: current.grower_account_id || current.planterId,
-        wallet: current.wallet || current.planterIdentifier,
-        device_identifier:
-          current.device_identifier || current.deviceIdentifier,
-        image_url: current.image_url || current.imageUrl,
-        lat: current.lat || current.latitude,
-        lon: current.lon || current.longitude,
-        age: current.age,
-        captureApprovalTag: current.captureApprovalTag || null,
-        morphology: current.morphology || null,
-        note: current.note,
-        rejectionReason: current.rejectionReason || null,
-        species_id: current.species_id || current.speciesId,
-        token_id: current.token_id || current.tokenId,
-        created_at: current.created_at || current.timeCreated,
-        updated_at: current.updated_at || current.timeUpdated,
-      });
+      setRenderCapture({ ...current });
     }
     if (isLoading) {
       setIsLoading(false);
@@ -277,12 +257,14 @@ function CaptureDetailDialog({ open, captureId, onClose, page }) {
           <Typography className={classes.subtitle}>
             Verification Status
           </Typography>
-          {capture.status === captureStatus.UNPROCSSED ? (
+          {capture.status === captureStatus.UNPROCESSED ? (
             <Chip
               label={verificationStates.AWAITING}
               className={classes.awaitingChip}
             />
-          ) : capture.status === captureStatus.APPROVED ? (
+          ) : // Verify will have status of 'approved', Captures and CaptureMatch will have status of 'active' because all captures are approved
+          capture.status === captureStatus.APPROVED ||
+            capture.status === 'active' ? (
             <Chip
               label={verificationStates.APPROVED}
               className={classes.approvedChip}

src/components/CaptureFilter.js

@@ -74,20 +74,17 @@ function Filter(props) {
   const tagsContext = useContext(TagsContext);
   const { classes, filter = new FilterModel() } = props;
   const filterOptionAll = 'All';
-  const dateStartDefault = null;
-  const dateEndDefault = null;
+  const startDateDefault = null;
+  const endDateDefault = null;
   const [uuid, setUUID] = useState(filter?.uuid || '');
   const [captureId, setCaptureId] = useState(filter?.captureId || '');
   const [wallet, setWallet] = useState(filter?.wallet || '');
-  const [growerId, setGrowerId] = useState(filter?.planterId || '');
-  const [deviceId, setDeviceId] = useState(filter?.deviceIdentifier || '');
-  const [growerIdentifier, setGrowerIdentifier] = useState(
-    filter?.planterIdentifier || ''
+  const [growerId, setGrowerId] = useState(filter?.grower_account_id || '');
+  const [deviceId, setDeviceId] = useState(filter?.device_identifier || '');
+  const [startDate, setStartDate] = useState(
+    filter?.startDate || startDateDefault
   );
-  const [dateStart, setDateStart] = useState(
-    filter?.dateStart || dateStartDefault
-  );
-  const [dateEnd, setDateEnd] = useState(filter?.dateEnd || dateEndDefault);
+  const [endDate, setEndDate] = useState(filter?.endDate || endDateDefault);
   const [speciesId, setSpeciesId] = useState(filter?.speciesId || ALL_SPECIES);
   const [tag, setTag] = useState(null);
   const [tagSearchString, setTagSearchString] = useState('');
@@ -99,12 +96,12 @@ function Filter(props) {
   );
   const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
 
-  const handleDateStartChange = (date) => {
-    setDateStart(date);
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
   };
 
-  const handleDateEndChange = (date) => {
-    setDateEnd(date);
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
   };
 
   const formatDate = (date) => {
@@ -117,15 +114,14 @@ function Filter(props) {
     const filter = new FilterModel();
     filter.uuid = uuid;
     filter.captureId = captureId;
-    filter.planterId = growerId;
-    filter.deviceIdentifier = deviceId;
-    filter.planterIdentifier = growerIdentifier;
+    filter.grower_account_id = growerId;
+    filter.device_identifier = deviceId;
     filter.wallet = wallet;
-    filter.dateStart = dateStart ? formatDate(dateStart) : undefined;
-    filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined;
-    filter.speciesId = speciesId;
+    filter.startDate = startDate ? formatDate(startDate) : undefined;
+    filter.endDate = endDate ? formatDate(endDate) : undefined;
+    filter.species_id = speciesId;
     filter.tagId = tag ? tag.id : 0;
-    filter.organizationId = organizationId;
+    filter.organization_id = organizationId;
     filter.stakeholderUUID = stakeholderUUID;
     filter.tokenId = tokenId;
 
@@ -138,10 +134,9 @@ function Filter(props) {
     setCaptureId('');
     setGrowerId('');
     setDeviceId('');
-    setGrowerIdentifier('');
     setWallet('');
-    setDateStart(dateStartDefault);
-    setDateEnd(dateEndDefault);
+    setStartDate(startDateDefault);
+    setEndDate(endDateDefault);
     setSpeciesId(ALL_SPECIES);
     setTag(null);
     setTagSearchString('');
@@ -188,9 +183,9 @@ function Filter(props) {
                   htmlFor="start-date-picker"
                   label="Start Date"
                   format={getDateFormatLocale()}
-                  value={dateStart}
-                  onChange={handleDateStartChange}
-                  maxDate={dateEnd || Date()} // Don't allow selection after today
+                  value={startDate}
+                  onChange={handleStartDateChange}
+                  maxDate={endDate || Date()} // Don't allow selection after today
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
                   }}
@@ -201,9 +196,9 @@ function Filter(props) {
                   htmlFor="end-date-picker"
                   label="End Date"
                   format={getDateFormatLocale()}
-                  value={dateEnd}
-                  onChange={handleDateEndChange}
-                  minDate={dateStart || datePickerDefaultMinDate}
+                  value={endDate}
+                  onChange={handleEndDateChange}
+                  minDate={startDate || datePickerDefaultMinDate}
                   maxDate={Date()} // Don't allow selection after today
                   KeyboardButtonProps={{
                     'aria-label': 'change date',
@@ -249,14 +244,6 @@ function Filter(props) {
                 value={deviceId}
                 onChange={(e) => setDeviceId(e.target.value)}
               />
-              <TextField
-                htmlFor="grower-identifier"
-                id="grower-identifier"
-                label="Wallet"
-                placeholder="e.g. [email protected]"
-                value={growerIdentifier}
-                onChange={(e) => setGrowerIdentifier(e.target.value)}
-              />
               <TextField
                 data-testid="species-dropdown"
                 select

src/components/Captures/CaptureTable.test.js

@@ -243,26 +243,13 @@ describe('Captures', () => {
 
     it('should call captures API with a valid filter', () => {
       const filter = JSON.stringify({
-        where: { approved: true, active: true },
-        order: ['id asc'],
+        status: 'approved',
         limit: 25,
-        skip: 0,
-        fields: {
-          id: true,
-          timeCreated: true,
-          status: true,
-          active: true,
-          approved: true,
-          planterId: true,
-          planterIdentifier: true,
-          deviceIdentifier: true,
-          speciesId: true,
-          tokenId: true,
-        },
+        offset: 0,
       });
 
       expect(axios.get).toHaveBeenCalled();
-      expect(axios.get.mock.calls[0][0]).toContain(`/trees?filter=${filter}`);
+      expect(axios.get.mock.calls[0][0]).toContain(`/v2/captures`);
     });
   });
 });

src/components/ExportCaptures.js

@@ -71,7 +71,7 @@ const ExportCaptures = (props) => {
     return captures.map((capture) => {
       let formatCapture = {};
       Object.keys(selectedColumns).forEach((attr) => {
-        if (['id', 'planterId', 'imageUrl'].includes(attr)) {
+        if (['id', 'grower_account_id', 'imageUrl'].includes(attr)) {
           formatCapture[attr] = capture[attr];
         } else {
           const renderer = selectedColumns[attr].renderer;

src/components/Filter.js

@@ -21,9 +21,12 @@ import {
   getDateFormatLocale,
   convertDateToDefaultSqlDate,
 } from '../common/locale';
-import { datePickerDefaultMinDate } from '../common/variables';
-import { getVerificationStatus } from '../common/utils';
-import { verificationStates, tokenizationStates } from '../common/variables';
+import {
+  captureStatus,
+  datePickerDefaultMinDate,
+  verificationStates,
+  tokenizationStates,
+} from '../common/variables';
 
 export const FILTER_WIDTH = 330;
 
@@ -57,32 +60,27 @@ function Filter(props) {
   const { classes, filter } = props;
   // console.log('filter', filter);
   const filterOptionAll = 'All';
-  const dateStartDefault = null;
-  const dateEndDefault = null;
+  const startDateDefault = null;
+  const endDateDefault = null;
   const [captureId, setCaptureId] = useState(filter?.captureId || '');
   const [wallet, setWallet] = useState(filter?.wallet || '');
-  const [growerId, setGrowerId] = useState(filter?.planterId || '');
+  const [growerId, setGrowerId] = useState(filter?.grower_account_id || '');
   const [deviceIdentifier, setDeviceIdentifier] = useState(
-    filter?.deviceIdentifier || ''
-  );
-  const [growerIdentifier, setGrowerIdentifier] = useState(
-    filter?.planterIdentifier || ''
+    filter?.device_identifier || ''
   );
   const [status, setStatus] = useState(filter?.status);
-  const [approved, setApproved] = useState(filter?.approved);
-  const [active, setActive] = useState(filter?.active);
-  const [dateStart, setDateStart] = useState(
-    filter?.dateStart || dateStartDefault
+  const [startDate, setStartDate] = useState(
+    filter?.startDate || startDateDefault
   );
-  const [dateEnd, setDateEnd] = useState(filter?.dateEnd || dateEndDefault);
+  const [endDate, setEndDate] = useState(filter?.endDate || endDateDefault);
   const [tokenId, setTokenId] = useState(filter?.tokenId || filterOptionAll);
 
-  const handleDateStartChange = (date) => {
-    setDateStart(date);
+  const handleStartDateChange = (date) => {
+    setStartDate(date);
   };
 
-  const handleDateEndChange = (date) => {
-    setDateEnd(date);
+  const handleEndDateChange = (date) => {
+    setEndDate(date);
   };
 
   const formatDate = (date) => {
@@ -97,14 +95,11 @@ function Filter(props) {
     e.preventDefault();
     const filter = new FilterModel();
     filter.captureId = captureId;
-    filter.wallet = wallet
-    filter.planterId = growerId;
-    filter.deviceIdentifier = deviceIdentifier;
-    filter.planterIdentifier = growerIdentifier;
-    filter.dateStart = dateStart ? formatDate(dateStart) : undefined;
-    filter.dateEnd = dateEnd ? formatDate(dateEnd) : undefined;
-    filter.approved = approved;
-    filter.active = active;
+    filter.wallet = wallet;
+    filter.grower_account_id = growerId;
+    filter.device_identifier = deviceIdentifier;
+    filter.startDate = startDate ? formatDate(startDate) : undefined;
+    filter.endDate = endDate ? formatDate(endDate) : undefined;
     filter.tokenId = tokenId;
     filter.status = status;
     props.onSubmit && props.onSubmit(filter);
@@ -115,11 +110,8 @@ function Filter(props) {
     setWallet('');
     setGrowerId('');
     setDeviceIdentifier('');
-    setGrowerIdentifier('');
-    setDateStart(dateStartDefault);
-    setDateEnd(dateEndDefault);
-    setApproved();
-    setActive();
+    setStartDate(startDateDefault);
+    setEndDate(endDateDefault);
     setTokenId(filterOptionAll);
     setStatus('All');
 
@@ -205,39 +197,27 @@ function Filter(props) {
         value={deviceIdentifier}
         onChange={(e) => setDeviceIdentifier(e.target.value)}
       />
-      <GSInputLabel text="Grower Identifier" />
-      <TextField
-        placeholder="grower identifier"
-        InputLabelProps={{
-          shrink: true,
-        }}
-        value={growerIdentifier}
-        onChange={(e) => setGrowerIdentifier(e.target.value)}
-      />
       <GSInputLabel text="Verification Status" />
       <TextField
         select
         value={
-          active === undefined && approved === undefined
+          status === undefined
             ? filterOptionAll
-            : getVerificationStatus(active, approved)
+            : status === verificationStates.APPROVED
+            ? captureStatus.APPROVED
+            : status === verificationStates.REJECTED
+            ? captureStatus.REJECTED
+            : captureStatus.UNPROCESSED
         }
         onChange={(e) => {
-          setApproved(
-            e.target.value === filterOptionAll
-              ? undefined
-              : e.target.value === verificationStates.AWAITING ||
-                e.target.value === verificationStates.REJECTED
-              ? false
-              : true
-          );
-          setActive(
+          setStatus(
             e.target.value === filterOptionAll
               ? undefined
-              : e.target.value === verificationStates.AWAITING ||
-                e.target.value === verificationStates.APPROVED
-              ? true
-              : false
+              : e.target.value === captureStatus.APPROVED
+              ? verificationStates.APPROVED
+              : e.target.value === captureStatus.REJECTED
+              ? verificationStates.REJECTED
+              : verificationStates.AWAITING
           );
         }}
       >
@@ -280,10 +260,10 @@ function Filter(props) {
             margin="normal"
             id="start-date-picker"
             label="Start Date"
-            value={dateStart}
-            onChange={handleDateStartChange}
+            value={startDate}
+            onChange={handleStartDateChange}
             format={getDateFormatLocale()}
-            maxDate={dateEnd || Date()} // Don't allow selection after today
+            maxDate={endDate || Date()} // Don't allow selection after today
             KeyboardButtonProps={{
               'aria-label': 'change date',
             }}
@@ -293,10 +273,10 @@ function Filter(props) {
             margin="normal"
             id="end-date-picker"
             label="End Date"
-            value={dateEnd}
-            onChange={handleDateEndChange}
+            value={endDate}
+            onChange={handleEndDateChange}
             format={getDateFormatLocale()}
-            minDate={dateStart || datePickerDefaultMinDate}
+            minDate={startDate || datePickerDefaultMinDate}
             maxDate={Date()} // Don't allow selection after today
             KeyboardButtonProps={{
               'aria-label': 'change date',