Sanitize quo2 namespace (#15207)

scripts/lint-re-frame-in-quo-components.sh

@@ -1,11 +1,9 @@
 #!/usr/bin/env sh
 
-CHANGES=$(git diff --no-ext-diff --diff-filter=d --cached --unified=0 --no-prefix --minimal --exit-code src/quo src/quo2 | grep '^+' || echo '')
-
-INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im)')
+INVALID_CHANGES=$(grep -E -r '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt|status-im\.|status-im2\.)' './src/quo2')
 
 if test -n "$INVALID_CHANGES"; then
-    echo "re-frame dispatch/subscribe and status-im are not allowed in quo/quo2 components"
+    echo "WARNING: re-frame, status-im are not allowed in quo2 components"
     echo ''
     echo "$INVALID_CHANGES"
     exit 1

src/quo2/components/animated_header_flatlist/view.cljs

@@ -5,12 +5,11 @@
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
+    [react-native.fast-image :as fast-image]
     [reagent.core :as reagent]
     [quo2.foundations.colors :as colors]
-    [status-im.ui.components.fast-image :as fast-image]
     [quo2.components.animated-header-flatlist.style :as style]
-    [oops.core :as oops]
-    [utils.re-frame :as rf]))
+    [oops.core :as oops]))
 
 (def header-height 234)
 (def cover-height 192)
@@ -51,10 +50,8 @@
      [reanimated/view {:style (style/entity-picture size-animation)}
       [display-picture-comp image-animation]]]))
 
