From fdebfb3f0065da7aacdc3d7557a26ddaf2ea2c65 Mon Sep 17 00:00:00 2001 From: charlie Date: Sat, 5 Nov 2022 15:25:20 +0800 Subject: [PATCH] improve(mobile): WIP onboarding for set-up a graph --- package.json | 3 +- src/main/frontend/handler/notification.cljs | 2 +- src/main/frontend/mobile/graph_picker.cljs | 94 +++++++++++++++++---- src/main/frontend/state.cljs | 10 +++ src/main/frontend/util.cljc | 5 +- 5 files changed, 96 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 805742cb87..385361098b 100644 --- a/package.json +++ b/package.json @@ -138,7 +138,8 @@ "threads": "1.6.5", "url": "^0.11.0", "yargs-parser": "20.2.4", - "path-complete-extname": "1.0.0" + "path-complete-extname": "1.0.0", + "sanitize-filename": "1.6.3" }, "resolutions": { "pixi-graph-fork/@pixi/app": "6.2.0", diff --git a/src/main/frontend/handler/notification.cljs b/src/main/frontend/handler/notification.cljs index 71bd164500..a59e0331c2 100644 --- a/src/main/frontend/handler/notification.cljs +++ b/src/main/frontend/handler/notification.cljs @@ -14,7 +14,7 @@ (defn show! ([content] - (show! content :info true nil 1500)) + (show! content :info true nil 2000)) ([content status] (show! content status true nil 1500)) ([content status clear?] diff --git a/src/main/frontend/mobile/graph_picker.cljs b/src/main/frontend/mobile/graph_picker.cljs index c023918d71..f52e69795e 100644 --- a/src/main/frontend/mobile/graph_picker.cljs +++ b/src/main/frontend/mobile/graph_picker.cljs @@ -1,22 +1,86 @@ (ns frontend.mobile.graph-picker - (:require [rum.core :as rum] - [frontend.ui :as ui] - [frontend.handler.notification :as notification])) + (:require + [clojure.string :as string] + [rum.core :as rum] + [frontend.ui :as ui] + [frontend.handler.notification :as notification] + [frontend.handler.page :as page-handler] + [frontend.util :as util] + [frontend.modules.shortcut.core :as shortcut] + [frontend.state :as state] + [promesa.core :as p])) + +(defn validate-graph-dirname + [root dirname] + + ;; TODO: call plugin api + (p/resolved (util/node-path.join root dirname))) (rum/defc graph-picker-cp [] - [:div.flex.flex-col.w-full.px-10.space-y-4.pt-8 - (ui/button - [:span.flex.items-center.justify-between.w-full.py-1 - [:strong "Create a new graph"] - (ui/icon "chevron-right")] + (let [[step set-step!] (rum/use-state :init) + *input-ref (rum/create-ref) - :on-click #(notification/show! "Hi Graph :)")) + on-create (fn [input-val] + (let [graph-name (util/safe-sanitize-file-name input-val)] + (if (string/blank? graph-name) + (notification/show! "Illegal graph folder name.") - (ui/button - [:span.flex.items-center.justify-between.w-full.py-1 - [:strong "Select an existing graph"] - (ui/icon "folder-plus")] + ;; create graph directory under Logseq document folder + (when-let [root (state/get-local-container-root-url)] + (-> (validate-graph-dirname root graph-name) + (p/then #(notification/show! (str "Create graph: " %))) + (p/finally + #(notification/show! graph-name)))))))] - :intent "logseq" - :on-click #(notification/show! "Hi Folder :)"))]) + [:div.cp__graph-picker.px-10.py-10.w-full + + (case step + ;; step 0 + :init + [:div.flex.flex-col.w-full.space-y-4 + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong "Create a new graph"] + (ui/icon "chevron-right")] + + :on-click #(set-step! :new-graph)) + + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong "Select an existing graph"] + (ui/icon "folder-plus")] + + :intent "logseq" + :on-click #(page-handler/ls-dir-files! + (fn [] + (shortcut/refresh!))))] + + ;; step 1 + :new-graph + [:div.flex.flex-col.w-full.space-y-4.faster-fade-in + [:input.form-input.block + {:auto-focus true + :ref *input-ref + :placeholder "What's the graph name?"}] + + (ui/button + [:span.flex.items-center.justify-between.w-full.py-1 + [:strong "Logseq sync"] + (ui/icon "toggle-right")] + + :intent "logseq" + :on-click #()) + + [:div.flex.justify-between.items-center.pt-2 + (ui/button [:span.flex.items-center + (ui/icon "chevron-left" {:size 18}) "Back"] + :intent "logseq" + :on-click #(set-step! :init)) + + (ui/button "Create" + :on-click + #(let [val (util/trim-safe (.-value (rum/deref *input-ref)))] + (if (string/blank? val) + (.focus (rum/deref *input-ref)) + (on-create val))))]])])) diff --git a/src/main/frontend/state.cljs b/src/main/frontend/state.cljs index c0733d3146..31a87f79be 100644 --- a/src/main/frontend/state.cljs +++ b/src/main/frontend/state.cljs @@ -1928,3 +1928,13 @@ Similar to re-frame subscriptions" (defn get-onboarding-whiteboard? [] (get-in @state [:whiteboard/onboarding-whiteboard?])) + +(defn get-local-container-root-url + [] + (when (mobile-util/native-ios?) + (get-in @state [:mobile/container-urls :localContainerUrl]))) + +(defn get-icloud-container-root-url + [] + (when (mobile-util/native-ios?) + (get-in @state [:mobile/container-urls :iCloudContainerUrl]))) \ No newline at end of file diff --git a/src/main/frontend/util.cljc b/src/main/frontend/util.cljc index d9a8db108c..000ca269eb 100644 --- a/src/main/frontend/util.cljc +++ b/src/main/frontend/util.cljc @@ -8,6 +8,7 @@ ["@capacitor/status-bar" :refer [^js StatusBar Style]] ["grapheme-splitter" :as GraphemeSplitter] ["remove-accents" :as removeAccents] + ["sanitize-filename" :as sanitizeFilename] ["check-password-strength" :refer [passwordStrength]] [frontend.loader :refer [load]] [cljs-bean.core :as bean] @@ -72,7 +73,9 @@ (when-let [^js ret (and (string? input) (not (string/blank? input)) (passwordStrength input))] - (bean/->clj ret))))) + (bean/->clj ret))) + (defn safe-sanitize-file-name [s] + (sanitizeFilename (str s))))) #?(:cljs (defn ios?