From ed7defbe971854eedf6c782473ab116263e9809a Mon Sep 17 00:00:00 2001
From: llcc <lzhes43@gmail.com>
Date: Sun, 24 Apr 2022 11:20:44 +0800
Subject: [PATCH] enhance(iOS): add a modal to instruct users to select valid
 directory (#4947)

* enhance(ios): add a modal to instruct users to select valid directory

* tweak height for loom video on iPhone
---
 ios/App/App/FolderPicker.swift         |  6 ++--
 src/main/frontend/fs/capacitor_fs.cljs | 49 +++++++++++++++++++++++---
 src/main/frontend/handler/events.cljs  |  5 +++
 src/main/frontend/ui.css               | 19 ++++++++++
 4 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/ios/App/App/FolderPicker.swift b/ios/App/App/FolderPicker.swift
index 59d134340..7843c43a9 100644
--- a/ios/App/App/FolderPicker.swift
+++ b/ios/App/App/FolderPicker.swift
@@ -40,13 +40,15 @@ public class FolderPicker: CAPPlugin, UIDocumentPickerDelegate {
       didPickDocumentsAt urls: [URL]
     ){
         var items: [String] = []
-
+        let documentsPath = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)
+        
         for url in urls {
             items.append(url.absoluteString)
         }
 
         self._call?.resolve([
-                              "path": items.first as Any
+                              "path": items.first as Any,
+                              "localDocumentsPath": documentsPath[0] as Any
                             ])
     }
 }
diff --git a/src/main/frontend/fs/capacitor_fs.cljs b/src/main/frontend/fs/capacitor_fs.cljs
index 9b44098e9..1710b24d5 100644
--- a/src/main/frontend/fs/capacitor_fs.cljs
+++ b/src/main/frontend/fs/capacitor_fs.cljs
@@ -2,11 +2,15 @@
   (:require ["@capacitor/filesystem" :refer [Encoding Filesystem]]
             [cljs-bean.core :as bean]
             [clojure.string :as string]
+            [frontend.db :as db]
+            [frontend.encrypt :as encrypt]
             [frontend.fs.protocol :as protocol]
             [frontend.mobile.util :as mobile-util]
+            [frontend.state :as state]
             [frontend.util :as util]
             [lambdaisland.glogi :as log]
             [promesa.core :as p]
+            [rum.core :as rum]
             [frontend.state :as state]
             [frontend.db :as db]))
 
@@ -170,6 +174,33 @@
       (js/encodeURI (js/decodeURI path))
       path)))
 
+(defn- local-container-path?
+  "Check whether `path' is logseq's container `localDocumentsPath' on iOS"
+  [path localDocumentsPath]
+  (string/includes? path localDocumentsPath))
+
+(defn- iCloud-container-path?
+  "Check whether `path' is logseq's iCloud container path on iOS"
+  [path]
+  (string/includes? path "iCloud~com~logseq~logseq"))
+
+(rum/defc instruction
+  []
+  [:div.instruction
+   [:h1.title "Please choose a valid directory!"]
+   [:p.leading-6 "Logseq app can only save or access your graphs stored in a specific directory with a "
+    [:strong "Logseq icon"]
+    " inside, located either in \"iCloud Drive\", \"On My iPhone\" or \"On My iPad\"."]
+   [:p.leading-6 "Please watch the following short instruction video. "
+    [:small.text-gray-500 "(may take few seconds to load...)"]]
+   [:iframe
+    {:src "https://www.loom.com/embed/dae612ae5fd94e508bd0acdf02efb888"
+     :frame-border "0"
+     :position "relative"
+     :allow-full-screen "allowfullscreen"
+     :webkit-allow-full-screen "webkitallowfullscreen"
+     :height "100%"}]])
+
 (defrecord Capacitorfs []
   protocol/Fs
   (mkdir! [_this dir]
@@ -241,11 +272,19 @@
         result)))
   (open-dir [_this _ok-handler]
     (p/let [_    (when (= (mobile-util/platform) "android") (check-permission-android))
-            path (p/chain
-                  (.pickFolder mobile-util/folder-picker)
-                  #(js->clj % :keywordize-keys true)
-                  :path)
-            _ (when (mobile-util/native-ios?) (mobile-util/sync-icloud-repo path))
+            {:keys [path localDocumentsPath]} (p/chain
+                                               (.pickFolder mobile-util/folder-picker)
+                                               #(js->clj % :keywordize-keys true))
+            _ (when (mobile-util/native-ios?)
+                (cond
+                  (not (or (local-container-path? path localDocumentsPath)
+                           (iCloud-container-path? path)))
+                  (state/pub-event! [:modal/show-instruction])
+
+                  (iCloud-container-path? path)
+                  (mobile-util/sync-icloud-repo path)
+
+                  :else nil))
             files (readdir path)
             files (js->clj files :keywordize-keys true)]
       (into [] (concat [{:path path}] files))))
diff --git a/src/main/frontend/handler/events.cljs b/src/main/frontend/handler/events.cljs
index e51ecc2dd..e29d48028 100644
--- a/src/main/frontend/handler/events.cljs
+++ b/src/main/frontend/handler/events.cljs
@@ -5,6 +5,7 @@
             [frontend.context.i18n :refer [t]]
             [frontend.components.diff :as diff]
             [frontend.handler.plugin :as plugin-handler]
+            [frontend.fs.capacitor-fs :as capacitor-fs]
             [frontend.components.plugins :as plugin]
             [frontend.components.git :as git-component]
             [frontend.components.shell :as shell]
@@ -196,6 +197,10 @@
   (state/set-modal! srs/global-cards {:id :srs
                                       :label "flashcards__cp"}))
 
+(defmethod handle :modal/show-instruction [_]
+  (state/set-modal! capacitor-fs/instruction {:id :instruction
+                                              :label "instruction__cp"}))
+
 (defmethod handle :modal/show-themes-modal [_]
   (plugin/open-select-theme!))
 
diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css
index b2ba72a6d..d6d98cb82 100644
--- a/src/main/frontend/ui.css
+++ b/src/main/frontend/ui.css
@@ -156,6 +156,25 @@
           }
       }
   }
+
+  &[label="instruction__cp"] {
+
+      .ui__modal-panel {
+          height: 90%;
+      }
+    
+      .panel-content {
+          height: 100%;
+      }
+  }
+}
+
+.instruction {
+    height: 40%;
+
+    @screen sm {
+        height: 70%;
+    }
 }
 
 html.is-native-andorid,