diff --git a/src/main/frontend/components/onboarding/setups.cljs b/src/main/frontend/components/onboarding/setups.cljs index 523684f2e..41e139f66 100644 --- a/src/main/frontend/components/onboarding/setups.cljs +++ b/src/main/frontend/components/onboarding/setups.cljs @@ -3,21 +3,15 @@ [rum.core :as rum] [frontend.ui :as ui] [frontend.context.i18n :refer [t]] - [frontend.components.svg :as svg] [frontend.components.widgets :as widgets] [frontend.handler.page :as page-handler] - [frontend.handler.route :as route-handler] - [frontend.handler.ui :as ui-handler] [frontend.util :as util] - [frontend.handler.web.nfs :as nfs] + [frontend.handler.file-based.nfs :as nfs] [frontend.mobile.util :as mobile-util] [frontend.mobile.graph-picker :as graph-picker] - [frontend.handler.notification :as notification] - [frontend.handler.external :as external-handler] [frontend.modules.shortcut.core :as shortcut] [frontend.handler.user :as user-handler] - [clojure.string :as string] - [goog.object :as gobj])) + [clojure.string :as string])) (def DEVICE (if (util/mobile?) (t :on-boarding/section-phone) (t :on-boarding/section-computer))) @@ -30,12 +24,10 @@ [:h1.text-xl (if picker? - [:span.flex.items-center.gap-1 - [:strong (ui/icon "heart" {:size 30})] (t :on-boarding/main-title)] - [:span.flex.items-center.gap-1 - [:strong (ui/icon "file-import" {:size 30})] (t :on-boarding/importing-main-title)])] + [:span (t :on-boarding/main-title)] + [:span (t :on-boarding/importing-main-title)])] - [:h2.opacity-60 + [:h2 (if picker? (t :on-boarding/main-desc) (t :on-boarding/importing-main-desc))] @@ -50,11 +42,11 @@ [:div.px-4 "You can save them in your local storage, and use Logseq Sync or any third-party sync service to keep your notes sync with other devices. " "If you prefer to use Dropbox to sync your notes, you can use " - [:a {:href "https://play.google.com/store/apps/details?id=com.ttxapps.dropsync" + [:a {:href "https://play.google.com/store/apps/details?id=com.ttxapps.dropsync" :target "_blank"} "Dropsync"] ". Or you can use " - [:a {:href "https://play.google.com/store/apps/details?id=dk.tacit.android.foldersync.lite" + [:a {:href "https://play.google.com/store/apps/details?id=dk.tacit.android.foldersync.lite" :target "_blank"} "FolderSync"] "."] @@ -64,11 +56,11 @@ (rum/defcs picker < rum/reactive [_state onboarding-and-home?] - (let [parsing? (state/sub :repo/parsing-files?) - _ (state/sub :auth/id-token) - native-ios? (mobile-util/native-ios?) + (let [parsing? (state/sub :repo/parsing-files?) + _ (state/sub :auth/id-token) + native-ios? (mobile-util/native-ios?) native-icloud? (not (string/blank? (state/sub [:mobile/container-urls :iCloudContainerUrl]))) - logged? (user-handler/logged-in?)] + logged? (user-handler/logged-in?)] (setups-container :picker @@ -80,8 +72,8 @@ (if native-ios? ;; TODO: open for all native mobile platforms (graph-picker/graph-picker-cp {:onboarding-and-home? onboarding-and-home? - :logged? logged? - :native-icloud? native-icloud?}) + :logged? logged? + :native-icloud? native-icloud?}) (if (or (nfs/supported?) (mobile-util/native-platform?)) [:div.choose.flex.flex-col.items-center @@ -99,7 +91,10 @@ [:small (t :on-boarding/section-btn-desc)]])]]] [:div.px-5 (ui/admonition :warning - (widgets/native-fs-api-alert))]))] + (widgets/native-fs-api-alert)) + [:div.choose.flex.flex-col.items-center + (ui/button "Open a DB-based Graph" + :on-click #(state/pub-event! [:graph/new-db-graph]))]]))] [:section.b.flex.items-center.flex-col [:p.flex [:i.as-flex-center (ui/icon "zoom-question" {:style {:fontSize "22px"}})] @@ -130,133 +125,3 @@ [:span [:strong.uppercase title] [:small.opacity-50 label]]]))]]]))) - -(defonce *opml-imported-pages (atom nil)) - -(defn- finished-cb - [] - (route-handler/redirect-to-home!) - (notification/show! "Import finished!" :success) - (ui-handler/re-render-root!)) - -(defn- roam-import-handler - [e] - (let [file (first (array-seq (.-files (.-target e)))) - file-name (gobj/get file "name")] - (if (string/ends-with? file-name ".json") - (do - (state/set-state! :graph/importing :roam-json) - (let [reader (js/FileReader.)] - (set! (.-onload reader) - (fn [e] - (let [text (.. e -target -result)] - (external-handler/import-from-roam-json! - text - #(do - (state/set-state! :graph/importing nil) - (finished-cb)))))) - (.readAsText reader file))) - (notification/show! "Please choose a JSON file." - :error)))) - -(defn- lsq-import-handler - [e] - (let [file (first (array-seq (.-files (.-target e)))) - file-name (some-> (gobj/get file "name") - (string/lower-case)) - edn? (string/ends-with? file-name ".edn") - json? (string/ends-with? file-name ".json")] - (if (or edn? json?) - (do - (state/set-state! :graph/importing :logseq) - (let [reader (js/FileReader.) - import-f (if edn? - external-handler/import-from-edn! - external-handler/import-from-json!)] - (set! (.-onload reader) - (fn [e] - (let [text (.. e -target -result)] - (import-f - text - #(do - (state/set-state! :graph/importing nil) - (finished-cb)))))) - (.readAsText reader file))) - (notification/show! "Please choose an EDN or a JSON file." - :error)))) - -(defn- opml-import-handler - [e] - (let [file (first (array-seq (.-files (.-target e)))) - file-name (gobj/get file "name")] - (if (string/ends-with? file-name ".opml") - (do - (state/set-state! :graph/importing :opml) - (let [reader (js/FileReader.)] - (set! (.-onload reader) - (fn [e] - (let [text (.. e -target -result)] - (external-handler/import-from-opml! text - (fn [pages] - (reset! *opml-imported-pages pages) - (state/set-state! :graph/importing nil) - (finished-cb)))))) - (.readAsText reader file))) - (notification/show! "Please choose a OPML file." - :error)))) - -(rum/defc importer < rum/reactive - [{:keys [query-params]}] - (if (state/sub :graph/importing) - (let [{:keys [total current-idx current-page]} (state/sub :graph/importing-state) - left-label [:div.flex.flex-row.font-bold - (t :importing) - [:div.hidden.md:flex.flex-row - [:span.mr-1 ": "] - [:div.text-ellipsis-wrapper {:style {:max-width 300}} - current-page]]] - width (js/Math.round (* (.toFixed (/ current-idx total) 2) 100)) - process (when (and total current-idx) - (str current-idx "/" total))] - (ui/progress-bar-with-label width left-label process)) - (setups-container - :importer - [:article.flex.flex-col.items-center.importer.py-16.px-8 - [:section.c.text-center - [:h1 (t :on-boarding/importing-title)] - [:h2 (t :on-boarding/importing-desc)]] - [:section.d.md:flex - [:label.action-input.flex.items-center.mx-2.my-2 - [:span.as-flex-center [:i (svg/roam-research 28)]] - [:div.flex.flex-col - [[:strong "RoamResearch"] - [:small (t :on-boarding/importing-roam-desc)]]] - [:input.absolute.hidden - {:id "import-roam" - :type "file" - :on-change roam-import-handler}]] - - [:label.action-input.flex.items-center.mx-2.my-2 - [:span.as-flex-center [:i (svg/logo 28)]] - [:span.flex.flex-col - [[:strong "EDN / JSON"] - [:small (t :on-boarding/importing-lsq-desc)]]] - [:input.absolute.hidden - {:id "import-lsq" - :type "file" - :on-change lsq-import-handler}]] - - [:label.action-input.flex.items-center.mx-2.my-2 - [:span.as-flex-center (ui/icon "sitemap" {:style {:fontSize "26px"}})] - [:span.flex.flex-col - [[:strong "OPML"] - [:small (t :on-boarding/importing-opml-desc)]]] - - [:input.absolute.hidden - {:id "import-opml" - :type "file" - :on-change opml-import-handler}]]] - - (when (= "picker" (:from query-params)) - [:section.e - [:a.button {:on-click #(route-handler/redirect-to-home!)} "Skip"]])])))