-
-
 (defn animated-header-list
-  [{:keys [header-comp main-comp] :as parameters}]
+  [{:keys [header-comp main-comp back-button-on-press] :as parameters}]
   [safe-area/consumer
    (fn [insets]
      (let [window-height     (:height (rn/get-window))
@@ -76,7 +73,7 @@
             [rn/view {:style (style/container-view view-height)}
              [rn/touchable-opacity
               {:active-opacity 1
-               :on-press       #(rf/dispatch [:navigate-back])
+               :on-press       back-button-on-press
                :style          (style/button-container {:left 20})}
               [quo/icon :i/arrow-left {:size 20 :color (colors/theme-colors colors/black colors/white)}]]
              [rn/touchable-opacity

src/quo2/components/notifications/activity_log/view.cljs

@@ -7,9 +7,9 @@
             [quo2.components.notifications.activity-log.style :as style]
             [quo2.components.tags.status-tags :as status-tags]
             [quo2.foundations.colors :as colors]
+            [utils.i18n :as i18n]
             [react-native.core :as rn]
-            [reagent.core :as reagent]
-            [utils.i18n :as i18n]))
+            [reagent.core :as reagent]))
 
 (defn- activity-reply-text-input
   [{:keys [on-update-reply max-reply-length valid-reply?]} reply-input]

src/quo2/components/notifications/toast.cljs

@@ -5,9 +5,9 @@
             [quo2.foundations.colors :as colors]
             [quo2.foundations.shadows :as shadows]
             [quo2.theme :as theme]
+            [utils.i18n :as i18n]
             [react-native.blur :as blur]
-            [react-native.core :as rn]
-            [utils.i18n :as i18n]))
+            [react-native.core :as rn]))
 
 (def ^:private themes
   {:container        {:dark  {:background-color colors/white-opa-70}

src/quo2/components/onboarding/small_option_card/component_spec.cljs

@@ -1,6 +1,5 @@
 (ns quo2.components.onboarding.small-option-card.component-spec
   (:require [quo2.components.onboarding.small-option-card.view :as small-option-card]
-            [status-im.react-native.resources :as resources]
             [test-helpers.component :as h]))
 
 (defn- testing-small-option-card
@@ -43,8 +42,7 @@
         (-> on-press-fn js/expect .toHaveBeenCalled))))
 
   (h/describe "Image rendered"
-    (let [image           (resources/get-mock-image :small-opt-card-main)
-          component-props {:image image}]
+    (let [component-props {:image nil}]
       (h/test "`:main` variant"
         (h/render (testing-small-option-card :main component-props))
         (-> (h/get-by-label-text :small-option-card-main-image) h/expect .-not .toBeNull))

src/quo2/components/record_audio/record_audio/__tests__/record_audio_component_spec.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.record-audio.record-audio.--tests--.record-audio-component-spec
   (:require [quo2.components.record-audio.record-audio.view :as record-audio]
-            [status-im.audio.core :as audio]
+            [react-native.audio-toolkit :as audio]
             [test-helpers.component :as h]))
 
 (h/describe "record audio component"
@@ -20,7 +20,9 @@
 
   (h/test "record-audio on-start-recording works"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-start-recording event}])
+      (h/render [record-audio/record-audio
+                 {:on-start-recording              event
+                  :record-audio-permission-granted true}])
       (h/fire-event
        :on-start-should-set-responder
        (h/get-by-test-id "record-audio")
@@ -31,7 +33,9 @@
 
   (h/test "record-audio on-reviewing-audio works"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-reviewing-audio event}])
+      (h/render [record-audio/record-audio
+                 {:on-reviewing-audio              event
+                  :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording (fn [_ on-start _]
                                             (on-start))]
         (h/fire-event
@@ -50,7 +54,9 @@
 
   (h/test "record-audio on-send works after reviewing audio"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-send event}])
+      (h/render [record-audio/record-audio
+                 {:on-send                         event
+                  :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording        (fn [_ on-start _]
                                                    (on-start))
                     audio/get-recorder-file-path (fn [] "audio-file-path")]
@@ -77,7 +83,9 @@
 
   (h/test "record-audio on-send works after sliding to the send button"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-send event}])
+      (h/render [record-audio/record-audio
+                 {:on-send                         event
+                  :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording        (fn [_ on-start _]
                                                    (on-start))
                     audio/stop-recording         (fn [_ on-stop _]
@@ -108,7 +116,9 @@
 
   (h/test "record-audio on-cancel works after reviewing audio"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-cancel event}])
+      (h/render [record-audio/record-audio
+                 {:on-cancel                       event
+                  :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording (fn [_ on-start _]
                                             (on-start))]
         (h/fire-event
@@ -132,7 +142,9 @@
 
   (h/test "cord-audio on-cancel works after sliding to the cancel button"
     (let [event (js/jest.fn)]
-      (h/render [record-audio/record-audio {:on-cancel event}])
+      (h/render [record-audio/record-audio
+                 {:on-cancel                       event
+                  :record-audio-permission-granted true}])
       (with-redefs [audio/start-recording (fn [_ on-start _]
                                             (on-start))
                     audio/stop-recording  (fn [_ on-stop _]

src/quo2/components/record_audio/record_audio/buttons/record_button_big.cljs

@@ -4,7 +4,7 @@
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn :refer [use-effect]]
             [react-native.reanimated :as reanimated]
-            [status-im.audio.core :as audio]
+            [react-native.audio-toolkit :as audio]
             [taoensso.timbre :as log]
             [cljs-bean.core :as bean]
             [reagent.core :as reagent]

src/quo2/components/record_audio/record_audio/view.cljs

@@ -1,19 +1,14 @@
 (ns quo2.components.record-audio.record-audio.view
-  (:require [cljs-bean.core :as bean]
-            [oops.core :as oops]
+  (:require [oops.core :as oops]
             [quo2.components.icon :as icons]
             [quo2.components.record-audio.record-audio.style :as style]
             [quo2.foundations.colors :as colors]
             [quo2.components.record-audio.soundtrack.view :as soundtrack]
             [react-native.core :as rn :refer [use-effect]]
             [reagent.core :as reagent]
-            [status-im.utils.utils :as utils]
             [quo2.components.markdown.text :as text]
             [goog.string :as gstring]
-            [status-im.audio.core :as audio]
-            [utils.re-frame :as rf]
-            [utils.i18n :as i18n]
-            [react-native.permissions :as permissions]
+            [react-native.audio-toolkit :as audio]
             [taoensso.timbre :as log]
             [quo2.components.record-audio.record-audio.buttons.record-button-big :as record-button-big]
             [quo2.components.record-audio.record-audio.buttons.send-button :as send-button]
@@ -154,7 +149,8 @@
          {:color (colors/theme-colors colors/neutral-100 colors/white)}]]))])
 
 (defn view
-  [{:keys [on-start-recording on-send on-cancel on-reviewing-audio]}]
+  [{:keys [on-start-recording on-send on-cancel on-reviewing-audio record-audio-permission-granted
+           on-request-record-audio-permission on-check-audio-permissions]}]
   [:f>
    (fn []
      (let [recording? (reagent/atom false)
@@ -176,29 +172,8 @@
            playing-timer (atom nil)
            recorder-ref (atom nil)
            player-ref (atom nil)
-           record-audio-permission-granted (atom true)
            output-file (atom nil)
            reached-max-duration? (atom false)
-           check-audio-permission
-           (fn []
-             (permissions/permission-granted?
-              :record-audio
-              #(reset! record-audio-permission-granted %)
-              #(reset! record-audio-permission-granted false)))
-           request-record-audio-permission
-           (fn []
-             (rf/dispatch
-              [:request-permissions
-               {:permissions [:record-audio]
-                :on-allowed
-                #(reset! record-audio-permission-granted true)
-                :on-denied
-                #(js/setTimeout
-                  (fn []
-                    (utils/show-popup
-                     (i18n/label :t/audio-recorder-error)
-                     (i18n/label :t/audio-recorder-permissions-error)))
-                  50)}]))
            destroy-player
            (fn []
              (audio/destroy-player @player-ref)
@@ -247,7 +222,7 @@
                                               :ignore-max-x? false}
                                              record-button-area)]
                  (when-not @reviewing-audio?
-                   (if @record-audio-permission-granted
+                   (if record-audio-permission-granted
                      (do
                        (when (not @idle?)
                          (reset! recording? pressed-record-button?))
@@ -294,8 +269,8 @@
                           #(log/error "[record-audio] start recording - error: " %))
                          (when on-start-recording
                            (on-start-recording))))
-                     (request-record-audio-permission)))
-                 (when @record-audio-permission-granted
+                     (some-> on-request-record-audio-permission)))
+                 (when record-audio-permission-granted
                    (reset! touch-active? true))))
              (not @idle?))
            on-responder-move
@@ -469,7 +444,7 @@
                (reset! reached-max-duration? false)))]
        (fn []
          (use-effect (fn []
-                       (check-audio-permission)
+                       (some-> on-check-audio-permissions)
                        (reload-recorder)))
          [rn/view
           {:style style/bar-container}
@@ -515,14 +490,4 @@
             on-cancel]
            [record-button/record-button recording? reviewing-audio?]]])))])
 
