Merge branch 'issues/39' into develop

src/api/Contracts.js

@@ -1,12 +1,18 @@
 // first, include axios (or similar database talker)
+import { CancelToken } from 'axios'
 import axios from "../bootstrap/Api";
+import { CANCEL } from 'redux-saga'
 
 // endpoint root
 const root = "/contracts";
 
 export class Contracts {
   static list(payload) {
-    return axios.get(root, { params: payload });
+
+    const source = CancelToken.source()
+    const request = axios.get(root, { params: payload, cancelToken: source.token });
+    request[CANCEL] = () => source.cancel()
+    return request
   }
   static get(payload) {
     return axios.get(`${root}/${payload.id}`, {

src/api/Disputes.js

@@ -1,12 +1,18 @@
 // first, include axios (or similar database talker)
+import { CancelToken } from 'axios'
 import axios from "../bootstrap/Api";
+import { CANCEL } from 'redux-saga'
 
 // endpoint root
 const root = "/contracts/disputes";
 
 export class Disputes {
   static list(payload) {
-    return axios.get(`${root}/all`, { params: payload });
+
+    const source = CancelToken.source()
+    const request = axios.get(`${root}/all`, { params: payload, cancelToken: source.token });
+    request[CANCEL] = () => source.cancel()
+    return request
   }
   static get(payload) {
     return axios.get(`${root}/${payload.id}?include=attachments`);

src/components/common/ContractsFilters/ContractsFilters.js

@@ -4,7 +4,7 @@ import Form from "../Form";
 import Button from "../Button";
 import { SearchIcon } from "../Icons/SearchIcon";
 import statusList from "../../../assets/i18n/en/status.json"; // categories
-import { getFormattedDate } from "../../../utils/helpers"; // helpers
+import { getFormattedDate, log } from "../../../utils/helpers"; // helpers
 import "./ContractsFilters.scss";
 export class ContractsFilters extends Component {
   state = {
@@ -18,9 +18,13 @@ export class ContractsFilters extends Component {
   handleChange = (type, value) => {
     this.setState((state) => {
       const newState = { ...state, [type]: value };
+      value = type === 'searchText' && value === '' ? null : value
       if (typeof this.props.onChange === "function") this.props.onChange(type, value);
       return newState;
     });
+    log('ContractsFilters handlechange',{type:type,value:value})
+
+
   };
 
   handleReset = () => {
@@ -54,7 +58,7 @@ export class ContractsFilters extends Component {
         <Form.Search
           onChange={(value) => this.handleChange("searchText", value)}
         />
-        <Button
+        {/* <Button
           color="info"
           className="jur-contracts-filter__submit-btn"
           variant="contained"
@@ -63,7 +67,7 @@ export class ContractsFilters extends Component {
           hoverColor="info"
         >
           <SearchIcon />
-        </Button>
+        </Button> */}
       </div>
     );
   }

src/components/common/DisputesFilters/DisputesFilters.js

@@ -6,7 +6,7 @@ import { SearchIcon } from "../Icons/SearchIcon";
 import statusList from "../../../assets/i18n/en/status.json"; // status
 import categories from "../../../assets/i18n/en/contractCategories.json"; // categories
 import "./DisputesFilters.scss";
-import { getFormattedDate } from "../../../utils/helpers"; // helpers
+import { getFormattedDate, log } from "../../../utils/helpers"; // helpers
 import { AppContext } from "../../../bootstrap/AppProvider"; // context
 
 export const DisputesFilters = ( props ) => {
@@ -23,11 +23,13 @@ export const DisputesFilters = ( props ) => {
 
   const handleChange = (type, value) => {
 
-    onChange(type, value);
+    value = type === 'searchText' && value === '' ? null : value
+    // onChange(type, value);
 
     setState((state) => {
       const newState = { ...state, [type]: value };
-      if (typeof onChange === "function") onChange(newState);
+      if (typeof onChange === "function") onChange(type, value);
+      //onChange(newState);
       return newState;
     });
   };
@@ -90,7 +92,7 @@ export const DisputesFilters = ( props ) => {
         onChange={(value) => handleChange("toDate", getFormattedDate(value))}
       />
       <Form.Search onChange={(value) => handleChange("searchText", value)} />
-      <Button
+      {/* <Button
         color="info"
         variant="contained"
         onClick={onSubmit}
@@ -99,7 +101,7 @@ export const DisputesFilters = ( props ) => {
         className="can-disable"
       >
         <SearchIcon />
-      </Button>
+      </Button> */}
     </div>
   );
 };

src/components/common/Form/FormDatePicker.js

@@ -13,6 +13,7 @@ export const FormDatePicker = ( props ) => {
         selected={selectedDate}
         onChange={onChange}
         dateFormat="dd/MM/yyyy"
+        isClearable
         {...rest}
       />
       {error && errorMsg && <Form.ErrorMsg msg={errorMsg} />}

src/components/common/Form/Forms.scss

@@ -212,3 +212,9 @@
     }
   }
 }
+
+.react-datepicker__close-icon::after {
+  background-color: transparent;
+  color: #002257;
+  font-size: 16px;
+}

src/components/sections/Contracts/Contracts.js

@@ -57,6 +57,10 @@ export const Contracts = ( props ) => {
       field: type,
       value
     });
+
+    if (!(type === 'searchText' && value !== null && value.length < 3)) {
+      handleFilterSubmit()
+    }
   };
   const handleFilterSubmit = () => {
     if (

src/components/sections/Disputes/Disputes.js

@@ -59,6 +59,13 @@ export const Disputes = ( props ) => {
       field: type,
       value
     });
+
+
+    if (!(type === 'searchText' && value !== null && value.length < 3)) {
+      log('handleFilterChange ', type)
+      handleFilterSubmit()
+    }
+
   };
   const handleFilterSubmit = () => {
     global.drizzle.store.dispatch({ type: FETCH_DISPUTES });

src/sagas/Contract.js

@@ -210,7 +210,7 @@ export function* fetchContracts() {
         status && typeof status.value !== "undefined" ? status.value : null,
       from: fromDate,
       to: toDate,
-      q: searchText,
+      query: searchText,
       page,
       ...orderby
     });
@@ -604,7 +604,7 @@ export default function* contractSagas() {
   yield takeEvery(PUT_CONTRACT, updateContract);
   yield takeEvery(API_GET_CONTRACT, getContract);
   yield takeLatest(API_DELETE_CONTRACT, deleteContract);
-  yield takeEvery(FETCH_CONTRACTS, fetchContracts);
+  yield takeLatest(FETCH_CONTRACTS, fetchContracts);
   yield takeEvery(CONTRACT_ISSUE, handleContractIssues);
   yield takeLatest(CONTRACT_DELETED, onContractDelete);
   yield takeLatest(RESET_CONTRACT, onContractReset);

src/sagas/Dispute.js

@@ -109,7 +109,7 @@ export function* fetchDisputes() {
     status: status && typeof status.value !== "undefined" ? status.value : null,
     from: fromDate,
     to: toDate,
-    q: searchText
+    query: searchText
   });
   try {
     const response = yield call(Disputes.list, {
@@ -121,7 +121,7 @@ export function* fetchDisputes() {
         category && typeof category.value !== "undefined"
           ? category.value
           : null,
-      q: searchText,
+      query: searchText,
       show: mine ? "my" : "all",
       page,
       ...orderby
@@ -191,7 +191,7 @@ export default function* disputeSagas() {
   log("run", "DisputeSagas");
   yield takeEvery(API_GET_DISPUTE, getDispute);
   yield takeLatest(API_DELETE_DISPUTE, deleteDispute);
-  yield takeEvery(FETCH_DISPUTES, fetchDisputes);
+  yield takeLatest(FETCH_DISPUTES, fetchDisputes);
   yield takeLatest(DISPUTE_DELETED, onDisputeDelete);
   yield takeLatest(API_CATCH, resetUpdating);
   yield takeLatest(SET_DISPUTE, resetUpdating);

src/utils/helpers.js

@@ -122,14 +122,18 @@ export const ethToStore = ( value ) => {
 };
 
 export const getFormattedDate = (date) => {
-  let year = date.getFullYear();
-  let month = (1 + date.getMonth()).toString().padStart(2, "0");
-  let day = date
-    .getDate()
-    .toString()
-    .padStart(2, "0");
-
-  return `${year}-${month}-${day}`;
+  if (date) {
+    let year = date.getFullYear();
+    let month = (1 + date.getMonth()).toString().padStart(2, "0");
+    let day = date
+      .getDate()
+      .toString()
+      .padStart(2, "0");
+
+    return `${year}-${month}-${day}`;
+  } 
+  return null;
+
 };
 
 export const capitalize = (string) =>