so many small tweaks due to the fact that the grid was slow.

project.clj

@@ -28,7 +28,7 @@
                  [dk.ative/docjure "1.12.0"]
                  [org.clojure/java.jdbc "0.7.3"]
                  [cljsjs/dropzone "4.3.0-0"]
-                 [cljsjs/recharts "1.4.2-0"]
+                 [cljsjs/recharts "1.4.2-0" :exclusions [cljsjs/react cljsjs/react-dom]]
                  [clj-fuzzy "0.4.1"]
                  [honeysql "0.9.2"]
                  [com.walmartlabs/lacinia "0.25.0"]
@@ -71,6 +71,7 @@
                  [org.clojure/data.csv "0.1.4"]
                  [io.rkn/conformity "0.5.1"]
                  [cider/piggieback "0.4.0"]
+
                  [hiccup "1.0.5"]]
   :plugins [[lein-ring "0.9.7"]
             [lein-cljsbuild "1.1.5"]]
@@ -119,9 +120,9 @@
                                                                             org.eclipse.jetty.websocket/websocket-servlet
                                                                             args4j]]]}
    :provided {:dependencies [[org.clojure/clojurescript "1.10.339"]
-                             [reagent "1.0.0-alpha1" ]
+                             [reagent "1.0.0-alpha2" ]
-                             [cljsjs/react-datepicker "2.1.0-0"]
+                             [cljsjs/react-datepicker "2.1.0-0" :exclusions [cljsjs/react cljsjs/react-dom]]
-                             [cljsjs/react-transition-group "2.4.0-0"] 
+                             [cljsjs/react-transition-group "2.4.0-0" :exclusions [cljsjs/react cljsjs/react-dom]] 
                              [re-frame "0.10.2"]
                              [re-frame-utils "0.1.0"]
                              [com.andrewmcveigh/cljs-time "0.5.2"]]}}

src/clj/auto_ap/yodlee/import.clj

@@ -17,24 +17,8 @@
             [clojure.tools.logging :as log]))
 
 
-
+(defn rough-match [client-id bank-account-id amount]
-(defn transaction->payment [_ check-number client-id bank-account-id amount id]
+  (if (and client-id bank-account-id amount)
-  (cond (not (and client-id bank-account-id))
-        nil
-
-        (:transaction/payment (d-transactions/get-by-id [:transaction/id (sha-256 (str id))]))
-        nil
-
-        check-number
-        (-> (d-checks/get-graphql {:client-id client-id
-                                   :bank-account-id bank-account-id 
-                                   :check-number check-number
-                                   :amount (- amount)
-                                   :status :payment-status/pending})
-            first
-            first)
-
-        (and client-id bank-account-id amount)
     (let [[matching-checks] (d-checks/get-graphql {:client-id client-id
                                                    :bank-account-id bank-account-id 
                                                    :amount (- amount)
@@ -42,9 +26,33 @@
       (if (= 1 (count matching-checks))
         (first matching-checks)
         nil))
+    nil))
+
+
+(defn transaction->payment [_ check-number client-id bank-account-id amount id]
+  (log/info "Searching for a matching check for "
+            {:client-id client-id
+             :check-number check-number
+             :bank-account-id bank-account-id
+             :amount amount})
+  (cond (not (and client-id bank-account-id))
+        nil
+
+        (:transaction/payment (d-transactions/get-by-id [:transaction/id (sha-256 (str id))]))
+        nil
+
+        check-number
+        (or (-> (d-checks/get-graphql {:client-id client-id
+                                       :bank-account-id bank-account-id 
+                                       :check-number check-number
+                                       :amount (- amount)
+                                       :status :payment-status/pending})
+                first
+                first)
+            (rough-match client-id bank-account-id amount))
 
         :else
-        nil))
+        (rough-match client-id bank-account-id amount)))
 
 (defn extract-check-number [{{description-original :original} :description}]
   

src/cljs/auto_ap/effects.cljs

@@ -161,10 +161,10 @@
  (fn [{:keys [query on-success on-error token variables query-obj owns-state]}]
    (go
      (when (:multi owns-state)
-       (re-frame/dispatch [::status/loading-multi (:multi owns-state)  (:which owns-state)]))
+       (re-frame/dispatch-sync [::status/loading-multi (:multi owns-state)  (:which owns-state)]))
 
      (when (:single owns-state)
-       (re-frame/dispatch [::status/loading (:single owns-state)]))
+       (re-frame/dispatch-sync [::status/loading (:single owns-state)]))
      (let [headers (if token
                      {"Authorization" (str "Token " token)} 
                      {})

src/cljs/auto_ap/views/components/grid.cljs

@@ -119,13 +119,12 @@
                            (mapv (fn [c]
                                    [:div.level-item c]) children))]]))))]))
 
