✨ Auto edit the new project created

frontend/src/uxbox/main/data/dashboard.cljs

@@ -81,6 +81,7 @@
     (update [_ state]
       (let [profile (:profile state)]
         (update state :dashboard-local assoc
+                :project-for-edit nil
                 :team-id (:default-team-id profile)
                 :project-id (:default-project-id profile))))
 
@@ -98,6 +99,7 @@
     ptk/UpdateEvent
     (update [_ state]
       (update state :dashboard-local assoc
+              :project-for-edit nil
               :project-id nil
               :team-id team-id))
 
@@ -116,6 +118,7 @@
      ptk/UpdateEvent
      (update [_ state]
        (update state :dashboard-local assoc
+               :project-for-edit nil
                :team-id team-id
                :project-id project-id))
 
@@ -242,7 +245,7 @@
 (def create-project
   (ptk/reify ::create-project
     ptk/WatchEvent
-    (watch [this state stream]
+    (watch [_ state stream]
       (let [name (str "New Project " (gensym "p"))
             team-id (get-in state [:dashboard-local :team-id])]
         (->> (rp/mutation! :create-project {:name name :team-id team-id})
@@ -253,8 +256,20 @@
   (us/verify ::project data)
   (ptk/reify ::project-created
     ptk/UpdateEvent
-    (update [this state]
-      (update state :projects assoc (:id data) data))))
+    (update [_ state]
+      (-> state
+        (update :projects assoc (:id data) data)
+        (update :dashboard-local assoc :project-for-edit (:id data))))
+
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (rx/of (rt/nav :dashboard-project {:team-id (:team-id data) :project-id (:id data)})))))
+
+(def clear-project-for-edit
+  (ptk/reify ::clear-project-for-edit
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:dashboard-local :project-for-edit] nil))))
 
 ;; --- Rename Project
 
@@ -343,7 +358,7 @@
   (us/verify ::file data)
   (ptk/reify ::file-created
     ptk/UpdateEvent
-    (update [this state]
+    (update [_ state]
       (let [project-id (:project-id data)
             file-id (:id data)
             recent-project-files (get-in state [:recent-file-ids project-id] [])]

frontend/src/uxbox/main/refs.cljs

@@ -32,6 +32,11 @@
 (def profile
   (l/derived :profile st/state))
 
+;; ---- Dashboard refs
+
+(def dashboard-local
+  (l/derived :dashboard-local st/state))
+
 ;; ---- Workspace refs
 
 (def workspace-local

frontend/src/uxbox/main/ui/dashboard/sidebar.cljs

@@ -33,30 +33,47 @@
 
 (mf/defc sidebar-project
   [{:keys [id name selected? team-id] :as props}]
-  (let [local (mf/use-state {:name name})
+  (let [dashboard-local @refs/dashboard-local
+        project-for-edit (:project-for-edit dashboard-local)
+        local (mf/use-state {:name name
+                             :editing (= id project-for-edit)})
         editable? (not (nil? id))
+        edit-input-ref (mf/use-ref)
+
         on-click #(st/emit! (rt/nav :dashboard-project {:team-id team-id :project-id id}))
-        on-dbl-click #(when editable? (swap! local assoc :edit true))
+        on-dbl-click #(when editable? (swap! local assoc :editing true))
         on-input #(as-> % $
                     (dom/get-target $)
                     (dom/get-value $)
                     (swap! local assoc :name $))
-        on-cancel #(swap! local assoc :edit false :name name)
+        on-cancel #(do
+                     (st/emit! dsh/clear-project-for-edit)
+                     (swap! local assoc :editing false :name name))
         on-keyup #(cond
                     (kbd/esc? %)
                     (on-cancel)
 
                     (kbd/enter? %)
                     (let [name (-> % dom/get-target dom/get-value)]
+                      (st/emit! dsh/clear-project-for-edit)
                       (st/emit! (dsh/rename-project id name))
-                      (swap! local assoc :edit false)))]
+                      (swap! local assoc :editing false)))]
+
+    (mf/use-effect
+      (mf/deps (:editing @local))
+      #(when (:editing @local)
+         (let [edit-input (mf/ref-val edit-input-ref)]
+           (dom/focus! edit-input)
+           (dom/select-text! edit-input))
+         nil))
 
     [:li {:on-click on-click
           :on-double-click on-dbl-click
           :class-name (when selected? "current")}
-     (if (:edit @local)
+     (if (:editing @local)
        [:div.edit-wrapper
         [:input.element-title {:value (:name @local)
+                               :ref edit-input-ref
                                :on-change on-input
                                :on-key-down on-keyup}]
         [:span.close {:on-click on-cancel} i/close]]
@@ -143,7 +160,7 @@
         (fn [event]
           (let [target (dom/get-target event)
                 value (dom/get-value target)]
-            (.select target)
+            (dom/select-text! target)
             (if (empty? value)
               (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {}))
               (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {:search-term value})))))
@@ -158,7 +175,7 @@
         (fn [event]
           (let [search-input (dom/get-element "search-input")]
             (dom/clean-value! search-input)
-            (.focus search-input)
+            (dom/focus! search-input)
             (debounced-emit! (rt/nav :dashboard-search {:team-id team-id} {}))))]
 
     [:div.library-bar

frontend/src/uxbox/util/dom.cljs

@@ -104,6 +104,10 @@
   [node]
   (set! (.-value node) ""))
 
+(defn select-text!
+  [node]
+  (.select node))
+
 (defn ^boolean equals?
   [node-a node-b]
   (.isEqualNode node-a node-b))