-(def record-audio
-  (reagent/adapt-react-class
-   (rn/memo
-    (fn [props]
-      (let [{:keys [onStartRecording onReviewingAudio onSend onCancel]} (bean/bean props)]
-        (reagent/as-element
-         [view
-          {:on-start-recording onStartRecording
-           :on-reviewing-audio onReviewingAudio
-           :on-send            onSend
-           :on-cancel          onCancel}]))))))
+(def record-audio view)

src/quo2/components/record_audio/soundtrack/__tests__/soundtrack_component_spec.cljs

@@ -2,7 +2,7 @@
   (:require [quo2.components.record-audio.soundtrack.view :as soundtrack]
             [test-helpers.component :as h]
             [reagent.core :as reagent]
-            [status-im.audio.core :as audio]))
+            [react-native.audio-toolkit :as audio]))
 
 (h/describe "soundtrack component"
   (h/before-each

src/quo2/components/record_audio/soundtrack/view.cljs

@@ -1,7 +1,7 @@
 (ns quo2.components.record-audio.soundtrack.view
   (:require [quo2.components.record-audio.soundtrack.style :as style]
             [quo2.foundations.colors :as colors]
-            [status-im.audio.core :as audio]
+            [react-native.audio-toolkit :as audio]
             [taoensso.timbre :as log]
             [react-native.platform :as platform]
             [react-native.slider :as slider]))

src/react_native/audio_toolkit.cljs

@@ -1,4 +1,4 @@
-(ns status-im.audio.core
+(ns react-native.audio-toolkit
   (:require ["@react-native-community/audio-toolkit" :refer (Player Recorder MediaStates)]))
 
 ;; get mediastates from react module

src/status_im/ui/screens/chat/message/audio.cljs

@@ -4,7 +4,7 @@
             [goog.string :as gstring]
             [quo.design-system.colors :as colors]
             [reagent.core :as reagent]
-            [status-im.audio.core :as audio]
+            [react-native.audio-toolkit :as audio]
             [status-im.ui.components.animation :as anim]
             [status-im.ui.components.icons.icons :as icons]
             [status-im.ui.components.react :as react]

src/status_im2/contexts/quo_preview/animated_header_list/animated_header_list.cljs

@@ -81,7 +81,8 @@
    :display-picture-comp display-picture-comp
    :header-comp header-comp
    :title-comp title-comp
-   :main-comp main-comp})
+   :main-comp main-comp
+   :back-button-on-press #()})
 
 (defn mock-screen
   []

src/status_im2/contexts/quo_preview/record_audio/record_audio.cljs

@@ -2,15 +2,21 @@
   (:require [quo2.components.record-audio.record-audio.view :as record-audio]
             [quo2.core :as quo]
             [react-native.core :as rn]
-            [reagent.core :as reagent]))
+            [reagent.core :as reagent]
+            [utils.re-frame :as rf]
+            [status-im2.common.alert.events :as alert]
+            [utils.i18n :as i18n]
+            [react-native.permissions :as permissions]))
 
 (defn cool-preview
   []
-  (let [message            (reagent/atom "Press & hold the mic button to start recording...")
-        on-send            #(reset! message (str "onSend event triggered. File path: " %))
-        on-start-recording #(reset! message "onStartRecording event triggered.")
-        on-reviewing-audio #(reset! message "onReviewingAudio event triggered.")
-        on-cancel          #(reset! message "onCancel event triggered.")]
+  (let [message                         (reagent/atom
+                                         "Press & hold the mic button to start recording...")
+        record-audio-permission-granted (reagent/atom false)
+        on-send                         #(reset! message (str "onSend event triggered. File path: " %))
+        on-start-recording              #(reset! message "onStartRecording event triggered.")
+        on-reviewing-audio              #(reset! message "onReviewingAudio event triggered.")
+        on-cancel                       #(reset! message "onCancel event triggered.")]
     (fn []
       [rn/view
        [rn/view
@@ -19,10 +25,30 @@
          :background-color :transparent
          :flex-direction   :row}
         [record-audio/record-audio
-         {:on-send            on-send
-          :on-start-recording on-start-recording
-          :on-reviewing-audio on-reviewing-audio
-          :on-cancel          on-cancel}]]
+         {:record-audio-permission-granted    @record-audio-permission-granted
+          :on-send                            on-send
+          :on-start-recording                 on-start-recording
+          :on-reviewing-audio                 on-reviewing-audio
+          :on-cancel                          on-cancel
+          :on-check-audio-permissions         (fn []
+                                                (permissions/permission-granted?
+                                                 :record-audio
+                                                 #(reset! record-audio-permission-granted %)
+                                                 #(reset! record-audio-permission-granted false)))
+          :on-request-record-audio-permission (fn []
+                                                (rf/dispatch
+                                                 [:request-permissions
+                                                  {:permissions [:record-audio]
+                                                   :on-allowed
+                                                   #(reset! record-audio-permission-granted true)
+                                                   :on-denied
+                                                   #(js/setTimeout
+                                                     (fn []
+                                                       (alert/show-popup
+                                                        (i18n/label :t/audio-recorder-error)
+                                                        (i18n/label
+                                                         :t/audio-recorder-permissions-error)))
+                                                     50)}]))}]]
        [quo/text {:style {:margin-horizontal 20}} @message]])))
 
 (defn preview-record-audio