-(defn table []
+(defn table [{:keys [fullwidth]}]
-  (r/create-class {:reagent-render
+  
-                   (fn [{:keys [fullwidth]}]
   (into 
    [:table.table.compact.grid {:class (if fullwidth
                                         ["is-fullwidth"])}]
-                      (r/children (r/current-component))))}))
+   (r/children (r/current-component))))
 
 (defn header []
   (into 
@@ -138,13 +137,17 @@
         (r/children (r/current-component))))
 
 (defn row [{:keys [class]}]
-  (into [:tr {:class class}]
+  (apply r/create-element "tr" #js {:className class}
-        (r/children (r/current-component))))
+         (map r/as-element (r/children (r/current-component)))))
+
+(defn button-cell [params]
+  (apply r/create-element "td" #js {"style" #js {"overflow" "visible"}}
+         (map r/as-element (r/children (r/current-component)))))
 
 (defn cell [params]
-  [:td params
+  (apply r/create-element "td" #js {}
-   (into [:span.test ]
+         (map r/as-element (r/children (r/current-component))))
-         (r/children (r/current-component)))])
+  )
 
 (defn body []
   (let [children (r/children (r/current-component))]
@@ -153,29 +156,28 @@
        (let [{:strs [column-count status]} (js->clj consume)]
          (r/as-element
           (cond (= :loading (:state status))
-                [:tbody 
+                ^{:key "loading-body"}
-                 (for [i (range 40)]
+                [:tbody.test
+                 (for [i (range 20)]
                    ^{:key i}
                    [:tr 
                     (for [x (range column-count)]
                       ^{:key x}
                       [:td #_{:col-span column-count}
-                       [appearing {:visible? true
+                       [:div
-                                   :timeout 1000
-                                   :enter-class "appear"
-                                   :exit-class "disappear"}
-                        [:div.test 
                         [:div.ph-item
                          [:div.ph-row
-                           [:div.ph-col-12.big]]]]]])
+                          [:div.ph-col-12.big]]]]])])]
-                    ])]
+                
                 (= :error (:state status))
+                ^{:key "error-body"}
                 [:tbody [:tr [:td.has-text-centered {:col-span column-count}
                               "An unexpected error has occured. "
                               (-> status :error first :message)
                               " Please try refreshing the page."]]]
                 :else
-                (into [:tbody]
+                (into ^{:key "main-body"}
+                      [:tbody]
 
                       children)))))]))
 

src/cljs/auto_ap/views/components/invoice_table.cljs

@@ -44,7 +44,8 @@
  :<- [::specific-table-params]
  :<- [::subs/query-params]
  (fn [[specific-table-params query-params]]
-   (merge (select-keys query-params #{:start :sort}) specific-table-params )))
+   (update (merge (select-keys query-params #{:start :sort}) specific-table-params )
+           :sort seq)))
 
 (re-frame/reg-event-fx
  ::params-changed
@@ -128,7 +129,7 @@
      
      [grid/cell {:class "has-text-right"} (nf total )]
      [grid/cell {:class "has-text-right"} (nf outstanding-balance )]
-     [grid/cell {:style {:overflow "visible"}}
+     [grid/button-cell {} 
       [:div.buttons 
        (when (seq expense-accounts)
          [drop-down {:id [::expense-accounts id  ]
@@ -188,9 +189,12 @@
         {:keys [sort]} @(re-frame/subscribe [::table-params])
         {:keys [invoices outstanding]} invoice-page
         selected-client @(re-frame/subscribe [::subs/client])
-        is-loading? (= :loading status)
+        is-loading? (= :loading (:state status))
         is-sorted-by-vendor? (and (= "vendor" (:sort-key (first sort)))
-                                  (not is-loading?))
+                                  (not is-loading?)
+                                  (or (apply <= (map (comp :name :vendor) (:invoices invoice-page)))
+                                      (apply >= (map (comp :name :vendor) (:invoices invoice-page)))))
+        
         [invoice-groups] (if is-sorted-by-vendor?
                            (reduce
                             (fn [[acc last-vendor] invoice]
@@ -203,7 +207,9 @@
                             [[] nil]
                             (:invoices invoice-page))
                            [[(:invoices invoice-page)]])]
+    ^{:key (str @(re-frame/subscribe [::table-params]))}
     [grid/grid {:on-params-change (fn [p]
+                                    
                                     (re-frame/dispatch [::params-changed p]))
                 :params @(re-frame/subscribe [::table-params])
                 :status status
@@ -242,7 +248,6 @@
            [row {:invoice i
                  :check-boxes check-boxes
                  :checked checked
-                 :on-check-changed on-check-changed
                  :selected-client selected-client
                  :overrides overrides
                  :expense-event expense-event}])]])]))

src/cljs/auto_ap/views/pages/import_invoices.cljs

@@ -49,13 +49,14 @@
                          [:div.field.has-addons
                           [:p.control
                            [:a.button.is-static "Force vendor"]]
+                          [:div.control {:style {:width "400px"}}
                            [typeahead-entity {:matches @(re-frame/subscribe [::subs/vendors])
                                               :match->text :name
                                               :name "vendor"
                                               :type "typeahead"
                                               :on-change (fn [v]
                                                            (reset! vendor v))
-                                             :value @vendor}]
+                                              :value @vendor}]]
                           ]
                          [:div.tile.notification
                           

src/cljs/auto_ap/views/pages/invoices/form.cljs

@@ -203,9 +203,10 @@
      
 
      {:db (cond-> db
-            (#{:create :add-and-print} command) (forms/start-form ::form {:client @(re-frame/subscribe [::subs/client])
+            (#{:create :add-and-print} command) (-> (forms/stop-form ::form )
+                                                    (forms/start-form ::form {:client @(re-frame/subscribe [::subs/client])
                                                                               :status :unpaid
-                                                                          :date (date->str (c/now) standard)})
+                                                                              :date (date->str (c/now) standard)}))
             (= :edit command) (forms/stop-form ::form))
       :dispatch-n (cond-> [(conj invoice-created invoice)]
                     (= :add-and-print command) (conj (conj invoice-printed (:pdf-url (:add-and-print-invoice result)))))})))
