🐛 Fix error screen when operations over comments fail

CHANGES.md

@@ -12,6 +12,7 @@
 
 - Fix problem with overflow dropdown on stroke-cap [#1216](https://github.com/penpot/penpot/issues/1216)
 - Fix menu context for single element nested in components [#1186](https://github.com/penpot/penpot/issues/1186)
+- Fix error screen when operations over comments fail [#1219](https://github.com/penpot/penpot/issues/1219)
 
 ### :arrow_up: Deps updates
 ### :boom: Breaking changes

frontend/src/app/main/data/comments.cljs

@@ -77,7 +77,8 @@
       (watch [_ _ _]
         (->> (rp/mutation :create-comment-thread params)
              (rx/mapcat #(rp/query :comment-thread {:file-id (:file-id %) :id (:id %)}))
-             (rx/map #(partial created %)))))))
+             (rx/map #(partial created %))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 (defn update-comment-thread-status
   [{:keys [id] :as thread}]
@@ -87,7 +88,8 @@
     (watch [_ _ _]
       (let [done #(d/update-in-when % [:comment-threads id] assoc :count-unread-comments 0)]
         (->> (rp/mutation :update-comment-thread-status {:id id})
-             (rx/map (constantly done)))))))
+             (rx/map (constantly done))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 
 (defn update-comment-thread
@@ -104,6 +106,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (->> (rp/mutation :update-comment-thread {:id id :is-resolved is-resolved})
+           (rx/catch #(rx/throw {:type :comment-error}))
            (rx/ignore)))))
 
 
@@ -118,7 +121,8 @@
       (watch [_ _ _]
         (rx/concat
          (->> (rp/mutation :add-comment {:thread-id (:id thread) :content content})
-              (rx/map #(partial created %)))
+              (rx/map #(partial created %))
+              (rx/catch #(rx/throw {:type :comment-error})))
          (rx/of (refresh-comment-thread thread)))))))
 
 (defn update-comment
@@ -132,6 +136,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (->> (rp/mutation :update-comment {:id id :content content})
+           (rx/catch #(rx/throw {:type :comment-error}))
            (rx/ignore)))))
 
 (defn delete-comment-thread
@@ -147,6 +152,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (->> (rp/mutation :delete-comment-thread {:id id})
+           (rx/catch #(rx/throw {:type :comment-error}))
            (rx/ignore)))))
 
 (defn delete-comment
@@ -160,6 +166,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (->> (rp/mutation :delete-comment {:id id})
+           (rx/catch #(rx/throw {:type :comment-error}))
            (rx/ignore)))))
 
 (defn refresh-comment-thread
@@ -171,7 +178,8 @@
       ptk/WatchEvent
       (watch [_ _ _]
         (->> (rp/query :comment-thread {:file-id file-id :id id})
-             (rx/map #(partial fetched %)))))))
+             (rx/map #(partial fetched %))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 (defn retrieve-comment-threads
   [file-id]
@@ -182,7 +190,8 @@
       ptk/WatchEvent
       (watch [_ _ _]
         (->> (rp/query :comment-threads {:file-id file-id})
-             (rx/map #(partial fetched %)))))))
+             (rx/map #(partial fetched %))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 (defn retrieve-comments
   [thread-id]
@@ -193,7 +202,8 @@
       ptk/WatchEvent
       (watch [_ _ _]
         (->> (rp/query :comments {:thread-id thread-id})
-             (rx/map #(partial fetched %)))))))
+             (rx/map #(partial fetched %))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 (defn retrieve-unread-comment-threads
   "A event used mainly in dashboard for retrieve all unread threads of a team."
@@ -204,7 +214,8 @@
     (watch [_ _ _]
       (let [fetched #(assoc %2 :comment-threads (d/index-by :id %1))]
         (->> (rp/query :unread-comment-threads {:team-id team-id})
-             (rx/map #(partial fetched %)))))))
+             (rx/map #(partial fetched %))
+             (rx/catch #(rx/throw {:type :comment-error})))))))
 
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

frontend/src/app/main/errors.cljs

@@ -94,6 +94,14 @@
               :type :error
               :timeout 3000}))))
 
+(defmethod ptk/handle-error :comment-error
+  [_]
+  (ts/schedule
+   (st/emitf
+    (dm/show {:content "There was an error with the comment"
+              :type :error
+              :timeout 3000}))))
+
 ;; This is a pure frontend error that can be caused by an active
 ;; assertion (assertion that is preserved on production builds). From
 ;; the user perspective this should be treated as internal error.

frontend/src/app/main/ui/comments.cljs

@@ -302,21 +302,22 @@
        (when-let [node (mf/ref-val ref)]
          (.scrollIntoViewIfNeeded ^js node))))
 
-    [:div.thread-content
-     {:style {:top (str pos-y "px")
-              :left (str pos-x "px")}
-      :on-click dom/stop-propagation}
+    (when (some? comment)
+      [:div.thread-content
+       {:style {:top (str pos-y "px")
+                :left (str pos-x "px")}
+        :on-click dom/stop-propagation}
 
-     [:div.comments
-      [:& comment-item {:comment comment
-                        :users users
-                        :thread thread}]
-      (for [item (rest comments)]
-        [:*
-         [:hr]
-         [:& comment-item {:comment item :users users}]])
-      [:div {:ref ref}]]
-     [:& reply-form {:thread thread}]]))
+       [:div.comments
+        [:& comment-item {:comment comment
+                          :users users
+                          :thread thread}]
+        (for [item (rest comments)]
+          [:*
+           [:hr]
+           [:& comment-item {:comment item :users users}]])
+        [:div {:ref ref}]]
+       [:& reply-form {:thread thread}]])))
 
 (mf/defc thread-bubble
   {::mf/wrap [mf/memo]}