Fixes UI bugs described in
https://github.com/status-im/status-mobile/issues/16271, and it also rewrites
the component to follow our guidelines i.e. move code to style namespace, fix
docstring, add component specs, move to separate quo2 directory, etc.
This commit is part of the effort to fix the Community Overview screen.
Various fixes related to spacing in the "I'm new to Status" screen. Fixes
https://github.com/status-im/status-mobile/issues/16064
Out of scope:
- Bottom sheet in Android doesn't occupy the full available height. This problem
exists in develop.
- Bottom sheet blur.
- [x] Use correct icon to mark notifications as read
- [x] Add support for the disabled state in action drawer actions
- [x] Update quo2 preview `drawers` > `action-drawers`
- [x] Rewrite the action drawer component spec to use our test helpers
Fixes https://github.com/status-im/status-mobile/issues/14983
Fixes the maximum height overflow of the composer when there are images and/or
link previews (any *extra content* as we call it in the code).
Fixes https://github.com/status-im/status-mobile/issues/15949
Cause: The bug happened because the on-focus event of the composer happens
before subscriptions arrive, and thus it uses the incorrect max-height.
Fix: The fix makes the animation values of height, last-height, and saved-height
be truncated based on the newest calculated max-height, and they happen in a
separate use-effect, outside of the on-focus event.
* onboarding sync devices after scan to sign in
* using subscription to get the status of pairing progress
* update following reviews
* polished code following reviews
* fixed showing unknown devices
* community home screen updates
* removed green border color on status indicator
* added accent color to plus button and jump-to button
* code reviews
* e2e: fix acc id new comm button
* resolved bugs
---------
Co-authored-by: pavloburykh <pavlo@status.im>
This is the introductory work to support the new requirements for unfurling
URLs (while the message is a draft) and displaying link previews (after the
message is sent). Refer to the related status-go PR for a lot more interesting
details https://github.com/status-im/status-go/pull/3471.
Fixes https://github.com/status-im/status-mobile/issues/15469
### Notes
- The old link preview code will be removed separately, both in status-go and
status-mobile.
- I did the bulk of the work in status-go
https://github.com/status-im/status-go/pull/3471. If you want to understand
how this is all implemented, do check out the status-go PR because I heavily
documented the solution, rationale, next steps, etc.
### Performance
Does the feature perform well? Yes, there's very little overhead because
unfurling URLs happen in status-go and the event is debounced. I also payed
special attention to use a simple caching mechanism to avoid doing unnecessary
RPC requests to status-go if the URLs are cached in the client.
I have some ideas on how to improve performance further, but not in this PR
which is already screaming for reviews.
Changes effect :json/rpc-call to accept on-success and on-error parameters
either as functions OR as re-frame event vectors. The changes are 100% backwards
compatible.
## Why?
Re-frame is very explicit in its documentation and its architecture, saying that
event handlers should be pure. Calling re-frame.core/dispatch in event handlers
makes them sort of stateful.
> So, you can "get away with it". But it ain't pure.
>
> -- https://day8.github.io/re-frame/EffectfulHandlers/#90-solution
In status-mobile, arguably one of our most important effects (not to be confused
with event handlers) is :json-rpc/call, but at the moment, the on-success and
on-error values are expected to be stateful functions (e.g. usually used for
logging and dispatching subsequent events).
This creates two important problems:
1. The value returned by event handlers is more opaque and cannot be easily
inspected (for example using tap>, log/debug or just println). If we try to
inspect or log them, on-success and on-error will be printed as
#object[Function].
2. Testing event handlers using :json-rpc/call becomes an exercise of
frustration, because we can't simply compare the results of the event handler
with a good expected value, which is one of the big selling points of testing
pure functions.
### The testability of event handlers
> For any re-frame app, there's three things to test:
>
> - Event Handlers - most of your testing focus will be here because this is
> where most of the logic lives
> - Subscription Handlers - often not a lot to test here. Only Layer 3
> subscriptions need testing.
> - View functions - I don't tend to write tests for views.
>
> -- https://day8.github.io/re-frame/Testing/#what-to-test
So re-frame is saying event handlers should be pure, and that event handlers
should be tested.
In order to achieve the divine simplicity of testing event handlers as pure
functions, we need to make :json-rpc/call also accept on-success and
on-error as event vectors.
Good news is that there is a known pattern to solve this problem, e.g. used by
the library https://github.com/Day8/re-frame-http-fx.
The pattern is simple once we see it: behind the scenes, :json-rpc/call conj'es
the results of the RPC call into the event vectors on-success and on-error, and
:json-rpc/call dispatches the events itself. This eliminates the need for the
stateful dispatch call in event handlers.
* Dont check app-state for android before routing PN
On Android devices, right after account creation and before a log out, the :app-state value in reframe db is set to background. The value becomes active after a log out and then log in which causes tapping on push notifications to do nothing.
This behaviour breaks E2E and hence in this PR, I remove the checking of this case only for Android platforms.
More work should be done to figure out why the app state event handler is behaving this way on Android but for now I would like to unblock E2E.
* e2e: remove xfailed tests
---------
Co-authored-by: Churikova Tetiana <tatiana@status.im>
fixes: #13439
Summary
- Update `quo2/qr-code` component to use `fast-image` instead of `rn/image`
- Adds profile tab in share section, wallet tab is marked as WIP
- Shows profile QR code along with link to user's profile and the user's emoji hash.
- profile link is shareable and copyable on tap.
- emoji hash is shareable and copyable on tap.
- fixed weird android issues
* use debounce-and-dispatch to improve mention performance
* increase time to 400ms
* decrease time to 300ms
* update status-go-version.json
* update status-go-version.json
This PR adds the ability to :
- Generate a QR by passing any url.
- See different error correction levels.
- Shows the media server url for that specific QR code.
- Moved media server URI generation logic to `image_server.cljs`
e8ceed11...213dc463
Both replies and pinned messages relied on subscribing their data from messages.
This worked only as long as we loaded the message in the database, so it would break say if another user replied to a message that wasn't in the current user view.
It also changes the way pinned messages are handled, before the notification was actually sent over the wire, but that's unnecessary, since it can be generated locally on both parts.
This is a bit of a breaking change with the previous version, since if you pin a message with this version, older version will not see a system message. this can be easily fixed by restoring the previous behavior of sending the message, but not sure it's worth it.
It also adds the ability to Delete message for everyone that have Deleted for me (discussed with John) and the ability of unpin messages that have been deleted for me.
This commit solves the problem described in detail in issue #15606, but in
essence, it fixes the clear icon by integrating rudimentary support for SVG
icons.
Fixes https://github.com/status-im/status-mobile/issues/15606
- Hopefully, if SVG icons prove to be a solid solution, we can easily and
progressively migrate PNG icons to SVGs, but for the moment, it was aligned
with @flexsurfer
https://github.com/status-im/status-mobile/issues/15606#issuecomment-1514631270
that we'll only use SVG icons on demand.
- Note that it's possible to import SVGs directly via js/require by installing
the library react-native-svg-transformer, but this approach is only good when
we don't want/need color customization, which is rarely the case with icons
where we want to change the foreground and/or background colors. I opted for
rendering the SVG icon as hiccup to support color customization.
- Since icons are fully memoized, the app's performance is on the same ballpark
as PNGs rendered with RN Image.
- It's possible to trim down SVGs by using a tool such as
https://github.com/svg/svgo, but this is obviously outside the scope of this
PR.
* fix: remove contact from mutual contact list after contact is blocked
* remove our contact from remote user contact list when contact is blocked
719af90f...9dea0aae
* Add missing color variants for selectors
* Rename test ns and replace rtl fns by helper ones
* Add missing disclaimer blur style in onboarding - create password
* [IOS Only] react-native 0.63 to 0.67
* [Android Only] react-native 0.63 to 0.67
* bring back all the jenkinsfiles
* make auto-complete prop for text-input compatible
* [IOS Only] react-native 0.63 to 0.67
* [Android Only] react-native 0.63 to 0.67
* bring back all the jenkinsfiles
* nix: drop unnecessary set -x from status-go build
Signed-off-by: Jakub Sokołowski <jakub@status.im>
* add explicity implementation line for soloader
And add deleteDebugFilesForVariant fix for libhermes.
Signed-off-by: Jakub Sokołowski <jakub@status.im>
* use fast-image for link previews
* fix extra line in message composer on android
This elevation prop is un-necessary and causes an extra line to appear which looks like a border but its actually a shadow.
* don't use `fast-image` for url preview favicon
* fix audio record button interfering cancel android
This fix was not needed in react-native 0.63.4 but is needed after we upgraded to 0.67.5
* get rid of unused platform import
---------
Co-authored-by: Jakub Sokołowski <jakub@status.im>
This commit makes the test-helpers.component namespace loadable in the REPL,
plus other changes that allow for a reasonably enjoyable RDD (REPL-Driven
Development) workflow.
Why? I want to be able to get instant feedback when I render a component with
the RN Testing Library (RNTL), and only once I'm satisfied with my findings is
when I proceed to write/update the tests. This nearly instant feedback loop is
only feasible using the ClojureScript REPL, and I'd rather not endure long
recompilation cycles.
Note that by REPL I mean connecting to the CLJS REPL of the Shadow-CLJS :mobile
target.
Essentially, this is what this commit does:
- [x] Allow the test-helpers.component namespace to be evaluated in the REPL.
This is now possible because I changed all functions that assumed js/jest
existed with a guard clause using the CLJS macro exists?. Without the
guard clauses, evaluating the namespace explodes due to stuff like
js/jest.useFakeTimers that fail in compile time (it's a syntax sugar
macro).
- [x] Change the family of functions to get the translation by text to either
translate using i18n/label or translate with the dummy prefix tx:,
depending if the code is running inside the Jest runtime or not.
- [x] Wrap remaining RNTL query functions, except for the find-* ones, since
they don't work at all outside the Jest runtime.
- [x] All wrapped functions support the original arguments supported by RNTL.
Arguments are always converted with clj->js.
- [x] All wrapped functions can optionally take a node (ReactTestInstance) as
their first argument, otherwise the global screen object will be used.
This is very important! See the explanation on section Doesn't RNTL
recommend using the screen object?
- [x] Update Shadow-CLJS preloads, so that (in development) you can fire off the
REPL and always be ready to call component test helpers. This is critical!
What else would be possible? Just an idea, but now that we can easily render
components using the same machinery provided by RNTL in the tests, we can
roughly implement Storybook's Play function
https://storybook.js.org/docs/react/writing-stories/play-function
Lesson learned: In the REPL, you may need to call
(re-frame.core/clear-subscription-cache!), otherwise you will experience
subscriptions returning the same value if their arguments are the same. For
example, I faced this while playing with the namespace
status-im2.contexts.communities.menus.community-options.component-spec. There
are better ways to solve this particular problem in the context of tests if we
use the tooling provided by day8.re-frame.test.
Doesn't RNTL recommend using the screen object? Indeed, it is recommended to use
the screen object instead of destructuring the results of RNTL render. It's just
easier and less error prone, but this only works reliably within the Jest
runtime, since it automatically cleans up rendered state after each test. When
using the REPL this is no longer the case, and I faced some errors, like Unable
to find node on an unmounted component, where RNTL would refuse to re-render
components, even if I explicitly unmounted them or called cleanup.
The only reliable solution I found was to store the result of render (a node)
and pass it to every subsequent call. This is not a workaround, it's officially
supported, but it's a tad less convenient. You can also not pass the node
reference and it should work most of the time.
Practical examples
Workflow suggestion: write your local experiments in the same namespace as the
component spec and within the comment macro. This way, you can have the Jest
watcher running and a REPL connected to :mobile, and they won't step on each
other. For the test watcher, I usually change quo2-core-spec or
status-im2.core-spec to only require what I'm interested, otherwise Jest
consumes way too many resources.
```clojure
;; Namespace quo2.components.colors.color-picker.component-spec
(h/test "color picker color changed"
(let [selected (reagent/atom nil)]
(h/render [color-picker/view {:on-change #(reset! selected %)}])
(h/fire-event :press (get (h/get-all-by-label-text :color-picker-item) 0))
(-> (h/expect @selected)
(.toStrictEqual :blue))))
(comment
(def selected (atom nil))
(def c (h/render [color-picker/view {:on-change #(reset! selected %)}]))
(h/fire-event :press (get (h/get-all-by-label-text c :color-picker-item) 0))
;; Options are passed down converted to JS types.
(h/debug c {:message "Rendering header"})
@selected ; => :blue
)
```
```clojure
;; Namespace quo2.components.tags.--tests--.status-tags-component-spec
(h/test "renders status tag with pending type"
(render-status-tag {:status {:type :pending}
:label "Pending"
:size :small})
(-> (h/expect (h/get-all-by-label-text :status-tag-pending))
(.toBeTruthy))
(-> (h/expect (h/get-by-text "Pending"))
(.toBeTruthy)))
(comment
(def c (render-status-tag {:status {:type :pending}
:label "Pending"
:size :small}))
(h/get-all-by-label-text c :status-tag-pending))
```
```clojure
;; Namespace status-im2.contexts.communities.menus.community-options.component-spec
(h/test "joined and muted community"
(setup-subs {:communities/my-pending-request-to-join nil
:communities/community {:joined true
:muted true
:token-gated? true}})
(h/render [options/community-options-bottom-sheet {:id "test"}])
(-> (h/expect (h/get-by-translation-text :unmute-community))
(.toBeTruthy)))
(comment
(setup-subs {:communities/my-pending-request-to-join nil
:communities/community {:joined true
:muted true
:token-gated? true}})
(def c (h/render [options/community-options-bottom-sheet {:id "test"}]))
(some? (h/get-by-translation-text c :invite-people-from-contacts)) ; => true
)
```
Roman Volosovskyi
Icaro Motta
Parvesh Monu
Omar Basem
flexsurfer
Ibrahem Khalil
frank
Mohamed Javid
Brian Sztamfater
Rahul Pratap
Jamie Caprani
Alexander
Ulises Manuel Cárdenas
Volodymyr Kozieiev
erikseppanen
Ajay Sivan
yqrashawn
andrey
Siddarth Kumar
John Ngei
Rodrigo Hernandez
codemaster
Churikova Tetiana
Andrea Maria Piana
Ulises M
R Adithya Kumar