@@ -228,7 +229,7 @@
          min-total (if (= (:total (:original data)) (:outstanding-balance (:original data)))
                      nil
                      (- (:total (:original data)) (:outstanding-balance (:original data))))]
-     ^{:key id}
+     (with-meta 
        (form-inline (assoc params :title "New Invoice") 
                     [:<>
                      (when-not @(re-frame/subscribe [::subs/client])
@@ -335,4 +336,5 @@
                                  ^{:key (str id "-debit")} [:a.dropdown-item {:on-click (dispatch-event [::add-and-print params id :debit])} "Debit from " name]))))]]])
                       [:div.column
 
-                     (submit-button "Save")]]]))])
+                       (submit-button "Save")]]])
+       {:key id}))])

src/cljs/auto_ap/views/pages/payments/table.cljs

@@ -74,7 +74,7 @@
      [grid/cell {} (date->str date) ]
      [grid/cell {:class "has-text-right"} (nf amount )]
      [grid/cell {} status]
-     [grid/cell {:style {:overflow "visible"}}
+     [grid/button-cell {}
       [:div.buttons 
        (when (seq invoices)
          [drop-down {:id [::invoices id]

src/cljs/auto_ap/views/pages/transactions/table.cljs

@@ -93,7 +93,7 @@
           [grid/cell {} (date->str date) ]
           [grid/cell {:class "has-text-right"} (nf amount )]
           [grid/cell {} status]
-          [grid/cell {:style {:overflow "visible"}}
+          [grid/button-cell {} 
            [:div.buttons 
             [drop-down {:id [::expense-accounts id  ]
                         :header [buttons/sl-icon {:aria-haspopup true

src/cljs/auto_ap/views/pages/unpaid_invoices.cljs

@@ -97,6 +97,7 @@
  ::params-change
  [with-user]
  (fn [{:keys [user]} [_ params]]
+   (println "REQUERY")
    {:graphql {:token user
               :owns-state {:single ::page}
               :query-obj (table/query params )
@@ -364,9 +365,20 @@
  ::invoice-updated
  [(re-frame/path [::invoice-page :invoices])]
  (fn [{:keys  [db]} [_ [_ invoice]]]
-   {:db (merge-by db :id invoice)}))
+   (let [by-id (by :id db )]
-
+     {:db (if (by-id (:id invoice))
+            (merge-by db :id invoice)
+            (into [invoice] db))})))
 
+(re-frame/reg-event-fx
+ ::invoice-edited
+ [(re-frame/path [::invoice-page :invoices])]
+ (fn [{:keys  [db]} [_ invoice]]
+   (let [invoice (assoc invoice :class "live-added")]
+     (let [by-id (by :id db )]
+       {:db (if (by-id (:id invoice))
+              (merge-by db :id invoice)
+              (into [invoice] db))}))))
 
 (re-frame/reg-event-fx
  ::expense-accounts-updated
@@ -630,5 +642,5 @@
                                    [print-checks-modal]
                                    [handwrite-checks-modal]
                                    [change-expense-accounts-modal {:updated-event [::expense-accounts-updated]}]]
-                          :right-side-bar [appearing-side-bar {:visible? invoice-bar-active?} [form/form {:invoice-created [::invoice-updated]
+                          :right-side-bar [appearing-side-bar {:visible? invoice-bar-active?} [form/form {:invoice-created [::invoice-edited]
                                                                                                           :invoice-printed [::checks-printed]}]]}]))}))