From a3c09f9f862a4b4abe43cbb6d1042369fb1e14ba Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 12 Mar 2024 21:57:56 +0000 Subject: [PATCH 01/60] add and configure import sort plugin --- .eslintrc.js | 14 +++++++++++++- package.json | 1 + yarn.lock | 5 +++++ 3 files changed, 19 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index 18802cdf18..b26bee1baf 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -7,10 +7,18 @@ module.exports = { 'prettier', ], parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint', 'detox', 'react', 'lingui'], + plugins: [ + '@typescript-eslint', + 'detox', + 'react', + 'lingui', + 'simple-import-sort', + ], rules: { 'react/no-unescaped-entities': 0, 'react-native/no-inline-styles': 0, + 'simple-import-sort/imports': 'error', + 'simple-import-sort/exports': 'error', }, ignorePatterns: [ '**/__mocks__/*.ts', @@ -31,4 +39,8 @@ module.exports = { settings: { componentWrapperFunctions: ['observer'], }, + parserOptions: { + sourceType: 'module', + ecmaVersion: 'latest', + }, } diff --git a/package.json b/package.json index 2571fe772d..4e7ad9387d 100644 --- a/package.json +++ b/package.json @@ -234,6 +234,7 @@ "eslint-plugin-lingui": "^0.2.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-native-a11y": "^3.3.0", + "eslint-plugin-simple-import-sort": "^12.0.0", "html-webpack-plugin": "^5.5.0", "husky": "^8.0.3", "is-ci": "^3.0.1", diff --git a/yarn.lock b/yarn.lock index d0ea946b6b..3e3ed0e223 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11501,6 +11501,11 @@ eslint-plugin-react@^7.27.1, eslint-plugin-react@^7.30.1, eslint-plugin-react@^7 semver "^6.3.1" string.prototype.matchall "^4.0.8" +eslint-plugin-simple-import-sort@^12.0.0: + version "12.0.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-12.0.0.tgz#3cfa05d74509bd4dc329a956938823812194dbb6" + integrity sha512-8o0dVEdAkYap0Cn5kNeklaKcT1nUsa3LITWEuFk3nJifOoD+5JQGoyDUW2W/iPWwBsNBJpyJS9y4je/BgxLcyQ== + eslint-plugin-testing-library@^5.0.1: version "5.11.1" resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz#5b46cdae96d4a78918711c0b4792f90088e62d20" From 1512b5cf68e9e92801a894392569b444fd6af1d1 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 12 Mar 2024 22:02:28 +0000 Subject: [PATCH 02/60] run linter --- src/App.native.tsx | 70 ++++----- src/App.web.tsx | 44 +++--- src/Navigation.tsx | 135 +++++++++--------- src/Splash.tsx | 14 +- src/alf/atoms.ts | 2 +- src/alf/index.tsx | 7 +- src/alf/themes.ts | 2 +- src/alf/tokens.ts | 4 +- src/alf/types.ts | 2 +- src/alf/util/useColorModeTheme.ts | 8 +- src/components/Button.tsx | 18 +-- src/components/Dialog/context.ts | 2 +- src/components/Dialog/index.tsx | 25 ++-- src/components/Dialog/index.web.tsx | 19 ++- src/components/Dialog/types.ts | 2 +- src/components/Divider.tsx | 3 +- src/components/IconCircle.tsx | 8 +- src/components/Link.tsx | 18 +-- src/components/Lists.tsx | 13 +- src/components/Loader.tsx | 4 +- src/components/Menu/index.tsx | 37 +++-- src/components/Menu/index.web.tsx | 17 ++- src/components/Menu/types.ts | 6 +- src/components/Prompt.tsx | 9 +- src/components/RichText.tsx | 18 +-- src/components/TagMenu/index.tsx | 22 +-- src/components/TagMenu/index.web.tsx | 22 +-- src/components/Typography.tsx | 4 +- src/components/dialogs/MutedWords.tsx | 39 +++-- .../forms/DateField/index.android.tsx | 17 ++- src/components/forms/DateField/index.tsx | 10 +- src/components/forms/DateField/index.web.tsx | 6 +- src/components/forms/TextField.tsx | 12 +- src/components/forms/Toggle.tsx | 6 +- src/components/forms/ToggleButton.tsx | 7 +- src/components/icons/TEMPLATE.tsx | 2 +- src/components/icons/common.ts | 2 +- src/lib/ThemeContext.tsx | 6 +- .../__tests__/moderatePost_wrapped.test.ts | 2 +- src/lib/analytics/analytics.tsx | 9 +- src/lib/analytics/analytics.web.tsx | 7 +- src/lib/api/api-polyfill.ts | 2 +- src/lib/api/feed-manip.ts | 7 +- src/lib/api/feed/author.ts | 4 +- src/lib/api/feed/custom.ts | 6 +- src/lib/api/feed/following.ts | 4 +- src/lib/api/feed/home.ts | 8 +- src/lib/api/feed/likes.ts | 4 +- src/lib/api/feed/list.ts | 4 +- src/lib/api/feed/merge.ts | 16 ++- src/lib/api/index.ts | 8 +- src/lib/app-info.ts | 2 +- src/lib/embeds.ts | 2 +- src/lib/hooks/useAccountSwitcher.ts | 8 +- .../useAnimatedScrollHandler_FIXED.web.ts | 2 +- src/lib/hooks/useCustomPalette.ts | 4 +- src/lib/hooks/useDraggableScrollView.ts | 6 +- src/lib/hooks/useIntentHandler.ts | 4 +- src/lib/hooks/useIsKeyboardVisible.ts | 4 +- src/lib/hooks/useMinimalShellMode.tsx | 1 + src/lib/hooks/useNavigationDeduped.ts | 6 +- src/lib/hooks/useOTAUpdate.ts | 3 +- src/lib/hooks/usePalette.ts | 3 +- src/lib/hooks/usePermissions.ts | 2 +- src/lib/hooks/useSetTitle.ts | 4 +- src/lib/hooks/useTabFocusEffect.ts | 2 +- src/lib/hooks/useToggleMutationQueue.ts | 2 +- src/lib/hooks/useWebBodyScrollLock.ts | 1 + src/lib/hooks/useWebMediaQueries.tsx | 2 +- src/lib/hooks/useWebScrollRestoration.ts | 2 +- src/lib/icons.tsx | 2 +- src/lib/link-meta/bsky.ts | 10 +- src/lib/link-meta/link-meta.ts | 5 +- src/lib/media/image-sizes.ts | 2 +- src/lib/media/manip.ts | 15 +- src/lib/media/manip.web.ts | 5 +- src/lib/media/picker.e2e.tsx | 5 +- src/lib/media/picker.shared.ts | 3 +- src/lib/media/picker.tsx | 3 +- src/lib/media/picker.web.tsx | 3 +- src/lib/moderatePost_wrapped.ts | 8 +- src/lib/moderation.ts | 2 +- src/lib/notifications/notifications.ts | 10 +- src/lib/react-query.ts | 3 +- src/lib/routes/helpers.ts | 3 +- src/lib/routes/router.ts | 2 +- src/lib/sentry.ts | 2 +- src/lib/sharing.ts | 5 +- src/lib/statsig/statsig.tsx | 3 +- src/lib/statsig/statsig.web.tsx | 3 +- src/lib/strings/display-names.ts | 1 + src/lib/strings/embed-player.ts | 2 +- src/lib/strings/rich-text-helpers.ts | 1 + src/lib/strings/rich-text-manip.ts | 1 + src/lib/strings/url-helpers.ts | 2 +- src/lib/styles.ts | 5 +- src/lib/themes.ts | 7 +- src/locale/__tests__/helpers.test.ts | 2 +- src/locale/helpers.ts | 3 +- src/locale/i18n.ts | 17 ++- src/locale/i18n.web.ts | 4 +- src/locale/i18nProvider.tsx | 5 +- src/logger/__tests__/logger.test.ts | 2 +- src/logger/index.ts | 2 +- src/platform/detection.ts | 2 +- src/platform/urls.tsx | 1 + src/screens/Deactivated.tsx | 20 +-- src/screens/Hashtag.tsx | 33 ++--- src/screens/Onboarding/Layout.tsx | 26 ++-- .../Onboarding/StepAlgoFeeds/FeedCard.tsx | 15 +- .../Onboarding/StepAlgoFeeds/index.tsx | 19 ++- src/screens/Onboarding/StepFinished.tsx | 25 ++-- src/screens/Onboarding/StepFollowingFeed.tsx | 35 +++-- .../StepInterests/InterestButton.tsx | 5 +- .../Onboarding/StepInterests/index.tsx | 31 ++-- .../AdultContentEnabledPref.tsx | 14 +- .../StepModeration/ModerationOption.tsx | 14 +- .../Onboarding/StepModeration/index.tsx | 19 ++- .../SuggestedAccountCard.tsx | 10 +- .../StepSuggestedAccounts/index.tsx | 25 ++-- src/screens/Onboarding/StepTopicalFeeds.tsx | 19 ++- src/screens/Onboarding/index.tsx | 15 +- src/screens/Onboarding/util.ts | 1 + src/state/cache/post-shadow.ts | 10 +- src/state/cache/profile-shadow.ts | 12 +- src/state/dialogs/index.tsx | 1 + src/state/invites.tsx | 1 + src/state/lightbox.tsx | 3 +- src/state/modals/index.tsx | 7 +- src/state/models/media/gallery.ts | 9 +- src/state/models/media/image.e2e.ts | 8 +- src/state/models/media/image.ts | 13 +- src/state/muted-threads.tsx | 3 +- src/state/persisted/__tests__/index.test.ts | 8 +- src/state/persisted/__tests__/migrate.test.ts | 8 +- src/state/persisted/__tests__/schema.test.ts | 2 +- src/state/persisted/index.ts | 13 +- src/state/persisted/legacy.ts | 2 +- src/state/persisted/schema.ts | 1 + src/state/persisted/store.ts | 2 +- src/state/preferences/alt-text-required.tsx | 1 + .../preferences/external-embeds-prefs.tsx | 5 +- src/state/preferences/feed-tuners.tsx | 4 +- src/state/preferences/hidden-posts.tsx | 1 + src/state/preferences/in-app-browser.tsx | 14 +- src/state/preferences/index.tsx | 5 +- src/state/preferences/languages.tsx | 3 +- src/state/queries/actor-autocomplete.ts | 11 +- src/state/queries/actor-search.ts | 2 +- src/state/queries/app-passwords.ts | 3 +- src/state/queries/feed.ts | 24 ++-- src/state/queries/handle.ts | 4 +- src/state/queries/invites.ts | 4 +- src/state/queries/list-members.ts | 4 +- src/state/queries/list-memberships.ts | 4 +- src/state/queries/list.ts | 16 ++- src/state/queries/my-blocked-accounts.ts | 2 +- src/state/queries/my-follows.ts | 4 +- src/state/queries/my-lists.ts | 4 +- src/state/queries/my-muted-accounts.ts | 2 +- src/state/queries/notifications/feed.ts | 20 +-- src/state/queries/notifications/types.ts | 2 +- src/state/queries/notifications/unread.tsx | 20 +-- src/state/queries/notifications/util.ts | 18 +-- src/state/queries/post-feed.ts | 32 +++-- src/state/queries/post-liked-by.ts | 2 +- src/state/queries/post-reposted-by.ts | 2 +- src/state/queries/post-thread.ts | 13 +- src/state/queries/post.ts | 11 +- src/state/queries/preferences/const.ts | 8 +- src/state/queries/preferences/index.ts | 34 ++--- src/state/queries/preferences/moderation.ts | 4 +- src/state/queries/preferences/types.ts | 6 +- src/state/queries/profile-extra-info.ts | 2 +- src/state/queries/profile-feedgens.ts | 2 +- src/state/queries/profile-followers.ts | 2 +- src/state/queries/profile-follows.ts | 4 +- src/state/queries/profile-lists.ts | 3 +- src/state/queries/profile.ts | 28 ++-- src/state/queries/resolve-uri.ts | 7 +- src/state/queries/search-posts.ts | 5 +- src/state/queries/suggested-feeds.ts | 4 +- src/state/queries/suggested-follows.ts | 12 +- src/state/queries/util.ts | 2 +- src/state/session/index.tsx | 11 +- src/state/shell/color-mode.tsx | 1 + src/state/shell/composer.tsx | 3 +- src/state/shell/index.tsx | 13 +- src/state/shell/onboarding.tsx | 3 +- src/state/shell/reminders.ts | 6 +- src/state/shell/selected-feed.tsx | 3 +- src/state/util.ts | 4 +- src/view/com/auth/HomeLoggedOutCTA.tsx | 14 +- src/view/com/auth/LoggedOut.tsx | 29 ++-- src/view/com/auth/Onboarding.tsx | 16 ++- src/view/com/auth/SplashScreen.tsx | 28 ++-- src/view/com/auth/SplashScreen.web.tsx | 28 ++-- src/view/com/auth/create/CaptchaWebView.tsx | 2 +- src/view/com/auth/create/CreateAccount.tsx | 27 ++-- src/view/com/auth/create/Policies.tsx | 11 +- src/view/com/auth/create/Step1.tsx | 35 ++--- src/view/com/auth/create/Step2.tsx | 24 ++-- src/view/com/auth/create/Step3.tsx | 20 +-- src/view/com/auth/create/StepHeader.tsx | 5 +- src/view/com/auth/create/state.ts | 19 +-- src/view/com/auth/login/ChooseAccountForm.tsx | 22 +-- .../com/auth/login/ForgotPasswordForm.tsx | 43 +++--- src/view/com/auth/login/Login.tsx | 30 ++-- src/view/com/auth/login/LoginForm.tsx | 43 +++--- .../com/auth/login/PasswordUpdatedForm.tsx | 15 +- .../com/auth/login/SetNewPasswordForm.tsx | 28 ++-- src/view/com/auth/login/styles.ts | 3 +- .../com/auth/onboarding/RecommendedFeeds.tsx | 22 +-- .../auth/onboarding/RecommendedFeedsItem.tsx | 29 ++-- .../auth/onboarding/RecommendedFollows.tsx | 26 ++-- .../onboarding/RecommendedFollowsItem.tsx | 21 +-- src/view/com/auth/onboarding/Welcome.tsx | 2 + .../com/auth/onboarding/WelcomeDesktop.tsx | 12 +- .../com/auth/onboarding/WelcomeMobile.tsx | 10 +- src/view/com/auth/server-input/index.tsx | 14 +- src/view/com/auth/util/HelpTip.tsx | 6 +- src/view/com/auth/util/TextInput.tsx | 6 +- src/view/com/composer/Composer.tsx | 90 ++++++------ src/view/com/composer/ComposerReplyTo.tsx | 16 +-- src/view/com/composer/ExternalEmbed.tsx | 13 +- src/view/com/composer/Prompt.tsx | 16 ++- .../composer/char-progress/CharProgress.tsx | 9 +- src/view/com/composer/labels/LabelsBtn.tsx | 15 +- src/view/com/composer/photos/Gallery.tsx | 23 +-- .../com/composer/photos/OpenCameraBtn.tsx | 25 ++-- .../com/composer/photos/SelectPhotoBtn.tsx | 18 +-- .../select-language/SelectLangBtn.tsx | 22 +-- .../select-language/SuggestedLanguage.tsx | 24 ++-- .../com/composer/text-input/TextInput.tsx | 35 ++--- .../com/composer/text-input/TextInput.web.tsx | 34 ++--- .../text-input/mobile/Autocomplete.tsx | 12 +- .../composer/text-input/web/Autocomplete.tsx | 20 +-- .../text-input/web/EmojiPicker.web.tsx | 3 +- .../composer/text-input/web/LinkDecorator.ts | 9 +- .../composer/text-input/web/TagDecorator.ts | 8 +- .../com/composer/threadgate/ThreadgateBtn.tsx | 13 +- src/view/com/composer/useExternalLinkFetch.ts | 17 +-- src/view/com/feeds/FeedPage.tsx | 44 +++--- src/view/com/feeds/FeedSourceCard.tsx | 34 ++--- src/view/com/feeds/ProfileFeedgens.tsx | 30 ++-- src/view/com/home/HomeHeader.tsx | 12 +- src/view/com/home/HomeHeaderLayout.web.tsx | 22 +-- src/view/com/home/HomeHeaderLayoutMobile.tsx | 23 +-- .../components/ImageDefaultHeader.tsx | 6 +- .../ImageItem/ImageItem.android.tsx | 16 +-- .../components/ImageItem/ImageItem.ios.tsx | 11 +- .../components/ImageItem/ImageItem.tsx | 1 + .../components/ImageItem/ImageLoading.tsx | 1 - .../ImageViewing/hooks/useImageDimensions.ts | 1 + src/view/com/lightbox/ImageViewing/index.tsx | 13 +- src/view/com/lightbox/Lightbox.tsx | 28 ++-- src/view/com/lightbox/Lightbox.web.tsx | 36 ++--- src/view/com/lists/ListCard.tsx | 24 ++-- src/view/com/lists/ListMembers.tsx | 28 ++-- src/view/com/lists/MyLists.tsx | 24 ++-- src/view/com/lists/ProfileLists.tsx | 26 ++-- src/view/com/modals/AddAppPasswords.tsx | 26 ++-- src/view/com/modals/AltImage.tsx | 38 ++--- src/view/com/modals/AppealLabel.tsx | 24 ++-- src/view/com/modals/BirthDateSettings.tsx | 26 ++-- src/view/com/modals/ChangeEmail.tsx | 26 ++-- src/view/com/modals/ChangeHandle.tsx | 42 +++--- src/view/com/modals/ChangePassword.tsx | 36 ++--- src/view/com/modals/Confirm.tsx | 18 +-- .../com/modals/ContentFilteringSettings.tsx | 40 +++--- src/view/com/modals/CreateOrEditList.tsx | 48 ++++--- src/view/com/modals/DeleteAccount.tsx | 32 +++-- src/view/com/modals/EditImage.tsx | 34 ++--- src/view/com/modals/EditProfile.tsx | 42 +++--- src/view/com/modals/EmbedConsent.tsx | 16 ++- src/view/com/modals/InAppBrowserConsent.tsx | 16 +-- src/view/com/modals/InviteCodes.tsx | 56 ++++---- src/view/com/modals/LinkWarning.tsx | 20 +-- src/view/com/modals/ListAddRemoveUsers.tsx | 40 +++--- src/view/com/modals/Modal.tsx | 51 +++---- src/view/com/modals/Modal.web.tsx | 51 +++---- src/view/com/modals/ModerationDetails.tsx | 24 ++-- src/view/com/modals/Repost.tsx | 16 ++- src/view/com/modals/SelfLabel.tsx | 18 +-- src/view/com/modals/SwitchAccount.tsx | 30 ++-- src/view/com/modals/Threadgate.tsx | 20 +-- src/view/com/modals/UserAddRemoveLists.tsx | 32 +++-- src/view/com/modals/VerifyEmail.tsx | 34 ++--- .../com/modals/crop-image/CropImage.web.tsx | 21 +-- .../lang-settings/ConfirmLanguagesButton.tsx | 12 +- .../ContentLanguagesSettings.tsx | 18 +-- .../modals/lang-settings/LanguageToggle.tsx | 5 +- .../lang-settings/PostLanguagesSettings.tsx | 18 +-- .../com/modals/report/InputIssueDetails.tsx | 15 +- src/view/com/modals/report/Modal.tsx | 32 +++-- src/view/com/modals/report/ReasonOptions.tsx | 8 +- .../com/modals/report/SendReportButton.tsx | 9 +- src/view/com/notifications/Feed.tsx | 28 ++-- src/view/com/notifications/FeedItem.tsx | 56 ++++---- src/view/com/pager/Pager.tsx | 4 +- src/view/com/pager/Pager.web.tsx | 2 +- src/view/com/pager/PagerWithHeader.tsx | 16 ++- src/view/com/pager/PagerWithHeader.web.tsx | 4 +- src/view/com/pager/TabBar.tsx | 12 +- src/view/com/post-thread/PostLikedBy.tsx | 20 +-- src/view/com/post-thread/PostRepostedBy.tsx | 18 +-- src/view/com/post-thread/PostThread.tsx | 68 ++++----- .../com/post-thread/PostThreadFollowBtn.tsx | 20 +-- src/view/com/post-thread/PostThreadItem.tsx | 70 ++++----- src/view/com/post/Post.tsx | 40 +++--- src/view/com/posts/CustomFeedEmptyState.tsx | 15 +- src/view/com/posts/DiscoverFallbackHeader.tsx | 8 +- src/view/com/posts/Feed.tsx | 42 +++--- src/view/com/posts/FeedErrorMessage.tsx | 28 ++-- src/view/com/posts/FeedItem.tsx | 48 ++++--- src/view/com/posts/FeedSlice.tsx | 18 +-- src/view/com/posts/FollowingEmptyState.tsx | 15 +- src/view/com/posts/FollowingEndOfFeed.tsx | 15 +- src/view/com/profile/FollowButton.tsx | 12 +- src/view/com/profile/ProfileCard.tsx | 36 ++--- src/view/com/profile/ProfileFollowers.tsx | 18 +-- src/view/com/profile/ProfileFollows.tsx | 18 +-- src/view/com/profile/ProfileHeader.tsx | 78 +++++----- .../profile/ProfileHeaderSuggestedFollows.tsx | 27 ++-- src/view/com/profile/ProfileMenu.tsx | 31 ++-- src/view/com/profile/ProfileSubpageHeader.tsx | 28 ++-- src/view/com/testing/TestCtrls.e2e.tsx | 8 +- src/view/com/threadgate/WhoCanReply.tsx | 19 +-- src/view/com/util/AccountDropdownBtn.tsx | 18 +-- src/view/com/util/BlurView.android.tsx | 2 +- src/view/com/util/BlurView.web.tsx | 2 +- .../com/util/BottomSheetCustomBackdrop.tsx | 4 +- src/view/com/util/EmptyState.tsx | 9 +- src/view/com/util/EmptyStateWithButton.tsx | 11 +- src/view/com/util/ErrorBoundary.tsx | 6 +- src/view/com/util/FeedInfoText.tsx | 8 +- src/view/com/util/Html.tsx | 13 +- src/view/com/util/Link.tsx | 50 +++---- src/view/com/util/List.tsx | 8 +- src/view/com/util/List.web.tsx | 11 +- src/view/com/util/LoadMoreRetryBtn.tsx | 7 +- src/view/com/util/LoadingPlaceholder.tsx | 20 +-- src/view/com/util/LoadingScreen.tsx | 3 +- src/view/com/util/MainScrollProvider.tsx | 13 +- src/view/com/util/PostMeta.tsx | 22 +-- src/view/com/util/PressableWithHover.tsx | 8 +- src/view/com/util/Selector.tsx | 11 +- src/view/com/util/SimpleViewHeader.tsx | 18 +-- src/view/com/util/TimeElapsed.tsx | 3 +- src/view/com/util/Toast.tsx | 14 +- src/view/com/util/Toast.web.tsx | 4 +- src/view/com/util/UserAvatar.tsx | 35 ++--- src/view/com/util/UserBanner.tsx | 27 ++-- src/view/com/util/UserInfoText.tsx | 18 +-- src/view/com/util/UserPreviewLink.tsx | 8 +- src/view/com/util/ViewHeader.tsx | 26 ++-- src/view/com/util/ViewSelector.tsx | 27 ++-- src/view/com/util/Views.web.tsx | 6 +- .../com/util/anim/TriggerableAnimated.tsx | 2 +- src/view/com/util/error/ErrorMessage.tsx | 25 ++-- src/view/com/util/error/ErrorScreen.tsx | 19 +-- src/view/com/util/fab/FAB.web.tsx | 3 +- src/view/com/util/fab/FABInner.tsx | 13 +- src/view/com/util/forms/Button.tsx | 17 +-- src/view/com/util/forms/DateInput.tsx | 15 +- src/view/com/util/forms/DateInput.web.tsx | 4 +- src/view/com/util/forms/DropdownButton.tsx | 19 +-- src/view/com/util/forms/NativeDropdown.tsx | 16 +-- .../com/util/forms/NativeDropdown.web.tsx | 10 +- src/view/com/util/forms/PostDropdownBtn.tsx | 59 ++++---- src/view/com/util/forms/RadioButton.tsx | 5 +- src/view/com/util/forms/RadioGroup.tsx | 5 +- src/view/com/util/forms/SearchInput.tsx | 20 +-- src/view/com/util/forms/SelectableBtn.tsx | 7 +- src/view/com/util/forms/ToggleButton.tsx | 11 +- src/view/com/util/images/AutoSizedImage.tsx | 12 +- src/view/com/util/images/Gallery.tsx | 6 +- src/view/com/util/images/Image.tsx | 2 +- src/view/com/util/images/Image.web.tsx | 2 +- src/view/com/util/images/ImageHorzList.tsx | 4 +- src/view/com/util/images/ImageLayoutGrid.tsx | 5 +- src/view/com/util/layouts/LoggedOutLayout.tsx | 9 +- .../com/util/layouts/TitleColumnLayout.tsx | 4 +- src/view/com/util/layouts/withBreakpoints.tsx | 4 +- .../com/util/load-latest/LoadLatestBtn.tsx | 12 +- src/view/com/util/moderation/ContentHider.tsx | 18 +-- src/view/com/util/moderation/LabelInfo.tsx | 10 +- src/view/com/util/moderation/PostAlerts.tsx | 12 +- src/view/com/util/moderation/PostHider.tsx | 18 +-- .../util/moderation/ProfileHeaderAlerts.tsx | 14 +- src/view/com/util/moderation/ScreenHider.tsx | 32 +++-- src/view/com/util/post-ctrls/PostCtrls.tsx | 48 ++++--- src/view/com/util/post-ctrls/RepostButton.tsx | 22 +-- .../com/util/post-ctrls/RepostButton.web.tsx | 21 +-- .../com/util/post-embeds/ExternalGifEmbed.tsx | 15 +- .../util/post-embeds/ExternalLinkEmbed.tsx | 15 +- .../util/post-embeds/ExternalPlayerEmbed.tsx | 25 ++-- src/view/com/util/post-embeds/ListEmbed.tsx | 6 +- src/view/com/util/post-embeds/QuoteEmbed.tsx | 36 ++--- src/view/com/util/post-embeds/index.tsx | 42 +++--- src/view/com/util/text/RichText.tsx | 18 +-- src/view/com/util/text/Text.tsx | 6 +- src/view/com/util/text/ThemedText.tsx | 5 +- src/view/icons/Logo.tsx | 4 +- src/view/icons/Logotype.tsx | 2 +- src/view/icons/index.tsx | 73 +++++----- src/view/screens/AppPasswords.tsx | 34 ++--- src/view/screens/CommunityGuidelines.tsx | 18 +-- src/view/screens/CopyrightPolicy.tsx | 18 +-- src/view/screens/Debug.tsx | 37 ++--- src/view/screens/Feeds.tsx | 73 +++++----- src/view/screens/Home.tsx | 34 ++--- src/view/screens/LanguageSettings.tsx | 32 +++-- src/view/screens/Lists.tsx | 25 ++-- src/view/screens/Log.tsx | 24 ++-- src/view/screens/Moderation.tsx | 44 +++--- .../screens/ModerationBlockedAccounts.tsx | 34 ++--- src/view/screens/ModerationModlists.tsx | 25 ++-- src/view/screens/ModerationMutedAccounts.tsx | 34 ++--- src/view/screens/NotFound.tsx | 20 +-- src/view/screens/Notifications.tsx | 38 ++--- src/view/screens/PostLikedBy.tsx | 18 +-- src/view/screens/PostRepostedBy.tsx | 16 ++- src/view/screens/PostThread.tsx | 30 ++-- .../screens/PreferencesExternalEmbeds.tsx | 30 ++-- src/view/screens/PreferencesFollowingFeed.tsx | 20 +-- src/view/screens/PreferencesThreads.tsx | 20 +-- src/view/screens/PrivacyPolicy.tsx | 18 +-- src/view/screens/Profile.tsx | 66 ++++----- src/view/screens/ProfileFeed.tsx | 125 ++++++++-------- src/view/screens/ProfileFeedLikedBy.tsx | 16 ++- src/view/screens/ProfileFollowers.tsx | 14 +- src/view/screens/ProfileFollows.tsx | 14 +- src/view/screens/ProfileList.tsx | 95 ++++++------ src/view/screens/SavedFeeds.tsx | 37 ++--- src/view/screens/Search/Search.tsx | 76 +++++----- src/view/screens/Settings/ExportCarDialog.tsx | 8 +- src/view/screens/Settings/index.tsx | 97 ++++++------- src/view/screens/Storybook/Breakpoints.tsx | 4 +- src/view/screens/Storybook/Buttons.tsx | 4 +- src/view/screens/Storybook/Dialogs.tsx | 2 +- src/view/screens/Storybook/Forms.tsx | 6 +- src/view/screens/Storybook/Icons.tsx | 4 +- src/view/screens/Storybook/Links.tsx | 2 +- src/view/screens/Storybook/Menus.tsx | 4 +- src/view/screens/Storybook/Spacing.tsx | 2 +- src/view/screens/Storybook/Theming.tsx | 1 + src/view/screens/Storybook/Typography.tsx | 2 +- src/view/screens/Storybook/index.tsx | 26 ++-- src/view/screens/Support.tsx | 20 +-- src/view/screens/TermsOfService.tsx | 18 +-- src/view/shell/Composer.tsx | 11 +- src/view/shell/Composer.web.tsx | 10 +- src/view/shell/Drawer.tsx | 81 +++++------ src/view/shell/NavSignupCard.tsx | 12 +- src/view/shell/bottom-bar/BottomBar.tsx | 46 +++--- src/view/shell/bottom-bar/BottomBarStyles.tsx | 2 +- src/view/shell/bottom-bar/BottomBarWeb.tsx | 28 ++-- .../createNativeStackNavigatorWithAuth.tsx | 25 ++-- src/view/shell/desktop/Feeds.tsx | 21 +-- src/view/shell/desktop/LeftNav.tsx | 60 ++++---- src/view/shell/desktop/RightNav.tsx | 20 +-- src/view/shell/desktop/Search.tsx | 36 ++--- src/view/shell/index.tsx | 40 +++--- src/view/shell/index.web.tsx | 34 ++--- 465 files changed, 4136 insertions(+), 3714 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index eff8ab0997..fb97c0ea95 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -1,54 +1,54 @@ import 'react-native-url-polyfill/auto' import 'lib/sentry' // must be near top - -import React, {useState, useEffect} from 'react' -import {RootSiblingParent} from 'react-native-root-siblings' -import * as SplashScreen from 'expo-splash-screen' -import {GestureHandlerRootView} from 'react-native-gesture-handler' -import {QueryClientProvider} from '@tanstack/react-query' -import { - SafeAreaProvider, - initialWindowMetrics, -} from 'react-native-safe-area-context' - import 'view/icons' -import {ThemeProvider as Alf} from '#/alf' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' -import {init as initPersistedState} from '#/state/persisted' -import {listenSessionDropped} from './state/events' -import {ThemeProvider} from 'lib/ThemeContext' -import {s} from 'lib/styles' -import {Shell} from 'view/shell' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {QueryClientProvider} from '@tanstack/react-query' +import * as SplashScreen from 'expo-splash-screen' +import {StatusBar} from 'expo-status-bar' +import {useIntentHandler} from 'lib/hooks/useIntentHandler' import * as notifications from 'lib/notifications/notifications' -import * as Toast from 'view/com/util/Toast' import {queryClient} from 'lib/react-query' -import {TestCtrls} from 'view/com/testing/TestCtrls' -import {Provider as ShellStateProvider} from 'state/shell' -import {Provider as ModalStateProvider} from 'state/modals' +import {s} from 'lib/styles' +import {ThemeProvider} from 'lib/ThemeContext' +import {isAndroid} from 'platform/detection' +import React, {useEffect, useState} from 'react' +import {GestureHandlerRootView} from 'react-native-gesture-handler' +import {RootSiblingParent} from 'react-native-root-siblings' +import { + initialWindowMetrics, + SafeAreaProvider, +} from 'react-native-safe-area-context' import {Provider as DialogStateProvider} from 'state/dialogs' -import {Provider as LightboxStateProvider} from 'state/lightbox' -import {Provider as MutedThreadsProvider} from 'state/muted-threads' import {Provider as InvitesStateProvider} from 'state/invites' +import {Provider as LightboxStateProvider} from 'state/lightbox' +import {Provider as ModalStateProvider} from 'state/modals' +import {Provider as MutedThreadsProvider} from 'state/muted-threads' import {Provider as PrefsStateProvider} from 'state/preferences' -import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' -import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' -import I18nProvider from './locale/i18nProvider' +import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' import { Provider as SessionProvider, useSession, useSessionApi, } from 'state/session' -import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' -import * as persisted from '#/state/persisted' -import {Splash} from '#/Splash' +import {Provider as ShellStateProvider} from 'state/shell' +import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' +import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' +import {TestCtrls} from 'view/com/testing/TestCtrls' +import * as Toast from 'view/com/util/Toast' +import {Shell} from 'view/shell' + +import {ThemeProvider as Alf} from '#/alf' +import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {Provider as PortalProvider} from '#/components/Portal' import {Provider as StatsigProvider} from '#/lib/statsig/statsig' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useIntentHandler} from 'lib/hooks/useIntentHandler' -import {StatusBar} from 'expo-status-bar' -import {isAndroid} from 'platform/detection' +import {Splash} from '#/Splash' +import {init as initPersistedState} from '#/state/persisted' +import * as persisted from '#/state/persisted' + +import I18nProvider from './locale/i18nProvider' +import {listenSessionDropped} from './state/events' SplashScreen.preventAutoHideAsync() diff --git a/src/App.web.tsx b/src/App.web.tsx index eb2e425930..b53c61b778 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -1,39 +1,39 @@ import 'lib/sentry' // must be near top - -import React, {useState, useEffect} from 'react' -import {QueryClientProvider} from '@tanstack/react-query' -import {SafeAreaProvider} from 'react-native-safe-area-context' -import {RootSiblingParent} from 'react-native-root-siblings' - import 'view/icons' -import {ThemeProvider as Alf} from '#/alf' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' -import {init as initPersistedState} from '#/state/persisted' -import {Shell} from 'view/shell/index' -import {ToastContainer} from 'view/com/util/Toast.web' -import {ThemeProvider} from 'lib/ThemeContext' +import {QueryClientProvider} from '@tanstack/react-query' +import {useIntentHandler} from 'lib/hooks/useIntentHandler' import {queryClient} from 'lib/react-query' -import {Provider as ShellStateProvider} from 'state/shell' -import {Provider as ModalStateProvider} from 'state/modals' +import {ThemeProvider} from 'lib/ThemeContext' +import React, {useEffect, useState} from 'react' +import {RootSiblingParent} from 'react-native-root-siblings' +import {SafeAreaProvider} from 'react-native-safe-area-context' import {Provider as DialogStateProvider} from 'state/dialogs' -import {Provider as LightboxStateProvider} from 'state/lightbox' -import {Provider as MutedThreadsProvider} from 'state/muted-threads' import {Provider as InvitesStateProvider} from 'state/invites' +import {Provider as LightboxStateProvider} from 'state/lightbox' +import {Provider as ModalStateProvider} from 'state/modals' +import {Provider as MutedThreadsProvider} from 'state/muted-threads' import {Provider as PrefsStateProvider} from 'state/preferences' -import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' -import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' -import I18nProvider from './locale/i18nProvider' +import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' import { Provider as SessionProvider, useSession, useSessionApi, } from 'state/session' -import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' -import * as persisted from '#/state/persisted' +import {Provider as ShellStateProvider} from 'state/shell' +import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' +import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' +import {ToastContainer} from 'view/com/util/Toast.web' +import {Shell} from 'view/shell/index' + +import {ThemeProvider as Alf} from '#/alf' +import {useColorModeTheme} from '#/alf/util/useColorModeTheme' import {Provider as PortalProvider} from '#/components/Portal' import {Provider as StatsigProvider} from '#/lib/statsig/statsig' -import {useIntentHandler} from 'lib/hooks/useIntentHandler' +import {init as initPersistedState} from '#/state/persisted' +import * as persisted from '#/state/persisted' + +import I18nProvider from './locale/i18nProvider' function InnerApp() { const {isInitialLoad, currentAccount} = useSession() diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 8a9f69b5de..4eb90a1d54 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -1,84 +1,85 @@ -import * as React from 'react' -import { - NavigationContainer, - createNavigationContainerRef, - CommonActions, - StackActions, - DefaultTheme, - DarkTheme, -} from '@react-navigation/native' +import {i18n, MessageDescriptor} from '@lingui/core' +import {msg} from '@lingui/macro' import { BottomTabBarProps, createBottomTabNavigator, } from '@react-navigation/bottom-tabs' import { - HomeTabNavigatorParams, - SearchTabNavigatorParams, - FeedsTabNavigatorParams, - NotificationsTabNavigatorParams, - FlatNavigatorParams, - AllNavigatorParams, - MyProfileTabNavigatorParams, - BottomTabNavigatorParams, -} from 'lib/routes/types' -import {BottomBar} from './view/shell/bottom-bar/BottomBar' -import {buildStateObject} from 'lib/routes/helpers' -import {State, RouteParams} from 'lib/routes/types' -import {isAndroid, isNative} from 'platform/detection' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {router} from './routes' -import {usePalette} from 'lib/hooks/usePalette' -import {bskyTitle} from 'lib/strings/headings' -import {JSX} from 'react/jsx-runtime' + CommonActions, + createNavigationContainerRef, + DarkTheme, + DefaultTheme, + NavigationContainer, + StackActions, +} from '@react-navigation/native' import {timeout} from 'lib/async/timeout' -import {useUnreadNotifications} from './state/queries/notifications/unread' -import {useSession} from './state/session' -import {useModalControls} from './state/modals' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {usePalette} from 'lib/hooks/usePalette' +import {buildStateObject} from 'lib/routes/helpers' import { - shouldRequestEmailConfirmation, - setEmailConfirmationRequested, -} from './state/shell/reminders' + AllNavigatorParams, + BottomTabNavigatorParams, + FeedsTabNavigatorParams, + FlatNavigatorParams, + HomeTabNavigatorParams, + MyProfileTabNavigatorParams, + NotificationsTabNavigatorParams, + SearchTabNavigatorParams, +} from 'lib/routes/types' +import {RouteParams, State} from 'lib/routes/types' +import {bskyTitle} from 'lib/strings/headings' +import {isAndroid, isNative} from 'platform/detection' +import * as React from 'react' +import {JSX} from 'react/jsx-runtime' +import {AppPasswords} from 'view/screens/AppPasswords' +import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' +import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' +import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' +import {PreferencesThreads} from 'view/screens/PreferencesThreads' +import {SavedFeeds} from 'view/screens/SavedFeeds' + +import HashtagScreen from '#/screens/Hashtag' +import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' + import {init as initAnalytics} from './lib/analytics/analytics' import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration' - -import {HomeScreen} from './view/screens/Home' -import {SearchScreen} from './view/screens/Search' +import {logEvent} from './lib/statsig/statsig' +import {router} from './routes' +import {useModalControls} from './state/modals' +import {useUnreadNotifications} from './state/queries/notifications/unread' +import {useSession} from './state/session' +import { + setEmailConfirmationRequested, + shouldRequestEmailConfirmation, +} from './state/shell/reminders' +import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines' +import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy' import {FeedsScreen} from './view/screens/Feeds' -import {NotificationsScreen} from './view/screens/Notifications' +import {HomeScreen} from './view/screens/Home' +import {LanguageSettingsScreen} from './view/screens/LanguageSettings' import {ListsScreen} from './view/screens/Lists' +import {LogScreen} from './view/screens/Log' import {ModerationScreen} from './view/screens/Moderation' import {ModerationModlistsScreen} from './view/screens/ModerationModlists' import {NotFoundScreen} from './view/screens/NotFound' -import {SettingsScreen} from './view/screens/Settings' -import {LanguageSettingsScreen} from './view/screens/LanguageSettings' -import {ProfileScreen} from './view/screens/Profile' -import {ProfileFollowersScreen} from './view/screens/ProfileFollowers' -import {ProfileFollowsScreen} from './view/screens/ProfileFollows' -import {ProfileFeedScreen} from './view/screens/ProfileFeed' -import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy' -import {ProfileListScreen} from './view/screens/ProfileList' -import {PostThreadScreen} from './view/screens/PostThread' +import {NotificationsScreen} from './view/screens/Notifications' import {PostLikedByScreen} from './view/screens/PostLikedBy' import {PostRepostedByScreen} from './view/screens/PostRepostedBy' -import {Storybook} from './view/screens/Storybook' -import {LogScreen} from './view/screens/Log' -import {SupportScreen} from './view/screens/Support' +import {PostThreadScreen} from './view/screens/PostThread' import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy' +import {ProfileScreen} from './view/screens/Profile' +import {ProfileFeedScreen} from './view/screens/ProfileFeed' +import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy' +import {ProfileFollowersScreen} from './view/screens/ProfileFollowers' +import {ProfileFollowsScreen} from './view/screens/ProfileFollows' +import {ProfileListScreen} from './view/screens/ProfileList' +import {SearchScreen} from './view/screens/Search' +import {SettingsScreen} from './view/screens/Settings' +import {Storybook} from './view/screens/Storybook' +import {SupportScreen} from './view/screens/Support' import {TermsOfServiceScreen} from './view/screens/TermsOfService' -import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines' -import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy' -import {AppPasswords} from 'view/screens/AppPasswords' -import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' -import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' -import {SavedFeeds} from 'view/screens/SavedFeeds' -import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' -import {PreferencesThreads} from 'view/screens/PreferencesThreads' -import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' +import {BottomBar} from './view/shell/bottom-bar/BottomBar' import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth' -import {msg} from '@lingui/macro' -import {i18n, MessageDescriptor} from '@lingui/core' -import HashtagScreen from '#/screens/Hashtag' -import {logEvent} from './lib/statsig/statsig' const navigationRef = createNavigationContainerRef() @@ -670,11 +671,11 @@ function logModuleInitTime() { } export { - navigate, - resetToTab, - reset, - handleLink, - TabsNavigator, FlatNavigator, + handleLink, + navigate, + reset, + resetToTab, RoutesContainer, + TabsNavigator, } diff --git a/src/Splash.tsx b/src/Splash.tsx index 42a21c0839..e9c945d1b7 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -1,22 +1,22 @@ +import MaskedView from '@react-native-masked-view/masked-view' +import {Image} from 'expo-image' +import * as SplashScreen from 'expo-splash-screen' import React, {useCallback, useEffect} from 'react' import { - View, - StyleSheet, - Image as RNImage, AccessibilityInfo, + Image as RNImage, + StyleSheet, useColorScheme, + View, } from 'react-native' -import * as SplashScreen from 'expo-splash-screen' -import {Image} from 'expo-image' import Animated, { + Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming, - Easing, } from 'react-native-reanimated' -import MaskedView from '@react-native-masked-view/masked-view' import {useSafeAreaInsets} from 'react-native-safe-area-context' import Svg, {Path, SvgProps} from 'react-native-svg' diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index fff3a4d8bd..8db70dc556 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,5 +1,5 @@ -import {web, native} from '#/alf/util/platform' import * as tokens from '#/alf/tokens' +import {native, web} from '#/alf/util/platform' export const atoms = { /* diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 27738e91de..ae117747d7 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -1,12 +1,13 @@ import React from 'react' import {Dimensions} from 'react-native' + import * as themes from '#/alf/themes' -export * from '#/alf/types' -export * as tokens from '#/alf/tokens' export {atoms} from '#/alf/atoms' -export * from '#/alf/util/platform' +export * as tokens from '#/alf/tokens' +export * from '#/alf/types' export * from '#/alf/util/flatten' +export * from '#/alf/util/platform' type BreakpointName = keyof typeof breakpoints diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 0c95a459ed..0cb1cae248 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -1,6 +1,6 @@ +import {atoms} from '#/alf/atoms' import * as tokens from '#/alf/tokens' import type {Mutable} from '#/alf/types' -import {atoms} from '#/alf/atoms' import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration' export type ThemeName = 'light' | 'dim' | 'dark' diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index b1468f461d..6062e954ca 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -1,8 +1,8 @@ import { BLUE_HUE, - RED_HUE, - GREEN_HUE, generateScale, + GREEN_HUE, + RED_HUE, } from '#/alf/util/colorGeneration' export const scale = generateScale(6, 100) diff --git a/src/alf/types.ts b/src/alf/types.ts index dd8d816d2b..f4f1a5c440 100644 --- a/src/alf/types.ts +++ b/src/alf/types.ts @@ -1,4 +1,4 @@ -import {StyleProp, ViewStyle, TextStyle} from 'react-native' +import {StyleProp, TextStyle, ViewStyle} from 'react-native' type LiteralToCommon = T extends number ? number diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts index 4f8921bf9b..ba947a5712 100644 --- a/src/alf/util/useColorModeTheme.ts +++ b/src/alf/util/useColorModeTheme.ts @@ -1,10 +1,10 @@ +import * as SystemUI from 'expo-system-ui' +import {isWeb} from 'platform/detection' import React from 'react' import {ColorSchemeName, useColorScheme} from 'react-native' - import {useThemePrefs} from 'state/shell' -import {isWeb} from 'platform/detection' -import {ThemeName, light, dark, dim} from '#/alf/themes' -import * as SystemUI from 'expo-system-ui' + +import {dark, dim, light, ThemeName} from '#/alf/themes' export function useColorModeTheme(): ThemeName { const colorScheme = useColorScheme() diff --git a/src/components/Button.tsx b/src/components/Button.tsx index d3bf73cc3e..cbf9210f51 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,19 +1,19 @@ import React from 'react' import { - Pressable, - Text, - PressableProps, - TextProps, - ViewStyle, AccessibilityProps, - View, - TextStyle, - StyleSheet, + Pressable, + PressableProps, StyleProp, + StyleSheet, + Text, + TextProps, + TextStyle, + View, + ViewStyle, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {useTheme, atoms as a, tokens, android, flatten} from '#/alf' +import {android, atoms as a, flatten, tokens, useTheme} from '#/alf' import {Props as SVGIconProps} from '#/components/icons/common' export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts index 859f8edd77..06d238b508 100644 --- a/src/components/Dialog/context.ts +++ b/src/components/Dialog/context.ts @@ -1,11 +1,11 @@ import React from 'react' -import {useDialogStateContext} from '#/state/dialogs' import { DialogContextProps, DialogControlRefProps, DialogOuterProps, } from '#/components/Dialog/types' +import {useDialogStateContext} from '#/state/dialogs' export const Context = React.createContext({ close: () => {}, diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index f0e7b7e82b..fdd43675ea 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,5 +1,3 @@ -import React, {useImperativeHandle} from 'react' -import {View, Dimensions, Keyboard, Pressable} from 'react-native' import BottomSheet, { BottomSheetBackdropProps, BottomSheetScrollView, @@ -8,23 +6,24 @@ import BottomSheet, { useBottomSheet, WINDOW_HEIGHT, } from '@gorhom/bottom-sheet' -import {useSafeAreaInsets} from 'react-native-safe-area-context' +import React, {useImperativeHandle} from 'react' +import {Dimensions, Keyboard, Pressable, View} from 'react-native' import Animated, {useAnimatedStyle} from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {useTheme, atoms as a, flatten} from '#/alf' -import {Portal} from '#/components/Portal' +import {atoms as a, flatten, useTheme} from '#/alf' +import {Context} from '#/components/Dialog/context' +import { + DialogControlProps, + DialogInnerProps, + DialogOuterProps, +} from '#/components/Dialog/types' import {createInput} from '#/components/forms/TextField' +import {Portal} from '#/components/Portal' import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' -import { - DialogOuterProps, - DialogControlProps, - DialogInnerProps, -} from '#/components/Dialog/types' -import {Context} from '#/components/Dialog/context' - -export {useDialogControl, useDialogContext} from '#/components/Dialog/context' +export {useDialogContext, useDialogControl} from '#/components/Dialog/context' export * from '#/components/Dialog/types' // @ts-ignore export const Input = createInput(BottomSheetTextInput) diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 3a7f73342d..997bf77c1a 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -1,20 +1,19 @@ -import React, {useImperativeHandle} from 'react' -import {View, TouchableWithoutFeedback} from 'react-native' -import {FocusScope} from '@tamagui/focus-scope' -import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {FocusScope} from '@tamagui/focus-scope' +import React, {useImperativeHandle} from 'react' +import {TouchableWithoutFeedback, View} from 'react-native' +import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated' -import {useTheme, atoms as a, useBreakpoints, web, flatten} from '#/alf' -import {Portal} from '#/components/Portal' - -import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types' -import {Context} from '#/components/Dialog/context' +import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf' import {Button, ButtonIcon} from '#/components/Button' +import {Context} from '#/components/Dialog/context' +import {DialogInnerProps, DialogOuterProps} from '#/components/Dialog/types' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import {Portal} from '#/components/Portal' import {useDialogStateControlContext} from '#/state/dialogs' -export {useDialogControl, useDialogContext} from '#/components/Dialog/context' +export {useDialogContext, useDialogControl} from '#/components/Dialog/context' export * from '#/components/Dialog/types' export {Input} from '#/components/forms/TextField' diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts index 4fc60ec394..d847631744 100644 --- a/src/components/Dialog/types.ts +++ b/src/components/Dialog/types.ts @@ -1,6 +1,6 @@ +import {BottomSheetProps} from '@gorhom/bottom-sheet' import React from 'react' import type {AccessibilityProps} from 'react-native' -import {BottomSheetProps} from '@gorhom/bottom-sheet' import {ViewStyleProp} from '#/alf' diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index 24e2789e50..ff0bbb0451 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,6 +1,7 @@ import React from 'react' import {View} from 'react-native' -import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf' + +import {atoms as a, flatten, useTheme, ViewStyleProp} from '#/alf' export function Divider({style}: ViewStyleProp) { const t = useTheme() diff --git a/src/components/IconCircle.tsx b/src/components/IconCircle.tsx index aa779e37f3..b8b52615a8 100644 --- a/src/components/IconCircle.tsx +++ b/src/components/IconCircle.tsx @@ -2,14 +2,14 @@ import React from 'react' import {View} from 'react-native' import { - useTheme, atoms as a, - ViewStyleProp, - TextStyleProp, flatten, + TextStyleProp, + useTheme, + ViewStyleProp, } from '#/alf' -import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' import {Props} from '#/components/icons/common' +import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' export function IconCircle({ icon: Icon, diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 00e6a56f42..74e75e99c0 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,23 +1,23 @@ +import {sanitizeUrl} from '@braintree/sanitize-url' +import {StackActions, useLinkProps} from '@react-navigation/native' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' import React from 'react' import {GestureResponderEvent} from 'react-native' -import {useLinkProps, StackActions} from '@react-navigation/native' -import {sanitizeUrl} from '@braintree/sanitize-url' +import {useOpenLink} from 'state/preferences/in-app-browser' -import {useInteractionState} from '#/components/hooks/useInteractionState' -import {isWeb} from '#/platform/detection' -import {useTheme, web, flatten, TextStyleProp, atoms as a} from '#/alf' +import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf' import {Button, ButtonProps} from '#/components/Button' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import {Text, TextProps} from '#/components/Typography' import {AllNavigatorParams} from '#/lib/routes/types' import { convertBskyAppUrlIfNeeded, isExternalUrl, linkRequiresWarning, } from '#/lib/strings/url-helpers' -import {useModalControls} from '#/state/modals' +import {isWeb} from '#/platform/detection' import {router} from '#/routes' -import {Text, TextProps} from '#/components/Typography' -import {useOpenLink} from 'state/preferences/in-app-browser' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' +import {useModalControls} from '#/state/modals' /** * Only available within a `Link`, since that inherits from `Button`. diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx index bb0d247971..38bcf8577b 100644 --- a/src/components/Lists.tsx +++ b/src/components/Lists.tsx @@ -1,15 +1,16 @@ +import {Trans} from '@lingui/macro' +import {StackActions} from '@react-navigation/native' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' +import {cleanError} from 'lib/strings/errors' import React from 'react' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {View} from 'react-native' import {CenteredView} from 'view/com/util/Views' -import {Loader} from '#/components/Loader' -import {Trans} from '@lingui/macro' -import {cleanError} from 'lib/strings/errors' + +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button} from '#/components/Button' +import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import {StackActions} from '@react-navigation/native' import {router} from '#/routes' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' export function ListFooter({ isFetching, diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx index b9f399f953..e0b3be6373 100644 --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -1,13 +1,13 @@ import React from 'react' import Animated, { Easing, - useSharedValue, useAnimatedStyle, + useSharedValue, withRepeat, withTiming, } from 'react-native-reanimated' -import {atoms as a, useTheme, flatten} from '#/alf' +import {atoms as a, flatten, useTheme} from '#/alf' import {Props, useCommonSVGProps} from '#/components/icons/common' import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader' diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 9be9dd86bf..7dd95502e7 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,25 +1,24 @@ -import React from 'react' -import {View, Pressable, ViewStyle, StyleProp} from 'react-native' -import flattenReactChildren from 'react-keyed-flatten-children' - -import {atoms as a, useTheme} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {useInteractionState} from '#/components/hooks/useInteractionState' -import {Text} from '#/components/Typography' - -import {Context} from '#/components/Menu/context' -import { - ContextType, - TriggerProps, - ItemProps, - GroupProps, - ItemTextProps, - ItemIconProps, -} from '#/components/Menu/types' -import {Button, ButtonText} from '#/components/Button' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {isNative} from 'platform/detection' +import React from 'react' +import flattenReactChildren from 'react-keyed-flatten-children' +import {Pressable, StyleProp, View, ViewStyle} from 'react-native' + +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import {Context} from '#/components/Menu/context' +import { + ContextType, + GroupProps, + ItemIconProps, + ItemProps, + ItemTextProps, + TriggerProps, +} from '#/components/Menu/types' +import {Text} from '#/components/Typography' export {useDialogControl as useMenuControl} from '#/components/Dialog' diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index 2004ee7c6b..314769934b 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -1,24 +1,23 @@ /* eslint-disable react/prop-types */ -import React from 'react' -import {View, Pressable, ViewStyle, StyleProp} from 'react-native' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import React from 'react' +import {Pressable, StyleProp, View, ViewStyle} from 'react-native' +import {atoms as a, flatten, useTheme, web} from '#/alf' import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' -import {atoms as a, useTheme, flatten, web} from '#/alf' -import {Text} from '#/components/Typography' - +import {Context} from '#/components/Menu/context' import { ContextType, - TriggerProps, - ItemProps, GroupProps, - ItemTextProps, ItemIconProps, + ItemProps, + ItemTextProps, RadixPassThroughTriggerProps, + TriggerProps, } from '#/components/Menu/types' -import {Context} from '#/components/Menu/context' +import {Text} from '#/components/Typography' export function useMenuControl(): Dialog.DialogControlProps { const id = React.useId() diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts index 7d04a33441..729a004d8d 100644 --- a/src/components/Menu/types.ts +++ b/src/components/Menu/types.ts @@ -1,13 +1,13 @@ import React from 'react' import { + AccessibilityProps, GestureResponderEvent, PressableProps, - AccessibilityProps, } from 'react-native' -import {Props as SVGIconProps} from '#/components/icons/common' -import * as Dialog from '#/components/Dialog' import {TextStyleProp, ViewStyleProp} from '#/alf' +import * as Dialog from '#/components/Dialog' +import {Props as SVGIconProps} from '#/components/icons/common' export type ContextType = { control: Dialog.DialogOuterProps['control'] diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 3b245c440f..84a0c47f1b 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -1,13 +1,12 @@ -import React from 'react' -import {View, PressableProps} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import React from 'react' +import {PressableProps, View} from 'react-native' -import {useTheme, atoms as a, useBreakpoints} from '#/alf' -import {Text} from '#/components/Typography' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button} from '#/components/Button' - import * as Dialog from '#/components/Dialog' +import {Text} from '#/components/Typography' export {useDialogControl as usePromptControl} from '#/components/Dialog' diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index 1a14415cf8..d40b4d21ca 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -1,15 +1,15 @@ -import React from 'react' -import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api' -import {useLingui} from '@lingui/react' +import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api' import {msg} from '@lingui/macro' - -import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf' -import {InlineLink} from '#/components/Link' -import {Text, TextProps} from '#/components/Typography' +import {useLingui} from '@lingui/react' import {toShortUrl} from 'lib/strings/url-helpers' -import {TagMenu, useTagMenuControl} from '#/components/TagMenu' -import {isNative} from '#/platform/detection' +import React from 'react' + +import {atoms as a, flatten, native, TextStyleProp, useTheme, web} from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' +import {InlineLink} from '#/components/Link' +import {TagMenu, useTagMenuControl} from '#/components/TagMenu' +import {Text, TextProps} from '#/components/Typography' +import {isNative} from '#/platform/detection' const WORD_WRAP = {wordWrap: 1} diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx index 849a3f42d1..0c1e48b6ed 100644 --- a/src/components/TagMenu/index.tsx +++ b/src/components/TagMenu/index.tsx @@ -1,27 +1,27 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' import React from 'react' import {View} from 'react-native' -import {useNavigation} from '@react-navigation/native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' import {atoms as a, native, useTheme} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {Text} from '#/components/Typography' import {Button, ButtonText} from '#/components/Button' -import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' -import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' -import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' +import * as Dialog from '#/components/Dialog' import {Divider} from '#/components/Divider' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' +import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' +import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' import {Link} from '#/components/Link' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' import {makeSearchLink} from '#/lib/routes/links' import {NavigationProp} from '#/lib/routes/types' +import {isInvalidHandle} from '#/lib/strings/handles' import { usePreferencesQuery, - useUpsertMutedWordsMutation, useRemoveMutedWordMutation, + useUpsertMutedWordsMutation, } from '#/state/queries/preferences' -import {Loader} from '#/components/Loader' -import {isInvalidHandle} from '#/lib/strings/handles' export function useTagMenuControl() { return Dialog.useDialogControl() diff --git a/src/components/TagMenu/index.web.tsx b/src/components/TagMenu/index.web.tsx index 8245bd0191..b8a44d6c09 100644 --- a/src/components/TagMenu/index.web.tsx +++ b/src/components/TagMenu/index.web.tsx @@ -1,20 +1,20 @@ -import React from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import React from 'react' -import {isInvalidHandle} from '#/lib/strings/handles' -import {EventStopper} from '#/view/com/util/EventStopper' -import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown' -import {NavigationProp} from '#/lib/routes/types' -import { - usePreferencesQuery, - useUpsertMutedWordsMutation, - useRemoveMutedWordMutation, -} from '#/state/queries/preferences' -import {enforceLen} from '#/lib/strings/helpers' import {web} from '#/alf' import * as Dialog from '#/components/Dialog' +import {NavigationProp} from '#/lib/routes/types' +import {isInvalidHandle} from '#/lib/strings/handles' +import {enforceLen} from '#/lib/strings/helpers' +import { + usePreferencesQuery, + useRemoveMutedWordMutation, + useUpsertMutedWordsMutation, +} from '#/state/queries/preferences' +import {EventStopper} from '#/view/com/util/EventStopper' +import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown' export function useTagMenuControl(): Dialog.DialogControlProps { return { diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index 5268e7f468..e7db94e5ce 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -1,8 +1,8 @@ import React from 'react' -import {Text as RNText, TextStyle, TextProps as RNTextProps} from 'react-native' +import {Text as RNText, TextProps as RNTextProps, TextStyle} from 'react-native' import {UITextView} from 'react-native-ui-text-view' -import {useTheme, atoms, web, flatten} from '#/alf' +import {atoms, flatten, useTheme, web} from '#/alf' import {isIOS, isNative} from '#/platform/detection' export type TextProps = RNTextProps & { diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index 5f23a78838..4dedbdf855 100644 --- a/src/components/dialogs/MutedWords.tsx +++ b/src/components/dialogs/MutedWords.tsx @@ -1,37 +1,36 @@ -import React from 'react' -import {Keyboard, View} from 'react-native' +import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api' +import React from 'react' +import {Keyboard, View} from 'react-native' -import { - usePreferencesQuery, - useUpsertMutedWordsMutation, - useRemoveMutedWordMutation, -} from '#/state/queries/preferences' -import {isNative} from '#/platform/detection' import { atoms as a, - useTheme, + native, useBreakpoints, + useTheme, ViewStyleProp, web, - native, } from '#/alf' -import {Text} from '#/components/Typography' import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import * as Dialog from '#/components/Dialog' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' +import {Divider} from '#/components/Divider' +import * as Toggle from '#/components/forms/Toggle' import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText' -import {Divider} from '#/components/Divider' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {Loader} from '#/components/Loader' -import {logger} from '#/logger' -import * as Dialog from '#/components/Dialog' -import * as Toggle from '#/components/forms/Toggle' import * as Prompt from '#/components/Prompt' - -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' +import {Text} from '#/components/Typography' +import {logger} from '#/logger' +import {isNative} from '#/platform/detection' +import { + usePreferencesQuery, + useRemoveMutedWordMutation, + useUpsertMutedWordsMutation, +} from '#/state/queries/preferences' export function MutedWordsDialog() { const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext() diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index 451810a5ea..2a93ba8830 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -1,19 +1,18 @@ +import {isAndroid} from 'platform/detection' import React from 'react' -import {View, Pressable} from 'react-native' - -import {useTheme, atoms} from '#/alf' -import {Text} from '#/components/Typography' -import {useInteractionState} from '#/components/hooks/useInteractionState' -import * as TextField from '#/components/forms/TextField' -import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {Pressable, View} from 'react-native' +import DatePicker from 'react-native-date-picker' +import {atoms, useTheme} from '#/alf' import {DateFieldProps} from '#/components/forms/DateField/types' import { localizeDate, toSimpleDateString, } from '#/components/forms/DateField/utils' -import DatePicker from 'react-native-date-picker' -import {isAndroid} from 'platform/detection' +import * as TextField from '#/components/forms/TextField' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {Text} from '#/components/Typography' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index 49e47a01e3..9bd1c7b813 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,12 +1,12 @@ import React from 'react' import {View} from 'react-native' - -import {useTheme, atoms} from '#/alf' -import * as TextField from '#/components/forms/TextField' -import {toSimpleDateString} from '#/components/forms/DateField/utils' -import {DateFieldProps} from '#/components/forms/DateField/types' import DatePicker from 'react-native-date-picker' +import {atoms, useTheme} from '#/alf' +import {DateFieldProps} from '#/components/forms/DateField/types' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import * as TextField from '#/components/forms/TextField' + export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx index 32f38a5d16..1c89cbae93 100644 --- a/src/components/forms/DateField/index.web.tsx +++ b/src/components/forms/DateField/index.web.tsx @@ -1,11 +1,11 @@ import React from 'react' -import {TextInput, TextInputProps, StyleSheet} from 'react-native' +import {StyleSheet, TextInput, TextInputProps} from 'react-native' // @ts-ignore import {unstable_createElement} from 'react-native-web' -import * as TextField from '#/components/forms/TextField' -import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import * as TextField from '#/components/forms/TextField' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index b37f4bfae9..648be035bc 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -1,19 +1,19 @@ +import {HITSLOP_20} from 'lib/constants' import React from 'react' import { - View, + AccessibilityProps, + StyleSheet, TextInput, TextInputProps, TextStyle, + View, ViewStyle, - StyleSheet, - AccessibilityProps, } from 'react-native' -import {HITSLOP_20} from 'lib/constants' -import {useTheme, atoms as a, web, android} from '#/alf' -import {Text} from '#/components/Typography' +import {android, atoms as a, useTheme, web} from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' import {Props as SVGIconProps} from '#/components/icons/common' +import {Text} from '#/components/Typography' const Context = React.createContext<{ inputRef: React.RefObject | null diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index a83f92a2a6..3846b8812e 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -1,11 +1,11 @@ +import {HITSLOP_10} from 'lib/constants' import React from 'react' import {Pressable, View, ViewStyle} from 'react-native' -import {HITSLOP_10} from 'lib/constants' -import {useTheme, atoms as a, web, native, flatten, ViewStyleProp} from '#/alf' -import {Text} from '#/components/Typography' +import {atoms as a, flatten, native, useTheme, ViewStyleProp, web} from '#/alf' import {useInteractionState} from '#/components/hooks/useInteractionState' import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check' +import {Text} from '#/components/Typography' export type ItemState = { name: string diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index 7e1bd70b99..718f238dac 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -1,10 +1,9 @@ import React from 'react' -import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native' - -import {atoms as a, useTheme, native} from '#/alf' -import {Text} from '#/components/Typography' +import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native' +import {atoms as a, native, useTheme} from '#/alf' import * as Toggle from '#/components/forms/Toggle' +import {Text} from '#/components/Typography' export type ItemProps = Omit & AccessibilityProps & diff --git a/src/components/icons/TEMPLATE.tsx b/src/components/icons/TEMPLATE.tsx index 9fc1470375..f49c4280bb 100644 --- a/src/components/icons/TEMPLATE.tsx +++ b/src/components/icons/TEMPLATE.tsx @@ -1,7 +1,7 @@ import React from 'react' import Svg, {Path} from 'react-native-svg' -import {useCommonSVGProps, Props} from '#/components/icons/common' +import {Props, useCommonSVGProps} from '#/components/icons/common' export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef( function LogoImpl(props: Props, ref) { diff --git a/src/components/icons/common.ts b/src/components/icons/common.ts index 9e9f15c4dd..669c157f51 100644 --- a/src/components/icons/common.ts +++ b/src/components/icons/common.ts @@ -1,5 +1,5 @@ import {StyleSheet, TextProps} from 'react-native' -import type {SvgProps, PathProps} from 'react-native-svg' +import type {PathProps, SvgProps} from 'react-native-svg' import {tokens} from '#/alf' diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx index 63e2beeb11..a042521619 100644 --- a/src/lib/ThemeContext.tsx +++ b/src/lib/ThemeContext.tsx @@ -1,8 +1,10 @@ -import React, {ReactNode, createContext, useContext} from 'react' +import React, {createContext, ReactNode, useContext} from 'react' import {TextStyle, ViewStyle} from 'react-native' -import {darkTheme, defaultTheme, dimTheme} from './themes' + import {ThemeName} from '#/alf/themes' +import {darkTheme, defaultTheme, dimTheme} from './themes' + export type ColorScheme = 'light' | 'dark' export type PaletteColorName = diff --git a/src/lib/__tests__/moderatePost_wrapped.test.ts b/src/lib/__tests__/moderatePost_wrapped.test.ts index 45566281af..d876106600 100644 --- a/src/lib/__tests__/moderatePost_wrapped.test.ts +++ b/src/lib/__tests__/moderatePost_wrapped.test.ts @@ -1,5 +1,5 @@ -import {describe, it, expect} from '@jest/globals' import {RichText} from '@atproto/api' +import {describe, expect, it} from '@jest/globals' import {hasMutedWord} from '../moderatePost_wrapped' diff --git a/src/lib/analytics/analytics.tsx b/src/lib/analytics/analytics.tsx index a0cc7cd6e8..c27a4fb702 100644 --- a/src/lib/analytics/analytics.tsx +++ b/src/lib/analytics/analytics.tsx @@ -1,13 +1,14 @@ -import React from 'react' -import {AppState, AppStateStatus} from 'react-native' import AsyncStorage from '@react-native-async-storage/async-storage' import {createClient, SegmentClient} from '@segment/analytics-react-native' import {sha256} from 'js-sha256' +import React from 'react' +import {AppState, AppStateStatus} from 'react-native' import {Native} from 'sentry-expo' -import {useSession, SessionAccount} from '#/state/session' -import {ScreenPropertiesMap, TrackPropertiesMap} from './types' import {logger} from '#/logger' +import {SessionAccount, useSession} from '#/state/session' + +import {ScreenPropertiesMap, TrackPropertiesMap} from './types' type AppInfo = { build?: string | undefined diff --git a/src/lib/analytics/analytics.web.tsx b/src/lib/analytics/analytics.web.tsx index 72b28f9c0f..21975bc572 100644 --- a/src/lib/analytics/analytics.web.tsx +++ b/src/lib/analytics/analytics.web.tsx @@ -1,11 +1,12 @@ -import React from 'react' import {createClient} from '@segment/analytics-react' import {sha256} from 'js-sha256' +import React from 'react' import {Browser} from 'sentry-expo' -import {ScreenPropertiesMap, TrackPropertiesMap} from './types' -import {useSession, SessionAccount} from '#/state/session' import {logger} from '#/logger' +import {SessionAccount, useSession} from '#/state/session' + +import {ScreenPropertiesMap, TrackPropertiesMap} from './types' type SegmentClient = ReturnType diff --git a/src/lib/api/api-polyfill.ts b/src/lib/api/api-polyfill.ts index ea1d975985..a0245839a5 100644 --- a/src/lib/api/api-polyfill.ts +++ b/src/lib/api/api-polyfill.ts @@ -1,4 +1,4 @@ -import {BskyAgent, stringifyLex, jsonToLex} from '@atproto/api' +import {BskyAgent, jsonToLex, stringifyLex} from '@atproto/api' import RNFS from 'react-native-fs' const GET_TIMEOUT = 15e3 // 15s diff --git a/src/lib/api/feed-manip.ts b/src/lib/api/feed-manip.ts index 227062592b..26eea80a1b 100644 --- a/src/lib/api/feed-manip.ts +++ b/src/lib/api/feed-manip.ts @@ -1,11 +1,12 @@ import { + AppBskyEmbedRecord, + AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, - AppBskyEmbedRecordWithMedia, - AppBskyEmbedRecord, } from '@atproto/api' -import {ReasonFeedSource} from './feed/types' + import {isPostInLanguage} from '../../locale/helpers' +import {ReasonFeedSource} from './feed/types' type FeedViewPost = AppBskyFeedDefs.FeedViewPost export type FeedTunerFn = ( diff --git a/src/lib/api/feed/author.ts b/src/lib/api/feed/author.ts index 57db061b33..60bb23603b 100644 --- a/src/lib/api/feed/author.ts +++ b/src/lib/api/feed/author.ts @@ -2,9 +2,11 @@ import { AppBskyFeedDefs, AppBskyFeedGetAuthorFeed as GetAuthorFeed, } from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' + import {getAgent} from '#/state/session' +import {FeedAPI, FeedAPIResponse} from './types' + export class AuthorFeedAPI implements FeedAPI { constructor(public params: GetAuthorFeed.QueryParams) {} diff --git a/src/lib/api/feed/custom.ts b/src/lib/api/feed/custom.ts index 41c5367e57..cb7e7e66aa 100644 --- a/src/lib/api/feed/custom.ts +++ b/src/lib/api/feed/custom.ts @@ -2,9 +2,11 @@ import { AppBskyFeedDefs, AppBskyFeedGetFeed as GetCustomFeed, } from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' -import {getAgent} from '#/state/session' + import {getContentLanguages} from '#/state/preferences/languages' +import {getAgent} from '#/state/session' + +import {FeedAPI, FeedAPIResponse} from './types' export class CustomFeedAPI implements FeedAPI { constructor(public params: GetCustomFeed.QueryParams) {} diff --git a/src/lib/api/feed/following.ts b/src/lib/api/feed/following.ts index 24389b5edc..95f0a70903 100644 --- a/src/lib/api/feed/following.ts +++ b/src/lib/api/feed/following.ts @@ -1,7 +1,9 @@ import {AppBskyFeedDefs} from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' + import {getAgent} from '#/state/session' +import {FeedAPI, FeedAPIResponse} from './types' + export class FollowingFeedAPI implements FeedAPI { constructor() {} diff --git a/src/lib/api/feed/home.ts b/src/lib/api/feed/home.ts index 436a66d076..f12dab7b69 100644 --- a/src/lib/api/feed/home.ts +++ b/src/lib/api/feed/home.ts @@ -1,9 +1,11 @@ import {AppBskyFeedDefs} from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' -import {FollowingFeedAPI} from './following' -import {CustomFeedAPI} from './custom' + import {PROD_DEFAULT_FEED} from '#/lib/constants' +import {CustomFeedAPI} from './custom' +import {FollowingFeedAPI} from './following' +import {FeedAPI, FeedAPIResponse} from './types' + // HACK // the feed API does not include any facilities for passing down // non-post elements. adding that is a bit of a heavy lift, and we diff --git a/src/lib/api/feed/likes.ts b/src/lib/api/feed/likes.ts index 2b0afdf11e..95697e5d76 100644 --- a/src/lib/api/feed/likes.ts +++ b/src/lib/api/feed/likes.ts @@ -2,9 +2,11 @@ import { AppBskyFeedDefs, AppBskyFeedGetActorLikes as GetActorLikes, } from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' + import {getAgent} from '#/state/session' +import {FeedAPI, FeedAPIResponse} from './types' + export class LikesFeedAPI implements FeedAPI { constructor(public params: GetActorLikes.QueryParams) {} diff --git a/src/lib/api/feed/list.ts b/src/lib/api/feed/list.ts index 19f2ff177c..1b0b259cf3 100644 --- a/src/lib/api/feed/list.ts +++ b/src/lib/api/feed/list.ts @@ -2,9 +2,11 @@ import { AppBskyFeedDefs, AppBskyFeedGetListFeed as GetListFeed, } from '@atproto/api' -import {FeedAPI, FeedAPIResponse} from './types' + import {getAgent} from '#/state/session' +import {FeedAPI, FeedAPIResponse} from './types' + export class ListFeedAPI implements FeedAPI { constructor(public params: GetListFeed.QueryParams) {} diff --git a/src/lib/api/feed/merge.ts b/src/lib/api/feed/merge.ts index 28bf143cbb..49210afed0 100644 --- a/src/lib/api/feed/merge.ts +++ b/src/lib/api/feed/merge.ts @@ -1,14 +1,16 @@ import {AppBskyFeedDefs, AppBskyFeedGetTimeline} from '@atproto/api' -import shuffle from 'lodash.shuffle' -import {timeout} from 'lib/async/timeout' import {bundleAsync} from 'lib/async/bundle' +import {timeout} from 'lib/async/timeout' import {feedUriToHref} from 'lib/strings/url-helpers' -import {FeedTuner} from '../feed-manip' -import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types' -import {FeedParams} from '#/state/queries/post-feed' -import {FeedTunerFn} from '../feed-manip' -import {getAgent} from '#/state/session' +import shuffle from 'lodash.shuffle' + import {getContentLanguages} from '#/state/preferences/languages' +import {FeedParams} from '#/state/queries/post-feed' +import {getAgent} from '#/state/session' + +import {FeedTuner} from '../feed-manip' +import {FeedTunerFn} from '../feed-manip' +import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types' const REQUEST_WAIT_MS = 500 // 500ms const POST_AGE_CUTOFF = 60e3 * 60 * 24 // 24hours diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 5fb7fe50e6..178554d735 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -1,6 +1,6 @@ import { - AppBskyEmbedImages, AppBskyEmbedExternal, + AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedThreadgate, @@ -12,13 +12,15 @@ import { } from '@atproto/api' import {AtUri} from '@atproto/api' import {isNetworkError} from 'lib/strings/errors' -import {LinkMeta} from '../link-meta/link-meta' +import {shortenLinks} from 'lib/strings/rich-text-manip' import {isWeb} from 'platform/detection' import {ImageModel} from 'state/models/media/image' -import {shortenLinks} from 'lib/strings/rich-text-manip' + import {logger} from '#/logger' import {ThreadgateSetting} from '#/state/queries/threadgate' +import {LinkMeta} from '../link-meta/link-meta' + export interface ExternalEmbedDraft { uri: string isLoading: boolean diff --git a/src/lib/app-info.ts b/src/lib/app-info.ts index 3f026d3fe6..f6b4932c37 100644 --- a/src/lib/app-info.ts +++ b/src/lib/app-info.ts @@ -1,5 +1,5 @@ -import VersionNumber from 'react-native-version-number' import * as Updates from 'expo-updates' +import VersionNumber from 'react-native-version-number' export const updateChannel = Updates.channel export const appVersion = `${VersionNumber.appVersion} (${VersionNumber.buildVersion})` diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts index a758987b20..2904f1cc36 100644 --- a/src/lib/embeds.ts +++ b/src/lib/embeds.ts @@ -1,7 +1,7 @@ import { - AppBskyFeedDefs, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyFeedDefs, } from '@atproto/api' export function isEmbedByEmbedder( diff --git a/src/lib/hooks/useAccountSwitcher.ts b/src/lib/hooks/useAccountSwitcher.ts index 74b5674d5a..478ce538a5 100644 --- a/src/lib/hooks/useAccountSwitcher.ts +++ b/src/lib/hooks/useAccountSwitcher.ts @@ -1,11 +1,11 @@ import {useCallback} from 'react' -import {isWeb} from '#/platform/detection' import {useAnalytics} from '#/lib/analytics/analytics' -import {useSessionApi, SessionAccount} from '#/state/session' -import * as Toast from '#/view/com/util/Toast' -import {useCloseAllActiveElements} from '#/state/util' +import {isWeb} from '#/platform/detection' +import {SessionAccount, useSessionApi} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' +import * as Toast from '#/view/com/util/Toast' export function useAccountSwitcher() { const {track} = useAnalytics() diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts index 98e05a8ce6..7f8a99506a 100644 --- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts +++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts @@ -1,4 +1,4 @@ -import {useRef, useEffect} from 'react' +import {useEffect, useRef} from 'react' import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated' export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = ( diff --git a/src/lib/hooks/useCustomPalette.ts b/src/lib/hooks/useCustomPalette.ts index 4f8f5c8368..a069c7ce88 100644 --- a/src/lib/hooks/useCustomPalette.ts +++ b/src/lib/hooks/useCustomPalette.ts @@ -1,6 +1,6 @@ -import React from 'react' -import {useTheme} from 'lib/ThemeContext' import {choose} from 'lib/functions' +import {useTheme} from 'lib/ThemeContext' +import React from 'react' export function useCustomPalette({light, dark}: {light: T; dark: T}) { const theme = useTheme() diff --git a/src/lib/hooks/useDraggableScrollView.ts b/src/lib/hooks/useDraggableScrollView.ts index b0f7465d79..ea48ac1dcd 100644 --- a/src/lib/hooks/useDraggableScrollView.ts +++ b/src/lib/hooks/useDraggableScrollView.ts @@ -1,7 +1,7 @@ -import {useEffect, useRef, useMemo, ForwardedRef} from 'react' -import {Platform, findNodeHandle} from 'react-native' -import type {ScrollView} from 'react-native' import {mergeRefs} from 'lib/merge-refs' +import {ForwardedRef, useEffect, useMemo, useRef} from 'react' +import type {ScrollView} from 'react-native' +import {findNodeHandle, Platform} from 'react-native' type Props = { cursor?: string diff --git a/src/lib/hooks/useIntentHandler.ts b/src/lib/hooks/useIntentHandler.ts index 8741530b50..34f645d7ff 100644 --- a/src/lib/hooks/useIntentHandler.ts +++ b/src/lib/hooks/useIntentHandler.ts @@ -1,8 +1,8 @@ -import React from 'react' import * as Linking from 'expo-linking' import {isNative} from 'platform/detection' -import {useComposerControls} from 'state/shell' +import React from 'react' import {useSession} from 'state/session' +import {useComposerControls} from 'state/shell' import {useCloseAllActiveElements} from 'state/util' type IntentType = 'compose' diff --git a/src/lib/hooks/useIsKeyboardVisible.ts b/src/lib/hooks/useIsKeyboardVisible.ts index 38fc80bde1..391090f2d1 100644 --- a/src/lib/hooks/useIsKeyboardVisible.ts +++ b/src/lib/hooks/useIsKeyboardVisible.ts @@ -1,6 +1,6 @@ -import {useState, useEffect} from 'react' -import {Keyboard} from 'react-native' import {isIOS} from 'platform/detection' +import {useEffect, useState} from 'react' +import {Keyboard} from 'react-native' export function useIsKeyboardVisible({ iosUseWillEvents, diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx index e81fc434fe..071d876831 100644 --- a/src/lib/hooks/useMinimalShellMode.tsx +++ b/src/lib/hooks/useMinimalShellMode.tsx @@ -1,4 +1,5 @@ import {interpolate, useAnimatedStyle} from 'react-native-reanimated' + import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode' import {useShellLayout} from '#/state/shell/shell-layout' diff --git a/src/lib/hooks/useNavigationDeduped.ts b/src/lib/hooks/useNavigationDeduped.ts index d913f7f3d0..99efad6105 100644 --- a/src/lib/hooks/useNavigationDeduped.ts +++ b/src/lib/hooks/useNavigationDeduped.ts @@ -1,9 +1,9 @@ -import React from 'react' import {useNavigation} from '@react-navigation/core' -import {AllNavigatorParams, NavigationProp} from 'lib/routes/types' -import type {NavigationAction} from '@react-navigation/routers' import {NavigationState} from '@react-navigation/native' +import type {NavigationAction} from '@react-navigation/routers' import {useDedupe} from 'lib/hooks/useDedupe' +import {AllNavigatorParams, NavigationProp} from 'lib/routes/types' +import React from 'react' export type DebouncedNavigationProp = Pick< NavigationProp, diff --git a/src/lib/hooks/useOTAUpdate.ts b/src/lib/hooks/useOTAUpdate.ts index 53eab300e7..9bfc998a6a 100644 --- a/src/lib/hooks/useOTAUpdate.ts +++ b/src/lib/hooks/useOTAUpdate.ts @@ -1,9 +1,10 @@ +import {t} from '@lingui/macro' import * as Updates from 'expo-updates' import {useCallback, useEffect} from 'react' import {AppState} from 'react-native' + import {logger} from '#/logger' import {useModalControls} from '#/state/modals' -import {t} from '@lingui/macro' export function useOTAUpdate() { const {openModal} = useModalControls() diff --git a/src/lib/hooks/usePalette.ts b/src/lib/hooks/usePalette.ts index eeb43d0b1f..2530642f60 100644 --- a/src/lib/hooks/usePalette.ts +++ b/src/lib/hooks/usePalette.ts @@ -1,6 +1,7 @@ import {useMemo} from 'react' import {TextStyle, ViewStyle} from 'react-native' -import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext' + +import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext' export interface UsePaletteValue { colors: PaletteColor diff --git a/src/lib/hooks/usePermissions.ts b/src/lib/hooks/usePermissions.ts index 138f3eacab..28693ea71d 100644 --- a/src/lib/hooks/usePermissions.ts +++ b/src/lib/hooks/usePermissions.ts @@ -1,7 +1,7 @@ import {Camera} from 'expo-camera' import * as MediaLibrary from 'expo-media-library' -import {Linking} from 'react-native' import {isWeb} from 'platform/detection' +import {Linking} from 'react-native' import {Alert} from 'view/com/util/Alert' const openPermissionAlert = (perm: string) => { diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts index 129023f717..d88830a89c 100644 --- a/src/lib/hooks/useSetTitle.ts +++ b/src/lib/hooks/useSetTitle.ts @@ -1,8 +1,8 @@ -import {useEffect} from 'react' import {useNavigation} from '@react-navigation/native' - import {NavigationProp} from 'lib/routes/types' import {bskyTitle} from 'lib/strings/headings' +import {useEffect} from 'react' + import {useUnreadNotifications} from '#/state/queries/notifications/unread' export function useSetTitle(title?: string) { diff --git a/src/lib/hooks/useTabFocusEffect.ts b/src/lib/hooks/useTabFocusEffect.ts index e446084c5a..5f53350457 100644 --- a/src/lib/hooks/useTabFocusEffect.ts +++ b/src/lib/hooks/useTabFocusEffect.ts @@ -1,6 +1,6 @@ -import {useEffect, useState} from 'react' import {useNavigation} from '@react-navigation/native' import {getTabState, TabState} from 'lib/routes/helpers' +import {useEffect, useState} from 'react' export function useTabFocusEffect( tabName: string, diff --git a/src/lib/hooks/useToggleMutationQueue.ts b/src/lib/hooks/useToggleMutationQueue.ts index 28ae861424..c4b86d3253 100644 --- a/src/lib/hooks/useToggleMutationQueue.ts +++ b/src/lib/hooks/useToggleMutationQueue.ts @@ -1,4 +1,4 @@ -import {useState, useRef, useEffect, useCallback} from 'react' +import {useCallback, useEffect, useRef, useState} from 'react' type Task = { isOn: boolean diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts index 585f193f1f..790ddce630 100644 --- a/src/lib/hooks/useWebBodyScrollLock.ts +++ b/src/lib/hooks/useWebBodyScrollLock.ts @@ -1,4 +1,5 @@ import {useEffect} from 'react' + import {isWeb} from '#/platform/detection' let refCount = 0 diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx index 71a96a89b1..45b7b6c589 100644 --- a/src/lib/hooks/useWebMediaQueries.tsx +++ b/src/lib/hooks/useWebMediaQueries.tsx @@ -1,5 +1,5 @@ -import {useMediaQuery} from 'react-responsive' import {isNative} from 'platform/detection' +import {useMediaQuery} from 'react-responsive' export function useWebMediaQueries() { const isDesktop = useMediaQuery({minWidth: 1300}) diff --git a/src/lib/hooks/useWebScrollRestoration.ts b/src/lib/hooks/useWebScrollRestoration.ts index f68fbf0f2f..5a44024940 100644 --- a/src/lib/hooks/useWebScrollRestoration.ts +++ b/src/lib/hooks/useWebScrollRestoration.ts @@ -1,5 +1,5 @@ -import {useMemo, useState, useEffect} from 'react' import {EventArg, useNavigation} from '@react-navigation/core' +import {useEffect, useMemo, useState} from 'react' if ('scrollRestoration' in history) { // Tell the brower not to mess with the scroll. diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 7ae88806f7..eb8214019b 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -1,6 +1,6 @@ import React from 'react' import {StyleProp, TextStyle, ViewStyle} from 'react-native' -import Svg, {Path, Rect, Line, Ellipse} from 'react-native-svg' +import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' export function GridIcon({ style, diff --git a/src/lib/link-meta/bsky.ts b/src/lib/link-meta/bsky.ts index c1fbb34b3c..1c8b28d9b9 100644 --- a/src/lib/link-meta/bsky.ts +++ b/src/lib/link-meta/bsky.ts @@ -1,11 +1,13 @@ import {AppBskyFeedPost, BskyAgent} from '@atproto/api' import * as apilib from 'lib/api/index' -import {LikelyType, LinkMeta} from './link-meta' +import {ComposerOptsQuote} from 'state/shell/composer' + +import {useFetchDid} from '#/state/queries/handle' +import {useGetPost} from '#/state/queries/post' + // import {match as matchRoute} from 'view/routes' import {convertBskyAppUrlIfNeeded, makeRecordUri} from '../strings/url-helpers' -import {ComposerOptsQuote} from 'state/shell/composer' -import {useGetPost} from '#/state/queries/post' -import {useFetchDid} from '#/state/queries/handle' +import {LikelyType, LinkMeta} from './link-meta' // TODO // import {Home} from 'view/screens/Home' diff --git a/src/lib/link-meta/link-meta.ts b/src/lib/link-meta/link-meta.ts index fa951432e8..0f5230479e 100644 --- a/src/lib/link-meta/link-meta.ts +++ b/src/lib/link-meta/link-meta.ts @@ -1,9 +1,10 @@ import {BskyAgent} from '@atproto/api' -import {isBskyAppUrl} from '../strings/url-helpers' -import {extractBskyMeta} from './bsky' import {LINK_META_PROXY} from 'lib/constants' import {getGiphyMetaUri} from 'lib/strings/embed-player' +import {isBskyAppUrl} from '../strings/url-helpers' +import {extractBskyMeta} from './bsky' + export enum LikelyType { HTML, Text, diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index 4ea95ea237..cab032313d 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -1,5 +1,5 @@ -import {Image} from 'react-native' import type {Dimensions} from 'lib/media/types' +import {Image} from 'react-native' const sizes: Map = new Map() const activeRequests: Map> = new Map() diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts index a681627e67..20cca745b9 100644 --- a/src/lib/media/manip.ts +++ b/src/lib/media/manip.ts @@ -1,13 +1,14 @@ -import RNFetchBlob from 'rn-fetch-blob' import ImageResizer from '@bam.tech/react-native-image-resizer' -import {Image as RNImage, Share as RNShare} from 'react-native' -import {Image} from 'react-native-image-crop-picker' -import * as RNFS from 'react-native-fs' -import uuid from 'react-native-uuid' -import * as Sharing from 'expo-sharing' import * as MediaLibrary from 'expo-media-library' -import {Dimensions} from './types' +import * as Sharing from 'expo-sharing' import {isAndroid, isIOS} from 'platform/detection' +import {Image as RNImage, Share as RNShare} from 'react-native' +import * as RNFS from 'react-native-fs' +import {Image} from 'react-native-image-crop-picker' +import uuid from 'react-native-uuid' +import RNFetchBlob from 'rn-fetch-blob' + +import {Dimensions} from './types' export async function compressIfNeeded( img: Image, diff --git a/src/lib/media/manip.web.ts b/src/lib/media/manip.web.ts index 522aa2e51b..8b63f9e5fe 100644 --- a/src/lib/media/manip.web.ts +++ b/src/lib/media/manip.web.ts @@ -1,6 +1,7 @@ -import {Dimensions} from './types' import {Image as RNImage} from 'react-native-image-crop-picker' -import {getDataUriSize, blobToDataUri} from './util' + +import {Dimensions} from './types' +import {blobToDataUri, getDataUriSize} from './util' export async function compressIfNeeded( img: RNImage, diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx index d7b6080417..08ee91b74f 100644 --- a/src/lib/media/picker.e2e.tsx +++ b/src/lib/media/picker.e2e.tsx @@ -1,7 +1,8 @@ -import {Image as RNImage} from 'react-native-image-crop-picker' import RNFS from 'react-native-fs' -import {CropperOptions} from './types' +import {Image as RNImage} from 'react-native-image-crop-picker' + import {compressIfNeeded} from './manip' +import {CropperOptions} from './types' let _imageCounter = 0 async function getFile() { diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts index 8bade34e25..d00c2b8a61 100644 --- a/src/lib/media/picker.shared.ts +++ b/src/lib/media/picker.shared.ts @@ -3,9 +3,10 @@ import { launchImageLibraryAsync, MediaTypeOptions, } from 'expo-image-picker' -import {getDataUriSize} from './util' import * as Toast from 'view/com/util/Toast' +import {getDataUriSize} from './util' + export async function openPicker(opts?: ImagePickerOptions) { const response = await launchImageLibraryAsync({ exif: false, diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx index bf531c9814..37e01e67f9 100644 --- a/src/lib/media/picker.tsx +++ b/src/lib/media/picker.tsx @@ -1,8 +1,9 @@ import { + Image as RNImage, openCamera as openCameraFn, openCropper as openCropperFn, - Image as RNImage, } from 'react-native-image-crop-picker' + import {CameraOpts, CropperOptions} from './types' export {openPicker} from './picker.shared' diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx index 995a0c95f9..7e2562e297 100644 --- a/src/lib/media/picker.web.tsx +++ b/src/lib/media/picker.web.tsx @@ -1,7 +1,8 @@ /// -import {CameraOpts, CropperOptions} from './types' import {Image as RNImage} from 'react-native-image-crop-picker' + +import {CameraOpts, CropperOptions} from './types' export {openPicker} from './picker.shared' import {unstable__openModal} from '#/state/modals' diff --git a/src/lib/moderatePost_wrapped.ts b/src/lib/moderatePost_wrapped.ts index 9f6fa9c076..566e46a050 100644 --- a/src/lib/moderatePost_wrapped.ts +++ b/src/lib/moderatePost_wrapped.ts @@ -1,12 +1,12 @@ import { + AppBskyActorDefs, + AppBskyEmbedExternal, + AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, - moderatePost, - AppBskyActorDefs, AppBskyFeedPost, AppBskyRichtextFacet, - AppBskyEmbedImages, - AppBskyEmbedExternal, + moderatePost, } from '@atproto/api' type ModeratePost = typeof moderatePost diff --git a/src/lib/moderation.ts b/src/lib/moderation.ts index b6ebb47a02..3f8a032194 100644 --- a/src/lib/moderation.ts +++ b/src/lib/moderation.ts @@ -1,4 +1,4 @@ -import {ModerationCause, ProfileModeration, PostModeration} from '@atproto/api' +import {ModerationCause, PostModeration, ProfileModeration} from '@atproto/api' export interface ModerationCauseDescription { name: string diff --git a/src/lib/notifications/notifications.ts b/src/lib/notifications/notifications.ts index 62d0bfc4b1..146bd98538 100644 --- a/src/lib/notifications/notifications.ts +++ b/src/lib/notifications/notifications.ts @@ -1,12 +1,14 @@ -import * as Notifications from 'expo-notifications' import {QueryClient} from '@tanstack/react-query' -import {resetToTab} from '../../Navigation' -import {devicePlatform, isIOS} from 'platform/detection' +import * as Notifications from 'expo-notifications' import {track} from 'lib/analytics/analytics' +import {devicePlatform, isIOS} from 'platform/detection' + import {logger} from '#/logger' import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed' import {truncateAndInvalidate} from '#/state/queries/util' -import {SessionAccount, getAgent} from '#/state/session' +import {getAgent, SessionAccount} from '#/state/session' + +import {resetToTab} from '../../Navigation' const SERVICE_DID = (serviceUrl?: string) => serviceUrl?.includes('staging') diff --git a/src/lib/react-query.ts b/src/lib/react-query.ts index 7fe3fe7a47..94a09c9419 100644 --- a/src/lib/react-query.ts +++ b/src/lib/react-query.ts @@ -1,5 +1,6 @@ +import {focusManager, QueryClient} from '@tanstack/react-query' import {AppState, AppStateStatus} from 'react-native' -import {QueryClient, focusManager} from '@tanstack/react-query' + import {isNative} from '#/platform/detection' focusManager.setEventListener(onFocus => { diff --git a/src/lib/routes/helpers.ts b/src/lib/routes/helpers.ts index 0da8850433..03302da1ac 100644 --- a/src/lib/routes/helpers.ts +++ b/src/lib/routes/helpers.ts @@ -1,5 +1,6 @@ import {NavigationProp} from '@react-navigation/native' -import {State, RouteParams} from './types' + +import {RouteParams, State} from './types' export function getRootNavigation( nav: NavigationProp, diff --git a/src/lib/routes/router.ts b/src/lib/routes/router.ts index 8c8be37397..45f9c85fdb 100644 --- a/src/lib/routes/router.ts +++ b/src/lib/routes/router.ts @@ -1,4 +1,4 @@ -import {RouteParams, Route} from './types' +import {Route, RouteParams} from './types' export class Router { routes: [string, Route][] = [] diff --git a/src/lib/sentry.ts b/src/lib/sentry.ts index d0a5fe0fd5..1120c389f1 100644 --- a/src/lib/sentry.ts +++ b/src/lib/sentry.ts @@ -3,9 +3,9 @@ * avoid future conflicts and/or circular deps */ +import * as info from 'expo-updates' import {Platform} from 'react-native' import app from 'react-native-version-number' -import * as info from 'expo-updates' import {init} from 'sentry-expo' /** diff --git a/src/lib/sharing.ts b/src/lib/sharing.ts index 9f402f8737..6c45e46cf8 100644 --- a/src/lib/sharing.ts +++ b/src/lib/sharing.ts @@ -1,9 +1,10 @@ -import {isIOS, isAndroid} from 'platform/detection' // import * as Sharing from 'expo-sharing' import Clipboard from '@react-native-clipboard/clipboard' -import * as Toast from '../view/com/util/Toast' +import {isAndroid, isIOS} from 'platform/detection' import {Share} from 'react-native' +import * as Toast from '../view/com/util/Toast' + /** * This function shares a URL using the native Share API if available, or copies it to the clipboard * and displays a toast message if not (mostly on web) diff --git a/src/lib/statsig/statsig.tsx b/src/lib/statsig/statsig.tsx index 6d9ebeb099..c9e497af0c 100644 --- a/src/lib/statsig/statsig.tsx +++ b/src/lib/statsig/statsig.tsx @@ -1,11 +1,12 @@ +import {sha256} from 'js-sha256' import React from 'react' import { Statsig, StatsigProvider, useGate as useStatsigGate, } from 'statsig-react-native-expo' + import {useSession} from '../../state/session' -import {sha256} from 'js-sha256' const statsigOptions = { environment: { diff --git a/src/lib/statsig/statsig.web.tsx b/src/lib/statsig/statsig.web.tsx index d1c9120194..c9cc56b6df 100644 --- a/src/lib/statsig/statsig.web.tsx +++ b/src/lib/statsig/statsig.web.tsx @@ -1,11 +1,12 @@ +import {sha256} from 'js-sha256' import React from 'react' import { Statsig, StatsigProvider, useGate as useStatsigGate, } from 'statsig-react' + import {useSession} from '../../state/session' -import {sha256} from 'js-sha256' const statsigOptions = { environment: { diff --git a/src/lib/strings/display-names.ts b/src/lib/strings/display-names.ts index 75383dd4fd..e5eb4cfe59 100644 --- a/src/lib/strings/display-names.ts +++ b/src/lib/strings/display-names.ts @@ -1,4 +1,5 @@ import {ModerationUI} from '@atproto/api' + import {describeModerationCause} from '../moderation' // \u2705 = ✅ diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts index 1cf3b12937..2ef6efdf12 100644 --- a/src/lib/strings/embed-player.ts +++ b/src/lib/strings/embed-player.ts @@ -1,5 +1,5 @@ -import {Dimensions} from 'react-native' import {isWeb} from 'platform/detection' +import {Dimensions} from 'react-native' const {height: SCREEN_HEIGHT} = Dimensions.get('window') export const embedPlayerSources = [ diff --git a/src/lib/strings/rich-text-helpers.ts b/src/lib/strings/rich-text-helpers.ts index 662004599b..54f0733d0c 100644 --- a/src/lib/strings/rich-text-helpers.ts +++ b/src/lib/strings/rich-text-helpers.ts @@ -1,4 +1,5 @@ import {AppBskyRichtextFacet, RichText} from '@atproto/api' + import {linkRequiresWarning} from './url-helpers' export function richTextToString(rt: RichText, loose: boolean): string { diff --git a/src/lib/strings/rich-text-manip.ts b/src/lib/strings/rich-text-manip.ts index d9cd8c0714..508e0772e0 100644 --- a/src/lib/strings/rich-text-manip.ts +++ b/src/lib/strings/rich-text-manip.ts @@ -1,4 +1,5 @@ import {RichText, UnicodeString} from '@atproto/api' + import {toShortUrl} from './url-helpers' export function shortenLinks(rt: RichText): RichText { diff --git a/src/lib/strings/url-helpers.ts b/src/lib/strings/url-helpers.ts index 820311e4ee..60d5f3cbb3 100644 --- a/src/lib/strings/url-helpers.ts +++ b/src/lib/strings/url-helpers.ts @@ -1,7 +1,7 @@ import {AtUri} from '@atproto/api' import {BSKY_SERVICE} from 'lib/constants' -import TLDs from 'tlds' import psl from 'psl' +import TLDs from 'tlds' export const BSKY_APP_HOST = 'https://bsky.app' diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 263127440f..50755f53df 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -1,6 +1,7 @@ -import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' -import {Theme, TypographyVariant} from './ThemeContext' import {isWeb} from 'platform/detection' +import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' + +import {Theme, TypographyVariant} from './ThemeContext' // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest export const colors = { diff --git a/src/lib/themes.ts b/src/lib/themes.ts index bd75aabea6..4fb1184009 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -1,8 +1,9 @@ import {Platform} from 'react-native' -import type {Theme} from './ThemeContext' -import {colors} from './styles' -import {darkPalette, lightPalette, dimPalette} from '#/alf/themes' +import {darkPalette, dimPalette, lightPalette} from '#/alf/themes' + +import {colors} from './styles' +import type {Theme} from './ThemeContext' export const defaultTheme: Theme = { colorScheme: 'light', diff --git a/src/locale/__tests__/helpers.test.ts b/src/locale/__tests__/helpers.test.ts index 5e924c9fe8..0cc0b7816e 100644 --- a/src/locale/__tests__/helpers.test.ts +++ b/src/locale/__tests__/helpers.test.ts @@ -1,4 +1,4 @@ -import {test, expect} from '@jest/globals' +import {expect, test} from '@jest/globals' import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {AppLanguage} from '#/locale/languages' diff --git a/src/locale/helpers.ts b/src/locale/helpers.ts index c73242e707..54b05cb687 100644 --- a/src/locale/helpers.ts +++ b/src/locale/helpers.ts @@ -1,7 +1,8 @@ import {AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api' +import * as bcp47Match from 'bcp-47-match' import lande from 'lande' import {hasProp} from 'lib/type-guards' -import * as bcp47Match from 'bcp-47-match' + import { AppLanguage, LANGUAGES_MAP_CODE2, diff --git a/src/locale/i18n.ts b/src/locale/i18n.ts index e8addb0b4f..310f17a10c 100644 --- a/src/locale/i18n.ts +++ b/src/locale/i18n.ts @@ -1,23 +1,22 @@ -import {useEffect} from 'react' import {i18n} from '@lingui/core' +import {useEffect} from 'react' -import {useLanguagePrefs} from '#/state/preferences' -import {messages as messagesEn} from '#/locale/locales/en/messages' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {AppLanguage} from '#/locale/languages' +import {messages as messagesCa} from '#/locale/locales/ca/messages' import {messages as messagesDe} from '#/locale/locales/de/messages' -import {messages as messagesId} from '#/locale/locales/id/messages' +import {messages as messagesEn} from '#/locale/locales/en/messages' import {messages as messagesEs} from '#/locale/locales/es/messages' import {messages as messagesFr} from '#/locale/locales/fr/messages' import {messages as messagesHi} from '#/locale/locales/hi/messages' +import {messages as messagesId} from '#/locale/locales/id/messages' +import {messages as messagesIt} from '#/locale/locales/it/messages' import {messages as messagesJa} from '#/locale/locales/ja/messages' import {messages as messagesKo} from '#/locale/locales/ko/messages' import {messages as messagesPt_BR} from '#/locale/locales/pt-BR/messages' import {messages as messagesUk} from '#/locale/locales/uk/messages' -import {messages as messagesCa} from '#/locale/locales/ca/messages' import {messages as messagesZh_CN} from '#/locale/locales/zh-CN/messages' -import {messages as messagesIt} from '#/locale/locales/it/messages' - -import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {AppLanguage} from '#/locale/languages' +import {useLanguagePrefs} from '#/state/preferences' /** * We do a dynamic import of just the catalog that we need diff --git a/src/locale/i18n.web.ts b/src/locale/i18n.web.ts index d8e51723ff..ce0c640fe7 100644 --- a/src/locale/i18n.web.ts +++ b/src/locale/i18n.web.ts @@ -1,9 +1,9 @@ -import {useEffect} from 'react' import {i18n} from '@lingui/core' +import {useEffect} from 'react' -import {useLanguagePrefs} from '#/state/preferences' import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {AppLanguage} from '#/locale/languages' +import {useLanguagePrefs} from '#/state/preferences' /** * We do a dynamic import of just the catalog that we need diff --git a/src/locale/i18nProvider.tsx b/src/locale/i18nProvider.tsx index 3766f5b716..645c0fc6a7 100644 --- a/src/locale/i18nProvider.tsx +++ b/src/locale/i18nProvider.tsx @@ -1,6 +1,7 @@ -import React from 'react' -import {I18nProvider as DefaultI18nProvider} from '@lingui/react' import {i18n} from '@lingui/core' +import {I18nProvider as DefaultI18nProvider} from '@lingui/react' +import React from 'react' + import {useLocaleLanguage} from './i18n' export default function I18nProvider({children}: {children: React.ReactNode}) { diff --git a/src/logger/__tests__/logger.test.ts b/src/logger/__tests__/logger.test.ts index 12d60abaac..5c3f7d8248 100644 --- a/src/logger/__tests__/logger.test.ts +++ b/src/logger/__tests__/logger.test.ts @@ -1,5 +1,5 @@ +import {beforeAll, describe, expect, jest, test} from '@jest/globals' import {nanoid} from 'nanoid/non-secure' -import {jest, describe, expect, test, beforeAll} from '@jest/globals' import {Native as Sentry} from 'sentry-expo' import {Logger, LogLevel, sentryTransport} from '#/logger' diff --git a/src/logger/index.ts b/src/logger/index.ts index d6d8d9fc1d..c9e323db6d 100644 --- a/src/logger/index.ts +++ b/src/logger/index.ts @@ -1,10 +1,10 @@ import format from 'date-fns/format' import {nanoid} from 'nanoid/non-secure' -import {Sentry} from '#/logger/sentry' import * as env from '#/env' import {DebugContext} from '#/logger/debugContext' import {add} from '#/logger/logDump' +import {Sentry} from '#/logger/sentry' export enum LogLevel { Debug = 'debug', diff --git a/src/platform/detection.ts b/src/platform/detection.ts index 150fc1fe33..891377568f 100644 --- a/src/platform/detection.ts +++ b/src/platform/detection.ts @@ -1,6 +1,6 @@ -import {Platform} from 'react-native' import {getLocales} from 'expo-localization' import {dedupArray} from 'lib/functions' +import {Platform} from 'react-native' export const isIOS = Platform.OS === 'ios' export const isAndroid = Platform.OS === 'android' diff --git a/src/platform/urls.tsx b/src/platform/urls.tsx index fd844d9331..514bde43e2 100644 --- a/src/platform/urls.tsx +++ b/src/platform/urls.tsx @@ -1,4 +1,5 @@ import {Linking} from 'react-native' + import {isNative, isWeb} from './detection' export async function getInitialURL(): Promise { diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx index f4c2014750..44b6bfb86b 100644 --- a/src/screens/Deactivated.tsx +++ b/src/screens/Deactivated.tsx @@ -1,19 +1,19 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {useOnboardingDispatch} from '#/state/shell' -import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session' -import {logger} from '#/logger' -import {pluralize} from '#/lib/strings/helpers' -import {atoms as a, useTheme, useBreakpoints} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Text, P} from '#/components/Typography' -import {isWeb} from '#/platform/detection' -import {ScrollView} from '#/view/com/util/Views' import {Loader} from '#/components/Loader' +import {P, Text} from '#/components/Typography' +import {pluralize} from '#/lib/strings/helpers' +import {logger} from '#/logger' +import {isWeb} from '#/platform/detection' +import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session' +import {useOnboardingDispatch} from '#/state/shell' +import {ScrollView} from '#/view/com/util/Views' import {Logo} from '#/view/icons/Logo' const COL_WIDTH = 400 diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index 776cc585e3..d890fe1da4 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -1,28 +1,29 @@ +import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {HITSLOP_10} from 'lib/constants' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' +import {CommonNavigatorParams} from 'lib/routes/types' +import {shareUrl} from 'lib/sharing' +import {sanitizeHandle} from 'lib/strings/handles' +import {enforceLen} from 'lib/strings/helpers' +import {isNative} from 'platform/detection' import React from 'react' import {ListRenderItemInfo, Pressable} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {useSetMinimalShellMode} from 'state/shell' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {CommonNavigatorParams} from 'lib/routes/types' import {useSearchPostsQuery} from 'state/queries/search-posts' +import {useSetMinimalShellMode} from 'state/shell' import {Post} from 'view/com/post/Post' -import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' -import {enforceLen} from 'lib/strings/helpers' +import {List} from 'view/com/util/List' +import {ViewHeader} from 'view/com/util/ViewHeader' + +import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' import { ListFooter, ListHeaderDesktop, ListMaybePlaceholder, } from '#/components/Lists' -import {List} from 'view/com/util/List' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {sanitizeHandle} from 'lib/strings/handles' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' -import {shareUrl} from 'lib/sharing' -import {HITSLOP_10} from 'lib/constants' -import {isNative} from 'platform/detection' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const renderItem = ({item}: ListRenderItemInfo) => { return diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index 6337cee09d..e9c834c45f 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -1,29 +1,27 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' - -import {IS_DEV} from '#/env' -import {isWeb} from '#/platform/detection' -import {useOnboardingDispatch} from '#/state/shell' import { - useTheme, atoms as a, - useBreakpoints, - web, - native, flatten, + native, TextStyleProp, + useBreakpoints, + useTheme, + web, } from '#/alf' -import {P, leading, Text} from '#/components/Typography' -import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Button, ButtonIcon} from '#/components/Button' -import {ScrollView} from '#/view/com/util/Views' +import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {createPortalGroup} from '#/components/Portal' - +import {leading, P, Text} from '#/components/Typography' +import {IS_DEV} from '#/env' +import {isWeb} from '#/platform/detection' import {Context} from '#/screens/Onboarding/state' +import {useOnboardingDispatch} from '#/state/shell' +import {ScrollView} from '#/view/com/util/Views' const COL_WIDTH = 500 diff --git a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx index 1123f26755..7ed193ed3d 100644 --- a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx +++ b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx @@ -1,18 +1,17 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' import React from 'react' import {View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {Image} from 'expo-image' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {useTheme, atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import * as Toggle from '#/components/forms/Toggle' -import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' -import {Text} from '#/components/Typography' -import {RichText} from '#/components/RichText' - import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {RichText} from '#/components/RichText' +import {Text} from '#/components/Typography' import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds' +import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' function PrimaryFeedCardInner({ feed, diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx index 1a4e4c493b..50436e7681 100644 --- a/src/screens/Onboarding/StepAlgoFeeds/index.tsx +++ b/src/screens/Onboarding/StepAlgoFeeds/index.tsx @@ -1,26 +1,25 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {IS_PROD} from '#/env' import {atoms as a, tokens, useTheme} from '#/alf' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Toggle from '#/components/forms/Toggle' -import {Text} from '#/components/Typography' -import {Loader} from '#/components/Loader' +import {IconCircle} from '#/components/IconCircle' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' +import {IS_PROD} from '#/env' import {useAnalytics} from '#/lib/analytics/analytics' - -import {Context} from '#/screens/Onboarding/state' import { - Title, Description, OnboardingControls, + Title, } from '#/screens/Onboarding/Layout' +import {Context} from '#/screens/Onboarding/state' import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard' -import {IconCircle} from '#/components/IconCircle' export type FeedConfig = { default: boolean diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx index 944dcb96d2..f23b1ac7b4 100644 --- a/src/screens/Onboarding/StepFinished.tsx +++ b/src/screens/Onboarding/StepFinished.tsx @@ -1,33 +1,32 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {logger} from '#/logger' import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonText, ButtonIcon} from '#/components/Button' -import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {IconCircle} from '#/components/IconCircle' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' +import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2' -import {Text} from '#/components/Typography' -import {useOnboardingDispatch} from '#/state/shell' import {Loader} from '#/components/Loader' -import {useSetSaveFeedsMutation} from '#/state/queries/preferences' -import {getAgent} from '#/state/session' +import {Text} from '#/components/Typography' import {useAnalytics} from '#/lib/analytics/analytics' - -import {Context} from '#/screens/Onboarding/state' +import {logger} from '#/logger' import { - Title, Description, OnboardingControls, + Title, } from '#/screens/Onboarding/Layout' -import {IconCircle} from '#/components/IconCircle' +import {Context} from '#/screens/Onboarding/state' import { bulkWriteFollows, sortPrimaryAlgorithmFeeds, } from '#/screens/Onboarding/util' +import {useSetSaveFeedsMutation} from '#/state/queries/preferences' +import {getAgent} from '#/state/session' +import {useOnboardingDispatch} from '#/state/shell' export function StepFinished() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepFollowingFeed.tsx b/src/screens/Onboarding/StepFollowingFeed.tsx index 898afad134..5b8c49264d 100644 --- a/src/screens/Onboarding/StepFollowingFeed.tsx +++ b/src/screens/Onboarding/StepFollowingFeed.tsx @@ -1,28 +1,27 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' - -import {atoms as a} from '#/alf' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Text} from '#/components/Typography' -import {Divider} from '#/components/Divider' -import * as Toggle from '#/components/forms/Toggle' -import {useAnalytics} from '#/lib/analytics/analytics' - -import {Context} from '#/screens/Onboarding/state' -import { - Title, - Description, - OnboardingControls, -} from '#/screens/Onboarding/Layout' import { usePreferencesQuery, useSetFeedViewPreferencesMutation, } from 'state/queries/preferences' + +import {atoms as a} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Divider} from '#/components/Divider' +import * as Toggle from '#/components/forms/Toggle' import {IconCircle} from '#/components/IconCircle' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' +import {Text} from '#/components/Typography' +import {useAnalytics} from '#/lib/analytics/analytics' +import { + Description, + OnboardingControls, + Title, +} from '#/screens/Onboarding/Layout' +import {Context} from '#/screens/Onboarding/state' export function StepFollowingFeed() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepInterests/InterestButton.tsx b/src/screens/Onboarding/StepInterests/InterestButton.tsx index cc692dafd8..94685f3e18 100644 --- a/src/screens/Onboarding/StepInterests/InterestButton.tsx +++ b/src/screens/Onboarding/StepInterests/InterestButton.tsx @@ -1,11 +1,10 @@ import React from 'react' -import {View, ViewStyle, TextStyle} from 'react-native' +import {TextStyle, View, ViewStyle} from 'react-native' -import {useTheme, atoms as a, native} from '#/alf' +import {atoms as a, native, useTheme} from '#/alf' import * as Toggle from '#/components/forms/Toggle' import {Text} from '#/components/Typography' import {capitalize} from '#/lib/strings/capitalize' - import {Context} from '#/screens/Onboarding/state' export function InterestButton({interest}: {interest: string}) { diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx index ea23b74f09..1b4ba30ff9 100644 --- a/src/screens/Onboarding/StepInterests/index.tsx +++ b/src/screens/Onboarding/StepInterests/index.tsx @@ -1,32 +1,31 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useQuery} from '@tanstack/react-query' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {useQuery} from '@tanstack/react-query' -import {logger} from '#/logger' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' -import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji' -import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise' import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Loader} from '#/components/Loader' import * as Toggle from '#/components/forms/Toggle' -import {getAgent} from '#/state/session' -import {useAnalytics} from '#/lib/analytics/analytics' +import {IconCircle} from '#/components/IconCircle' +import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji' +import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' +import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import {useOnboardingDispatch} from '#/state/shell' +import {useAnalytics} from '#/lib/analytics/analytics' import {capitalize} from '#/lib/strings/capitalize' - -import {Context, ApiResponseMap} from '#/screens/Onboarding/state' +import {logger} from '#/logger' import { - Title, Description, OnboardingControls, + Title, } from '#/screens/Onboarding/Layout' +import {ApiResponseMap, Context} from '#/screens/Onboarding/state' import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton' -import {IconCircle} from '#/components/IconCircle' +import {getAgent} from '#/state/session' +import {useOnboardingDispatch} from '#/state/shell' export function StepInterests() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx index 360025c02f..e97c251948 100644 --- a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx +++ b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx @@ -1,18 +1,18 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {UseMutateFunction} from '@tanstack/react-query' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {UseMutateFunction} from '@tanstack/react-query' -import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {logger} from '#/logger' -import {Text} from '#/components/Typography' import * as Toggle from '#/components/forms/Toggle' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import * as Prompt from '#/components/Prompt' +import {Text} from '#/components/Typography' +import {logger} from '#/logger' import {isIOS} from '#/platform/detection' +import {usePreferencesQuery} from '#/state/queries/preferences' +import * as Toast from '#/view/com/util/Toast' function Card({children}: React.PropsWithChildren<{}>) { const t = useTheme() diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx index c61b520bab..0ca317afc6 100644 --- a/src/screens/Onboarding/StepModeration/ModerationOption.tsx +++ b/src/screens/Onboarding/StepModeration/ModerationOption.tsx @@ -1,19 +1,19 @@ +import {LabelPreference} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {LabelPreference} from '@atproto/api' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated' +import Animated, {Easing, FadeIn, Layout} from 'react-native-reanimated' +import {atoms as a, useTheme} from '#/alf' +import * as ToggleButton from '#/components/forms/ToggleButton' +import {Text} from '#/components/Typography' import { CONFIGURABLE_LABEL_GROUPS, ConfigurableLabelGroup, usePreferencesQuery, usePreferencesSetContentLabelMutation, } from '#/state/queries/preferences' -import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' -import * as ToggleButton from '#/components/forms/ToggleButton' export function ModerationOption({ labelGroup, diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx index 543a5b1598..d74eed03b0 100644 --- a/src/screens/Onboarding/StepModeration/index.tsx +++ b/src/screens/Onboarding/StepModeration/index.tsx @@ -1,32 +1,31 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' import Animated, {Easing, Layout} from 'react-native-reanimated' - -import {atoms as a} from '#/alf' import { configurableAdultLabelGroups, configurableOtherLabelGroups, usePreferencesSetAdultContentMutation, } from 'state/queries/preferences' -import {Divider} from '#/components/Divider' + +import {atoms as a} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Divider} from '#/components/Divider' +import {IconCircle} from '#/components/IconCircle' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' -import {usePreferencesQuery} from '#/state/queries/preferences' import {Loader} from '#/components/Loader' import {useAnalytics} from '#/lib/analytics/analytics' - import { Description, OnboardingControls, Title, } from '#/screens/Onboarding/Layout' -import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption' -import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' import {Context} from '#/screens/Onboarding/state' -import {IconCircle} from '#/components/IconCircle' +import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' +import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption' +import {usePreferencesQuery} from '#/state/queries/preferences' function AnimatedDivider() { return ( diff --git a/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx index 0670058920..4f5595a29d 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx @@ -1,14 +1,14 @@ +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' import React from 'react' import {View, ViewStyle} from 'react-native' -import {AppBskyActorDefs, moderateProfile} from '@atproto/api' -import {useTheme, atoms as a, flatten} from '#/alf' -import {Text} from '#/components/Typography' +import {atoms as a, flatten, useTheme} from '#/alf' import {useItemContext} from '#/components/forms/Toggle' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' -import {UserAvatar} from '#/view/com/util/UserAvatar' -import {useModerationOpts} from '#/state/queries/preferences' import {RichText} from '#/components/RichText' +import {Text} from '#/components/Typography' +import {useModerationOpts} from '#/state/queries/preferences' +import {UserAvatar} from '#/view/com/util/UserAvatar' export function SuggestedAccountCard({ profile, diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx index 14faddc10f..eb051ac85d 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx @@ -1,33 +1,32 @@ +import {AppBskyActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {AppBskyActorDefs} from '@atproto/api' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' import {atoms as a, useBreakpoints} from '#/alf' -import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Text} from '#/components/Typography' -import {useProfilesQuery} from '#/state/queries/profile' -import {Loader} from '#/components/Loader' import * as Toggle from '#/components/forms/Toggle' -import {useModerationOpts} from '#/state/queries/preferences' +import {IconCircle} from '#/components/IconCircle' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {Loader} from '#/components/Loader' +import {Text} from '#/components/Typography' import {useAnalytics} from '#/lib/analytics/analytics' import {capitalize} from '#/lib/strings/capitalize' - -import {Context} from '#/screens/Onboarding/state' import { - Title, Description, OnboardingControls, + Title, } from '#/screens/Onboarding/Layout' +import {Context} from '#/screens/Onboarding/state' import { SuggestedAccountCard, SuggestedAccountCardPlaceholder, } from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard' import {aggregateInterestItems} from '#/screens/Onboarding/util' -import {IconCircle} from '#/components/IconCircle' +import {useModerationOpts} from '#/state/queries/preferences' +import {useProfilesQuery} from '#/state/queries/profile' export function Inner({ profiles, diff --git a/src/screens/Onboarding/StepTopicalFeeds.tsx b/src/screens/Onboarding/StepTopicalFeeds.tsx index 636565e340..88906b581e 100644 --- a/src/screens/Onboarding/StepTopicalFeeds.tsx +++ b/src/screens/Onboarding/StepTopicalFeeds.tsx @@ -1,28 +1,27 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {IS_PROD_SERVICE} from 'lib/constants' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' +import {useSession} from 'state/session' import {atoms as a} from '#/alf' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {ListMagnifyingGlass_Stroke2_Corner0_Rounded as ListMagnifyingGlass} from '#/components/icons/ListMagnifyingGlass' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Toggle from '#/components/forms/Toggle' +import {IconCircle} from '#/components/IconCircle' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {ListMagnifyingGlass_Stroke2_Corner0_Rounded as ListMagnifyingGlass} from '#/components/icons/ListMagnifyingGlass' import {Loader} from '#/components/Loader' import {useAnalytics} from '#/lib/analytics/analytics' import {capitalize} from '#/lib/strings/capitalize' - -import {Context} from '#/screens/Onboarding/state' import { - Title, Description, OnboardingControls, + Title, } from '#/screens/Onboarding/Layout' +import {Context} from '#/screens/Onboarding/state' import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard' import {aggregateInterestItems} from '#/screens/Onboarding/util' -import {IconCircle} from '#/components/IconCircle' -import {IS_PROD_SERVICE} from 'lib/constants' -import {useSession} from 'state/session' export function StepTopicalFeeds() { const {_} = useLingui() diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx index 9e5029e87a..d171869b87 100644 --- a/src/screens/Onboarding/index.tsx +++ b/src/screens/Onboarding/index.tsx @@ -1,18 +1,17 @@ -import React from 'react' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import React from 'react' import {Portal} from '#/components/Portal' - -import {Context, initialState, reducer} from '#/screens/Onboarding/state' import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout' -import {StepInterests} from '#/screens/Onboarding/StepInterests' -import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts' -import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed' +import {Context, initialState, reducer} from '#/screens/Onboarding/state' import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds' -import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds' import {StepFinished} from '#/screens/Onboarding/StepFinished' +import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed' +import {StepInterests} from '#/screens/Onboarding/StepInterests' import {StepModeration} from '#/screens/Onboarding/StepModeration' +import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts' +import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds' export function Onboarding() { const {_} = useLingui() diff --git a/src/screens/Onboarding/util.ts b/src/screens/Onboarding/util.ts index 1a0b8d21bc..ac2c50abdf 100644 --- a/src/screens/Onboarding/util.ts +++ b/src/screens/Onboarding/util.ts @@ -2,6 +2,7 @@ import {AppBskyGraphFollow, AppBskyGraphGetFollows} from '@atproto/api' import {until} from '#/lib/async/until' import {getAgent} from '#/state/session' + import {PRIMARY_FEEDS} from './StepAlgoFeeds' function shuffle(array: any) { diff --git a/src/state/cache/post-shadow.ts b/src/state/cache/post-shadow.ts index 7cf72fae43..f9d8b19958 100644 --- a/src/state/cache/post-shadow.ts +++ b/src/state/cache/post-shadow.ts @@ -1,13 +1,15 @@ -import {useEffect, useState, useMemo} from 'react' -import EventEmitter from 'eventemitter3' import {AppBskyFeedDefs} from '@atproto/api' +import EventEmitter from 'eventemitter3' +import {queryClient} from 'lib/react-query' +import {useEffect, useMemo, useState} from 'react' + import {batchedUpdates} from '#/lib/batchedUpdates' -import {Shadow, castAsShadow} from './types' + import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed' import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed' import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread' import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts' -import {queryClient} from 'lib/react-query' +import {castAsShadow, Shadow} from './types' export type {Shadow} from './types' export interface PostShadow { diff --git a/src/state/cache/profile-shadow.ts b/src/state/cache/profile-shadow.ts index 34fe5995d3..f688a7b4f7 100644 --- a/src/state/cache/profile-shadow.ts +++ b/src/state/cache/profile-shadow.ts @@ -1,7 +1,11 @@ -import {useEffect, useState, useMemo} from 'react' -import EventEmitter from 'eventemitter3' import {AppBskyActorDefs} from '@atproto/api' +import EventEmitter from 'eventemitter3' +import {queryClient} from 'lib/react-query' +import {useEffect, useMemo, useState} from 'react' + import {batchedUpdates} from '#/lib/batchedUpdates' + +import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search' import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members' import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts' import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts' @@ -11,9 +15,7 @@ import {findAllProfilesInQueryData as findAllProfilesInProfileQueryData} from '. import {findAllProfilesInQueryData as findAllProfilesInProfileFollowersQueryData} from '../queries/profile-followers' import {findAllProfilesInQueryData as findAllProfilesInProfileFollowsQueryData} from '../queries/profile-follows' import {findAllProfilesInQueryData as findAllProfilesInSuggestedFollowsQueryData} from '../queries/suggested-follows' -import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search' -import {Shadow, castAsShadow} from './types' -import {queryClient} from 'lib/react-query' +import {castAsShadow, Shadow} from './types' export type {Shadow} from './types' export interface ProfileShadow { diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx index 951105a509..279e02a49c 100644 --- a/src/state/dialogs/index.tsx +++ b/src/state/dialogs/index.tsx @@ -1,5 +1,6 @@ import React from 'react' import {SharedValue, useSharedValue} from 'react-native-reanimated' + import {DialogControlRefProps} from '#/components/Dialog' import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context' diff --git a/src/state/invites.tsx b/src/state/invites.tsx index 6a0d1b5900..9dbbefe2ff 100644 --- a/src/state/invites.tsx +++ b/src/state/invites.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['invites'] diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx index e3bddaee02..4a4f2807dc 100644 --- a/src/state/lightbox.tsx +++ b/src/state/lightbox.tsx @@ -1,5 +1,6 @@ -import React from 'react' import {AppBskyActorDefs} from '@atproto/api' +import React from 'react' + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' interface Lightbox { diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 691add0050..b9af874933 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -1,12 +1,13 @@ -import React from 'react' import {AppBskyActorDefs, AppBskyGraphDefs, ModerationUI} from '@atproto/api' +import React from 'react' import {StyleProp, ViewStyle} from 'react-native' import {Image as RNImage} from 'react-native-image-crop-picker' -import {ImageModel} from '#/state/models/media/image' -import {GalleryModel} from '#/state/models/media/gallery' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {EmbedPlayerSource} from '#/lib/strings/embed-player' +import {GalleryModel} from '#/state/models/media/gallery' +import {ImageModel} from '#/state/models/media/image' + import {ThreadgateSetting} from '../queries/threadgate' export interface ConfirmModal { diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts index 9c8c13010d..52fb623b01 100644 --- a/src/state/models/media/gallery.ts +++ b/src/state/models/media/gallery.ts @@ -1,8 +1,9 @@ -import {makeAutoObservable, runInAction} from 'mobx' -import {ImageModel} from './image' -import {Image as RNImage} from 'react-native-image-crop-picker' -import {openPicker} from 'lib/media/picker' import {getImageDim} from 'lib/media/manip' +import {openPicker} from 'lib/media/picker' +import {makeAutoObservable, runInAction} from 'mobx' +import {Image as RNImage} from 'react-native-image-crop-picker' + +import {ImageModel} from './image' interface InitialImageUri { uri: string diff --git a/src/state/models/media/image.e2e.ts b/src/state/models/media/image.e2e.ts index ccabd50475..d2c65bdf73 100644 --- a/src/state/models/media/image.e2e.ts +++ b/src/state/models/media/image.e2e.ts @@ -1,9 +1,9 @@ -import {Image as RNImage} from 'react-native-image-crop-picker' -import {makeAutoObservable} from 'mobx' -import {POST_IMG_MAX} from 'lib/constants' import {ActionCrop} from 'expo-image-manipulator' -import {Position} from 'react-avatar-editor' +import {POST_IMG_MAX} from 'lib/constants' import {Dimensions} from 'lib/media/types' +import {makeAutoObservable} from 'mobx' +import {Position} from 'react-avatar-editor' +import {Image as RNImage} from 'react-native-image-crop-picker' export interface ImageManipulationAttributes { aspectRatio?: '4:3' | '1:1' | '3:4' | 'None' diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts index 5c547c148f..31f2bba66d 100644 --- a/src/state/models/media/image.ts +++ b/src/state/models/media/image.ts @@ -1,13 +1,14 @@ -import {Image as RNImage} from 'react-native-image-crop-picker' -import {makeAutoObservable, runInAction} from 'mobx' -import {POST_IMG_MAX} from 'lib/constants' import * as ImageManipulator from 'expo-image-manipulator' -import {getDataUriSize} from 'lib/media/util' -import {openCropper} from 'lib/media/picker' import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator' -import {Position} from 'react-avatar-editor' +import {POST_IMG_MAX} from 'lib/constants' +import {openCropper} from 'lib/media/picker' import {Dimensions} from 'lib/media/types' +import {getDataUriSize} from 'lib/media/util' +import {makeAutoObservable, runInAction} from 'mobx' import {isIOS} from 'platform/detection' +import {Position} from 'react-avatar-editor' +import {Image as RNImage} from 'react-native-image-crop-picker' + import {logger} from '#/logger' export interface ImageManipulationAttributes { diff --git a/src/state/muted-threads.tsx b/src/state/muted-threads.tsx index 84a717eb79..eeb33e9483 100644 --- a/src/state/muted-threads.tsx +++ b/src/state/muted-threads.tsx @@ -1,6 +1,7 @@ import React from 'react' -import * as persisted from '#/state/persisted' + import {track} from '#/lib/analytics/analytics' +import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['mutedThreads'] type ToggleContext = (uri: string) => boolean diff --git a/src/state/persisted/__tests__/index.test.ts b/src/state/persisted/__tests__/index.test.ts index 90c5e0e4ec..6832d274af 100644 --- a/src/state/persisted/__tests__/index.test.ts +++ b/src/state/persisted/__tests__/index.test.ts @@ -1,10 +1,10 @@ -import {jest, expect, test, afterEach} from '@jest/globals' +import {afterEach, expect, jest, test} from '@jest/globals' import AsyncStorage from '@react-native-async-storage/async-storage' -import {defaults} from '#/state/persisted/schema' -import {migrate} from '#/state/persisted/legacy' -import * as store from '#/state/persisted/store' import * as persisted from '#/state/persisted' +import {migrate} from '#/state/persisted/legacy' +import {defaults} from '#/state/persisted/schema' +import * as store from '#/state/persisted/store' const write = jest.mocked(store.write) const read = jest.mocked(store.read) diff --git a/src/state/persisted/__tests__/migrate.test.ts b/src/state/persisted/__tests__/migrate.test.ts index 97767e2732..61250bd884 100644 --- a/src/state/persisted/__tests__/migrate.test.ts +++ b/src/state/persisted/__tests__/migrate.test.ts @@ -1,11 +1,11 @@ -import {jest, expect, test, afterEach} from '@jest/globals' +import {afterEach, expect, jest, test} from '@jest/globals' import AsyncStorage from '@react-native-async-storage/async-storage' -import {defaults, schema} from '#/state/persisted/schema' -import {transform, migrate} from '#/state/persisted/legacy' -import * as store from '#/state/persisted/store' import {logger} from '#/logger' import * as fixtures from '#/state/persisted/__tests__/fixtures' +import {migrate, transform} from '#/state/persisted/legacy' +import {defaults, schema} from '#/state/persisted/schema' +import * as store from '#/state/persisted/store' const write = jest.mocked(store.write) const read = jest.mocked(store.read) diff --git a/src/state/persisted/__tests__/schema.test.ts b/src/state/persisted/__tests__/schema.test.ts index c78a2c27cb..8bea28ec01 100644 --- a/src/state/persisted/__tests__/schema.test.ts +++ b/src/state/persisted/__tests__/schema.test.ts @@ -1,8 +1,8 @@ import {expect, test} from '@jest/globals' +import * as fixtures from '#/state/persisted/__tests__/fixtures' import {transform} from '#/state/persisted/legacy' import {defaults, schema} from '#/state/persisted/schema' -import * as fixtures from '#/state/persisted/__tests__/fixtures' test('defaults', () => { expect(() => schema.parse(defaults)).not.toThrow() diff --git a/src/state/persisted/index.ts b/src/state/persisted/index.ts index f57172d2fe..4e0aafd822 100644 --- a/src/state/persisted/index.ts +++ b/src/state/persisted/index.ts @@ -1,11 +1,12 @@ import EventEmitter from 'eventemitter3' -import {logger} from '#/logger' -import {defaults, Schema} from '#/state/persisted/schema' -import {migrate} from '#/state/persisted/legacy' -import * as store from '#/state/persisted/store' -import BroadcastChannel from '#/lib/broadcast' -export type {Schema, PersistedAccount} from '#/state/persisted/schema' +import BroadcastChannel from '#/lib/broadcast' +import {logger} from '#/logger' +import {migrate} from '#/state/persisted/legacy' +import {defaults, Schema} from '#/state/persisted/schema' +import * as store from '#/state/persisted/store' + +export type {PersistedAccount, Schema} from '#/state/persisted/schema' export {defaults} from '#/state/persisted/schema' const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL') diff --git a/src/state/persisted/legacy.ts b/src/state/persisted/legacy.ts index fd94a96a24..9918ac4629 100644 --- a/src/state/persisted/legacy.ts +++ b/src/state/persisted/legacy.ts @@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage' import {logger} from '#/logger' import {defaults, Schema, schema} from '#/state/persisted/schema' -import {write, read} from '#/state/persisted/store' +import {read, write} from '#/state/persisted/store' /** * The shape of the serialized data from our legacy Mobx store. diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 0aefaa4744..14328748eb 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -1,4 +1,5 @@ import {z} from 'zod' + import {deviceLocales} from '#/platform/detection' const externalEmbedOptions = ['show', 'hide'] as const diff --git a/src/state/persisted/store.ts b/src/state/persisted/store.ts index bb7fbed890..0971b5d717 100644 --- a/src/state/persisted/store.ts +++ b/src/state/persisted/store.ts @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage' -import {Schema, schema} from '#/state/persisted/schema' import {logger} from '#/logger' +import {Schema, schema} from '#/state/persisted/schema' const BSKY_STORAGE = 'BSKY_STORAGE' diff --git a/src/state/preferences/alt-text-required.tsx b/src/state/preferences/alt-text-required.tsx index 81de9e0060..642e790fbc 100644 --- a/src/state/preferences/alt-text-required.tsx +++ b/src/state/preferences/alt-text-required.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['requireAltTextEnabled'] diff --git a/src/state/preferences/external-embeds-prefs.tsx b/src/state/preferences/external-embeds-prefs.tsx index 0f6385fe8e..1c6429adca 100644 --- a/src/state/preferences/external-embeds-prefs.tsx +++ b/src/state/preferences/external-embeds-prefs.tsx @@ -1,6 +1,7 @@ -import React from 'react' -import * as persisted from '#/state/persisted' import {EmbedPlayerSource} from 'lib/strings/embed-player' +import React from 'react' + +import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['externalEmbeds'] type SetContext = (source: EmbedPlayerSource, value: 'show' | 'hide') => void diff --git a/src/state/preferences/feed-tuners.tsx b/src/state/preferences/feed-tuners.tsx index c4954d20a8..48131707f0 100644 --- a/src/state/preferences/feed-tuners.tsx +++ b/src/state/preferences/feed-tuners.tsx @@ -1,9 +1,11 @@ import {useMemo} from 'react' + import {FeedTuner} from '#/lib/api/feed-manip' + import {FeedDescriptor} from '../queries/post-feed' -import {useLanguagePrefs} from './languages' import {usePreferencesQuery} from '../queries/preferences' import {useSession} from '../session' +import {useLanguagePrefs} from './languages' export function useFeedTuners(feedDesc: FeedDescriptor) { const langPrefs = useLanguagePrefs() diff --git a/src/state/preferences/hidden-posts.tsx b/src/state/preferences/hidden-posts.tsx index 11119ce758..2c6a373e15 100644 --- a/src/state/preferences/hidden-posts.tsx +++ b/src/state/preferences/hidden-posts.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type SetStateCb = ( diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx index 2398f1f812..c0eb541bb3 100644 --- a/src/state/preferences/in-app-browser.tsx +++ b/src/state/preferences/in-app-browser.tsx @@ -1,15 +1,17 @@ -import React from 'react' -import * as persisted from '#/state/persisted' -import {Linking} from 'react-native' import * as WebBrowser from 'expo-web-browser' -import {isNative} from '#/platform/detection' -import {useModalControls} from '../modals' import {usePalette} from 'lib/hooks/usePalette' import { + createBskyAppAbsoluteUrl, isBskyRSSUrl, isRelativeUrl, - createBskyAppAbsoluteUrl, } from 'lib/strings/url-helpers' +import React from 'react' +import {Linking} from 'react-native' + +import {isNative} from '#/platform/detection' +import * as persisted from '#/state/persisted' + +import {useModalControls} from '../modals' type StateContext = persisted.Schema['useInAppBrowser'] type SetContext = (v: persisted.Schema['useInAppBrowser']) => void diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx index a442b763ad..6c045326d9 100644 --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -1,11 +1,11 @@ import React from 'react' -import {Provider as LanguagesProvider} from './languages' + import {Provider as AltTextRequiredProvider} from '../preferences/alt-text-required' import {Provider as HiddenPostsProvider} from '../preferences/hidden-posts' import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs' import {Provider as InAppBrowserProvider} from './in-app-browser' +import {Provider as LanguagesProvider} from './languages' -export {useLanguagePrefs, useLanguagePrefsApi} from './languages' export { useRequireAltTextEnabled, useSetRequireAltTextEnabled, @@ -15,6 +15,7 @@ export { useSetExternalEmbedPref, } from './external-embeds-prefs' export * from './hidden-posts' +export {useLanguagePrefs, useLanguagePrefsApi} from './languages' export function Provider({children}: React.PropsWithChildren<{}>) { return ( diff --git a/src/state/preferences/languages.tsx b/src/state/preferences/languages.tsx index df774c05e2..2905a465e6 100644 --- a/src/state/preferences/languages.tsx +++ b/src/state/preferences/languages.tsx @@ -1,6 +1,7 @@ import React from 'react' -import * as persisted from '#/state/persisted' + import {AppLanguage} from '#/locale/languages' +import * as persisted from '#/state/persisted' type SetStateCb = ( s: persisted.Schema['languagePrefs'], diff --git a/src/state/queries/actor-autocomplete.ts b/src/state/queries/actor-autocomplete.ts index 3159ad7aaf..9fffe3bd73 100644 --- a/src/state/queries/actor-autocomplete.ts +++ b/src/state/queries/actor-autocomplete.ts @@ -1,17 +1,18 @@ -import React from 'react' -import {AppBskyActorDefs, ModerationOpts, moderateProfile} from '@atproto/api' +import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' import {useQuery, useQueryClient} from '@tanstack/react-query' +import React from 'react' +import {isInvalidHandle} from '#/lib/strings/handles' import {logger} from '#/logger' -import {getAgent} from '#/state/session' -import {useMyFollowsQuery} from '#/state/queries/my-follows' import {STALE} from '#/state/queries' +import {useMyFollowsQuery} from '#/state/queries/my-follows' +import {getAgent} from '#/state/session' + import { DEFAULT_LOGGED_OUT_PREFERENCES, getModerationOpts, useModerationOpts, } from './preferences' -import {isInvalidHandle} from '#/lib/strings/handles' const DEFAULT_MOD_OPTS = getModerationOpts({ userDid: '', diff --git a/src/state/queries/actor-search.ts b/src/state/queries/actor-search.ts index f72511548c..9f85ad613d 100644 --- a/src/state/queries/actor-search.ts +++ b/src/state/queries/actor-search.ts @@ -1,8 +1,8 @@ import {AppBskyActorDefs} from '@atproto/api' import {QueryClient, useQuery} from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' export const RQKEY = (prefix: string) => ['actor-search', prefix] diff --git a/src/state/queries/app-passwords.ts b/src/state/queries/app-passwords.ts index 014244f01c..91c01c1f3c 100644 --- a/src/state/queries/app-passwords.ts +++ b/src/state/queries/app-passwords.ts @@ -1,7 +1,8 @@ import {ComAtprotoServerCreateAppPassword} from '@atproto/api' -import {useQuery, useQueryClient, useMutation} from '@tanstack/react-query' +import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' import {STALE} from '#/state/queries' + import {getAgent} from '../session' export const RQKEY = () => ['app-passwords'] diff --git a/src/state/queries/feed.ts b/src/state/queries/feed.ts index 1fa92c291f..53ce885a55 100644 --- a/src/state/queries/feed.ts +++ b/src/state/queries/feed.ts @@ -1,24 +1,24 @@ import { - useQuery, - useInfiniteQuery, - InfiniteData, - QueryKey, - useMutation, -} from '@tanstack/react-query' -import { - AtUri, - RichText, AppBskyFeedDefs, AppBskyGraphDefs, AppBskyUnspeccedGetPopularFeedGenerators, + AtUri, + RichText, } from '@atproto/api' +import { + InfiniteData, + QueryKey, + useInfiniteQuery, + useMutation, + useQuery, +} from '@tanstack/react-query' -import {router} from '#/routes' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' -import {getAgent} from '#/state/session' -import {usePreferencesQuery} from '#/state/queries/preferences' +import {router} from '#/routes' import {STALE} from '#/state/queries' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {getAgent} from '#/state/session' export type FeedSourceFeedInfo = { type: 'feed' diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts index d7c4116999..77d757d830 100644 --- a/src/state/queries/handle.ts +++ b/src/state/queries/handle.ts @@ -1,8 +1,8 @@ +import {useMutation, useQueryClient} from '@tanstack/react-query' import React from 'react' -import {useQueryClient, useMutation} from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid] const fetchDidQueryKey = (handleOrDid: string) => ['did', handleOrDid] diff --git a/src/state/queries/invites.ts b/src/state/queries/invites.ts index 9ae9c707f4..9ea49ebcae 100644 --- a/src/state/queries/invites.ts +++ b/src/state/queries/invites.ts @@ -1,9 +1,9 @@ import {ComAtprotoServerDefs} from '@atproto/api' import {useQuery} from '@tanstack/react-query' -import {getAgent} from '#/state/session' -import {STALE} from '#/state/queries' import {cleanError} from '#/lib/strings/errors' +import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' function isInviteAvailable(invite: ComAtprotoServerDefs.InviteCode): boolean { return invite.available - invite.uses.length > 0 && !invite.disabled diff --git a/src/state/queries/list-members.ts b/src/state/queries/list-members.ts index d84089c90d..8bce0e4185 100644 --- a/src/state/queries/list-members.ts +++ b/src/state/queries/list-members.ts @@ -1,13 +1,13 @@ import {AppBskyActorDefs, AppBskyGraphGetList} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' const PAGE_SIZE = 30 type RQPageParam = string | undefined diff --git a/src/state/queries/list-memberships.ts b/src/state/queries/list-memberships.ts index 6cae3fa2e8..9df50c403f 100644 --- a/src/state/queries/list-memberships.ts +++ b/src/state/queries/list-memberships.ts @@ -17,9 +17,9 @@ import {AtUri} from '@atproto/api' import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' -import {useSession, getAgent} from '#/state/session' -import {RQKEY as LIST_MEMBERS_RQKEY} from '#/state/queries/list-members' import {STALE} from '#/state/queries' +import {RQKEY as LIST_MEMBERS_RQKEY} from '#/state/queries/list-members' +import {getAgent, useSession} from '#/state/session' // sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records const SANITY_PAGE_LIMIT = 1000 diff --git a/src/state/queries/list.ts b/src/state/queries/list.ts index 845658a279..1bdf96e17b 100644 --- a/src/state/queries/list.ts +++ b/src/state/queries/list.ts @@ -1,20 +1,22 @@ import { - AtUri, + AppBskyGraphDefs, AppBskyGraphGetList, AppBskyGraphList, - AppBskyGraphDefs, + AtUri, Facet, } from '@atproto/api' -import {Image as RNImage} from 'react-native-image-crop-picker' -import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' +import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' import chunk from 'lodash.chunk' -import {useSession, getAgent} from '../session' -import {invalidate as invalidateMyLists} from './my-lists' -import {RQKEY as PROFILE_LISTS_RQKEY} from './profile-lists' +import {Image as RNImage} from 'react-native-image-crop-picker' + import {uploadBlob} from '#/lib/api' import {until} from '#/lib/async/until' import {STALE} from '#/state/queries' +import {getAgent, useSession} from '../session' +import {invalidate as invalidateMyLists} from './my-lists' +import {RQKEY as PROFILE_LISTS_RQKEY} from './profile-lists' + export const RQKEY = (uri: string) => ['list', uri] export function useListQuery(uri?: string) { diff --git a/src/state/queries/my-blocked-accounts.ts b/src/state/queries/my-blocked-accounts.ts index badaaec34d..6e981f1e24 100644 --- a/src/state/queries/my-blocked-accounts.ts +++ b/src/state/queries/my-blocked-accounts.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetBlocks} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/my-follows.ts b/src/state/queries/my-follows.ts index f95c3f5a7c..e66b642e2f 100644 --- a/src/state/queries/my-follows.ts +++ b/src/state/queries/my-follows.ts @@ -1,8 +1,10 @@ import {AppBskyActorDefs} from '@atproto/api' import {useQuery} from '@tanstack/react-query' -import {useSession, getAgent} from '../session' + import {STALE} from '#/state/queries' +import {getAgent, useSession} from '../session' + // sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records const SANITY_PAGE_LIMIT = 1000 const PAGE_SIZE = 100 diff --git a/src/state/queries/my-lists.ts b/src/state/queries/my-lists.ts index d53e130327..5cf3dfca03 100644 --- a/src/state/queries/my-lists.ts +++ b/src/state/queries/my-lists.ts @@ -1,9 +1,9 @@ import {AppBskyGraphDefs} from '@atproto/api' -import {useQuery, QueryClient} from '@tanstack/react-query' +import {QueryClient, useQuery} from '@tanstack/react-query' import {accumulate} from '#/lib/async/accumulate' -import {useSession, getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent, useSession} from '#/state/session' export type MyListsFilter = | 'all' diff --git a/src/state/queries/my-muted-accounts.ts b/src/state/queries/my-muted-accounts.ts index 8929e04d3e..a397887d85 100644 --- a/src/state/queries/my-muted-accounts.ts +++ b/src/state/queries/my-muted-accounts.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetMutes} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/notifications/feed.ts b/src/state/queries/notifications/feed.ts index 405d054d44..dbc23fcbdd 100644 --- a/src/state/queries/notifications/feed.ts +++ b/src/state/queries/notifications/feed.ts @@ -16,24 +16,26 @@ * 3. Don't call this query's `refetch()` if you're trying to sync latest; call `checkUnread()` instead. */ -import {useEffect, useRef} from 'react' import {AppBskyFeedDefs} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, - QueryKey, - useQueryClient, QueryClient, + QueryKey, + useInfiniteQuery, + useQueryClient, } from '@tanstack/react-query' +import {useEffect, useRef} from 'react' + +import {useMutedThreads} from '#/state/muted-threads' + +import {STALE} from '..' import {useModerationOpts} from '../preferences' +import {embedViewRecordToPostView, getEmbeddedPost} from '../util' +import {FeedPage} from './types' import {useUnreadNotificationsApi} from './unread' import {fetchPage} from './util' -import {FeedPage} from './types' -import {useMutedThreads} from '#/state/muted-threads' -import {STALE} from '..' -import {embedViewRecordToPostView, getEmbeddedPost} from '../util' -export type {NotificationType, FeedNotification, FeedPage} from './types' +export type {FeedNotification, FeedPage, NotificationType} from './types' const PAGE_SIZE = 30 diff --git a/src/state/queries/notifications/types.ts b/src/state/queries/notifications/types.ts index 812236cf06..db1cf878f2 100644 --- a/src/state/queries/notifications/types.ts +++ b/src/state/queries/notifications/types.ts @@ -1,6 +1,6 @@ import { - AppBskyNotificationListNotifications, AppBskyFeedDefs, + AppBskyNotificationListNotifications, } from '@atproto/api' export type NotificationType = diff --git a/src/state/queries/notifications/unread.tsx b/src/state/queries/notifications/unread.tsx index e7a0631ecf..2f55872eb9 100644 --- a/src/state/queries/notifications/unread.tsx +++ b/src/state/queries/notifications/unread.tsx @@ -2,20 +2,22 @@ * A kind of companion API to ./feed.ts. See that file for more info. */ -import React from 'react' -import * as Notifications from 'expo-notifications' import {useQueryClient} from '@tanstack/react-query' +import * as Notifications from 'expo-notifications' +import React from 'react' +import {AppState} from 'react-native' + import BroadcastChannel from '#/lib/broadcast' -import {useSession, getAgent} from '#/state/session' -import {useModerationOpts} from '../preferences' -import {fetchPage} from './util' -import {CachedFeedPage, FeedPage} from './types' +import {logger} from '#/logger' import {isNative} from '#/platform/detection' import {useMutedThreads} from '#/state/muted-threads' -import {RQKEY as RQKEY_NOTIFS} from './feed' -import {logger} from '#/logger' +import {getAgent, useSession} from '#/state/session' + +import {useModerationOpts} from '../preferences' import {truncateAndInvalidate} from '../util' -import {AppState} from 'react-native' +import {RQKEY as RQKEY_NOTIFS} from './feed' +import {CachedFeedPage, FeedPage} from './types' +import {fetchPage} from './util' const UPDATE_INTERVAL = 30 * 1e3 // 30sec diff --git a/src/state/queries/notifications/util.ts b/src/state/queries/notifications/util.ts index 626d3e9118..f019c89660 100644 --- a/src/state/queries/notifications/util.ts +++ b/src/state/queries/notifications/util.ts @@ -1,19 +1,21 @@ import { - AppBskyNotificationListNotifications, - ModerationOpts, - moderateProfile, + AppBskyEmbedRecord, AppBskyFeedDefs, + AppBskyFeedLike, AppBskyFeedPost, AppBskyFeedRepost, - AppBskyFeedLike, - AppBskyEmbedRecord, + AppBskyNotificationListNotifications, + moderateProfile, + ModerationOpts, } from '@atproto/api' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' -import chunk from 'lodash.chunk' import {QueryClient} from '@tanstack/react-query' +import chunk from 'lodash.chunk' + +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' + import {getAgent} from '../../session' import {precacheProfile} from '../profile' -import {NotificationType, FeedNotification, FeedPage} from './types' +import {FeedNotification, FeedPage, NotificationType} from './types' const GROUPABLE_REASONS = ['like', 'repost', 'follow'] const MS_1HR = 1e3 * 60 * 60 diff --git a/src/state/queries/post-feed.ts b/src/state/queries/post-feed.ts index c295ffcb03..db6debc5ad 100644 --- a/src/state/queries/post-feed.ts +++ b/src/state/queries/post-feed.ts @@ -1,5 +1,3 @@ -import React, {useCallback, useEffect, useRef} from 'react' -import {AppState} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -7,34 +5,38 @@ import { PostModeration, } from '@atproto/api' import { - useInfiniteQuery, InfiniteData, - QueryKey, QueryClient, + QueryKey, + useInfiniteQuery, useQueryClient, } from '@tanstack/react-query' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' -import {useFeedTuners} from '../preferences/feed-tuners' -import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip' -import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types' -import {FollowingFeedAPI} from 'lib/api/feed/following' import {AuthorFeedAPI} from 'lib/api/feed/author' -import {LikesFeedAPI} from 'lib/api/feed/likes' import {CustomFeedAPI} from 'lib/api/feed/custom' +import {FollowingFeedAPI} from 'lib/api/feed/following' +import {LikesFeedAPI} from 'lib/api/feed/likes' import {ListFeedAPI} from 'lib/api/feed/list' import {MergeFeedAPI} from 'lib/api/feed/merge' +import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types' +import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip' +import {BSKY_FEED_OWNER_DIDS} from 'lib/constants' +import {queryClient} from 'lib/react-query' +import React, {useCallback, useEffect, useRef} from 'react' +import {AppState} from 'react-native' + import {HomeFeedAPI} from '#/lib/api/feed/home' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {logger} from '#/logger' import {STALE} from '#/state/queries' -import {precacheFeedPostProfiles} from './profile' -import {getAgent} from '#/state/session' import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const' import {getModerationOpts} from '#/state/queries/preferences/moderation' +import {getAgent} from '#/state/session' import {KnownError} from '#/view/com/posts/FeedErrorMessage' -import {embedViewRecordToPostView, getEmbeddedPost} from './util' + +import {useFeedTuners} from '../preferences/feed-tuners' import {useModerationOpts} from './preferences' -import {queryClient} from 'lib/react-query' -import {BSKY_FEED_OWNER_DIDS} from 'lib/constants' +import {precacheFeedPostProfiles} from './profile' +import {embedViewRecordToPostView, getEmbeddedPost} from './util' type ActorDid = string type AuthorFilter = diff --git a/src/state/queries/post-liked-by.ts b/src/state/queries/post-liked-by.ts index 2cde07f280..b48b0e92e0 100644 --- a/src/state/queries/post-liked-by.ts +++ b/src/state/queries/post-liked-by.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyFeedGetLikes} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/post-reposted-by.ts b/src/state/queries/post-reposted-by.ts index db5fa65140..c33d1b2bb7 100644 --- a/src/state/queries/post-reposted-by.ts +++ b/src/state/queries/post-reposted-by.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyFeedGetRepostedBy} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/post-thread.ts b/src/state/queries/post-thread.ts index 26d40599c6..e46b770da2 100644 --- a/src/state/queries/post-thread.ts +++ b/src/state/queries/post-thread.ts @@ -1,15 +1,16 @@ import { - AppBskyFeedDefs, - AppBskyFeedPost, - AppBskyFeedGetPostThread, AppBskyEmbedRecord, + AppBskyFeedDefs, + AppBskyFeedGetPostThread, + AppBskyFeedPost, } from '@atproto/api' -import {useQuery, useQueryClient, QueryClient} from '@tanstack/react-query' +import {QueryClient, useQuery, useQueryClient} from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' -import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from './post-feed' +import {getAgent} from '#/state/session' + import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from './notifications/feed' +import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from './post-feed' import {precacheThreadPostProfiles} from './profile' import {getEmbeddedPost} from './util' diff --git a/src/state/queries/post.ts b/src/state/queries/post.ts index eb59f7da40..1179eb22b7 100644 --- a/src/state/queries/post.ts +++ b/src/state/queries/post.ts @@ -1,11 +1,12 @@ -import {useCallback} from 'react' import {AppBskyFeedDefs, AtUri} from '@atproto/api' -import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' -import {Shadow} from '#/state/cache/types' -import {getAgent} from '#/state/session' -import {updatePostShadow} from '#/state/cache/post-shadow' +import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' +import {useCallback} from 'react' + import {track} from '#/lib/analytics/analytics' import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' +import {updatePostShadow} from '#/state/cache/post-shadow' +import {Shadow} from '#/state/cache/types' +import {getAgent} from '#/state/session' export const RQKEY = (postUri: string) => ['post', postUri] diff --git a/src/state/queries/preferences/const.ts b/src/state/queries/preferences/const.ts index 53c9e482af..97e54a8ce8 100644 --- a/src/state/queries/preferences/const.ts +++ b/src/state/queries/preferences/const.ts @@ -1,8 +1,8 @@ -import { - UsePreferencesQueryResponse, - ThreadViewPreferences, -} from '#/state/queries/preferences/types' import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' +import { + ThreadViewPreferences, + UsePreferencesQueryResponse, +} from '#/state/queries/preferences/types' export const DEFAULT_HOME_FEED_PREFS: UsePreferencesQueryResponse['feedViewPrefs'] = { diff --git a/src/state/queries/preferences/index.ts b/src/state/queries/preferences/index.ts index 37ef10ae0c..88b315f959 100644 --- a/src/state/queries/preferences/index.ts +++ b/src/state/queries/preferences/index.ts @@ -1,33 +1,33 @@ -import {useMemo} from 'react' -import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' import { - LabelPreference, - BskyFeedViewPreference, AppBskyActorDefs, + BskyFeedViewPreference, + LabelPreference, } from '@atproto/api' +import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' +import {useMemo} from 'react' import {track} from '#/lib/analytics/analytics' import {getAge} from '#/lib/strings/time' -import {useSession, getAgent} from '#/state/session' -import {DEFAULT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' -import { - ConfigurableLabelGroup, - UsePreferencesQueryResponse, - ThreadViewPreferences, -} from '#/state/queries/preferences/types' -import {temp__migrateLabelPref} from '#/state/queries/preferences/util' +import {useHiddenPosts} from '#/state/preferences/hidden-posts' +import {STALE} from '#/state/queries' import { DEFAULT_HOME_FEED_PREFS, - DEFAULT_THREAD_VIEW_PREFS, DEFAULT_LOGGED_OUT_PREFERENCES, + DEFAULT_THREAD_VIEW_PREFS, } from '#/state/queries/preferences/const' +import {DEFAULT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' import {getModerationOpts} from '#/state/queries/preferences/moderation' -import {STALE} from '#/state/queries' -import {useHiddenPosts} from '#/state/preferences/hidden-posts' +import { + ConfigurableLabelGroup, + ThreadViewPreferences, + UsePreferencesQueryResponse, +} from '#/state/queries/preferences/types' +import {temp__migrateLabelPref} from '#/state/queries/preferences/util' +import {getAgent, useSession} from '#/state/session' -export * from '#/state/queries/preferences/types' -export * from '#/state/queries/preferences/moderation' export * from '#/state/queries/preferences/const' +export * from '#/state/queries/preferences/moderation' +export * from '#/state/queries/preferences/types' export const preferencesQueryKey = ['getPreferences'] diff --git a/src/state/queries/preferences/moderation.ts b/src/state/queries/preferences/moderation.ts index cdae529374..bf5139be5a 100644 --- a/src/state/queries/preferences/moderation.ts +++ b/src/state/queries/preferences/moderation.ts @@ -1,12 +1,12 @@ import { - LabelPreference, ComAtprotoLabelDefs, + LabelPreference, ModerationOpts, } from '@atproto/api' import { - LabelGroup, ConfigurableLabelGroup, + LabelGroup, UsePreferencesQueryResponse, } from '#/state/queries/preferences/types' diff --git a/src/state/queries/preferences/types.ts b/src/state/queries/preferences/types.ts index 45c9eed7de..3c65c31e0d 100644 --- a/src/state/queries/preferences/types.ts +++ b/src/state/queries/preferences/types.ts @@ -1,8 +1,8 @@ import { - BskyPreferences, - LabelPreference, - BskyThreadViewPreference, BskyFeedViewPreference, + BskyPreferences, + BskyThreadViewPreference, + LabelPreference, } from '@atproto/api' export const configurableAdultLabelGroups = [ diff --git a/src/state/queries/profile-extra-info.ts b/src/state/queries/profile-extra-info.ts index 8fc32c33eb..e5bdff58af 100644 --- a/src/state/queries/profile-extra-info.ts +++ b/src/state/queries/profile-extra-info.ts @@ -1,7 +1,7 @@ import {useQuery} from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' // TODO refactor invalidate on mutate? export const RQKEY = (did: string) => ['profile-extra-info', did] diff --git a/src/state/queries/profile-feedgens.ts b/src/state/queries/profile-feedgens.ts index 7d33eb9c80..5b01259ec4 100644 --- a/src/state/queries/profile-feedgens.ts +++ b/src/state/queries/profile-feedgens.ts @@ -1,5 +1,5 @@ import {AppBskyFeedGetActorFeeds} from '@atproto/api' -import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' +import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/profile-followers.ts b/src/state/queries/profile-followers.ts index fdefc82536..28cc82d7ab 100644 --- a/src/state/queries/profile-followers.ts +++ b/src/state/queries/profile-followers.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetFollowers} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/profile-follows.ts b/src/state/queries/profile-follows.ts index 428c8aebd1..697074d07f 100644 --- a/src/state/queries/profile-follows.ts +++ b/src/state/queries/profile-follows.ts @@ -1,13 +1,13 @@ import {AppBskyActorDefs, AppBskyGraphGetFollows} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' const PAGE_SIZE = 30 type RQPageParam = string | undefined diff --git a/src/state/queries/profile-lists.ts b/src/state/queries/profile-lists.ts index 505d33b9fa..d20f8a0310 100644 --- a/src/state/queries/profile-lists.ts +++ b/src/state/queries/profile-lists.ts @@ -1,5 +1,6 @@ import {AppBskyGraphGetLists} from '@atproto/api' -import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' +import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' + import {getAgent} from '#/state/session' const PAGE_SIZE = 30 diff --git a/src/state/queries/profile.ts b/src/state/queries/profile.ts index e81ea0f3f0..5c4c071c62 100644 --- a/src/state/queries/profile.ts +++ b/src/state/queries/profile.ts @@ -1,31 +1,33 @@ -import {useCallback} from 'react' import { - AtUri, AppBskyActorDefs, - AppBskyActorProfile, AppBskyActorGetProfile, - AppBskyFeedDefs, + AppBskyActorProfile, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + AppBskyFeedDefs, + AtUri, } from '@atproto/api' import { + QueryClient, + useMutation, useQuery, useQueryClient, - useMutation, - QueryClient, } from '@tanstack/react-query' +import {useCallback} from 'react' import {Image as RNImage} from 'react-native-image-crop-picker' -import {useSession, getAgent} from '../session' -import {updateProfileShadow} from '../cache/profile-shadow' + +import {track} from '#/lib/analytics/analytics' import {uploadBlob} from '#/lib/api' import {until} from '#/lib/async/until' -import {Shadow} from '#/state/cache/types' -import {resetProfilePostsQueries} from '#/state/queries/post-feed' import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' -import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts' -import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts' +import {Shadow} from '#/state/cache/types' import {STALE} from '#/state/queries' -import {track} from '#/lib/analytics/analytics' +import {resetProfilePostsQueries} from '#/state/queries/post-feed' + +import {updateProfileShadow} from '../cache/profile-shadow' +import {getAgent, useSession} from '../session' +import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts' +import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts' import {ThreadNode} from './post-thread' export const RQKEY = (did: string) => ['profile', did] diff --git a/src/state/queries/resolve-uri.ts b/src/state/queries/resolve-uri.ts index 95fc867ddf..dd6769baa3 100644 --- a/src/state/queries/resolve-uri.ts +++ b/src/state/queries/resolve-uri.ts @@ -1,9 +1,10 @@ +import {AppBskyActorDefs, AtUri} from '@atproto/api' import {useQuery, useQueryClient, UseQueryResult} from '@tanstack/react-query' -import {AtUri, AppBskyActorDefs} from '@atproto/api' + +import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' import {profileBasicQueryKey as RQKEY_PROFILE_BASIC} from './profile' -import {getAgent} from '#/state/session' -import {STALE} from '#/state/queries' export const RQKEY = (didOrHandle: string) => ['resolved-did', didOrHandle] diff --git a/src/state/queries/search-posts.ts b/src/state/queries/search-posts.ts index e0b317ca9d..58dba59683 100644 --- a/src/state/queries/search-posts.ts +++ b/src/state/queries/search-posts.ts @@ -1,12 +1,13 @@ import {AppBskyFeedDefs, AppBskyFeedSearchPosts} from '@atproto/api' import { - useInfiniteQuery, InfiniteData, - QueryKey, QueryClient, + QueryKey, + useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' + import {embedViewRecordToPostView, getEmbeddedPost} from './util' const searchPostsQueryKey = ({query}: {query: string}) => [ diff --git a/src/state/queries/suggested-feeds.ts b/src/state/queries/suggested-feeds.ts index 7e6b534ad5..f8f40384db 100644 --- a/src/state/queries/suggested-feeds.ts +++ b/src/state/queries/suggested-feeds.ts @@ -1,8 +1,8 @@ -import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' import {AppBskyFeedGetSuggestedFeeds} from '@atproto/api' +import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' -import {getAgent} from '#/state/session' import {STALE} from '#/state/queries' +import {getAgent} from '#/state/session' export const suggestedFeedsQueryKey = ['suggestedFeeds'] diff --git a/src/state/queries/suggested-follows.ts b/src/state/queries/suggested-follows.ts index 932226b75c..ba9de82d19 100644 --- a/src/state/queries/suggested-follows.ts +++ b/src/state/queries/suggested-follows.ts @@ -1,4 +1,3 @@ -import React from 'react' import { AppBskyActorDefs, AppBskyActorGetSuggestions, @@ -6,17 +5,18 @@ import { moderateProfile, } from '@atproto/api' import { - useInfiniteQuery, - useQueryClient, - useQuery, InfiniteData, QueryClient, QueryKey, + useInfiniteQuery, + useQuery, + useQueryClient, } from '@tanstack/react-query' +import React from 'react' -import {useSession, getAgent} from '#/state/session' -import {useModerationOpts} from '#/state/queries/preferences' import {STALE} from '#/state/queries' +import {useModerationOpts} from '#/state/queries/preferences' +import {getAgent, useSession} from '#/state/session' const suggestedFollowsQueryKey = ['suggested-follows'] const suggestedFollowsByActorQueryKey = (did: string) => [ diff --git a/src/state/queries/util.ts b/src/state/queries/util.ts index 54752b332a..24f28ca529 100644 --- a/src/state/queries/util.ts +++ b/src/state/queries/util.ts @@ -1,10 +1,10 @@ -import {QueryClient, QueryKey, InfiniteData} from '@tanstack/react-query' import { AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, } from '@atproto/api' +import {InfiniteData, QueryClient, QueryKey} from '@tanstack/react-query' export function truncateAndInvalidate( queryClient: QueryClient, diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index 46628318c5..9918e2e75b 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -1,17 +1,18 @@ -import React from 'react' -import {BskyAgent, AtpPersistSessionHandler} from '@atproto/api' +import {AtpPersistSessionHandler, BskyAgent} from '@atproto/api' import {useQueryClient} from '@tanstack/react-query' import {jwtDecode} from 'jwt-decode' +import React from 'react' +import {track} from '#/lib/analytics/analytics' import {networkRetry} from '#/lib/async/retry' +import {hasProp} from '#/lib/type-guards' import {logger} from '#/logger' import * as persisted from '#/state/persisted' import {PUBLIC_BSKY_AGENT} from '#/state/queries' -import {emitSessionDropped} from '../events' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' -import {track} from '#/lib/analytics/analytics' -import {hasProp} from '#/lib/type-guards' + +import {emitSessionDropped} from '../events' let __globalAgent: BskyAgent = PUBLIC_BSKY_AGENT diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx index f3339d2406..f16e2be533 100644 --- a/src/state/shell/color-mode.tsx +++ b/src/state/shell/color-mode.tsx @@ -1,4 +1,5 @@ import React from 'react' + import * as persisted from '#/state/persisted' type StateContext = { diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer.tsx index c9dbfbeac4..1fb08baa28 100644 --- a/src/state/shell/composer.tsx +++ b/src/state/shell/composer.tsx @@ -1,9 +1,10 @@ -import React from 'react' import { AppBskyEmbedRecord, AppBskyRichtextFacet, PostModeration, } from '@atproto/api' +import React from 'react' + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' export interface ComposerOptsPostRef { diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx index 07909c0001..7e41967f53 100644 --- a/src/state/shell/index.tsx +++ b/src/state/shell/index.tsx @@ -1,22 +1,23 @@ import React from 'react' -import {Provider as ShellLayoutProvder} from './shell-layout' + +import {Provider as ColorModeProvider} from './color-mode' +import {Provider as ComposerProvider} from './composer' import {Provider as DrawerOpenProvider} from './drawer-open' import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled' import {Provider as MinimalModeProvider} from './minimal-mode' -import {Provider as ColorModeProvider} from './color-mode' import {Provider as OnboardingProvider} from './onboarding' -import {Provider as ComposerProvider} from './composer' +import {Provider as ShellLayoutProvder} from './shell-layout' import {Provider as TickEveryMinuteProvider} from './tick-every-minute' +export {useSetThemePrefs, useThemePrefs} from './color-mode' +export {useComposerControls, useComposerState} from './composer' export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open' export { useIsDrawerSwipeDisabled, useSetDrawerSwipeDisabled, } from './drawer-swipe-disabled' export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode' -export {useThemePrefs, useSetThemePrefs} from './color-mode' -export {useOnboardingState, useOnboardingDispatch} from './onboarding' -export {useComposerState, useComposerControls} from './composer' +export {useOnboardingDispatch, useOnboardingState} from './onboarding' export {useTickEveryMinute} from './tick-every-minute' export function Provider({children}: React.PropsWithChildren<{}>) { diff --git a/src/state/shell/onboarding.tsx b/src/state/shell/onboarding.tsx index 6a18b461f9..cd26e42c0f 100644 --- a/src/state/shell/onboarding.tsx +++ b/src/state/shell/onboarding.tsx @@ -1,6 +1,7 @@ import React from 'react' -import * as persisted from '#/state/persisted' + import {track} from '#/lib/analytics/analytics' +import * as persisted from '#/state/persisted' export const OnboardingScreenSteps = { Welcome: 'Welcome', diff --git a/src/state/shell/reminders.ts b/src/state/shell/reminders.ts index ee924eb001..6f68b9b795 100644 --- a/src/state/shell/reminders.ts +++ b/src/state/shell/reminders.ts @@ -1,7 +1,9 @@ -import * as persisted from '#/state/persisted' import {toHashCode} from 'lib/strings/helpers' -import {isOnboardingActive} from './onboarding' + +import * as persisted from '#/state/persisted' + import {SessionAccount} from '../session' +import {isOnboardingActive} from './onboarding' export function shouldRequestEmailConfirmation(account: SessionAccount) { if (!account) { diff --git a/src/state/shell/selected-feed.tsx b/src/state/shell/selected-feed.tsx index a05d8661b4..8a6e82636f 100644 --- a/src/state/shell/selected-feed.tsx +++ b/src/state/shell/selected-feed.tsx @@ -1,6 +1,7 @@ import React from 'react' -import * as persisted from '#/state/persisted' + import {isWeb} from '#/platform/detection' +import * as persisted from '#/state/persisted' type StateContext = string type SetContext = (v: string) => void diff --git a/src/state/util.ts b/src/state/util.ts index f65d14a84c..af6d9026b4 100644 --- a/src/state/util.ts +++ b/src/state/util.ts @@ -1,9 +1,11 @@ import {useCallback} from 'react' + +import {useDialogStateControlContext} from '#/state/dialogs' + import {useLightboxControls} from './lightbox' import {useModalControls} from './modals' import {useComposerControls} from './shell/composer' import {useSetDrawerOpen} from './shell/drawer-open' -import {useDialogStateControlContext} from '#/state/dialogs' /** * returns true if something was closed diff --git a/src/view/com/auth/HomeLoggedOutCTA.tsx b/src/view/com/auth/HomeLoggedOutCTA.tsx index f796d8baee..f2a3c5170b 100644 --- a/src/view/com/auth/HomeLoggedOutCTA.tsx +++ b/src/view/com/auth/HomeLoggedOutCTA.tsx @@ -1,15 +1,17 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' -import {ScrollView} from '../util/Views' -import {Text} from '../util/text/Text' + import {usePalette} from '#/lib/hooks/usePalette' -import {colors, s} from '#/lib/styles' -import {TextLink} from '../util/Link' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {colors, s} from '#/lib/styles' import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {TextLink} from '../util/Link' +import {Text} from '../util/text/Text' +import {ScrollView} from '../util/Views' + export function HomeLoggedOutCTA() { const pal = usePalette('default') const {_} = useLingui() diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index 603abbab2d..b2df062dd9 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -1,27 +1,28 @@ -import React from 'react' -import {View, Pressable} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' import {useNavigation} from '@react-navigation/native' - -import {isIOS, isNative} from 'platform/detection' -import {Login} from 'view/com/auth/login/Login' -import {CreateAccount} from 'view/com/auth/create/CreateAccount' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics/analytics' -import {SplashScreen} from './SplashScreen' -import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' +import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NavigationProp} from 'lib/routes/types' +import {s} from 'lib/styles' +import {isIOS, isNative} from 'platform/detection' +import React from 'react' +import {Pressable, View} from 'react-native' +import {CreateAccount} from 'view/com/auth/create/CreateAccount' +import {Login} from 'view/com/auth/login/Login' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' + +import {useSession} from '#/state/session' import { useLoggedOutView, useLoggedOutViewControls, } from '#/state/shell/logged-out' -import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' import {Text} from '#/view/com/util/text/Text' -import {NavigationProp} from 'lib/routes/types' + +import {SplashScreen} from './SplashScreen' enum ScreenState { S_LoginOrCreateAccount, diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx index bdb7f27c81..e102b1ccf8 100644 --- a/src/view/com/auth/Onboarding.tsx +++ b/src/view/com/auth/Onboarding.tsx @@ -1,13 +1,15 @@ -import React from 'react' -import {SafeAreaView, Platform} from 'react-native' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' -import {Welcome} from './onboarding/Welcome' +import {s} from 'lib/styles' +import React from 'react' +import {Platform, SafeAreaView} from 'react-native' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' + +import {useOnboardingDispatch, useOnboardingState} from '#/state/shell' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' + import {RecommendedFeeds} from './onboarding/RecommendedFeeds' import {RecommendedFollows} from './onboarding/RecommendedFollows' -import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' -import {useOnboardingState, useOnboardingDispatch} from '#/state/shell' +import {Welcome} from './onboarding/Welcome' export function Onboarding() { const pal = usePalette('default') diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index 134ae11f10..2b54cb1b63 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,23 +1,25 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {Text} from 'view/com/util/text/Text' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {CenteredView} from '../util/Views' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Logo} from '#/view/icons/Logo' -import {Logotype} from '#/view/icons/Logotype' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, s} from 'lib/styles' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {Text} from 'view/com/util/text/Text' + import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {APP_LANGUAGES} from '#/locale/languages' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' + +import {CenteredView} from '../util/Views' export const SplashScreen = ({ onPressSignin, diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index f1921c7ffb..2bf4a12950 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -1,21 +1,23 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' -import {TextLink} from '../util/Link' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s, colors} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' -import {CenteredView} from '../util/Views' -import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' +import React from 'react' +import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {Text} from 'view/com/util/text/Text' + +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {APP_LANGUAGES} from '#/locale/languages' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' -import {useLingui} from '@lingui/react' -import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' -import {APP_LANGUAGES} from '#/locale/languages' + +import {TextLink} from '../util/Link' +import {CenteredView} from '../util/Views' export const SplashScreen = ({ onDismiss, diff --git a/src/view/com/auth/create/CaptchaWebView.tsx b/src/view/com/auth/create/CaptchaWebView.tsx index b0de8b4a4b..9bfc9218e3 100644 --- a/src/view/com/auth/create/CaptchaWebView.tsx +++ b/src/view/com/auth/create/CaptchaWebView.tsx @@ -1,7 +1,7 @@ import React from 'react' +import {StyleSheet} from 'react-native' import {WebView, WebViewNavigation} from 'react-native-webview' import {ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes' -import {StyleSheet} from 'react-native' import {CreateAccountState} from 'view/com/auth/create/state' const ALLOWED_HOSTS = [ diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index d193802fe0..be7e4c4327 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -1,3 +1,9 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {createFullHandle, validateHandle} from 'lib/strings/handles' +import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -6,24 +12,19 @@ import { TouchableOpacity, View, } from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' +import {getAgent} from 'state/session' import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useCreateAccount, useSubmitCreateAccount} from './state' -import {useServiceQuery} from '#/state/queries/service' -import {FEEDBACK_FORM_URL, HITSLOP_10} from '#/lib/constants' +import {FEEDBACK_FORM_URL, HITSLOP_10} from '#/lib/constants' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {useServiceQuery} from '#/state/queries/service' + +import {TextLink} from '../../util/Link' +import {Text} from '../../util/text/Text' +import {useCreateAccount, useSubmitCreateAccount} from './state' import {Step1} from './Step1' import {Step2} from './Step2' import {Step3} from './Step3' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {TextLink} from '../../util/Link' -import {getAgent} from 'state/session' -import {createFullHandle, validateHandle} from 'lib/strings/handles' export function CreateAccount({onPressBack}: {onPressBack: () => void}) { const {screen} = useAnalytics() diff --git a/src/view/com/auth/create/Policies.tsx b/src/view/com/auth/create/Policies.tsx index 2c7d60818e..fea4566b8d 100644 --- a/src/view/com/auth/create/Policies.tsx +++ b/src/view/com/auth/create/Policies.tsx @@ -1,14 +1,15 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' +import {ComAtprotoServerDescribeServer} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {ComAtprotoServerDescribeServer} from '@atproto/api' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, s} from 'lib/styles' +import React from 'react' +import {StyleSheet, View} from 'react-native' + import {TextLink} from '../../util/Link' import {Text} from '../../util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index 1f6852f8cc..9dcc74f7dd 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -1,3 +1,12 @@ +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React from 'react' import { ActivityIndicator, @@ -6,27 +15,19 @@ import { TouchableOpacity, View, } from 'react-native' -import {CreateAccountState, CreateAccountDispatch, is18} from './state' -import {Text} from 'view/com/util/text/Text' -import {DateInput} from 'view/com/util/forms/DateInput' -import {StepHeader} from './StepHeader' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {TextInput} from '../util/TextInput' -import {Policies} from './Policies' import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {isWeb} from 'platform/detection' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {logger} from '#/logger' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' +import {DateInput} from 'view/com/util/forms/DateInput' +import {Text} from 'view/com/util/text/Text' + import {useDialogControl} from '#/components/Dialog' +import {toNiceDomain} from '#/lib/strings/url-helpers' +import {logger} from '#/logger' import {ServerInputDialog} from '../server-input' -import {toNiceDomain} from '#/lib/strings/url-helpers' +import {TextInput} from '../util/TextInput' +import {Policies} from './Policies' +import {CreateAccountDispatch, CreateAccountState, is18} from './state' +import {StepHeader} from './StepHeader' function sanitizeDate(date: Date): Date { if (!date || date.toString() === 'Invalid Date') { diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx index 5c262977f1..08eb34fb3b 100644 --- a/src/view/com/auth/create/Step2.tsx +++ b/src/view/com/auth/create/Step2.tsx @@ -1,22 +1,24 @@ -import React from 'react' -import {View} from 'react-native' -import {CreateAccountState, CreateAccountDispatch} from './state' -import {Text} from 'view/com/util/text/Text' -import {StepHeader} from './StepHeader' -import {s} from 'lib/styles' -import {TextInput} from '../util/TextInput' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' import { createFullHandle, IsValidHandle, validateHandle, } from 'lib/strings/handles' -import {usePalette} from 'lib/hooks/usePalette' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {s} from 'lib/styles' +import React from 'react' +import {View} from 'react-native' +import {Text} from 'view/com/util/text/Text' + import {atoms as a, useTheme} from '#/alf' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' -import {useFocusEffect} from '@react-navigation/native' + +import {TextInput} from '../util/TextInput' +import {CreateAccountDispatch, CreateAccountState} from './state' +import {StepHeader} from './StepHeader' /** STEP 3: Your user handle * @field User handle diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx index 53fdfdde81..b572871716 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/view/com/auth/create/Step3.tsx @@ -1,20 +1,20 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {createFullHandle} from 'lib/strings/handles' +import {useTheme} from 'lib/ThemeContext' +import {nanoid} from 'nanoid/non-secure' +import {isWeb} from 'platform/detection' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' +import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' + import { - CreateAccountState, CreateAccountDispatch, + CreateAccountState, useSubmitCreateAccount, } from './state' import {StepHeader} from './StepHeader' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {isWeb} from 'platform/detection' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {nanoid} from 'nanoid/non-secure' -import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' -import {useTheme} from 'lib/ThemeContext' -import {createFullHandle} from 'lib/strings/handles' const CAPTCHA_PATH = '/gate/signup' diff --git a/src/view/com/auth/create/StepHeader.tsx b/src/view/com/auth/create/StepHeader.tsx index a98b392d8d..90946e37b4 100644 --- a/src/view/com/auth/create/StepHeader.tsx +++ b/src/view/com/auth/create/StepHeader.tsx @@ -1,8 +1,9 @@ +import {Trans} from '@lingui/macro' +import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans} from '@lingui/macro' + import {CreateAccountState} from './state' export function StepHeader({ diff --git a/src/view/com/auth/create/state.ts b/src/view/com/auth/create/state.ts index 7a727ec0b2..7ff5fceb65 100644 --- a/src/view/com/auth/create/state.ts +++ b/src/view/com/auth/create/state.ts @@ -1,24 +1,25 @@ -import {useCallback, useReducer} from 'react' import { - ComAtprotoServerDescribeServer, ComAtprotoServerCreateAccount, + ComAtprotoServerDescribeServer, } from '@atproto/api' -import {I18nContext, useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {I18nContext, useLingui} from '@lingui/react' import * as EmailValidator from 'email-validator' import {getAge} from 'lib/strings/time' -import {logger} from '#/logger' -import {createFullHandle, validateHandle} from '#/lib/strings/handles' -import {cleanError} from '#/lib/strings/errors' -import {useOnboardingDispatch} from '#/state/shell/onboarding' -import {useSessionApi} from '#/state/session' -import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants' +import {useCallback, useReducer} from 'react' import { DEFAULT_PROD_FEEDS, usePreferencesSetBirthDateMutation, useSetSaveFeedsMutation, } from 'state/queries/preferences' +import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants' +import {cleanError} from '#/lib/strings/errors' +import {createFullHandle, validateHandle} from '#/lib/strings/handles' +import {logger} from '#/logger' +import {useSessionApi} from '#/state/session' +import {useOnboardingDispatch} from '#/state/shell/onboarding' + export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago diff --git a/src/view/com/auth/login/ChooseAccountForm.tsx b/src/view/com/auth/login/ChooseAccountForm.tsx index 32cd8315d3..440b066ee2 100644 --- a/src/view/com/auth/login/ChooseAccountForm.tsx +++ b/src/view/com/auth/login/ChooseAccountForm.tsx @@ -1,22 +1,24 @@ -import React from 'react' -import {ScrollView, TouchableOpacity, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {UserAvatar} from '../../util/UserAvatar' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {styles} from './styles' -import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, s} from 'lib/styles' +import React from 'react' +import {ScrollView, TouchableOpacity, View} from 'react-native' + import {useProfileQuery} from '#/state/queries/profile' +import {SessionAccount, useSession, useSessionApi} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import * as Toast from '#/view/com/util/Toast' +import {Text} from '../../util/text/Text' +import {UserAvatar} from '../../util/UserAvatar' +import {styles} from './styles' + function AccountItem({ account, onSelect, diff --git a/src/view/com/auth/login/ForgotPasswordForm.tsx b/src/view/com/auth/login/ForgotPasswordForm.tsx index 322da2b8fd..74dd1d85a1 100644 --- a/src/view/com/auth/login/ForgotPasswordForm.tsx +++ b/src/view/com/auth/login/ForgotPasswordForm.tsx @@ -1,4 +1,20 @@ -import React, {useState, useEffect} from 'react' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import {BskyAgent} from '@atproto/api' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import * as EmailValidator from 'email-validator' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {isNetworkError} from 'lib/strings/errors' +import {cleanError} from 'lib/strings/errors' +import {toNiceDomain} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {useEffect, useState} from 'react' import { ActivityIndicator, Keyboard, @@ -6,28 +22,13 @@ import { TouchableOpacity, View, } from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import * as EmailValidator from 'email-validator' -import {BskyAgent} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {cleanError} from 'lib/strings/errors' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {styles} from './styles' -import {useDialogControl} from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {logger} from '#/logger' + +import {Text} from '../../util/text/Text' import {ServerInputDialog} from '../server-input' +import {styles} from './styles' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx index bc931ac04c..f634342a28 100644 --- a/src/view/com/auth/login/Login.tsx +++ b/src/view/com/auth/login/Login.tsx @@ -1,21 +1,23 @@ -import React, {useState, useEffect} from 'react' -import {KeyboardAvoidingView} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' -import {DEFAULT_SERVICE} from '#/lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {logger} from '#/logger' -import {ChooseAccountForm} from './ChooseAccountForm' -import {LoginForm} from './LoginForm' -import {ForgotPasswordForm} from './ForgotPasswordForm' -import {SetNewPasswordForm} from './SetNewPasswordForm' -import {PasswordUpdatedForm} from './PasswordUpdatedForm' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' -import {useSession, SessionAccount} from '#/state/session' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import React, {useEffect, useState} from 'react' +import {KeyboardAvoidingView} from 'react-native' +import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' + +import {DEFAULT_SERVICE} from '#/lib/constants' +import {logger} from '#/logger' import {useServiceQuery} from '#/state/queries/service' +import {SessionAccount, useSession} from '#/state/session' import {useLoggedOutView} from '#/state/shell/logged-out' +import {ChooseAccountForm} from './ChooseAccountForm' +import {ForgotPasswordForm} from './ForgotPasswordForm' +import {LoginForm} from './LoginForm' +import {PasswordUpdatedForm} from './PasswordUpdatedForm' +import {SetNewPasswordForm} from './SetNewPasswordForm' + enum Forms { Login, ChooseAccount, diff --git a/src/view/com/auth/login/LoginForm.tsx b/src/view/com/auth/login/LoginForm.tsx index fdba9f203f..acff2fc8bd 100644 --- a/src/view/com/auth/login/LoginForm.tsx +++ b/src/view/com/auth/login/LoginForm.tsx @@ -1,4 +1,19 @@ -import React, {useState, useRef} from 'react' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {isNetworkError} from 'lib/strings/errors' +import {cleanError} from 'lib/strings/errors' +import {createFullHandle} from 'lib/strings/handles' +import {toNiceDomain} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {useRef, useState} from 'react' import { ActivityIndicator, Keyboard, @@ -6,28 +21,14 @@ import { TouchableOpacity, View, } from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {createFullHandle} from 'lib/strings/handles' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useSessionApi} from '#/state/session' -import {cleanError} from 'lib/strings/errors' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {styles} from './styles' -import {useLingui} from '@lingui/react' -import {useDialogControl} from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {logger} from '#/logger' +import {useSessionApi} from '#/state/session' + +import {Text} from '../../util/text/Text' import {ServerInputDialog} from '../server-input' +import {styles} from './styles' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/login/PasswordUpdatedForm.tsx b/src/view/com/auth/login/PasswordUpdatedForm.tsx index 71f750b141..a88a1dc996 100644 --- a/src/view/com/auth/login/PasswordUpdatedForm.tsx +++ b/src/view/com/auth/login/PasswordUpdatedForm.tsx @@ -1,12 +1,13 @@ -import React, {useEffect} from 'react' -import {TouchableOpacity, View} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {styles} from './styles' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import React, {useEffect} from 'react' +import {TouchableOpacity, View} from 'react-native' + +import {Text} from '../../util/text/Text' +import {styles} from './styles' export const PasswordUpdatedForm = ({ onPressNext, diff --git a/src/view/com/auth/login/SetNewPasswordForm.tsx b/src/view/com/auth/login/SetNewPasswordForm.tsx index 6d1584c86c..18a95d629e 100644 --- a/src/view/com/auth/login/SetNewPasswordForm.tsx +++ b/src/view/com/auth/login/SetNewPasswordForm.tsx @@ -1,24 +1,26 @@ -import React, {useState, useEffect} from 'react' +import {BskyAgent} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {isNetworkError} from 'lib/strings/errors' +import {cleanError} from 'lib/strings/errors' +import {checkAndFormatResetCode} from 'lib/strings/password' +import {s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {useEffect, useState} from 'react' import { ActivityIndicator, TextInput, TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {BskyAgent} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {cleanError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' + import {logger} from '#/logger' + +import {Text} from '../../util/text/Text' import {styles} from './styles' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export const SetNewPasswordForm = ({ error, diff --git a/src/view/com/auth/login/styles.ts b/src/view/com/auth/login/styles.ts index 9dccc2803b..5adea4c87b 100644 --- a/src/view/com/auth/login/styles.ts +++ b/src/view/com/auth/login/styles.ts @@ -1,5 +1,6 @@ -import {StyleSheet} from 'react-native' import {colors} from 'lib/styles' +import {StyleSheet} from 'react-native' + import {isWeb} from '#/platform/detection' export const styles = StyleSheet.create({ diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index d3318bffd8..6b78c14156 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -1,19 +1,21 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {Button} from 'view/com/util/forms/Button' +import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' import {Text} from 'view/com/util/text/Text' import {ViewHeader} from 'view/com/util/ViewHeader' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' -import {Button} from 'view/com/util/forms/Button' -import {RecommendedFeedsItem} from './RecommendedFeedsItem' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {usePalette} from 'lib/hooks/usePalette' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds' +import {RecommendedFeedsItem} from './RecommendedFeedsItem' + type Props = { next: () => void } diff --git a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx index ea3e1f725d..92035a4929 100644 --- a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx @@ -1,25 +1,26 @@ -import React from 'react' -import {View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AppBskyFeedDefs, RichText as BskRichText} from '@atproto/api' -import {Text} from 'view/com/util/text/Text' -import {RichText} from 'view/com/util/text/RichText' -import {Button} from 'view/com/util/forms/Button' -import {UserAvatar} from 'view/com/util/UserAvatar' -import * as Toast from 'view/com/util/Toast' -import {HeartIcon} from 'lib/icons' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {HeartIcon} from 'lib/icons' import {sanitizeHandle} from 'lib/strings/handles' +import React from 'react' +import {View} from 'react-native' +import {Button} from 'view/com/util/forms/Button' +import {RichText} from 'view/com/util/text/RichText' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {UserAvatar} from 'view/com/util/UserAvatar' + +import {useAnalytics} from '#/lib/analytics/analytics' +import {logger} from '#/logger' import { - usePreferencesQuery, usePinFeedMutation, + usePreferencesQuery, useRemoveFeedMutation, } from '#/state/queries/preferences' -import {logger} from '#/logger' -import {useAnalytics} from '#/lib/analytics/analytics' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export function RecommendedFeedsItem({ item, diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx index d275f6c90e..a7a1eebed9 100644 --- a/src/view/com/auth/onboarding/RecommendedFollows.tsx +++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx @@ -1,21 +1,23 @@ +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {AppBskyActorDefs, moderateProfile} from '@atproto/api' -import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints' +import {Button} from 'view/com/util/forms/Button' +import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' import {Text} from 'view/com/util/text/Text' import {ViewHeader} from 'view/com/util/ViewHeader' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' -import {Button} from 'view/com/util/forms/Button' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {usePalette} from 'lib/hooks/usePalette' -import {RecommendedFollowsItem} from './RecommendedFollowsItem' + +import {logger} from '#/logger' +import {useModerationOpts} from '#/state/queries/preferences' import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows' import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' -import {useModerationOpts} from '#/state/queries/preferences' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {RecommendedFollowsItem} from './RecommendedFollowsItem' type Props = { next: () => void diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx index 07001068cc..e530dbd352 100644 --- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx +++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx @@ -1,20 +1,21 @@ -import React from 'react' -import {View, StyleSheet, ActivityIndicator} from 'react-native' -import {ProfileModeration, AppBskyActorDefs} from '@atproto/api' -import {Button} from '#/view/com/util/forms/Button' +import {AppBskyActorDefs, ProfileModeration} from '@atproto/api' +import {Trans} from '@lingui/macro' +import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {s} from 'lib/styles' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {Text} from 'view/com/util/text/Text' +import React from 'react' +import {ActivityIndicator, StyleSheet, View} from 'react-native' import Animated, {FadeInRight} from 'react-native-reanimated' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAnalytics} from 'lib/analytics/analytics' -import {Trans} from '@lingui/macro' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' + +import {logger} from '#/logger' import {Shadow, useProfileShadow} from '#/state/cache/profile-shadow' import {useProfileFollowMutationQueue} from '#/state/queries/profile' -import {logger} from '#/logger' +import {Button} from '#/view/com/util/forms/Button' type Props = { profile: AppBskyActorDefs.ProfileViewBasic diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx index b44b58f843..64de7fee09 100644 --- a/src/view/com/auth/onboarding/Welcome.tsx +++ b/src/view/com/auth/onboarding/Welcome.tsx @@ -1,5 +1,7 @@ import 'react' + import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints' + import {WelcomeDesktop} from './WelcomeDesktop' import {WelcomeMobile} from './WelcomeMobile' diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx index fdb31197c0..926c4fcda5 100644 --- a/src/view/com/auth/onboarding/WelcomeDesktop.tsx +++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx @@ -1,13 +1,13 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans} from '@lingui/macro' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' import {useMediaQuery} from 'react-responsive' -import {Text} from 'view/com/util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' import {Button} from 'view/com/util/forms/Button' -import {Trans} from '@lingui/macro' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Text} from 'view/com/util/text/Text' type Props = { next: () => void diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx index 5de1a78170..030eddee13 100644 --- a/src/view/com/auth/onboarding/WelcomeMobile.tsx +++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx @@ -1,12 +1,12 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans} from '@lingui/macro' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' -import {Text} from 'view/com/util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Button} from 'view/com/util/forms/Button' +import {Text} from 'view/com/util/text/Text' import {ViewHeader} from 'view/com/util/ViewHeader' -import {Trans} from '@lingui/macro' type Props = { next: () => void diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 32b5a3141a..39a395402f 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -1,17 +1,17 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {BSKY_SERVICE} from 'lib/constants' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' -import {BSKY_SERVICE} from 'lib/constants' -import * as persisted from '#/state/persisted' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {Text, P} from '#/components/Typography' import {Button, ButtonText} from '#/components/Button' -import * as ToggleButton from '#/components/forms/ToggleButton' +import * as Dialog from '#/components/Dialog' import * as TextField from '#/components/forms/TextField' +import * as ToggleButton from '#/components/forms/ToggleButton' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {P, Text} from '#/components/Typography' +import * as persisted from '#/state/persisted' export function ServerInputDialog({ control, diff --git a/src/view/com/auth/util/HelpTip.tsx b/src/view/com/auth/util/HelpTip.tsx index 65f7278d6b..349eb2f3a8 100644 --- a/src/view/com/auth/util/HelpTip.tsx +++ b/src/view/com/auth/util/HelpTip.tsx @@ -1,9 +1,9 @@ +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {InfoCircleIcon} from 'lib/icons' +import {colors, s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' -import {InfoCircleIcon} from 'lib/icons' -import {s, colors} from 'lib/styles' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' export function HelpTip({text}: {text: string}) { const bg = useColorSchemeStyle( diff --git a/src/view/com/auth/util/TextInput.tsx b/src/view/com/auth/util/TextInput.tsx index 38aff03849..33ebfd8027 100644 --- a/src/view/com/auth/util/TextInput.tsx +++ b/src/view/com/auth/util/TextInput.tsx @@ -1,9 +1,9 @@ -import React, {ComponentProps} from 'react' -import {StyleSheet, TextInput as RNTextInput, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' +import React, {ComponentProps} from 'react' +import {StyleSheet, TextInput as RNTextInput, View} from 'react-native' interface Props extends Omit, 'onChange'> { testID?: string diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 2855d4232c..57be93ca75 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -1,5 +1,21 @@ -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {RichText} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import * as apilib from 'lib/api/index' +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {insertMentionAt} from 'lib/strings/mention-manip' +import {shortenLinks} from 'lib/strings/rich-text-manip' +import {toShortUrl} from 'lib/strings/url-helpers' +import {colors, gradients, s} from 'lib/styles' import {observer} from 'mobx-react-lite' +import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection' +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import { ActivityIndicator, BackHandler, @@ -12,57 +28,43 @@ import { TouchableOpacity, View, } from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import LinearGradient from 'react-native-linear-gradient' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {RichText} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {ExternalEmbed} from './ExternalEmbed' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {GalleryModel} from 'state/models/media/gallery' +import {ComposerOpts} from 'state/shell/composer' +import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' + +import {logger} from '#/logger' +import {emitPostCreated} from '#/state/events' +import {useModalControls, useModals} from '#/state/modals' +import {useRequireAltTextEnabled} from '#/state/preferences' +import { + toPostLanguages, + useLanguagePrefs, + useLanguagePrefsApi, +} from '#/state/preferences/languages' +import {useProfileQuery} from '#/state/queries/profile' +import {ThreadgateSetting} from '#/state/queries/threadgate' +import {getAgent, useSession} from '#/state/session' +import {useComposerControls} from '#/state/shell/composer' + +import QuoteEmbed from '../util/post-embeds/QuoteEmbed' import {Text} from '../util/text/Text' import * as Toast from '../util/Toast' +import {UserAvatar} from '../util/UserAvatar' +import {CharProgress} from './char-progress/CharProgress' +import {ExternalEmbed} from './ExternalEmbed' +import {LabelsBtn} from './labels/LabelsBtn' +import {Gallery} from './photos/Gallery' +import {OpenCameraBtn} from './photos/OpenCameraBtn' +import {SelectPhotoBtn} from './photos/SelectPhotoBtn' +import {SelectLangBtn} from './select-language/SelectLangBtn' +import {SuggestedLanguage} from './select-language/SuggestedLanguage' // TODO: Prevent naming components that coincide with RN primitives // due to linting false positives import {TextInput, TextInputRef} from './text-input/TextInput' -import {CharProgress} from './char-progress/CharProgress' -import {UserAvatar} from '../util/UserAvatar' -import * as apilib from 'lib/api/index' -import {ComposerOpts} from 'state/shell/composer' -import {s, colors, gradients} from 'lib/styles' -import {cleanError} from 'lib/strings/errors' -import {shortenLinks} from 'lib/strings/rich-text-manip' -import {toShortUrl} from 'lib/strings/url-helpers' -import {SelectPhotoBtn} from './photos/SelectPhotoBtn' -import {OpenCameraBtn} from './photos/OpenCameraBtn' import {ThreadgateBtn} from './threadgate/ThreadgateBtn' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useExternalLinkFetch} from './useExternalLinkFetch' -import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection' -import QuoteEmbed from '../util/post-embeds/QuoteEmbed' -import {GalleryModel} from 'state/models/media/gallery' -import {Gallery} from './photos/Gallery' -import {MAX_GRAPHEME_LENGTH} from 'lib/constants' -import {LabelsBtn} from './labels/LabelsBtn' -import {SelectLangBtn} from './select-language/SelectLangBtn' -import {SuggestedLanguage} from './select-language/SuggestedLanguage' -import {insertMentionAt} from 'lib/strings/mention-manip' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModals, useModalControls} from '#/state/modals' -import {useRequireAltTextEnabled} from '#/state/preferences' -import { - useLanguagePrefs, - useLanguagePrefsApi, - toPostLanguages, -} from '#/state/preferences/languages' -import {useSession, getAgent} from '#/state/session' -import {useProfileQuery} from '#/state/queries/profile' -import {useComposerControls} from '#/state/shell/composer' -import {emitPostCreated} from '#/state/events' -import {ThreadgateSetting} from '#/state/queries/threadgate' -import {logger} from '#/logger' -import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx index 39a1473a3b..e6fe11565f 100644 --- a/src/view/com/composer/ComposerReplyTo.tsx +++ b/src/view/com/composer/ComposerReplyTo.tsx @@ -1,21 +1,21 @@ -import React from 'react' -import {LayoutAnimation, Pressable, StyleSheet, View} from 'react-native' -import {Image} from 'expo-image' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' import { AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedPost, } from '@atproto/api' -import {ComposerOptsPostRef} from 'state/shell/composer' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' import {usePalette} from 'lib/hooks/usePalette' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {Text} from 'view/com/util/text/Text' +import React from 'react' +import {LayoutAnimation, Pressable, StyleSheet, View} from 'react-native' +import {ComposerOptsPostRef} from 'state/shell/composer' import QuoteEmbed from 'view/com/util/post-embeds/QuoteEmbed' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) { const pal = usePalette('default') diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx index 02dd1bbd75..c2aebccd64 100644 --- a/src/view/com/composer/ExternalEmbed.tsx +++ b/src/view/com/composer/ExternalEmbed.tsx @@ -1,3 +1,9 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {ExternalEmbedDraft} from 'lib/api/index' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -5,14 +11,9 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + import {AutoSizedImage} from '../util/images/AutoSizedImage' import {Text} from '../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {ExternalEmbedDraft} from 'lib/api/index' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' export const ExternalEmbed = ({ link, diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index 632bb2634b..5f19a64bdd 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -1,13 +1,15 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' -import {UserAvatar} from '../util/UserAvatar' -import {Text} from '../util/text/Text' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSession} from '#/state/session' +import React from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' + import {useProfileQuery} from '#/state/queries/profile' +import {useSession} from '#/state/session' + +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { const {currentAccount} = useSession() diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx index a3fa78a59a..3c5cee492e 100644 --- a/src/view/com/composer/char-progress/CharProgress.tsx +++ b/src/view/com/composer/char-progress/CharProgress.tsx @@ -1,13 +1,14 @@ +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {Text} from '../../util/text/Text' // @ts-ignore no type definition -prf import ProgressCircle from 'react-native-progress/Circle' // @ts-ignore no type definition -prf import ProgressPie from 'react-native-progress/Pie' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {MAX_GRAPHEME_LENGTH} from 'lib/constants' + +import {Text} from '../../util/text/Text' const DANGER_LENGTH = MAX_GRAPHEME_LENGTH diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx index b880dd3306..11f3d03d37 100644 --- a/src/view/com/composer/labels/LabelsBtn.tsx +++ b/src/view/com/composer/labels/LabelsBtn.tsx @@ -1,13 +1,14 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {ShieldExclamation} from 'lib/icons' +import {isNative} from 'platform/detection' import React from 'react' import {Keyboard, StyleSheet} from 'react-native' import {Button} from 'view/com/util/forms/Button' -import {usePalette} from 'lib/hooks/usePalette' -import {ShieldExclamation} from 'lib/icons' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {isNative} from 'platform/detection' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + import {useModalControls} from '#/state/modals' export function LabelsBtn({ diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 69c8debb02..380b70c9c8 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -1,19 +1,20 @@ -import React, {useState} from 'react' -import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native' -import {GalleryModel} from 'state/models/media/gallery' -import {observer} from 'mobx-react-lite' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {s, colors} from 'lib/styles' -import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {Image} from 'expo-image' -import {Text} from 'view/com/util/text/Text' -import {Dimensions} from 'lib/media/types' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' +import {Dimensions} from 'lib/media/types' +import {colors, s} from 'lib/styles' +import {observer} from 'mobx-react-lite' import {isNative} from 'platform/detection' +import React, {useState} from 'react' +import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {GalleryModel} from 'state/models/media/gallery' +import {Text} from 'view/com/util/text/Text' + +import {useModalControls} from '#/state/modals' const IMAGE_GAP = 8 diff --git a/src/view/com/composer/photos/OpenCameraBtn.tsx b/src/view/com/composer/photos/OpenCameraBtn.tsx index 4353704d57..ce5318a2f6 100644 --- a/src/view/com/composer/photos/OpenCameraBtn.tsx +++ b/src/view/com/composer/photos/OpenCameraBtn.tsx @@ -1,20 +1,21 @@ -import React, {useCallback} from 'react' -import {TouchableOpacity, StyleSheet} from 'react-native' -import * as MediaLibrary from 'expo-media-library' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {openCamera} from 'lib/media/picker' -import {useCameraPermission} from 'lib/hooks/usePermissions' -import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants' -import {GalleryModel} from 'state/models/media/gallery' -import {isMobileWeb, isNative} from 'platform/detection' -import {logger} from '#/logger' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import * as MediaLibrary from 'expo-media-library' +import {useAnalytics} from 'lib/analytics/analytics' +import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {useCameraPermission} from 'lib/hooks/usePermissions' +import {openCamera} from 'lib/media/picker' +import {isMobileWeb, isNative} from 'platform/detection' +import React, {useCallback} from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' +import {GalleryModel} from 'state/models/media/gallery' + +import {logger} from '#/logger' type Props = { gallery: GalleryModel diff --git a/src/view/com/composer/photos/SelectPhotoBtn.tsx b/src/view/com/composer/photos/SelectPhotoBtn.tsx index f7fa9502d6..1e0e64090f 100644 --- a/src/view/com/composer/photos/SelectPhotoBtn.tsx +++ b/src/view/com/composer/photos/SelectPhotoBtn.tsx @@ -1,17 +1,17 @@ -import React, {useCallback} from 'react' -import {TouchableOpacity, StyleSheet} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions' -import {GalleryModel} from 'state/models/media/gallery' -import {HITSLOP_10} from 'lib/constants' -import {isNative} from 'platform/detection' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions' +import {isNative} from 'platform/detection' +import React, {useCallback} from 'react' +import {StyleSheet, TouchableOpacity} from 'react-native' +import {GalleryModel} from 'state/models/media/gallery' type Props = { gallery: GalleryModel diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx index 78b1e9ba27..bfcf248ee1 100644 --- a/src/view/com/composer/select-language/SelectLangBtn.tsx +++ b/src/view/com/composer/select-language/SelectLangBtn.tsx @@ -1,27 +1,29 @@ -import React, {useCallback, useMemo} from 'react' -import {StyleSheet, Keyboard} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' +import {msg, t} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from 'platform/detection' +import React, {useCallback, useMemo} from 'react' +import {Keyboard, StyleSheet} from 'react-native' import { DropdownButton, DropdownItem, DropdownItemButton, } from 'view/com/util/forms/DropdownButton' -import {usePalette} from 'lib/hooks/usePalette' -import {isNative} from 'platform/detection' -import {codeToLanguageName} from '../../../../locale/helpers' +import {Text} from 'view/com/util/text/Text' + import {useModalControls} from '#/state/modals' import { + hasPostLanguage, + toPostLanguages, useLanguagePrefs, useLanguagePrefsApi, - toPostLanguages, - hasPostLanguage, } from '#/state/preferences/languages' -import {t, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {codeToLanguageName} from '../../../../locale/helpers' export function SelectLangBtn() { const pal = usePalette('default') diff --git a/src/view/com/composer/select-language/SuggestedLanguage.tsx b/src/view/com/composer/select-language/SuggestedLanguage.tsx index 0bf62ae0d8..97a2a98300 100644 --- a/src/view/com/composer/select-language/SuggestedLanguage.tsx +++ b/src/view/com/composer/select-language/SuggestedLanguage.tsx @@ -1,22 +1,24 @@ +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import lande from 'lande' import React, {useEffect, useState} from 'react' import {StyleSheet, View} from 'react-native' -import lande from 'lande' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Text} from '../../util/text/Text' -import {Button} from '../../util/forms/Button' + +import {usePalette} from '#/lib/hooks/usePalette' +import {s} from '#/lib/styles' import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers' import { toPostLanguages, useLanguagePrefs, useLanguagePrefsApi, } from '#/state/preferences/languages' -import {usePalette} from '#/lib/hooks/usePalette' -import {s} from '#/lib/styles' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' + +import {Button} from '../../util/forms/Button' +import {Text} from '../../util/text/Text' // fallbacks for safari const onIdle = globalThis.requestIdleCallback || (cb => setTimeout(cb, 1)) diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 20be585c25..435adfa33c 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -1,10 +1,24 @@ +import {AppBskyRichtextFacet, RichText} from '@atproto/api' +import PasteInput, { + PastedFile, + PasteInputRef, +} from '@mattermost/react-native-paste-input' +import {POST_IMG_MAX} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {downloadAndResize} from 'lib/media/manip' +import {isUriImage} from 'lib/media/util' +import {cleanError} from 'lib/strings/errors' +import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' +import {useTheme} from 'lib/ThemeContext' +import isEqual from 'lodash.isequal' +import {isIOS} from 'platform/detection' import React, { + ComponentProps, forwardRef, useCallback, - useRef, useMemo, + useRef, useState, - ComponentProps, } from 'react' import { NativeSyntheticEvent, @@ -13,22 +27,9 @@ import { TextInputSelectionChangeEventData, View, } from 'react-native' -import PasteInput, { - PastedFile, - PasteInputRef, -} from '@mattermost/react-native-paste-input' -import {AppBskyRichtextFacet, RichText} from '@atproto/api' -import isEqual from 'lodash.isequal' -import {Autocomplete} from './mobile/Autocomplete' import {Text} from 'view/com/util/text/Text' -import {cleanError} from 'lib/strings/errors' -import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {isUriImage} from 'lib/media/util' -import {downloadAndResize} from 'lib/media/manip' -import {POST_IMG_MAX} from 'lib/constants' -import {isIOS} from 'platform/detection' + +import {Autocomplete} from './mobile/Autocomplete' export interface TextInputRef { focus: () => void diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index c62d11201f..6b363558ab 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -1,28 +1,30 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {RichText, AppBskyRichtextFacet} from '@atproto/api' -import EventEmitter from 'eventemitter3' -import {useEditor, EditorContent, JSONContent} from '@tiptap/react' +import {AppBskyRichtextFacet, RichText} from '@atproto/api' +import {Trans} from '@lingui/macro' import {Document} from '@tiptap/extension-document' -import History from '@tiptap/extension-history' import Hardbreak from '@tiptap/extension-hard-break' +import History from '@tiptap/extension-history' import {Mention} from '@tiptap/extension-mention' import {Paragraph} from '@tiptap/extension-paragraph' import {Placeholder} from '@tiptap/extension-placeholder' import {Text as TiptapText} from '@tiptap/extension-text' -import isEqual from 'lodash.isequal' -import {createSuggestion} from './web/Autocomplete' +import {generateJSON} from '@tiptap/html' +import {EditorContent, JSONContent, useEditor} from '@tiptap/react' +import EventEmitter from 'eventemitter3' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {isUriImage, blobToDataUri} from 'lib/media/util' +import {blobToDataUri, isUriImage} from 'lib/media/util' +import isEqual from 'lodash.isequal' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' + +import {Portal} from '#/components/Portal' +import {usePalette} from '#/lib/hooks/usePalette' +import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' + +import {Text} from '../../util/text/Text' +import {createSuggestion} from './web/Autocomplete' import {Emoji} from './web/EmojiPicker.web' import {LinkDecorator} from './web/LinkDecorator' -import {generateJSON} from '@tiptap/html' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' -import {usePalette} from '#/lib/hooks/usePalette' -import {Portal} from '#/components/Portal' -import {Text} from '../../util/text/Text' -import {Trans} from '@lingui/macro' -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' import {TagDecorator} from './web/TagDecorator' export interface TextInputRef { diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx index c400aa48d5..1e8b7900b5 100644 --- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx +++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx @@ -1,13 +1,15 @@ -import React, {useEffect, useRef} from 'react' -import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {Trans} from '@lingui/macro' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' +import React, {useEffect, useRef} from 'react' +import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' -import {useGrapheme} from '../hooks/useGrapheme' + import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' -import {Trans} from '@lingui/macro' -import {AppBskyActorDefs} from '@atproto/api' + +import {useGrapheme} from '../hooks/useGrapheme' export function Autocomplete({ prefix, diff --git a/src/view/com/composer/text-input/web/Autocomplete.tsx b/src/view/com/composer/text-input/web/Autocomplete.tsx index 76058fed34..21fae297c6 100644 --- a/src/view/com/composer/text-input/web/Autocomplete.tsx +++ b/src/view/com/composer/text-input/web/Autocomplete.tsx @@ -1,3 +1,11 @@ +import {Trans} from '@lingui/macro' +import {ReactRenderer} from '@tiptap/react' +import { + SuggestionKeyDownProps, + SuggestionOptions, + SuggestionProps, +} from '@tiptap/suggestion' +import {usePalette} from 'lib/hooks/usePalette' import React, { forwardRef, useEffect, @@ -5,19 +13,13 @@ import React, { useState, } from 'react' import {Pressable, StyleSheet, View} from 'react-native' -import {ReactRenderer} from '@tiptap/react' import tippy, {Instance as TippyInstance} from 'tippy.js' -import { - SuggestionOptions, - SuggestionProps, - SuggestionKeyDownProps, -} from '@tiptap/suggestion' -import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete' -import {usePalette} from 'lib/hooks/usePalette' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' + +import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete' + import {useGrapheme} from '../hooks/useGrapheme' -import {Trans} from '@lingui/macro' interface MentionListRef { onKeyDown: (props: SuggestionKeyDownProps) => boolean diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx index 1493621160..d918953de9 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -1,11 +1,12 @@ -import React from 'react' import Picker from '@emoji-mart/react' +import React from 'react' import { StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View, } from 'react-native' + import {textInputWebEmitter} from '../TextInput.web' const HEIGHT_OFFSET = 40 diff --git a/src/view/com/composer/text-input/web/LinkDecorator.ts b/src/view/com/composer/text-input/web/LinkDecorator.ts index e36ac80e42..207dbe7e40 100644 --- a/src/view/com/composer/text-input/web/LinkDecorator.ts +++ b/src/view/com/composer/text-input/web/LinkDecorator.ts @@ -14,12 +14,11 @@ * the facet-set. */ -import {Mark} from '@tiptap/core' -import {Plugin, PluginKey} from '@tiptap/pm/state' -import {Node as ProsemirrorNode} from '@tiptap/pm/model' -import {Decoration, DecorationSet} from '@tiptap/pm/view' import {URL_REGEX} from '@atproto/api' - +import {Mark} from '@tiptap/core' +import {Node as ProsemirrorNode} from '@tiptap/pm/model' +import {Plugin, PluginKey} from '@tiptap/pm/state' +import {Decoration, DecorationSet} from '@tiptap/pm/view' import {isValidDomain} from 'lib/strings/url-helpers' export const LinkDecorator = Mark.create({ diff --git a/src/view/com/composer/text-input/web/TagDecorator.ts b/src/view/com/composer/text-input/web/TagDecorator.ts index 2bf3184a8c..9225fd6bf9 100644 --- a/src/view/com/composer/text-input/web/TagDecorator.ts +++ b/src/view/com/composer/text-input/web/TagDecorator.ts @@ -14,11 +14,11 @@ * the facet-set. */ -import {Mark} from '@tiptap/core' -import {Plugin, PluginKey} from '@tiptap/pm/state' -import {Node as ProsemirrorNode} from '@tiptap/pm/model' -import {Decoration, DecorationSet} from '@tiptap/pm/view' import {TAG_REGEX, TRAILING_PUNCTUATION_REGEX} from '@atproto/api' +import {Mark} from '@tiptap/core' +import {Node as ProsemirrorNode} from '@tiptap/pm/model' +import {Plugin, PluginKey} from '@tiptap/pm/state' +import {Decoration, DecorationSet} from '@tiptap/pm/view' function getDecorations(doc: ProsemirrorNode) { const decorations: Decoration[] = [] diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx index ebbc613fff..0647d4215b 100644 --- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx +++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx @@ -1,17 +1,18 @@ -import React from 'react' -import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useAnalytics} from 'lib/analytics/analytics' import {HITSLOP_10} from 'lib/constants' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' +import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import {Keyboard, StyleSheet, TouchableOpacity} from 'react-native' + +import {isNative} from '#/platform/detection' import {useModalControls} from '#/state/modals' import {ThreadgateSetting} from '#/state/queries/threadgate' -import {isNative} from '#/platform/detection' export function ThreadgateBtn({ threadgate, diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts index 54773d565c..5daff41eab 100644 --- a/src/view/com/composer/useExternalLinkFetch.ts +++ b/src/view/com/composer/useExternalLinkFetch.ts @@ -1,24 +1,25 @@ -import {useState, useEffect} from 'react' -import {ImageModel} from 'state/models/media/image' import * as apilib from 'lib/api/index' -import {getLinkMeta} from 'lib/link-meta/link-meta' +import {POST_IMG_MAX} from 'lib/constants' import { - getPostAsQuote, getFeedAsEmbed, getListAsEmbed, + getPostAsQuote, } from 'lib/link-meta/bsky' +import {getLinkMeta} from 'lib/link-meta/link-meta' import {downloadAndResize} from 'lib/media/manip' import { - isBskyPostUrl, isBskyCustomFeedUrl, isBskyListUrl, + isBskyPostUrl, } from 'lib/strings/url-helpers' +import {useEffect, useState} from 'react' +import {ImageModel} from 'state/models/media/image' import {ComposerOpts} from 'state/shell/composer' -import {POST_IMG_MAX} from 'lib/constants' + import {logger} from '#/logger' -import {getAgent} from '#/state/session' -import {useGetPost} from '#/state/queries/post' import {useFetchDid} from '#/state/queries/handle' +import {useGetPost} from '#/state/queries/post' +import {getAgent} from '#/state/session' export function useExternalLinkFetch({ setQuote, diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index e6b5d1fb68..1694877534 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -1,27 +1,29 @@ -import React from 'react' -import {useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {useQueryClient} from '@tanstack/react-query' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {MainScrollProvider} from '../util/MainScrollProvider' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useSetMinimalShellMode} from '#/state/shell' -import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' -import {ComposeIcon2} from 'lib/icons' -import {s} from 'lib/styles' -import {View, useWindowDimensions} from 'react-native' -import {ListMethods} from '../util/List' -import {Feed} from '../posts/Feed' -import {FAB} from '../util/fab/FAB' -import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useSession} from '#/state/session' -import {useComposerControls} from '#/state/shell/composer' -import {listenSoftReset} from '#/state/events' -import {truncateAndInvalidate} from '#/state/queries/util' -import {TabState, getTabState, getRootNavigation} from '#/lib/routes/helpers' +import {useNavigation} from '@react-navigation/native' +import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ComposeIcon2} from 'lib/icons' +import {s} from 'lib/styles' +import React from 'react' +import {useWindowDimensions, View} from 'react-native' + +import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers' import {isNative} from '#/platform/detection' +import {listenSoftReset} from '#/state/events' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' +import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' +import {truncateAndInvalidate} from '#/state/queries/util' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' + +import {Feed} from '../posts/Feed' +import {FAB} from '../util/fab/FAB' +import {ListMethods} from '../util/List' +import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn' +import {MainScrollProvider} from '../util/MainScrollProvider' const POLL_FREQ = 60e3 // 60sec diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index 4af62f6f63..4e0865af57 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -1,30 +1,32 @@ +import {AtUri} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' +import {usePalette} from 'lib/hooks/usePalette' +import {sanitizeHandle} from 'lib/strings/handles' +import {pluralize} from 'lib/strings/helpers' +import {s} from 'lib/styles' import React from 'react' import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {RichText} from '#/components/RichText' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {UserAvatar} from '../util/UserAvatar' -import {pluralize} from 'lib/strings/helpers' -import {AtUri} from '@atproto/api' import * as Toast from 'view/com/util/Toast' -import {sanitizeHandle} from 'lib/strings/handles' + +import {useTheme} from '#/alf' +import {RichText} from '#/components/RichText' import {logger} from '#/logger' import {useModalControls} from '#/state/modals' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' import { usePinFeedMutation, - UsePreferencesQueryResponse, usePreferencesQuery, - useSaveFeedMutation, + UsePreferencesQueryResponse, useRemoveFeedMutation, + useSaveFeedMutation, } from '#/state/queries/preferences' -import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import {useTheme} from '#/alf' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' + +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' export function FeedSourceCard({ feedUri, diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index e9cf9e5359..702fe0d4e8 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -1,22 +1,24 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useQueryClient} from '@tanstack/react-query' +import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {useQueryClient} from '@tanstack/react-query' -import {List, ListRef} from '../util/List' -import {FeedSourceCardLoaded} from './FeedSourceCard' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {Text} from '../util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useProfileFeedgensQuery, RQKEY} from '#/state/queries/profile-feedgens' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' + import {cleanError} from '#/lib/strings/errors' import {useTheme} from '#/lib/ThemeContext' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {hydrateFeedGenerator} from '#/state/queries/feed' -import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {logger} from '#/logger' import {isNative} from '#/platform/detection' -import {useLingui} from '@lingui/react' +import {hydrateFeedGenerator} from '#/state/queries/feed' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' +import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List, ListRef} from '../util/List' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {Text} from '../util/text/Text' +import {FeedSourceCardLoaded} from './FeedSourceCard' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/home/HomeHeader.tsx b/src/view/com/home/HomeHeader.tsx index aa3ecb7fc2..13819142a2 100644 --- a/src/view/com/home/HomeHeader.tsx +++ b/src/view/com/home/HomeHeader.tsx @@ -1,12 +1,14 @@ -import React from 'react' -import {RenderTabBarFnProps} from 'view/com/pager/Pager' -import {HomeHeaderLayout} from './HomeHeaderLayout' -import {FeedSourceInfo} from '#/state/queries/feed' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' import {isWeb} from 'platform/detection' -import {TabBar} from '../pager/TabBar' +import React from 'react' +import {RenderTabBarFnProps} from 'view/com/pager/Pager' + import {usePalette} from '#/lib/hooks/usePalette' +import {FeedSourceInfo} from '#/state/queries/feed' + +import {TabBar} from '../pager/TabBar' +import {HomeHeaderLayout} from './HomeHeaderLayout' export function HomeHeader( props: RenderTabBarFnProps & { diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 9818b56f6f..25d90e4e4b 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,20 +1,22 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' -import {Logo} from '#/view/icons/Logo' -import {Link} from '../util/Link' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' -import {CogIcon} from '#/lib/icons' +import {useLingui} from '@lingui/react' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import Animated from 'react-native-reanimated' + +import {CogIcon} from '#/lib/icons' import {useShellLayout} from '#/state/shell/shell-layout' +import {Logo} from '#/view/icons/Logo' + +import {Link} from '../util/Link' +import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { children: React.ReactNode diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index d7b7231c60..c621c80d2a 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,23 +1,24 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {Link} from '../util/Link' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import Animated from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {HITSLOP_10} from 'lib/constants' import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import Animated from 'react-native-reanimated' + +import {atoms} from '#/alf' +import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' +import {Link as Link2} from '#/components/Link' +import {IS_DEV} from '#/env' import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' -import {isWeb} from 'platform/detection' import {Logo} from '#/view/icons/Logo' -import {IS_DEV} from '#/env' -import {atoms} from '#/alf' -import {Link as Link2} from '#/components/Link' -import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' +import {Link} from '../util/Link' export function HomeHeaderLayoutMobile({ children, diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index 3401adaff4..eecc3f6f36 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. * */ -import React from 'react' -import {createHitslop} from 'lib/constants' -import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' import {t} from '@lingui/macro' +import {createHitslop} from 'lib/constants' +import React from 'react' +import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native' type Props = { onRequestClose: () => void diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 414f98a611..85963067c5 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -1,28 +1,28 @@ -import React, {useState} from 'react' - -import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native' import {Image} from 'expo-image' +import React, {useState} from 'react' +import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' import Animated, { runOnJS, + useAnimatedReaction, useAnimatedRef, useAnimatedStyle, - useAnimatedReaction, useSharedValue, withDecay, withSpring, } from 'react-native-reanimated' -import {GestureDetector, Gesture} from 'react-native-gesture-handler' + +import type {Dimensions as ImageDimensions, ImageSource} from '../../@types' import useImageDimensions from '../../hooks/useImageDimensions' import { - createTransform, - readTransform, applyRounding, + createTransform, prependPan, prependPinch, prependTransform, + readTransform, TransformMatrix, } from '../../transforms' -import type {ImageSource, Dimensions as ImageDimensions} from '../../@types' const SCREEN = Dimensions.get('window') const MIN_DOUBLE_TAP_SCALE = 2 diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index 383490f4f1..5fabeb1703 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -6,10 +6,10 @@ * */ -import React, {useState} from 'react' - -import {Dimensions, StyleSheet} from 'react-native' import {Image} from 'expo-image' +import React, {useState} from 'react' +import {Dimensions, StyleSheet} from 'react-native' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' import Animated, { interpolate, runOnJS, @@ -17,12 +17,11 @@ import Animated, { useAnimatedStyle, useSharedValue, } from 'react-native-reanimated' + import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import {Dimensions as ImageDimensions, ImageSource} from '../../@types' import useImageDimensions from '../../hooks/useImageDimensions' - -import {ImageSource, Dimensions as ImageDimensions} from '../../@types' import {ImageLoading} from './ImageLoading' const SWIPE_CLOSE_OFFSET = 75 diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index 08b99bf9ee..4cb7903efa 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -2,6 +2,7 @@ import React from 'react' import {View} from 'react-native' + import {ImageSource} from '../../@types' type Props = { diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx index 9667fcaa7b..318e7d8da2 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx @@ -7,7 +7,6 @@ */ import React from 'react' - import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native' const SCREEN = Dimensions.get('screen') diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts index cb46fd0d9c..46f9f22953 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts @@ -8,6 +8,7 @@ import {useEffect, useState} from 'react' import {Image, ImageURISource} from 'react-native' + import {Dimensions, ImageSource} from '../@types' const CACHE_SIZE = 50 diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index ff8fdb86d3..1432b34ff8 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -9,15 +9,14 @@ // https://github.com/jobtoday/react-native-image-viewing import React, {ComponentType, useCallback, useMemo, useState} from 'react' -import {StyleSheet, View, Platform} from 'react-native' - -import ImageItem from './components/ImageItem/ImageItem' -import ImageDefaultHeader from './components/ImageDefaultHeader' - -import {ImageSource} from './@types' +import {Platform, StyleSheet, View} from 'react-native' +import PagerView from 'react-native-pager-view' import Animated, {useAnimatedStyle, withSpring} from 'react-native-reanimated' import {Edge, SafeAreaView} from 'react-native-safe-area-context' -import PagerView from 'react-native-pager-view' + +import {ImageSource} from './@types' +import ImageDefaultHeader from './components/ImageDefaultHeader' +import ImageItem from './components/ImageItem/ImageItem' type Props = { images: ImageSource[] diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index 2ee5b8d593..b3e5dfb9b2 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -1,22 +1,24 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import * as MediaLibrary from 'expo-media-library' +import {saveImageToMediaLibrary, shareImageModal} from 'lib/media/manip' +import {colors, s} from 'lib/styles' +import {isIOS} from 'platform/detection' import React from 'react' import {LayoutAnimation, StyleSheet, View} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import ImageView from './ImageViewing' -import {shareImageModal, saveImageToMediaLibrary} from 'lib/media/manip' -import * as Toast from '../util/Toast' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' -import {Button} from '../util/forms/Button' -import {isIOS} from 'platform/detection' -import * as MediaLibrary from 'expo-media-library' + import { + ImagesLightbox, + ProfileImageLightbox, useLightbox, useLightboxControls, - ProfileImageLightbox, - ImagesLightbox, } from '#/state/lightbox' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import ImageView from './ImageViewing' export function Lightbox() { const {activeLightbox} = useLightbox() diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index fb97c30a45..e3c3d5acde 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,29 +1,31 @@ -import React, {useCallback, useEffect, useState} from 'react' -import { - Image, - ImageStyle, - TouchableOpacity, - TouchableWithoutFeedback, - StyleSheet, - View, - Pressable, -} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {colors, s} from 'lib/styles' -import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' -import {Text} from '../util/text/Text' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {colors, s} from 'lib/styles' +import React, {useCallback, useEffect, useState} from 'react' +import { + Image, + ImageStyle, + Pressable, + StyleSheet, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native' + +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import { - useLightbox, - useLightboxControls, ImagesLightbox, ProfileImageLightbox, + useLightbox, + useLightboxControls, } from '#/state/lightbox' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' + +import {Text} from '../util/text/Text' +import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' interface Img { uri: string diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx index 19842eb54d..0a36902a42 100644 --- a/src/view/com/lists/ListCard.tsx +++ b/src/view/com/lists/ListCard.tsx @@ -1,18 +1,20 @@ -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api' -import {Link} from '../util/Link' -import {Text} from '../util/text/Text' -import {RichText as RichTextCom} from '#/components/RichText' -import {UserAvatar} from '../util/UserAvatar' -import {s} from 'lib/styles' +import {AppBskyGraphDefs, AtUri, RichText} from '@atproto/api' +import {Trans} from '@lingui/macro' import {usePalette} from 'lib/hooks/usePalette' -import {useSession} from '#/state/session' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {Trans} from '@lingui/macro' +import {s} from 'lib/styles' +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + import {atoms as a} from '#/alf' +import {RichText as RichTextCom} from '#/components/RichText' +import {useSession} from '#/state/session' + +import {Link} from '../util/Link' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' export const ListCard = ({ testID, diff --git a/src/view/com/lists/ListMembers.tsx b/src/view/com/lists/ListMembers.tsx index 4f2b56426e..796db89673 100644 --- a/src/view/com/lists/ListMembers.tsx +++ b/src/view/com/lists/ListMembers.tsx @@ -1,3 +1,8 @@ +import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import { ActivityIndicator, @@ -6,22 +11,19 @@ import { View, ViewStyle, } from 'react-native' -import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' -import {List, ListRef} from '../util/List' -import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {ProfileCard} from '../profile/ProfileCard' -import {Button} from '../util/forms/Button' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useListMembersQuery} from '#/state/queries/list-members' + +import {cleanError} from '#/lib/strings/errors' import {logger} from '#/logger' import {useModalControls} from '#/state/modals' +import {useListMembersQuery} from '#/state/queries/list-members' import {useSession} from '#/state/session' -import {cleanError} from '#/lib/strings/errors' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + +import {ProfileCard} from '../profile/ProfileCard' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {List, ListRef} from '../util/List' +import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_ITEM = {_reactKey: '__empty__'} diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index e9d2e4f0fe..8d746ca340 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -1,3 +1,8 @@ +import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' +import {Trans} from '@lingui/macro' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -8,18 +13,15 @@ import { View, ViewStyle, } from 'react-native' -import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {ListCard} from './ListCard' -import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {List} from '../util/List' -import {s} from 'lib/styles' -import {logger} from '#/logger' -import {Trans} from '@lingui/macro' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List} from '../util/List' +import {Text} from '../util/text/Text' +import {ListCard} from './ListCard' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index a47b25bed4..d2344914ae 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -1,21 +1,23 @@ -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' -import {List, ListRef} from '../util/List' -import {ListCard} from './ListCard' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {Text} from '../util/text/Text' import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' -import {useProfileListsQuery, RQKEY} from '#/state/queries/profile-lists' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + import {cleanError} from '#/lib/strings/errors' import {useTheme} from '#/lib/ThemeContext' -import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {logger} from '#/logger' import {isNative} from '#/platform/detection' -import {useLingui} from '@lingui/react' +import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' +import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List, ListRef} from '../util/List' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {Text} from '../util/text/Text' +import {ListCard} from './ListCard' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx index a8913dd54c..2346f6d4e0 100644 --- a/src/view/com/modals/AddAppPasswords.tsx +++ b/src/view/com/modals/AddAppPasswords.tsx @@ -1,25 +1,27 @@ -import React, {useState} from 'react' -import {StyleSheet, TextInput, View, TouchableOpacity} from 'react-native' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isNative} from 'platform/detection' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import Clipboard from '@react-native-clipboard/clipboard' -import * as Toast from '../util/Toast' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import Clipboard from '@react-native-clipboard/clipboard' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {isNative} from 'platform/detection' +import React, {useState} from 'react' +import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native' + +import {logger} from '#/logger' import {useModalControls} from '#/state/modals' import { - useAppPasswordsQuery, useAppPasswordCreateMutation, + useAppPasswordsQuery, } from '#/state/queries/app-passwords' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' + export const snapPoints = ['70%'] const shadesOfBlue: string[] = [ diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx index 17ce05cda8..e3e872a172 100644 --- a/src/view/com/modals/AltImage.tsx +++ b/src/view/com/modals/AltImage.tsx @@ -1,29 +1,31 @@ -import React, {useMemo, useCallback, useState} from 'react' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' +import {MAX_ALT_TEXT} from 'lib/constants' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {usePalette} from 'lib/hooks/usePalette' +import {enforceLen} from 'lib/strings/helpers' +import {gradients, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' +import React, {useCallback, useMemo, useState} from 'react' import { ImageStyle, - StyleSheet, - TouchableOpacity, - View, - TextInput as RNTextInput, - useWindowDimensions, ScrollView as RNScrollView, + StyleSheet, + TextInput as RNTextInput, + TouchableOpacity, + useWindowDimensions, + View, } from 'react-native' -import {ScrollView, TextInput} from './util' -import {Image} from 'expo-image' -import {usePalette} from 'lib/hooks/usePalette' -import {gradients, s} from 'lib/styles' -import {enforceLen} from 'lib/strings/helpers' -import {MAX_ALT_TEXT} from 'lib/constants' -import {useTheme} from 'lib/ThemeContext' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {Text} from '../util/text/Text' import LinearGradient from 'react-native-linear-gradient' -import {isWeb} from 'platform/detection' import {ImageModel} from 'state/models/media/image' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' + import {useModalControls} from '#/state/modals' +import {Text} from '../util/text/Text' +import {ScrollView, TextInput} from './util' + export const snapPoints = ['100%'] interface Props { diff --git a/src/view/com/modals/AppealLabel.tsx b/src/view/com/modals/AppealLabel.tsx index b0aaaf6255..5756452a2a 100644 --- a/src/view/com/modals/AppealLabel.tsx +++ b/src/view/com/modals/AppealLabel.tsx @@ -1,17 +1,19 @@ +import {ComAtprotoModerationDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, s} from 'lib/styles' import React, {useState} from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {ComAtprotoModerationDefs} from '@atproto/api' -import {ScrollView, TextInput} from './util' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import {CharProgress} from '../composer/char-progress/CharProgress' -import {getAgent} from '#/state/session' -import * as Toast from '../util/Toast' + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {useModalControls} from '#/state/modals' +import {getAgent} from '#/state/session' + +import {CharProgress} from '../composer/char-progress/CharProgress' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView, TextInput} from './util' export const snapPoints = ['40%'] diff --git a/src/view/com/modals/BirthDateSettings.tsx b/src/view/com/modals/BirthDateSettings.tsx index 1cab959896..dc8b914a50 100644 --- a/src/view/com/modals/BirthDateSettings.tsx +++ b/src/view/com/modals/BirthDateSettings.tsx @@ -1,3 +1,10 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -5,23 +12,18 @@ import { TouchableOpacity, View, } from 'react-native' -import {Text} from '../util/text/Text' -import {DateInput} from '../util/forms/DateInput' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {logger} from '#/logger' import {useModalControls} from '#/state/modals' import { usePreferencesQuery, - usePreferencesSetBirthDateMutation, UsePreferencesQueryResponse, + usePreferencesSetBirthDateMutation, } from '#/state/queries/preferences' -import {logger} from '#/logger' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {DateInput} from '../util/forms/DateInput' +import {Text} from '../util/text/Text' export const snapPoints = ['50%', '90%'] diff --git a/src/view/com/modals/ChangeEmail.tsx b/src/view/com/modals/ChangeEmail.tsx index c5672bc814..23d0b6f0d7 100644 --- a/src/view/com/modals/ChangeEmail.tsx +++ b/src/view/com/modals/ChangeEmail.tsx @@ -1,19 +1,21 @@ -import React, {useState} from 'react' -import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native' -import {ScrollView, TextInput} from './util' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {ErrorMessage} from '../util/error/ErrorMessage' -import * as Toast from '../util/Toast' -import {s, colors} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {cleanError} from 'lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' +import React, {useState} from 'react' +import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native' + import {useModalControls} from '#/state/modals' -import {useSession, useSessionApi, getAgent} from '#/state/session' +import {getAgent, useSession, useSessionApi} from '#/state/session' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView, TextInput} from './util' enum Stages { InputEmail, diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index a43c30c29c..1521b2d5cc 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -1,38 +1,40 @@ -import React, {useState} from 'react' -import Clipboard from '@react-native-clipboard/clipboard' import {ComAtprotoServerDescribeServer} from '@atproto/api' -import * as Toast from '../util/Toast' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import Clipboard from '@react-native-clipboard/clipboard' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {cleanError} from 'lib/strings/errors' +import {createFullHandle, makeValidHandle} from 'lib/strings/handles' +import {s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {useState} from 'react' import { ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {ScrollView, TextInput} from './util' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {SelectableBtn} from '../util/forms/SelectableBtn' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {s} from 'lib/styles' -import {createFullHandle, makeValidHandle} from 'lib/strings/handles' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useAnalytics} from 'lib/analytics/analytics' -import {cleanError} from 'lib/strings/errors' + import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' +import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle' import {useServiceQuery} from '#/state/queries/service' -import {useUpdateHandleMutation, useFetchDid} from '#/state/queries/handle' import { + getAgent, + SessionAccount, useSession, useSessionApi, - SessionAccount, - getAgent, } from '#/state/session' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {SelectableBtn} from '../util/forms/SelectableBtn' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView, TextInput} from './util' + export const snapPoints = ['100%'] export type Props = {onChanged: () => void} diff --git a/src/view/com/modals/ChangePassword.tsx b/src/view/com/modals/ChangePassword.tsx index d8add97946..ba60e5d889 100644 --- a/src/view/com/modals/ChangePassword.tsx +++ b/src/view/com/modals/ChangePassword.tsx @@ -1,3 +1,13 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import * as EmailValidator from 'email-validator' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError, isNetworkError} from 'lib/strings/errors' +import {checkAndFormatResetCode} from 'lib/strings/password' +import {colors, s} from 'lib/styles' +import {isAndroid, isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -6,24 +16,16 @@ import { TouchableOpacity, View, } from 'react-native' -import {ScrollView} from './util' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {TextInput} from './util' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isAndroid, isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError, isNetworkError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import {useSession, getAgent} from '#/state/session' -import * as EmailValidator from 'email-validator' + import {logger} from '#/logger' +import {useModalControls} from '#/state/modals' +import {getAgent, useSession} from '#/state/session' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import {ScrollView} from './util' +import {TextInput} from './util' enum Stages { RequestCode, diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 307897fb8a..470d3cf61f 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/src/view/com/modals/Confirm.tsx @@ -1,3 +1,9 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {cleanError} from 'lib/strings/errors' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -5,17 +11,13 @@ import { TouchableOpacity, View, } from 'react-native' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {cleanError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' + import type {ConfirmModal} from '#/state/modals' import {useModalControls} from '#/state/modals' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' + export const snapPoints = ['50%'] export function Component({ diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx index 328d23dc29..ed0b6dcf82 100644 --- a/src/view/com/modals/ContentFilteringSettings.tsx +++ b/src/view/com/modals/ContentFilteringSettings.tsx @@ -1,30 +1,32 @@ -import React from 'react' import {LabelPreference} from '@atproto/api' -import {StyleSheet, Pressable, View, Linking} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' -import {ScrollView} from './util' -import {s, colors, gradients} from 'lib/styles' -import {Text} from '../util/text/Text' -import {TextLink} from '../util/Link' -import {ToggleButton} from '../util/forms/ToggleButton' -import {Button} from '../util/forms/Button' -import {usePalette} from 'lib/hooks/usePalette' -import {isIOS} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import * as Toast from '../util/Toast' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {colors, gradients, s} from 'lib/styles' +import {isIOS} from 'platform/detection' +import React from 'react' +import {Linking, Pressable, StyleSheet, View} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' + +import {logger} from '#/logger' import {useModalControls} from '#/state/modals' import { - usePreferencesQuery, - usePreferencesSetContentLabelMutation, - usePreferencesSetAdultContentMutation, - ConfigurableLabelGroup, CONFIGURABLE_LABEL_GROUPS, + ConfigurableLabelGroup, + usePreferencesQuery, UsePreferencesQueryResponse, + usePreferencesSetAdultContentMutation, + usePreferencesSetContentLabelMutation, } from '#/state/queries/preferences' +import {Button} from '../util/forms/Button' +import {ToggleButton} from '../util/forms/ToggleButton' +import {TextLink} from '../util/Link' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView} from './util' + export const snapPoints = ['90%'] export function Component({}: {}) { diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx index 0e11fcffd5..3c7618e1e6 100644 --- a/src/view/com/modals/CreateOrEditList.tsx +++ b/src/view/com/modals/CreateOrEditList.tsx @@ -1,4 +1,19 @@ -import React, {useState, useCallback, useMemo} from 'react' +import { + AppBskyGraphDefs, + AppBskyRichtextFacet, + RichText as RichTextAPI, +} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {compressIfNeeded} from 'lib/media/manip' +import {cleanError, isNetworkError} from 'lib/strings/errors' +import {enforceLen} from 'lib/strings/helpers' +import {colors, gradients, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {useCallback, useMemo, useState} from 'react' import { ActivityIndicator, KeyboardAvoidingView, @@ -8,36 +23,23 @@ import { TouchableOpacity, View, } from 'react-native' -import { - AppBskyGraphDefs, - AppBskyRichtextFacet, - RichText as RichTextAPI, -} from '@atproto/api' -import LinearGradient from 'react-native-linear-gradient' import {Image as RNImage} from 'react-native-image-crop-picker' -import {Text} from '../util/text/Text' -import {ErrorMessage} from '../util/error/ErrorMessage' -import * as Toast from '../util/Toast' -import {s, colors, gradients} from 'lib/styles' -import {enforceLen} from 'lib/strings/helpers' -import {compressIfNeeded} from 'lib/media/manip' -import {EditableUserAvatar} from '../util/UserAvatar' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError, isNetworkError} from 'lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import LinearGradient from 'react-native-linear-gradient' + +import {richTextToString} from '#/lib/strings/rich-text-helpers' +import {shortenLinks} from '#/lib/strings/rich-text-manip' import {useModalControls} from '#/state/modals' import { useListCreateMutation, useListMetadataMutation, } from '#/state/queries/list' -import {richTextToString} from '#/lib/strings/rich-text-helpers' -import {shortenLinks} from '#/lib/strings/rich-text-manip' import {getAgent} from '#/state/session' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {EditableUserAvatar} from '../util/UserAvatar' + const MAX_NAME = 64 // todo const MAX_DESCRIPTION = 300 // todo diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx index 40d78cfe0c..f0d2af8d25 100644 --- a/src/view/com/modals/DeleteAccount.tsx +++ b/src/view/com/modals/DeleteAccount.tsx @@ -1,27 +1,29 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {colors, gradients, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isAndroid} from 'platform/detection' import React from 'react' import { - SafeAreaView, ActivityIndicator, + SafeAreaView, StyleSheet, TouchableOpacity, View, } from 'react-native' -import {TextInput, ScrollView} from './util' import LinearGradient from 'react-native-linear-gradient' -import * as Toast from '../util/Toast' -import {Text} from '../util/text/Text' -import {s, colors, gradients} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {cleanError} from 'lib/strings/errors' -import {resetToTab} from '../../../Navigation' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useModalControls} from '#/state/modals' -import {useSession, useSessionApi, getAgent} from '#/state/session' -import {isAndroid} from 'platform/detection' +import {getAgent, useSession, useSessionApi} from '#/state/session' + +import {resetToTab} from '../../../Navigation' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView, TextInput} from './util' export const snapPoints = isAndroid ? ['90%'] : ['55%'] diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index 3b35ffee21..0b77a506a1 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -1,27 +1,29 @@ -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' -import {Pressable, StyleSheet, View} from 'react-native' +import {MaterialIcons} from '@expo/vector-icons' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Slider} from '@miblanchard/react-native-slider' +import {MAX_ALT_TEXT} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' -import {useWindowDimensions} from 'react-native' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' +import {enforceLen} from 'lib/strings/helpers' import {gradients, s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {Text} from '../util/text/Text' -import LinearGradient from 'react-native-linear-gradient' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {getKeys} from 'lib/type-assertions' +import {observer} from 'mobx-react-lite' +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' import ImageEditor, {Position} from 'react-avatar-editor' -import {TextInput} from './util' -import {enforceLen} from 'lib/strings/helpers' -import {MAX_ALT_TEXT} from 'lib/constants' +import {Pressable, StyleSheet, View} from 'react-native' +import {useWindowDimensions} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' import {GalleryModel} from 'state/models/media/gallery' import {ImageModel} from 'state/models/media/image' -import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' -import {Slider} from '@miblanchard/react-native-slider' -import {MaterialIcons} from '@expo/vector-icons' -import {observer} from 'mobx-react-lite' -import {getKeys} from 'lib/type-assertions' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useModalControls} from '#/state/modals' +import {Text} from '../util/text/Text' +import {TextInput} from './util' + export const snapPoints = ['80%'] const RATIOS = { diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 097b7b0d1b..7e11e6bbc2 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -1,5 +1,16 @@ -import React, {useState, useCallback} from 'react' -import * as Toast from '../util/Toast' +import {AppBskyActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {compressIfNeeded} from 'lib/media/manip' +import {cleanError} from 'lib/strings/errors' +import {enforceLen} from 'lib/strings/helpers' +import {colors, gradients, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' +import React, {useCallback, useState} from 'react' import { ActivityIndicator, KeyboardAvoidingView, @@ -9,28 +20,19 @@ import { TouchableOpacity, View, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' import {Image as RNImage} from 'react-native-image-crop-picker' -import {AppBskyActorDefs} from '@atproto/api' -import {Text} from '../util/text/Text' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {s, colors, gradients} from 'lib/styles' -import {enforceLen} from 'lib/strings/helpers' -import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants' -import {compressIfNeeded} from 'lib/media/manip' -import {UserBanner} from '../util/UserBanner' -import {EditableUserAvatar} from '../util/UserAvatar' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useAnalytics} from 'lib/analytics/analytics' -import {cleanError} from 'lib/strings/errors' +import LinearGradient from 'react-native-linear-gradient' import Animated, {FadeOut} from 'react-native-reanimated' -import {isWeb} from 'platform/detection' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {logger} from '#/logger' import {useModalControls} from '#/state/modals' import {useProfileUpdateMutation} from '#/state/queries/profile' -import {logger} from '#/logger' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {EditableUserAvatar} from '../util/UserAvatar' +import {UserBanner} from '../util/UserBanner' const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) diff --git a/src/view/com/modals/EmbedConsent.tsx b/src/view/com/modals/EmbedConsent.tsx index 04104c52e1..9eaaf082a0 100644 --- a/src/view/com/modals/EmbedConsent.tsx +++ b/src/view/com/modals/EmbedConsent.tsx @@ -1,20 +1,22 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, gradients, s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {s, colors, gradients} from 'lib/styles' -import {Text} from '../util/text/Text' -import {ScrollView} from './util' -import {usePalette} from 'lib/hooks/usePalette' + +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import { EmbedPlayerSource, embedPlayerSources, externalEmbedLabels, } from '#/lib/strings/embed-player' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import {useSetExternalEmbedPref} from '#/state/preferences/external-embeds-prefs' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' + +import {Text} from '../util/text/Text' +import {ScrollView} from './util' export const snapPoints = [450] diff --git a/src/view/com/modals/InAppBrowserConsent.tsx b/src/view/com/modals/InAppBrowserConsent.tsx index 86bb46ca81..cc19037571 100644 --- a/src/view/com/modals/InAppBrowserConsent.tsx +++ b/src/view/com/modals/InAppBrowserConsent.tsx @@ -1,20 +1,20 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import {s} from 'lib/styles' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {ScrollView} from './util' -import {usePalette} from 'lib/hooks/usePalette' - -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { useOpenLink, useSetInAppBrowser, } from '#/state/preferences/in-app-browser' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import {ScrollView} from './util' + export const snapPoints = [350] export function Component({href}: {href: string}) { diff --git a/src/view/com/modals/InviteCodes.tsx b/src/view/com/modals/InviteCodes.tsx index c0318df015..80155e2280 100644 --- a/src/view/com/modals/InviteCodes.tsx +++ b/src/view/com/modals/InviteCodes.tsx @@ -1,36 +1,38 @@ -import React from 'react' -import { - StyleSheet, - TouchableOpacity, - View, - ActivityIndicator, -} from 'react-native' import {ComAtprotoServerDefs} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import Clipboard from '@react-native-clipboard/clipboard' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import * as Toast from '../util/Toast' -import {ScrollView} from './util' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' -import {cleanError} from 'lib/strings/errors' -import {useModalControls} from '#/state/modals' -import {useInvitesState, useInvitesAPI} from '#/state/invites' -import {UserInfoText} from '../util/UserInfoText' -import {makeProfileLink} from '#/lib/routes/links' -import {Link} from '../util/Link' -import {ErrorMessage} from '../util/error/ErrorMessage' -import { - useInviteCodesQuery, - InviteCodesQueryResponse, -} from '#/state/queries/invites' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import Clipboard from '@react-native-clipboard/clipboard' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {isWeb} from 'platform/detection' +import React from 'react' +import { + ActivityIndicator, + StyleSheet, + TouchableOpacity, + View, +} from 'react-native' + +import {makeProfileLink} from '#/lib/routes/links' +import {useInvitesAPI, useInvitesState} from '#/state/invites' +import {useModalControls} from '#/state/modals' +import { + InviteCodesQueryResponse, + useInviteCodesQuery, +} from '#/state/queries/invites' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {Link} from '../util/Link' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {UserInfoText} from '../util/UserInfoText' +import {ScrollView} from './util' export const snapPoints = ['70%'] diff --git a/src/view/com/modals/LinkWarning.tsx b/src/view/com/modals/LinkWarning.tsx index 81fdc72853..1d0f1bda67 100644 --- a/src/view/com/modals/LinkWarning.tsx +++ b/src/view/com/modals/LinkWarning.tsx @@ -1,19 +1,21 @@ -import React from 'react' -import {SafeAreaView, StyleSheet, View} from 'react-native' -import {ScrollView} from './util' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {s, colors} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {isPossiblyAUrl, splitApexDomain} from 'lib/strings/url-helpers' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' +import React from 'react' +import {SafeAreaView, StyleSheet, View} from 'react-native' + import {useModalControls} from '#/state/modals' import {useOpenLink} from '#/state/preferences/in-app-browser' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import {ScrollView} from './util' + export const snapPoints = ['50%'] export function Component({text, href}: {text: string; href: string}) { diff --git a/src/view/com/modals/ListAddRemoveUsers.tsx b/src/view/com/modals/ListAddRemoveUsers.tsx index 27c33f806c..eae746d2bf 100644 --- a/src/view/com/modals/ListAddRemoveUsers.tsx +++ b/src/view/com/modals/ListAddRemoveUsers.tsx @@ -1,3 +1,15 @@ +import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {cleanError} from 'lib/strings/errors' +import {sanitizeHandle} from 'lib/strings/handles' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React, {useCallback, useState} from 'react' import { ActivityIndicator, @@ -6,33 +18,23 @@ import { StyleSheet, View, } from 'react-native' -import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' -import {ScrollView, TextInput} from './util' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {UserAvatar} from '../util/UserAvatar' -import * as Toast from '../util/Toast' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {cleanError} from 'lib/strings/errors' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' + import {HITSLOP_20} from '#/lib/constants' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' +import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import { - useDangerousListMembershipsQuery, getMembership, ListMembersip, + useDangerousListMembershipsQuery, useListMembershipAddMutation, useListMembershipRemoveMutation, } from '#/state/queries/list-memberships' -import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' + +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {UserAvatar} from '../util/UserAvatar' +import {ScrollView, TextInput} from './util' export const snapPoints = ['90%'] diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index 100444ff58..fb0ea471d7 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -1,39 +1,40 @@ -import React, {useRef, useEffect} from 'react' +import BottomSheet from '@gorhom/bottom-sheet' +import {usePalette} from 'lib/hooks/usePalette' +import React, {useEffect, useRef} from 'react' import {StyleSheet} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' -import BottomSheet from '@gorhom/bottom-sheet' -import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' -import {usePalette} from 'lib/hooks/usePalette' -import {useModals, useModalControls} from '#/state/modals' -import * as ConfirmModal from './Confirm' -import * as EditProfileModal from './EditProfile' -import * as RepostModal from './Repost' -import * as SelfLabelModal from './SelfLabel' -import * as ThreadgateModal from './Threadgate' -import * as CreateOrEditListModal from './CreateOrEditList' -import * as UserAddRemoveListsModal from './UserAddRemoveLists' -import * as ListAddUserModal from './ListAddRemoveUsers' +import {useModalControls, useModals} from '#/state/modals' + +import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' +import * as AddAppPassword from './AddAppPasswords' import * as AltImageModal from './AltImage' import * as EditImageModal from './AltImage' -import * as ReportModal from './report/Modal' import * as AppealLabelModal from './AppealLabel' -import * as DeleteAccountModal from './DeleteAccount' -import * as ChangeHandleModal from './ChangeHandle' -import * as InviteCodesModal from './InviteCodes' -import * as AddAppPassword from './AddAppPasswords' -import * as ContentFilteringSettingsModal from './ContentFilteringSettings' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' -import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' -import * as ModerationDetailsModal from './ModerationDetails' import * as BirthDateSettingsModal from './BirthDateSettings' -import * as VerifyEmailModal from './VerifyEmail' import * as ChangeEmailModal from './ChangeEmail' +import * as ChangeHandleModal from './ChangeHandle' import * as ChangePasswordModal from './ChangePassword' -import * as SwitchAccountModal from './SwitchAccount' -import * as LinkWarningModal from './LinkWarning' +import * as ConfirmModal from './Confirm' +import * as ContentFilteringSettingsModal from './ContentFilteringSettings' +import * as CreateOrEditListModal from './CreateOrEditList' +import * as DeleteAccountModal from './DeleteAccount' +import * as EditProfileModal from './EditProfile' import * as EmbedConsentModal from './EmbedConsent' import * as InAppBrowserConsentModal from './InAppBrowserConsent' +import * as InviteCodesModal from './InviteCodes' +import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' +import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' +import * as LinkWarningModal from './LinkWarning' +import * as ListAddUserModal from './ListAddRemoveUsers' +import * as ModerationDetailsModal from './ModerationDetails' +import * as ReportModal from './report/Modal' +import * as RepostModal from './Repost' +import * as SelfLabelModal from './SelfLabel' +import * as SwitchAccountModal from './SwitchAccount' +import * as ThreadgateModal from './Threadgate' +import * as UserAddRemoveListsModal from './UserAddRemoveLists' +import * as VerifyEmailModal from './VerifyEmail' const DEFAULT_SNAPPOINTS = ['90%'] const HANDLE_HEIGHT = 24 diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 0ced894a17..295942dd67 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -1,39 +1,40 @@ -import React from 'react' -import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native' -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' +import React from 'react' +import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' +import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' -import {useModals, useModalControls} from '#/state/modals' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import type {Modal as ModalIface} from '#/state/modals' -import * as ConfirmModal from './Confirm' -import * as EditProfileModal from './EditProfile' -import * as ReportModal from './report/Modal' +import {useModalControls, useModals} from '#/state/modals' + +import * as AddAppPassword from './AddAppPasswords' +import * as AltTextImageModal from './AltImage' import * as AppealLabelModal from './AppealLabel' +import * as BirthDateSettingsModal from './BirthDateSettings' +import * as ChangeEmailModal from './ChangeEmail' +import * as ChangeHandleModal from './ChangeHandle' +import * as ChangePasswordModal from './ChangePassword' +import * as ConfirmModal from './Confirm' +import * as ContentFilteringSettingsModal from './ContentFilteringSettings' import * as CreateOrEditListModal from './CreateOrEditList' -import * as UserAddRemoveLists from './UserAddRemoveLists' -import * as ListAddUserModal from './ListAddRemoveUsers' +import * as CropImageModal from './crop-image/CropImage.web' import * as DeleteAccountModal from './DeleteAccount' +import * as EditImageModal from './EditImage' +import * as EditProfileModal from './EditProfile' +import * as EmbedConsentModal from './EmbedConsent' +import * as InviteCodesModal from './InviteCodes' +import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' +import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' +import * as LinkWarningModal from './LinkWarning' +import * as ListAddUserModal from './ListAddRemoveUsers' +import * as ModerationDetailsModal from './ModerationDetails' +import * as ReportModal from './report/Modal' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' import * as ThreadgateModal from './Threadgate' -import * as CropImageModal from './crop-image/CropImage.web' -import * as AltTextImageModal from './AltImage' -import * as EditImageModal from './EditImage' -import * as ChangeHandleModal from './ChangeHandle' -import * as InviteCodesModal from './InviteCodes' -import * as AddAppPassword from './AddAppPasswords' -import * as ContentFilteringSettingsModal from './ContentFilteringSettings' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' -import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' -import * as ModerationDetailsModal from './ModerationDetails' -import * as BirthDateSettingsModal from './BirthDateSettings' +import * as UserAddRemoveLists from './UserAddRemoveLists' import * as VerifyEmailModal from './VerifyEmail' -import * as ChangeEmailModal from './ChangeEmail' -import * as ChangePasswordModal from './ChangePassword' -import * as LinkWarningModal from './LinkWarning' -import * as EmbedConsentModal from './EmbedConsent' export function ModalsContainer() { const {isModalActive, activeModals} = useModals() diff --git a/src/view/com/modals/ModerationDetails.tsx b/src/view/com/modals/ModerationDetails.tsx index f890d50dce..77b7628e6f 100644 --- a/src/view/com/modals/ModerationDetails.tsx +++ b/src/view/com/modals/ModerationDetails.tsx @@ -1,17 +1,19 @@ +import {ModerationUI} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {listUriToHref} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React from 'react' import {StyleSheet, View} from 'react-native' -import {ModerationUI} from '@atproto/api' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s} from 'lib/styles' -import {Text} from '../util/text/Text' -import {TextLink} from '../util/Link' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {listUriToHref} from 'lib/strings/url-helpers' -import {Button} from '../util/forms/Button' + import {useModalControls} from '#/state/modals' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' + +import {Button} from '../util/forms/Button' +import {TextLink} from '../util/Link' +import {Text} from '../util/text/Text' export const snapPoints = [300] diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx index 6e4881adcd..a052979dd1 100644 --- a/src/view/com/modals/Repost.tsx +++ b/src/view/com/modals/Repost.tsx @@ -1,15 +1,17 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {RepostIcon} from 'lib/icons' +import {colors, gradients, s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {s, colors, gradients} from 'lib/styles' -import {Text} from '../util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {RepostIcon} from 'lib/icons' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useModalControls} from '#/state/modals' +import {Text} from '../util/text/Text' + export const snapPoints = [250] export function Component({ diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx index 779a9e71b3..a79a90d372 100644 --- a/src/view/com/modals/SelfLabel.tsx +++ b/src/view/com/modals/SelfLabel.tsx @@ -1,16 +1,18 @@ -import React, {useState} from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {colors, s} from 'lib/styles' import {isWeb} from 'platform/detection' +import React, {useState} from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {ScrollView} from 'view/com/modals/util' + +import {useModalControls} from '#/state/modals' + import {Button} from '../util/forms/Button' import {SelectableBtn} from '../util/forms/SelectableBtn' -import {ScrollView} from 'view/com/modals/util' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' +import {Text} from '../util/text/Text' const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn'] diff --git a/src/view/com/modals/SwitchAccount.tsx b/src/view/com/modals/SwitchAccount.tsx index c034c4b528..220aba43f4 100644 --- a/src/view/com/modals/SwitchAccount.tsx +++ b/src/view/com/modals/SwitchAccount.tsx @@ -1,3 +1,12 @@ +import {BottomSheetScrollView} from '@gorhom/bottom-sheet' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' +import {Haptics} from 'lib/haptics' +import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' +import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' +import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -5,22 +14,15 @@ import { TouchableOpacity, View, } from 'react-native' -import {Text} from '../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' -import {UserAvatar} from '../util/UserAvatar' + +import {useProfileQuery} from '#/state/queries/profile' +import {SessionAccount, useSession, useSessionApi} from '#/state/session' +import {useCloseAllActiveElements} from '#/state/util' + import {AccountDropdownBtn} from '../util/AccountDropdownBtn' import {Link} from '../util/Link' -import {makeProfileLink} from 'lib/routes/links' -import {BottomSheetScrollView} from '@gorhom/bottom-sheet' -import {Haptics} from 'lib/haptics' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSession, useSessionApi, SessionAccount} from '#/state/session' -import {useProfileQuery} from '#/state/queries/profile' -import {useCloseAllActiveElements} from '#/state/util' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' export const snapPoints = ['40%', '90%'] diff --git a/src/view/com/modals/Threadgate.tsx b/src/view/com/modals/Threadgate.tsx index 0e49fc2f35..b7661c4287 100644 --- a/src/view/com/modals/Threadgate.tsx +++ b/src/view/com/modals/Threadgate.tsx @@ -1,3 +1,10 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {colors, s} from 'lib/styles' +import isEqual from 'lodash.isequal' +import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { Pressable, @@ -7,18 +14,13 @@ import { View, ViewStyle, } from 'react-native' -import {Text} from '../util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' import {ScrollView} from 'view/com/modals/util' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useModalControls} from '#/state/modals' -import {ThreadgateSetting} from '#/state/queries/threadgate' import {useMyListsQuery} from '#/state/queries/my-lists' -import isEqual from 'lodash.isequal' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {ThreadgateSetting} from '#/state/queries/threadgate' + +import {Text} from '../util/text/Text' export const snapPoints = ['60%'] diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index 8452f25133..ff5dfea1d3 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/src/view/com/modals/UserAddRemoveLists.tsx @@ -1,3 +1,11 @@ +import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {s} from 'lib/styles' +import {isAndroid, isMobileWeb, isWeb} from 'platform/detection' import React, {useCallback} from 'react' import { ActivityIndicator, @@ -5,30 +13,24 @@ import { useWindowDimensions, View, } from 'react-native' -import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {Text} from '../util/text/Text' -import {UserAvatar} from '../util/UserAvatar' -import {MyLists} from '../lists/MyLists' -import {Button} from '../util/forms/Button' -import * as Toast from '../util/Toast' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb, isAndroid, isMobileWeb} from 'platform/detection' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {cleanError} from '#/lib/strings/errors' import {useModalControls} from '#/state/modals' import { - useDangerousListMembershipsQuery, getMembership, ListMembersip, + useDangerousListMembershipsQuery, useListMembershipAddMutation, useListMembershipRemoveMutation, } from '#/state/queries/list-memberships' -import {cleanError} from '#/lib/strings/errors' import {useSession} from '#/state/session' +import {MyLists} from '../lists/MyLists' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {UserAvatar} from '../util/UserAvatar' + export const snapPoints = ['fullscreen'] export function Component({ diff --git a/src/view/com/modals/VerifyEmail.tsx b/src/view/com/modals/VerifyEmail.tsx index 30a57afc58..8c8c64ad92 100644 --- a/src/view/com/modals/VerifyEmail.tsx +++ b/src/view/com/modals/VerifyEmail.tsx @@ -1,3 +1,11 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {colors, s} from 'lib/styles' +import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -6,23 +14,17 @@ import { StyleSheet, View, } from 'react-native' -import {Svg, Circle, Path} from 'react-native-svg' -import {ScrollView, TextInput} from './util' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {ErrorMessage} from '../util/error/ErrorMessage' -import * as Toast from '../util/Toast' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import {useSession, useSessionApi, getAgent} from '#/state/session' +import {Circle, Path, Svg} from 'react-native-svg' + import {logger} from '#/logger' +import {useModalControls} from '#/state/modals' +import {getAgent, useSession, useSessionApi} from '#/state/session' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' +import {ScrollView, TextInput} from './util' export const snapPoints = ['90%'] diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx index 6f094a1fdf..9c42d9532f 100644 --- a/src/view/com/modals/crop-image/CropImage.web.tsx +++ b/src/view/com/modals/crop-image/CropImage.web.tsx @@ -1,17 +1,18 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import ImageEditor from 'react-avatar-editor' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {Slider} from '@miblanchard/react-native-slider' -import LinearGradient from 'react-native-linear-gradient' -import {Text} from 'view/com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' import {Dimensions} from 'lib/media/types' import {getDataUriSize} from 'lib/media/util' -import {s, gradients} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' +import {gradients, s} from 'lib/styles' +import React from 'react' +import ImageEditor from 'react-avatar-editor' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {Image as RNImage} from 'react-native-image-crop-picker' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import LinearGradient from 'react-native-linear-gradient' +import {Text} from 'view/com/util/text/Text' + import {useModalControls} from '#/state/modals' enum AspectRatio { diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx index 91e11a19ca..ce462d072e 100644 --- a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx +++ b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx @@ -1,11 +1,11 @@ -import React from 'react' -import {StyleSheet, Text, View, Pressable} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' -import {s, colors, gradients} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {colors, gradients, s} from 'lib/styles' +import React from 'react' +import {Pressable, StyleSheet, Text, View} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' export const ConfirmLanguagesButton = ({ onPress, diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx index b8c125b65c..52863b2a8b 100644 --- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx @@ -1,20 +1,22 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {ScrollView} from '../util' -import {Text} from '../../util/text/Text' +import {Trans} from '@lingui/macro' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {deviceLocales} from 'platform/detection' -import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' -import {LanguageToggle} from './LanguageToggle' -import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' + import {useModalControls} from '#/state/modals' import { useLanguagePrefs, useLanguagePrefsApi, } from '#/state/preferences/languages' +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {Text} from '../../util/text/Text' +import {ScrollView} from '../util' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' +import {LanguageToggle} from './LanguageToggle' + export const snapPoints = ['100%'] export function Component({}: {}) { diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx index 45b100f201..3d65137018 100644 --- a/src/view/com/modals/lang-settings/LanguageToggle.tsx +++ b/src/view/com/modals/lang-settings/LanguageToggle.tsx @@ -1,8 +1,9 @@ +import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleSheet} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {useLanguagePrefs, toPostLanguages} from '#/state/preferences/languages' + +import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages' export function LanguageToggle({ code2, diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx index 05cfb81156..49a209759b 100644 --- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx @@ -1,21 +1,23 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {ScrollView} from '../util' -import {Text} from '../../util/text/Text' +import {Trans} from '@lingui/macro' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {deviceLocales} from 'platform/detection' -import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' -import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' +import React from 'react' +import {StyleSheet, View} from 'react-native' import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {Trans} from '@lingui/macro' + import {useModalControls} from '#/state/modals' import { + hasPostLanguage, useLanguagePrefs, useLanguagePrefsApi, - hasPostLanguage, } from '#/state/preferences/languages' +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {Text} from '../../util/text/Text' +import {ScrollView} from '../util' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' + export const snapPoints = ['100%'] export function Component() { diff --git a/src/view/com/modals/report/InputIssueDetails.tsx b/src/view/com/modals/report/InputIssueDetails.tsx index 2bc86f75e7..e353da56f3 100644 --- a/src/view/com/modals/report/InputIssueDetails.tsx +++ b/src/view/com/modals/report/InputIssueDetails.tsx @@ -1,15 +1,16 @@ -import React from 'react' -import {View, TouchableOpacity, StyleSheet} from 'react-native' -import {TextInput} from '../util' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {CharProgress} from '../../composer/char-progress/CharProgress' -import {Text} from '../../util/text/Text' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {s} from 'lib/styles' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' + +import {CharProgress} from '../../composer/char-progress/CharProgress' +import {Text} from '../../util/text/Text' +import {TextInput} from '../util' import {SendReportButton} from './SendReportButton' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export function InputIssueDetails({ details, diff --git a/src/view/com/modals/report/Modal.tsx b/src/view/com/modals/report/Modal.tsx index abbad9b402..3540b8b029 100644 --- a/src/view/com/modals/report/Modal.tsx +++ b/src/view/com/modals/report/Modal.tsx @@ -1,23 +1,25 @@ -import React, {useState, useMemo} from 'react' +import {AtUri} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {s} from 'lib/styles' +import React, {useMemo, useState} from 'react' import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native' import {ScrollView} from 'react-native-gesture-handler' -import {AtUri} from '@atproto/api' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s} from 'lib/styles' -import {Text} from '../../util/text/Text' -import * as Toast from '../../util/Toast' -import {ErrorMessage} from '../../util/error/ErrorMessage' -import {cleanError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {SendReportButton} from './SendReportButton' -import {InputIssueDetails} from './InputIssueDetails' -import {ReportReasonOptions} from './ReasonOptions' -import {CollectionId} from './types' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import {useModalControls} from '#/state/modals' import {getAgent} from '#/state/session' +import {ErrorMessage} from '../../util/error/ErrorMessage' +import {Text} from '../../util/text/Text' +import * as Toast from '../../util/Toast' +import {InputIssueDetails} from './InputIssueDetails' +import {ReportReasonOptions} from './ReasonOptions' +import {SendReportButton} from './SendReportButton' +import {CollectionId} from './types' + const DMCA_LINK = 'https://bsky.social/about/support/copyright' export const snapPoints = [575] diff --git a/src/view/com/modals/report/ReasonOptions.tsx b/src/view/com/modals/report/ReasonOptions.tsx index 23b49b6648..3ed7bb79d1 100644 --- a/src/view/com/modals/report/ReasonOptions.tsx +++ b/src/view/com/modals/report/ReasonOptions.tsx @@ -1,10 +1,10 @@ -import {View} from 'react-native' -import React, {useMemo} from 'react' import {AtUri, ComAtprotoModerationDefs} from '@atproto/api' +import {usePalette, UsePaletteValue} from 'lib/hooks/usePalette' +import React, {useMemo} from 'react' +import {View} from 'react-native' +import {RadioGroup, RadioGroupItem} from 'view/com/util/forms/RadioGroup' import {Text} from '../../util/text/Text' -import {UsePaletteValue, usePalette} from 'lib/hooks/usePalette' -import {RadioGroup, RadioGroupItem} from 'view/com/util/forms/RadioGroup' import {CollectionId} from './types' type ReasonMap = Record diff --git a/src/view/com/modals/report/SendReportButton.tsx b/src/view/com/modals/report/SendReportButton.tsx index 40c239bffe..eeda20b84c 100644 --- a/src/view/com/modals/report/SendReportButton.tsx +++ b/src/view/com/modals/report/SendReportButton.tsx @@ -1,15 +1,16 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {colors, gradients, s} from 'lib/styles' import React from 'react' -import LinearGradient from 'react-native-linear-gradient' import { ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native' +import LinearGradient from 'react-native-linear-gradient' + import {Text} from '../../util/text/Text' -import {s, gradients, colors} from 'lib/styles' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' export function SendReportButton({ onPress, diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index dd439d4755..bfce184368 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -1,21 +1,23 @@ -import React from 'react' -import {CenteredView} from '../util/Views' -import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {FeedItem} from './FeedItem' -import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {EmptyState} from '../util/EmptyState' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {s} from 'lib/styles' +import React from 'react' +import {ActivityIndicator, StyleSheet, View} from 'react-native' + +import {usePalette} from '#/lib/hooks/usePalette' +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' -import {logger} from '#/logger' -import {cleanError} from '#/lib/strings/errors' import {useModerationOpts} from '#/state/queries/preferences' + +import {EmptyState} from '../util/EmptyState' +import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {usePalette} from '#/lib/hooks/usePalette' +import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {CenteredView} from '../util/Views' +import {FeedItem} from './FeedItem' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index 45166fe3c3..e5b3466b5b 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -1,19 +1,11 @@ -import React, {memo, useMemo, useState, useEffect} from 'react' -import { - Animated, - TouchableOpacity, - Pressable, - StyleSheet, - View, -} from 'react-native' import { AppBskyEmbedImages, + AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, + moderateProfile, ModerationOpts, ProfileModeration, - moderateProfile, - AppBskyEmbedRecordWithMedia, } from '@atproto/api' import {AtUri} from '@atproto/api' import { @@ -21,28 +13,38 @@ import { FontAwesomeIconStyle, Props, } from '@fortawesome/react-native-fontawesome' -import {FeedNotification} from '#/state/queries/notifications/feed' -import {s, colors} from 'lib/styles' -import {niceDate} from 'lib/strings/time' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import {usePalette} from 'lib/hooks/usePalette' +import {HeartIconSolid} from 'lib/icons' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {pluralize} from 'lib/strings/helpers' -import {HeartIconSolid} from 'lib/icons' -import {Text} from '../util/text/Text' -import {UserAvatar, PreviewableUserAvatar} from '../util/UserAvatar' -import {UserPreviewLink} from '../util/UserPreviewLink' -import {ImageHorzList} from '../util/images/ImageHorzList' -import {Post} from '../post/Post' -import {Link, TextLink} from '../util/Link' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {formatCount} from '../util/numeric/format' -import {makeProfileLink} from 'lib/routes/links' -import {TimeElapsed} from '../util/TimeElapsed' +import {niceDate} from 'lib/strings/time' +import {colors, s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React, {memo, useEffect, useMemo, useState} from 'react' +import { + Animated, + Pressable, + StyleSheet, + TouchableOpacity, + View, +} from 'react-native' + +import {FeedNotification} from '#/state/queries/notifications/feed' + import {FeedSourceCard} from '../feeds/FeedSourceCard' +import {Post} from '../post/Post' +import {ImageHorzList} from '../util/images/ImageHorzList' +import {Link, TextLink} from '../util/Link' +import {formatCount} from '../util/numeric/format' +import {Text} from '../util/text/Text' +import {TimeElapsed} from '../util/TimeElapsed' +import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' +import {UserPreviewLink} from '../util/UserPreviewLink' const MAX_AUTHORS = 5 diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index 06ec2e4503..e17e25099b 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,11 +1,11 @@ +import {s} from 'lib/styles' import React, {forwardRef} from 'react' import {Animated, View} from 'react-native' import PagerView, { - PagerViewOnPageSelectedEvent, PagerViewOnPageScrollEvent, + PagerViewOnPageSelectedEvent, PageScrollStateChangedNativeEvent, } from 'react-native-pager-view' -import {s} from 'lib/styles' export type PageSelectedEvent = PagerViewOnPageSelectedEvent const AnimatedPagerView = Animated.createAnimatedComponent(PagerView) diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx index 42982ef7f8..2bad144910 100644 --- a/src/view/com/pager/Pager.web.tsx +++ b/src/view/com/pager/Pager.web.tsx @@ -1,7 +1,7 @@ +import {s} from 'lib/styles' import React from 'react' import {flushSync} from 'react-dom' import {View} from 'react-native' -import {s} from 'lib/styles' export interface RenderTabBarFnProps { selectedPage: number diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index aa110682a2..5317a77739 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -1,27 +1,29 @@ import * as React from 'react' import { LayoutChangeEvent, + NativeScrollEvent, ScrollView, StyleSheet, View, - NativeScrollEvent, } from 'react-native' import Animated, { - useAnimatedStyle, - useSharedValue, + AnimatedRef, runOnJS, runOnUI, scrollTo, - useAnimatedRef, - AnimatedRef, SharedValue, + useAnimatedRef, + useAnimatedStyle, + useSharedValue, } from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' -import {TabBar} from './TabBar' + import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {ListMethods} from '../util/List' import {ScrollProvider} from '#/lib/ScrollContext' +import {ListMethods} from '../util/List' +import {TabBar} from './TabBar' + export interface PagerWithHeaderChildParams { headerHeight: number isFocused: boolean diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx index 9c63c149fe..4c95aa8780 100644 --- a/src/view/com/pager/PagerWithHeader.web.tsx +++ b/src/view/com/pager/PagerWithHeader.web.tsx @@ -2,10 +2,12 @@ import * as React from 'react' import {FlatList, ScrollView, StyleSheet, View} from 'react-native' import {useAnimatedRef} from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' -import {TabBar} from './TabBar' + import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' + import {ListMethods} from '../util/List' +import {TabBar} from './TabBar' export interface PagerWithHeaderChildParams { headerHeight: number diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index ff8acd60cc..db05237c54 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -1,12 +1,14 @@ -import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react' -import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native' -import {Text} from '../util/text/Text' -import {PressableWithHover} from '../util/PressableWithHover' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {DraggableScrollView} from './DraggableScrollView' +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native' + import {isNative} from '#/platform/detection' +import {PressableWithHover} from '../util/PressableWithHover' +import {Text} from '../util/text/Text' +import {DraggableScrollView} from './DraggableScrollView' + export interface TabBarProps { testID?: string selectedPage: number diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 55463dc137..67ed3b3f53 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -1,15 +1,17 @@ +import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' import React, {useCallback, useMemo, useState} from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {List} from '../util/List' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {logger} from '#/logger' -import {LoadingScreen} from '../util/LoadingScreen' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {usePostLikedByQuery} from '#/state/queries/post-liked-by' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {usePostLikedByQuery} from '#/state/queries/post-liked-by' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' + +import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List} from '../util/List' +import {LoadingScreen} from '../util/LoadingScreen' +import {CenteredView} from '../util/Views' export function PostLikedBy({uri}: {uri: string}) { const [isPTRing, setIsPTRing] = useState(false) diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index 31a0be832d..82c969235e 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -1,15 +1,17 @@ -import React, {useMemo, useCallback, useState} from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {List} from '../util/List' +import React, {useCallback, useMemo, useState} from 'react' +import {ActivityIndicator, StyleSheet, View} from 'react-native' + +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' + import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' import {ErrorMessage} from '../util/error/ErrorMessage' -import {logger} from '#/logger' +import {List} from '../util/List' import {LoadingScreen} from '../util/LoadingScreen' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' -import {cleanError} from '#/lib/strings/errors' +import {CenteredView} from '../util/Views' export function PostRepostedBy({uri}: {uri: string}) { const [isPTRing, setIsPTRing] = useState(false) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index a7ee42a948..f022bdeacd 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -1,3 +1,17 @@ +import {AppBskyFeedDefs} from '@atproto/api' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {useSetTitle} from 'lib/hooks/useSetTitle' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NavigationProp} from 'lib/routes/types' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {s} from 'lib/styles' import React, {useEffect, useRef} from 'react' import { ActivityIndicator, @@ -6,45 +20,33 @@ import { TouchableOpacity, View, } from 'react-native' -import {AppBskyFeedDefs} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {LoadingScreen} from '../util/LoadingScreen' -import {List, ListMethods} from '../util/List' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {PostThreadItem} from './PostThreadItem' -import {ComposePrompt} from '../composer/Prompt' -import {ViewHeader} from '../util/ViewHeader' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import { - ThreadNode, - ThreadPost, - ThreadNotFound, - ThreadBlocked, - usePostThreadQuery, - sortThread, -} from '#/state/queries/post-thread' -import {useNavigation} from '@react-navigation/native' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' -import {sanitizeDisplayName} from 'lib/strings/display-names' + +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {cleanError} from '#/lib/strings/errors' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {isAndroid, isNative, isWeb} from '#/platform/detection' +import { + sortThread, + ThreadBlocked, + ThreadNode, + ThreadNotFound, + ThreadPost, + usePostThreadQuery, +} from '#/state/queries/post-thread' import { - UsePreferencesQueryResponse, useModerationOpts, usePreferencesQuery, + UsePreferencesQueryResponse, } from '#/state/queries/preferences' import {useSession} from '#/state/session' -import {isAndroid, isNative, isWeb} from '#/platform/detection' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' + +import {ComposePrompt} from '../composer/Prompt' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List, ListMethods} from '../util/List' +import {LoadingScreen} from '../util/LoadingScreen' +import {Text} from '../util/text/Text' +import {ViewHeader} from '../util/ViewHeader' +import {CenteredView} from '../util/Views' +import {PostThreadItem} from './PostThreadItem' // FlatList maintainVisibleContentPosition breaks if too many items // are prepended. This seems to be an optimal number based on *shrug*. diff --git a/src/view/com/post-thread/PostThreadFollowBtn.tsx b/src/view/com/post-thread/PostThreadFollowBtn.tsx index e5b747cc9a..63e2888fd5 100644 --- a/src/view/com/post-thread/PostThreadFollowBtn.tsx +++ b/src/view/com/post-thread/PostThreadFollowBtn.tsx @@ -1,24 +1,24 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {useNavigation} from '@react-navigation/native' import {AppBskyActorDefs} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' - -import {logger} from '#/logger' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {s} from 'lib/styles' +import {useNavigation} from '@react-navigation/native' +import {track} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s} from 'lib/styles' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {Shadow, useProfileShadow} from 'state/cache/profile-shadow' -import {track} from 'lib/analytics/analytics' import { useProfileFollowMutationQueue, useProfileQuery, } from 'state/queries/profile' import {useRequireAuth} from 'state/session' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' + +import {logger} from '#/logger' export function PostThreadFollowBtn({did}: {did: string}) { const {data: profile, isLoading} = useProfileQuery({did}) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 9522ea6a07..54c47adaee 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -1,50 +1,52 @@ -import React, {memo, useMemo} from 'react' -import {StyleSheet, View} from 'react-native' import { - AtUri, AppBskyFeedDefs, AppBskyFeedPost, - RichText as RichTextAPI, + AtUri, PostModeration, + RichText as RichTextAPI, } from '@atproto/api' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn' -import {Link, TextLink} from '../util/Link' -import {RichText} from '#/components/RichText' -import {Text} from '../util/text/Text' -import {PreviewableUserAvatar} from '../util/UserAvatar' -import {s} from 'lib/styles' -import {niceDate} from 'lib/strings/time' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {MAX_POST_LINES} from 'lib/constants' +import {isEmbedByEmbedder} from 'lib/embeds' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {countLines, pluralize} from 'lib/strings/helpers' -import {isEmbedByEmbedder} from 'lib/embeds' +import {niceDate} from 'lib/strings/time' +import {s} from 'lib/styles' +import React, {memo, useMemo} from 'react' +import {StyleSheet, View} from 'react-native' +import {useSession} from 'state/session' +import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn' + +import {atoms as a} from '#/alf' +import {RichText} from '#/components/RichText' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' +import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' +import {useLanguagePrefs} from '#/state/preferences' +import {useOpenLink} from '#/state/preferences/in-app-browser' +import {ThreadPost} from '#/state/queries/post-thread' +import {useModerationOpts} from '#/state/queries/preferences' +import {useComposerControls} from '#/state/shell/composer' + import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers' -import {PostMeta} from '../util/PostMeta' -import {PostEmbeds} from '../util/post-embeds' -import {PostCtrls} from '../util/post-ctrls/PostCtrls' -import {PostHider} from '../util/moderation/PostHider' +import {WhoCanReply} from '../threadgate/WhoCanReply' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Link, TextLink} from '../util/Link' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {ContentHider} from '../util/moderation/ContentHider' import {PostAlerts} from '../util/moderation/PostAlerts' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {usePalette} from 'lib/hooks/usePalette' +import {PostHider} from '../util/moderation/PostHider' import {formatCount} from '../util/numeric/format' -import {makeProfileLink} from 'lib/routes/links' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {MAX_POST_LINES} from 'lib/constants' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useLanguagePrefs} from '#/state/preferences' -import {useComposerControls} from '#/state/shell/composer' -import {useModerationOpts} from '#/state/queries/preferences' -import {useOpenLink} from '#/state/preferences/in-app-browser' -import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' -import {ThreadPost} from '#/state/queries/post-thread' -import {useSession} from 'state/session' -import {WhoCanReply} from '../threadgate/WhoCanReply' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' -import {atoms as a} from '#/alf' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' +import {PostEmbeds} from '../util/post-embeds' +import {PostMeta} from '../util/PostMeta' +import {Text} from '../util/text/Text' +import {PreviewableUserAvatar} from '../util/UserAvatar' export function PostThreadItem({ post, diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 5fa4da84e1..d7f6bb2cbb 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -1,5 +1,3 @@ -import React, {useState, useMemo} from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -7,29 +5,33 @@ import { PostModeration, RichText as RichTextAPI, } from '@atproto/api' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Link, TextLink} from '../util/Link' -import {UserInfoText} from '../util/UserInfoText' -import {PostMeta} from '../util/PostMeta' -import {PostEmbeds} from '../util/post-embeds' -import {PostCtrls} from '../util/post-ctrls/PostCtrls' -import {ContentHider} from '../util/moderation/ContentHider' -import {PostAlerts} from '../util/moderation/PostAlerts' -import {Text} from '../util/text/Text' -import {RichText} from '#/components/RichText' -import {PreviewableUserAvatar} from '../util/UserAvatar' -import {s, colors} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {MAX_POST_LINES} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {makeProfileLink} from 'lib/routes/links' -import {MAX_POST_LINES} from 'lib/constants' import {countLines} from 'lib/strings/helpers' +import {colors, s} from 'lib/styles' +import React, {useMemo, useState} from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + +import {atoms as a} from '#/alf' +import {RichText} from '#/components/RichText' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' +import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' import {useModerationOpts} from '#/state/queries/preferences' import {useComposerControls} from '#/state/shell/composer' -import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {atoms as a} from '#/alf' + +import {Link, TextLink} from '../util/Link' +import {ContentHider} from '../util/moderation/ContentHider' +import {PostAlerts} from '../util/moderation/PostAlerts' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' +import {PostEmbeds} from '../util/post-embeds' +import {PostMeta} from '../util/PostMeta' +import {Text} from '../util/text/Text' +import {PreviewableUserAvatar} from '../util/UserAvatar' +import {UserInfoText} from '../util/UserInfoText' export function Post({ post, diff --git a/src/view/com/posts/CustomFeedEmptyState.tsx b/src/view/com/posts/CustomFeedEmptyState.tsx index 62a10fd197..473968fca4 100644 --- a/src/view/com/posts/CustomFeedEmptyState.tsx +++ b/src/view/com/posts/CustomFeedEmptyState.tsx @@ -1,18 +1,19 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' +import {Trans} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' import {MagnifyingGlassIcon} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' -import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' export function CustomFeedEmptyState() { const pal = usePalette('default') diff --git a/src/view/com/posts/DiscoverFallbackHeader.tsx b/src/view/com/posts/DiscoverFallbackHeader.tsx index ffde899979..cb6dcc021f 100644 --- a/src/view/com/posts/DiscoverFallbackHeader.tsx +++ b/src/view/com/posts/DiscoverFallbackHeader.tsx @@ -1,11 +1,13 @@ +import {Trans} from '@lingui/macro' import React from 'react' import {View} from 'react-native' -import {Trans} from '@lingui/macro' -import {Text} from '../util/text/Text' + import {usePalette} from '#/lib/hooks/usePalette' -import {TextLink} from '../util/Link' import {InfoCircleIcon} from '#/lib/icons' +import {TextLink} from '../util/Link' +import {Text} from '../util/text/Text' + export function DiscoverFallbackHeader() { const pal = usePalette('default') return ( diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index cd3e98785d..65f5437cb8 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -1,3 +1,9 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from 'lib/analytics/analytics' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' +import {useTheme} from 'lib/ThemeContext' import React, {memo} from 'react' import { ActivityIndicator, @@ -8,31 +14,27 @@ import { View, ViewStyle, } from 'react-native' -import {useQueryClient} from '@tanstack/react-query' -import {List, ListRef} from '../util/List' -import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {FeedErrorMessage} from './FeedErrorMessage' -import {FeedSlice} from './FeedSlice' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {useAnalytics} from 'lib/analytics/analytics' -import {useTheme} from 'lib/ThemeContext' + +import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' import {logger} from '#/logger' -import { - RQKEY, - FeedDescriptor, - FeedParams, - usePostFeedQuery, - pollLatest, -} from '#/state/queries/post-feed' import {isWeb} from '#/platform/detection' import {listenPostCreated} from '#/state/events' -import {useSession} from '#/state/session' import {STALE} from '#/state/queries' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import { + FeedDescriptor, + FeedParams, + pollLatest, + RQKEY, + usePostFeedQuery, +} from '#/state/queries/post-feed' +import {useSession} from '#/state/session' + +import {List, ListRef} from '../util/List' +import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' -import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' +import {FeedErrorMessage} from './FeedErrorMessage' +import {FeedSlice} from './FeedSlice' const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} diff --git a/src/view/com/posts/FeedErrorMessage.tsx b/src/view/com/posts/FeedErrorMessage.tsx index 6d99c32f18..54381081d1 100644 --- a/src/view/com/posts/FeedErrorMessage.tsx +++ b/src/view/com/posts/FeedErrorMessage.tsx @@ -1,22 +1,24 @@ -import React from 'react' -import {View} from 'react-native' import {AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import * as Toast from '../util/Toast' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {usePalette} from 'lib/hooks/usePalette' -import {useNavigation} from '@react-navigation/native' -import {NavigationProp} from 'lib/routes/types' -import {logger} from '#/logger' -import {useModalControls} from '#/state/modals' import {msg as msgLingui, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {FeedDescriptor} from '#/state/queries/post-feed' -import {EmptyState} from '../util/EmptyState' +import {useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {NavigationProp} from 'lib/routes/types' +import React from 'react' +import {View} from 'react-native' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {useModalControls} from '#/state/modals' +import {FeedDescriptor} from '#/state/queries/post-feed' import {useRemoveFeedMutation} from '#/state/queries/preferences' +import {EmptyState} from '../util/EmptyState' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' +import * as Toast from '../util/Toast' + export enum KnownError { Block = 'Block', FeedgenDoesNotExist = 'FeedgenDoesNotExist', diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 7d29703e2d..078465961b 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -1,5 +1,3 @@ -import React, {memo, useMemo, useState} from 'react' -import {StyleSheet, View} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -11,32 +9,36 @@ import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {ReasonFeedSource, isReasonFeedSource} from 'lib/api/feed/types' -import {Link, TextLinkOnWebOnly, TextLink} from '../util/Link' -import {Text} from '../util/text/Text' -import {UserInfoText} from '../util/UserInfoText' -import {PostMeta} from '../util/PostMeta' -import {PostCtrls} from '../util/post-ctrls/PostCtrls' -import {PostEmbeds} from '../util/post-embeds' -import {ContentHider} from '../util/moderation/ContentHider' -import {PostAlerts} from '../util/moderation/PostAlerts' -import {RichText} from '#/components/RichText' -import {PreviewableUserAvatar} from '../util/UserAvatar' -import {s} from 'lib/styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {isReasonFeedSource, ReasonFeedSource} from 'lib/api/feed/types' +import {MAX_POST_LINES} from 'lib/constants' +import {isEmbedByEmbedder} from 'lib/embeds' import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {isEmbedByEmbedder} from 'lib/embeds' -import {MAX_POST_LINES} from 'lib/constants' import {countLines} from 'lib/strings/helpers' -import {useComposerControls} from '#/state/shell/composer' -import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' -import {FeedNameText} from '../util/FeedInfoText' -import {useSession} from '#/state/session' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {s} from 'lib/styles' +import React, {memo, useMemo, useState} from 'react' +import {StyleSheet, View} from 'react-native' + import {atoms as a} from '#/alf' +import {RichText} from '#/components/RichText' +import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' +import {useSession} from '#/state/session' +import {useComposerControls} from '#/state/shell/composer' + +import {FeedNameText} from '../util/FeedInfoText' +import {Link, TextLink, TextLinkOnWebOnly} from '../util/Link' +import {ContentHider} from '../util/moderation/ContentHider' +import {PostAlerts} from '../util/moderation/PostAlerts' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' +import {PostEmbeds} from '../util/post-embeds' +import {PostMeta} from '../util/PostMeta' +import {Text} from '../util/text/Text' +import {PreviewableUserAvatar} from '../util/UserAvatar' +import {UserInfoText} from '../util/UserInfoText' export function FeedItem({ post, diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx index 84edee4a11..b4a6b37e67 100644 --- a/src/view/com/posts/FeedSlice.tsx +++ b/src/view/com/posts/FeedSlice.tsx @@ -1,14 +1,16 @@ -import React, {memo} from 'react' -import {StyleSheet, View} from 'react-native' -import {FeedPostSlice} from '#/state/queries/post-feed' import {AtUri} from '@atproto/api' -import {Link} from '../util/Link' -import {Text} from '../util/text/Text' -import Svg, {Circle, Line} from 'react-native-svg' -import {FeedItem} from './FeedItem' +import {Trans} from '@lingui/macro' import {usePalette} from 'lib/hooks/usePalette' import {makeProfileLink} from 'lib/routes/links' -import {Trans} from '@lingui/macro' +import React, {memo} from 'react' +import {StyleSheet, View} from 'react-native' +import Svg, {Circle, Line} from 'react-native-svg' + +import {FeedPostSlice} from '#/state/queries/post-feed' + +import {Link} from '../util/Link' +import {Text} from '../util/text/Text' +import {FeedItem} from './FeedItem' let FeedSlice = ({slice}: {slice: FeedPostSlice}): React.ReactNode => { if (slice.isThread && slice.items.length > 3) { diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx index ef02039afb..e2991435e8 100644 --- a/src/view/com/posts/FollowingEmptyState.tsx +++ b/src/view/com/posts/FollowingEmptyState.tsx @@ -1,18 +1,19 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' +import {Trans} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' import {MagnifyingGlassIcon} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' -import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' export function FollowingEmptyState() { const pal = usePalette('default') diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx index bea5bedeac..c91d94ce24 100644 --- a/src/view/com/posts/FollowingEndOfFeed.tsx +++ b/src/view/com/posts/FollowingEndOfFeed.tsx @@ -1,17 +1,18 @@ -import React from 'react' -import {StyleSheet, View, Dimensions} from 'react-native' -import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../util/text/Text' -import {Button} from '../util/forms/Button' -import {NavigationProp} from 'lib/routes/types' +import {Trans} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' import {usePalette} from 'lib/hooks/usePalette' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import {Trans} from '@lingui/macro' +import React from 'react' +import {Dimensions, StyleSheet, View} from 'react-native' + +import {Button} from '../util/forms/Button' +import {Text} from '../util/text/Text' export function FollowingEndOfFeed() { const pal = usePalette('default') diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx index 9cc635b664..d1ef10c36c 100644 --- a/src/view/com/profile/FollowButton.tsx +++ b/src/view/com/profile/FollowButton.tsx @@ -1,12 +1,14 @@ +import {AppBskyActorDefs} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {StyleProp, TextStyle, View} from 'react-native' -import {AppBskyActorDefs} from '@atproto/api' + +import {Shadow} from '#/state/cache/types' +import {useProfileFollowMutationQueue} from '#/state/queries/profile' + import {Button, ButtonType} from '../util/forms/Button' import * as Toast from '../util/Toast' -import {useProfileFollowMutationQueue} from '#/state/queries/profile' -import {Shadow} from '#/state/cache/types' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' export function FollowButton({ unfollowedType = 'inverted', diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 266adc51de..2830268d43 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -1,29 +1,31 @@ -import * as React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { AppBskyActorDefs, moderateProfile, ProfileModeration, } from '@atproto/api' +import {Trans} from '@lingui/macro' +import {usePalette} from 'lib/hooks/usePalette' +import { + describeModerationCause, + getModerationCauseKey, + getProfileModerationCauses, +} from 'lib/moderation' +import {makeProfileLink} from 'lib/routes/links' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {s} from 'lib/styles' +import * as React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {Shadow} from '#/state/cache/types' +import {useModerationOpts} from '#/state/queries/preferences' +import {useSession} from '#/state/session' + import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {UserAvatar} from '../util/UserAvatar' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' import {FollowButton} from './FollowButton' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import { - describeModerationCause, - getProfileModerationCauses, - getModerationCauseKey, -} from 'lib/moderation' -import {Shadow} from '#/state/cache/types' -import {useModerationOpts} from '#/state/queries/preferences' -import {useProfileShadow} from '#/state/cache/profile-shadow' -import {useSession} from '#/state/session' -import {Trans} from '@lingui/macro' export function ProfileCard({ testID, diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index 411ae6c176..e48ec96591 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -1,15 +1,17 @@ +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {LoadingScreen} from '../util/LoadingScreen' -import {List} from '../util/List' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {ProfileCardWithFollowBtn} from './ProfileCard' + +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' import {useProfileFollowersQuery} from '#/state/queries/profile-followers' import {useResolveDidQuery} from '#/state/queries/resolve-uri' -import {logger} from '#/logger' -import {cleanError} from '#/lib/strings/errors' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List} from '../util/List' +import {LoadingScreen} from '../util/LoadingScreen' +import {CenteredView} from '../util/Views' +import {ProfileCardWithFollowBtn} from './ProfileCard' export function ProfileFollowers({name}: {name: string}) { const [isPTRing, setIsPTRing] = React.useState(false) diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index bd4af10810..58275cd0ed 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -1,15 +1,17 @@ +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {CenteredView} from '../util/Views' -import {LoadingScreen} from '../util/LoadingScreen' -import {List} from '../util/List' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {ProfileCardWithFollowBtn} from './ProfileCard' + +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' import {useProfileFollowsQuery} from '#/state/queries/profile-follows' import {useResolveDidQuery} from '#/state/queries/resolve-uri' -import {logger} from '#/logger' -import {cleanError} from '#/lib/strings/errors' + +import {ErrorMessage} from '../util/error/ErrorMessage' +import {List} from '../util/List' +import {LoadingScreen} from '../util/LoadingScreen' +import {CenteredView} from '../util/Views' +import {ProfileCardWithFollowBtn} from './ProfileCard' export function ProfileFollows({name}: {name: string}) { const [isPTRing, setIsPTRing] = React.useState(false) diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index a11fe83743..b78c95f789 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -1,3 +1,24 @@ +import { + AppBskyActorDefs, + moderateProfile, + ModerationOpts, + RichText as RichTextAPI, +} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {BACK_HITSLOP} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {makeProfileLink} from 'lib/routes/links' +import {NavigationProp} from 'lib/routes/types' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {isInvalidHandle, sanitizeHandle} from 'lib/strings/handles' +import {pluralize} from 'lib/strings/helpers' +import {colors, s} from 'lib/styles' +import {isNative} from 'platform/detection' import React, {memo, useMemo} from 'react' import { StyleSheet, @@ -5,53 +26,34 @@ import { TouchableWithoutFeedback, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' -import { - AppBskyActorDefs, - ModerationOpts, - moderateProfile, - RichText as RichTextAPI, -} from '@atproto/api' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {NavigationProp} from 'lib/routes/types' -import {isNative} from 'platform/detection' -import {BlurView} from '../util/BlurView' -import * as Toast from '../util/Toast' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' -import {Text} from '../util/text/Text' -import {ThemedText} from '../util/text/ThemedText' +import {useProfileShadow} from 'state/cache/profile-shadow' +import {ProfileMenu} from 'view/com/profile/ProfileMenu' + +import {atoms as a} from '#/alf' import {RichText} from '#/components/RichText' -import {UserAvatar} from '../util/UserAvatar' -import {UserBanner} from '../util/UserBanner' -import {ProfileHeaderAlerts} from '../util/moderation/ProfileHeaderAlerts' -import {formatCount} from '../util/numeric/format' -import {Link} from '../util/Link' -import {ProfileHeaderSuggestedFollows} from './ProfileHeaderSuggestedFollows' +import {logger} from '#/logger' +import {Shadow} from '#/state/cache/types' +import {ProfileImageLightbox, useLightboxControls} from '#/state/lightbox' import {useModalControls} from '#/state/modals' -import {useLightboxControls, ProfileImageLightbox} from '#/state/lightbox' import { useProfileBlockMutationQueue, useProfileFollowMutationQueue, } from '#/state/queries/profile' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {BACK_HITSLOP} from 'lib/constants' -import {isInvalidHandle, sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {pluralize} from 'lib/strings/helpers' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {s, colors} from 'lib/styles' -import {logger} from '#/logger' import {useSession} from '#/state/session' -import {Shadow} from '#/state/cache/types' import {useRequireAuth} from '#/state/session' + +import {BlurView} from '../util/BlurView' +import {Link} from '../util/Link' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {LabelInfo} from '../util/moderation/LabelInfo' -import {useProfileShadow} from 'state/cache/profile-shadow' -import {atoms as a} from '#/alf' -import {ProfileMenu} from 'view/com/profile/ProfileMenu' +import {ProfileHeaderAlerts} from '../util/moderation/ProfileHeaderAlerts' +import {formatCount} from '../util/numeric/format' +import {Text} from '../util/text/Text' +import {ThemedText} from '../util/text/ThemedText' +import * as Toast from '../util/Toast' +import {UserAvatar} from '../util/UserAvatar' +import {UserBanner} from '../util/UserBanner' +import {ProfileHeaderSuggestedFollows} from './ProfileHeaderSuggestedFollows' let ProfileHeaderLoading = (_props: {}): React.ReactNode => { const pal = usePalette('default') diff --git a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx index 6edc61fcf8..bc440a68ab 100644 --- a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx +++ b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx @@ -1,27 +1,28 @@ -import React from 'react' -import {View, StyleSheet, Pressable, ScrollView} from 'react-native' import {AppBskyActorDefs, moderateProfile} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' - -import * as Toast from '../util/Toast' +import {Trans} from '@lingui/macro' +import {useAnalytics} from 'lib/analytics/analytics' import {usePalette} from 'lib/hooks/usePalette' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {Button} from 'view/com/util/forms/Button' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {Link} from 'view/com/util/Link' -import {useAnalytics} from 'lib/analytics/analytics' import {isWeb} from 'platform/detection' -import {useModerationOpts} from '#/state/queries/preferences' -import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows' +import React from 'react' +import {Pressable, ScrollView, StyleSheet, View} from 'react-native' +import {Button} from 'view/com/util/forms/Button' +import {Link} from 'view/com/util/Link' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' + import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useModerationOpts} from '#/state/queries/preferences' import {useProfileFollowMutationQueue} from '#/state/queries/profile' -import {Trans} from '@lingui/macro' +import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows' + +import * as Toast from '../util/Toast' const OUTER_PADDING = 10 const INNER_PADDING = 14 diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx index d79e1891d8..c427ac9f72 100644 --- a/src/view/com/profile/ProfileMenu.tsx +++ b/src/view/com/profile/ProfileMenu.tsx @@ -1,21 +1,17 @@ -import React, {memo} from 'react' -import {TouchableOpacity} from 'react-native' import {AppBskyActorDefs} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useQueryClient} from '@tanstack/react-query' -import * as Toast from 'view/com/util/Toast' -import {EventStopper} from 'view/com/util/EventStopper' -import {useSession} from 'state/session' -import * as Menu from '#/components/Menu' -import {useTheme} from '#/alf' -import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' import {shareUrl} from 'lib/sharing' import {toShareUrl} from 'lib/strings/url-helpers' -import {makeProfileLink} from 'lib/routes/links' -import {useAnalytics} from 'lib/analytics/analytics' +import React, {memo} from 'react' +import {TouchableOpacity} from 'react-native' +import {Shadow} from 'state/cache/types' import {useModalControls} from 'state/modals' import { RQKEY as profileQueryKey, @@ -23,16 +19,21 @@ import { useProfileFollowMutationQueue, useProfileMuteMutationQueue, } from 'state/queries/profile' +import {useSession} from 'state/session' +import {EventStopper} from 'view/com/util/EventStopper' +import * as Toast from 'view/com/util/Toast' + +import {useTheme} from '#/alf' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' -import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' -import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' +import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2' import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck' import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX' -import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2' +import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' +import * as Menu from '#/components/Menu' import {logger} from '#/logger' -import {Shadow} from 'state/cache/types' let ProfileMenu = ({ profile, diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index eaf00f3e66..f2934fa1c3 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -1,24 +1,26 @@ -import React from 'react' -import {Pressable, StyleSheet, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import {BACK_HITSLOP} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Text} from '../util/text/Text' -import {TextLink} from '../util/Link' -import {UserAvatar, UserAvatarType} from '../util/UserAvatar' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' -import {CenteredView} from '../util/Views' -import {sanitizeHandle} from 'lib/strings/handles' import {makeProfileLink} from 'lib/routes/links' import {NavigationProp} from 'lib/routes/types' -import {BACK_HITSLOP} from 'lib/constants' +import {sanitizeHandle} from 'lib/strings/handles' import {isNative} from 'platform/detection' -import {useLightboxControls, ImagesLightbox} from '#/state/lightbox' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' -import {useSetDrawerOpen} from '#/state/shell' +import React from 'react' +import {Pressable, StyleSheet, View} from 'react-native' + import {emitSoftReset} from '#/state/events' +import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' +import {useSetDrawerOpen} from '#/state/shell' + +import {TextLink} from '../util/Link' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {Text} from '../util/text/Text' +import {UserAvatar, UserAvatarType} from '../util/UserAvatar' +import {CenteredView} from '../util/Views' export function ProfileSubpageHeader({ isLoading, diff --git a/src/view/com/testing/TestCtrls.e2e.tsx b/src/view/com/testing/TestCtrls.e2e.tsx index e1e8994882..77a114b54a 100644 --- a/src/view/com/testing/TestCtrls.e2e.tsx +++ b/src/view/com/testing/TestCtrls.e2e.tsx @@ -1,12 +1,14 @@ +import {useQueryClient} from '@tanstack/react-query' import React from 'react' import {Pressable, View} from 'react-native' -import {navigate} from '../../../Navigation' + import {useModalControls} from '#/state/modals' -import {useQueryClient} from '@tanstack/react-query' -import {useSessionApi} from '#/state/session' import {useSetFeedViewPreferencesMutation} from '#/state/queries/preferences' +import {useSessionApi} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {navigate} from '../../../Navigation' + /** * This utility component is only included in the test simulator * build. It gives some quick triggers which help improve the pace diff --git a/src/view/com/threadgate/WhoCanReply.tsx b/src/view/com/threadgate/WhoCanReply.tsx index 1c34623d84..bd17a0de32 100644 --- a/src/view/com/threadgate/WhoCanReply.tsx +++ b/src/view/com/threadgate/WhoCanReply.tsx @@ -1,22 +1,23 @@ -import React from 'react' -import {StyleProp, View, ViewStyle} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedThreadgate, AppBskyGraphDefs, AtUri, } from '@atproto/api' -import {Trans} from '@lingui/macro' -import {usePalette} from '#/lib/hooks/usePalette' -import {Text} from '../util/text/Text' -import {TextLink} from '../util/Link' -import {makeProfileLink, makeListLink} from '#/lib/routes/links' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleProp, View, ViewStyle} from 'react-native' +import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' +import {usePalette} from '#/lib/hooks/usePalette' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {makeListLink, makeProfileLink} from '#/lib/routes/links' import {colors} from '#/lib/styles' +import {TextLink} from '../util/Link' +import {Text} from '../util/text/Text' + export function WhoCanReply({ post, style, diff --git a/src/view/com/util/AccountDropdownBtn.tsx b/src/view/com/util/AccountDropdownBtn.tsx index 221879df79..24f64af456 100644 --- a/src/view/com/util/AccountDropdownBtn.tsx +++ b/src/view/com/util/AccountDropdownBtn.tsx @@ -1,16 +1,18 @@ -import React from 'react' -import {Pressable} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {DropdownItem, NativeDropdown} from './forms/NativeDropdown' -import * as Toast from '../../com/util/Toast' -import {useSessionApi, SessionAccount} from '#/state/session' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import React from 'react' +import {Pressable} from 'react-native' + +import {SessionAccount, useSessionApi} from '#/state/session' + +import * as Toast from '../../com/util/Toast' +import {DropdownItem, NativeDropdown} from './forms/NativeDropdown' export function AccountDropdownBtn({account}: {account: SessionAccount}) { const pal = usePalette('default') diff --git a/src/view/com/util/BlurView.android.tsx b/src/view/com/util/BlurView.android.tsx index eee1d9d867..a62e1dff01 100644 --- a/src/view/com/util/BlurView.android.tsx +++ b/src/view/com/util/BlurView.android.tsx @@ -1,6 +1,6 @@ +import {addStyle} from 'lib/styles' import React from 'react' import {StyleSheet, View, ViewProps} from 'react-native' -import {addStyle} from 'lib/styles' type BlurViewProps = ViewProps & { blurType?: 'dark' | 'light' diff --git a/src/view/com/util/BlurView.web.tsx b/src/view/com/util/BlurView.web.tsx index d1fb4665fb..09807816b3 100644 --- a/src/view/com/util/BlurView.web.tsx +++ b/src/view/com/util/BlurView.web.tsx @@ -1,6 +1,6 @@ +import {addStyle} from 'lib/styles' import React from 'react' import {StyleSheet, View, ViewProps} from 'react-native' -import {addStyle} from 'lib/styles' type BlurViewProps = ViewProps & { blurType?: 'dark' | 'light' diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx index ed5a2f1654..7cf9c10da6 100644 --- a/src/view/com/util/BottomSheetCustomBackdrop.tsx +++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx @@ -1,12 +1,12 @@ +import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet' +import {t} from '@lingui/macro' import React, {useMemo} from 'react' import {TouchableWithoutFeedback} from 'react-native' -import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet' import Animated, { Extrapolate, interpolate, useAnimatedStyle, } from 'react-native-reanimated' -import {t} from '@lingui/macro' export function createCustomBackdrop( onClose?: (() => void) | undefined, diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index 7486b212fa..cc71165b55 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -1,13 +1,14 @@ -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {IconProp} from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from './text/Text' -import {UserGroupIcon} from 'lib/icons' import {usePalette} from 'lib/hooks/usePalette' +import {UserGroupIcon} from 'lib/icons' +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + +import {Text} from './text/Text' export function EmptyState({ testID, diff --git a/src/view/com/util/EmptyStateWithButton.tsx b/src/view/com/util/EmptyStateWithButton.tsx index 008ca2bdb6..1a580ae9aa 100644 --- a/src/view/com/util/EmptyStateWithButton.tsx +++ b/src/view/com/util/EmptyStateWithButton.tsx @@ -1,14 +1,15 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' +import {IconProp} from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {Text} from './text/Text' -import {Button} from './forms/Button' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Button} from './forms/Button' +import {Text} from './text/Text' interface Props { testID?: string diff --git a/src/view/com/util/ErrorBoundary.tsx b/src/view/com/util/ErrorBoundary.tsx index 5ec1d00144..b287a2469a 100644 --- a/src/view/com/util/ErrorBoundary.tsx +++ b/src/view/com/util/ErrorBoundary.tsx @@ -1,8 +1,10 @@ +import {t} from '@lingui/macro' import React, {Component, ErrorInfo, ReactNode} from 'react' + +import {logger} from '#/logger' + import {ErrorScreen} from './error/ErrorScreen' import {CenteredView} from './Views' -import {t} from '@lingui/macro' -import {logger} from '#/logger' interface Props { children?: ReactNode diff --git a/src/view/com/util/FeedInfoText.tsx b/src/view/com/util/FeedInfoText.tsx index 54124c739a..3afaf256cc 100644 --- a/src/view/com/util/FeedInfoText.tsx +++ b/src/view/com/util/FeedInfoText.tsx @@ -1,10 +1,12 @@ +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {TypographyVariant} from 'lib/ThemeContext' import React from 'react' import {StyleProp, StyleSheet, TextStyle} from 'react-native' + +import {useFeedSourceInfoQuery} from '#/state/queries/feed' + import {TextLinkOnWebOnly} from './Link' import {LoadingPlaceholder} from './LoadingPlaceholder' -import {TypographyVariant} from 'lib/ThemeContext' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {useFeedSourceInfoQuery} from '#/state/queries/feed' export function FeedNameText({ type = 'md', diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx index 2e47194811..b8d31dfd6a 100644 --- a/src/view/com/util/Html.tsx +++ b/src/view/com/util/Html.tsx @@ -1,16 +1,17 @@ -import * as React from 'react' -import {StyleSheet, View} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {Text} from './text/Text' -import {TextLink} from './Link' import { H1 as ExpoH1, H2 as ExpoH2, H3 as ExpoH3, H4 as ExpoH4, } from '@expo/html-elements' +import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useTheme} from 'lib/ThemeContext' +import * as React from 'react' +import {StyleSheet, View} from 'react-native' + +import {TextLink} from './Link' +import {Text} from './text/Text' /** * These utilities are used to define long documents in an html-like diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index f456224885..112e061bcc 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -1,36 +1,38 @@ -import React, {ComponentProps, memo, useMemo} from 'react' +import {sanitizeUrl} from '@braintree/sanitize-url' +import {StackActions, useLinkProps} from '@react-navigation/native' import { - GestureResponderEvent, - Platform, - StyleProp, - TextStyle, - TextProps, - View, - ViewStyle, - Pressable, - TouchableWithoutFeedback, - TouchableOpacity, -} from 'react-native' -import {useLinkProps, StackActions} from '@react-navigation/native' -import {Text} from './text/Text' -import {TypographyVariant} from 'lib/ThemeContext' -import {router} from '../../../routes' + DebouncedNavigationProp, + useNavigationDeduped, +} from 'lib/hooks/useNavigationDeduped' import { convertBskyAppUrlIfNeeded, isExternalUrl, linkRequiresWarning, } from 'lib/strings/url-helpers' +import {TypographyVariant} from 'lib/ThemeContext' import {isAndroid, isWeb} from 'platform/detection' -import {sanitizeUrl} from '@braintree/sanitize-url' -import {PressableWithHover} from './PressableWithHover' -import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' +import React, {ComponentProps, memo, useMemo} from 'react' +import { + GestureResponderEvent, + Platform, + Pressable, + StyleProp, + TextProps, + TextStyle, + TouchableOpacity, + TouchableWithoutFeedback, + View, + ViewStyle, +} from 'react-native' +import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper' + import {useModalControls} from '#/state/modals' import {useOpenLink} from '#/state/preferences/in-app-browser' -import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper' -import { - DebouncedNavigationProp, - useNavigationDeduped, -} from 'lib/hooks/useNavigationDeduped' + +import {router} from '../../../routes' +import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' +import {PressableWithHover} from './PressableWithHover' +import {Text} from './text/Text' type Event = | React.MouseEvent diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index d30a9d805b..896608af1f 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -1,11 +1,13 @@ +import {addStyle} from 'lib/styles' import React, {memo} from 'react' import {FlatListProps, RefreshControl} from 'react-native' -import {FlatList_INTERNAL} from './Views' -import {addStyle} from 'lib/styles' -import {useScrollHandlers} from '#/lib/ScrollContext' import {runOnJS, useSharedValue} from 'react-native-reanimated' + import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {usePalette} from '#/lib/hooks/usePalette' +import {useScrollHandlers} from '#/lib/ScrollContext' + +import {FlatList_INTERNAL} from './Views' export type ListMethods = FlatList_INTERNAL export type ListProps = Omit< diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 936bac198d..6fb17b9f68 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -1,11 +1,12 @@ -import React, {isValidElement, memo, useRef, startTransition} from 'react' -import {FlatListProps, StyleSheet, View, ViewProps} from 'react-native' -import {addStyle} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useScrollHandlers} from '#/lib/ScrollContext' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {addStyle} from 'lib/styles' +import React, {isValidElement, memo, startTransition, useRef} from 'react' +import {FlatListProps, StyleSheet, View, ViewProps} from 'react-native' + import {batchedUpdates} from '#/lib/batchedUpdates' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {useScrollHandlers} from '#/lib/ScrollContext' export type ListMethods = any // TODO: Better types. export type ListProps = Omit< diff --git a/src/view/com/util/LoadMoreRetryBtn.tsx b/src/view/com/util/LoadMoreRetryBtn.tsx index a2e9838b36..fa82456322 100644 --- a/src/view/com/util/LoadMoreRetryBtn.tsx +++ b/src/view/com/util/LoadMoreRetryBtn.tsx @@ -1,12 +1,13 @@ -import React from 'react' -import {StyleSheet} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import {StyleSheet} from 'react-native' + import {Button} from './forms/Button' import {Text} from './text/Text' -import {usePalette} from 'lib/hooks/usePalette' export function LoadMoreRetryBtn({ label, diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 6dfe125985..fb2c226e8e 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -1,20 +1,20 @@ -import React from 'react' -import { - StyleSheet, - StyleProp, - View, - ViewStyle, - DimensionValue, -} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' import { + CommentBottomArrow, HeartIcon, HeartIconSolid, - CommentBottomArrow, RepostIcon, } from 'lib/icons' import {s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import { + DimensionValue, + StyleProp, + StyleSheet, + View, + ViewStyle, +} from 'react-native' export function LoadingPlaceholder({ width, diff --git a/src/view/com/util/LoadingScreen.tsx b/src/view/com/util/LoadingScreen.tsx index 93c3bee42a..0736649316 100644 --- a/src/view/com/util/LoadingScreen.tsx +++ b/src/view/com/util/LoadingScreen.tsx @@ -1,6 +1,7 @@ +import {s} from 'lib/styles' import React from 'react' import {ActivityIndicator, View} from 'react-native' -import {s} from 'lib/styles' + import {CenteredView} from './Views' export function LoadingScreen() { diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx index 01b8a954d5..1ed0631ac4 100644 --- a/src/view/com/util/MainScrollProvider.tsx +++ b/src/view/com/util/MainScrollProvider.tsx @@ -1,11 +1,12 @@ -import React, {useCallback, useEffect} from 'react' import EventEmitter from 'eventemitter3' -import {ScrollProvider} from '#/lib/ScrollContext' -import {NativeScrollEvent} from 'react-native' -import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell' -import {useShellLayout} from '#/state/shell/shell-layout' import {isNative, isWeb} from 'platform/detection' -import {useSharedValue, interpolate} from 'react-native-reanimated' +import React, {useCallback, useEffect} from 'react' +import {NativeScrollEvent} from 'react-native' +import {interpolate, useSharedValue} from 'react-native-reanimated' + +import {ScrollProvider} from '#/lib/ScrollContext' +import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell' +import {useShellLayout} from '#/state/shell/shell-layout' const WEB_HIDE_SHELL_THRESHOLD = 200 diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 3795dcf136..5832fc5d86 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -1,19 +1,21 @@ -import React, {memo} from 'react' -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' -import {Text} from './text/Text' -import {TextLinkOnWebOnly} from './Link' -import {niceDate} from 'lib/strings/time' +import {ModerationUI} from '@atproto/api' import {usePalette} from 'lib/hooks/usePalette' -import {TypographyVariant} from 'lib/ThemeContext' -import {UserAvatar} from './UserAvatar' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' +import {niceDate} from 'lib/strings/time' +import {TypographyVariant} from 'lib/ThemeContext' import {isAndroid, isWeb} from 'platform/detection' -import {TimeElapsed} from './TimeElapsed' -import {makeProfileLink} from 'lib/routes/links' -import {ModerationUI} from '@atproto/api' +import React, {memo} from 'react' +import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' + import {usePrefetchProfileQuery} from '#/state/queries/profile' +import {TextLinkOnWebOnly} from './Link' +import {Text} from './text/Text' +import {TimeElapsed} from './TimeElapsed' +import {UserAvatar} from './UserAvatar' + interface PostMetaOpts { author: { avatar?: string diff --git a/src/view/com/util/PressableWithHover.tsx b/src/view/com/util/PressableWithHover.tsx index 77276f1843..83c84f836b 100644 --- a/src/view/com/util/PressableWithHover.tsx +++ b/src/view/com/util/PressableWithHover.tsx @@ -1,12 +1,12 @@ +import {addStyle} from 'lib/styles' import React, { - useState, - useCallback, - PropsWithChildren, forwardRef, + PropsWithChildren, Ref, + useCallback, + useState, } from 'react' import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' -import {addStyle} from 'lib/styles' interface PressableWithHover extends PressableProps { hoverStyle: StyleProp diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx index 66e363cd41..b607a018a9 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector.tsx @@ -1,9 +1,10 @@ -import React, {createRef, useState, useMemo, useRef} from 'react' -import {Animated, Pressable, StyleSheet, View} from 'react-native' -import {Text} from './text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import React, {createRef, useMemo, useRef, useState} from 'react' +import {Animated, Pressable, StyleSheet, View} from 'react-native' + +import {Text} from './text/Text' interface Layout { x: number diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx index 814b2fb15d..3319f7a943 100644 --- a/src/view/com/util/SimpleViewHeader.tsx +++ b/src/view/com/util/SimpleViewHeader.tsx @@ -1,3 +1,9 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NavigationProp} from 'lib/routes/types' import React from 'react' import { StyleProp, @@ -6,15 +12,11 @@ import { View, ViewStyle, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' -import {CenteredView} from './Views' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAnalytics} from 'lib/analytics/analytics' -import {NavigationProp} from 'lib/routes/types' -import {useSetDrawerOpen} from '#/state/shell' + import {isWeb} from '#/platform/detection' +import {useSetDrawerOpen} from '#/state/shell' + +import {CenteredView} from './Views' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx index aa3a092235..bf848193d1 100644 --- a/src/view/com/util/TimeElapsed.tsx +++ b/src/view/com/util/TimeElapsed.tsx @@ -1,5 +1,6 @@ -import React from 'react' import {ago} from 'lib/strings/time' +import React from 'react' + import {useTickEveryMinute} from '#/state/shell' // FIXME(dan): Figure out why the false positives diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 5462505e1e..91187e2059 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -1,14 +1,16 @@ -import RootSiblings from 'react-native-root-siblings' -import React from 'react' -import {Animated, StyleSheet, View} from 'react-native' import {Props as FontAwesomeProps} from '@fortawesome/react-native-fontawesome' -import {Text} from './text/Text' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import {usePalette} from 'lib/hooks/usePalette' import {colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import React from 'react' +import {Animated, StyleSheet, View} from 'react-native' +import RootSiblings from 'react-native-root-siblings' + import {IS_TEST} from '#/env' +import {Text} from './text/Text' + const TIMEOUT = 4e3 export function show( diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index d5a8435412..da7a5df8ea 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -2,13 +2,13 @@ * Note: the dataSet properties are used to leverage custom CSS in public/index.html */ -import React, {useState, useEffect} from 'react' -import {StyleSheet, Text, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, Props as FontAwesomeProps, } from '@fortawesome/react-native-fontawesome' +import React, {useEffect, useState} from 'react' +import {StyleSheet, Text, View} from 'react-native' const DURATION = 3500 diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 4132373974..2aa28b725f 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -1,30 +1,31 @@ -import React, {memo, useMemo} from 'react' -import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' -import Svg, {Circle, Rect, Path} from 'react-native-svg' -import {Image as RNImage} from 'react-native-image-crop-picker' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ModerationUI} from '@atproto/api' - -import {HighPriorityImage} from 'view/com/util/images/Image' -import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' import { - usePhotoLibraryPermission, useCameraPermission, + usePhotoLibraryPermission, } from 'lib/hooks/usePermissions' import {colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb, isAndroid, isNative} from 'platform/detection' -import {UserPreviewLink} from './UserPreviewLink' -import * as Menu from '#/components/Menu' +import {isAndroid, isNative, isWeb} from 'platform/detection' +import React, {memo, useMemo} from 'react' +import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' +import {Image as RNImage} from 'react-native-image-crop-picker' +import Svg, {Circle, Path, Rect} from 'react-native-svg' +import {HighPriorityImage} from 'view/com/util/images/Image' + +import {useTheme} from '#/alf' import { - Camera_Stroke2_Corner0_Rounded as Camera, Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, + Camera_Stroke2_Corner0_Rounded as Camera, } from '#/components/icons/Camera' import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import {useTheme} from '#/alf' +import * as Menu from '#/components/Menu' + +import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' +import {UserPreviewLink} from './UserPreviewLink' export type UserAvatarType = 'user' | 'algo' | 'list' diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index a5ddfee8ac..6eb0ccc12a 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -1,29 +1,30 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' import {ModerationUI} from '@atproto/api' -import {Image} from 'expo-image' -import {useLingui} from '@lingui/react' import {msg, Trans} from '@lingui/macro' - +import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' +import {usePalette} from 'lib/hooks/usePalette' +import { + useCameraPermission, + usePhotoLibraryPermission, +} from 'lib/hooks/usePermissions' import {colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {useTheme as useAlfTheme} from '#/alf' -import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' -import { - usePhotoLibraryPermission, - useCameraPermission, -} from 'lib/hooks/usePermissions' -import {usePalette} from 'lib/hooks/usePalette' import {isAndroid, isNative} from 'platform/detection' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {Image as RNImage} from 'react-native-image-crop-picker' import {EventStopper} from 'view/com/util/EventStopper' -import * as Menu from '#/components/Menu' + +import {useTheme as useAlfTheme} from '#/alf' import { Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, Camera_Stroke2_Corner0_Rounded as Camera, } from '#/components/icons/Camera' import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import * as Menu from '#/components/Menu' + +import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' export function UserBanner({ banner, diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index 9cb9997f60..ab937c664b 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -1,15 +1,17 @@ -import React from 'react' import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' -import {StyleProp, StyleSheet, TextStyle} from 'react-native' -import {TextLinkOnWebOnly} from './Link' -import {Text} from './text/Text' -import {LoadingPlaceholder} from './LoadingPlaceholder' -import {TypographyVariant} from 'lib/ThemeContext' +import {makeProfileLink} from 'lib/routes/links' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink} from 'lib/routes/links' -import {useProfileQuery} from '#/state/queries/profile' +import {TypographyVariant} from 'lib/ThemeContext' +import React from 'react' +import {StyleProp, StyleSheet, TextStyle} from 'react-native' + import {STALE} from '#/state/queries' +import {useProfileQuery} from '#/state/queries/profile' + +import {TextLinkOnWebOnly} from './Link' +import {LoadingPlaceholder} from './LoadingPlaceholder' +import {Text} from './text/Text' export function UserInfoText({ type = 'md', diff --git a/src/view/com/util/UserPreviewLink.tsx b/src/view/com/util/UserPreviewLink.tsx index a2c46afc01..09d230000e 100644 --- a/src/view/com/util/UserPreviewLink.tsx +++ b/src/view/com/util/UserPreviewLink.tsx @@ -1,10 +1,12 @@ +import {makeProfileLink} from 'lib/routes/links' +import {isWeb} from 'platform/detection' import React from 'react' import {StyleProp, ViewStyle} from 'react-native' -import {Link} from './Link' -import {isWeb} from 'platform/detection' -import {makeProfileLink} from 'lib/routes/links' + import {usePrefetchProfileQuery} from '#/state/queries/profile' +import {Link} from './Link' + interface UserPreviewLinkProps { did: string handle: string diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 872e10eef0..3ac7572692 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,19 +1,21 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' -import {CenteredView} from './Views' -import {Text} from './text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAnalytics} from 'lib/analytics/analytics' -import {NavigationProp} from 'lib/routes/types' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import Animated from 'react-native-reanimated' -import {useSetDrawerOpen} from '#/state/shell' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NavigationProp} from 'lib/routes/types' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import Animated from 'react-native-reanimated' + import {useTheme} from '#/alf' +import {useSetDrawerOpen} from '#/state/shell' + +import {Text} from './text/Text' +import {CenteredView} from './Views' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx index ee993c564d..3800283349 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/src/view/com/util/ViewSelector.tsx @@ -1,20 +1,21 @@ -import React, {useEffect, useState} from 'react' -import { - NativeSyntheticEvent, - NativeScrollEvent, - Pressable, - RefreshControl, - StyleSheet, - View, - ScrollView, -} from 'react-native' -import {FlatList_INTERNAL} from './Views' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {Text} from './text/Text' import {usePalette} from 'lib/hooks/usePalette' import {clamp} from 'lib/numbers' -import {s, colors} from 'lib/styles' +import {colors, s} from 'lib/styles' import {isAndroid} from 'platform/detection' +import React, {useEffect, useState} from 'react' +import { + NativeScrollEvent, + NativeSyntheticEvent, + Pressable, + RefreshControl, + ScrollView, + StyleSheet, + View, +} from 'react-native' + +import {Text} from './text/Text' +import {FlatList_INTERNAL} from './Views' const HEADER_ITEM = {_reactKey: '__header__'} const SELECTOR_ITEM = {_reactKey: '__selector__'} diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index ae165077ca..db023a32c8 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -12,6 +12,9 @@ * need to match layout but which aren't scrolled. */ +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {addStyle} from 'lib/styles' import React from 'react' import { FlatListProps, @@ -20,9 +23,6 @@ import { View, ViewProps, } from 'react-native' -import {addStyle} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import Animated from 'react-native-reanimated' interface AddedProps { diff --git a/src/view/com/util/anim/TriggerableAnimated.tsx b/src/view/com/util/anim/TriggerableAnimated.tsx index eedeeda037..bb88035d7b 100644 --- a/src/view/com/util/anim/TriggerableAnimated.tsx +++ b/src/view/com/util/anim/TriggerableAnimated.tsx @@ -1,6 +1,6 @@ +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import React from 'react' import {Animated, StyleProp, View, ViewStyle} from 'react-native' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' type CreateAnimFn = (interp: Animated.Value) => Animated.CompositeAnimation type FinishCb = () => void diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx index a4238b8a46..5418a0204d 100644 --- a/src/view/com/util/error/ErrorMessage.tsx +++ b/src/view/com/util/error/ErrorMessage.tsx @@ -1,20 +1,21 @@ -import React from 'react' -import { - StyleSheet, - TouchableOpacity, - StyleProp, - View, - ViewStyle, -} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../text/Text' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import React from 'react' +import { + StyleProp, + StyleSheet, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' + +import {Text} from '../text/Text' export function ErrorMessage({ message, diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index 98fe6437b6..f3c4a7a3bd 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -1,18 +1,19 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Text} from '../text/Text' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {Button} from '../forms/Button' -import {CenteredView} from '../Views' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {ViewHeader} from 'view/com/util/ViewHeader' +import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useTheme} from 'lib/ThemeContext' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {ViewHeader} from 'view/com/util/ViewHeader' + +import {Button} from '../forms/Button' +import {Text} from '../text/Text' +import {CenteredView} from '../Views' export function ErrorScreen({ title, diff --git a/src/view/com/util/fab/FAB.web.tsx b/src/view/com/util/fab/FAB.web.tsx index 0a8831fa92..cbe1adfd38 100644 --- a/src/view/com/util/fab/FAB.web.tsx +++ b/src/view/com/util/fab/FAB.web.tsx @@ -1,7 +1,8 @@ +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {View} from 'react-native' + import {FABInner, FABProps} from './FABInner' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' export const FAB = (_opts: FABProps) => { const {isDesktop} = useWebMediaQueries() diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index 27a16117bd..15e3262ae9 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -1,13 +1,14 @@ +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {clamp} from 'lib/numbers' +import {gradients} from 'lib/styles' import React, {ComponentProps} from 'react' import {StyleSheet, TouchableWithoutFeedback} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {gradients} from 'lib/styles' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {clamp} from 'lib/numbers' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {isWeb} from '#/platform/detection' import Animated from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' + +import {isWeb} from '#/platform/detection' export interface FABProps extends ComponentProps { diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index e6e05bb044..62d49c00bf 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/src/view/com/util/forms/Button.tsx @@ -1,20 +1,21 @@ +import {choose} from 'lib/functions' +import {useTheme} from 'lib/ThemeContext' import React from 'react' import { + ActivityIndicator, GestureResponderEvent, + NativeSyntheticEvent, + NativeTouchEvent, + Pressable, + PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, - Pressable, - ViewStyle, - PressableStateCallbackType, - ActivityIndicator, View, - NativeSyntheticEvent, - NativeTouchEvent, + ViewStyle, } from 'react-native' + import {Text} from '../text/Text' -import {useTheme} from 'lib/ThemeContext' -import {choose} from 'lib/functions' export type ButtonType = | 'primary' diff --git a/src/view/com/util/forms/DateInput.tsx b/src/view/com/util/forms/DateInput.tsx index 0104562aa5..8a813049a4 100644 --- a/src/view/com/util/forms/DateInput.tsx +++ b/src/view/com/util/forms/DateInput.tsx @@ -1,18 +1,19 @@ -import React, {useState, useCallback} from 'react' -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {isIOS, isAndroid} from 'platform/detection' -import {Button, ButtonType} from './Button' -import {Text} from '../text/Text' +import {getLocales} from 'expo-localization' +import {usePalette} from 'lib/hooks/usePalette' import {TypographyVariant} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {getLocales} from 'expo-localization' +import {isAndroid, isIOS} from 'platform/detection' +import React, {useCallback, useState} from 'react' +import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' import DatePicker from 'react-native-date-picker' +import {Text} from '../text/Text' +import {Button, ButtonType} from './Button' + const LOCALE = getLocales()[0] interface Props { diff --git a/src/view/com/util/forms/DateInput.web.tsx b/src/view/com/util/forms/DateInput.web.tsx index 8d74f6dae2..ff1ed58b76 100644 --- a/src/view/com/util/forms/DateInput.web.tsx +++ b/src/view/com/util/forms/DateInput.web.tsx @@ -1,8 +1,8 @@ -import React, {useState, useCallback} from 'react' +import {usePalette} from 'lib/hooks/usePalette' +import React, {useCallback, useState} from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' // @ts-ignore types not available -prf import {unstable_createElement} from 'react-native-web' -import {usePalette} from 'lib/hooks/usePalette' interface Props { testID?: string diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index 2285b0615a..f12f1d09cc 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -1,3 +1,12 @@ +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' import React, {PropsWithChildren, useMemo, useRef} from 'react' import { Dimensions, @@ -10,18 +19,10 @@ import { View, ViewStyle, } from 'react-native' -import {IconProp} from '@fortawesome/fontawesome-svg-core' import RootSiblings from 'react-native-root-siblings' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + import {Text} from '../text/Text' import {Button, ButtonType} from './Button' -import {colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {HITSLOP_10} from 'lib/constants' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {isWeb} from 'platform/detection' const ESTIMATED_BTN_HEIGHT = 50 const ESTIMATED_SEP_HEIGHT = 16 diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx index 0a47569f27..62f830c43b 100644 --- a/src/view/com/util/forms/NativeDropdown.tsx +++ b/src/view/com/util/forms/NativeDropdown.tsx @@ -1,13 +1,13 @@ -import React from 'react' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import * as DropdownMenu from 'zeego/dropdown-menu' -import {Pressable, StyleSheet, Platform, View, ViewStyle} from 'react-native' import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' -import {useTheme} from 'lib/ThemeContext' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' +import React from 'react' +import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native' +import * as DropdownMenu from 'zeego/dropdown-menu' +import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' // Custom Dropdown Menu Components // == diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx index 6abeb16cc2..10a005446c 100644 --- a/src/view/com/util/forms/NativeDropdown.web.tsx +++ b/src/view/com/util/forms/NativeDropdown.web.tsx @@ -1,12 +1,12 @@ -import React from 'react' +import {IconProp} from '@fortawesome/fontawesome-svg-core' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import {Pressable, StyleSheet, View, Text, ViewStyle} from 'react-native' -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' +import {HITSLOP_10} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' -import {HITSLOP_10} from 'lib/constants' +import React from 'react' +import {Pressable, StyleSheet, Text, View, ViewStyle} from 'react-native' +import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' // Custom Dropdown Menu Components // == diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index 3c1a736f3f..9727fc21f8 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -1,49 +1,50 @@ -import React, {memo} from 'react' -import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native' -import Clipboard from '@react-native-clipboard/clipboard' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' import { AppBskyActorDefs, AppBskyFeedPost, AtUri, RichText as RichTextAPI, } from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import Clipboard from '@react-native-clipboard/clipboard' +import {useNavigation} from '@react-navigation/native' +import {getCurrentRoute} from 'lib/routes/helpers' +import {shareUrl} from 'lib/sharing' import {toShareUrl} from 'lib/strings/url-helpers' import {useTheme} from 'lib/ThemeContext' -import {shareUrl} from 'lib/sharing' -import * as Toast from '../Toast' -import {EventStopper} from '../EventStopper' -import {useModalControls} from '#/state/modals' +import React, {memo} from 'react' +import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' + +import {atoms as a, useTheme as useAlf} from '#/alf' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' +import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' +import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' +import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' +import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' +import * as Menu from '#/components/Menu' import {makeProfileLink} from '#/lib/routes/links' import {CommonNavigatorParams} from '#/lib/routes/types' -import {getCurrentRoute} from 'lib/routes/helpers' +import {richTextToString} from '#/lib/strings/rich-text-helpers' import {getTranslatorLink} from '#/locale/helpers' -import {usePostDeleteMutation} from '#/state/queries/post' +import {logger} from '#/logger' +import {isWeb} from '#/platform/detection' +import {useModalControls} from '#/state/modals' import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads' import {useLanguagePrefs} from '#/state/preferences' import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences' import {useOpenLink} from '#/state/preferences/in-app-browser' -import {logger} from '#/logger' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {usePostDeleteMutation} from '#/state/queries/post' import {useSession} from '#/state/session' -import {isWeb} from '#/platform/detection' -import {richTextToString} from '#/lib/strings/rich-text-helpers' -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' -import {atoms as a, useTheme as useAlf} from '#/alf' -import * as Menu from '#/components/Menu' -import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' -import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' -import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' -import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' -import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' -import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' -import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' -import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {EventStopper} from '../EventStopper' +import * as Toast from '../Toast' let PostDropdownBtn = ({ testID, diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx index 9d1cb47497..696a0c00ab 100644 --- a/src/view/com/util/forms/RadioButton.tsx +++ b/src/view/com/util/forms/RadioButton.tsx @@ -1,9 +1,10 @@ +import {choose} from 'lib/functions' +import {useTheme} from 'lib/ThemeContext' import React from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' + import {Text} from '../text/Text' import {Button, ButtonType} from './Button' -import {useTheme} from 'lib/ThemeContext' -import {choose} from 'lib/functions' export function RadioButton({ testID, diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx index 14599e6490..abd1f5589d 100644 --- a/src/view/com/util/forms/RadioGroup.tsx +++ b/src/view/com/util/forms/RadioGroup.tsx @@ -1,8 +1,9 @@ +import {s} from 'lib/styles' import React, {useState} from 'react' import {View} from 'react-native' -import {RadioButton} from './RadioButton' + import {ButtonType} from './Button' -import {s} from 'lib/styles' +import {RadioButton} from './RadioButton' export interface RadioGroupItem { label: string | JSX.Element diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx index 5a21d8fdd0..ff8b6bbddb 100644 --- a/src/view/com/util/forms/SearchInput.tsx +++ b/src/view/com/util/forms/SearchInput.tsx @@ -1,3 +1,13 @@ +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {MagnifyingGlassIcon} from 'lib/icons' +import {useTheme} from 'lib/ThemeContext' import React from 'react' import { StyleProp, @@ -7,16 +17,6 @@ import { View, ViewStyle, } from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import {MagnifyingGlassIcon} from 'lib/icons' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' interface Props { query: string diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx index e577e155de..94eb049d2a 100644 --- a/src/view/com/util/forms/SelectableBtn.tsx +++ b/src/view/com/util/forms/SelectableBtn.tsx @@ -1,8 +1,9 @@ -import React from 'react' -import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native' -import {Text} from '../text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' + +import {Text} from '../text/Text' interface SelectableBtnProps { testID?: string diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx index c98e846cd3..e40218b803 100644 --- a/src/view/com/util/forms/ToggleButton.tsx +++ b/src/view/com/util/forms/ToggleButton.tsx @@ -1,11 +1,12 @@ -import React from 'react' -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' -import {Text} from '../text/Text' -import {Button, ButtonType} from './Button' -import {useTheme} from 'lib/ThemeContext' import {choose} from 'lib/functions' import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' import {TypographyVariant} from 'lib/ThemeContext' +import React from 'react' +import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' + +import {Text} from '../text/Text' +import {Button, ButtonType} from './Button' export function ToggleButton({ testID, diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 61cb6f69f3..2b52b103d0 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -1,11 +1,11 @@ -import React from 'react' -import {StyleProp, StyleSheet, Pressable, View, ViewStyle} from 'react-native' -import {Image} from 'expo-image' -import {clamp} from 'lib/numbers' -import {Dimensions} from 'lib/media/types' -import * as imageSizes from 'lib/media/image-sizes' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' +import * as imageSizes from 'lib/media/image-sizes' +import {Dimensions} from 'lib/media/types' +import {clamp} from 'lib/numbers' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' const MIN_ASPECT_RATIO = 0.33 // 1/3 const MAX_ASPECT_RATIO = 10 // 10/1 diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index 7de3b093ae..b5bc394989 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -1,10 +1,10 @@ import {AppBskyEmbedImages} from '@atproto/api' -import React, {ComponentProps, FC} from 'react' -import {StyleSheet, Text, Pressable, View} from 'react-native' -import {Image} from 'expo-image' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {Image} from 'expo-image' import {isWeb} from 'platform/detection' +import React, {ComponentProps, FC} from 'react' +import {Pressable, StyleSheet, Text, View} from 'react-native' type EventFunction = (index: number) => void diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx index e779fa3787..fbdcfebbf9 100644 --- a/src/view/com/util/images/Image.tsx +++ b/src/view/com/util/images/Image.tsx @@ -1,5 +1,5 @@ -import React from 'react' import {Image, ImageProps, ImageSource} from 'expo-image' +import React from 'react' interface HighPriorityImageProps extends ImageProps { source: ImageSource diff --git a/src/view/com/util/images/Image.web.tsx b/src/view/com/util/images/Image.web.tsx index ecd9d730ab..eeaf16b9a6 100644 --- a/src/view/com/util/images/Image.web.tsx +++ b/src/view/com/util/images/Image.web.tsx @@ -1,8 +1,8 @@ import { Image, - NativeSyntheticEvent, ImageLoadEventData, ImageSourcePropType, + NativeSyntheticEvent, } from 'react-native' export default Image export const HighPriorityImage = Image diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx index e37f8af1b7..a93fa195ca 100644 --- a/src/view/com/util/images/ImageHorzList.tsx +++ b/src/view/com/util/images/ImageHorzList.tsx @@ -1,7 +1,7 @@ +import {AppBskyEmbedImages} from '@atproto/api' +import {Image} from 'expo-image' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {Image} from 'expo-image' -import {AppBskyEmbedImages} from '@atproto/api' interface Props { images: AppBskyEmbedImages.ViewImage[] diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index ba6c04f505..fe2a409b20 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -1,8 +1,9 @@ +import {AppBskyEmbedImages} from '@atproto/api' +import {isWeb} from 'platform/detection' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {AppBskyEmbedImages} from '@atproto/api' + import {GalleryItem} from './Gallery' -import {isWeb} from 'platform/detection' interface ImageLayoutGridProps { images: AppBskyEmbedImages.ViewImage[] diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx index 9424a7154b..1032c1f14e 100644 --- a/src/view/com/util/layouts/LoggedOutLayout.tsx +++ b/src/view/com/util/layouts/LoggedOutLayout.tsx @@ -1,9 +1,10 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {Text} from '../text/Text' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Text} from '../text/Text' export const LoggedOutLayout = ({ leadin, diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx index 49ad9fcdb3..3033d7f42e 100644 --- a/src/view/com/util/layouts/TitleColumnLayout.tsx +++ b/src/view/com/util/layouts/TitleColumnLayout.tsx @@ -1,7 +1,7 @@ +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' interface Props { testID?: string diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx index 5746aa660d..de649e55c3 100644 --- a/src/view/com/util/layouts/withBreakpoints.tsx +++ b/src/view/com/util/layouts/withBreakpoints.tsx @@ -1,6 +1,6 @@ -import React from 'react' -import {isNative} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {isNative} from 'platform/detection' +import React from 'react' export const withBreakpoints =

( Mobile: React.ComponentType

, diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index f02e4a2bd7..4cc30432dc 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -1,13 +1,13 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import Animated from 'react-native-reanimated' -import {useMediaQuery} from 'react-responsive' +import {HITSLOP_20} from 'lib/constants' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {colors} from 'lib/styles' -import {HITSLOP_20} from 'lib/constants' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import Animated from 'react-native-reanimated' +import {useMediaQuery} from 'react-responsive' const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) import {isWeb} from 'platform/detection' diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx index cd25452904..8d4978d229 100644 --- a/src/view/com/util/moderation/ContentHider.tsx +++ b/src/view/com/util/moderation/ContentHider.tsx @@ -1,15 +1,17 @@ -import React from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' import {ModerationUI, PostModeration} from '@atproto/api' -import {Text} from '../text/Text' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' import {ShieldExclamation} from 'lib/icons' import {describeModerationCause} from 'lib/moderation' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {useModalControls} from '#/state/modals' import {isPostMediaBlurred} from 'lib/moderation' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + +import {useModalControls} from '#/state/modals' + +import {Text} from '../text/Text' export function ContentHider({ testID, diff --git a/src/view/com/util/moderation/LabelInfo.tsx b/src/view/com/util/moderation/LabelInfo.tsx index 970338752c..55f8b2dabf 100644 --- a/src/view/com/util/moderation/LabelInfo.tsx +++ b/src/view/com/util/moderation/LabelInfo.tsx @@ -1,12 +1,14 @@ -import React from 'react' -import {Pressable, StyleProp, View, ViewStyle} from 'react-native' import {ComAtprotoLabelDefs} from '@atproto/api' -import {Text} from '../text/Text' -import {usePalette} from 'lib/hooks/usePalette' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import {Pressable, StyleProp, View, ViewStyle} from 'react-native' + import {useModalControls} from '#/state/modals' +import {Text} from '../text/Text' + export function LabelInfo({ details, labels, diff --git a/src/view/com/util/moderation/PostAlerts.tsx b/src/view/com/util/moderation/PostAlerts.tsx index bc5bf9b325..135a99486a 100644 --- a/src/view/com/util/moderation/PostAlerts.tsx +++ b/src/view/com/util/moderation/PostAlerts.tsx @@ -1,14 +1,16 @@ -import React from 'react' -import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' import {ModerationUI} from '@atproto/api' -import {Text} from '../text/Text' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {ShieldExclamation} from 'lib/icons' import {describeModerationCause} from 'lib/moderation' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' + import {useModalControls} from '#/state/modals' +import {Text} from '../text/Text' + export function PostAlerts({ moderation, style, diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx index ede62e988c..02d309a855 100644 --- a/src/view/com/util/moderation/PostHider.tsx +++ b/src/view/com/util/moderation/PostHider.tsx @@ -1,16 +1,18 @@ -import React, {ComponentProps} from 'react' -import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native' import {ModerationUI} from '@atproto/api' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' +import {ShieldExclamation} from 'lib/icons' +import {describeModerationCause} from 'lib/moderation' +import {addStyle} from 'lib/styles' +import React, {ComponentProps} from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + +import {useModalControls} from '#/state/modals' + import {Link} from '../Link' import {Text} from '../text/Text' -import {addStyle} from 'lib/styles' -import {describeModerationCause} from 'lib/moderation' -import {ShieldExclamation} from 'lib/icons' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' -import {useModalControls} from '#/state/modals' interface Props extends ComponentProps { iconSize: number diff --git a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx index 0f07b679ba..0d4660ebbc 100644 --- a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx +++ b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx @@ -1,18 +1,20 @@ -import React from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {ProfileModeration} from '@atproto/api' -import {Text} from '../text/Text' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' import {ShieldExclamation} from 'lib/icons' import { describeModerationCause, getProfileModerationCauses, } from 'lib/moderation' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' + import {useModalControls} from '#/state/modals' +import {Text} from '../text/Text' + export function ProfileHeaderAlerts({ moderation, style, diff --git a/src/view/com/util/moderation/ScreenHider.tsx b/src/view/com/util/moderation/ScreenHider.tsx index 86f0cbf7bf..52e5e37a0f 100644 --- a/src/view/com/util/moderation/ScreenHider.tsx +++ b/src/view/com/util/moderation/ScreenHider.tsx @@ -1,27 +1,29 @@ -import React from 'react' -import { - TouchableWithoutFeedback, - StyleProp, - StyleSheet, - View, - ViewStyle, -} from 'react-native' +import {ModerationUI} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import {ModerationUI} from '@atproto/api' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' -import {Text} from '../text/Text' -import {Button} from '../forms/Button' import {describeModerationCause} from 'lib/moderation' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' +import {NavigationProp} from 'lib/routes/types' +import React from 'react' +import { + StyleProp, + StyleSheet, + TouchableWithoutFeedback, + View, + ViewStyle, +} from 'react-native' + import {s} from '#/lib/styles' +import {useModalControls} from '#/state/modals' + +import {Button} from '../forms/Button' +import {Text} from '../text/Text' import {CenteredView} from '../Views' export function ScreenHider({ diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index 1e26eeccee..d1340f6d2d 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -1,3 +1,20 @@ +import { + AppBskyFeedDefs, + AppBskyFeedPost, + AtUri, + RichText as RichTextAPI, +} from '@atproto/api' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {HITSLOP_10, HITSLOP_20} from 'lib/constants' +import {Haptics} from 'lib/haptics' +import {CommentBottomArrow, HeartIcon, HeartIconSolid} from 'lib/icons' +import {makeProfileLink} from 'lib/routes/links' +import {shareUrl} from 'lib/sharing' +import {pluralize} from 'lib/strings/helpers' +import {toShareUrl} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' import React, {memo, useCallback} from 'react' import { StyleProp, @@ -6,35 +23,20 @@ import { View, ViewStyle, } from 'react-native' -import { - AppBskyFeedDefs, - AppBskyFeedPost, - AtUri, - RichText as RichTextAPI, -} from '@atproto/api' -import {Text} from '../text/Text' -import {PostDropdownBtn} from '../forms/PostDropdownBtn' -import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' -import {s} from 'lib/styles' -import {pluralize} from 'lib/strings/helpers' -import {useTheme} from 'lib/ThemeContext' -import {RepostButton} from './RepostButton' -import {Haptics} from 'lib/haptics' -import {HITSLOP_10, HITSLOP_20} from 'lib/constants' + +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' +import {Shadow} from '#/state/cache/types' import {useModalControls} from '#/state/modals' import { usePostLikeMutationQueue, usePostRepostMutationQueue, } from '#/state/queries/post' -import {useComposerControls} from '#/state/shell/composer' -import {Shadow} from '#/state/cache/types' import {useRequireAuth} from '#/state/session' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' -import {toShareUrl} from 'lib/strings/url-helpers' -import {shareUrl} from 'lib/sharing' -import {makeProfileLink} from 'lib/routes/links' +import {useComposerControls} from '#/state/shell/composer' + +import {PostDropdownBtn} from '../forms/PostDropdownBtn' +import {Text} from '../text/Text' +import {RepostButton} from './RepostButton' let PostCtrls = ({ big, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index cc3db50c8b..b0cf6a7b1a 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -1,15 +1,17 @@ -import React, {memo, useCallback} from 'react' -import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native' -import {RepostIcon} from 'lib/icons' -import {s, colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {Text} from '../text/Text' -import {pluralize} from 'lib/strings/helpers' -import {HITSLOP_10, HITSLOP_20} from 'lib/constants' -import {useModalControls} from '#/state/modals' -import {useRequireAuth} from '#/state/session' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {HITSLOP_10, HITSLOP_20} from 'lib/constants' +import {RepostIcon} from 'lib/icons' +import {pluralize} from 'lib/strings/helpers' +import {colors, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import React, {memo, useCallback} from 'react' +import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native' + +import {useModalControls} from '#/state/modals' +import {useRequireAuth} from '#/state/session' + +import {Text} from '../text/Text' interface Props { isReposted: boolean diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index bbe5869feb..391eeaf1fc 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -1,20 +1,21 @@ -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle, Pressable} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {RepostIcon} from 'lib/icons' import {colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {Text} from '../text/Text' +import React from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import { - NativeDropdown, - DropdownItem as NativeDropdownItem, -} from '../forms/NativeDropdown' -import {EventStopper} from '../EventStopper' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' import {useRequireAuth} from '#/state/session' import {useSession} from '#/state/session' +import {EventStopper} from '../EventStopper' +import { + DropdownItem as NativeDropdownItem, + NativeDropdown, +} from '../forms/NativeDropdown' +import {Text} from '../text/Text' + interface Props { isReposted: boolean repostCount?: number diff --git a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx index f06c8b794d..135f9b211a 100644 --- a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx @@ -1,6 +1,10 @@ +import {AppBskyEmbedExternal} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Image, ImageLoadEventData} from 'expo-image' import {EmbedPlayerParams, getGifDims} from 'lib/strings/embed-player' import React from 'react' -import {Image, ImageLoadEventData} from 'expo-image' import { ActivityIndicator, GestureResponderEvent, @@ -9,13 +13,10 @@ import { StyleSheet, View, } from 'react-native' -import {isIOS, isNative, isWeb} from '#/platform/detection' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useExternalEmbedsPrefs} from 'state/preferences' import {useModalControls} from 'state/modals' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {AppBskyEmbedExternal} from '@atproto/api' +import {useExternalEmbedsPrefs} from 'state/preferences' + +import {isIOS, isNative, isWeb} from '#/platform/detection' export function ExternalGifEmbed({ link, diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index aaa98a41f6..a29901baef 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -1,15 +1,16 @@ -import React from 'react' +import {AppBskyEmbedExternal} from '@atproto/api' import {Image} from 'expo-image' -import {Text} from '../text/Text' -import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {AppBskyEmbedExternal} from '@atproto/api' -import {toNiceDomain} from 'lib/strings/url-helpers' import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player' -import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed' -import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed' +import {toNiceDomain} from 'lib/strings/url-helpers' +import React from 'react' +import {StyleSheet, View} from 'react-native' import {useExternalEmbedsPrefs} from 'state/preferences' +import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed' +import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed' + +import {Text} from '../text/Text' export const ExternalLinkEmbed = ({ link, diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx index cf2db5b333..1b9d408445 100644 --- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx @@ -1,3 +1,12 @@ +import {AppBskyEmbedExternal} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {Image} from 'expo-image' +import {NavigationProp} from 'lib/routes/types' +import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player' +import {isNative} from 'platform/detection' import React from 'react' import { ActivityIndicator, @@ -13,20 +22,12 @@ import Animated, { useAnimatedRef, useFrameCallback, } from 'react-native-reanimated' -import {Image} from 'expo-image' -import {WebView} from 'react-native-webview' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {AppBskyEmbedExternal} from '@atproto/api' -import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player' -import {EventStopper} from '../EventStopper' -import {isNative} from 'platform/detection' -import {NavigationProp} from 'lib/routes/types' -import {useExternalEmbedsPrefs} from 'state/preferences' +import {WebView} from 'react-native-webview' import {useModalControls} from 'state/modals' +import {useExternalEmbedsPrefs} from 'state/preferences' + +import {EventStopper} from '../EventStopper' interface ShouldStartLoadRequest { url: string diff --git a/src/view/com/util/post-embeds/ListEmbed.tsx b/src/view/com/util/post-embeds/ListEmbed.tsx index fc5ad270fc..ad766d900f 100644 --- a/src/view/com/util/post-embeds/ListEmbed.tsx +++ b/src/view/com/util/post-embeds/ListEmbed.tsx @@ -1,9 +1,9 @@ +import {AppBskyGraphDefs} from '@atproto/api' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' import {ListCard} from 'view/com/lists/ListCard' -import {AppBskyGraphDefs} from '@atproto/api' -import {s} from 'lib/styles' export function ListEmbed({ item, diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index 35b0912698..b3b24192b7 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -1,27 +1,29 @@ -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { - AppBskyEmbedRecord, - AppBskyFeedPost, - AppBskyEmbedImages, - AppBskyEmbedRecordWithMedia, - ModerationUI, AppBskyEmbedExternal, + AppBskyEmbedImages, + AppBskyEmbedRecord, + AppBskyEmbedRecordWithMedia, + AppBskyFeedPost, + ModerationUI, RichText as RichTextAPI, } from '@atproto/api' import {AtUri} from '@atproto/api' -import {PostMeta} from '../PostMeta' -import {Link} from '../Link' -import {Text} from '../text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {ComposerOptsQuote} from 'state/shell/composer' -import {PostEmbeds} from '.' -import {PostAlerts} from '../moderation/PostAlerts' -import {makeProfileLink} from 'lib/routes/links' -import {InfoCircleIcon} from 'lib/icons' import {Trans} from '@lingui/macro' -import {RichText} from '#/components/RichText' +import {usePalette} from 'lib/hooks/usePalette' +import {InfoCircleIcon} from 'lib/icons' +import {makeProfileLink} from 'lib/routes/links' +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {ComposerOptsQuote} from 'state/shell/composer' + import {atoms as a} from '#/alf' +import {RichText} from '#/components/RichText' + +import {Link} from '../Link' +import {PostAlerts} from '../moderation/PostAlerts' +import {PostMeta} from '../PostMeta' +import {Text} from '../text/Text' +import {PostEmbeds} from '.' export function MaybeQuoteEmbed({ embed, diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 7e235babb6..c2fabd2a03 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -1,16 +1,6 @@ -import React, {useCallback} from 'react' import { - StyleSheet, - StyleProp, - View, - ViewStyle, - Text, - InteractionManager, -} from 'react-native' -import {Image} from 'expo-image' -import { - AppBskyEmbedImages, AppBskyEmbedExternal, + AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, @@ -18,19 +8,31 @@ import { ModerationUI, PostModeration, } from '@atproto/api' -import {Link} from '../Link' -import {ImageLayoutGrid} from '../images/ImageLayoutGrid' -import {useLightboxControls, ImagesLightbox} from '#/state/lightbox' +import {Image} from 'expo-image' import {usePalette} from 'lib/hooks/usePalette' -import {ExternalLinkEmbed} from './ExternalLinkEmbed' -import {MaybeQuoteEmbed} from './QuoteEmbed' -import {AutoSizedImage} from '../images/AutoSizedImage' -import {ListEmbed} from './ListEmbed' import {isCauseALabelOnUri, isQuoteBlurred} from 'lib/moderation' +import React, {useCallback} from 'react' +import { + InteractionManager, + StyleProp, + StyleSheet, + Text, + View, + ViewStyle, +} from 'react-native' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' -import {ContentHider} from '../moderation/ContentHider' -import {isNative} from '#/platform/detection' + import {shareUrl} from '#/lib/sharing' +import {isNative} from '#/platform/detection' +import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' + +import {AutoSizedImage} from '../images/AutoSizedImage' +import {ImageLayoutGrid} from '../images/ImageLayoutGrid' +import {Link} from '../Link' +import {ContentHider} from '../moderation/ContentHider' +import {ExternalLinkEmbed} from './ExternalLinkEmbed' +import {ListEmbed} from './ListEmbed' +import {MaybeQuoteEmbed} from './QuoteEmbed' type Embed = | AppBskyEmbedRecord.View diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index f4ade30e55..5756db3245 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -1,16 +1,18 @@ -import React from 'react' -import {TextStyle, StyleProp} from 'react-native' -import {RichText as RichTextObj, AppBskyRichtextFacet} from '@atproto/api' -import {TextLink} from '../Link' -import {Text} from './Text' -import {lh} from 'lib/styles' -import {toShortUrl} from 'lib/strings/url-helpers' -import {useTheme, TypographyVariant} from 'lib/ThemeContext' +import {AppBskyRichtextFacet, RichText as RichTextObj} from '@atproto/api' import {usePalette} from 'lib/hooks/usePalette' import {makeTagLink} from 'lib/routes/links' +import {toShortUrl} from 'lib/strings/url-helpers' +import {lh} from 'lib/styles' +import {TypographyVariant, useTheme} from 'lib/ThemeContext' +import React from 'react' +import {StyleProp, TextStyle} from 'react-native' + import {TagMenu, useTagMenuControl} from '#/components/TagMenu' import {isNative} from '#/platform/detection' +import {TextLink} from '../Link' +import {Text} from './Text' + const WORD_WRAP = {wordWrap: 1} /** diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index ccb51bfca6..0dfa667fbc 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -1,8 +1,8 @@ +import {lh, s} from 'lib/styles' +import {TypographyVariant, useTheme} from 'lib/ThemeContext' +import {isIOS} from 'platform/detection' import React from 'react' import {Text as RNText, TextProps} from 'react-native' -import {s, lh} from 'lib/styles' -import {useTheme, TypographyVariant} from 'lib/ThemeContext' -import {isIOS} from 'platform/detection' import {UITextView} from 'react-native-ui-text-view' export type CustomTextProps = TextProps & { diff --git a/src/view/com/util/text/ThemedText.tsx b/src/view/com/util/text/ThemedText.tsx index 2844d273c2..27268472bf 100644 --- a/src/view/com/util/text/ThemedText.tsx +++ b/src/view/com/util/text/ThemedText.tsx @@ -1,7 +1,8 @@ -import React from 'react' -import {CustomTextProps, Text} from './Text' import {usePalette} from 'lib/hooks/usePalette' import {addStyle} from 'lib/styles' +import React from 'react' + +import {CustomTextProps, Text} from './Text' export type ThemedTextProps = CustomTextProps & { fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light' diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index 9212381a9e..d6d4c83215 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -1,12 +1,12 @@ import React from 'react' import {StyleSheet, TextProps} from 'react-native' import Svg, { - Path, Defs, LinearGradient, + Path, + PathProps, Stop, SvgProps, - PathProps, } from 'react-native-svg' import {colors} from '#/lib/styles' diff --git a/src/view/icons/Logotype.tsx b/src/view/icons/Logotype.tsx index 080c402fb3..d6c35f6d9e 100644 --- a/src/view/icons/Logotype.tsx +++ b/src/view/icons/Logotype.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Svg, {Path, SvgProps, PathProps} from 'react-native-svg' +import Svg, {Path, PathProps, SvgProps} from 'react-native-svg' import {usePalette} from '#/lib/hooks/usePalette' diff --git a/src/view/icons/index.tsx b/src/view/icons/index.tsx index ede1e63355..570d1b53bc 100644 --- a/src/view/icons/index.tsx +++ b/src/view/icons/index.tsx @@ -1,63 +1,71 @@ import {library} from '@fortawesome/fontawesome-svg-core' - import {faAddressCard} from '@fortawesome/free-regular-svg-icons' +import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' +import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' +import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' +import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle' +import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck' +import {faCirclePlay} from '@fortawesome/free-regular-svg-icons/faCirclePlay' +import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser' +import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' +import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' +import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' +import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' +import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash' +import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile' +import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk' +import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' +import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' +import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage' +import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' +import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' +import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare' +import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' +import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' +import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' +import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' +import {faFlask} from '@fortawesome/free-solid-svg-icons' import {faAngleDown} from '@fortawesome/free-solid-svg-icons/faAngleDown' import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft' import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight' import {faAngleUp} from '@fortawesome/free-solid-svg-icons/faAngleUp' +import {faArrowDown} from '@fortawesome/free-solid-svg-icons/faArrowDown' import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft' import {faArrowRight} from '@fortawesome/free-solid-svg-icons/faArrowRight' -import {faArrowUp} from '@fortawesome/free-solid-svg-icons/faArrowUp' -import {faArrowDown} from '@fortawesome/free-solid-svg-icons/faArrowDown' import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowRightFromBracket' +import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft' +import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate' +import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp' +import {faArrowUp} from '@fortawesome/free-solid-svg-icons/faArrowUp' import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket' import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare' -import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft' -import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp' -import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate' import {faAt} from '@fortawesome/free-solid-svg-icons/faAt' -import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' import {faBan} from '@fortawesome/free-solid-svg-icons/faBan' +import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' import {faBell} from '@fortawesome/free-solid-svg-icons/faBell' -import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' import {faBookmark} from '@fortawesome/free-solid-svg-icons/faBookmark' -import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' -import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' import {faCamera} from '@fortawesome/free-solid-svg-icons/faCamera' import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck' +import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown' import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight' -import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle' -import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck' import {faCircleCheck} from '@fortawesome/free-solid-svg-icons/faCircleCheck' import {faCircleDot} from '@fortawesome/free-solid-svg-icons/faCircleDot' import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons/faCircleExclamation' -import {faCirclePlay} from '@fortawesome/free-regular-svg-icons/faCirclePlay' -import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser' import {faClone} from '@fortawesome/free-solid-svg-icons/faClone' -import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' -import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' import {faCommentSlash} from '@fortawesome/free-solid-svg-icons/faCommentSlash' -import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' -import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' import {faDownload} from '@fortawesome/free-solid-svg-icons/faDownload' import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope' import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation' import {faEye} from '@fortawesome/free-solid-svg-icons/faEye' -import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash' -import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile' +import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' import {faFire} from '@fortawesome/free-solid-svg-icons/faFire' -import {faFlask} from '@fortawesome/free-solid-svg-icons' -import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk' import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe' import {faHand} from '@fortawesome/free-solid-svg-icons/faHand' -import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' import {faHashtag} from '@fortawesome/free-solid-svg-icons/faHashtag' -import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' -import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage' import {faImage} from '@fortawesome/free-solid-svg-icons/faImage' import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo' import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage' @@ -66,10 +74,8 @@ import {faList} from '@fortawesome/free-solid-svg-icons/faList' import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl' import {faLock} from '@fortawesome/free-solid-svg-icons/faLock' import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass' -import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky' import {faPause} from '@fortawesome/free-solid-svg-icons/faPause' -import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' import {faPen} from '@fortawesome/free-solid-svg-icons/faPen' import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib' import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare' @@ -87,23 +93,16 @@ import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSq import {faShield} from '@fortawesome/free-solid-svg-icons/faShield' import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal' import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders' -import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare' -import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' -import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack' import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket' -import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' -import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' -import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers' import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck' -import {faUserSlash} from '@fortawesome/free-solid-svg-icons/faUserSlash' import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus' -import {faUserXmark} from '@fortawesome/free-solid-svg-icons/faUserXmark' +import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers' +import {faUserSlash} from '@fortawesome/free-solid-svg-icons/faUserSlash' import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash' +import {faUserXmark} from '@fortawesome/free-solid-svg-icons/faUserXmark' import {faX} from '@fortawesome/free-solid-svg-icons/faX' import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark' -import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown' -import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' library.add( faAddressCard, diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index dc439c3679..b28b992bb0 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -1,3 +1,12 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -5,30 +14,23 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ScrollView} from 'react-native-gesture-handler' -import {Text} from '../com/util/text/Text' -import {Button} from '../com/util/forms/Button' -import * as Toast from '../com/util/Toast' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {CommonNavigatorParams} from 'lib/routes/types' -import {useAnalytics} from 'lib/analytics/analytics' -import {useFocusEffect} from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSetMinimalShellMode} from '#/state/shell' + +import {cleanError} from '#/lib/strings/errors' import {useModalControls} from '#/state/modals' import {useLanguagePrefs} from '#/state/preferences' import { - useAppPasswordsQuery, useAppPasswordDeleteMutation, + useAppPasswordsQuery, } from '#/state/queries/app-passwords' +import {useSetMinimalShellMode} from '#/state/shell' + import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {cleanError} from '#/lib/strings/errors' +import {Button} from '../com/util/forms/Button' +import {Text} from '../com/util/text/Text' +import * as Toast from '../com/util/Toast' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export function AppPasswords({}: Props) { diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx index f6c29a3b8d..e995b8795f 100644 --- a/src/view/screens/CommunityGuidelines.tsx +++ b/src/view/screens/CommunityGuidelines.tsx @@ -1,16 +1,18 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from 'view/com/util/text/Text' import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx index 522a9e4dba..0288eaa4ea 100644 --- a/src/view/screens/CopyrightPolicy.tsx +++ b/src/view/screens/CopyrightPolicy.tsx @@ -1,16 +1,18 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from 'view/com/util/text/Text' import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const CopyrightPolicyScreen = (_props: Props) => { diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index f26b1505a8..226e7a9f09 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -1,23 +1,24 @@ -import React from 'react' -import {ScrollView, View} from 'react-native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import * as Toast from 'view/com/util/Toast' -import {Text} from '../com/util/text/Text' -import {ViewSelector} from '../com/util/ViewSelector' -import {EmptyState} from '../com/util/EmptyState' -import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' -import {Button, ButtonType} from '../com/util/forms/Button' -import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton' -import {ToggleButton} from '../com/util/forms/ToggleButton' -import {RadioGroup} from '../com/util/forms/RadioGroup' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {ErrorMessage} from '../com/util/error/ErrorMessage' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' +import {PaletteColorName, ThemeProvider} from 'lib/ThemeContext' +import React from 'react' +import {ScrollView, View} from 'react-native' +import * as Toast from 'view/com/util/Toast' + +import {EmptyState} from '../com/util/EmptyState' +import {ErrorMessage} from '../com/util/error/ErrorMessage' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {Button, ButtonType} from '../com/util/forms/Button' +import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton' +import {RadioGroup} from '../com/util/forms/RadioGroup' +import {ToggleButton} from '../com/util/forms/ToggleButton' +import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' +import {ViewSelector} from '../com/util/ViewSelector' const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs'] diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 2e3bf08db5..05377b8fb9 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -1,52 +1,53 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {HITSLOP_10} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons' +import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {cleanError} from 'lib/strings/errors' +import {s} from 'lib/styles' +import debounce from 'lodash.debounce' import React from 'react' import { ActivityIndicator, - StyleSheet, - View, type FlatList, Pressable, + StyleSheet, + View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {FAB} from 'view/com/util/fab/FAB' -import {Link} from 'view/com/util/Link' -import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ComposeIcon2, CogIcon, MagnifyingGlassIcon2} from 'lib/icons' -import {s} from 'lib/styles' -import {atoms as a, useTheme} from '#/alf' -import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput' -import {UserAvatar} from 'view/com/util/UserAvatar' -import { - LoadingPlaceholder, - FeedFeedLoadingPlaceholder, -} from 'view/com/util/LoadingPlaceholder' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import debounce from 'lodash.debounce' -import {Text} from 'view/com/util/text/Text' -import {List} from 'view/com/util/List' -import {useFocusEffect} from '@react-navigation/native' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSetMinimalShellMode} from '#/state/shell' -import {usePreferencesQuery} from '#/state/queries/preferences' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {FAB} from 'view/com/util/fab/FAB' +import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput' +import {Link} from 'view/com/util/Link' +import {List} from 'view/com/util/List' import { + FeedFeedLoadingPlaceholder, + LoadingPlaceholder, +} from 'view/com/util/LoadingPlaceholder' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {ViewHeader} from 'view/com/util/ViewHeader' + +import {atoms as a, useTheme} from '#/alf' +import {IconCircle} from '#/components/IconCircle' +import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' +import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import {isNative, isWeb} from '#/platform/detection' +import { + getAvatarTypeFromUri, useFeedSourceInfoQuery, useGetPopularFeedsQuery, useSearchPopularFeedsMutation, - getAvatarTypeFromUri, } from '#/state/queries/feed' -import {cleanError} from 'lib/strings/errors' -import {useComposerControls} from '#/state/shell/composer' +import {usePreferencesQuery} from '#/state/queries/preferences' import {useSession} from '#/state/session' -import {isNative, isWeb} from '#/platform/detection' -import {HITSLOP_10} from 'lib/constants' -import {IconCircle} from '#/components/IconCircle' -import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' -import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' +import {useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' type Props = NativeStackScreenProps diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index 99ac8c44af..ad48d0aa1b 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,23 +1,25 @@ -import React from 'react' -import {View, ActivityIndicator, StyleSheet} from 'react-native' import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types' -import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' +import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import React from 'react' +import {ActivityIndicator, StyleSheet, View} from 'react-native' +import {FeedPage} from 'view/com/feeds/FeedPage' +import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' +import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed' -import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' -import {HomeHeader} from '../com/home/HomeHeader' -import {Pager, RenderTabBarFnProps, PagerRef} from 'view/com/pager/Pager' -import {FeedPage} from 'view/com/feeds/FeedPage' -import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA' -import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {usePinnedFeedsInfos, FeedSourceInfo} from '#/state/queries/feed' -import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' -import {emitSoftReset} from '#/state/events' -import {useSession} from '#/state/session' -import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' + import {useSetTitle} from '#/lib/hooks/useSetTitle' +import {emitSoftReset} from '#/state/events' +import {FeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed' +import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' +import {useSession} from '#/state/session' +import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' +import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' + +import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA' +import {HomeHeader} from '../com/home/HomeHeader' type Props = NativeStackScreenProps export function HomeScreen(props: Props) { diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 819840a461..02251102aa 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -1,27 +1,29 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {Text} from '../com/util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {Button} from 'view/com/util/forms/Button' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {useAnalytics} from 'lib/analytics/analytics' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' +import React from 'react' +import {StyleSheet, View} from 'react-native' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' -import {useSetMinimalShellMode} from '#/state/shell' +import {Button} from 'view/com/util/forms/Button' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {CenteredView} from 'view/com/util/Views' + +import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {useModalControls} from '#/state/modals' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useSetMinimalShellMode} from '#/state/shell' + +import {Text} from '../com/util/text/Text' type Props = NativeStackScreenProps diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index bdd5dd9b78..d57e6a7145 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -1,20 +1,21 @@ -import React from 'react' -import {View} from 'react-native' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AtUri} from '@atproto/api' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {MyLists} from '#/view/com/lists/MyLists' -import {Text} from 'view/com/util/text/Text' -import {Button} from 'view/com/util/forms/Button' -import {NavigationProp} from 'lib/routes/types' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans} from '@lingui/macro' +import {useFocusEffect, useNavigation} from '@react-navigation/native' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' +import React from 'react' +import {View} from 'react-native' +import {Button} from 'view/com/util/forms/Button' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {Text} from 'view/com/util/text/Text' + import {useModalControls} from '#/state/modals' -import {Trans} from '@lingui/macro' +import {useSetMinimalShellMode} from '#/state/shell' +import {MyLists} from '#/view/com/lists/MyLists' type Props = NativeStackScreenProps export function ListsScreen({}: Props) { diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index e727a1fb81..eabf66bf09 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -1,19 +1,21 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {ago} from 'lib/strings/time' +import {s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ScrollView} from '../com/util/Views' -import {s} from 'lib/styles' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' + import {getEntries} from '#/logger/logDump' -import {ago} from 'lib/strings/time' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' import {useSetMinimalShellMode} from '#/state/shell' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from '../com/util/Views' + export function LogScreen({}: NativeStackScreenProps< CommonNavigatorParams, 'Log' diff --git a/src/view/screens/Moderation.tsx b/src/view/screens/Moderation.tsx index 928766c304..5b06ab845f 100644 --- a/src/view/screens/Moderation.tsx +++ b/src/view/screens/Moderation.tsx @@ -1,3 +1,16 @@ +import {ComAtprotoLabelDefs} from '@atproto/api' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -5,33 +18,22 @@ import { TouchableOpacity, View, } from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {ComAtprotoLabelDefs} from '@atproto/api' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {s} from 'lib/styles' -import {CenteredView} from '../com/util/Views' -import {ViewHeader} from '../com/util/ViewHeader' -import {Link, TextLink} from '../com/util/Link' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useSetMinimalShellMode} from '#/state/shell' + +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' import {useModalControls} from '#/state/modals' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {ToggleButton} from '../com/util/forms/ToggleButton' -import {useSession} from '#/state/session' import { useProfileQuery, useProfileUpdateMutation, } from '#/state/queries/profile' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' + +import {ToggleButton} from '../com/util/forms/ToggleButton' +import {Link, TextLink} from '../com/util/Link' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' +import {CenteredView} from '../com/util/Views' import {ScrollView} from '../com/util/Views' -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' type Props = NativeStackScreenProps export function ModerationScreen({}: Props) { diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index 09d77987f9..9c25764f8a 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -1,3 +1,12 @@ +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -6,24 +15,17 @@ import { StyleSheet, View, } from 'react-native' -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {CommonNavigatorParams} from 'lib/routes/types' -import {useAnalytics} from 'lib/analytics/analytics' -import {useFocusEffect} from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' import {ProfileCard} from 'view/com/profile/ProfileCard' -import {logger} from '#/logger' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' +import {CenteredView} from 'view/com/util/Views' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' +import {useSetMinimalShellMode} from '#/state/shell' + +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index b7d993acc7..6d9e413843 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -1,20 +1,21 @@ -import React from 'react' -import {View} from 'react-native' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AtUri} from '@atproto/api' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {MyLists} from '#/view/com/lists/MyLists' -import {Text} from 'view/com/util/text/Text' -import {Button} from 'view/com/util/forms/Button' -import {NavigationProp} from 'lib/routes/types' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans} from '@lingui/macro' +import {useFocusEffect, useNavigation} from '@react-navigation/native' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' -import {useSetMinimalShellMode} from '#/state/shell' +import React from 'react' +import {View} from 'react-native' +import {Button} from 'view/com/util/forms/Button' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {Text} from 'view/com/util/text/Text' + import {useModalControls} from '#/state/modals' -import {Trans} from '@lingui/macro' +import {useSetMinimalShellMode} from '#/state/shell' +import {MyLists} from '#/view/com/lists/MyLists' type Props = NativeStackScreenProps export function ModerationModlistsScreen({}: Props) { diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index 1aff19dd3b..635c9f468d 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -1,3 +1,12 @@ +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -6,24 +15,17 @@ import { StyleSheet, View, } from 'react-native' -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {CommonNavigatorParams} from 'lib/routes/types' -import {useAnalytics} from 'lib/analytics/analytics' -import {useFocusEffect} from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' -import {ErrorScreen} from '../com/util/error/ErrorScreen' import {ProfileCard} from 'view/com/profile/ProfileCard' -import {logger} from '#/logger' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' +import {CenteredView} from 'view/com/util/Views' + import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' +import {useSetMinimalShellMode} from '#/state/shell' + +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index dfa840abbc..d101a45b73 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -1,19 +1,21 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { - useNavigation, StackActions, useFocusEffect, + useNavigation, } from '@react-navigation/native' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from '../com/util/text/Text' -import {Button} from 'view/com/util/forms/Button' -import {NavigationProp} from 'lib/routes/types' import {usePalette} from 'lib/hooks/usePalette' +import {NavigationProp} from 'lib/routes/types' import {s} from 'lib/styles' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {Button} from 'view/com/util/forms/Button' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {Text} from '../com/util/text/Text' +import {ViewHeader} from '../com/util/ViewHeader' export const NotFoundScreen = () => { const pal = usePalette('default') diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 48c834a28f..030f73bd8a 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,38 +1,40 @@ -import React from 'react' -import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ComposeIcon2} from 'lib/icons' import { NativeStackScreenProps, NotificationsTabNavigatorParams, } from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {Feed} from '../com/notifications/Feed' +import {colors, s} from 'lib/styles' +import React from 'react' +import {View} from 'react-native' import {TextLink} from 'view/com/util/Link' import {ListMethods} from 'view/com/util/List' import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {MainScrollProvider} from '../com/util/MainScrollProvider' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s, colors} from 'lib/styles' -import {useAnalytics} from 'lib/analytics/analytics' + +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {logger} from '#/logger' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {isNative} from '#/platform/detection' +import {emitSoftReset, listenSoftReset} from '#/state/events' +import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' import { useUnreadNotifications, useUnreadNotificationsApi, } from '#/state/queries/notifications/unread' -import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' -import {listenSoftReset, emitSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {isNative} from '#/platform/detection' -import {FAB} from '../com/util/fab/FAB' -import {ComposeIcon2} from 'lib/icons' +import {useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' +import {Feed} from '../com/notifications/Feed' +import {FAB} from '../com/util/fab/FAB' +import {MainScrollProvider} from '../com/util/MainScrollProvider' +import {ViewHeader} from '../com/util/ViewHeader' + type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, 'Notifications' diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx index 604301544c..cfc1997f8d 100644 --- a/src/view/screens/PostLikedBy.tsx +++ b/src/view/screens/PostLikedBy.tsx @@ -1,13 +1,15 @@ -import React from 'react' -import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {useSetMinimalShellMode} from '#/state/shell' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import React from 'react' +import {View} from 'react-native' + +import {useSetMinimalShellMode} from '#/state/shell' + +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PostLikedByScreen = ({route}: Props) => { diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx index 07017d6920..46beb7ed9f 100644 --- a/src/view/screens/PostRepostedBy.tsx +++ b/src/view/screens/PostRepostedBy.tsx @@ -1,13 +1,15 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' + import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + +import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PostRepostedByScreen = ({route}: Props) => { diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index aa09ab9ed7..5ae68db2e7 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -1,28 +1,30 @@ +import {useFocusEffect} from '@react-navigation/native' +import {useQueryClient} from '@tanstack/react-query' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import {clamp} from 'lodash' import React from 'react' import {StyleSheet, View} from 'react-native' import Animated from 'react-native-reanimated' -import {useFocusEffect} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' -import {ComposePrompt} from 'view/com/composer/Prompt' -import {s} from 'lib/styles' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {ComposePrompt} from 'view/com/composer/Prompt' + +import {isWeb} from '#/platform/detection' import { RQKEY as POST_THREAD_RQKEY, ThreadNode, } from '#/state/queries/post-thread' -import {clamp} from 'lodash' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useSetMinimalShellMode} from '#/state/shell' import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' + +import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' import {ErrorMessage} from '../com/util/error/ErrorMessage' import {CenteredView} from '../com/util/Views' -import {useComposerControls} from '#/state/shell/composer' -import {useSession} from '#/state/session' -import {isWeb} from '#/platform/detection' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index 1e8cedf7e2..668d7a7b1d 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/src/view/screens/PreferencesExternalEmbeds.tsx @@ -1,25 +1,27 @@ +import {Trans} from '@lingui/macro' +import {useFocusEffect} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {s} from 'lib/styles' -import {Text} from '../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import { - EmbedPlayerSource, - externalEmbedLabels, -} from '#/lib/strings/embed-player' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans} from '@lingui/macro' -import {ScrollView} from '../com/util/Views' import { useExternalEmbedsPrefs, useSetExternalEmbedPref, } from 'state/preferences' import {ToggleButton} from 'view/com/util/forms/ToggleButton' + +import { + EmbedPlayerSource, + externalEmbedLabels, +} from '#/lib/strings/embed-player' +import {useSetMinimalShellMode} from '#/state/shell' + import {SimpleViewHeader} from '../com/util/SimpleViewHeader' +import {Text} from '../com/util/text/Text' +import {ScrollView} from '../com/util/Views' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index b4acbcd44c..4062bea011 100644 --- a/src/view/screens/PreferencesFollowingFeed.tsx +++ b/src/view/screens/PreferencesFollowingFeed.tsx @@ -1,24 +1,26 @@ -import React, {useState} from 'react' -import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {Slider} from '@miblanchard/react-native-slider' -import {Text} from '../com/util/text/Text' -import {s, colors} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {isWeb} from 'platform/detection' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {colors, s} from 'lib/styles' +import debounce from 'lodash.debounce' +import {isWeb} from 'platform/detection' +import React, {useState} from 'react' +import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' -import debounce from 'lodash.debounce' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import { usePreferencesQuery, useSetFeedViewPreferencesMutation, } from '#/state/queries/preferences' +import {Text} from '../com/util/text/Text' + function RepliesThresholdInput({ enabled, initialValue, diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 321c672936..3e4abb7db7 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -1,3 +1,10 @@ +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {colors, s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -6,23 +13,18 @@ import { TouchableOpacity, View, } from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from '../com/util/text/Text' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {RadioGroup} from 'view/com/util/forms/RadioGroup' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + import { usePreferencesQuery, useSetThreadViewPreferencesMutation, } from '#/state/queries/preferences' +import {Text} from '../com/util/text/Text' + type Props = NativeStackScreenProps export function PreferencesThreads({navigation}: Props) { const pal = usePalette('default') diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx index 776d83918c..ff92909c9b 100644 --- a/src/view/screens/PrivacyPolicy.tsx +++ b/src/view/screens/PrivacyPolicy.tsx @@ -1,16 +1,18 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from 'view/com/util/text/Text' import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const PrivacyPolicyScreen = (_props: Props) => { diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index b30b4491bd..f2c0af855d 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -1,6 +1,3 @@ -import React, {useMemo} from 'react' -import {StyleSheet, View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' import { AppBskyActorDefs, moderateProfile, @@ -9,45 +6,50 @@ import { } from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {CenteredView} from '../com/util/Views' -import {ListRef} from '../com/util/List' -import {ScreenHider} from 'view/com/util/moderation/ScreenHider' -import {Feed} from 'view/com/posts/Feed' -import {ProfileLists} from '../com/lists/ProfileLists' -import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens' -import {ProfileHeader, ProfileHeaderLoading} from '../com/profile/ProfileHeader' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {EmptyState} from '../com/util/EmptyState' -import {FAB} from '../com/util/fab/FAB' -import {s, colors} from 'lib/styles' +import {useFocusEffect} from '@react-navigation/native' +import {useQueryClient} from '@tanstack/react-query' import {useAnalytics} from 'lib/analytics/analytics' -import {ComposeIcon2} from 'lib/icons' +import {usePalette} from 'lib/hooks/usePalette' import {useSetTitle} from 'lib/hooks/useSetTitle' +import {ComposeIcon2} from 'lib/icons' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {combinedDisplayName} from 'lib/strings/display-names' +import {colors, s} from 'lib/styles' +import React, {useMemo} from 'react' +import {StyleSheet, View} from 'react-native' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {Feed} from 'view/com/posts/Feed' +import {ScreenHider} from 'view/com/util/moderation/ScreenHider' + +import {cleanError} from '#/lib/strings/errors' +import {isInvalidHandle} from '#/lib/strings/handles' +import {isNative} from '#/platform/detection' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {listenSoftReset} from '#/state/events' import { FeedDescriptor, resetProfilePostsQueries, } from '#/state/queries/post-feed' -import {useResolveDidQuery} from '#/state/queries/resolve-uri' -import {useProfileQuery} from '#/state/queries/profile' -import {useProfileShadow} from '#/state/cache/profile-shadow' -import {useSession, getAgent} from '#/state/session' -import {useModerationOpts} from '#/state/queries/preferences' -import {useProfileExtraInfoQuery} from '#/state/queries/profile-extra-info' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' -import {cleanError} from '#/lib/strings/errors' -import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn' -import {useQueryClient} from '@tanstack/react-query' -import {useComposerControls} from '#/state/shell/composer' -import {listenSoftReset} from '#/state/events' +import {useModerationOpts} from '#/state/queries/preferences' +import {useProfileQuery} from '#/state/queries/profile' +import {useProfileExtraInfoQuery} from '#/state/queries/profile-extra-info' +import {useResolveDidQuery} from '#/state/queries/resolve-uri' import {truncateAndInvalidate} from '#/state/queries/util' +import {getAgent, useSession} from '#/state/session' +import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' import {Text} from '#/view/com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {isNative} from '#/platform/detection' -import {isInvalidHandle} from '#/lib/strings/handles' + +import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens' +import {ProfileLists} from '../com/lists/ProfileLists' +import {ProfileHeader, ProfileHeaderLoading} from '../com/profile/ProfileHeader' +import {EmptyState} from '../com/util/EmptyState' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {FAB} from '../com/util/fab/FAB' +import {ListRef} from '../com/util/List' +import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn' +import {CenteredView} from '../com/util/Views' interface SectionRef { scrollToTop: () => void diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index b3a7328c17..87c8f82b75 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,70 +1,71 @@ -import React, {useMemo, useCallback} from 'react' -import {StyleSheet, View, Pressable} from 'react-native' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {useIsFocused, useNavigation} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {FeedDescriptor} from '#/state/queries/post-feed' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' -import {Feed} from 'view/com/posts/Feed' -import {InlineLink} from '#/components/Link' -import {ListRef} from 'view/com/util/List' -import {Button} from 'view/com/util/forms/Button' -import {Text} from 'view/com/util/text/Text' -import {RichText} from '#/components/RichText' -import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {FAB} from 'view/com/util/fab/FAB' -import {EmptyState} from 'view/com/util/EmptyState' -import {LoadingScreen} from 'view/com/util/LoadingScreen' -import * as Toast from 'view/com/util/Toast' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {shareUrl} from 'lib/sharing' -import {toShareUrl} from 'lib/strings/url-helpers' -import {Haptics} from 'lib/haptics' -import {useAnalytics} from 'lib/analytics/analytics' -import {makeCustomFeedLink} from 'lib/routes/links' -import {pluralize} from 'lib/strings/helpers' -import {CenteredView} from 'view/com/util/Views' -import {NavigationProp} from 'lib/routes/types' -import {ComposeIcon2} from 'lib/icons' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useModalControls} from '#/state/modals' -import {useFeedSourceInfoQuery, FeedSourceFeedInfo} from '#/state/queries/feed' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {useIsFocused, useNavigation} from '@react-navigation/native' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from 'lib/analytics/analytics' +import {Haptics} from 'lib/haptics' +import {usePalette} from 'lib/hooks/usePalette' +import {useSetTitle} from 'lib/hooks/useSetTitle' +import {ComposeIcon2} from 'lib/icons' +import {makeCustomFeedLink} from 'lib/routes/links' +import {CommonNavigatorParams} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' +import {shareUrl} from 'lib/sharing' +import {pluralize} from 'lib/strings/helpers' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {toShareUrl} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import React, {useCallback, useMemo} from 'react' +import {Pressable, StyleSheet, View} from 'react-native' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {Feed} from 'view/com/posts/Feed' +import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' +import {EmptyState} from 'view/com/util/EmptyState' +import {FAB} from 'view/com/util/fab/FAB' +import {Button} from 'view/com/util/forms/Button' +import {ListRef} from 'view/com/util/List' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {LoadingScreen} from 'view/com/util/LoadingScreen' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {CenteredView} from 'view/com/util/Views' + +import {atoms as a, useTheme} from '#/alf' +import {Button as NewButton, ButtonText} from '#/components/Button' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' import { - UsePreferencesQueryResponse, - usePreferencesQuery, - useSaveFeedMutation, - useRemoveFeedMutation, - usePinFeedMutation, - useUnpinFeedMutation, -} from '#/state/queries/preferences' -import {useSession} from '#/state/session' -import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' -import {useComposerControls} from '#/state/shell/composer' -import {truncateAndInvalidate} from '#/state/queries/util' + Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, + Heart2_Stroke2_Corner0_Rounded as HeartOutline, +} from '#/components/icons/Heart2' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import {InlineLink} from '#/components/Link' +import * as Menu from '#/components/Menu' +import {RichText} from '#/components/RichText' +import {HITSLOP_20} from '#/lib/constants' +import {logger} from '#/logger' import {isNative} from '#/platform/detection' import {listenSoftReset} from '#/state/events' -import {atoms as a, useTheme} from '#/alf' -import * as Menu from '#/components/Menu' -import {HITSLOP_20} from '#/lib/constants' -import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' -import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import {useModalControls} from '#/state/modals' +import {FeedSourceFeedInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' +import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' +import {FeedDescriptor} from '#/state/queries/post-feed' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import { - Heart2_Stroke2_Corner0_Rounded as HeartOutline, - Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, -} from '#/components/icons/Heart2' -import {Button as NewButton, ButtonText} from '#/components/Button' + usePinFeedMutation, + usePreferencesQuery, + UsePreferencesQueryResponse, + useRemoveFeedMutation, + useSaveFeedMutation, + useUnpinFeedMutation, +} from '#/state/queries/preferences' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {truncateAndInvalidate} from '#/state/queries/util' +import {useSession} from '#/state/session' +import {useComposerControls} from '#/state/shell/composer' const SECTION_TITLES = ['Posts'] diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index b1bcf48ba4..877378403d 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -1,13 +1,15 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' -import {makeRecordUri} from 'lib/strings/url-helpers' + import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFeedLikedByScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 2cad08cb5d..7925837967 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -1,12 +1,14 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' + import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + +import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowersScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index 80502b98bc..70fcfa9c6f 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -1,12 +1,14 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' + import {useSetMinimalShellMode} from '#/state/shell' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' + +import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const ProfileFollowsScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 9e98757efa..08644dccce 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -1,66 +1,67 @@ -import React, {useCallback, useMemo} from 'react' -import {Pressable, StyleSheet, View} from 'react-native' -import {useFocusEffect, useIsFocused} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {useNavigation} from '@react-navigation/native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AppBskyGraphDefs, AtUri, RichText as RichTextAPI} from '@atproto/api' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect, useIsFocused} from '@react-navigation/native' +import {useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' -import {Feed} from 'view/com/posts/Feed' -import {Text} from 'view/com/util/text/Text' -import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown' -import {CenteredView} from 'view/com/util/Views' -import {EmptyState} from 'view/com/util/EmptyState' -import {LoadingScreen} from 'view/com/util/LoadingScreen' -import {RichText} from '#/components/RichText' -import {Button} from 'view/com/util/forms/Button' -import {TextLink} from 'view/com/util/Link' -import {ListRef} from 'view/com/util/List' -import * as Toast from 'view/com/util/Toast' -import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {FAB} from 'view/com/util/fab/FAB' import {Haptics} from 'lib/haptics' -import {FeedDescriptor} from '#/state/queries/post-feed' import {usePalette} from 'lib/hooks/usePalette' import {useSetTitle} from 'lib/hooks/useSetTitle' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {NavigationProp} from 'lib/routes/types' -import {toShareUrl} from 'lib/strings/url-helpers' -import {shareUrl} from 'lib/sharing' -import {s} from 'lib/styles' -import {sanitizeHandle} from 'lib/strings/handles' -import {makeProfileLink, makeListLink} from 'lib/routes/links' import {ComposeIcon2} from 'lib/icons' -import {ListMembers} from '#/view/com/lists/ListMembers' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSetMinimalShellMode} from '#/state/shell' +import {makeListLink, makeProfileLink} from 'lib/routes/links' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' +import {shareUrl} from 'lib/sharing' +import {sanitizeHandle} from 'lib/strings/handles' +import {toShareUrl} from 'lib/strings/url-helpers' +import {s} from 'lib/styles' +import React, {useCallback, useMemo} from 'react' +import {Pressable, StyleSheet, View} from 'react-native' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {Feed} from 'view/com/posts/Feed' +import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' +import {EmptyState} from 'view/com/util/EmptyState' +import {FAB} from 'view/com/util/fab/FAB' +import {Button} from 'view/com/util/forms/Button' +import {DropdownItem, NativeDropdown} from 'view/com/util/forms/NativeDropdown' +import {TextLink} from 'view/com/util/Link' +import {ListRef} from 'view/com/util/List' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {LoadingScreen} from 'view/com/util/LoadingScreen' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {CenteredView} from 'view/com/util/Views' + +import {atoms as a, useTheme} from '#/alf' +import {RichText} from '#/components/RichText' +import {useAnalytics} from '#/lib/analytics/analytics' +import {cleanError} from '#/lib/strings/errors' +import {logger} from '#/logger' +import {isNative, isWeb} from '#/platform/detection' +import {listenSoftReset} from '#/state/events' import {useModalControls} from '#/state/modals' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' import { - useListQuery, - useListMuteMutation, useListBlockMutation, useListDeleteMutation, + useListMuteMutation, + useListQuery, } from '#/state/queries/list' -import {cleanError} from '#/lib/strings/errors' -import {useSession} from '#/state/session' -import {useComposerControls} from '#/state/shell/composer' -import {isNative, isWeb} from '#/platform/detection' -import {truncateAndInvalidate} from '#/state/queries/util' +import {FeedDescriptor} from '#/state/queries/post-feed' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import { - usePreferencesQuery, usePinFeedMutation, - useUnpinFeedMutation, + usePreferencesQuery, useSetSaveFeedsMutation, + useUnpinFeedMutation, } from '#/state/queries/preferences' -import {logger} from '#/logger' -import {useAnalytics} from '#/lib/analytics/analytics' -import {listenSoftReset} from '#/state/events' -import {atoms as a, useTheme} from '#/alf' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {truncateAndInvalidate} from '#/state/queries/util' +import {useSession} from '#/state/session' +import {useSetMinimalShellMode} from '#/state/shell' +import {useComposerControls} from '#/state/shell/composer' +import {ListMembers} from '#/view/com/lists/ListMembers' const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_MOD = ['About'] diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index 251c706384..b58f9f4f15 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -1,31 +1,32 @@ -import React from 'react' -import {StyleSheet, View, ActivityIndicator, Pressable} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {track} from '#/lib/analytics/analytics' import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams} from 'lib/routes/types' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {ScrollView, CenteredView} from 'view/com/util/Views' -import {Text} from 'view/com/util/text/Text' -import {s, colors} from 'lib/styles' -import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import * as Toast from 'view/com/util/Toast' import {Haptics} from 'lib/haptics' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams} from 'lib/routes/types' +import {colors, s} from 'lib/styles' +import React from 'react' +import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native' +import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' import {TextLink} from 'view/com/util/Link' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {CenteredView, ScrollView} from 'view/com/util/Views' + +import {track} from '#/lib/analytics/analytics' import {logger} from '#/logger' -import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import { - usePreferencesQuery, usePinFeedMutation, - useUnpinFeedMutation, + usePreferencesQuery, useSetSaveFeedsMutation, + useUnpinFeedMutation, } from '#/state/queries/preferences' +import {useSetMinimalShellMode} from '#/state/shell' const HITSLOP_TOP = { top: 20, diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 42eec53d31..d9d11c8104 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -1,59 +1,59 @@ -import React from 'react' -import { - View, - StyleSheet, - ActivityIndicator, - TextInput, - Pressable, - Platform, -} from 'react-native' -import {ScrollView, CenteredView} from '#/view/com/util/Views' -import {List} from '#/view/com/util/List' import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import AsyncStorage from '@react-native-async-storage/async-storage' import {useFocusEffect, useNavigation} from '@react-navigation/native' - -import {logger} from '#/logger' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import { NativeStackScreenProps, SearchTabNavigatorParams, } from 'lib/routes/types' -import {Text} from '#/view/com/util/text/Text' +import {useTheme} from 'lib/ThemeContext' +import React from 'react' +import { + ActivityIndicator, + Platform, + Pressable, + StyleSheet, + TextInput, + View, +} from 'react-native' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' -import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' -import {Post} from '#/view/com/post/Post' + +import {useAnalytics} from '#/lib/analytics/analytics' +import {HITSLOP_10} from '#/lib/constants' +import {usePalette} from '#/lib/hooks/usePalette' +import {MagnifyingGlassIcon} from '#/lib/icons' +import {NavigationProp} from '#/lib/routes/types' +import {augmentSearchQuery} from '#/lib/strings/helpers' +import {s} from '#/lib/styles' +import {logger} from '#/logger' +import {isNative, isWeb} from '#/platform/detection' +import {listenSoftReset} from '#/state/events' +import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {useActorSearch} from '#/state/queries/actor-search' +import {useModerationOpts} from '#/state/queries/preferences' +import {useSearchPostsQuery} from '#/state/queries/search-posts' +import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' +import {useSession} from '#/state/session' +import {useSetDrawerOpen} from '#/state/shell' +import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' -import {HITSLOP_10} from '#/lib/constants' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {usePalette} from '#/lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {useSession} from '#/state/session' -import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' -import {useSearchPostsQuery} from '#/state/queries/search-posts' -import {useActorSearch} from '#/state/queries/actor-search' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' -import {useSetDrawerOpen} from '#/state/shell' -import {useAnalytics} from '#/lib/analytics/analytics' -import {MagnifyingGlassIcon} from '#/lib/icons' -import {useModerationOpts} from '#/state/queries/preferences' +import {Post} from '#/view/com/post/Post' +import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' +import {List} from '#/view/com/util/List' +import {Text} from '#/view/com/util/text/Text' +import {CenteredView, ScrollView} from '#/view/com/util/Views' import { MATCH_HANDLE, SearchLinkCard, SearchProfileCard, } from '#/view/shell/desktop/Search' -import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' -import {isNative, isWeb} from '#/platform/detection' -import {listenSoftReset} from '#/state/events' -import {s} from '#/lib/styles' -import AsyncStorage from '@react-native-async-storage/async-storage' -import {augmentSearchQuery} from '#/lib/strings/helpers' -import {NavigationProp} from '#/lib/routes/types' function Loader() { const pal = usePalette('default') diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx index dca51c0dca..e4747c6966 100644 --- a/src/view/screens/Settings/ExportCarDialog.tsx +++ b/src/view/screens/Settings/ExportCarDialog.tsx @@ -1,13 +1,13 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {Text, P} from '#/components/Typography' import {Button, ButtonText} from '#/components/Button' +import * as Dialog from '#/components/Dialog' import {InlineLink, Link} from '#/components/Link' +import {P, Text} from '#/components/Typography' import {getAgent, useSession} from '#/state/session' export function ExportCarDialog({ diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index 00b507a997..f25fca15a0 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -1,72 +1,73 @@ +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import Clipboard from '@react-native-clipboard/clipboard' +import {useFocusEffect, useNavigation} from '@react-navigation/native' +import {useQueryClient} from '@tanstack/react-query' +import {useAnalytics} from 'lib/analytics/analytics' +import * as AppInfo from 'lib/app-info' +import {STATUS_PAGE_URL} from 'lib/constants' +import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' +import {useCustomPalette} from 'lib/hooks/useCustomPalette' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {HandIcon, HashtagIcon} from 'lib/icons' +import {makeProfileLink} from 'lib/routes/links' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {NavigationProp} from 'lib/routes/types' +import {colors, s} from 'lib/styles' import React from 'react' import { ActivityIndicator, Linking, Platform, - StyleSheet, Pressable, + StyleSheet, TextStyle, TouchableOpacity, View, ViewStyle, } from 'react-native' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import * as AppInfo from 'lib/app-info' -import {usePalette} from 'lib/hooks/usePalette' -import {useCustomPalette} from 'lib/hooks/useCustomPalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' -import {useAnalytics} from 'lib/analytics/analytics' -import {NavigationProp} from 'lib/routes/types' -import {HandIcon, HashtagIcon} from 'lib/icons' -import Clipboard from '@react-native-clipboard/clipboard' -import {makeProfileLink} from 'lib/routes/links' -import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' +import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' +import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {Link, TextLink} from 'view/com/util/Link' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {ScrollView} from 'view/com/util/Views' + +import {useDialogControl} from '#/components/Dialog' +import {isNative} from '#/platform/detection' import {useModalControls} from '#/state/modals' -import { - useSetMinimalShellMode, - useThemePrefs, - useSetThemePrefs, - useOnboardingDispatch, -} from '#/state/shell' +import {clearLegacyStorage} from '#/state/persisted/legacy' +// TODO import {useInviteCodesQuery} from '#/state/queries/invites' +import {clear as clearStorage} from '#/state/persisted/store' import { useRequireAltTextEnabled, useSetRequireAltTextEnabled, } from '#/state/preferences' -import {useSession, useSessionApi, SessionAccount} from '#/state/session' -import {useProfileQuery} from '#/state/queries/profile' -import {useClearPreferencesMutation} from '#/state/queries/preferences' -// TODO import {useInviteCodesQuery} from '#/state/queries/invites' -import {clear as clearStorage} from '#/state/persisted/store' -import {clearLegacyStorage} from '#/state/persisted/legacy' -import {STATUS_PAGE_URL} from 'lib/constants' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQueryClient} from '@tanstack/react-query' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import {useCloseAllActiveElements} from '#/state/util' import { useInAppBrowser, useSetInAppBrowser, } from '#/state/preferences/in-app-browser' -import {isNative} from '#/platform/detection' -import {useDialogControl} from '#/components/Dialog' +import {useClearPreferencesMutation} from '#/state/queries/preferences' +import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' +import {useProfileQuery} from '#/state/queries/profile' +import {SessionAccount, useSession, useSessionApi} from '#/state/session' +import { + useOnboardingDispatch, + useSetMinimalShellMode, + useSetThemePrefs, + useThemePrefs, +} from '#/state/shell' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' -import {s, colors} from 'lib/styles' -import {ScrollView} from 'view/com/util/Views' -import {Link, TextLink} from 'view/com/util/Link' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' -import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {ExportCarDialog} from './ExportCarDialog' function SettingsAccountCard({account}: {account: SessionAccount}) { diff --git a/src/view/screens/Storybook/Breakpoints.tsx b/src/view/screens/Storybook/Breakpoints.tsx index 1b846d517c..5dd8a89fc0 100644 --- a/src/view/screens/Storybook/Breakpoints.tsx +++ b/src/view/screens/Storybook/Breakpoints.tsx @@ -1,8 +1,8 @@ import React from 'react' import {View} from 'react-native' -import {atoms as a, useTheme, useBreakpoints} from '#/alf' -import {Text, H3} from '#/components/Typography' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {H3, Text} from '#/components/Typography' export function Breakpoints() { const t = useTheme() diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index 320db13ff8..8a037844e2 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -4,15 +4,15 @@ import {View} from 'react-native' import {atoms as a} from '#/alf' import { Button, - ButtonVariant, ButtonColor, ButtonIcon, ButtonText, + ButtonVariant, } from '#/components/Button' -import {H1} from '#/components/Typography' import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {H1} from '#/components/Typography' export function Buttons() { return ( diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index 09be124db5..af51c808f4 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -3,9 +3,9 @@ import {View} from 'react-native' import {atoms as a} from '#/alf' import {Button} from '#/components/Button' -import {H3, P} from '#/components/Typography' import * as Dialog from '#/components/Dialog' import * as Prompt from '#/components/Prompt' +import {H3, P} from '#/components/Typography' import {useDialogStateControlContext} from '#/state/dialogs' export function Dialogs() { diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx index 2d5495d706..0904f6113d 100644 --- a/src/view/screens/Storybook/Forms.tsx +++ b/src/view/screens/Storybook/Forms.tsx @@ -2,13 +2,13 @@ import React from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' -import {H1, H3} from '#/components/Typography' -import * as TextField from '#/components/forms/TextField' +import {Button} from '#/components/Button' import {DateField, Label} from '#/components/forms/DateField' +import * as TextField from '#/components/forms/TextField' import * as Toggle from '#/components/forms/Toggle' import * as ToggleButton from '#/components/forms/ToggleButton' -import {Button} from '#/components/Button' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {H1, H3} from '#/components/Typography' export function Forms() { const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a']) diff --git a/src/view/screens/Storybook/Icons.tsx b/src/view/screens/Storybook/Icons.tsx index 9d7dc0aa8a..f411a726b3 100644 --- a/src/view/screens/Storybook/Icons.tsx +++ b/src/view/screens/Storybook/Icons.tsx @@ -2,11 +2,11 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {H1} from '#/components/Typography' -import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Loader} from '#/components/Loader' +import {H1} from '#/components/Typography' export function Icons() { const t = useTheme() diff --git a/src/view/screens/Storybook/Links.tsx b/src/view/screens/Storybook/Links.tsx index f9ecfba554..db65d6fed1 100644 --- a/src/view/screens/Storybook/Links.tsx +++ b/src/view/screens/Storybook/Links.tsx @@ -1,7 +1,7 @@ import React from 'react' import {View} from 'react-native' -import {useTheme, atoms as a} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {ButtonText} from '#/components/Button' import {InlineLink, Link} from '#/components/Link' import {H1, Text} from '#/components/Typography' diff --git a/src/view/screens/Storybook/Menus.tsx b/src/view/screens/Storybook/Menus.tsx index 2f2b147215..3e5c74d86e 100644 --- a/src/view/screens/Storybook/Menus.tsx +++ b/src/view/screens/Storybook/Menus.tsx @@ -2,9 +2,9 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {Text} from '#/components/Typography' -import * as Menu from '#/components/Menu' import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' +import * as Menu from '#/components/Menu' +import {Text} from '#/components/Typography' // import {useDialogStateControlContext} from '#/state/dialogs' export function Menus() { diff --git a/src/view/screens/Storybook/Spacing.tsx b/src/view/screens/Storybook/Spacing.tsx index d7faf93a80..9b97e92adc 100644 --- a/src/view/screens/Storybook/Spacing.tsx +++ b/src/view/screens/Storybook/Spacing.tsx @@ -2,7 +2,7 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {Text, H1} from '#/components/Typography' +import {H1, Text} from '#/components/Typography' export function Spacing() { const t = useTheme() diff --git a/src/view/screens/Storybook/Theming.tsx b/src/view/screens/Storybook/Theming.tsx index 5b6763370d..122a57cf8c 100644 --- a/src/view/screens/Storybook/Theming.tsx +++ b/src/view/screens/Storybook/Theming.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' + import {Palette} from './Palette' export function Theming() { diff --git a/src/view/screens/Storybook/Typography.tsx b/src/view/screens/Storybook/Typography.tsx index f0d67c5281..03f86fd467 100644 --- a/src/view/screens/Storybook/Typography.tsx +++ b/src/view/screens/Storybook/Typography.tsx @@ -2,8 +2,8 @@ import React from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' -import {Text} from '#/components/Typography' import {RichText} from '#/components/RichText' +import {Text} from '#/components/Typography' export function Typography() { return ( diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index e43d756de5..e1a31c76a2 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -1,22 +1,22 @@ import React from 'react' import {View} from 'react-native' + +import {atoms as a, ThemeProvider, useTheme} from '#/alf' +import {Button} from '#/components/Button' +import {useSetThemePrefs} from '#/state/shell' import {CenteredView, ScrollView} from '#/view/com/util/Views' -import {atoms as a, useTheme, ThemeProvider} from '#/alf' -import {useSetThemePrefs} from '#/state/shell' -import {Button} from '#/components/Button' - +import {Breakpoints} from './Breakpoints' +import {Buttons} from './Buttons' +import {Dialogs} from './Dialogs' +import {Forms} from './Forms' +import {Icons} from './Icons' +import {Links} from './Links' +import {Menus} from './Menus' +import {Shadows} from './Shadows' +import {Spacing} from './Spacing' import {Theming} from './Theming' import {Typography} from './Typography' -import {Spacing} from './Spacing' -import {Buttons} from './Buttons' -import {Links} from './Links' -import {Forms} from './Forms' -import {Dialogs} from './Dialogs' -import {Breakpoints} from './Breakpoints' -import {Shadows} from './Shadows' -import {Icons} from './Icons' -import {Menus} from './Menus' export function Storybook() { const t = useTheme() diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index 9e7d36ec7a..083a70d07d 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -1,17 +1,19 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {HELP_DESK_URL} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' +import {Text} from 'view/com/util/text/Text' import {CenteredView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {HELP_DESK_URL} from 'lib/constants' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const SupportScreen = (_props: Props) => { diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx index 47aa9f2688..307cd330e3 100644 --- a/src/view/screens/TermsOfService.tsx +++ b/src/view/screens/TermsOfService.tsx @@ -1,16 +1,18 @@ +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useFocusEffect} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {useFocusEffect} from '@react-navigation/native' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' -import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' -import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from 'view/com/util/text/Text' import {ScrollView} from 'view/com/util/Views' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' + import {useSetMinimalShellMode} from '#/state/shell' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' + +import {ViewHeader} from '../com/util/ViewHeader' type Props = NativeStackScreenProps export const TermsOfServiceScreen = (_props: Props) => { diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx index 1937fcb6ea..5ab9407f02 100644 --- a/src/view/shell/Composer.tsx +++ b/src/view/shell/Composer.tsx @@ -1,10 +1,11 @@ -import React, {useEffect} from 'react' -import {observer} from 'mobx-react-lite' -import {Animated, Easing, Platform, StyleSheet, View} from 'react-native' -import {ComposePost} from '../com/composer/Composer' -import {useComposerState} from 'state/shell/composer' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' +import {observer} from 'mobx-react-lite' +import React, {useEffect} from 'react' +import {Animated, Easing, Platform, StyleSheet, View} from 'react-native' +import {useComposerState} from 'state/shell/composer' + +import {ComposePost} from '../com/composer/Composer' export const Composer = observer(function ComposerImpl({ winHeight, diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index 00233f66af..c0b71a1c8e 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -1,16 +1,18 @@ +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {StyleSheet, View} from 'react-native' import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated' -import {ComposePost} from '../com/composer/Composer' import {useComposerState} from 'state/shell/composer' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import { EmojiPicker, EmojiPickerState, } from 'view/com/composer/text-input/web/EmojiPicker.web' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' + +import {ComposePost} from '../com/composer/Composer' + const BOTTOM_BAR_HEIGHT = 61 export function Composer({}: {winHeight: number}) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 2a37d1fe96..6bc9700ee1 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -1,3 +1,34 @@ +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {StackActions, useNavigation} from '@react-navigation/native' +import {useAnalytics} from 'lib/analytics/analytics' +import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' +import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' +import {usePalette} from 'lib/hooks/usePalette' +import { + BellIcon, + BellIconSolid, + CogIcon, + HandIcon, + HashtagIcon, + HomeIcon, + HomeIconSolid, + ListIcon, + MagnifyingGlassIcon2, + MagnifyingGlassIcon2Solid, + UserIcon, + UserIconSolid, +} from 'lib/icons' +import {getTabState, TabState} from 'lib/routes/helpers' +import {NavigationProp} from 'lib/routes/types' +import {pluralize} from 'lib/strings/helpers' +import {colors, s} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {isWeb} from 'platform/detection' import React, {ComponentProps} from 'react' import { Linking, @@ -9,49 +40,19 @@ import { View, ViewStyle, } from 'react-native' -import {useNavigation, StackActions} from '@react-navigation/native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {s, colors} from 'lib/styles' -import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' -import { - HomeIcon, - HomeIconSolid, - BellIcon, - BellIconSolid, - UserIcon, - CogIcon, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIconSolid, - HashtagIcon, - ListIcon, - HandIcon, -} from 'lib/icons' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {Text} from 'view/com/util/text/Text' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' -import {pluralize} from 'lib/strings/helpers' -import {getTabState, TabState} from 'lib/routes/helpers' -import {NavigationProp} from 'lib/routes/types' -import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' -import {isWeb} from 'platform/detection' import {formatCountShortOnly} from 'view/com/util/numeric/format' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useSetDrawerOpen} from '#/state/shell' -import {useSession, SessionAccount} from '#/state/session' -import {useProfileQuery} from '#/state/queries/profile' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' -import {emitSoftReset} from '#/state/events' -import {NavSignupCard} from '#/view/shell/NavSignupCard' -import {TextLink} from '../com/util/Link' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' import {useTheme as useAlfTheme} from '#/alf' +import {emitSoftReset} from '#/state/events' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' +import {useProfileQuery} from '#/state/queries/profile' +import {SessionAccount, useSession} from '#/state/session' +import {useSetDrawerOpen} from '#/state/shell' +import {NavSignupCard} from '#/view/shell/NavSignupCard' + +import {TextLink} from '../com/util/Link' let DrawerProfileCard = ({ account, diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx index bae37e8380..63d5ea2b0c 100644 --- a/src/view/shell/NavSignupCard.tsx +++ b/src/view/shell/NavSignupCard.tsx @@ -1,14 +1,14 @@ -import React from 'react' -import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' - -import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' -import {Text} from '#/view/com/util/text/Text' -import {Button} from '#/view/com/util/forms/Button' +import {s} from 'lib/styles' +import React from 'react' +import {View} from 'react-native' + import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' +import {Button} from '#/view/com/util/forms/Button' +import {Text} from '#/view/com/util/text/Text' import {Logo} from '#/view/icons/Logo' let NavSignupCard = ({}: {}): React.ReactNode => { diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 115faa2965..70503f4c40 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -1,42 +1,44 @@ -import React, {ComponentProps} from 'react' -import {GestureResponderEvent, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {StackActions} from '@react-navigation/native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {BottomTabBarProps} from '@react-navigation/bottom-tabs' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {Text} from 'view/com/util/text/Text' +import {StackActions} from '@react-navigation/native' import {useAnalytics} from 'lib/analytics/analytics' -import {clamp} from 'lib/numbers' +import {useDedupe} from 'lib/hooks/useDedupe' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' +import {usePalette} from 'lib/hooks/usePalette' import { + BellIcon, + BellIconSolid, + HashtagIcon, HomeIcon, HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - HashtagIcon, - BellIcon, - BellIconSolid, } from 'lib/icons' -import {usePalette} from 'lib/hooks/usePalette' +import {clamp} from 'lib/numbers' import {getTabState, TabState} from 'lib/routes/helpers' -import {styles} from './BottomBarStyles' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' +import {s} from 'lib/styles' +import React, {ComponentProps} from 'react' +import {GestureResponderEvent, TouchableOpacity, View} from 'react-native' +import Animated from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' -import {useLingui} from '@lingui/react' -import {msg, Trans} from '@lingui/macro' -import {useModalControls} from '#/state/modals' -import {useShellLayout} from '#/state/shell/shell-layout' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' + import {emitSoftReset} from '#/state/events' -import {useSession} from '#/state/session' +import {useModalControls} from '#/state/modals' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useProfileQuery} from '#/state/queries/profile' +import {useSession} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useShellLayout} from '#/state/shell/shell-layout' import {useCloseAllActiveElements} from '#/state/util' import {Button} from '#/view/com/util/forms/Button' -import {s} from 'lib/styles' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' -import {useDedupe} from 'lib/hooks/useDedupe' + +import {styles} from './BottomBarStyles' type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index f226406f5d..1e8347161a 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx @@ -1,5 +1,5 @@ -import {StyleSheet} from 'react-native' import {colors} from 'lib/styles' +import {StyleSheet} from 'react-native' export const styles = StyleSheet.create({ bottomBar: { diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index b330c4b808..582c92b02e 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -1,38 +1,40 @@ -import React from 'react' -import {usePalette} from 'lib/hooks/usePalette' -import {useNavigationState} from '@react-navigation/native' -import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {getCurrentRoute, isTab} from 'lib/routes/helpers' -import {styles} from './BottomBarStyles' -import {clamp} from 'lib/numbers' +import {useNavigationState} from '@react-navigation/native' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {usePalette} from 'lib/hooks/usePalette' import { BellIcon, BellIconSolid, + HashtagIcon, HomeIcon, HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, - HashtagIcon, UserIcon, UserIconSolid, } from 'lib/icons' -import {Link} from 'view/com/util/Link' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {clamp} from 'lib/numbers' +import {getCurrentRoute, isTab} from 'lib/routes/helpers' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams} from 'lib/routes/types' +import {s} from 'lib/styles' +import React from 'react' +import {View} from 'react-native' +import Animated from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Link} from 'view/com/util/Link' + import {useSession} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {Button} from '#/view/com/util/forms/Button' import {Text} from '#/view/com/util/text/Text' -import {s} from 'lib/styles' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' +import {styles} from './BottomBarStyles' + export function BottomBarWeb() { const {_} = useLingui() const {hasSession, currentAccount} = useSession() diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx index 938213c313..968e149f63 100644 --- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx +++ b/src/view/shell/createNativeStackNavigatorWithAuth.tsx @@ -1,11 +1,6 @@ -import * as React from 'react' -import {View} from 'react-native' -import {PWI_ENABLED, NEW_ONBOARDING_ENABLED} from '#/lib/build-flags' - // Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts // MIT License // Copyright (c) 2017 React Navigation Contributors - import { createNavigatorFactory, EventArg, @@ -21,24 +16,28 @@ import type { NativeStackNavigationEventMap, NativeStackNavigationOptions, } from '@react-navigation/native-stack' -import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types' import {NativeStackView} from '@react-navigation/native-stack' +import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types' +import {isWeb} from 'platform/detection' +import * as React from 'react' +import {View} from 'react-native' -import {BottomBarWeb} from './bottom-bar/BottomBarWeb' -import {DesktopLeftNav} from './desktop/LeftNav' -import {DesktopRightNav} from './desktop/RightNav' +import {NEW_ONBOARDING_ENABLED, PWI_ENABLED} from '#/lib/build-flags' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {Deactivated} from '#/screens/Deactivated' +import {Onboarding as NewOnboarding} from '#/screens/Onboarding' +import {useSession} from '#/state/session' import {useOnboardingState} from '#/state/shell' import { useLoggedOutView, useLoggedOutViewControls, } from '#/state/shell/logged-out' -import {useSession} from '#/state/session' -import {isWeb} from 'platform/detection' -import {Deactivated} from '#/screens/Deactivated' + import {LoggedOut} from '../com/auth/LoggedOut' import {Onboarding} from '../com/auth/Onboarding' -import {Onboarding as NewOnboarding} from '#/screens/Onboarding' +import {BottomBarWeb} from './bottom-bar/BottomBarWeb' +import {DesktopLeftNav} from './desktop/LeftNav' +import {DesktopRightNav} from './desktop/RightNav' type NativeStackNavigationOptionsWithAuth = NativeStackNavigationOptions & { requireAuth?: boolean diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx index f447490b36..22e1f9e67d 100644 --- a/src/view/shell/desktop/Feeds.tsx +++ b/src/view/shell/desktop/Feeds.tsx @@ -1,16 +1,17 @@ -import React from 'react' -import {View, StyleSheet} from 'react-native' -import {useNavigationState, useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {TextLink} from 'view/com/util/Link' -import {getCurrentRoute} from 'lib/routes/helpers' -import {useLingui} from '@lingui/react' import {msg} from '@lingui/macro' -import {usePinnedFeedsInfos} from '#/state/queries/feed' -import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' -import {FeedDescriptor} from '#/state/queries/post-feed' +import {useLingui} from '@lingui/react' +import {useNavigation, useNavigationState} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {getCurrentRoute} from 'lib/routes/helpers' import {NavigationProp} from 'lib/routes/types' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {TextLink} from 'view/com/util/Link' + import {emitSoftReset} from '#/state/events' +import {usePinnedFeedsInfos} from '#/state/queries/feed' +import {FeedDescriptor} from '#/state/queries/post-feed' +import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' export function DesktopFeeds() { const pal = usePalette('default') diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index c56ba941ed..f3340b7a73 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -1,52 +1,54 @@ -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {PressableWithHover} from 'view/com/util/PressableWithHover' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { useLinkProps, useNavigation, useNavigationState, } from '@react-navigation/native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {Link} from 'view/com/util/Link' -import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s, colors} from 'lib/styles' import { - HomeIcon, - HomeIconSolid, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, BellIcon, BellIconSolid, - UserIcon, - UserIconSolid, CogIcon, CogIconSolid, ComposeIcon2, - ListIcon, - HashtagIcon, HandIcon, + HashtagIcon, + HomeIcon, + HomeIconSolid, + ListIcon, + MagnifyingGlassIcon2, + MagnifyingGlassIcon2Solid, + UserIcon, + UserIconSolid, } from 'lib/icons' -import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' -import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' -import {router} from '../../../routes' +import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers' import {makeProfileLink} from 'lib/routes/links' -import {useLingui} from '@lingui/react' -import {Trans, msg} from '@lingui/macro' +import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' +import {colors, s} from 'lib/styles' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {Link} from 'view/com/util/Link' +import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' +import {PressableWithHover} from 'view/com/util/PressableWithHover' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' + +import {isInvalidHandle} from '#/lib/strings/handles' +import {emitSoftReset} from '#/state/events' +import {useFetchHandle} from '#/state/queries/handle' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useComposerControls} from '#/state/shell/composer' -import {useFetchHandle} from '#/state/queries/handle' -import {emitSoftReset} from '#/state/events' import {NavSignupCard} from '#/view/shell/NavSignupCard' -import {isInvalidHandle} from '#/lib/strings/handles' + +import {router} from '../../../routes' function ProfileCard() { const {currentAccount} = useSession() diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index c1f4987248..bfbb19f108 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,17 +1,19 @@ +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import {usePalette} from 'lib/hooks/usePalette' -import {DesktopSearch} from './Search' -import {DesktopFeeds} from './Feeds' -import {Text} from 'view/com/util/text/Text' import {TextLink} from 'view/com/util/Link' -import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' -import {s} from 'lib/styles' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' +import {Text} from 'view/com/util/text/Text' + import {useSession} from '#/state/session' +import {DesktopFeeds} from './Feeds' +import {DesktopSearch} from './Search' + export function DesktopRightNav({routeName}: {routeName: string}) { const pal = usePalette('default') const {_} = useLingui() diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index 4a94837338..043b9ff3c9 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -1,33 +1,33 @@ -import React from 'react' -import { - ViewStyle, - TextInput, - View, - StyleSheet, - TouchableOpacity, - ActivityIndicator, -} from 'react-native' -import {useNavigation, StackActions} from '@react-navigation/native' import { AppBskyActorDefs, moderateProfile, ProfileModeration, } from '@atproto/api' -import {Trans, msg} from '@lingui/macro' +import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' - -import {s} from '#/lib/styles' -import {sanitizeDisplayName} from '#/lib/strings/display-names' -import {sanitizeHandle} from '#/lib/strings/handles' -import {makeProfileLink} from '#/lib/routes/links' -import {Link} from '#/view/com/util/Link' +import {StackActions, useNavigation} from '@react-navigation/native' import {usePalette} from 'lib/hooks/usePalette' import {MagnifyingGlassIcon2} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' +import React from 'react' +import { + ActivityIndicator, + StyleSheet, + TextInput, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native' import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from '#/view/com/util/UserAvatar' + +import {makeProfileLink} from '#/lib/routes/links' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {s} from '#/lib/styles' import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' import {useModerationOpts} from '#/state/queries/preferences' +import {Link} from '#/view/com/util/Link' +import {UserAvatar} from '#/view/com/util/UserAvatar' export const MATCH_HANDLE = /@?([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?:\.[a-zA-Z]{2,}))/ diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index 76a7f8fb3a..b207543785 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -1,37 +1,39 @@ -import React from 'react' +import {useNavigationState} from '@react-navigation/native' import {StatusBar} from 'expo-status-bar' +import {usePalette} from 'lib/hooks/usePalette' +import * as notifications from 'lib/notifications/notifications' +import {isStateAtTabRoot} from 'lib/routes/helpers' +import {useTheme} from 'lib/ThemeContext' +import {isAndroid} from 'platform/detection' +import React from 'react' import { + BackHandler, DimensionValue, StyleSheet, useWindowDimensions, View, - BackHandler, } from 'react-native' -import {useSafeAreaInsets} from 'react-native-safe-area-context' import {Drawer} from 'react-native-drawer-layout' -import {useNavigationState} from '@react-navigation/native' -import {ModalsContainer} from 'view/com/modals/Modal' +import Animated from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {useDialogStateContext} from 'state/dialogs' import {Lightbox} from 'view/com/lightbox/Lightbox' +import {ModalsContainer} from 'view/com/modals/Modal' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {DrawerContent} from './Drawer' -import {Composer} from './Composer' -import {useTheme} from 'lib/ThemeContext' -import {usePalette} from 'lib/hooks/usePalette' -import {RoutesContainer, TabsNavigator} from '../../Navigation' -import {isStateAtTabRoot} from 'lib/routes/helpers' + +import {MutedWordsDialog} from '#/components/dialogs/MutedWords' +import {Outlet as PortalOutlet} from '#/components/Portal' +import {useSession} from '#/state/session' import { useIsDrawerOpen, - useSetDrawerOpen, useIsDrawerSwipeDisabled, + useSetDrawerOpen, } from '#/state/shell' -import {isAndroid} from 'platform/detection' -import {useSession} from '#/state/session' import {useCloseAnyActiveElement} from '#/state/util' -import * as notifications from 'lib/notifications/notifications' -import {Outlet as PortalOutlet} from '#/components/Portal' -import {MutedWordsDialog} from '#/components/dialogs/MutedWords' -import {useDialogStateContext} from 'state/dialogs' -import Animated from 'react-native-reanimated' + +import {RoutesContainer, TabsNavigator} from '../../Navigation' +import {Composer} from './Composer' +import {DrawerContent} from './Drawer' function ShellInner() { const isDrawerOpen = useIsDrawerOpen() diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 71dccb8c48..d5ac5b970b 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -1,22 +1,24 @@ -import React, {useEffect} from 'react' -import {View, StyleSheet, TouchableOpacity} from 'react-native' -import {ErrorBoundary} from '../com/util/ErrorBoundary' -import {Lightbox} from '../com/lightbox/Lightbox' -import {ModalsContainer} from '../com/modals/Modal' -import {Composer} from './Composer.web' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {s, colors} from 'lib/styles' -import {RoutesContainer, FlatNavigator} from '../../Navigation' -import {DrawerContent} from './Drawer' -import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' -import {useNavigation} from '@react-navigation/native' -import {NavigationProp} from 'lib/routes/types' import {t} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {NavigationProp} from 'lib/routes/types' +import {colors, s} from 'lib/styles' +import React, {useEffect} from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' + +import {MutedWordsDialog} from '#/components/dialogs/MutedWords' +import {Outlet as PortalOutlet} from '#/components/Portal' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' import {useCloseAllActiveElements} from '#/state/util' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import {Outlet as PortalOutlet} from '#/components/Portal' -import {MutedWordsDialog} from '#/components/dialogs/MutedWords' + +import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' +import {FlatNavigator, RoutesContainer} from '../../Navigation' +import {Lightbox} from '../com/lightbox/Lightbox' +import {ModalsContainer} from '../com/modals/Modal' +import {ErrorBoundary} from '../com/util/ErrorBoundary' +import {Composer} from './Composer.web' +import {DrawerContent} from './Drawer' function ShellInner() { const isDrawerOpen = useIsDrawerOpen() From 125ef1c75610c7add79f6a917bfa058f9265d5d4 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 01:55:14 +0000 Subject: [PATCH 03/60] Revert "run linter" This reverts commit 1512b5cf68e9e92801a894392569b444fd6af1d1. --- src/App.native.tsx | 72 +++++------ src/App.web.tsx | 44 +++---- src/Navigation.tsx | 115 +++++++++--------- src/Splash.tsx | 16 +-- src/alf/atoms.ts | 2 +- src/alf/index.tsx | 7 +- src/alf/themes.ts | 2 +- src/alf/tokens.ts | 4 +- src/alf/types.ts | 2 +- src/alf/util/useColorModeTheme.ts | 8 +- src/components/Button.tsx | 14 +-- src/components/Dialog/context.ts | 2 +- src/components/Dialog/index.tsx | 25 ++-- src/components/Dialog/index.web.tsx | 21 ++-- src/components/Dialog/types.ts | 2 +- src/components/Divider.tsx | 3 +- src/components/IconCircle.tsx | 8 +- src/components/Link.tsx | 18 +-- src/components/Lists.tsx | 13 +- src/components/Loader.tsx | 4 +- src/components/Menu/index.tsx | 21 ++-- src/components/Menu/index.web.tsx | 21 ++-- src/components/Menu/types.ts | 6 +- src/components/Prompt.tsx | 11 +- src/components/RichText.tsx | 14 +-- src/components/TagMenu/index.tsx | 24 ++-- src/components/TagMenu/index.web.tsx | 20 +-- src/components/Typography.tsx | 4 +- src/components/dialogs/MutedWords.tsx | 55 +++++---- .../forms/DateField/index.android.tsx | 17 +-- src/components/forms/DateField/index.tsx | 8 +- src/components/forms/DateField/index.web.tsx | 6 +- src/components/forms/TextField.tsx | 12 +- src/components/forms/Toggle.tsx | 6 +- src/components/forms/ToggleButton.tsx | 7 +- src/components/icons/TEMPLATE.tsx | 2 +- src/components/icons/common.ts | 2 +- src/lib/ThemeContext.tsx | 6 +- .../__tests__/moderatePost_wrapped.test.ts | 2 +- src/lib/analytics/analytics.tsx | 9 +- src/lib/analytics/analytics.web.tsx | 7 +- src/lib/api/api-polyfill.ts | 2 +- src/lib/api/feed-manip.ts | 7 +- src/lib/api/feed/author.ts | 4 +- src/lib/api/feed/custom.ts | 6 +- src/lib/api/feed/following.ts | 4 +- src/lib/api/feed/home.ts | 8 +- src/lib/api/feed/likes.ts | 4 +- src/lib/api/feed/list.ts | 4 +- src/lib/api/feed/merge.ts | 16 ++- src/lib/api/index.ts | 8 +- src/lib/app-info.ts | 2 +- src/lib/embeds.ts | 2 +- src/lib/hooks/useAccountSwitcher.ts | 8 +- .../useAnimatedScrollHandler_FIXED.web.ts | 2 +- src/lib/hooks/useCustomPalette.ts | 4 +- src/lib/hooks/useDraggableScrollView.ts | 6 +- src/lib/hooks/useIntentHandler.ts | 4 +- src/lib/hooks/useIsKeyboardVisible.ts | 4 +- src/lib/hooks/useMinimalShellMode.tsx | 1 - src/lib/hooks/useNavigationDeduped.ts | 10 +- src/lib/hooks/useOTAUpdate.ts | 3 +- src/lib/hooks/usePalette.ts | 3 +- src/lib/hooks/usePermissions.ts | 2 +- src/lib/hooks/useSetTitle.ts | 4 +- src/lib/hooks/useTabFocusEffect.ts | 2 +- src/lib/hooks/useToggleMutationQueue.ts | 2 +- src/lib/hooks/useWebBodyScrollLock.ts | 1 - src/lib/hooks/useWebMediaQueries.tsx | 2 +- src/lib/hooks/useWebScrollRestoration.ts | 2 +- src/lib/icons.tsx | 2 +- src/lib/link-meta/bsky.ts | 10 +- src/lib/link-meta/link-meta.ts | 5 +- src/lib/media/image-sizes.ts | 2 +- src/lib/media/manip.ts | 17 ++- src/lib/media/manip.web.ts | 5 +- src/lib/media/picker.e2e.tsx | 5 +- src/lib/media/picker.shared.ts | 3 +- src/lib/media/picker.tsx | 3 +- src/lib/media/picker.web.tsx | 3 +- src/lib/moderatePost_wrapped.ts | 8 +- src/lib/moderation.ts | 2 +- src/lib/notifications/notifications.ts | 10 +- src/lib/react-query.ts | 3 +- src/lib/routes/helpers.ts | 3 +- src/lib/routes/router.ts | 2 +- src/lib/sentry.ts | 2 +- src/lib/sharing.ts | 5 +- src/lib/statsig/statsig.tsx | 3 +- src/lib/statsig/statsig.web.tsx | 3 +- src/lib/strings/display-names.ts | 1 - src/lib/strings/embed-player.ts | 2 +- src/lib/strings/rich-text-helpers.ts | 1 - src/lib/strings/rich-text-manip.ts | 1 - src/lib/strings/url-helpers.ts | 2 +- src/lib/styles.ts | 3 +- src/lib/themes.ts | 7 +- src/locale/__tests__/helpers.test.ts | 2 +- src/locale/helpers.ts | 3 +- src/locale/i18n.ts | 17 +-- src/locale/i18n.web.ts | 4 +- src/locale/i18nProvider.tsx | 5 +- src/logger/__tests__/logger.test.ts | 2 +- src/logger/index.ts | 2 +- src/platform/detection.ts | 2 +- src/platform/urls.tsx | 1 - src/screens/Deactivated.tsx | 22 ++-- src/screens/Hashtag.tsx | 33 +++-- src/screens/Onboarding/Layout.tsx | 34 +++--- .../Onboarding/StepAlgoFeeds/FeedCard.tsx | 15 +-- .../Onboarding/StepAlgoFeeds/index.tsx | 19 +-- src/screens/Onboarding/StepFinished.tsx | 25 ++-- src/screens/Onboarding/StepFollowingFeed.tsx | 35 +++--- .../StepInterests/InterestButton.tsx | 5 +- .../Onboarding/StepInterests/index.tsx | 39 +++--- .../AdultContentEnabledPref.tsx | 14 +-- .../StepModeration/ModerationOption.tsx | 14 +-- .../Onboarding/StepModeration/index.tsx | 19 +-- .../SuggestedAccountCard.tsx | 10 +- .../StepSuggestedAccounts/index.tsx | 25 ++-- src/screens/Onboarding/StepTopicalFeeds.tsx | 19 +-- src/screens/Onboarding/index.tsx | 15 +-- src/screens/Onboarding/util.ts | 1 - src/state/cache/post-shadow.ts | 10 +- src/state/cache/profile-shadow.ts | 12 +- src/state/dialogs/index.tsx | 1 - src/state/invites.tsx | 1 - src/state/lightbox.tsx | 3 +- src/state/modals/index.tsx | 7 +- src/state/models/media/gallery.ts | 7 +- src/state/models/media/image.e2e.ts | 10 +- src/state/models/media/image.ts | 19 ++- src/state/muted-threads.tsx | 3 +- src/state/persisted/__tests__/index.test.ts | 6 +- src/state/persisted/__tests__/migrate.test.ts | 8 +- src/state/persisted/__tests__/schema.test.ts | 2 +- src/state/persisted/index.ts | 7 +- src/state/persisted/legacy.ts | 2 +- src/state/persisted/schema.ts | 1 - src/state/persisted/store.ts | 2 +- src/state/preferences/alt-text-required.tsx | 1 - .../preferences/external-embeds-prefs.tsx | 3 +- src/state/preferences/feed-tuners.tsx | 4 +- src/state/preferences/hidden-posts.tsx | 1 - src/state/preferences/in-app-browser.tsx | 14 +-- src/state/preferences/index.tsx | 5 +- src/state/preferences/languages.tsx | 3 +- src/state/queries/actor-autocomplete.ts | 11 +- src/state/queries/actor-search.ts | 2 +- src/state/queries/app-passwords.ts | 3 +- src/state/queries/feed.ts | 24 ++-- src/state/queries/handle.ts | 4 +- src/state/queries/invites.ts | 4 +- src/state/queries/list-members.ts | 4 +- src/state/queries/list-memberships.ts | 4 +- src/state/queries/list.ts | 16 ++- src/state/queries/my-blocked-accounts.ts | 2 +- src/state/queries/my-follows.ts | 4 +- src/state/queries/my-lists.ts | 4 +- src/state/queries/my-muted-accounts.ts | 2 +- src/state/queries/notifications/feed.ts | 20 ++- src/state/queries/notifications/types.ts | 2 +- src/state/queries/notifications/unread.tsx | 20 ++- src/state/queries/notifications/util.ts | 18 ++- src/state/queries/post-feed.ts | 34 +++--- src/state/queries/post-liked-by.ts | 2 +- src/state/queries/post-reposted-by.ts | 2 +- src/state/queries/post-thread.ts | 11 +- src/state/queries/post.ts | 11 +- src/state/queries/preferences/const.ts | 4 +- src/state/queries/preferences/index.ts | 36 +++--- src/state/queries/preferences/moderation.ts | 4 +- src/state/queries/preferences/types.ts | 4 +- src/state/queries/profile-extra-info.ts | 2 +- src/state/queries/profile-feedgens.ts | 2 +- src/state/queries/profile-followers.ts | 2 +- src/state/queries/profile-follows.ts | 4 +- src/state/queries/profile-lists.ts | 3 +- src/state/queries/profile.ts | 26 ++-- src/state/queries/resolve-uri.ts | 7 +- src/state/queries/search-posts.ts | 7 +- src/state/queries/suggested-feeds.ts | 4 +- src/state/queries/suggested-follows.ts | 12 +- src/state/queries/util.ts | 2 +- src/state/session/index.tsx | 11 +- src/state/shell/color-mode.tsx | 1 - src/state/shell/composer.tsx | 3 +- src/state/shell/index.tsx | 13 +- src/state/shell/onboarding.tsx | 3 +- src/state/shell/reminders.ts | 6 +- src/state/shell/selected-feed.tsx | 3 +- src/state/util.ts | 4 +- src/view/com/auth/HomeLoggedOutCTA.tsx | 18 ++- src/view/com/auth/LoggedOut.tsx | 35 +++--- src/view/com/auth/Onboarding.tsx | 14 +-- src/view/com/auth/SplashScreen.tsx | 28 ++--- src/view/com/auth/SplashScreen.web.tsx | 30 +++-- src/view/com/auth/create/CaptchaWebView.tsx | 2 +- src/view/com/auth/create/CreateAccount.tsx | 27 ++-- src/view/com/auth/create/Policies.tsx | 11 +- src/view/com/auth/create/Step1.tsx | 37 +++--- src/view/com/auth/create/Step2.tsx | 24 ++-- src/view/com/auth/create/Step3.tsx | 20 +-- src/view/com/auth/create/StepHeader.tsx | 5 +- src/view/com/auth/create/state.ts | 19 ++- src/view/com/auth/login/ChooseAccountForm.tsx | 22 ++-- .../com/auth/login/ForgotPasswordForm.tsx | 43 ++++--- src/view/com/auth/login/Login.tsx | 22 ++-- src/view/com/auth/login/LoginForm.tsx | 43 ++++--- .../com/auth/login/PasswordUpdatedForm.tsx | 11 +- .../com/auth/login/SetNewPasswordForm.tsx | 28 ++--- src/view/com/auth/login/styles.ts | 3 +- .../com/auth/onboarding/RecommendedFeeds.tsx | 22 ++-- .../auth/onboarding/RecommendedFeedsItem.tsx | 29 +++-- .../auth/onboarding/RecommendedFollows.tsx | 26 ++-- .../onboarding/RecommendedFollowsItem.tsx | 21 ++-- src/view/com/auth/onboarding/Welcome.tsx | 2 - .../com/auth/onboarding/WelcomeDesktop.tsx | 12 +- .../com/auth/onboarding/WelcomeMobile.tsx | 10 +- src/view/com/auth/server-input/index.tsx | 14 +-- src/view/com/auth/util/HelpTip.tsx | 6 +- src/view/com/auth/util/TextInput.tsx | 8 +- src/view/com/composer/Composer.tsx | 90 +++++++------- src/view/com/composer/ComposerReplyTo.tsx | 16 +-- src/view/com/composer/ExternalEmbed.tsx | 13 +- src/view/com/composer/Prompt.tsx | 16 ++- .../composer/char-progress/CharProgress.tsx | 9 +- src/view/com/composer/labels/LabelsBtn.tsx | 15 ++- src/view/com/composer/photos/Gallery.tsx | 23 ++-- .../com/composer/photos/OpenCameraBtn.tsx | 19 ++- .../com/composer/photos/SelectPhotoBtn.tsx | 14 +-- .../select-language/SelectLangBtn.tsx | 22 ++-- .../select-language/SuggestedLanguage.tsx | 24 ++-- .../com/composer/text-input/TextInput.tsx | 35 +++--- .../com/composer/text-input/TextInput.web.tsx | 32 +++-- .../text-input/mobile/Autocomplete.tsx | 12 +- .../composer/text-input/web/Autocomplete.tsx | 20 ++- .../text-input/web/EmojiPicker.web.tsx | 3 +- .../composer/text-input/web/LinkDecorator.ts | 5 +- .../composer/text-input/web/TagDecorator.ts | 4 +- .../com/composer/threadgate/ThreadgateBtn.tsx | 13 +- src/view/com/composer/useExternalLinkFetch.ts | 17 ++- src/view/com/feeds/FeedPage.tsx | 34 +++--- src/view/com/feeds/FeedSourceCard.tsx | 34 +++--- src/view/com/feeds/ProfileFeedgens.tsx | 30 +++-- src/view/com/home/HomeHeader.tsx | 12 +- src/view/com/home/HomeHeaderLayout.web.tsx | 22 ++-- src/view/com/home/HomeHeaderLayoutMobile.tsx | 27 ++-- .../components/ImageDefaultHeader.tsx | 6 +- .../ImageItem/ImageItem.android.tsx | 14 +-- .../components/ImageItem/ImageItem.ios.tsx | 9 +- .../components/ImageItem/ImageItem.tsx | 1 - .../components/ImageItem/ImageLoading.tsx | 1 + .../ImageViewing/hooks/useImageDimensions.ts | 1 - src/view/com/lightbox/ImageViewing/index.tsx | 13 +- src/view/com/lightbox/Lightbox.tsx | 28 ++--- src/view/com/lightbox/Lightbox.web.tsx | 30 +++-- src/view/com/lists/ListCard.tsx | 22 ++-- src/view/com/lists/ListMembers.tsx | 28 ++--- src/view/com/lists/MyLists.tsx | 24 ++-- src/view/com/lists/ProfileLists.tsx | 28 ++--- src/view/com/modals/AddAppPasswords.tsx | 24 ++-- src/view/com/modals/AltImage.tsx | 38 +++--- src/view/com/modals/AppealLabel.tsx | 24 ++-- src/view/com/modals/BirthDateSettings.tsx | 26 ++-- src/view/com/modals/ChangeEmail.tsx | 28 ++--- src/view/com/modals/ChangeHandle.tsx | 52 ++++---- src/view/com/modals/ChangePassword.tsx | 34 +++--- src/view/com/modals/Confirm.tsx | 18 ++- .../com/modals/ContentFilteringSettings.tsx | 38 +++--- src/view/com/modals/CreateOrEditList.tsx | 48 ++++---- src/view/com/modals/DeleteAccount.tsx | 32 +++-- src/view/com/modals/EditImage.tsx | 34 +++--- src/view/com/modals/EditProfile.tsx | 42 +++---- src/view/com/modals/EmbedConsent.tsx | 16 ++- src/view/com/modals/InAppBrowserConsent.tsx | 16 +-- src/view/com/modals/InviteCodes.tsx | 50 ++++---- src/view/com/modals/LinkWarning.tsx | 24 ++-- src/view/com/modals/ListAddRemoveUsers.tsx | 40 +++--- src/view/com/modals/Modal.tsx | 53 ++++---- src/view/com/modals/Modal.web.tsx | 51 ++++---- src/view/com/modals/ModerationDetails.tsx | 24 ++-- src/view/com/modals/Repost.tsx | 16 ++- src/view/com/modals/SelfLabel.tsx | 20 ++- src/view/com/modals/SwitchAccount.tsx | 30 +++-- src/view/com/modals/Threadgate.tsx | 24 ++-- src/view/com/modals/UserAddRemoveLists.tsx | 32 +++-- src/view/com/modals/VerifyEmail.tsx | 34 +++--- .../com/modals/crop-image/CropImage.web.tsx | 21 ++-- .../lang-settings/ConfirmLanguagesButton.tsx | 12 +- .../ContentLanguagesSettings.tsx | 18 ++- .../modals/lang-settings/LanguageToggle.tsx | 5 +- .../lang-settings/PostLanguagesSettings.tsx | 18 ++- .../com/modals/report/InputIssueDetails.tsx | 15 ++- src/view/com/modals/report/Modal.tsx | 26 ++-- src/view/com/modals/report/ReasonOptions.tsx | 8 +- .../com/modals/report/SendReportButton.tsx | 9 +- src/view/com/notifications/Feed.tsx | 26 ++-- src/view/com/notifications/FeedItem.tsx | 56 ++++----- src/view/com/pager/Pager.tsx | 4 +- src/view/com/pager/Pager.web.tsx | 2 +- src/view/com/pager/PagerWithHeader.tsx | 18 ++- src/view/com/pager/PagerWithHeader.web.tsx | 4 +- src/view/com/pager/TabBar.tsx | 12 +- src/view/com/post-thread/PostLikedBy.tsx | 20 ++- src/view/com/post-thread/PostRepostedBy.tsx | 18 ++- src/view/com/post-thread/PostThread.tsx | 60 +++++---- .../com/post-thread/PostThreadFollowBtn.tsx | 26 ++-- src/view/com/post-thread/PostThreadItem.tsx | 70 ++++++----- src/view/com/post/Post.tsx | 40 +++--- src/view/com/posts/CustomFeedEmptyState.tsx | 15 ++- src/view/com/posts/DiscoverFallbackHeader.tsx | 10 +- src/view/com/posts/Feed.tsx | 44 ++++--- src/view/com/posts/FeedErrorMessage.tsx | 26 ++-- src/view/com/posts/FeedItem.tsx | 52 ++++---- src/view/com/posts/FeedSlice.tsx | 12 +- src/view/com/posts/FollowingEmptyState.tsx | 15 ++- src/view/com/posts/FollowingEndOfFeed.tsx | 15 ++- src/view/com/profile/FollowButton.tsx | 12 +- src/view/com/profile/ProfileCard.tsx | 36 +++--- src/view/com/profile/ProfileFollowers.tsx | 18 ++- src/view/com/profile/ProfileFollows.tsx | 18 ++- src/view/com/profile/ProfileHeader.tsx | 78 ++++++------ .../profile/ProfileHeaderSuggestedFollows.tsx | 35 +++--- src/view/com/profile/ProfileMenu.tsx | 41 +++---- src/view/com/profile/ProfileSubpageHeader.tsx | 34 +++--- src/view/com/testing/TestCtrls.e2e.tsx | 12 +- src/view/com/threadgate/WhoCanReply.tsx | 19 ++- src/view/com/util/AccountDropdownBtn.tsx | 16 ++- src/view/com/util/BlurView.android.tsx | 2 +- src/view/com/util/BlurView.web.tsx | 2 +- .../com/util/BottomSheetCustomBackdrop.tsx | 4 +- src/view/com/util/EmptyState.tsx | 9 +- src/view/com/util/EmptyStateWithButton.tsx | 11 +- src/view/com/util/ErrorBoundary.tsx | 6 +- src/view/com/util/FeedInfoText.tsx | 8 +- src/view/com/util/Html.tsx | 13 +- src/view/com/util/Link.tsx | 50 ++++---- src/view/com/util/List.tsx | 8 +- src/view/com/util/List.web.tsx | 11 +- src/view/com/util/LoadMoreRetryBtn.tsx | 7 +- src/view/com/util/LoadingPlaceholder.tsx | 20 +-- src/view/com/util/LoadingScreen.tsx | 3 +- src/view/com/util/MainScrollProvider.tsx | 11 +- src/view/com/util/PostMeta.tsx | 24 ++-- src/view/com/util/PressableWithHover.tsx | 10 +- src/view/com/util/Selector.tsx | 9 +- src/view/com/util/SimpleViewHeader.tsx | 18 ++- src/view/com/util/TimeElapsed.tsx | 3 +- src/view/com/util/Toast.tsx | 16 ++- src/view/com/util/Toast.web.tsx | 4 +- src/view/com/util/UserAvatar.tsx | 37 +++--- src/view/com/util/UserBanner.tsx | 33 +++-- src/view/com/util/UserInfoText.tsx | 18 ++- src/view/com/util/UserPreviewLink.tsx | 8 +- src/view/com/util/ViewHeader.tsx | 28 ++--- src/view/com/util/ViewSelector.tsx | 17 ++- src/view/com/util/Views.web.tsx | 6 +- .../com/util/anim/TriggerableAnimated.tsx | 2 +- src/view/com/util/error/ErrorMessage.tsx | 25 ++-- src/view/com/util/error/ErrorScreen.tsx | 19 ++- src/view/com/util/fab/FAB.web.tsx | 3 +- src/view/com/util/fab/FABInner.tsx | 11 +- src/view/com/util/forms/Button.tsx | 17 ++- src/view/com/util/forms/DateInput.tsx | 15 ++- src/view/com/util/forms/DateInput.web.tsx | 4 +- src/view/com/util/forms/DropdownButton.tsx | 19 ++- src/view/com/util/forms/NativeDropdown.tsx | 14 +-- .../com/util/forms/NativeDropdown.web.tsx | 10 +- src/view/com/util/forms/PostDropdownBtn.tsx | 59 +++++---- src/view/com/util/forms/RadioButton.tsx | 5 +- src/view/com/util/forms/RadioGroup.tsx | 5 +- src/view/com/util/forms/SearchInput.tsx | 20 +-- src/view/com/util/forms/SelectableBtn.tsx | 7 +- src/view/com/util/forms/ToggleButton.tsx | 9 +- src/view/com/util/images/AutoSizedImage.tsx | 12 +- src/view/com/util/images/Gallery.tsx | 6 +- src/view/com/util/images/Image.tsx | 2 +- src/view/com/util/images/Image.web.tsx | 2 +- src/view/com/util/images/ImageHorzList.tsx | 4 +- src/view/com/util/images/ImageLayoutGrid.tsx | 5 +- src/view/com/util/layouts/LoggedOutLayout.tsx | 7 +- .../com/util/layouts/TitleColumnLayout.tsx | 4 +- src/view/com/util/layouts/withBreakpoints.tsx | 4 +- .../com/util/load-latest/LoadLatestBtn.tsx | 12 +- src/view/com/util/moderation/ContentHider.tsx | 20 ++- src/view/com/util/moderation/LabelInfo.tsx | 12 +- src/view/com/util/moderation/PostAlerts.tsx | 12 +- src/view/com/util/moderation/PostHider.tsx | 18 ++- .../util/moderation/ProfileHeaderAlerts.tsx | 14 +-- src/view/com/util/moderation/ScreenHider.tsx | 32 +++-- src/view/com/util/post-ctrls/PostCtrls.tsx | 48 ++++---- src/view/com/util/post-ctrls/RepostButton.tsx | 18 ++- .../com/util/post-ctrls/RepostButton.web.tsx | 21 ++-- .../com/util/post-embeds/ExternalGifEmbed.tsx | 15 ++- .../util/post-embeds/ExternalLinkEmbed.tsx | 15 ++- .../util/post-embeds/ExternalPlayerEmbed.tsx | 25 ++-- src/view/com/util/post-embeds/ListEmbed.tsx | 6 +- src/view/com/util/post-embeds/QuoteEmbed.tsx | 30 +++-- src/view/com/util/post-embeds/index.tsx | 44 ++++--- src/view/com/util/text/RichText.tsx | 20 ++- src/view/com/util/text/Text.tsx | 6 +- src/view/com/util/text/ThemedText.tsx | 5 +- src/view/icons/Logo.tsx | 4 +- src/view/icons/Logotype.tsx | 2 +- src/view/icons/index.tsx | 73 +++++------ src/view/screens/AppPasswords.tsx | 34 +++--- src/view/screens/CommunityGuidelines.tsx | 20 ++- src/view/screens/CopyrightPolicy.tsx | 20 ++- src/view/screens/Debug.tsx | 27 ++-- src/view/screens/Feeds.tsx | 71 ++++++----- src/view/screens/Home.tsx | 34 +++--- src/view/screens/LanguageSettings.tsx | 32 +++-- src/view/screens/Lists.tsx | 29 +++-- src/view/screens/Log.tsx | 26 ++-- src/view/screens/Moderation.tsx | 44 ++++--- .../screens/ModerationBlockedAccounts.tsx | 34 +++--- src/view/screens/ModerationModlists.tsx | 29 +++-- src/view/screens/ModerationMutedAccounts.tsx | 34 +++--- src/view/screens/NotFound.tsx | 28 ++--- src/view/screens/Notifications.tsx | 38 +++--- src/view/screens/PostLikedBy.tsx | 16 ++- src/view/screens/PostRepostedBy.tsx | 16 ++- src/view/screens/PostThread.tsx | 30 +++-- .../screens/PreferencesExternalEmbeds.tsx | 30 +++-- src/view/screens/PreferencesFollowingFeed.tsx | 24 ++-- src/view/screens/PreferencesThreads.tsx | 20 ++- src/view/screens/PrivacyPolicy.tsx | 20 ++- src/view/screens/Profile.tsx | 70 ++++++----- src/view/screens/ProfileFeed.tsx | 105 ++++++++-------- src/view/screens/ProfileFeedLikedBy.tsx | 16 ++- src/view/screens/ProfileFollowers.tsx | 14 +-- src/view/screens/ProfileFollows.tsx | 14 +-- src/view/screens/ProfileList.tsx | 93 +++++++------- src/view/screens/SavedFeeds.tsx | 47 ++++--- src/view/screens/Search/Search.tsx | 76 ++++++------ src/view/screens/Settings/ExportCarDialog.tsx | 8 +- src/view/screens/Settings/index.tsx | 97 ++++++++------- src/view/screens/Storybook/Breakpoints.tsx | 4 +- src/view/screens/Storybook/Buttons.tsx | 4 +- src/view/screens/Storybook/Dialogs.tsx | 2 +- src/view/screens/Storybook/Forms.tsx | 6 +- src/view/screens/Storybook/Icons.tsx | 4 +- src/view/screens/Storybook/Links.tsx | 2 +- src/view/screens/Storybook/Menus.tsx | 4 +- src/view/screens/Storybook/Spacing.tsx | 2 +- src/view/screens/Storybook/Theming.tsx | 1 - src/view/screens/Storybook/Typography.tsx | 2 +- src/view/screens/Storybook/index.tsx | 26 ++-- src/view/screens/Support.tsx | 24 ++-- src/view/screens/TermsOfService.tsx | 20 ++- src/view/shell/Composer.tsx | 11 +- src/view/shell/Composer.web.tsx | 10 +- src/view/shell/Drawer.tsx | 81 ++++++------ src/view/shell/NavSignupCard.tsx | 12 +- src/view/shell/bottom-bar/BottomBar.tsx | 48 ++++---- src/view/shell/bottom-bar/BottomBarStyles.tsx | 2 +- src/view/shell/bottom-bar/BottomBarWeb.tsx | 28 ++--- .../createNativeStackNavigatorWithAuth.tsx | 25 ++-- src/view/shell/desktop/Feeds.tsx | 19 ++- src/view/shell/desktop/LeftNav.tsx | 60 +++++---- src/view/shell/desktop/RightNav.tsx | 22 ++-- src/view/shell/desktop/Search.tsx | 36 +++--- src/view/shell/index.tsx | 40 +++--- src/view/shell/index.web.tsx | 30 +++-- 465 files changed, 3711 insertions(+), 4133 deletions(-) diff --git a/src/App.native.tsx b/src/App.native.tsx index fb97c0ea95..eff8ab0997 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -1,54 +1,54 @@ import 'react-native-url-polyfill/auto' import 'lib/sentry' // must be near top + +import React, {useState, useEffect} from 'react' +import {RootSiblingParent} from 'react-native-root-siblings' +import * as SplashScreen from 'expo-splash-screen' +import {GestureHandlerRootView} from 'react-native-gesture-handler' +import {QueryClientProvider} from '@tanstack/react-query' +import { + SafeAreaProvider, + initialWindowMetrics, +} from 'react-native-safe-area-context' + import 'view/icons' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {QueryClientProvider} from '@tanstack/react-query' -import * as SplashScreen from 'expo-splash-screen' -import {StatusBar} from 'expo-status-bar' -import {useIntentHandler} from 'lib/hooks/useIntentHandler' -import * as notifications from 'lib/notifications/notifications' -import {queryClient} from 'lib/react-query' -import {s} from 'lib/styles' +import {ThemeProvider as Alf} from '#/alf' +import {useColorModeTheme} from '#/alf/util/useColorModeTheme' +import {init as initPersistedState} from '#/state/persisted' +import {listenSessionDropped} from './state/events' import {ThemeProvider} from 'lib/ThemeContext' -import {isAndroid} from 'platform/detection' -import React, {useEffect, useState} from 'react' -import {GestureHandlerRootView} from 'react-native-gesture-handler' -import {RootSiblingParent} from 'react-native-root-siblings' -import { - initialWindowMetrics, - SafeAreaProvider, -} from 'react-native-safe-area-context' -import {Provider as DialogStateProvider} from 'state/dialogs' -import {Provider as InvitesStateProvider} from 'state/invites' -import {Provider as LightboxStateProvider} from 'state/lightbox' +import {s} from 'lib/styles' +import {Shell} from 'view/shell' +import * as notifications from 'lib/notifications/notifications' +import * as Toast from 'view/com/util/Toast' +import {queryClient} from 'lib/react-query' +import {TestCtrls} from 'view/com/testing/TestCtrls' +import {Provider as ShellStateProvider} from 'state/shell' import {Provider as ModalStateProvider} from 'state/modals' +import {Provider as DialogStateProvider} from 'state/dialogs' +import {Provider as LightboxStateProvider} from 'state/lightbox' import {Provider as MutedThreadsProvider} from 'state/muted-threads' +import {Provider as InvitesStateProvider} from 'state/invites' import {Provider as PrefsStateProvider} from 'state/preferences' -import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' +import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' +import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' +import I18nProvider from './locale/i18nProvider' import { Provider as SessionProvider, useSession, useSessionApi, } from 'state/session' -import {Provider as ShellStateProvider} from 'state/shell' -import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' -import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' -import {TestCtrls} from 'view/com/testing/TestCtrls' -import * as Toast from 'view/com/util/Toast' -import {Shell} from 'view/shell' - -import {ThemeProvider as Alf} from '#/alf' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' +import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' +import * as persisted from '#/state/persisted' +import {Splash} from '#/Splash' import {Provider as PortalProvider} from '#/components/Portal' import {Provider as StatsigProvider} from '#/lib/statsig/statsig' -import {Splash} from '#/Splash' -import {init as initPersistedState} from '#/state/persisted' -import * as persisted from '#/state/persisted' - -import I18nProvider from './locale/i18nProvider' -import {listenSessionDropped} from './state/events' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useIntentHandler} from 'lib/hooks/useIntentHandler' +import {StatusBar} from 'expo-status-bar' +import {isAndroid} from 'platform/detection' SplashScreen.preventAutoHideAsync() diff --git a/src/App.web.tsx b/src/App.web.tsx index b53c61b778..eb2e425930 100644 --- a/src/App.web.tsx +++ b/src/App.web.tsx @@ -1,39 +1,39 @@ import 'lib/sentry' // must be near top + +import React, {useState, useEffect} from 'react' +import {QueryClientProvider} from '@tanstack/react-query' +import {SafeAreaProvider} from 'react-native-safe-area-context' +import {RootSiblingParent} from 'react-native-root-siblings' + import 'view/icons' -import {QueryClientProvider} from '@tanstack/react-query' -import {useIntentHandler} from 'lib/hooks/useIntentHandler' -import {queryClient} from 'lib/react-query' +import {ThemeProvider as Alf} from '#/alf' +import {useColorModeTheme} from '#/alf/util/useColorModeTheme' +import {init as initPersistedState} from '#/state/persisted' +import {Shell} from 'view/shell/index' +import {ToastContainer} from 'view/com/util/Toast.web' import {ThemeProvider} from 'lib/ThemeContext' -import React, {useEffect, useState} from 'react' -import {RootSiblingParent} from 'react-native-root-siblings' -import {SafeAreaProvider} from 'react-native-safe-area-context' -import {Provider as DialogStateProvider} from 'state/dialogs' -import {Provider as InvitesStateProvider} from 'state/invites' -import {Provider as LightboxStateProvider} from 'state/lightbox' +import {queryClient} from 'lib/react-query' +import {Provider as ShellStateProvider} from 'state/shell' import {Provider as ModalStateProvider} from 'state/modals' +import {Provider as DialogStateProvider} from 'state/dialogs' +import {Provider as LightboxStateProvider} from 'state/lightbox' import {Provider as MutedThreadsProvider} from 'state/muted-threads' +import {Provider as InvitesStateProvider} from 'state/invites' import {Provider as PrefsStateProvider} from 'state/preferences' -import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' +import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' +import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' +import I18nProvider from './locale/i18nProvider' import { Provider as SessionProvider, useSession, useSessionApi, } from 'state/session' -import {Provider as ShellStateProvider} from 'state/shell' -import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out' -import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed' -import {ToastContainer} from 'view/com/util/Toast.web' -import {Shell} from 'view/shell/index' - -import {ThemeProvider as Alf} from '#/alf' -import {useColorModeTheme} from '#/alf/util/useColorModeTheme' +import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread' +import * as persisted from '#/state/persisted' import {Provider as PortalProvider} from '#/components/Portal' import {Provider as StatsigProvider} from '#/lib/statsig/statsig' -import {init as initPersistedState} from '#/state/persisted' -import * as persisted from '#/state/persisted' - -import I18nProvider from './locale/i18nProvider' +import {useIntentHandler} from 'lib/hooks/useIntentHandler' function InnerApp() { const {isInitialLoad, currentAccount} = useSession() diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 4eb90a1d54..8a9f69b5de 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -1,85 +1,84 @@ -import {i18n, MessageDescriptor} from '@lingui/core' -import {msg} from '@lingui/macro' +import * as React from 'react' +import { + NavigationContainer, + createNavigationContainerRef, + CommonActions, + StackActions, + DefaultTheme, + DarkTheme, +} from '@react-navigation/native' import { BottomTabBarProps, createBottomTabNavigator, } from '@react-navigation/bottom-tabs' import { - CommonActions, - createNavigationContainerRef, - DarkTheme, - DefaultTheme, - NavigationContainer, - StackActions, -} from '@react-navigation/native' -import {timeout} from 'lib/async/timeout' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {usePalette} from 'lib/hooks/usePalette' -import {buildStateObject} from 'lib/routes/helpers' -import { - AllNavigatorParams, - BottomTabNavigatorParams, - FeedsTabNavigatorParams, - FlatNavigatorParams, HomeTabNavigatorParams, - MyProfileTabNavigatorParams, - NotificationsTabNavigatorParams, SearchTabNavigatorParams, + FeedsTabNavigatorParams, + NotificationsTabNavigatorParams, + FlatNavigatorParams, + AllNavigatorParams, + MyProfileTabNavigatorParams, + BottomTabNavigatorParams, } from 'lib/routes/types' -import {RouteParams, State} from 'lib/routes/types' -import {bskyTitle} from 'lib/strings/headings' +import {BottomBar} from './view/shell/bottom-bar/BottomBar' +import {buildStateObject} from 'lib/routes/helpers' +import {State, RouteParams} from 'lib/routes/types' import {isAndroid, isNative} from 'platform/detection' -import * as React from 'react' -import {JSX} from 'react/jsx-runtime' -import {AppPasswords} from 'view/screens/AppPasswords' -import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' -import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' -import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' -import {PreferencesThreads} from 'view/screens/PreferencesThreads' -import {SavedFeeds} from 'view/screens/SavedFeeds' - -import HashtagScreen from '#/screens/Hashtag' -import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' - -import {init as initAnalytics} from './lib/analytics/analytics' -import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration' -import {logEvent} from './lib/statsig/statsig' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import {router} from './routes' -import {useModalControls} from './state/modals' +import {usePalette} from 'lib/hooks/usePalette' +import {bskyTitle} from 'lib/strings/headings' +import {JSX} from 'react/jsx-runtime' +import {timeout} from 'lib/async/timeout' import {useUnreadNotifications} from './state/queries/notifications/unread' import {useSession} from './state/session' +import {useModalControls} from './state/modals' import { - setEmailConfirmationRequested, shouldRequestEmailConfirmation, + setEmailConfirmationRequested, } from './state/shell/reminders' -import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines' -import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy' -import {FeedsScreen} from './view/screens/Feeds' +import {init as initAnalytics} from './lib/analytics/analytics' +import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration' + import {HomeScreen} from './view/screens/Home' -import {LanguageSettingsScreen} from './view/screens/LanguageSettings' +import {SearchScreen} from './view/screens/Search' +import {FeedsScreen} from './view/screens/Feeds' +import {NotificationsScreen} from './view/screens/Notifications' import {ListsScreen} from './view/screens/Lists' -import {LogScreen} from './view/screens/Log' import {ModerationScreen} from './view/screens/Moderation' import {ModerationModlistsScreen} from './view/screens/ModerationModlists' import {NotFoundScreen} from './view/screens/NotFound' -import {NotificationsScreen} from './view/screens/Notifications' -import {PostLikedByScreen} from './view/screens/PostLikedBy' -import {PostRepostedByScreen} from './view/screens/PostRepostedBy' -import {PostThreadScreen} from './view/screens/PostThread' -import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy' +import {SettingsScreen} from './view/screens/Settings' +import {LanguageSettingsScreen} from './view/screens/LanguageSettings' import {ProfileScreen} from './view/screens/Profile' -import {ProfileFeedScreen} from './view/screens/ProfileFeed' -import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy' import {ProfileFollowersScreen} from './view/screens/ProfileFollowers' import {ProfileFollowsScreen} from './view/screens/ProfileFollows' +import {ProfileFeedScreen} from './view/screens/ProfileFeed' +import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy' import {ProfileListScreen} from './view/screens/ProfileList' -import {SearchScreen} from './view/screens/Search' -import {SettingsScreen} from './view/screens/Settings' +import {PostThreadScreen} from './view/screens/PostThread' +import {PostLikedByScreen} from './view/screens/PostLikedBy' +import {PostRepostedByScreen} from './view/screens/PostRepostedBy' import {Storybook} from './view/screens/Storybook' +import {LogScreen} from './view/screens/Log' import {SupportScreen} from './view/screens/Support' +import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy' import {TermsOfServiceScreen} from './view/screens/TermsOfService' -import {BottomBar} from './view/shell/bottom-bar/BottomBar' +import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines' +import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy' +import {AppPasswords} from 'view/screens/AppPasswords' +import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts' +import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts' +import {SavedFeeds} from 'view/screens/SavedFeeds' +import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed' +import {PreferencesThreads} from 'view/screens/PreferencesThreads' +import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds' import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth' +import {msg} from '@lingui/macro' +import {i18n, MessageDescriptor} from '@lingui/core' +import HashtagScreen from '#/screens/Hashtag' +import {logEvent} from './lib/statsig/statsig' const navigationRef = createNavigationContainerRef() @@ -671,11 +670,11 @@ function logModuleInitTime() { } export { - FlatNavigator, - handleLink, navigate, - reset, resetToTab, - RoutesContainer, + reset, + handleLink, TabsNavigator, + FlatNavigator, + RoutesContainer, } diff --git a/src/Splash.tsx b/src/Splash.tsx index e9c945d1b7..42a21c0839 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -1,22 +1,22 @@ -import MaskedView from '@react-native-masked-view/masked-view' -import {Image} from 'expo-image' -import * as SplashScreen from 'expo-splash-screen' import React, {useCallback, useEffect} from 'react' import { - AccessibilityInfo, - Image as RNImage, - StyleSheet, - useColorScheme, View, + StyleSheet, + Image as RNImage, + AccessibilityInfo, + useColorScheme, } from 'react-native' +import * as SplashScreen from 'expo-splash-screen' +import {Image} from 'expo-image' import Animated, { - Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming, + Easing, } from 'react-native-reanimated' +import MaskedView from '@react-native-masked-view/masked-view' import {useSafeAreaInsets} from 'react-native-safe-area-context' import Svg, {Path, SvgProps} from 'react-native-svg' diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 8db70dc556..fff3a4d8bd 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -1,5 +1,5 @@ +import {web, native} from '#/alf/util/platform' import * as tokens from '#/alf/tokens' -import {native, web} from '#/alf/util/platform' export const atoms = { /* diff --git a/src/alf/index.tsx b/src/alf/index.tsx index ae117747d7..27738e91de 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -1,13 +1,12 @@ import React from 'react' import {Dimensions} from 'react-native' - import * as themes from '#/alf/themes' -export {atoms} from '#/alf/atoms' -export * as tokens from '#/alf/tokens' export * from '#/alf/types' -export * from '#/alf/util/flatten' +export * as tokens from '#/alf/tokens' +export {atoms} from '#/alf/atoms' export * from '#/alf/util/platform' +export * from '#/alf/util/flatten' type BreakpointName = keyof typeof breakpoints diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 0cb1cae248..0c95a459ed 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -1,6 +1,6 @@ -import {atoms} from '#/alf/atoms' import * as tokens from '#/alf/tokens' import type {Mutable} from '#/alf/types' +import {atoms} from '#/alf/atoms' import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration' export type ThemeName = 'light' | 'dim' | 'dark' diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 6062e954ca..b1468f461d 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -1,8 +1,8 @@ import { BLUE_HUE, - generateScale, - GREEN_HUE, RED_HUE, + GREEN_HUE, + generateScale, } from '#/alf/util/colorGeneration' export const scale = generateScale(6, 100) diff --git a/src/alf/types.ts b/src/alf/types.ts index f4f1a5c440..dd8d816d2b 100644 --- a/src/alf/types.ts +++ b/src/alf/types.ts @@ -1,4 +1,4 @@ -import {StyleProp, TextStyle, ViewStyle} from 'react-native' +import {StyleProp, ViewStyle, TextStyle} from 'react-native' type LiteralToCommon = T extends number ? number diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts index ba947a5712..4f8921bf9b 100644 --- a/src/alf/util/useColorModeTheme.ts +++ b/src/alf/util/useColorModeTheme.ts @@ -1,10 +1,10 @@ -import * as SystemUI from 'expo-system-ui' -import {isWeb} from 'platform/detection' import React from 'react' import {ColorSchemeName, useColorScheme} from 'react-native' -import {useThemePrefs} from 'state/shell' -import {dark, dim, light, ThemeName} from '#/alf/themes' +import {useThemePrefs} from 'state/shell' +import {isWeb} from 'platform/detection' +import {ThemeName, light, dark, dim} from '#/alf/themes' +import * as SystemUI from 'expo-system-ui' export function useColorModeTheme(): ThemeName { const colorScheme = useColorScheme() diff --git a/src/components/Button.tsx b/src/components/Button.tsx index cbf9210f51..d3bf73cc3e 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,19 +1,19 @@ import React from 'react' import { - AccessibilityProps, Pressable, - PressableProps, - StyleProp, - StyleSheet, Text, + PressableProps, TextProps, - TextStyle, - View, ViewStyle, + AccessibilityProps, + View, + TextStyle, + StyleSheet, + StyleProp, } from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import {android, atoms as a, flatten, tokens, useTheme} from '#/alf' +import {useTheme, atoms as a, tokens, android, flatten} from '#/alf' import {Props as SVGIconProps} from '#/components/icons/common' export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient' diff --git a/src/components/Dialog/context.ts b/src/components/Dialog/context.ts index 06d238b508..859f8edd77 100644 --- a/src/components/Dialog/context.ts +++ b/src/components/Dialog/context.ts @@ -1,11 +1,11 @@ import React from 'react' +import {useDialogStateContext} from '#/state/dialogs' import { DialogContextProps, DialogControlRefProps, DialogOuterProps, } from '#/components/Dialog/types' -import {useDialogStateContext} from '#/state/dialogs' export const Context = React.createContext({ close: () => {}, diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index fdd43675ea..f0e7b7e82b 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,3 +1,5 @@ +import React, {useImperativeHandle} from 'react' +import {View, Dimensions, Keyboard, Pressable} from 'react-native' import BottomSheet, { BottomSheetBackdropProps, BottomSheetScrollView, @@ -6,24 +8,23 @@ import BottomSheet, { useBottomSheet, WINDOW_HEIGHT, } from '@gorhom/bottom-sheet' -import React, {useImperativeHandle} from 'react' -import {Dimensions, Keyboard, Pressable, View} from 'react-native' -import Animated, {useAnimatedStyle} from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import Animated, {useAnimatedStyle} from 'react-native-reanimated' -import {atoms as a, flatten, useTheme} from '#/alf' -import {Context} from '#/components/Dialog/context' -import { - DialogControlProps, - DialogInnerProps, - DialogOuterProps, -} from '#/components/Dialog/types' -import {createInput} from '#/components/forms/TextField' +import {useTheme, atoms as a, flatten} from '#/alf' import {Portal} from '#/components/Portal' +import {createInput} from '#/components/forms/TextField' import {logger} from '#/logger' import {useDialogStateControlContext} from '#/state/dialogs' -export {useDialogContext, useDialogControl} from '#/components/Dialog/context' +import { + DialogOuterProps, + DialogControlProps, + DialogInnerProps, +} from '#/components/Dialog/types' +import {Context} from '#/components/Dialog/context' + +export {useDialogControl, useDialogContext} from '#/components/Dialog/context' export * from '#/components/Dialog/types' // @ts-ignore export const Input = createInput(BottomSheetTextInput) diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx index 997bf77c1a..3a7f73342d 100644 --- a/src/components/Dialog/index.web.tsx +++ b/src/components/Dialog/index.web.tsx @@ -1,19 +1,20 @@ +import React, {useImperativeHandle} from 'react' +import {View, TouchableWithoutFeedback} from 'react-native' +import {FocusScope} from '@tamagui/focus-scope' +import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {FocusScope} from '@tamagui/focus-scope' -import React, {useImperativeHandle} from 'react' -import {TouchableWithoutFeedback, View} from 'react-native' -import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated' -import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf' -import {Button, ButtonIcon} from '#/components/Button' -import {Context} from '#/components/Dialog/context' -import {DialogInnerProps, DialogOuterProps} from '#/components/Dialog/types' -import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import {useTheme, atoms as a, useBreakpoints, web, flatten} from '#/alf' import {Portal} from '#/components/Portal' + +import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types' +import {Context} from '#/components/Dialog/context' +import {Button, ButtonIcon} from '#/components/Button' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' import {useDialogStateControlContext} from '#/state/dialogs' -export {useDialogContext, useDialogControl} from '#/components/Dialog/context' +export {useDialogControl, useDialogContext} from '#/components/Dialog/context' export * from '#/components/Dialog/types' export {Input} from '#/components/forms/TextField' diff --git a/src/components/Dialog/types.ts b/src/components/Dialog/types.ts index d847631744..4fc60ec394 100644 --- a/src/components/Dialog/types.ts +++ b/src/components/Dialog/types.ts @@ -1,6 +1,6 @@ -import {BottomSheetProps} from '@gorhom/bottom-sheet' import React from 'react' import type {AccessibilityProps} from 'react-native' +import {BottomSheetProps} from '@gorhom/bottom-sheet' import {ViewStyleProp} from '#/alf' diff --git a/src/components/Divider.tsx b/src/components/Divider.tsx index ff0bbb0451..24e2789e50 100644 --- a/src/components/Divider.tsx +++ b/src/components/Divider.tsx @@ -1,7 +1,6 @@ import React from 'react' import {View} from 'react-native' - -import {atoms as a, flatten, useTheme, ViewStyleProp} from '#/alf' +import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf' export function Divider({style}: ViewStyleProp) { const t = useTheme() diff --git a/src/components/IconCircle.tsx b/src/components/IconCircle.tsx index b8b52615a8..aa779e37f3 100644 --- a/src/components/IconCircle.tsx +++ b/src/components/IconCircle.tsx @@ -2,14 +2,14 @@ import React from 'react' import {View} from 'react-native' import { - atoms as a, - flatten, - TextStyleProp, useTheme, + atoms as a, ViewStyleProp, + TextStyleProp, + flatten, } from '#/alf' -import {Props} from '#/components/icons/common' import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' +import {Props} from '#/components/icons/common' export function IconCircle({ icon: Icon, diff --git a/src/components/Link.tsx b/src/components/Link.tsx index 74e75e99c0..00e6a56f42 100644 --- a/src/components/Link.tsx +++ b/src/components/Link.tsx @@ -1,23 +1,23 @@ -import {sanitizeUrl} from '@braintree/sanitize-url' -import {StackActions, useLinkProps} from '@react-navigation/native' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' import React from 'react' import {GestureResponderEvent} from 'react-native' -import {useOpenLink} from 'state/preferences/in-app-browser' +import {useLinkProps, StackActions} from '@react-navigation/native' +import {sanitizeUrl} from '@braintree/sanitize-url' -import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf' -import {Button, ButtonProps} from '#/components/Button' import {useInteractionState} from '#/components/hooks/useInteractionState' -import {Text, TextProps} from '#/components/Typography' +import {isWeb} from '#/platform/detection' +import {useTheme, web, flatten, TextStyleProp, atoms as a} from '#/alf' +import {Button, ButtonProps} from '#/components/Button' import {AllNavigatorParams} from '#/lib/routes/types' import { convertBskyAppUrlIfNeeded, isExternalUrl, linkRequiresWarning, } from '#/lib/strings/url-helpers' -import {isWeb} from '#/platform/detection' -import {router} from '#/routes' import {useModalControls} from '#/state/modals' +import {router} from '#/routes' +import {Text, TextProps} from '#/components/Typography' +import {useOpenLink} from 'state/preferences/in-app-browser' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' /** * Only available within a `Link`, since that inherits from `Button`. diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx index 38bcf8577b..bb0d247971 100644 --- a/src/components/Lists.tsx +++ b/src/components/Lists.tsx @@ -1,16 +1,15 @@ -import {Trans} from '@lingui/macro' -import {StackActions} from '@react-navigation/native' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' -import {cleanError} from 'lib/strings/errors' import React from 'react' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {View} from 'react-native' import {CenteredView} from 'view/com/util/Views' - -import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button} from '#/components/Button' import {Loader} from '#/components/Loader' +import {Trans} from '@lingui/macro' +import {cleanError} from 'lib/strings/errors' +import {Button} from '#/components/Button' import {Text} from '#/components/Typography' +import {StackActions} from '@react-navigation/native' import {router} from '#/routes' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' export function ListFooter({ isFetching, diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx index e0b3be6373..b9f399f953 100644 --- a/src/components/Loader.tsx +++ b/src/components/Loader.tsx @@ -1,13 +1,13 @@ import React from 'react' import Animated, { Easing, - useAnimatedStyle, useSharedValue, + useAnimatedStyle, withRepeat, withTiming, } from 'react-native-reanimated' -import {atoms as a, flatten, useTheme} from '#/alf' +import {atoms as a, useTheme, flatten} from '#/alf' import {Props, useCommonSVGProps} from '#/components/icons/common' import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader' diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 7dd95502e7..9be9dd86bf 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -1,24 +1,25 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {isNative} from 'platform/detection' import React from 'react' +import {View, Pressable, ViewStyle, StyleProp} from 'react-native' import flattenReactChildren from 'react-keyed-flatten-children' -import {Pressable, StyleProp, View, ViewStyle} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' +import {Text} from '#/components/Typography' + import {Context} from '#/components/Menu/context' import { ContextType, - GroupProps, - ItemIconProps, - ItemProps, - ItemTextProps, TriggerProps, + ItemProps, + GroupProps, + ItemTextProps, + ItemIconProps, } from '#/components/Menu/types' -import {Text} from '#/components/Typography' +import {Button, ButtonText} from '#/components/Button' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {isNative} from 'platform/detection' export {useDialogControl as useMenuControl} from '#/components/Dialog' diff --git a/src/components/Menu/index.web.tsx b/src/components/Menu/index.web.tsx index 314769934b..2004ee7c6b 100644 --- a/src/components/Menu/index.web.tsx +++ b/src/components/Menu/index.web.tsx @@ -1,23 +1,24 @@ /* eslint-disable react/prop-types */ -import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import React from 'react' -import {Pressable, StyleProp, View, ViewStyle} from 'react-native' +import {View, Pressable, ViewStyle, StyleProp} from 'react-native' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import {atoms as a, flatten, useTheme, web} from '#/alf' import * as Dialog from '#/components/Dialog' import {useInteractionState} from '#/components/hooks/useInteractionState' -import {Context} from '#/components/Menu/context' +import {atoms as a, useTheme, flatten, web} from '#/alf' +import {Text} from '#/components/Typography' + import { ContextType, - GroupProps, - ItemIconProps, - ItemProps, - ItemTextProps, - RadixPassThroughTriggerProps, TriggerProps, + ItemProps, + GroupProps, + ItemTextProps, + ItemIconProps, + RadixPassThroughTriggerProps, } from '#/components/Menu/types' -import {Text} from '#/components/Typography' +import {Context} from '#/components/Menu/context' export function useMenuControl(): Dialog.DialogControlProps { const id = React.useId() diff --git a/src/components/Menu/types.ts b/src/components/Menu/types.ts index 729a004d8d..7d04a33441 100644 --- a/src/components/Menu/types.ts +++ b/src/components/Menu/types.ts @@ -1,13 +1,13 @@ import React from 'react' import { - AccessibilityProps, GestureResponderEvent, PressableProps, + AccessibilityProps, } from 'react-native' -import {TextStyleProp, ViewStyleProp} from '#/alf' -import * as Dialog from '#/components/Dialog' import {Props as SVGIconProps} from '#/components/icons/common' +import * as Dialog from '#/components/Dialog' +import {TextStyleProp, ViewStyleProp} from '#/alf' export type ContextType = { control: Dialog.DialogOuterProps['control'] diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 84a0c47f1b..3b245c440f 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -1,12 +1,13 @@ +import React from 'react' +import {View, PressableProps} from 'react-native' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import React from 'react' -import {PressableProps, View} from 'react-native' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button} from '#/components/Button' -import * as Dialog from '#/components/Dialog' +import {useTheme, atoms as a, useBreakpoints} from '#/alf' import {Text} from '#/components/Typography' +import {Button} from '#/components/Button' + +import * as Dialog from '#/components/Dialog' export {useDialogControl as usePromptControl} from '#/components/Dialog' diff --git a/src/components/RichText.tsx b/src/components/RichText.tsx index d40b4d21ca..1a14415cf8 100644 --- a/src/components/RichText.tsx +++ b/src/components/RichText.tsx @@ -1,15 +1,15 @@ -import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {toShortUrl} from 'lib/strings/url-helpers' import React from 'react' +import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' -import {atoms as a, flatten, native, TextStyleProp, useTheme, web} from '#/alf' -import {useInteractionState} from '#/components/hooks/useInteractionState' +import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf' import {InlineLink} from '#/components/Link' -import {TagMenu, useTagMenuControl} from '#/components/TagMenu' import {Text, TextProps} from '#/components/Typography' +import {toShortUrl} from 'lib/strings/url-helpers' +import {TagMenu, useTagMenuControl} from '#/components/TagMenu' import {isNative} from '#/platform/detection' +import {useInteractionState} from '#/components/hooks/useInteractionState' const WORD_WRAP = {wordWrap: 1} diff --git a/src/components/TagMenu/index.tsx b/src/components/TagMenu/index.tsx index 0c1e48b6ed..849a3f42d1 100644 --- a/src/components/TagMenu/index.tsx +++ b/src/components/TagMenu/index.tsx @@ -1,27 +1,27 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' import React from 'react' import {View} from 'react-native' +import {useNavigation} from '@react-navigation/native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import {atoms as a, native, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' -import {Divider} from '#/components/Divider' -import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' -import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' -import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' -import {Link} from '#/components/Link' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' +import {Button, ButtonText} from '#/components/Button' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' +import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person' +import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' +import {Divider} from '#/components/Divider' +import {Link} from '#/components/Link' import {makeSearchLink} from '#/lib/routes/links' import {NavigationProp} from '#/lib/routes/types' -import {isInvalidHandle} from '#/lib/strings/handles' import { usePreferencesQuery, - useRemoveMutedWordMutation, useUpsertMutedWordsMutation, + useRemoveMutedWordMutation, } from '#/state/queries/preferences' +import {Loader} from '#/components/Loader' +import {isInvalidHandle} from '#/lib/strings/handles' export function useTagMenuControl() { return Dialog.useDialogControl() diff --git a/src/components/TagMenu/index.web.tsx b/src/components/TagMenu/index.web.tsx index b8a44d6c09..8245bd0191 100644 --- a/src/components/TagMenu/index.web.tsx +++ b/src/components/TagMenu/index.web.tsx @@ -1,20 +1,20 @@ +import React from 'react' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' -import React from 'react' -import {web} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {NavigationProp} from '#/lib/routes/types' import {isInvalidHandle} from '#/lib/strings/handles' -import {enforceLen} from '#/lib/strings/helpers' -import { - usePreferencesQuery, - useRemoveMutedWordMutation, - useUpsertMutedWordsMutation, -} from '#/state/queries/preferences' import {EventStopper} from '#/view/com/util/EventStopper' import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown' +import {NavigationProp} from '#/lib/routes/types' +import { + usePreferencesQuery, + useUpsertMutedWordsMutation, + useRemoveMutedWordMutation, +} from '#/state/queries/preferences' +import {enforceLen} from '#/lib/strings/helpers' +import {web} from '#/alf' +import * as Dialog from '#/components/Dialog' export function useTagMenuControl(): Dialog.DialogControlProps { return { diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx index e7db94e5ce..5268e7f468 100644 --- a/src/components/Typography.tsx +++ b/src/components/Typography.tsx @@ -1,8 +1,8 @@ import React from 'react' -import {Text as RNText, TextProps as RNTextProps, TextStyle} from 'react-native' +import {Text as RNText, TextStyle, TextProps as RNTextProps} from 'react-native' import {UITextView} from 'react-native-ui-text-view' -import {atoms, flatten, useTheme, web} from '#/alf' +import {useTheme, atoms, web, flatten} from '#/alf' import {isIOS, isNative} from '#/platform/detection' export type TextProps = RNTextProps & { diff --git a/src/components/dialogs/MutedWords.tsx b/src/components/dialogs/MutedWords.tsx index 4dedbdf855..5f23a78838 100644 --- a/src/components/dialogs/MutedWords.tsx +++ b/src/components/dialogs/MutedWords.tsx @@ -1,36 +1,37 @@ -import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {Keyboard, View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api' import { - atoms as a, - native, - useBreakpoints, - useTheme, - ViewStyleProp, - web, -} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import * as Dialog from '#/components/Dialog' -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' -import {Divider} from '#/components/Divider' -import * as Toggle from '#/components/forms/Toggle' -import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' -import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText' -import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' -import {Loader} from '#/components/Loader' -import * as Prompt from '#/components/Prompt' -import {Text} from '#/components/Typography' -import {logger} from '#/logger' + usePreferencesQuery, + useUpsertMutedWordsMutation, + useRemoveMutedWordMutation, +} from '#/state/queries/preferences' import {isNative} from '#/platform/detection' import { - usePreferencesQuery, - useRemoveMutedWordMutation, - useUpsertMutedWordsMutation, -} from '#/state/queries/preferences' + atoms as a, + useTheme, + useBreakpoints, + ViewStyleProp, + web, + native, +} from '#/alf' +import {Text} from '#/components/Typography' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' +import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' +import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText' +import {Divider} from '#/components/Divider' +import {Loader} from '#/components/Loader' +import {logger} from '#/logger' +import * as Dialog from '#/components/Dialog' +import * as Toggle from '#/components/forms/Toggle' +import * as Prompt from '#/components/Prompt' + +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' export function MutedWordsDialog() { const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext() diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index 2a93ba8830..451810a5ea 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -1,18 +1,19 @@ -import {isAndroid} from 'platform/detection' import React from 'react' -import {Pressable, View} from 'react-native' -import DatePicker from 'react-native-date-picker' +import {View, Pressable} from 'react-native' + +import {useTheme, atoms} from '#/alf' +import {Text} from '#/components/Typography' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import * as TextField from '#/components/forms/TextField' +import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' -import {atoms, useTheme} from '#/alf' import {DateFieldProps} from '#/components/forms/DateField/types' import { localizeDate, toSimpleDateString, } from '#/components/forms/DateField/utils' -import * as TextField from '#/components/forms/TextField' -import {useInteractionState} from '#/components/hooks/useInteractionState' -import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' -import {Text} from '#/components/Typography' +import DatePicker from 'react-native-date-picker' +import {isAndroid} from 'platform/detection' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index 9bd1c7b813..49e47a01e3 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,11 +1,11 @@ import React from 'react' import {View} from 'react-native' -import DatePicker from 'react-native-date-picker' -import {atoms, useTheme} from '#/alf' -import {DateFieldProps} from '#/components/forms/DateField/types' -import {toSimpleDateString} from '#/components/forms/DateField/utils' +import {useTheme, atoms} from '#/alf' import * as TextField from '#/components/forms/TextField' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import {DateFieldProps} from '#/components/forms/DateField/types' +import DatePicker from 'react-native-date-picker' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx index 1c89cbae93..32f38a5d16 100644 --- a/src/components/forms/DateField/index.web.tsx +++ b/src/components/forms/DateField/index.web.tsx @@ -1,11 +1,11 @@ import React from 'react' -import {StyleSheet, TextInput, TextInputProps} from 'react-native' +import {TextInput, TextInputProps, StyleSheet} from 'react-native' // @ts-ignore import {unstable_createElement} from 'react-native-web' -import {DateFieldProps} from '#/components/forms/DateField/types' -import {toSimpleDateString} from '#/components/forms/DateField/utils' import * as TextField from '#/components/forms/TextField' +import {toSimpleDateString} from '#/components/forms/DateField/utils' +import {DateFieldProps} from '#/components/forms/DateField/types' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index 648be035bc..b37f4bfae9 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -1,19 +1,19 @@ -import {HITSLOP_20} from 'lib/constants' import React from 'react' import { - AccessibilityProps, - StyleSheet, + View, TextInput, TextInputProps, TextStyle, - View, ViewStyle, + StyleSheet, + AccessibilityProps, } from 'react-native' -import {android, atoms as a, useTheme, web} from '#/alf' +import {HITSLOP_20} from 'lib/constants' +import {useTheme, atoms as a, web, android} from '#/alf' +import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' import {Props as SVGIconProps} from '#/components/icons/common' -import {Text} from '#/components/Typography' const Context = React.createContext<{ inputRef: React.RefObject | null diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 3846b8812e..a83f92a2a6 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -1,11 +1,11 @@ -import {HITSLOP_10} from 'lib/constants' import React from 'react' import {Pressable, View, ViewStyle} from 'react-native' -import {atoms as a, flatten, native, useTheme, ViewStyleProp, web} from '#/alf' +import {HITSLOP_10} from 'lib/constants' +import {useTheme, atoms as a, web, native, flatten, ViewStyleProp} from '#/alf' +import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check' -import {Text} from '#/components/Typography' export type ItemState = { name: string diff --git a/src/components/forms/ToggleButton.tsx b/src/components/forms/ToggleButton.tsx index 718f238dac..7e1bd70b99 100644 --- a/src/components/forms/ToggleButton.tsx +++ b/src/components/forms/ToggleButton.tsx @@ -1,10 +1,11 @@ import React from 'react' -import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native' +import {View, AccessibilityProps, TextStyle, ViewStyle} from 'react-native' -import {atoms as a, native, useTheme} from '#/alf' -import * as Toggle from '#/components/forms/Toggle' +import {atoms as a, useTheme, native} from '#/alf' import {Text} from '#/components/Typography' +import * as Toggle from '#/components/forms/Toggle' + export type ItemProps = Omit & AccessibilityProps & React.PropsWithChildren<{testID?: string}> diff --git a/src/components/icons/TEMPLATE.tsx b/src/components/icons/TEMPLATE.tsx index f49c4280bb..9fc1470375 100644 --- a/src/components/icons/TEMPLATE.tsx +++ b/src/components/icons/TEMPLATE.tsx @@ -1,7 +1,7 @@ import React from 'react' import Svg, {Path} from 'react-native-svg' -import {Props, useCommonSVGProps} from '#/components/icons/common' +import {useCommonSVGProps, Props} from '#/components/icons/common' export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef( function LogoImpl(props: Props, ref) { diff --git a/src/components/icons/common.ts b/src/components/icons/common.ts index 669c157f51..9e9f15c4dd 100644 --- a/src/components/icons/common.ts +++ b/src/components/icons/common.ts @@ -1,5 +1,5 @@ import {StyleSheet, TextProps} from 'react-native' -import type {PathProps, SvgProps} from 'react-native-svg' +import type {SvgProps, PathProps} from 'react-native-svg' import {tokens} from '#/alf' diff --git a/src/lib/ThemeContext.tsx b/src/lib/ThemeContext.tsx index a042521619..63e2beeb11 100644 --- a/src/lib/ThemeContext.tsx +++ b/src/lib/ThemeContext.tsx @@ -1,9 +1,7 @@ -import React, {createContext, ReactNode, useContext} from 'react' +import React, {ReactNode, createContext, useContext} from 'react' import {TextStyle, ViewStyle} from 'react-native' - -import {ThemeName} from '#/alf/themes' - import {darkTheme, defaultTheme, dimTheme} from './themes' +import {ThemeName} from '#/alf/themes' export type ColorScheme = 'light' | 'dark' diff --git a/src/lib/__tests__/moderatePost_wrapped.test.ts b/src/lib/__tests__/moderatePost_wrapped.test.ts index d876106600..45566281af 100644 --- a/src/lib/__tests__/moderatePost_wrapped.test.ts +++ b/src/lib/__tests__/moderatePost_wrapped.test.ts @@ -1,5 +1,5 @@ +import {describe, it, expect} from '@jest/globals' import {RichText} from '@atproto/api' -import {describe, expect, it} from '@jest/globals' import {hasMutedWord} from '../moderatePost_wrapped' diff --git a/src/lib/analytics/analytics.tsx b/src/lib/analytics/analytics.tsx index c27a4fb702..a0cc7cd6e8 100644 --- a/src/lib/analytics/analytics.tsx +++ b/src/lib/analytics/analytics.tsx @@ -1,14 +1,13 @@ +import React from 'react' +import {AppState, AppStateStatus} from 'react-native' import AsyncStorage from '@react-native-async-storage/async-storage' import {createClient, SegmentClient} from '@segment/analytics-react-native' import {sha256} from 'js-sha256' -import React from 'react' -import {AppState, AppStateStatus} from 'react-native' import {Native} from 'sentry-expo' -import {logger} from '#/logger' -import {SessionAccount, useSession} from '#/state/session' - +import {useSession, SessionAccount} from '#/state/session' import {ScreenPropertiesMap, TrackPropertiesMap} from './types' +import {logger} from '#/logger' type AppInfo = { build?: string | undefined diff --git a/src/lib/analytics/analytics.web.tsx b/src/lib/analytics/analytics.web.tsx index 21975bc572..72b28f9c0f 100644 --- a/src/lib/analytics/analytics.web.tsx +++ b/src/lib/analytics/analytics.web.tsx @@ -1,12 +1,11 @@ +import React from 'react' import {createClient} from '@segment/analytics-react' import {sha256} from 'js-sha256' -import React from 'react' import {Browser} from 'sentry-expo' -import {logger} from '#/logger' -import {SessionAccount, useSession} from '#/state/session' - import {ScreenPropertiesMap, TrackPropertiesMap} from './types' +import {useSession, SessionAccount} from '#/state/session' +import {logger} from '#/logger' type SegmentClient = ReturnType diff --git a/src/lib/api/api-polyfill.ts b/src/lib/api/api-polyfill.ts index a0245839a5..ea1d975985 100644 --- a/src/lib/api/api-polyfill.ts +++ b/src/lib/api/api-polyfill.ts @@ -1,4 +1,4 @@ -import {BskyAgent, jsonToLex, stringifyLex} from '@atproto/api' +import {BskyAgent, stringifyLex, jsonToLex} from '@atproto/api' import RNFS from 'react-native-fs' const GET_TIMEOUT = 15e3 // 15s diff --git a/src/lib/api/feed-manip.ts b/src/lib/api/feed-manip.ts index 26eea80a1b..227062592b 100644 --- a/src/lib/api/feed-manip.ts +++ b/src/lib/api/feed-manip.ts @@ -1,12 +1,11 @@ import { - AppBskyEmbedRecord, - AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, + AppBskyEmbedRecordWithMedia, + AppBskyEmbedRecord, } from '@atproto/api' - -import {isPostInLanguage} from '../../locale/helpers' import {ReasonFeedSource} from './feed/types' +import {isPostInLanguage} from '../../locale/helpers' type FeedViewPost = AppBskyFeedDefs.FeedViewPost export type FeedTunerFn = ( diff --git a/src/lib/api/feed/author.ts b/src/lib/api/feed/author.ts index 60bb23603b..57db061b33 100644 --- a/src/lib/api/feed/author.ts +++ b/src/lib/api/feed/author.ts @@ -2,10 +2,8 @@ import { AppBskyFeedDefs, AppBskyFeedGetAuthorFeed as GetAuthorFeed, } from '@atproto/api' - -import {getAgent} from '#/state/session' - import {FeedAPI, FeedAPIResponse} from './types' +import {getAgent} from '#/state/session' export class AuthorFeedAPI implements FeedAPI { constructor(public params: GetAuthorFeed.QueryParams) {} diff --git a/src/lib/api/feed/custom.ts b/src/lib/api/feed/custom.ts index cb7e7e66aa..41c5367e57 100644 --- a/src/lib/api/feed/custom.ts +++ b/src/lib/api/feed/custom.ts @@ -2,11 +2,9 @@ import { AppBskyFeedDefs, AppBskyFeedGetFeed as GetCustomFeed, } from '@atproto/api' - -import {getContentLanguages} from '#/state/preferences/languages' -import {getAgent} from '#/state/session' - import {FeedAPI, FeedAPIResponse} from './types' +import {getAgent} from '#/state/session' +import {getContentLanguages} from '#/state/preferences/languages' export class CustomFeedAPI implements FeedAPI { constructor(public params: GetCustomFeed.QueryParams) {} diff --git a/src/lib/api/feed/following.ts b/src/lib/api/feed/following.ts index 95f0a70903..24389b5edc 100644 --- a/src/lib/api/feed/following.ts +++ b/src/lib/api/feed/following.ts @@ -1,8 +1,6 @@ import {AppBskyFeedDefs} from '@atproto/api' - -import {getAgent} from '#/state/session' - import {FeedAPI, FeedAPIResponse} from './types' +import {getAgent} from '#/state/session' export class FollowingFeedAPI implements FeedAPI { constructor() {} diff --git a/src/lib/api/feed/home.ts b/src/lib/api/feed/home.ts index f12dab7b69..436a66d076 100644 --- a/src/lib/api/feed/home.ts +++ b/src/lib/api/feed/home.ts @@ -1,10 +1,8 @@ import {AppBskyFeedDefs} from '@atproto/api' - -import {PROD_DEFAULT_FEED} from '#/lib/constants' - -import {CustomFeedAPI} from './custom' -import {FollowingFeedAPI} from './following' import {FeedAPI, FeedAPIResponse} from './types' +import {FollowingFeedAPI} from './following' +import {CustomFeedAPI} from './custom' +import {PROD_DEFAULT_FEED} from '#/lib/constants' // HACK // the feed API does not include any facilities for passing down diff --git a/src/lib/api/feed/likes.ts b/src/lib/api/feed/likes.ts index 95697e5d76..2b0afdf11e 100644 --- a/src/lib/api/feed/likes.ts +++ b/src/lib/api/feed/likes.ts @@ -2,10 +2,8 @@ import { AppBskyFeedDefs, AppBskyFeedGetActorLikes as GetActorLikes, } from '@atproto/api' - -import {getAgent} from '#/state/session' - import {FeedAPI, FeedAPIResponse} from './types' +import {getAgent} from '#/state/session' export class LikesFeedAPI implements FeedAPI { constructor(public params: GetActorLikes.QueryParams) {} diff --git a/src/lib/api/feed/list.ts b/src/lib/api/feed/list.ts index 1b0b259cf3..19f2ff177c 100644 --- a/src/lib/api/feed/list.ts +++ b/src/lib/api/feed/list.ts @@ -2,10 +2,8 @@ import { AppBskyFeedDefs, AppBskyFeedGetListFeed as GetListFeed, } from '@atproto/api' - -import {getAgent} from '#/state/session' - import {FeedAPI, FeedAPIResponse} from './types' +import {getAgent} from '#/state/session' export class ListFeedAPI implements FeedAPI { constructor(public params: GetListFeed.QueryParams) {} diff --git a/src/lib/api/feed/merge.ts b/src/lib/api/feed/merge.ts index 49210afed0..28bf143cbb 100644 --- a/src/lib/api/feed/merge.ts +++ b/src/lib/api/feed/merge.ts @@ -1,16 +1,14 @@ import {AppBskyFeedDefs, AppBskyFeedGetTimeline} from '@atproto/api' -import {bundleAsync} from 'lib/async/bundle' -import {timeout} from 'lib/async/timeout' -import {feedUriToHref} from 'lib/strings/url-helpers' import shuffle from 'lodash.shuffle' - -import {getContentLanguages} from '#/state/preferences/languages' -import {FeedParams} from '#/state/queries/post-feed' -import {getAgent} from '#/state/session' - +import {timeout} from 'lib/async/timeout' +import {bundleAsync} from 'lib/async/bundle' +import {feedUriToHref} from 'lib/strings/url-helpers' import {FeedTuner} from '../feed-manip' -import {FeedTunerFn} from '../feed-manip' import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types' +import {FeedParams} from '#/state/queries/post-feed' +import {FeedTunerFn} from '../feed-manip' +import {getAgent} from '#/state/session' +import {getContentLanguages} from '#/state/preferences/languages' const REQUEST_WAIT_MS = 500 // 500ms const POST_AGE_CUTOFF = 60e3 * 60 * 24 // 24hours diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts index 178554d735..5fb7fe50e6 100644 --- a/src/lib/api/index.ts +++ b/src/lib/api/index.ts @@ -1,6 +1,6 @@ import { - AppBskyEmbedExternal, AppBskyEmbedImages, + AppBskyEmbedExternal, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedThreadgate, @@ -12,15 +12,13 @@ import { } from '@atproto/api' import {AtUri} from '@atproto/api' import {isNetworkError} from 'lib/strings/errors' -import {shortenLinks} from 'lib/strings/rich-text-manip' +import {LinkMeta} from '../link-meta/link-meta' import {isWeb} from 'platform/detection' import {ImageModel} from 'state/models/media/image' - +import {shortenLinks} from 'lib/strings/rich-text-manip' import {logger} from '#/logger' import {ThreadgateSetting} from '#/state/queries/threadgate' -import {LinkMeta} from '../link-meta/link-meta' - export interface ExternalEmbedDraft { uri: string isLoading: boolean diff --git a/src/lib/app-info.ts b/src/lib/app-info.ts index f6b4932c37..3f026d3fe6 100644 --- a/src/lib/app-info.ts +++ b/src/lib/app-info.ts @@ -1,5 +1,5 @@ -import * as Updates from 'expo-updates' import VersionNumber from 'react-native-version-number' +import * as Updates from 'expo-updates' export const updateChannel = Updates.channel export const appVersion = `${VersionNumber.appVersion} (${VersionNumber.buildVersion})` diff --git a/src/lib/embeds.ts b/src/lib/embeds.ts index 2904f1cc36..a758987b20 100644 --- a/src/lib/embeds.ts +++ b/src/lib/embeds.ts @@ -1,7 +1,7 @@ import { + AppBskyFeedDefs, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, - AppBskyFeedDefs, } from '@atproto/api' export function isEmbedByEmbedder( diff --git a/src/lib/hooks/useAccountSwitcher.ts b/src/lib/hooks/useAccountSwitcher.ts index 478ce538a5..74b5674d5a 100644 --- a/src/lib/hooks/useAccountSwitcher.ts +++ b/src/lib/hooks/useAccountSwitcher.ts @@ -1,11 +1,11 @@ import {useCallback} from 'react' -import {useAnalytics} from '#/lib/analytics/analytics' import {isWeb} from '#/platform/detection' -import {SessionAccount, useSessionApi} from '#/state/session' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import {useCloseAllActiveElements} from '#/state/util' +import {useAnalytics} from '#/lib/analytics/analytics' +import {useSessionApi, SessionAccount} from '#/state/session' import * as Toast from '#/view/com/util/Toast' +import {useCloseAllActiveElements} from '#/state/util' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' export function useAccountSwitcher() { const {track} = useAnalytics() diff --git a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts index 7f8a99506a..98e05a8ce6 100644 --- a/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts +++ b/src/lib/hooks/useAnimatedScrollHandler_FIXED.web.ts @@ -1,4 +1,4 @@ -import {useEffect, useRef} from 'react' +import {useRef, useEffect} from 'react' import {useAnimatedScrollHandler as useAnimatedScrollHandler_BUGGY} from 'react-native-reanimated' export const useAnimatedScrollHandler: typeof useAnimatedScrollHandler_BUGGY = ( diff --git a/src/lib/hooks/useCustomPalette.ts b/src/lib/hooks/useCustomPalette.ts index a069c7ce88..4f8f5c8368 100644 --- a/src/lib/hooks/useCustomPalette.ts +++ b/src/lib/hooks/useCustomPalette.ts @@ -1,6 +1,6 @@ -import {choose} from 'lib/functions' -import {useTheme} from 'lib/ThemeContext' import React from 'react' +import {useTheme} from 'lib/ThemeContext' +import {choose} from 'lib/functions' export function useCustomPalette({light, dark}: {light: T; dark: T}) { const theme = useTheme() diff --git a/src/lib/hooks/useDraggableScrollView.ts b/src/lib/hooks/useDraggableScrollView.ts index ea48ac1dcd..b0f7465d79 100644 --- a/src/lib/hooks/useDraggableScrollView.ts +++ b/src/lib/hooks/useDraggableScrollView.ts @@ -1,7 +1,7 @@ -import {mergeRefs} from 'lib/merge-refs' -import {ForwardedRef, useEffect, useMemo, useRef} from 'react' +import {useEffect, useRef, useMemo, ForwardedRef} from 'react' +import {Platform, findNodeHandle} from 'react-native' import type {ScrollView} from 'react-native' -import {findNodeHandle, Platform} from 'react-native' +import {mergeRefs} from 'lib/merge-refs' type Props = { cursor?: string diff --git a/src/lib/hooks/useIntentHandler.ts b/src/lib/hooks/useIntentHandler.ts index 34f645d7ff..8741530b50 100644 --- a/src/lib/hooks/useIntentHandler.ts +++ b/src/lib/hooks/useIntentHandler.ts @@ -1,8 +1,8 @@ +import React from 'react' import * as Linking from 'expo-linking' import {isNative} from 'platform/detection' -import React from 'react' -import {useSession} from 'state/session' import {useComposerControls} from 'state/shell' +import {useSession} from 'state/session' import {useCloseAllActiveElements} from 'state/util' type IntentType = 'compose' diff --git a/src/lib/hooks/useIsKeyboardVisible.ts b/src/lib/hooks/useIsKeyboardVisible.ts index 391090f2d1..38fc80bde1 100644 --- a/src/lib/hooks/useIsKeyboardVisible.ts +++ b/src/lib/hooks/useIsKeyboardVisible.ts @@ -1,6 +1,6 @@ -import {isIOS} from 'platform/detection' -import {useEffect, useState} from 'react' +import {useState, useEffect} from 'react' import {Keyboard} from 'react-native' +import {isIOS} from 'platform/detection' export function useIsKeyboardVisible({ iosUseWillEvents, diff --git a/src/lib/hooks/useMinimalShellMode.tsx b/src/lib/hooks/useMinimalShellMode.tsx index 071d876831..e81fc434fe 100644 --- a/src/lib/hooks/useMinimalShellMode.tsx +++ b/src/lib/hooks/useMinimalShellMode.tsx @@ -1,5 +1,4 @@ import {interpolate, useAnimatedStyle} from 'react-native-reanimated' - import {useMinimalShellMode as useMinimalShellModeState} from '#/state/shell/minimal-mode' import {useShellLayout} from '#/state/shell/shell-layout' diff --git a/src/lib/hooks/useNavigationDeduped.ts b/src/lib/hooks/useNavigationDeduped.ts index 99efad6105..d913f7f3d0 100644 --- a/src/lib/hooks/useNavigationDeduped.ts +++ b/src/lib/hooks/useNavigationDeduped.ts @@ -1,9 +1,9 @@ -import {useNavigation} from '@react-navigation/core' -import {NavigationState} from '@react-navigation/native' -import type {NavigationAction} from '@react-navigation/routers' -import {useDedupe} from 'lib/hooks/useDedupe' -import {AllNavigatorParams, NavigationProp} from 'lib/routes/types' import React from 'react' +import {useNavigation} from '@react-navigation/core' +import {AllNavigatorParams, NavigationProp} from 'lib/routes/types' +import type {NavigationAction} from '@react-navigation/routers' +import {NavigationState} from '@react-navigation/native' +import {useDedupe} from 'lib/hooks/useDedupe' export type DebouncedNavigationProp = Pick< NavigationProp, diff --git a/src/lib/hooks/useOTAUpdate.ts b/src/lib/hooks/useOTAUpdate.ts index 9bfc998a6a..53eab300e7 100644 --- a/src/lib/hooks/useOTAUpdate.ts +++ b/src/lib/hooks/useOTAUpdate.ts @@ -1,10 +1,9 @@ -import {t} from '@lingui/macro' import * as Updates from 'expo-updates' import {useCallback, useEffect} from 'react' import {AppState} from 'react-native' - import {logger} from '#/logger' import {useModalControls} from '#/state/modals' +import {t} from '@lingui/macro' export function useOTAUpdate() { const {openModal} = useModalControls() diff --git a/src/lib/hooks/usePalette.ts b/src/lib/hooks/usePalette.ts index 2530642f60..eeb43d0b1f 100644 --- a/src/lib/hooks/usePalette.ts +++ b/src/lib/hooks/usePalette.ts @@ -1,7 +1,6 @@ import {useMemo} from 'react' import {TextStyle, ViewStyle} from 'react-native' - -import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext' +import {useTheme, PaletteColorName, PaletteColor} from '../ThemeContext' export interface UsePaletteValue { colors: PaletteColor diff --git a/src/lib/hooks/usePermissions.ts b/src/lib/hooks/usePermissions.ts index 28693ea71d..138f3eacab 100644 --- a/src/lib/hooks/usePermissions.ts +++ b/src/lib/hooks/usePermissions.ts @@ -1,7 +1,7 @@ import {Camera} from 'expo-camera' import * as MediaLibrary from 'expo-media-library' -import {isWeb} from 'platform/detection' import {Linking} from 'react-native' +import {isWeb} from 'platform/detection' import {Alert} from 'view/com/util/Alert' const openPermissionAlert = (perm: string) => { diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts index d88830a89c..129023f717 100644 --- a/src/lib/hooks/useSetTitle.ts +++ b/src/lib/hooks/useSetTitle.ts @@ -1,8 +1,8 @@ +import {useEffect} from 'react' import {useNavigation} from '@react-navigation/native' + import {NavigationProp} from 'lib/routes/types' import {bskyTitle} from 'lib/strings/headings' -import {useEffect} from 'react' - import {useUnreadNotifications} from '#/state/queries/notifications/unread' export function useSetTitle(title?: string) { diff --git a/src/lib/hooks/useTabFocusEffect.ts b/src/lib/hooks/useTabFocusEffect.ts index 5f53350457..e446084c5a 100644 --- a/src/lib/hooks/useTabFocusEffect.ts +++ b/src/lib/hooks/useTabFocusEffect.ts @@ -1,6 +1,6 @@ +import {useEffect, useState} from 'react' import {useNavigation} from '@react-navigation/native' import {getTabState, TabState} from 'lib/routes/helpers' -import {useEffect, useState} from 'react' export function useTabFocusEffect( tabName: string, diff --git a/src/lib/hooks/useToggleMutationQueue.ts b/src/lib/hooks/useToggleMutationQueue.ts index c4b86d3253..28ae861424 100644 --- a/src/lib/hooks/useToggleMutationQueue.ts +++ b/src/lib/hooks/useToggleMutationQueue.ts @@ -1,4 +1,4 @@ -import {useCallback, useEffect, useRef, useState} from 'react' +import {useState, useRef, useEffect, useCallback} from 'react' type Task = { isOn: boolean diff --git a/src/lib/hooks/useWebBodyScrollLock.ts b/src/lib/hooks/useWebBodyScrollLock.ts index 790ddce630..585f193f1f 100644 --- a/src/lib/hooks/useWebBodyScrollLock.ts +++ b/src/lib/hooks/useWebBodyScrollLock.ts @@ -1,5 +1,4 @@ import {useEffect} from 'react' - import {isWeb} from '#/platform/detection' let refCount = 0 diff --git a/src/lib/hooks/useWebMediaQueries.tsx b/src/lib/hooks/useWebMediaQueries.tsx index 45b7b6c589..71a96a89b1 100644 --- a/src/lib/hooks/useWebMediaQueries.tsx +++ b/src/lib/hooks/useWebMediaQueries.tsx @@ -1,5 +1,5 @@ -import {isNative} from 'platform/detection' import {useMediaQuery} from 'react-responsive' +import {isNative} from 'platform/detection' export function useWebMediaQueries() { const isDesktop = useMediaQuery({minWidth: 1300}) diff --git a/src/lib/hooks/useWebScrollRestoration.ts b/src/lib/hooks/useWebScrollRestoration.ts index 5a44024940..f68fbf0f2f 100644 --- a/src/lib/hooks/useWebScrollRestoration.ts +++ b/src/lib/hooks/useWebScrollRestoration.ts @@ -1,5 +1,5 @@ +import {useMemo, useState, useEffect} from 'react' import {EventArg, useNavigation} from '@react-navigation/core' -import {useEffect, useMemo, useState} from 'react' if ('scrollRestoration' in history) { // Tell the brower not to mess with the scroll. diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index eb8214019b..7ae88806f7 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -1,6 +1,6 @@ import React from 'react' import {StyleProp, TextStyle, ViewStyle} from 'react-native' -import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg' +import Svg, {Path, Rect, Line, Ellipse} from 'react-native-svg' export function GridIcon({ style, diff --git a/src/lib/link-meta/bsky.ts b/src/lib/link-meta/bsky.ts index 1c8b28d9b9..c1fbb34b3c 100644 --- a/src/lib/link-meta/bsky.ts +++ b/src/lib/link-meta/bsky.ts @@ -1,13 +1,11 @@ import {AppBskyFeedPost, BskyAgent} from '@atproto/api' import * as apilib from 'lib/api/index' -import {ComposerOptsQuote} from 'state/shell/composer' - -import {useFetchDid} from '#/state/queries/handle' -import {useGetPost} from '#/state/queries/post' - +import {LikelyType, LinkMeta} from './link-meta' // import {match as matchRoute} from 'view/routes' import {convertBskyAppUrlIfNeeded, makeRecordUri} from '../strings/url-helpers' -import {LikelyType, LinkMeta} from './link-meta' +import {ComposerOptsQuote} from 'state/shell/composer' +import {useGetPost} from '#/state/queries/post' +import {useFetchDid} from '#/state/queries/handle' // TODO // import {Home} from 'view/screens/Home' diff --git a/src/lib/link-meta/link-meta.ts b/src/lib/link-meta/link-meta.ts index 0f5230479e..fa951432e8 100644 --- a/src/lib/link-meta/link-meta.ts +++ b/src/lib/link-meta/link-meta.ts @@ -1,9 +1,8 @@ import {BskyAgent} from '@atproto/api' -import {LINK_META_PROXY} from 'lib/constants' -import {getGiphyMetaUri} from 'lib/strings/embed-player' - import {isBskyAppUrl} from '../strings/url-helpers' import {extractBskyMeta} from './bsky' +import {LINK_META_PROXY} from 'lib/constants' +import {getGiphyMetaUri} from 'lib/strings/embed-player' export enum LikelyType { HTML, diff --git a/src/lib/media/image-sizes.ts b/src/lib/media/image-sizes.ts index cab032313d..4ea95ea237 100644 --- a/src/lib/media/image-sizes.ts +++ b/src/lib/media/image-sizes.ts @@ -1,5 +1,5 @@ -import type {Dimensions} from 'lib/media/types' import {Image} from 'react-native' +import type {Dimensions} from 'lib/media/types' const sizes: Map = new Map() const activeRequests: Map> = new Map() diff --git a/src/lib/media/manip.ts b/src/lib/media/manip.ts index 20cca745b9..a681627e67 100644 --- a/src/lib/media/manip.ts +++ b/src/lib/media/manip.ts @@ -1,14 +1,13 @@ -import ImageResizer from '@bam.tech/react-native-image-resizer' -import * as MediaLibrary from 'expo-media-library' -import * as Sharing from 'expo-sharing' -import {isAndroid, isIOS} from 'platform/detection' -import {Image as RNImage, Share as RNShare} from 'react-native' -import * as RNFS from 'react-native-fs' -import {Image} from 'react-native-image-crop-picker' -import uuid from 'react-native-uuid' import RNFetchBlob from 'rn-fetch-blob' - +import ImageResizer from '@bam.tech/react-native-image-resizer' +import {Image as RNImage, Share as RNShare} from 'react-native' +import {Image} from 'react-native-image-crop-picker' +import * as RNFS from 'react-native-fs' +import uuid from 'react-native-uuid' +import * as Sharing from 'expo-sharing' +import * as MediaLibrary from 'expo-media-library' import {Dimensions} from './types' +import {isAndroid, isIOS} from 'platform/detection' export async function compressIfNeeded( img: Image, diff --git a/src/lib/media/manip.web.ts b/src/lib/media/manip.web.ts index 8b63f9e5fe..522aa2e51b 100644 --- a/src/lib/media/manip.web.ts +++ b/src/lib/media/manip.web.ts @@ -1,7 +1,6 @@ -import {Image as RNImage} from 'react-native-image-crop-picker' - import {Dimensions} from './types' -import {blobToDataUri, getDataUriSize} from './util' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {getDataUriSize, blobToDataUri} from './util' export async function compressIfNeeded( img: RNImage, diff --git a/src/lib/media/picker.e2e.tsx b/src/lib/media/picker.e2e.tsx index 08ee91b74f..d7b6080417 100644 --- a/src/lib/media/picker.e2e.tsx +++ b/src/lib/media/picker.e2e.tsx @@ -1,8 +1,7 @@ -import RNFS from 'react-native-fs' import {Image as RNImage} from 'react-native-image-crop-picker' - -import {compressIfNeeded} from './manip' +import RNFS from 'react-native-fs' import {CropperOptions} from './types' +import {compressIfNeeded} from './manip' let _imageCounter = 0 async function getFile() { diff --git a/src/lib/media/picker.shared.ts b/src/lib/media/picker.shared.ts index d00c2b8a61..8bade34e25 100644 --- a/src/lib/media/picker.shared.ts +++ b/src/lib/media/picker.shared.ts @@ -3,9 +3,8 @@ import { launchImageLibraryAsync, MediaTypeOptions, } from 'expo-image-picker' -import * as Toast from 'view/com/util/Toast' - import {getDataUriSize} from './util' +import * as Toast from 'view/com/util/Toast' export async function openPicker(opts?: ImagePickerOptions) { const response = await launchImageLibraryAsync({ diff --git a/src/lib/media/picker.tsx b/src/lib/media/picker.tsx index 37e01e67f9..bf531c9814 100644 --- a/src/lib/media/picker.tsx +++ b/src/lib/media/picker.tsx @@ -1,9 +1,8 @@ import { - Image as RNImage, openCamera as openCameraFn, openCropper as openCropperFn, + Image as RNImage, } from 'react-native-image-crop-picker' - import {CameraOpts, CropperOptions} from './types' export {openPicker} from './picker.shared' diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx index 7e2562e297..995a0c95f9 100644 --- a/src/lib/media/picker.web.tsx +++ b/src/lib/media/picker.web.tsx @@ -1,8 +1,7 @@ /// -import {Image as RNImage} from 'react-native-image-crop-picker' - import {CameraOpts, CropperOptions} from './types' +import {Image as RNImage} from 'react-native-image-crop-picker' export {openPicker} from './picker.shared' import {unstable__openModal} from '#/state/modals' diff --git a/src/lib/moderatePost_wrapped.ts b/src/lib/moderatePost_wrapped.ts index 566e46a050..9f6fa9c076 100644 --- a/src/lib/moderatePost_wrapped.ts +++ b/src/lib/moderatePost_wrapped.ts @@ -1,12 +1,12 @@ import { - AppBskyActorDefs, - AppBskyEmbedExternal, - AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, + moderatePost, + AppBskyActorDefs, AppBskyFeedPost, AppBskyRichtextFacet, - moderatePost, + AppBskyEmbedImages, + AppBskyEmbedExternal, } from '@atproto/api' type ModeratePost = typeof moderatePost diff --git a/src/lib/moderation.ts b/src/lib/moderation.ts index 3f8a032194..b6ebb47a02 100644 --- a/src/lib/moderation.ts +++ b/src/lib/moderation.ts @@ -1,4 +1,4 @@ -import {ModerationCause, PostModeration, ProfileModeration} from '@atproto/api' +import {ModerationCause, ProfileModeration, PostModeration} from '@atproto/api' export interface ModerationCauseDescription { name: string diff --git a/src/lib/notifications/notifications.ts b/src/lib/notifications/notifications.ts index 146bd98538..62d0bfc4b1 100644 --- a/src/lib/notifications/notifications.ts +++ b/src/lib/notifications/notifications.ts @@ -1,14 +1,12 @@ -import {QueryClient} from '@tanstack/react-query' import * as Notifications from 'expo-notifications' -import {track} from 'lib/analytics/analytics' +import {QueryClient} from '@tanstack/react-query' +import {resetToTab} from '../../Navigation' import {devicePlatform, isIOS} from 'platform/detection' - +import {track} from 'lib/analytics/analytics' import {logger} from '#/logger' import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed' import {truncateAndInvalidate} from '#/state/queries/util' -import {getAgent, SessionAccount} from '#/state/session' - -import {resetToTab} from '../../Navigation' +import {SessionAccount, getAgent} from '#/state/session' const SERVICE_DID = (serviceUrl?: string) => serviceUrl?.includes('staging') diff --git a/src/lib/react-query.ts b/src/lib/react-query.ts index 94a09c9419..7fe3fe7a47 100644 --- a/src/lib/react-query.ts +++ b/src/lib/react-query.ts @@ -1,6 +1,5 @@ -import {focusManager, QueryClient} from '@tanstack/react-query' import {AppState, AppStateStatus} from 'react-native' - +import {QueryClient, focusManager} from '@tanstack/react-query' import {isNative} from '#/platform/detection' focusManager.setEventListener(onFocus => { diff --git a/src/lib/routes/helpers.ts b/src/lib/routes/helpers.ts index 03302da1ac..0da8850433 100644 --- a/src/lib/routes/helpers.ts +++ b/src/lib/routes/helpers.ts @@ -1,6 +1,5 @@ import {NavigationProp} from '@react-navigation/native' - -import {RouteParams, State} from './types' +import {State, RouteParams} from './types' export function getRootNavigation( nav: NavigationProp, diff --git a/src/lib/routes/router.ts b/src/lib/routes/router.ts index 45f9c85fdb..8c8be37397 100644 --- a/src/lib/routes/router.ts +++ b/src/lib/routes/router.ts @@ -1,4 +1,4 @@ -import {Route, RouteParams} from './types' +import {RouteParams, Route} from './types' export class Router { routes: [string, Route][] = [] diff --git a/src/lib/sentry.ts b/src/lib/sentry.ts index 1120c389f1..d0a5fe0fd5 100644 --- a/src/lib/sentry.ts +++ b/src/lib/sentry.ts @@ -3,9 +3,9 @@ * avoid future conflicts and/or circular deps */ -import * as info from 'expo-updates' import {Platform} from 'react-native' import app from 'react-native-version-number' +import * as info from 'expo-updates' import {init} from 'sentry-expo' /** diff --git a/src/lib/sharing.ts b/src/lib/sharing.ts index 6c45e46cf8..9f402f8737 100644 --- a/src/lib/sharing.ts +++ b/src/lib/sharing.ts @@ -1,9 +1,8 @@ +import {isIOS, isAndroid} from 'platform/detection' // import * as Sharing from 'expo-sharing' import Clipboard from '@react-native-clipboard/clipboard' -import {isAndroid, isIOS} from 'platform/detection' -import {Share} from 'react-native' - import * as Toast from '../view/com/util/Toast' +import {Share} from 'react-native' /** * This function shares a URL using the native Share API if available, or copies it to the clipboard diff --git a/src/lib/statsig/statsig.tsx b/src/lib/statsig/statsig.tsx index c9e497af0c..6d9ebeb099 100644 --- a/src/lib/statsig/statsig.tsx +++ b/src/lib/statsig/statsig.tsx @@ -1,12 +1,11 @@ -import {sha256} from 'js-sha256' import React from 'react' import { Statsig, StatsigProvider, useGate as useStatsigGate, } from 'statsig-react-native-expo' - import {useSession} from '../../state/session' +import {sha256} from 'js-sha256' const statsigOptions = { environment: { diff --git a/src/lib/statsig/statsig.web.tsx b/src/lib/statsig/statsig.web.tsx index c9cc56b6df..d1c9120194 100644 --- a/src/lib/statsig/statsig.web.tsx +++ b/src/lib/statsig/statsig.web.tsx @@ -1,12 +1,11 @@ -import {sha256} from 'js-sha256' import React from 'react' import { Statsig, StatsigProvider, useGate as useStatsigGate, } from 'statsig-react' - import {useSession} from '../../state/session' +import {sha256} from 'js-sha256' const statsigOptions = { environment: { diff --git a/src/lib/strings/display-names.ts b/src/lib/strings/display-names.ts index e5eb4cfe59..75383dd4fd 100644 --- a/src/lib/strings/display-names.ts +++ b/src/lib/strings/display-names.ts @@ -1,5 +1,4 @@ import {ModerationUI} from '@atproto/api' - import {describeModerationCause} from '../moderation' // \u2705 = ✅ diff --git a/src/lib/strings/embed-player.ts b/src/lib/strings/embed-player.ts index 2ef6efdf12..1cf3b12937 100644 --- a/src/lib/strings/embed-player.ts +++ b/src/lib/strings/embed-player.ts @@ -1,5 +1,5 @@ -import {isWeb} from 'platform/detection' import {Dimensions} from 'react-native' +import {isWeb} from 'platform/detection' const {height: SCREEN_HEIGHT} = Dimensions.get('window') export const embedPlayerSources = [ diff --git a/src/lib/strings/rich-text-helpers.ts b/src/lib/strings/rich-text-helpers.ts index 54f0733d0c..662004599b 100644 --- a/src/lib/strings/rich-text-helpers.ts +++ b/src/lib/strings/rich-text-helpers.ts @@ -1,5 +1,4 @@ import {AppBskyRichtextFacet, RichText} from '@atproto/api' - import {linkRequiresWarning} from './url-helpers' export function richTextToString(rt: RichText, loose: boolean): string { diff --git a/src/lib/strings/rich-text-manip.ts b/src/lib/strings/rich-text-manip.ts index 508e0772e0..d9cd8c0714 100644 --- a/src/lib/strings/rich-text-manip.ts +++ b/src/lib/strings/rich-text-manip.ts @@ -1,5 +1,4 @@ import {RichText, UnicodeString} from '@atproto/api' - import {toShortUrl} from './url-helpers' export function shortenLinks(rt: RichText): RichText { diff --git a/src/lib/strings/url-helpers.ts b/src/lib/strings/url-helpers.ts index 60d5f3cbb3..820311e4ee 100644 --- a/src/lib/strings/url-helpers.ts +++ b/src/lib/strings/url-helpers.ts @@ -1,7 +1,7 @@ import {AtUri} from '@atproto/api' import {BSKY_SERVICE} from 'lib/constants' -import psl from 'psl' import TLDs from 'tlds' +import psl from 'psl' export const BSKY_APP_HOST = 'https://bsky.app' diff --git a/src/lib/styles.ts b/src/lib/styles.ts index 50755f53df..263127440f 100644 --- a/src/lib/styles.ts +++ b/src/lib/styles.ts @@ -1,7 +1,6 @@ -import {isWeb} from 'platform/detection' import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native' - import {Theme, TypographyVariant} from './ThemeContext' +import {isWeb} from 'platform/detection' // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest export const colors = { diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 4fb1184009..bd75aabea6 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -1,9 +1,8 @@ import {Platform} from 'react-native' - -import {darkPalette, dimPalette, lightPalette} from '#/alf/themes' - -import {colors} from './styles' import type {Theme} from './ThemeContext' +import {colors} from './styles' + +import {darkPalette, lightPalette, dimPalette} from '#/alf/themes' export const defaultTheme: Theme = { colorScheme: 'light', diff --git a/src/locale/__tests__/helpers.test.ts b/src/locale/__tests__/helpers.test.ts index 0cc0b7816e..5e924c9fe8 100644 --- a/src/locale/__tests__/helpers.test.ts +++ b/src/locale/__tests__/helpers.test.ts @@ -1,4 +1,4 @@ -import {expect, test} from '@jest/globals' +import {test, expect} from '@jest/globals' import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {AppLanguage} from '#/locale/languages' diff --git a/src/locale/helpers.ts b/src/locale/helpers.ts index 54b05cb687..c73242e707 100644 --- a/src/locale/helpers.ts +++ b/src/locale/helpers.ts @@ -1,8 +1,7 @@ import {AppBskyFeedDefs, AppBskyFeedPost} from '@atproto/api' -import * as bcp47Match from 'bcp-47-match' import lande from 'lande' import {hasProp} from 'lib/type-guards' - +import * as bcp47Match from 'bcp-47-match' import { AppLanguage, LANGUAGES_MAP_CODE2, diff --git a/src/locale/i18n.ts b/src/locale/i18n.ts index 310f17a10c..e8addb0b4f 100644 --- a/src/locale/i18n.ts +++ b/src/locale/i18n.ts @@ -1,22 +1,23 @@ -import {i18n} from '@lingui/core' import {useEffect} from 'react' +import {i18n} from '@lingui/core' -import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {AppLanguage} from '#/locale/languages' -import {messages as messagesCa} from '#/locale/locales/ca/messages' -import {messages as messagesDe} from '#/locale/locales/de/messages' +import {useLanguagePrefs} from '#/state/preferences' import {messages as messagesEn} from '#/locale/locales/en/messages' +import {messages as messagesDe} from '#/locale/locales/de/messages' +import {messages as messagesId} from '#/locale/locales/id/messages' import {messages as messagesEs} from '#/locale/locales/es/messages' import {messages as messagesFr} from '#/locale/locales/fr/messages' import {messages as messagesHi} from '#/locale/locales/hi/messages' -import {messages as messagesId} from '#/locale/locales/id/messages' -import {messages as messagesIt} from '#/locale/locales/it/messages' import {messages as messagesJa} from '#/locale/locales/ja/messages' import {messages as messagesKo} from '#/locale/locales/ko/messages' import {messages as messagesPt_BR} from '#/locale/locales/pt-BR/messages' import {messages as messagesUk} from '#/locale/locales/uk/messages' +import {messages as messagesCa} from '#/locale/locales/ca/messages' import {messages as messagesZh_CN} from '#/locale/locales/zh-CN/messages' -import {useLanguagePrefs} from '#/state/preferences' +import {messages as messagesIt} from '#/locale/locales/it/messages' + +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {AppLanguage} from '#/locale/languages' /** * We do a dynamic import of just the catalog that we need diff --git a/src/locale/i18n.web.ts b/src/locale/i18n.web.ts index ce0c640fe7..d8e51723ff 100644 --- a/src/locale/i18n.web.ts +++ b/src/locale/i18n.web.ts @@ -1,9 +1,9 @@ -import {i18n} from '@lingui/core' import {useEffect} from 'react' +import {i18n} from '@lingui/core' +import {useLanguagePrefs} from '#/state/preferences' import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {AppLanguage} from '#/locale/languages' -import {useLanguagePrefs} from '#/state/preferences' /** * We do a dynamic import of just the catalog that we need diff --git a/src/locale/i18nProvider.tsx b/src/locale/i18nProvider.tsx index 645c0fc6a7..3766f5b716 100644 --- a/src/locale/i18nProvider.tsx +++ b/src/locale/i18nProvider.tsx @@ -1,7 +1,6 @@ -import {i18n} from '@lingui/core' -import {I18nProvider as DefaultI18nProvider} from '@lingui/react' import React from 'react' - +import {I18nProvider as DefaultI18nProvider} from '@lingui/react' +import {i18n} from '@lingui/core' import {useLocaleLanguage} from './i18n' export default function I18nProvider({children}: {children: React.ReactNode}) { diff --git a/src/logger/__tests__/logger.test.ts b/src/logger/__tests__/logger.test.ts index 5c3f7d8248..12d60abaac 100644 --- a/src/logger/__tests__/logger.test.ts +++ b/src/logger/__tests__/logger.test.ts @@ -1,5 +1,5 @@ -import {beforeAll, describe, expect, jest, test} from '@jest/globals' import {nanoid} from 'nanoid/non-secure' +import {jest, describe, expect, test, beforeAll} from '@jest/globals' import {Native as Sentry} from 'sentry-expo' import {Logger, LogLevel, sentryTransport} from '#/logger' diff --git a/src/logger/index.ts b/src/logger/index.ts index c9e323db6d..d6d8d9fc1d 100644 --- a/src/logger/index.ts +++ b/src/logger/index.ts @@ -1,10 +1,10 @@ import format from 'date-fns/format' import {nanoid} from 'nanoid/non-secure' +import {Sentry} from '#/logger/sentry' import * as env from '#/env' import {DebugContext} from '#/logger/debugContext' import {add} from '#/logger/logDump' -import {Sentry} from '#/logger/sentry' export enum LogLevel { Debug = 'debug', diff --git a/src/platform/detection.ts b/src/platform/detection.ts index 891377568f..150fc1fe33 100644 --- a/src/platform/detection.ts +++ b/src/platform/detection.ts @@ -1,6 +1,6 @@ +import {Platform} from 'react-native' import {getLocales} from 'expo-localization' import {dedupArray} from 'lib/functions' -import {Platform} from 'react-native' export const isIOS = Platform.OS === 'ios' export const isAndroid = Platform.OS === 'android' diff --git a/src/platform/urls.tsx b/src/platform/urls.tsx index 514bde43e2..fd844d9331 100644 --- a/src/platform/urls.tsx +++ b/src/platform/urls.tsx @@ -1,5 +1,4 @@ import {Linking} from 'react-native' - import {isNative, isWeb} from './detection' export async function getInitialURL(): Promise { diff --git a/src/screens/Deactivated.tsx b/src/screens/Deactivated.tsx index 44b6bfb86b..f4c2014750 100644 --- a/src/screens/Deactivated.tsx +++ b/src/screens/Deactivated.tsx @@ -1,19 +1,19 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' - -import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Loader} from '#/components/Loader' -import {P, Text} from '#/components/Typography' -import {pluralize} from '#/lib/strings/helpers' -import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' -import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import {useOnboardingDispatch} from '#/state/shell' +import {getAgent, isSessionDeactivated, useSessionApi} from '#/state/session' +import {logger} from '#/logger' +import {pluralize} from '#/lib/strings/helpers' + +import {atoms as a, useTheme, useBreakpoints} from '#/alf' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Text, P} from '#/components/Typography' +import {isWeb} from '#/platform/detection' import {ScrollView} from '#/view/com/util/Views' +import {Loader} from '#/components/Loader' import {Logo} from '#/view/icons/Logo' const COL_WIDTH = 400 diff --git a/src/screens/Hashtag.tsx b/src/screens/Hashtag.tsx index d890fe1da4..776cc585e3 100644 --- a/src/screens/Hashtag.tsx +++ b/src/screens/Hashtag.tsx @@ -1,29 +1,28 @@ -import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {HITSLOP_10} from 'lib/constants' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {CommonNavigatorParams} from 'lib/routes/types' -import {shareUrl} from 'lib/sharing' -import {sanitizeHandle} from 'lib/strings/handles' -import {enforceLen} from 'lib/strings/helpers' -import {isNative} from 'platform/detection' import React from 'react' import {ListRenderItemInfo, Pressable} from 'react-native' -import {useSearchPostsQuery} from 'state/queries/search-posts' +import {useFocusEffect} from '@react-navigation/native' import {useSetMinimalShellMode} from 'state/shell' -import {Post} from 'view/com/post/Post' -import {List} from 'view/com/util/List' import {ViewHeader} from 'view/com/util/ViewHeader' - -import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {CommonNavigatorParams} from 'lib/routes/types' +import {useSearchPostsQuery} from 'state/queries/search-posts' +import {Post} from 'view/com/post/Post' +import {PostView} from '@atproto/api/dist/client/types/app/bsky/feed/defs' +import {enforceLen} from 'lib/strings/helpers' import { ListFooter, ListHeaderDesktop, ListMaybePlaceholder, } from '#/components/Lists' +import {List} from 'view/com/util/List' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {sanitizeHandle} from 'lib/strings/handles' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox' +import {shareUrl} from 'lib/sharing' +import {HITSLOP_10} from 'lib/constants' +import {isNative} from 'platform/detection' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const renderItem = ({item}: ListRenderItemInfo) => { return diff --git a/src/screens/Onboarding/Layout.tsx b/src/screens/Onboarding/Layout.tsx index e9c834c45f..6337cee09d 100644 --- a/src/screens/Onboarding/Layout.tsx +++ b/src/screens/Onboarding/Layout.tsx @@ -1,27 +1,29 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' -import { - atoms as a, - flatten, - native, - TextStyleProp, - useBreakpoints, - useTheme, - web, -} from '#/alf' -import {Button, ButtonIcon} from '#/components/Button' -import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' -import {createPortalGroup} from '#/components/Portal' -import {leading, P, Text} from '#/components/Typography' import {IS_DEV} from '#/env' import {isWeb} from '#/platform/detection' -import {Context} from '#/screens/Onboarding/state' import {useOnboardingDispatch} from '#/state/shell' + +import { + useTheme, + atoms as a, + useBreakpoints, + web, + native, + flatten, + TextStyleProp, +} from '#/alf' +import {P, leading, Text} from '#/components/Typography' +import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' +import {Button, ButtonIcon} from '#/components/Button' import {ScrollView} from '#/view/com/util/Views' +import {createPortalGroup} from '#/components/Portal' + +import {Context} from '#/screens/Onboarding/state' const COL_WIDTH = 500 diff --git a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx index 7ed193ed3d..1123f26755 100644 --- a/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx +++ b/src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx @@ -1,17 +1,18 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' import React from 'react' import {View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' +import {Image} from 'expo-image' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' -import {atoms as a, useTheme} from '#/alf' +import {useTheme, atoms as a} from '#/alf' import * as Toggle from '#/components/forms/Toggle' -import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' -import {RichText} from '#/components/RichText' +import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' import {Text} from '#/components/Typography' +import {RichText} from '#/components/RichText' + +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {FeedConfig} from '#/screens/Onboarding/StepAlgoFeeds' -import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' function PrimaryFeedCardInner({ feed, diff --git a/src/screens/Onboarding/StepAlgoFeeds/index.tsx b/src/screens/Onboarding/StepAlgoFeeds/index.tsx index 50436e7681..1a4e4c493b 100644 --- a/src/screens/Onboarding/StepAlgoFeeds/index.tsx +++ b/src/screens/Onboarding/StepAlgoFeeds/index.tsx @@ -1,25 +1,26 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {IS_PROD} from '#/env' import {atoms as a, tokens, useTheme} from '#/alf' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import * as Toggle from '#/components/forms/Toggle' -import {IconCircle} from '#/components/IconCircle' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' -import {IS_PROD} from '#/env' +import {Loader} from '#/components/Loader' +import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle' import {useAnalytics} from '#/lib/analytics/analytics' + +import {Context} from '#/screens/Onboarding/state' import { + Title, Description, OnboardingControls, - Title, } from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard' +import {IconCircle} from '#/components/IconCircle' export type FeedConfig = { default: boolean diff --git a/src/screens/Onboarding/StepFinished.tsx b/src/screens/Onboarding/StepFinished.tsx index f23b1ac7b4..944dcb96d2 100644 --- a/src/screens/Onboarding/StepFinished.tsx +++ b/src/screens/Onboarding/StepFinished.tsx @@ -1,32 +1,33 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {logger} from '#/logger' import {atoms as a, useTheme} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {IconCircle} from '#/components/IconCircle' +import {Button, ButtonText, ButtonIcon} from '#/components/Button' +import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' -import {News2_Stroke2_Corner0_Rounded as News} from '#/components/icons/News2' import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' +import {useOnboardingDispatch} from '#/state/shell' +import {Loader} from '#/components/Loader' +import {useSetSaveFeedsMutation} from '#/state/queries/preferences' +import {getAgent} from '#/state/session' import {useAnalytics} from '#/lib/analytics/analytics' -import {logger} from '#/logger' + +import {Context} from '#/screens/Onboarding/state' import { + Title, Description, OnboardingControls, - Title, } from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' +import {IconCircle} from '#/components/IconCircle' import { bulkWriteFollows, sortPrimaryAlgorithmFeeds, } from '#/screens/Onboarding/util' -import {useSetSaveFeedsMutation} from '#/state/queries/preferences' -import {getAgent} from '#/state/session' -import {useOnboardingDispatch} from '#/state/shell' export function StepFinished() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepFollowingFeed.tsx b/src/screens/Onboarding/StepFollowingFeed.tsx index 5b8c49264d..898afad134 100644 --- a/src/screens/Onboarding/StepFollowingFeed.tsx +++ b/src/screens/Onboarding/StepFollowingFeed.tsx @@ -1,27 +1,28 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {atoms as a} from '#/alf' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {Divider} from '#/components/Divider' +import * as Toggle from '#/components/forms/Toggle' +import {useAnalytics} from '#/lib/analytics/analytics' + +import {Context} from '#/screens/Onboarding/state' +import { + Title, + Description, + OnboardingControls, +} from '#/screens/Onboarding/Layout' import { usePreferencesQuery, useSetFeedViewPreferencesMutation, } from 'state/queries/preferences' - -import {atoms as a} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import {Divider} from '#/components/Divider' -import * as Toggle from '#/components/forms/Toggle' import {IconCircle} from '#/components/IconCircle' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline' -import {Text} from '#/components/Typography' -import {useAnalytics} from '#/lib/analytics/analytics' -import { - Description, - OnboardingControls, - Title, -} from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' export function StepFollowingFeed() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepInterests/InterestButton.tsx b/src/screens/Onboarding/StepInterests/InterestButton.tsx index 94685f3e18..cc692dafd8 100644 --- a/src/screens/Onboarding/StepInterests/InterestButton.tsx +++ b/src/screens/Onboarding/StepInterests/InterestButton.tsx @@ -1,10 +1,11 @@ import React from 'react' -import {TextStyle, View, ViewStyle} from 'react-native' +import {View, ViewStyle, TextStyle} from 'react-native' -import {atoms as a, native, useTheme} from '#/alf' +import {useTheme, atoms as a, native} from '#/alf' import * as Toggle from '#/components/forms/Toggle' import {Text} from '#/components/Typography' import {capitalize} from '#/lib/strings/capitalize' + import {Context} from '#/screens/Onboarding/state' export function InterestButton({interest}: {interest: string}) { diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx index 1b4ba30ff9..ea23b74f09 100644 --- a/src/screens/Onboarding/StepInterests/index.tsx +++ b/src/screens/Onboarding/StepInterests/index.tsx @@ -1,31 +1,32 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQuery} from '@tanstack/react-query' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {useQuery} from '@tanstack/react-query' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import * as Toggle from '#/components/forms/Toggle' -import {IconCircle} from '#/components/IconCircle' -import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise' -import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' -import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji' -import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' -import {Loader} from '#/components/Loader' -import {Text} from '#/components/Typography' -import {useAnalytics} from '#/lib/analytics/analytics' -import {capitalize} from '#/lib/strings/capitalize' import {logger} from '#/logger' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' +import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag' +import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSad} from '#/components/icons/Emoji' +import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as ArrowRotateCounterClockwise} from '#/components/icons/ArrowRotateCounterClockwise' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Loader} from '#/components/Loader' +import * as Toggle from '#/components/forms/Toggle' +import {getAgent} from '#/state/session' +import {useAnalytics} from '#/lib/analytics/analytics' +import {Text} from '#/components/Typography' +import {useOnboardingDispatch} from '#/state/shell' +import {capitalize} from '#/lib/strings/capitalize' + +import {Context, ApiResponseMap} from '#/screens/Onboarding/state' import { + Title, Description, OnboardingControls, - Title, } from '#/screens/Onboarding/Layout' -import {ApiResponseMap, Context} from '#/screens/Onboarding/state' import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton' -import {getAgent} from '#/state/session' -import {useOnboardingDispatch} from '#/state/shell' +import {IconCircle} from '#/components/IconCircle' export function StepInterests() { const {_} = useLingui() diff --git a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx index e97c251948..360025c02f 100644 --- a/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx +++ b/src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx @@ -1,18 +1,18 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {UseMutateFunction} from '@tanstack/react-query' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {UseMutateFunction} from '@tanstack/react-query' +import * as Toast from '#/view/com/util/Toast' import {atoms as a, useTheme} from '#/alf' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {logger} from '#/logger' +import {Text} from '#/components/Typography' import * as Toggle from '#/components/forms/Toggle' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' import * as Prompt from '#/components/Prompt' -import {Text} from '#/components/Typography' -import {logger} from '#/logger' import {isIOS} from '#/platform/detection' -import {usePreferencesQuery} from '#/state/queries/preferences' -import * as Toast from '#/view/com/util/Toast' function Card({children}: React.PropsWithChildren<{}>) { const t = useTheme() diff --git a/src/screens/Onboarding/StepModeration/ModerationOption.tsx b/src/screens/Onboarding/StepModeration/ModerationOption.tsx index 0ca317afc6..c61b520bab 100644 --- a/src/screens/Onboarding/StepModeration/ModerationOption.tsx +++ b/src/screens/Onboarding/StepModeration/ModerationOption.tsx @@ -1,19 +1,19 @@ -import {LabelPreference} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' -import Animated, {Easing, FadeIn, Layout} from 'react-native-reanimated' +import {LabelPreference} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import Animated, {Easing, Layout, FadeIn} from 'react-native-reanimated' -import {atoms as a, useTheme} from '#/alf' -import * as ToggleButton from '#/components/forms/ToggleButton' -import {Text} from '#/components/Typography' import { CONFIGURABLE_LABEL_GROUPS, ConfigurableLabelGroup, usePreferencesQuery, usePreferencesSetContentLabelMutation, } from '#/state/queries/preferences' +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import * as ToggleButton from '#/components/forms/ToggleButton' export function ModerationOption({ labelGroup, diff --git a/src/screens/Onboarding/StepModeration/index.tsx b/src/screens/Onboarding/StepModeration/index.tsx index d74eed03b0..543a5b1598 100644 --- a/src/screens/Onboarding/StepModeration/index.tsx +++ b/src/screens/Onboarding/StepModeration/index.tsx @@ -1,31 +1,32 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import Animated, {Easing, Layout} from 'react-native-reanimated' + +import {atoms as a} from '#/alf' import { configurableAdultLabelGroups, configurableOtherLabelGroups, usePreferencesSetAdultContentMutation, } from 'state/queries/preferences' - -import {atoms as a} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Divider} from '#/components/Divider' -import {IconCircle} from '#/components/IconCircle' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {usePreferencesQuery} from '#/state/queries/preferences' import {Loader} from '#/components/Loader' import {useAnalytics} from '#/lib/analytics/analytics' + import { Description, OnboardingControls, Title, } from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' -import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' import {ModerationOption} from '#/screens/Onboarding/StepModeration/ModerationOption' -import {usePreferencesQuery} from '#/state/queries/preferences' +import {AdultContentEnabledPref} from '#/screens/Onboarding/StepModeration/AdultContentEnabledPref' +import {Context} from '#/screens/Onboarding/state' +import {IconCircle} from '#/components/IconCircle' function AnimatedDivider() { return ( diff --git a/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx index 4f5595a29d..0670058920 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx @@ -1,14 +1,14 @@ -import {AppBskyActorDefs, moderateProfile} from '@atproto/api' import React from 'react' import {View, ViewStyle} from 'react-native' +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' -import {atoms as a, flatten, useTheme} from '#/alf' +import {useTheme, atoms as a, flatten} from '#/alf' +import {Text} from '#/components/Typography' import {useItemContext} from '#/components/forms/Toggle' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' -import {RichText} from '#/components/RichText' -import {Text} from '#/components/Typography' -import {useModerationOpts} from '#/state/queries/preferences' import {UserAvatar} from '#/view/com/util/UserAvatar' +import {useModerationOpts} from '#/state/queries/preferences' +import {RichText} from '#/components/RichText' export function SuggestedAccountCard({ profile, diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx index eb051ac85d..14faddc10f 100644 --- a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx +++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx @@ -1,32 +1,33 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import {atoms as a, useBreakpoints} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import * as Toggle from '#/components/forms/Toggle' -import {IconCircle} from '#/components/IconCircle' -import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {Loader} from '#/components/Loader' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {Text} from '#/components/Typography' +import {useProfilesQuery} from '#/state/queries/profile' +import {Loader} from '#/components/Loader' +import * as Toggle from '#/components/forms/Toggle' +import {useModerationOpts} from '#/state/queries/preferences' import {useAnalytics} from '#/lib/analytics/analytics' import {capitalize} from '#/lib/strings/capitalize' + +import {Context} from '#/screens/Onboarding/state' import { + Title, Description, OnboardingControls, - Title, } from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' import { SuggestedAccountCard, SuggestedAccountCardPlaceholder, } from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard' import {aggregateInterestItems} from '#/screens/Onboarding/util' -import {useModerationOpts} from '#/state/queries/preferences' -import {useProfilesQuery} from '#/state/queries/profile' +import {IconCircle} from '#/components/IconCircle' export function Inner({ profiles, diff --git a/src/screens/Onboarding/StepTopicalFeeds.tsx b/src/screens/Onboarding/StepTopicalFeeds.tsx index 88906b581e..636565e340 100644 --- a/src/screens/Onboarding/StepTopicalFeeds.tsx +++ b/src/screens/Onboarding/StepTopicalFeeds.tsx @@ -1,27 +1,28 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {IS_PROD_SERVICE} from 'lib/constants' import React from 'react' import {View} from 'react-native' -import {useSession} from 'state/session' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import {atoms as a} from '#/alf' -import {Button, ButtonIcon, ButtonText} from '#/components/Button' -import * as Toggle from '#/components/forms/Toggle' -import {IconCircle} from '#/components/IconCircle' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {ListMagnifyingGlass_Stroke2_Corner0_Rounded as ListMagnifyingGlass} from '#/components/icons/ListMagnifyingGlass' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import * as Toggle from '#/components/forms/Toggle' import {Loader} from '#/components/Loader' import {useAnalytics} from '#/lib/analytics/analytics' import {capitalize} from '#/lib/strings/capitalize' + +import {Context} from '#/screens/Onboarding/state' import { + Title, Description, OnboardingControls, - Title, } from '#/screens/Onboarding/Layout' -import {Context} from '#/screens/Onboarding/state' import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard' import {aggregateInterestItems} from '#/screens/Onboarding/util' +import {IconCircle} from '#/components/IconCircle' +import {IS_PROD_SERVICE} from 'lib/constants' +import {useSession} from 'state/session' export function StepTopicalFeeds() { const {_} = useLingui() diff --git a/src/screens/Onboarding/index.tsx b/src/screens/Onboarding/index.tsx index d171869b87..9e5029e87a 100644 --- a/src/screens/Onboarding/index.tsx +++ b/src/screens/Onboarding/index.tsx @@ -1,17 +1,18 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {Portal} from '#/components/Portal' -import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout' + import {Context, initialState, reducer} from '#/screens/Onboarding/state' -import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds' -import {StepFinished} from '#/screens/Onboarding/StepFinished' -import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed' +import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout' import {StepInterests} from '#/screens/Onboarding/StepInterests' -import {StepModeration} from '#/screens/Onboarding/StepModeration' import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts' +import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed' +import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds' import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds' +import {StepFinished} from '#/screens/Onboarding/StepFinished' +import {StepModeration} from '#/screens/Onboarding/StepModeration' export function Onboarding() { const {_} = useLingui() diff --git a/src/screens/Onboarding/util.ts b/src/screens/Onboarding/util.ts index ac2c50abdf..1a0b8d21bc 100644 --- a/src/screens/Onboarding/util.ts +++ b/src/screens/Onboarding/util.ts @@ -2,7 +2,6 @@ import {AppBskyGraphFollow, AppBskyGraphGetFollows} from '@atproto/api' import {until} from '#/lib/async/until' import {getAgent} from '#/state/session' - import {PRIMARY_FEEDS} from './StepAlgoFeeds' function shuffle(array: any) { diff --git a/src/state/cache/post-shadow.ts b/src/state/cache/post-shadow.ts index f9d8b19958..7cf72fae43 100644 --- a/src/state/cache/post-shadow.ts +++ b/src/state/cache/post-shadow.ts @@ -1,15 +1,13 @@ -import {AppBskyFeedDefs} from '@atproto/api' +import {useEffect, useState, useMemo} from 'react' import EventEmitter from 'eventemitter3' -import {queryClient} from 'lib/react-query' -import {useEffect, useMemo, useState} from 'react' - +import {AppBskyFeedDefs} from '@atproto/api' import {batchedUpdates} from '#/lib/batchedUpdates' - +import {Shadow, castAsShadow} from './types' import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from '../queries/notifications/feed' import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from '../queries/post-feed' import {findAllPostsInQueryData as findAllPostsInThreadQueryData} from '../queries/post-thread' import {findAllPostsInQueryData as findAllPostsInSearchQueryData} from '../queries/search-posts' -import {castAsShadow, Shadow} from './types' +import {queryClient} from 'lib/react-query' export type {Shadow} from './types' export interface PostShadow { diff --git a/src/state/cache/profile-shadow.ts b/src/state/cache/profile-shadow.ts index f688a7b4f7..34fe5995d3 100644 --- a/src/state/cache/profile-shadow.ts +++ b/src/state/cache/profile-shadow.ts @@ -1,11 +1,7 @@ -import {AppBskyActorDefs} from '@atproto/api' +import {useEffect, useState, useMemo} from 'react' import EventEmitter from 'eventemitter3' -import {queryClient} from 'lib/react-query' -import {useEffect, useMemo, useState} from 'react' - +import {AppBskyActorDefs} from '@atproto/api' import {batchedUpdates} from '#/lib/batchedUpdates' - -import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search' import {findAllProfilesInQueryData as findAllProfilesInListMembersQueryData} from '../queries/list-members' import {findAllProfilesInQueryData as findAllProfilesInMyBlockedAccountsQueryData} from '../queries/my-blocked-accounts' import {findAllProfilesInQueryData as findAllProfilesInMyMutedAccountsQueryData} from '../queries/my-muted-accounts' @@ -15,7 +11,9 @@ import {findAllProfilesInQueryData as findAllProfilesInProfileQueryData} from '. import {findAllProfilesInQueryData as findAllProfilesInProfileFollowersQueryData} from '../queries/profile-followers' import {findAllProfilesInQueryData as findAllProfilesInProfileFollowsQueryData} from '../queries/profile-follows' import {findAllProfilesInQueryData as findAllProfilesInSuggestedFollowsQueryData} from '../queries/suggested-follows' -import {castAsShadow, Shadow} from './types' +import {findAllProfilesInQueryData as findAllProfilesInActorSearchQueryData} from '../queries/actor-search' +import {Shadow, castAsShadow} from './types' +import {queryClient} from 'lib/react-query' export type {Shadow} from './types' export interface ProfileShadow { diff --git a/src/state/dialogs/index.tsx b/src/state/dialogs/index.tsx index 279e02a49c..951105a509 100644 --- a/src/state/dialogs/index.tsx +++ b/src/state/dialogs/index.tsx @@ -1,6 +1,5 @@ import React from 'react' import {SharedValue, useSharedValue} from 'react-native-reanimated' - import {DialogControlRefProps} from '#/components/Dialog' import {Provider as GlobalDialogsProvider} from '#/components/dialogs/Context' diff --git a/src/state/invites.tsx b/src/state/invites.tsx index 9dbbefe2ff..6a0d1b5900 100644 --- a/src/state/invites.tsx +++ b/src/state/invites.tsx @@ -1,5 +1,4 @@ import React from 'react' - import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['invites'] diff --git a/src/state/lightbox.tsx b/src/state/lightbox.tsx index 4a4f2807dc..e3bddaee02 100644 --- a/src/state/lightbox.tsx +++ b/src/state/lightbox.tsx @@ -1,6 +1,5 @@ -import {AppBskyActorDefs} from '@atproto/api' import React from 'react' - +import {AppBskyActorDefs} from '@atproto/api' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' interface Lightbox { diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index b9af874933..691add0050 100644 --- a/src/state/modals/index.tsx +++ b/src/state/modals/index.tsx @@ -1,13 +1,12 @@ -import {AppBskyActorDefs, AppBskyGraphDefs, ModerationUI} from '@atproto/api' import React from 'react' +import {AppBskyActorDefs, AppBskyGraphDefs, ModerationUI} from '@atproto/api' import {StyleProp, ViewStyle} from 'react-native' import {Image as RNImage} from 'react-native-image-crop-picker' +import {ImageModel} from '#/state/models/media/image' +import {GalleryModel} from '#/state/models/media/gallery' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {EmbedPlayerSource} from '#/lib/strings/embed-player' -import {GalleryModel} from '#/state/models/media/gallery' -import {ImageModel} from '#/state/models/media/image' - import {ThreadgateSetting} from '../queries/threadgate' export interface ConfirmModal { diff --git a/src/state/models/media/gallery.ts b/src/state/models/media/gallery.ts index 52fb623b01..9c8c13010d 100644 --- a/src/state/models/media/gallery.ts +++ b/src/state/models/media/gallery.ts @@ -1,9 +1,8 @@ -import {getImageDim} from 'lib/media/manip' -import {openPicker} from 'lib/media/picker' import {makeAutoObservable, runInAction} from 'mobx' -import {Image as RNImage} from 'react-native-image-crop-picker' - import {ImageModel} from './image' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {openPicker} from 'lib/media/picker' +import {getImageDim} from 'lib/media/manip' interface InitialImageUri { uri: string diff --git a/src/state/models/media/image.e2e.ts b/src/state/models/media/image.e2e.ts index d2c65bdf73..ccabd50475 100644 --- a/src/state/models/media/image.e2e.ts +++ b/src/state/models/media/image.e2e.ts @@ -1,9 +1,9 @@ -import {ActionCrop} from 'expo-image-manipulator' -import {POST_IMG_MAX} from 'lib/constants' -import {Dimensions} from 'lib/media/types' -import {makeAutoObservable} from 'mobx' -import {Position} from 'react-avatar-editor' import {Image as RNImage} from 'react-native-image-crop-picker' +import {makeAutoObservable} from 'mobx' +import {POST_IMG_MAX} from 'lib/constants' +import {ActionCrop} from 'expo-image-manipulator' +import {Position} from 'react-avatar-editor' +import {Dimensions} from 'lib/media/types' export interface ImageManipulationAttributes { aspectRatio?: '4:3' | '1:1' | '3:4' | 'None' diff --git a/src/state/models/media/image.ts b/src/state/models/media/image.ts index 31f2bba66d..5c547c148f 100644 --- a/src/state/models/media/image.ts +++ b/src/state/models/media/image.ts @@ -1,14 +1,13 @@ -import * as ImageManipulator from 'expo-image-manipulator' -import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator' -import {POST_IMG_MAX} from 'lib/constants' -import {openCropper} from 'lib/media/picker' -import {Dimensions} from 'lib/media/types' -import {getDataUriSize} from 'lib/media/util' -import {makeAutoObservable, runInAction} from 'mobx' -import {isIOS} from 'platform/detection' -import {Position} from 'react-avatar-editor' import {Image as RNImage} from 'react-native-image-crop-picker' - +import {makeAutoObservable, runInAction} from 'mobx' +import {POST_IMG_MAX} from 'lib/constants' +import * as ImageManipulator from 'expo-image-manipulator' +import {getDataUriSize} from 'lib/media/util' +import {openCropper} from 'lib/media/picker' +import {ActionCrop, FlipType, SaveFormat} from 'expo-image-manipulator' +import {Position} from 'react-avatar-editor' +import {Dimensions} from 'lib/media/types' +import {isIOS} from 'platform/detection' import {logger} from '#/logger' export interface ImageManipulationAttributes { diff --git a/src/state/muted-threads.tsx b/src/state/muted-threads.tsx index eeb33e9483..84a717eb79 100644 --- a/src/state/muted-threads.tsx +++ b/src/state/muted-threads.tsx @@ -1,7 +1,6 @@ import React from 'react' - -import {track} from '#/lib/analytics/analytics' import * as persisted from '#/state/persisted' +import {track} from '#/lib/analytics/analytics' type StateContext = persisted.Schema['mutedThreads'] type ToggleContext = (uri: string) => boolean diff --git a/src/state/persisted/__tests__/index.test.ts b/src/state/persisted/__tests__/index.test.ts index 6832d274af..90c5e0e4ec 100644 --- a/src/state/persisted/__tests__/index.test.ts +++ b/src/state/persisted/__tests__/index.test.ts @@ -1,10 +1,10 @@ -import {afterEach, expect, jest, test} from '@jest/globals' +import {jest, expect, test, afterEach} from '@jest/globals' import AsyncStorage from '@react-native-async-storage/async-storage' -import * as persisted from '#/state/persisted' -import {migrate} from '#/state/persisted/legacy' import {defaults} from '#/state/persisted/schema' +import {migrate} from '#/state/persisted/legacy' import * as store from '#/state/persisted/store' +import * as persisted from '#/state/persisted' const write = jest.mocked(store.write) const read = jest.mocked(store.read) diff --git a/src/state/persisted/__tests__/migrate.test.ts b/src/state/persisted/__tests__/migrate.test.ts index 61250bd884..97767e2732 100644 --- a/src/state/persisted/__tests__/migrate.test.ts +++ b/src/state/persisted/__tests__/migrate.test.ts @@ -1,11 +1,11 @@ -import {afterEach, expect, jest, test} from '@jest/globals' +import {jest, expect, test, afterEach} from '@jest/globals' import AsyncStorage from '@react-native-async-storage/async-storage' +import {defaults, schema} from '#/state/persisted/schema' +import {transform, migrate} from '#/state/persisted/legacy' +import * as store from '#/state/persisted/store' import {logger} from '#/logger' import * as fixtures from '#/state/persisted/__tests__/fixtures' -import {migrate, transform} from '#/state/persisted/legacy' -import {defaults, schema} from '#/state/persisted/schema' -import * as store from '#/state/persisted/store' const write = jest.mocked(store.write) const read = jest.mocked(store.read) diff --git a/src/state/persisted/__tests__/schema.test.ts b/src/state/persisted/__tests__/schema.test.ts index 8bea28ec01..c78a2c27cb 100644 --- a/src/state/persisted/__tests__/schema.test.ts +++ b/src/state/persisted/__tests__/schema.test.ts @@ -1,8 +1,8 @@ import {expect, test} from '@jest/globals' -import * as fixtures from '#/state/persisted/__tests__/fixtures' import {transform} from '#/state/persisted/legacy' import {defaults, schema} from '#/state/persisted/schema' +import * as fixtures from '#/state/persisted/__tests__/fixtures' test('defaults', () => { expect(() => schema.parse(defaults)).not.toThrow() diff --git a/src/state/persisted/index.ts b/src/state/persisted/index.ts index 4e0aafd822..f57172d2fe 100644 --- a/src/state/persisted/index.ts +++ b/src/state/persisted/index.ts @@ -1,12 +1,11 @@ import EventEmitter from 'eventemitter3' - -import BroadcastChannel from '#/lib/broadcast' import {logger} from '#/logger' -import {migrate} from '#/state/persisted/legacy' import {defaults, Schema} from '#/state/persisted/schema' +import {migrate} from '#/state/persisted/legacy' import * as store from '#/state/persisted/store' +import BroadcastChannel from '#/lib/broadcast' -export type {PersistedAccount, Schema} from '#/state/persisted/schema' +export type {Schema, PersistedAccount} from '#/state/persisted/schema' export {defaults} from '#/state/persisted/schema' const broadcast = new BroadcastChannel('BSKY_BROADCAST_CHANNEL') diff --git a/src/state/persisted/legacy.ts b/src/state/persisted/legacy.ts index 9918ac4629..fd94a96a24 100644 --- a/src/state/persisted/legacy.ts +++ b/src/state/persisted/legacy.ts @@ -2,7 +2,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage' import {logger} from '#/logger' import {defaults, Schema, schema} from '#/state/persisted/schema' -import {read, write} from '#/state/persisted/store' +import {write, read} from '#/state/persisted/store' /** * The shape of the serialized data from our legacy Mobx store. diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 14328748eb..0aefaa4744 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -1,5 +1,4 @@ import {z} from 'zod' - import {deviceLocales} from '#/platform/detection' const externalEmbedOptions = ['show', 'hide'] as const diff --git a/src/state/persisted/store.ts b/src/state/persisted/store.ts index 0971b5d717..bb7fbed890 100644 --- a/src/state/persisted/store.ts +++ b/src/state/persisted/store.ts @@ -1,7 +1,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage' -import {logger} from '#/logger' import {Schema, schema} from '#/state/persisted/schema' +import {logger} from '#/logger' const BSKY_STORAGE = 'BSKY_STORAGE' diff --git a/src/state/preferences/alt-text-required.tsx b/src/state/preferences/alt-text-required.tsx index 642e790fbc..81de9e0060 100644 --- a/src/state/preferences/alt-text-required.tsx +++ b/src/state/preferences/alt-text-required.tsx @@ -1,5 +1,4 @@ import React from 'react' - import * as persisted from '#/state/persisted' type StateContext = persisted.Schema['requireAltTextEnabled'] diff --git a/src/state/preferences/external-embeds-prefs.tsx b/src/state/preferences/external-embeds-prefs.tsx index 1c6429adca..0f6385fe8e 100644 --- a/src/state/preferences/external-embeds-prefs.tsx +++ b/src/state/preferences/external-embeds-prefs.tsx @@ -1,7 +1,6 @@ -import {EmbedPlayerSource} from 'lib/strings/embed-player' import React from 'react' - import * as persisted from '#/state/persisted' +import {EmbedPlayerSource} from 'lib/strings/embed-player' type StateContext = persisted.Schema['externalEmbeds'] type SetContext = (source: EmbedPlayerSource, value: 'show' | 'hide') => void diff --git a/src/state/preferences/feed-tuners.tsx b/src/state/preferences/feed-tuners.tsx index 48131707f0..c4954d20a8 100644 --- a/src/state/preferences/feed-tuners.tsx +++ b/src/state/preferences/feed-tuners.tsx @@ -1,11 +1,9 @@ import {useMemo} from 'react' - import {FeedTuner} from '#/lib/api/feed-manip' - import {FeedDescriptor} from '../queries/post-feed' +import {useLanguagePrefs} from './languages' import {usePreferencesQuery} from '../queries/preferences' import {useSession} from '../session' -import {useLanguagePrefs} from './languages' export function useFeedTuners(feedDesc: FeedDescriptor) { const langPrefs = useLanguagePrefs() diff --git a/src/state/preferences/hidden-posts.tsx b/src/state/preferences/hidden-posts.tsx index 2c6a373e15..11119ce758 100644 --- a/src/state/preferences/hidden-posts.tsx +++ b/src/state/preferences/hidden-posts.tsx @@ -1,5 +1,4 @@ import React from 'react' - import * as persisted from '#/state/persisted' type SetStateCb = ( diff --git a/src/state/preferences/in-app-browser.tsx b/src/state/preferences/in-app-browser.tsx index c0eb541bb3..2398f1f812 100644 --- a/src/state/preferences/in-app-browser.tsx +++ b/src/state/preferences/in-app-browser.tsx @@ -1,17 +1,15 @@ +import React from 'react' +import * as persisted from '#/state/persisted' +import {Linking} from 'react-native' import * as WebBrowser from 'expo-web-browser' +import {isNative} from '#/platform/detection' +import {useModalControls} from '../modals' import {usePalette} from 'lib/hooks/usePalette' import { - createBskyAppAbsoluteUrl, isBskyRSSUrl, isRelativeUrl, + createBskyAppAbsoluteUrl, } from 'lib/strings/url-helpers' -import React from 'react' -import {Linking} from 'react-native' - -import {isNative} from '#/platform/detection' -import * as persisted from '#/state/persisted' - -import {useModalControls} from '../modals' type StateContext = persisted.Schema['useInAppBrowser'] type SetContext = (v: persisted.Schema['useInAppBrowser']) => void diff --git a/src/state/preferences/index.tsx b/src/state/preferences/index.tsx index 6c045326d9..a442b763ad 100644 --- a/src/state/preferences/index.tsx +++ b/src/state/preferences/index.tsx @@ -1,11 +1,11 @@ import React from 'react' - +import {Provider as LanguagesProvider} from './languages' import {Provider as AltTextRequiredProvider} from '../preferences/alt-text-required' import {Provider as HiddenPostsProvider} from '../preferences/hidden-posts' import {Provider as ExternalEmbedsProvider} from './external-embeds-prefs' import {Provider as InAppBrowserProvider} from './in-app-browser' -import {Provider as LanguagesProvider} from './languages' +export {useLanguagePrefs, useLanguagePrefsApi} from './languages' export { useRequireAltTextEnabled, useSetRequireAltTextEnabled, @@ -15,7 +15,6 @@ export { useSetExternalEmbedPref, } from './external-embeds-prefs' export * from './hidden-posts' -export {useLanguagePrefs, useLanguagePrefsApi} from './languages' export function Provider({children}: React.PropsWithChildren<{}>) { return ( diff --git a/src/state/preferences/languages.tsx b/src/state/preferences/languages.tsx index 2905a465e6..df774c05e2 100644 --- a/src/state/preferences/languages.tsx +++ b/src/state/preferences/languages.tsx @@ -1,7 +1,6 @@ import React from 'react' - -import {AppLanguage} from '#/locale/languages' import * as persisted from '#/state/persisted' +import {AppLanguage} from '#/locale/languages' type SetStateCb = ( s: persisted.Schema['languagePrefs'], diff --git a/src/state/queries/actor-autocomplete.ts b/src/state/queries/actor-autocomplete.ts index 9fffe3bd73..3159ad7aaf 100644 --- a/src/state/queries/actor-autocomplete.ts +++ b/src/state/queries/actor-autocomplete.ts @@ -1,18 +1,17 @@ -import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' -import {useQuery, useQueryClient} from '@tanstack/react-query' import React from 'react' +import {AppBskyActorDefs, ModerationOpts, moderateProfile} from '@atproto/api' +import {useQuery, useQueryClient} from '@tanstack/react-query' -import {isInvalidHandle} from '#/lib/strings/handles' import {logger} from '#/logger' -import {STALE} from '#/state/queries' -import {useMyFollowsQuery} from '#/state/queries/my-follows' import {getAgent} from '#/state/session' - +import {useMyFollowsQuery} from '#/state/queries/my-follows' +import {STALE} from '#/state/queries' import { DEFAULT_LOGGED_OUT_PREFERENCES, getModerationOpts, useModerationOpts, } from './preferences' +import {isInvalidHandle} from '#/lib/strings/handles' const DEFAULT_MOD_OPTS = getModerationOpts({ userDid: '', diff --git a/src/state/queries/actor-search.ts b/src/state/queries/actor-search.ts index 9f85ad613d..f72511548c 100644 --- a/src/state/queries/actor-search.ts +++ b/src/state/queries/actor-search.ts @@ -1,8 +1,8 @@ import {AppBskyActorDefs} from '@atproto/api' import {QueryClient, useQuery} from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' export const RQKEY = (prefix: string) => ['actor-search', prefix] diff --git a/src/state/queries/app-passwords.ts b/src/state/queries/app-passwords.ts index 91c01c1f3c..014244f01c 100644 --- a/src/state/queries/app-passwords.ts +++ b/src/state/queries/app-passwords.ts @@ -1,8 +1,7 @@ import {ComAtprotoServerCreateAppPassword} from '@atproto/api' -import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' +import {useQuery, useQueryClient, useMutation} from '@tanstack/react-query' import {STALE} from '#/state/queries' - import {getAgent} from '../session' export const RQKEY = () => ['app-passwords'] diff --git a/src/state/queries/feed.ts b/src/state/queries/feed.ts index 53ce885a55..1fa92c291f 100644 --- a/src/state/queries/feed.ts +++ b/src/state/queries/feed.ts @@ -1,24 +1,24 @@ import { + useQuery, + useInfiniteQuery, + InfiniteData, + QueryKey, + useMutation, +} from '@tanstack/react-query' +import { + AtUri, + RichText, AppBskyFeedDefs, AppBskyGraphDefs, AppBskyUnspeccedGetPopularFeedGenerators, - AtUri, - RichText, } from '@atproto/api' -import { - InfiniteData, - QueryKey, - useInfiniteQuery, - useMutation, - useQuery, -} from '@tanstack/react-query' +import {router} from '#/routes' import {sanitizeDisplayName} from '#/lib/strings/display-names' import {sanitizeHandle} from '#/lib/strings/handles' -import {router} from '#/routes' -import {STALE} from '#/state/queries' -import {usePreferencesQuery} from '#/state/queries/preferences' import {getAgent} from '#/state/session' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {STALE} from '#/state/queries' export type FeedSourceFeedInfo = { type: 'feed' diff --git a/src/state/queries/handle.ts b/src/state/queries/handle.ts index 77d757d830..d7c4116999 100644 --- a/src/state/queries/handle.ts +++ b/src/state/queries/handle.ts @@ -1,8 +1,8 @@ -import {useMutation, useQueryClient} from '@tanstack/react-query' import React from 'react' +import {useQueryClient, useMutation} from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' const fetchHandleQueryKey = (handleOrDid: string) => ['handle', handleOrDid] const fetchDidQueryKey = (handleOrDid: string) => ['did', handleOrDid] diff --git a/src/state/queries/invites.ts b/src/state/queries/invites.ts index 9ea49ebcae..9ae9c707f4 100644 --- a/src/state/queries/invites.ts +++ b/src/state/queries/invites.ts @@ -1,9 +1,9 @@ import {ComAtprotoServerDefs} from '@atproto/api' import {useQuery} from '@tanstack/react-query' -import {cleanError} from '#/lib/strings/errors' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' +import {cleanError} from '#/lib/strings/errors' function isInviteAvailable(invite: ComAtprotoServerDefs.InviteCode): boolean { return invite.available - invite.uses.length > 0 && !invite.disabled diff --git a/src/state/queries/list-members.ts b/src/state/queries/list-members.ts index 8bce0e4185..d84089c90d 100644 --- a/src/state/queries/list-members.ts +++ b/src/state/queries/list-members.ts @@ -1,13 +1,13 @@ import {AppBskyActorDefs, AppBskyGraphGetList} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' const PAGE_SIZE = 30 type RQPageParam = string | undefined diff --git a/src/state/queries/list-memberships.ts b/src/state/queries/list-memberships.ts index 9df50c403f..6cae3fa2e8 100644 --- a/src/state/queries/list-memberships.ts +++ b/src/state/queries/list-memberships.ts @@ -17,9 +17,9 @@ import {AtUri} from '@atproto/api' import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' -import {STALE} from '#/state/queries' +import {useSession, getAgent} from '#/state/session' import {RQKEY as LIST_MEMBERS_RQKEY} from '#/state/queries/list-members' -import {getAgent, useSession} from '#/state/session' +import {STALE} from '#/state/queries' // sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records const SANITY_PAGE_LIMIT = 1000 diff --git a/src/state/queries/list.ts b/src/state/queries/list.ts index 1bdf96e17b..845658a279 100644 --- a/src/state/queries/list.ts +++ b/src/state/queries/list.ts @@ -1,22 +1,20 @@ import { - AppBskyGraphDefs, + AtUri, AppBskyGraphGetList, AppBskyGraphList, - AtUri, + AppBskyGraphDefs, Facet, } from '@atproto/api' -import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' -import chunk from 'lodash.chunk' import {Image as RNImage} from 'react-native-image-crop-picker' - +import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' +import chunk from 'lodash.chunk' +import {useSession, getAgent} from '../session' +import {invalidate as invalidateMyLists} from './my-lists' +import {RQKEY as PROFILE_LISTS_RQKEY} from './profile-lists' import {uploadBlob} from '#/lib/api' import {until} from '#/lib/async/until' import {STALE} from '#/state/queries' -import {getAgent, useSession} from '../session' -import {invalidate as invalidateMyLists} from './my-lists' -import {RQKEY as PROFILE_LISTS_RQKEY} from './profile-lists' - export const RQKEY = (uri: string) => ['list', uri] export function useListQuery(uri?: string) { diff --git a/src/state/queries/my-blocked-accounts.ts b/src/state/queries/my-blocked-accounts.ts index 6e981f1e24..badaaec34d 100644 --- a/src/state/queries/my-blocked-accounts.ts +++ b/src/state/queries/my-blocked-accounts.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetBlocks} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/my-follows.ts b/src/state/queries/my-follows.ts index e66b642e2f..f95c3f5a7c 100644 --- a/src/state/queries/my-follows.ts +++ b/src/state/queries/my-follows.ts @@ -1,10 +1,8 @@ import {AppBskyActorDefs} from '@atproto/api' import {useQuery} from '@tanstack/react-query' - +import {useSession, getAgent} from '../session' import {STALE} from '#/state/queries' -import {getAgent, useSession} from '../session' - // sanity limit is SANITY_PAGE_LIMIT*PAGE_SIZE total records const SANITY_PAGE_LIMIT = 1000 const PAGE_SIZE = 100 diff --git a/src/state/queries/my-lists.ts b/src/state/queries/my-lists.ts index 5cf3dfca03..d53e130327 100644 --- a/src/state/queries/my-lists.ts +++ b/src/state/queries/my-lists.ts @@ -1,9 +1,9 @@ import {AppBskyGraphDefs} from '@atproto/api' -import {QueryClient, useQuery} from '@tanstack/react-query' +import {useQuery, QueryClient} from '@tanstack/react-query' import {accumulate} from '#/lib/async/accumulate' +import {useSession, getAgent} from '#/state/session' import {STALE} from '#/state/queries' -import {getAgent, useSession} from '#/state/session' export type MyListsFilter = | 'all' diff --git a/src/state/queries/my-muted-accounts.ts b/src/state/queries/my-muted-accounts.ts index a397887d85..8929e04d3e 100644 --- a/src/state/queries/my-muted-accounts.ts +++ b/src/state/queries/my-muted-accounts.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetMutes} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/notifications/feed.ts b/src/state/queries/notifications/feed.ts index dbc23fcbdd..405d054d44 100644 --- a/src/state/queries/notifications/feed.ts +++ b/src/state/queries/notifications/feed.ts @@ -16,26 +16,24 @@ * 3. Don't call this query's `refetch()` if you're trying to sync latest; call `checkUnread()` instead. */ +import {useEffect, useRef} from 'react' import {AppBskyFeedDefs} from '@atproto/api' import { - InfiniteData, - QueryClient, - QueryKey, useInfiniteQuery, + InfiniteData, + QueryKey, useQueryClient, + QueryClient, } from '@tanstack/react-query' -import {useEffect, useRef} from 'react' - -import {useMutedThreads} from '#/state/muted-threads' - -import {STALE} from '..' import {useModerationOpts} from '../preferences' -import {embedViewRecordToPostView, getEmbeddedPost} from '../util' -import {FeedPage} from './types' import {useUnreadNotificationsApi} from './unread' import {fetchPage} from './util' +import {FeedPage} from './types' +import {useMutedThreads} from '#/state/muted-threads' +import {STALE} from '..' +import {embedViewRecordToPostView, getEmbeddedPost} from '../util' -export type {FeedNotification, FeedPage, NotificationType} from './types' +export type {NotificationType, FeedNotification, FeedPage} from './types' const PAGE_SIZE = 30 diff --git a/src/state/queries/notifications/types.ts b/src/state/queries/notifications/types.ts index db1cf878f2..812236cf06 100644 --- a/src/state/queries/notifications/types.ts +++ b/src/state/queries/notifications/types.ts @@ -1,6 +1,6 @@ import { - AppBskyFeedDefs, AppBskyNotificationListNotifications, + AppBskyFeedDefs, } from '@atproto/api' export type NotificationType = diff --git a/src/state/queries/notifications/unread.tsx b/src/state/queries/notifications/unread.tsx index 2f55872eb9..e7a0631ecf 100644 --- a/src/state/queries/notifications/unread.tsx +++ b/src/state/queries/notifications/unread.tsx @@ -2,22 +2,20 @@ * A kind of companion API to ./feed.ts. See that file for more info. */ -import {useQueryClient} from '@tanstack/react-query' -import * as Notifications from 'expo-notifications' import React from 'react' -import {AppState} from 'react-native' - +import * as Notifications from 'expo-notifications' +import {useQueryClient} from '@tanstack/react-query' import BroadcastChannel from '#/lib/broadcast' -import {logger} from '#/logger' +import {useSession, getAgent} from '#/state/session' +import {useModerationOpts} from '../preferences' +import {fetchPage} from './util' +import {CachedFeedPage, FeedPage} from './types' import {isNative} from '#/platform/detection' import {useMutedThreads} from '#/state/muted-threads' -import {getAgent, useSession} from '#/state/session' - -import {useModerationOpts} from '../preferences' -import {truncateAndInvalidate} from '../util' import {RQKEY as RQKEY_NOTIFS} from './feed' -import {CachedFeedPage, FeedPage} from './types' -import {fetchPage} from './util' +import {logger} from '#/logger' +import {truncateAndInvalidate} from '../util' +import {AppState} from 'react-native' const UPDATE_INTERVAL = 30 * 1e3 // 30sec diff --git a/src/state/queries/notifications/util.ts b/src/state/queries/notifications/util.ts index f019c89660..626d3e9118 100644 --- a/src/state/queries/notifications/util.ts +++ b/src/state/queries/notifications/util.ts @@ -1,21 +1,19 @@ import { - AppBskyEmbedRecord, + AppBskyNotificationListNotifications, + ModerationOpts, + moderateProfile, AppBskyFeedDefs, - AppBskyFeedLike, AppBskyFeedPost, AppBskyFeedRepost, - AppBskyNotificationListNotifications, - moderateProfile, - ModerationOpts, + AppBskyFeedLike, + AppBskyEmbedRecord, } from '@atproto/api' -import {QueryClient} from '@tanstack/react-query' -import chunk from 'lodash.chunk' - import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' - +import chunk from 'lodash.chunk' +import {QueryClient} from '@tanstack/react-query' import {getAgent} from '../../session' import {precacheProfile} from '../profile' -import {FeedNotification, FeedPage, NotificationType} from './types' +import {NotificationType, FeedNotification, FeedPage} from './types' const GROUPABLE_REASONS = ['like', 'repost', 'follow'] const MS_1HR = 1e3 * 60 * 60 diff --git a/src/state/queries/post-feed.ts b/src/state/queries/post-feed.ts index db6debc5ad..c295ffcb03 100644 --- a/src/state/queries/post-feed.ts +++ b/src/state/queries/post-feed.ts @@ -1,3 +1,5 @@ +import React, {useCallback, useEffect, useRef} from 'react' +import {AppState} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -5,38 +7,34 @@ import { PostModeration, } from '@atproto/api' import { - InfiniteData, - QueryClient, - QueryKey, useInfiniteQuery, + InfiniteData, + QueryKey, + QueryClient, useQueryClient, } from '@tanstack/react-query' -import {AuthorFeedAPI} from 'lib/api/feed/author' -import {CustomFeedAPI} from 'lib/api/feed/custom' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' +import {useFeedTuners} from '../preferences/feed-tuners' +import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip' +import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types' import {FollowingFeedAPI} from 'lib/api/feed/following' +import {AuthorFeedAPI} from 'lib/api/feed/author' import {LikesFeedAPI} from 'lib/api/feed/likes' +import {CustomFeedAPI} from 'lib/api/feed/custom' import {ListFeedAPI} from 'lib/api/feed/list' import {MergeFeedAPI} from 'lib/api/feed/merge' -import {FeedAPI, ReasonFeedSource} from 'lib/api/feed/types' -import {FeedTuner, FeedTunerFn, NoopFeedTuner} from 'lib/api/feed-manip' -import {BSKY_FEED_OWNER_DIDS} from 'lib/constants' -import {queryClient} from 'lib/react-query' -import React, {useCallback, useEffect, useRef} from 'react' -import {AppState} from 'react-native' - import {HomeFeedAPI} from '#/lib/api/feed/home' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {logger} from '#/logger' import {STALE} from '#/state/queries' +import {precacheFeedPostProfiles} from './profile' +import {getAgent} from '#/state/session' import {DEFAULT_LOGGED_OUT_PREFERENCES} from '#/state/queries/preferences/const' import {getModerationOpts} from '#/state/queries/preferences/moderation' -import {getAgent} from '#/state/session' import {KnownError} from '#/view/com/posts/FeedErrorMessage' - -import {useFeedTuners} from '../preferences/feed-tuners' -import {useModerationOpts} from './preferences' -import {precacheFeedPostProfiles} from './profile' import {embedViewRecordToPostView, getEmbeddedPost} from './util' +import {useModerationOpts} from './preferences' +import {queryClient} from 'lib/react-query' +import {BSKY_FEED_OWNER_DIDS} from 'lib/constants' type ActorDid = string type AuthorFilter = diff --git a/src/state/queries/post-liked-by.ts b/src/state/queries/post-liked-by.ts index b48b0e92e0..2cde07f280 100644 --- a/src/state/queries/post-liked-by.ts +++ b/src/state/queries/post-liked-by.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyFeedGetLikes} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/post-reposted-by.ts b/src/state/queries/post-reposted-by.ts index c33d1b2bb7..db5fa65140 100644 --- a/src/state/queries/post-reposted-by.ts +++ b/src/state/queries/post-reposted-by.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyFeedGetRepostedBy} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/post-thread.ts b/src/state/queries/post-thread.ts index e46b770da2..26d40599c6 100644 --- a/src/state/queries/post-thread.ts +++ b/src/state/queries/post-thread.ts @@ -1,16 +1,15 @@ import { - AppBskyEmbedRecord, AppBskyFeedDefs, - AppBskyFeedGetPostThread, AppBskyFeedPost, + AppBskyFeedGetPostThread, + AppBskyEmbedRecord, } from '@atproto/api' -import {QueryClient, useQuery, useQueryClient} from '@tanstack/react-query' +import {useQuery, useQueryClient, QueryClient} from '@tanstack/react-query' -import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' import {getAgent} from '#/state/session' - -import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from './notifications/feed' +import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' import {findAllPostsInQueryData as findAllPostsInFeedQueryData} from './post-feed' +import {findAllPostsInQueryData as findAllPostsInNotifsQueryData} from './notifications/feed' import {precacheThreadPostProfiles} from './profile' import {getEmbeddedPost} from './util' diff --git a/src/state/queries/post.ts b/src/state/queries/post.ts index 1179eb22b7..eb59f7da40 100644 --- a/src/state/queries/post.ts +++ b/src/state/queries/post.ts @@ -1,12 +1,11 @@ -import {AppBskyFeedDefs, AtUri} from '@atproto/api' -import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' import {useCallback} from 'react' - -import {track} from '#/lib/analytics/analytics' -import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' -import {updatePostShadow} from '#/state/cache/post-shadow' +import {AppBskyFeedDefs, AtUri} from '@atproto/api' +import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' import {Shadow} from '#/state/cache/types' import {getAgent} from '#/state/session' +import {updatePostShadow} from '#/state/cache/post-shadow' +import {track} from '#/lib/analytics/analytics' +import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' export const RQKEY = (postUri: string) => ['post', postUri] diff --git a/src/state/queries/preferences/const.ts b/src/state/queries/preferences/const.ts index 97e54a8ce8..53c9e482af 100644 --- a/src/state/queries/preferences/const.ts +++ b/src/state/queries/preferences/const.ts @@ -1,8 +1,8 @@ -import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' import { - ThreadViewPreferences, UsePreferencesQueryResponse, + ThreadViewPreferences, } from '#/state/queries/preferences/types' +import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' export const DEFAULT_HOME_FEED_PREFS: UsePreferencesQueryResponse['feedViewPrefs'] = { diff --git a/src/state/queries/preferences/index.ts b/src/state/queries/preferences/index.ts index 88b315f959..37ef10ae0c 100644 --- a/src/state/queries/preferences/index.ts +++ b/src/state/queries/preferences/index.ts @@ -1,33 +1,33 @@ -import { - AppBskyActorDefs, - BskyFeedViewPreference, - LabelPreference, -} from '@atproto/api' -import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' import {useMemo} from 'react' +import {useQuery, useMutation, useQueryClient} from '@tanstack/react-query' +import { + LabelPreference, + BskyFeedViewPreference, + AppBskyActorDefs, +} from '@atproto/api' import {track} from '#/lib/analytics/analytics' import {getAge} from '#/lib/strings/time' -import {useHiddenPosts} from '#/state/preferences/hidden-posts' -import {STALE} from '#/state/queries' -import { - DEFAULT_HOME_FEED_PREFS, - DEFAULT_LOGGED_OUT_PREFERENCES, - DEFAULT_THREAD_VIEW_PREFS, -} from '#/state/queries/preferences/const' +import {useSession, getAgent} from '#/state/session' import {DEFAULT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' -import {getModerationOpts} from '#/state/queries/preferences/moderation' import { ConfigurableLabelGroup, - ThreadViewPreferences, UsePreferencesQueryResponse, + ThreadViewPreferences, } from '#/state/queries/preferences/types' import {temp__migrateLabelPref} from '#/state/queries/preferences/util' -import {getAgent, useSession} from '#/state/session' +import { + DEFAULT_HOME_FEED_PREFS, + DEFAULT_THREAD_VIEW_PREFS, + DEFAULT_LOGGED_OUT_PREFERENCES, +} from '#/state/queries/preferences/const' +import {getModerationOpts} from '#/state/queries/preferences/moderation' +import {STALE} from '#/state/queries' +import {useHiddenPosts} from '#/state/preferences/hidden-posts' -export * from '#/state/queries/preferences/const' -export * from '#/state/queries/preferences/moderation' export * from '#/state/queries/preferences/types' +export * from '#/state/queries/preferences/moderation' +export * from '#/state/queries/preferences/const' export const preferencesQueryKey = ['getPreferences'] diff --git a/src/state/queries/preferences/moderation.ts b/src/state/queries/preferences/moderation.ts index bf5139be5a..cdae529374 100644 --- a/src/state/queries/preferences/moderation.ts +++ b/src/state/queries/preferences/moderation.ts @@ -1,12 +1,12 @@ import { - ComAtprotoLabelDefs, LabelPreference, + ComAtprotoLabelDefs, ModerationOpts, } from '@atproto/api' import { - ConfigurableLabelGroup, LabelGroup, + ConfigurableLabelGroup, UsePreferencesQueryResponse, } from '#/state/queries/preferences/types' diff --git a/src/state/queries/preferences/types.ts b/src/state/queries/preferences/types.ts index 3c65c31e0d..45c9eed7de 100644 --- a/src/state/queries/preferences/types.ts +++ b/src/state/queries/preferences/types.ts @@ -1,8 +1,8 @@ import { - BskyFeedViewPreference, BskyPreferences, - BskyThreadViewPreference, LabelPreference, + BskyThreadViewPreference, + BskyFeedViewPreference, } from '@atproto/api' export const configurableAdultLabelGroups = [ diff --git a/src/state/queries/profile-extra-info.ts b/src/state/queries/profile-extra-info.ts index e5bdff58af..8fc32c33eb 100644 --- a/src/state/queries/profile-extra-info.ts +++ b/src/state/queries/profile-extra-info.ts @@ -1,7 +1,7 @@ import {useQuery} from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' // TODO refactor invalidate on mutate? export const RQKEY = (did: string) => ['profile-extra-info', did] diff --git a/src/state/queries/profile-feedgens.ts b/src/state/queries/profile-feedgens.ts index 5b01259ec4..7d33eb9c80 100644 --- a/src/state/queries/profile-feedgens.ts +++ b/src/state/queries/profile-feedgens.ts @@ -1,5 +1,5 @@ import {AppBskyFeedGetActorFeeds} from '@atproto/api' -import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' +import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/profile-followers.ts b/src/state/queries/profile-followers.ts index 28cc82d7ab..fdefc82536 100644 --- a/src/state/queries/profile-followers.ts +++ b/src/state/queries/profile-followers.ts @@ -1,9 +1,9 @@ import {AppBskyActorDefs, AppBskyGraphGetFollowers} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' import {getAgent} from '#/state/session' diff --git a/src/state/queries/profile-follows.ts b/src/state/queries/profile-follows.ts index 697074d07f..428c8aebd1 100644 --- a/src/state/queries/profile-follows.ts +++ b/src/state/queries/profile-follows.ts @@ -1,13 +1,13 @@ import {AppBskyActorDefs, AppBskyGraphGetFollows} from '@atproto/api' import { + useInfiniteQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, } from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' const PAGE_SIZE = 30 type RQPageParam = string | undefined diff --git a/src/state/queries/profile-lists.ts b/src/state/queries/profile-lists.ts index d20f8a0310..505d33b9fa 100644 --- a/src/state/queries/profile-lists.ts +++ b/src/state/queries/profile-lists.ts @@ -1,6 +1,5 @@ import {AppBskyGraphGetLists} from '@atproto/api' -import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' - +import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' import {getAgent} from '#/state/session' const PAGE_SIZE = 30 diff --git a/src/state/queries/profile.ts b/src/state/queries/profile.ts index 5c4c071c62..e81ea0f3f0 100644 --- a/src/state/queries/profile.ts +++ b/src/state/queries/profile.ts @@ -1,33 +1,31 @@ +import {useCallback} from 'react' import { + AtUri, AppBskyActorDefs, - AppBskyActorGetProfile, AppBskyActorProfile, + AppBskyActorGetProfile, + AppBskyFeedDefs, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, - AppBskyFeedDefs, - AtUri, } from '@atproto/api' import { - QueryClient, - useMutation, useQuery, useQueryClient, + useMutation, + QueryClient, } from '@tanstack/react-query' -import {useCallback} from 'react' import {Image as RNImage} from 'react-native-image-crop-picker' - -import {track} from '#/lib/analytics/analytics' +import {useSession, getAgent} from '../session' +import {updateProfileShadow} from '../cache/profile-shadow' import {uploadBlob} from '#/lib/api' import {until} from '#/lib/async/until' -import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' import {Shadow} from '#/state/cache/types' -import {STALE} from '#/state/queries' import {resetProfilePostsQueries} from '#/state/queries/post-feed' - -import {updateProfileShadow} from '../cache/profile-shadow' -import {getAgent, useSession} from '../session' -import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts' +import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' import {RQKEY as RQKEY_MY_MUTED} from './my-muted-accounts' +import {RQKEY as RQKEY_MY_BLOCKED} from './my-blocked-accounts' +import {STALE} from '#/state/queries' +import {track} from '#/lib/analytics/analytics' import {ThreadNode} from './post-thread' export const RQKEY = (did: string) => ['profile', did] diff --git a/src/state/queries/resolve-uri.ts b/src/state/queries/resolve-uri.ts index dd6769baa3..95fc867ddf 100644 --- a/src/state/queries/resolve-uri.ts +++ b/src/state/queries/resolve-uri.ts @@ -1,10 +1,9 @@ -import {AppBskyActorDefs, AtUri} from '@atproto/api' import {useQuery, useQueryClient, UseQueryResult} from '@tanstack/react-query' - -import {STALE} from '#/state/queries' -import {getAgent} from '#/state/session' +import {AtUri, AppBskyActorDefs} from '@atproto/api' import {profileBasicQueryKey as RQKEY_PROFILE_BASIC} from './profile' +import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' export const RQKEY = (didOrHandle: string) => ['resolved-did', didOrHandle] diff --git a/src/state/queries/search-posts.ts b/src/state/queries/search-posts.ts index 58dba59683..e0b317ca9d 100644 --- a/src/state/queries/search-posts.ts +++ b/src/state/queries/search-posts.ts @@ -1,13 +1,12 @@ import {AppBskyFeedDefs, AppBskyFeedSearchPosts} from '@atproto/api' import { - InfiniteData, - QueryClient, - QueryKey, useInfiniteQuery, + InfiniteData, + QueryKey, + QueryClient, } from '@tanstack/react-query' import {getAgent} from '#/state/session' - import {embedViewRecordToPostView, getEmbeddedPost} from './util' const searchPostsQueryKey = ({query}: {query: string}) => [ diff --git a/src/state/queries/suggested-feeds.ts b/src/state/queries/suggested-feeds.ts index f8f40384db..7e6b534ad5 100644 --- a/src/state/queries/suggested-feeds.ts +++ b/src/state/queries/suggested-feeds.ts @@ -1,8 +1,8 @@ +import {useInfiniteQuery, InfiniteData, QueryKey} from '@tanstack/react-query' import {AppBskyFeedGetSuggestedFeeds} from '@atproto/api' -import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' -import {STALE} from '#/state/queries' import {getAgent} from '#/state/session' +import {STALE} from '#/state/queries' export const suggestedFeedsQueryKey = ['suggestedFeeds'] diff --git a/src/state/queries/suggested-follows.ts b/src/state/queries/suggested-follows.ts index ba9de82d19..932226b75c 100644 --- a/src/state/queries/suggested-follows.ts +++ b/src/state/queries/suggested-follows.ts @@ -1,3 +1,4 @@ +import React from 'react' import { AppBskyActorDefs, AppBskyActorGetSuggestions, @@ -5,18 +6,17 @@ import { moderateProfile, } from '@atproto/api' import { + useInfiniteQuery, + useQueryClient, + useQuery, InfiniteData, QueryClient, QueryKey, - useInfiniteQuery, - useQuery, - useQueryClient, } from '@tanstack/react-query' -import React from 'react' -import {STALE} from '#/state/queries' +import {useSession, getAgent} from '#/state/session' import {useModerationOpts} from '#/state/queries/preferences' -import {getAgent, useSession} from '#/state/session' +import {STALE} from '#/state/queries' const suggestedFollowsQueryKey = ['suggested-follows'] const suggestedFollowsByActorQueryKey = (did: string) => [ diff --git a/src/state/queries/util.ts b/src/state/queries/util.ts index 24f28ca529..54752b332a 100644 --- a/src/state/queries/util.ts +++ b/src/state/queries/util.ts @@ -1,10 +1,10 @@ +import {QueryClient, QueryKey, InfiniteData} from '@tanstack/react-query' import { AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, } from '@atproto/api' -import {InfiniteData, QueryClient, QueryKey} from '@tanstack/react-query' export function truncateAndInvalidate( queryClient: QueryClient, diff --git a/src/state/session/index.tsx b/src/state/session/index.tsx index 9918e2e75b..46628318c5 100644 --- a/src/state/session/index.tsx +++ b/src/state/session/index.tsx @@ -1,18 +1,17 @@ -import {AtpPersistSessionHandler, BskyAgent} from '@atproto/api' +import React from 'react' +import {BskyAgent, AtpPersistSessionHandler} from '@atproto/api' import {useQueryClient} from '@tanstack/react-query' import {jwtDecode} from 'jwt-decode' -import React from 'react' -import {track} from '#/lib/analytics/analytics' import {networkRetry} from '#/lib/async/retry' -import {hasProp} from '#/lib/type-guards' import {logger} from '#/logger' import * as persisted from '#/state/persisted' import {PUBLIC_BSKY_AGENT} from '#/state/queries' +import {emitSessionDropped} from '../events' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' - -import {emitSessionDropped} from '../events' +import {track} from '#/lib/analytics/analytics' +import {hasProp} from '#/lib/type-guards' let __globalAgent: BskyAgent = PUBLIC_BSKY_AGENT diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx index f16e2be533..f3339d2406 100644 --- a/src/state/shell/color-mode.tsx +++ b/src/state/shell/color-mode.tsx @@ -1,5 +1,4 @@ import React from 'react' - import * as persisted from '#/state/persisted' type StateContext = { diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer.tsx index 1fb08baa28..c9dbfbeac4 100644 --- a/src/state/shell/composer.tsx +++ b/src/state/shell/composer.tsx @@ -1,10 +1,9 @@ +import React from 'react' import { AppBskyEmbedRecord, AppBskyRichtextFacet, PostModeration, } from '@atproto/api' -import React from 'react' - import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' export interface ComposerOptsPostRef { diff --git a/src/state/shell/index.tsx b/src/state/shell/index.tsx index 7e41967f53..07909c0001 100644 --- a/src/state/shell/index.tsx +++ b/src/state/shell/index.tsx @@ -1,23 +1,22 @@ import React from 'react' - -import {Provider as ColorModeProvider} from './color-mode' -import {Provider as ComposerProvider} from './composer' +import {Provider as ShellLayoutProvder} from './shell-layout' import {Provider as DrawerOpenProvider} from './drawer-open' import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled' import {Provider as MinimalModeProvider} from './minimal-mode' +import {Provider as ColorModeProvider} from './color-mode' import {Provider as OnboardingProvider} from './onboarding' -import {Provider as ShellLayoutProvder} from './shell-layout' +import {Provider as ComposerProvider} from './composer' import {Provider as TickEveryMinuteProvider} from './tick-every-minute' -export {useSetThemePrefs, useThemePrefs} from './color-mode' -export {useComposerControls, useComposerState} from './composer' export {useIsDrawerOpen, useSetDrawerOpen} from './drawer-open' export { useIsDrawerSwipeDisabled, useSetDrawerSwipeDisabled, } from './drawer-swipe-disabled' export {useMinimalShellMode, useSetMinimalShellMode} from './minimal-mode' -export {useOnboardingDispatch, useOnboardingState} from './onboarding' +export {useThemePrefs, useSetThemePrefs} from './color-mode' +export {useOnboardingState, useOnboardingDispatch} from './onboarding' +export {useComposerState, useComposerControls} from './composer' export {useTickEveryMinute} from './tick-every-minute' export function Provider({children}: React.PropsWithChildren<{}>) { diff --git a/src/state/shell/onboarding.tsx b/src/state/shell/onboarding.tsx index cd26e42c0f..6a18b461f9 100644 --- a/src/state/shell/onboarding.tsx +++ b/src/state/shell/onboarding.tsx @@ -1,7 +1,6 @@ import React from 'react' - -import {track} from '#/lib/analytics/analytics' import * as persisted from '#/state/persisted' +import {track} from '#/lib/analytics/analytics' export const OnboardingScreenSteps = { Welcome: 'Welcome', diff --git a/src/state/shell/reminders.ts b/src/state/shell/reminders.ts index 6f68b9b795..ee924eb001 100644 --- a/src/state/shell/reminders.ts +++ b/src/state/shell/reminders.ts @@ -1,9 +1,7 @@ -import {toHashCode} from 'lib/strings/helpers' - import * as persisted from '#/state/persisted' - -import {SessionAccount} from '../session' +import {toHashCode} from 'lib/strings/helpers' import {isOnboardingActive} from './onboarding' +import {SessionAccount} from '../session' export function shouldRequestEmailConfirmation(account: SessionAccount) { if (!account) { diff --git a/src/state/shell/selected-feed.tsx b/src/state/shell/selected-feed.tsx index 8a6e82636f..a05d8661b4 100644 --- a/src/state/shell/selected-feed.tsx +++ b/src/state/shell/selected-feed.tsx @@ -1,7 +1,6 @@ import React from 'react' - -import {isWeb} from '#/platform/detection' import * as persisted from '#/state/persisted' +import {isWeb} from '#/platform/detection' type StateContext = string type SetContext = (v: string) => void diff --git a/src/state/util.ts b/src/state/util.ts index af6d9026b4..f65d14a84c 100644 --- a/src/state/util.ts +++ b/src/state/util.ts @@ -1,11 +1,9 @@ import {useCallback} from 'react' - -import {useDialogStateControlContext} from '#/state/dialogs' - import {useLightboxControls} from './lightbox' import {useModalControls} from './modals' import {useComposerControls} from './shell/composer' import {useSetDrawerOpen} from './shell/drawer-open' +import {useDialogStateControlContext} from '#/state/dialogs' /** * returns true if something was closed diff --git a/src/view/com/auth/HomeLoggedOutCTA.tsx b/src/view/com/auth/HomeLoggedOutCTA.tsx index f2a3c5170b..f796d8baee 100644 --- a/src/view/com/auth/HomeLoggedOutCTA.tsx +++ b/src/view/com/auth/HomeLoggedOutCTA.tsx @@ -1,16 +1,14 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {colors, s} from '#/lib/styles' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' - -import {TextLink} from '../util/Link' -import {Text} from '../util/text/Text' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' import {ScrollView} from '../util/Views' +import {Text} from '../util/text/Text' +import {usePalette} from '#/lib/hooks/usePalette' +import {colors, s} from '#/lib/styles' +import {TextLink} from '../util/Link' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' export function HomeLoggedOutCTA() { const pal = usePalette('default') diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index b2df062dd9..603abbab2d 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -1,28 +1,27 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' -import {s} from 'lib/styles' -import {isIOS, isNative} from 'platform/detection' import React from 'react' -import {Pressable, View} from 'react-native' -import {CreateAccount} from 'view/com/auth/create/CreateAccount' -import {Login} from 'view/com/auth/login/Login' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {View, Pressable} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {useNavigation} from '@react-navigation/native' -import {useSession} from '#/state/session' +import {isIOS, isNative} from 'platform/detection' +import {Login} from 'view/com/auth/login/Login' +import {CreateAccount} from 'view/com/auth/create/CreateAccount' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {SplashScreen} from './SplashScreen' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import { useLoggedOutView, useLoggedOutViewControls, } from '#/state/shell/logged-out' -import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' +import {useSession} from '#/state/session' import {Text} from '#/view/com/util/text/Text' - -import {SplashScreen} from './SplashScreen' +import {NavigationProp} from 'lib/routes/types' enum ScreenState { S_LoginOrCreateAccount, diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx index e102b1ccf8..bdb7f27c81 100644 --- a/src/view/com/auth/Onboarding.tsx +++ b/src/view/com/auth/Onboarding.tsx @@ -1,15 +1,13 @@ -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' -import {Platform, SafeAreaView} from 'react-native' +import {SafeAreaView, Platform} from 'react-native' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' - -import {useOnboardingDispatch, useOnboardingState} from '#/state/shell' -import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' - +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {Welcome} from './onboarding/Welcome' import {RecommendedFeeds} from './onboarding/RecommendedFeeds' import {RecommendedFollows} from './onboarding/RecommendedFollows' -import {Welcome} from './onboarding/Welcome' +import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' +import {useOnboardingState, useOnboardingDispatch} from '#/state/shell' export function Onboarding() { const pal = usePalette('default') diff --git a/src/view/com/auth/SplashScreen.tsx b/src/view/com/auth/SplashScreen.tsx index 2b54cb1b63..134ae11f10 100644 --- a/src/view/com/auth/SplashScreen.tsx +++ b/src/view/com/auth/SplashScreen.tsx @@ -1,25 +1,23 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Text} from 'view/com/util/text/Text' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {CenteredView} from '../util/Views' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Logo} from '#/view/icons/Logo' +import {Logotype} from '#/view/icons/Logotype' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {Text} from 'view/com/util/text/Text' - import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {APP_LANGUAGES} from '#/locale/languages' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' -import {Logo} from '#/view/icons/Logo' -import {Logotype} from '#/view/icons/Logotype' - -import {CenteredView} from '../util/Views' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onPressSignin, diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index 2bf4a12950..f1921c7ffb 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -1,23 +1,21 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React from 'react' -import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Text} from 'view/com/util/text/Text' - -import {sanitizeAppLanguageSetting} from '#/locale/helpers' -import {APP_LANGUAGES} from '#/locale/languages' -import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {TextLink} from '../util/Link' +import {ErrorBoundary} from 'view/com/util/ErrorBoundary' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {CenteredView} from '../util/Views' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Trans, msg} from '@lingui/macro' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' - -import {TextLink} from '../util/Link' -import {CenteredView} from '../util/Views' +import {useLingui} from '@lingui/react' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' +import {APP_LANGUAGES} from '#/locale/languages' export const SplashScreen = ({ onDismiss, diff --git a/src/view/com/auth/create/CaptchaWebView.tsx b/src/view/com/auth/create/CaptchaWebView.tsx index 9bfc9218e3..b0de8b4a4b 100644 --- a/src/view/com/auth/create/CaptchaWebView.tsx +++ b/src/view/com/auth/create/CaptchaWebView.tsx @@ -1,7 +1,7 @@ import React from 'react' -import {StyleSheet} from 'react-native' import {WebView, WebViewNavigation} from 'react-native-webview' import {ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes' +import {StyleSheet} from 'react-native' import {CreateAccountState} from 'view/com/auth/create/state' const ALLOWED_HOSTS = [ diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx index be7e4c4327..d193802fe0 100644 --- a/src/view/com/auth/create/CreateAccount.tsx +++ b/src/view/com/auth/create/CreateAccount.tsx @@ -1,9 +1,3 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {createFullHandle, validateHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -12,19 +6,24 @@ import { TouchableOpacity, View, } from 'react-native' -import {getAgent} from 'state/session' -import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' - -import {FEEDBACK_FORM_URL, HITSLOP_10} from '#/lib/constants' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useServiceQuery} from '#/state/queries/service' - -import {TextLink} from '../../util/Link' +import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' +import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useCreateAccount, useSubmitCreateAccount} from './state' +import {useServiceQuery} from '#/state/queries/service' +import {FEEDBACK_FORM_URL, HITSLOP_10} from '#/lib/constants' + import {Step1} from './Step1' import {Step2} from './Step2' import {Step3} from './Step3' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {TextLink} from '../../util/Link' +import {getAgent} from 'state/session' +import {createFullHandle, validateHandle} from 'lib/strings/handles' export function CreateAccount({onPressBack}: {onPressBack: () => void}) { const {screen} = useAnalytics() diff --git a/src/view/com/auth/create/Policies.tsx b/src/view/com/auth/create/Policies.tsx index fea4566b8d..2c7d60818e 100644 --- a/src/view/com/auth/create/Policies.tsx +++ b/src/view/com/auth/create/Policies.tsx @@ -1,15 +1,14 @@ -import {ComAtprotoServerDescribeServer} from '@atproto/api' +import React from 'react' +import {StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' -import React from 'react' -import {StyleSheet, View} from 'react-native' - +import {ComAtprotoServerDescribeServer} from '@atproto/api' import {TextLink} from '../../util/Link' import {Text} from '../../util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx index 9dcc74f7dd..1f6852f8cc 100644 --- a/src/view/com/auth/create/Step1.tsx +++ b/src/view/com/auth/create/Step1.tsx @@ -1,12 +1,3 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React from 'react' import { ActivityIndicator, @@ -15,19 +6,27 @@ import { TouchableOpacity, View, } from 'react-native' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {DateInput} from 'view/com/util/forms/DateInput' +import {CreateAccountState, CreateAccountDispatch, is18} from './state' import {Text} from 'view/com/util/text/Text' - -import {useDialogControl} from '#/components/Dialog' -import {toNiceDomain} from '#/lib/strings/url-helpers' -import {logger} from '#/logger' - -import {ServerInputDialog} from '../server-input' +import {DateInput} from 'view/com/util/forms/DateInput' +import {StepHeader} from './StepHeader' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' import {TextInput} from '../util/TextInput' import {Policies} from './Policies' -import {CreateAccountDispatch, CreateAccountState, is18} from './state' -import {StepHeader} from './StepHeader' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {isWeb} from 'platform/detection' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {logger} from '#/logger' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {useDialogControl} from '#/components/Dialog' + +import {ServerInputDialog} from '../server-input' +import {toNiceDomain} from '#/lib/strings/url-helpers' function sanitizeDate(date: Date): Date { if (!date || date.toString() === 'Invalid Date') { diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx index 08eb34fb3b..5c262977f1 100644 --- a/src/view/com/auth/create/Step2.tsx +++ b/src/view/com/auth/create/Step2.tsx @@ -1,24 +1,22 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import {View} from 'react-native' +import {CreateAccountState, CreateAccountDispatch} from './state' +import {Text} from 'view/com/util/text/Text' +import {StepHeader} from './StepHeader' +import {s} from 'lib/styles' +import {TextInput} from '../util/TextInput' import { createFullHandle, IsValidHandle, validateHandle, } from 'lib/strings/handles' -import {s} from 'lib/styles' -import React from 'react' -import {View} from 'react-native' -import {Text} from 'view/com/util/text/Text' - +import {usePalette} from 'lib/hooks/usePalette' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {atoms as a, useTheme} from '#/alf' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' - -import {TextInput} from '../util/TextInput' -import {CreateAccountDispatch, CreateAccountState} from './state' -import {StepHeader} from './StepHeader' +import {useFocusEffect} from '@react-navigation/native' /** STEP 3: Your user handle * @field User handle diff --git a/src/view/com/auth/create/Step3.tsx b/src/view/com/auth/create/Step3.tsx index b572871716..53fdfdde81 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/view/com/auth/create/Step3.tsx @@ -1,20 +1,20 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {createFullHandle} from 'lib/strings/handles' -import {useTheme} from 'lib/ThemeContext' -import {nanoid} from 'nanoid/non-secure' -import {isWeb} from 'platform/detection' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' - import { - CreateAccountDispatch, CreateAccountState, + CreateAccountDispatch, useSubmitCreateAccount, } from './state' import {StepHeader} from './StepHeader' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {isWeb} from 'platform/detection' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {nanoid} from 'nanoid/non-secure' +import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' +import {useTheme} from 'lib/ThemeContext' +import {createFullHandle} from 'lib/strings/handles' const CAPTCHA_PATH = '/gate/signup' diff --git a/src/view/com/auth/create/StepHeader.tsx b/src/view/com/auth/create/StepHeader.tsx index 90946e37b4..a98b392d8d 100644 --- a/src/view/com/auth/create/StepHeader.tsx +++ b/src/view/com/auth/create/StepHeader.tsx @@ -1,9 +1,8 @@ -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' - +import {usePalette} from 'lib/hooks/usePalette' +import {Trans} from '@lingui/macro' import {CreateAccountState} from './state' export function StepHeader({ diff --git a/src/view/com/auth/create/state.ts b/src/view/com/auth/create/state.ts index 7ff5fceb65..7a727ec0b2 100644 --- a/src/view/com/auth/create/state.ts +++ b/src/view/com/auth/create/state.ts @@ -1,25 +1,24 @@ +import {useCallback, useReducer} from 'react' import { - ComAtprotoServerCreateAccount, ComAtprotoServerDescribeServer, + ComAtprotoServerCreateAccount, } from '@atproto/api' -import {msg} from '@lingui/macro' import {I18nContext, useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import * as EmailValidator from 'email-validator' import {getAge} from 'lib/strings/time' -import {useCallback, useReducer} from 'react' +import {logger} from '#/logger' +import {createFullHandle, validateHandle} from '#/lib/strings/handles' +import {cleanError} from '#/lib/strings/errors' +import {useOnboardingDispatch} from '#/state/shell/onboarding' +import {useSessionApi} from '#/state/session' +import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants' import { DEFAULT_PROD_FEEDS, usePreferencesSetBirthDateMutation, useSetSaveFeedsMutation, } from 'state/queries/preferences' -import {DEFAULT_SERVICE, IS_PROD_SERVICE} from '#/lib/constants' -import {cleanError} from '#/lib/strings/errors' -import {createFullHandle, validateHandle} from '#/lib/strings/handles' -import {logger} from '#/logger' -import {useSessionApi} from '#/state/session' -import {useOnboardingDispatch} from '#/state/shell/onboarding' - export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago diff --git a/src/view/com/auth/login/ChooseAccountForm.tsx b/src/view/com/auth/login/ChooseAccountForm.tsx index 440b066ee2..32cd8315d3 100644 --- a/src/view/com/auth/login/ChooseAccountForm.tsx +++ b/src/view/com/auth/login/ChooseAccountForm.tsx @@ -1,23 +1,21 @@ +import React from 'react' +import {ScrollView, TouchableOpacity, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' -import React from 'react' -import {ScrollView, TouchableOpacity, View} from 'react-native' - -import {useProfileQuery} from '#/state/queries/profile' -import {SessionAccount, useSession, useSessionApi} from '#/state/session' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import * as Toast from '#/view/com/util/Toast' - import {Text} from '../../util/text/Text' import {UserAvatar} from '../../util/UserAvatar' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {styles} from './styles' +import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import * as Toast from '#/view/com/util/Toast' function AccountItem({ account, diff --git a/src/view/com/auth/login/ForgotPasswordForm.tsx b/src/view/com/auth/login/ForgotPasswordForm.tsx index 74dd1d85a1..322da2b8fd 100644 --- a/src/view/com/auth/login/ForgotPasswordForm.tsx +++ b/src/view/com/auth/login/ForgotPasswordForm.tsx @@ -1,20 +1,4 @@ -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import {BskyAgent} from '@atproto/api' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import * as EmailValidator from 'email-validator' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {isNetworkError} from 'lib/strings/errors' -import {cleanError} from 'lib/strings/errors' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import React, {useEffect, useState} from 'react' +import React, {useState, useEffect} from 'react' import { ActivityIndicator, Keyboard, @@ -22,13 +6,28 @@ import { TouchableOpacity, View, } from 'react-native' - -import {useDialogControl} from '#/components/Dialog' -import {logger} from '#/logger' - +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import * as EmailValidator from 'email-validator' +import {BskyAgent} from '@atproto/api' +import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' -import {ServerInputDialog} from '../server-input' +import {s} from 'lib/styles' +import {toNiceDomain} from 'lib/strings/url-helpers' +import {isNetworkError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {cleanError} from 'lib/strings/errors' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {styles} from './styles' +import {useDialogControl} from '#/components/Dialog' + +import {ServerInputDialog} from '../server-input' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx index f634342a28..bc931ac04c 100644 --- a/src/view/com/auth/login/Login.tsx +++ b/src/view/com/auth/login/Login.tsx @@ -1,22 +1,20 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import React, {useEffect, useState} from 'react' +import React, {useState, useEffect} from 'react' import {KeyboardAvoidingView} from 'react-native' +import {useAnalytics} from 'lib/analytics/analytics' import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' - import {DEFAULT_SERVICE} from '#/lib/constants' +import {usePalette} from 'lib/hooks/usePalette' import {logger} from '#/logger' -import {useServiceQuery} from '#/state/queries/service' -import {SessionAccount, useSession} from '#/state/session' -import {useLoggedOutView} from '#/state/shell/logged-out' - import {ChooseAccountForm} from './ChooseAccountForm' -import {ForgotPasswordForm} from './ForgotPasswordForm' import {LoginForm} from './LoginForm' -import {PasswordUpdatedForm} from './PasswordUpdatedForm' +import {ForgotPasswordForm} from './ForgotPasswordForm' import {SetNewPasswordForm} from './SetNewPasswordForm' +import {PasswordUpdatedForm} from './PasswordUpdatedForm' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {useSession, SessionAccount} from '#/state/session' +import {useServiceQuery} from '#/state/queries/service' +import {useLoggedOutView} from '#/state/shell/logged-out' enum Forms { Login, diff --git a/src/view/com/auth/login/LoginForm.tsx b/src/view/com/auth/login/LoginForm.tsx index acff2fc8bd..fdba9f203f 100644 --- a/src/view/com/auth/login/LoginForm.tsx +++ b/src/view/com/auth/login/LoginForm.tsx @@ -1,19 +1,4 @@ -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {isNetworkError} from 'lib/strings/errors' -import {cleanError} from 'lib/strings/errors' -import {createFullHandle} from 'lib/strings/handles' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import React, {useRef, useState} from 'react' +import React, {useState, useRef} from 'react' import { ActivityIndicator, Keyboard, @@ -21,14 +6,28 @@ import { TouchableOpacity, View, } from 'react-native' - -import {useDialogControl} from '#/components/Dialog' -import {logger} from '#/logger' -import {useSessionApi} from '#/state/session' - +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' -import {ServerInputDialog} from '../server-input' +import {s} from 'lib/styles' +import {createFullHandle} from 'lib/strings/handles' +import {toNiceDomain} from 'lib/strings/url-helpers' +import {isNetworkError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useSessionApi} from '#/state/session' +import {cleanError} from 'lib/strings/errors' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' import {styles} from './styles' +import {useLingui} from '@lingui/react' +import {useDialogControl} from '#/components/Dialog' + +import {ServerInputDialog} from '../server-input' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/view/com/auth/login/PasswordUpdatedForm.tsx b/src/view/com/auth/login/PasswordUpdatedForm.tsx index a88a1dc996..71f750b141 100644 --- a/src/view/com/auth/login/PasswordUpdatedForm.tsx +++ b/src/view/com/auth/login/PasswordUpdatedForm.tsx @@ -1,13 +1,12 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React, {useEffect} from 'react' import {TouchableOpacity, View} from 'react-native' - +import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' import {styles} from './styles' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const PasswordUpdatedForm = ({ onPressNext, diff --git a/src/view/com/auth/login/SetNewPasswordForm.tsx b/src/view/com/auth/login/SetNewPasswordForm.tsx index 18a95d629e..6d1584c86c 100644 --- a/src/view/com/auth/login/SetNewPasswordForm.tsx +++ b/src/view/com/auth/login/SetNewPasswordForm.tsx @@ -1,26 +1,24 @@ -import {BskyAgent} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {isNetworkError} from 'lib/strings/errors' -import {cleanError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' -import {s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import React, {useEffect, useState} from 'react' +import React, {useState, useEffect} from 'react' import { ActivityIndicator, TextInput, TouchableOpacity, View, } from 'react-native' - -import {logger} from '#/logger' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {BskyAgent} from '@atproto/api' +import {useAnalytics} from 'lib/analytics/analytics' import {Text} from '../../util/text/Text' +import {s} from 'lib/styles' +import {isNetworkError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {cleanError} from 'lib/strings/errors' +import {checkAndFormatResetCode} from 'lib/strings/password' +import {logger} from '#/logger' import {styles} from './styles' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const SetNewPasswordForm = ({ error, diff --git a/src/view/com/auth/login/styles.ts b/src/view/com/auth/login/styles.ts index 5adea4c87b..9dccc2803b 100644 --- a/src/view/com/auth/login/styles.ts +++ b/src/view/com/auth/login/styles.ts @@ -1,6 +1,5 @@ -import {colors} from 'lib/styles' import {StyleSheet} from 'react-native' - +import {colors} from 'lib/styles' import {isWeb} from '#/platform/detection' export const styles = StyleSheet.create({ diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx index 6b78c14156..d3318bffd8 100644 --- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx @@ -1,20 +1,18 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {Button} from 'view/com/util/forms/Button' -import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints' import {Text} from 'view/com/util/text/Text' import {ViewHeader} from 'view/com/util/ViewHeader' - -import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds' - +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Button} from 'view/com/util/forms/Button' import {RecommendedFeedsItem} from './RecommendedFeedsItem' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {usePalette} from 'lib/hooks/usePalette' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSuggestedFeedsQuery} from '#/state/queries/suggested-feeds' type Props = { next: () => void diff --git a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx index 92035a4929..ea3e1f725d 100644 --- a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx +++ b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx @@ -1,26 +1,25 @@ -import {AppBskyFeedDefs, RichText as BskRichText} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HeartIcon} from 'lib/icons' -import {sanitizeHandle} from 'lib/strings/handles' import React from 'react' import {View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' -import {RichText} from 'view/com/util/text/RichText' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {AppBskyFeedDefs, RichText as BskRichText} from '@atproto/api' import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' +import {RichText} from 'view/com/util/text/RichText' +import {Button} from 'view/com/util/forms/Button' import {UserAvatar} from 'view/com/util/UserAvatar' - -import {useAnalytics} from '#/lib/analytics/analytics' -import {logger} from '#/logger' +import * as Toast from 'view/com/util/Toast' +import {HeartIcon} from 'lib/icons' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {sanitizeHandle} from 'lib/strings/handles' import { - usePinFeedMutation, usePreferencesQuery, + usePinFeedMutation, useRemoveFeedMutation, } from '#/state/queries/preferences' +import {logger} from '#/logger' +import {useAnalytics} from '#/lib/analytics/analytics' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function RecommendedFeedsItem({ item, diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx index a7a1eebed9..d275f6c90e 100644 --- a/src/view/com/auth/onboarding/RecommendedFollows.tsx +++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx @@ -1,23 +1,21 @@ -import {AppBskyActorDefs, moderateProfile} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' -import {Mobile, TabletOrDesktop} from 'view/com/util/layouts/Breakpoints' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' +import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints' import {Text} from 'view/com/util/text/Text' import {ViewHeader} from 'view/com/util/ViewHeader' - -import {logger} from '#/logger' -import {useModerationOpts} from '#/state/queries/preferences' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Button} from 'view/com/util/forms/Button' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {usePalette} from 'lib/hooks/usePalette' +import {RecommendedFollowsItem} from './RecommendedFollowsItem' import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows' import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' - -import {RecommendedFollowsItem} from './RecommendedFollowsItem' +import {useModerationOpts} from '#/state/queries/preferences' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = { next: () => void diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx index e530dbd352..07001068cc 100644 --- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx +++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx @@ -1,21 +1,20 @@ -import {AppBskyActorDefs, ProfileModeration} from '@atproto/api' -import {Trans} from '@lingui/macro' -import {useAnalytics} from 'lib/analytics/analytics' +import React from 'react' +import {View, StyleSheet, ActivityIndicator} from 'react-native' +import {ProfileModeration, AppBskyActorDefs} from '@atproto/api' +import {Button} from '#/view/com/util/forms/Button' import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {s} from 'lib/styles' -import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' -import Animated, {FadeInRight} from 'react-native-reanimated' -import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' - -import {logger} from '#/logger' +import {Text} from 'view/com/util/text/Text' +import Animated, {FadeInRight} from 'react-native-reanimated' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useAnalytics} from 'lib/analytics/analytics' +import {Trans} from '@lingui/macro' import {Shadow, useProfileShadow} from '#/state/cache/profile-shadow' import {useProfileFollowMutationQueue} from '#/state/queries/profile' -import {Button} from '#/view/com/util/forms/Button' +import {logger} from '#/logger' type Props = { profile: AppBskyActorDefs.ProfileViewBasic diff --git a/src/view/com/auth/onboarding/Welcome.tsx b/src/view/com/auth/onboarding/Welcome.tsx index 64de7fee09..b44b58f843 100644 --- a/src/view/com/auth/onboarding/Welcome.tsx +++ b/src/view/com/auth/onboarding/Welcome.tsx @@ -1,7 +1,5 @@ import 'react' - import {withBreakpoints} from 'view/com/util/layouts/withBreakpoints' - import {WelcomeDesktop} from './WelcomeDesktop' import {WelcomeMobile} from './WelcomeMobile' diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx index 926c4fcda5..fdb31197c0 100644 --- a/src/view/com/auth/onboarding/WelcomeDesktop.tsx +++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx @@ -1,13 +1,13 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' import {useMediaQuery} from 'react-responsive' -import {Button} from 'view/com/util/forms/Button' -import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' import {Text} from 'view/com/util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout' +import {Button} from 'view/com/util/forms/Button' +import {Trans} from '@lingui/macro' type Props = { next: () => void diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx index 030eddee13..5de1a78170 100644 --- a/src/view/com/auth/onboarding/WelcomeMobile.tsx +++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx @@ -1,12 +1,12 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' import {Text} from 'view/com/util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Button} from 'view/com/util/forms/Button' import {ViewHeader} from 'view/com/util/ViewHeader' +import {Trans} from '@lingui/macro' type Props = { next: () => void diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 39a395402f..32b5a3141a 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -1,17 +1,17 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {BSKY_SERVICE} from 'lib/constants' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {BSKY_SERVICE} from 'lib/constants' +import * as persisted from '#/state/persisted' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' -import * as TextField from '#/components/forms/TextField' +import {Text, P} from '#/components/Typography' +import {Button, ButtonText} from '#/components/Button' import * as ToggleButton from '#/components/forms/ToggleButton' +import * as TextField from '#/components/forms/TextField' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {P, Text} from '#/components/Typography' -import * as persisted from '#/state/persisted' export function ServerInputDialog({ control, diff --git a/src/view/com/auth/util/HelpTip.tsx b/src/view/com/auth/util/HelpTip.tsx index 349eb2f3a8..65f7278d6b 100644 --- a/src/view/com/auth/util/HelpTip.tsx +++ b/src/view/com/auth/util/HelpTip.tsx @@ -1,9 +1,9 @@ -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {InfoCircleIcon} from 'lib/icons' -import {colors, s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' import {Text} from 'view/com/util/text/Text' +import {InfoCircleIcon} from 'lib/icons' +import {s, colors} from 'lib/styles' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' export function HelpTip({text}: {text: string}) { const bg = useColorSchemeStyle( diff --git a/src/view/com/auth/util/TextInput.tsx b/src/view/com/auth/util/TextInput.tsx index 33ebfd8027..38aff03849 100644 --- a/src/view/com/auth/util/TextInput.tsx +++ b/src/view/com/auth/util/TextInput.tsx @@ -1,9 +1,9 @@ -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' import React, {ComponentProps} from 'react' import {StyleSheet, TextInput as RNTextInput, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' interface Props extends Omit, 'onChange'> { testID?: string diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 57be93ca75..2855d4232c 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -1,21 +1,5 @@ -import {RichText} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import * as apilib from 'lib/api/index' -import {MAX_GRAPHEME_LENGTH} from 'lib/constants' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {insertMentionAt} from 'lib/strings/mention-manip' -import {shortenLinks} from 'lib/strings/rich-text-manip' -import {toShortUrl} from 'lib/strings/url-helpers' -import {colors, gradients, s} from 'lib/styles' -import {observer} from 'mobx-react-lite' -import {isAndroid, isIOS, isNative, isWeb} from 'platform/detection' import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {observer} from 'mobx-react-lite' import { ActivityIndicator, BackHandler, @@ -28,43 +12,57 @@ import { TouchableOpacity, View, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {GalleryModel} from 'state/models/media/gallery' -import {ComposerOpts} from 'state/shell/composer' -import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' - -import {logger} from '#/logger' -import {emitPostCreated} from '#/state/events' -import {useModalControls, useModals} from '#/state/modals' -import {useRequireAltTextEnabled} from '#/state/preferences' -import { - toPostLanguages, - useLanguagePrefs, - useLanguagePrefsApi, -} from '#/state/preferences/languages' -import {useProfileQuery} from '#/state/queries/profile' -import {ThreadgateSetting} from '#/state/queries/threadgate' -import {getAgent, useSession} from '#/state/session' -import {useComposerControls} from '#/state/shell/composer' - -import QuoteEmbed from '../util/post-embeds/QuoteEmbed' +import LinearGradient from 'react-native-linear-gradient' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {RichText} from '@atproto/api' +import {useAnalytics} from 'lib/analytics/analytics' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {ExternalEmbed} from './ExternalEmbed' import {Text} from '../util/text/Text' import * as Toast from '../util/Toast' -import {UserAvatar} from '../util/UserAvatar' -import {CharProgress} from './char-progress/CharProgress' -import {ExternalEmbed} from './ExternalEmbed' -import {LabelsBtn} from './labels/LabelsBtn' -import {Gallery} from './photos/Gallery' -import {OpenCameraBtn} from './photos/OpenCameraBtn' -import {SelectPhotoBtn} from './photos/SelectPhotoBtn' -import {SelectLangBtn} from './select-language/SelectLangBtn' -import {SuggestedLanguage} from './select-language/SuggestedLanguage' // TODO: Prevent naming components that coincide with RN primitives // due to linting false positives import {TextInput, TextInputRef} from './text-input/TextInput' +import {CharProgress} from './char-progress/CharProgress' +import {UserAvatar} from '../util/UserAvatar' +import * as apilib from 'lib/api/index' +import {ComposerOpts} from 'state/shell/composer' +import {s, colors, gradients} from 'lib/styles' +import {cleanError} from 'lib/strings/errors' +import {shortenLinks} from 'lib/strings/rich-text-manip' +import {toShortUrl} from 'lib/strings/url-helpers' +import {SelectPhotoBtn} from './photos/SelectPhotoBtn' +import {OpenCameraBtn} from './photos/OpenCameraBtn' import {ThreadgateBtn} from './threadgate/ThreadgateBtn' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useExternalLinkFetch} from './useExternalLinkFetch' +import {isWeb, isNative, isAndroid, isIOS} from 'platform/detection' +import QuoteEmbed from '../util/post-embeds/QuoteEmbed' +import {GalleryModel} from 'state/models/media/gallery' +import {Gallery} from './photos/Gallery' +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' +import {LabelsBtn} from './labels/LabelsBtn' +import {SelectLangBtn} from './select-language/SelectLangBtn' +import {SuggestedLanguage} from './select-language/SuggestedLanguage' +import {insertMentionAt} from 'lib/strings/mention-manip' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModals, useModalControls} from '#/state/modals' +import {useRequireAltTextEnabled} from '#/state/preferences' +import { + useLanguagePrefs, + useLanguagePrefsApi, + toPostLanguages, +} from '#/state/preferences/languages' +import {useSession, getAgent} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useComposerControls} from '#/state/shell/composer' +import {emitPostCreated} from '#/state/events' +import {ThreadgateSetting} from '#/state/queries/threadgate' +import {logger} from '#/logger' +import {ComposerReplyTo} from 'view/com/composer/ComposerReplyTo' type Props = ComposerOpts export const ComposePost = observer(function ComposePost({ diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx index e6fe11565f..39a1473a3b 100644 --- a/src/view/com/composer/ComposerReplyTo.tsx +++ b/src/view/com/composer/ComposerReplyTo.tsx @@ -1,21 +1,21 @@ +import React from 'react' +import {LayoutAnimation, Pressable, StyleSheet, View} from 'react-native' +import {Image} from 'expo-image' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import { AppBskyEmbedImages, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedPost, } from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' +import {ComposerOptsPostRef} from 'state/shell/composer' import {usePalette} from 'lib/hooks/usePalette' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import React from 'react' -import {LayoutAnimation, Pressable, StyleSheet, View} from 'react-native' -import {ComposerOptsPostRef} from 'state/shell/composer' -import QuoteEmbed from 'view/com/util/post-embeds/QuoteEmbed' -import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' +import {Text} from 'view/com/util/text/Text' +import QuoteEmbed from 'view/com/util/post-embeds/QuoteEmbed' export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) { const pal = usePalette('default') diff --git a/src/view/com/composer/ExternalEmbed.tsx b/src/view/com/composer/ExternalEmbed.tsx index c2aebccd64..02dd1bbd75 100644 --- a/src/view/com/composer/ExternalEmbed.tsx +++ b/src/view/com/composer/ExternalEmbed.tsx @@ -1,9 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {ExternalEmbedDraft} from 'lib/api/index' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -11,9 +5,14 @@ import { TouchableOpacity, View, } from 'react-native' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {AutoSizedImage} from '../util/images/AutoSizedImage' import {Text} from '../util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {ExternalEmbedDraft} from 'lib/api/index' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' export const ExternalEmbed = ({ link, diff --git a/src/view/com/composer/Prompt.tsx b/src/view/com/composer/Prompt.tsx index 5f19a64bdd..632bb2634b 100644 --- a/src/view/com/composer/Prompt.tsx +++ b/src/view/com/composer/Prompt.tsx @@ -1,15 +1,13 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {StyleSheet, TouchableOpacity} from 'react-native' - -import {useProfileQuery} from '#/state/queries/profile' -import {useSession} from '#/state/session' - -import {Text} from '../util/text/Text' import {UserAvatar} from '../util/UserAvatar' +import {Text} from '../util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSession} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' export function ComposePrompt({onPressCompose}: {onPressCompose: () => void}) { const {currentAccount} = useSession() diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx index 3c5cee492e..a3fa78a59a 100644 --- a/src/view/com/composer/char-progress/CharProgress.tsx +++ b/src/view/com/composer/char-progress/CharProgress.tsx @@ -1,14 +1,13 @@ -import {MAX_GRAPHEME_LENGTH} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' +import {Text} from '../../util/text/Text' // @ts-ignore no type definition -prf import ProgressCircle from 'react-native-progress/Circle' // @ts-ignore no type definition -prf import ProgressPie from 'react-native-progress/Pie' - -import {Text} from '../../util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' const DANGER_LENGTH = MAX_GRAPHEME_LENGTH diff --git a/src/view/com/composer/labels/LabelsBtn.tsx b/src/view/com/composer/labels/LabelsBtn.tsx index 11f3d03d37..b880dd3306 100644 --- a/src/view/com/composer/labels/LabelsBtn.tsx +++ b/src/view/com/composer/labels/LabelsBtn.tsx @@ -1,14 +1,13 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {ShieldExclamation} from 'lib/icons' -import {isNative} from 'platform/detection' import React from 'react' import {Keyboard, StyleSheet} from 'react-native' import {Button} from 'view/com/util/forms/Button' - +import {usePalette} from 'lib/hooks/usePalette' +import {ShieldExclamation} from 'lib/icons' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' +import {isNative} from 'platform/detection' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {useModalControls} from '#/state/modals' export function LabelsBtn({ diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx index 380b70c9c8..69c8debb02 100644 --- a/src/view/com/composer/photos/Gallery.tsx +++ b/src/view/com/composer/photos/Gallery.tsx @@ -1,20 +1,19 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {Dimensions} from 'lib/media/types' -import {colors, s} from 'lib/styles' -import {observer} from 'mobx-react-lite' -import {isNative} from 'platform/detection' import React, {useState} from 'react' import {ImageStyle, Keyboard, LayoutChangeEvent} from 'react-native' -import {StyleSheet, TouchableOpacity, View} from 'react-native' import {GalleryModel} from 'state/models/media/gallery' +import {observer} from 'mobx-react-lite' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {s, colors} from 'lib/styles' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {Image} from 'expo-image' import {Text} from 'view/com/util/text/Text' - +import {Dimensions} from 'lib/media/types' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' +import {isNative} from 'platform/detection' const IMAGE_GAP = 8 diff --git a/src/view/com/composer/photos/OpenCameraBtn.tsx b/src/view/com/composer/photos/OpenCameraBtn.tsx index ce5318a2f6..4353704d57 100644 --- a/src/view/com/composer/photos/OpenCameraBtn.tsx +++ b/src/view/com/composer/photos/OpenCameraBtn.tsx @@ -1,21 +1,20 @@ +import React, {useCallback} from 'react' +import {TouchableOpacity, StyleSheet} from 'react-native' +import * as MediaLibrary from 'expo-media-library' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import * as MediaLibrary from 'expo-media-library' -import {useAnalytics} from 'lib/analytics/analytics' -import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' -import {useCameraPermission} from 'lib/hooks/usePermissions' +import {useAnalytics} from 'lib/analytics/analytics' import {openCamera} from 'lib/media/picker' -import {isMobileWeb, isNative} from 'platform/detection' -import React, {useCallback} from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' +import {useCameraPermission} from 'lib/hooks/usePermissions' +import {HITSLOP_10, POST_IMG_MAX} from 'lib/constants' import {GalleryModel} from 'state/models/media/gallery' - +import {isMobileWeb, isNative} from 'platform/detection' import {logger} from '#/logger' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = { gallery: GalleryModel diff --git a/src/view/com/composer/photos/SelectPhotoBtn.tsx b/src/view/com/composer/photos/SelectPhotoBtn.tsx index 1e0e64090f..f7fa9502d6 100644 --- a/src/view/com/composer/photos/SelectPhotoBtn.tsx +++ b/src/view/com/composer/photos/SelectPhotoBtn.tsx @@ -1,17 +1,17 @@ +import React, {useCallback} from 'react' +import {TouchableOpacity, StyleSheet} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {HITSLOP_10} from 'lib/constants' import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions' -import {isNative} from 'platform/detection' -import React, {useCallback} from 'react' -import {StyleSheet, TouchableOpacity} from 'react-native' import {GalleryModel} from 'state/models/media/gallery' +import {HITSLOP_10} from 'lib/constants' +import {isNative} from 'platform/detection' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = { gallery: GalleryModel diff --git a/src/view/com/composer/select-language/SelectLangBtn.tsx b/src/view/com/composer/select-language/SelectLangBtn.tsx index bfcf248ee1..78b1e9ba27 100644 --- a/src/view/com/composer/select-language/SelectLangBtn.tsx +++ b/src/view/com/composer/select-language/SelectLangBtn.tsx @@ -1,29 +1,27 @@ +import React, {useCallback, useMemo} from 'react' +import {StyleSheet, Keyboard} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, t} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {isNative} from 'platform/detection' -import React, {useCallback, useMemo} from 'react' -import {Keyboard, StyleSheet} from 'react-native' +import {Text} from 'view/com/util/text/Text' import { DropdownButton, DropdownItem, DropdownItemButton, } from 'view/com/util/forms/DropdownButton' -import {Text} from 'view/com/util/text/Text' - +import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from 'platform/detection' +import {codeToLanguageName} from '../../../../locale/helpers' import {useModalControls} from '#/state/modals' import { - hasPostLanguage, - toPostLanguages, useLanguagePrefs, useLanguagePrefsApi, + toPostLanguages, + hasPostLanguage, } from '#/state/preferences/languages' - -import {codeToLanguageName} from '../../../../locale/helpers' +import {t, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function SelectLangBtn() { const pal = usePalette('default') diff --git a/src/view/com/composer/select-language/SuggestedLanguage.tsx b/src/view/com/composer/select-language/SuggestedLanguage.tsx index 97a2a98300..0bf62ae0d8 100644 --- a/src/view/com/composer/select-language/SuggestedLanguage.tsx +++ b/src/view/com/composer/select-language/SuggestedLanguage.tsx @@ -1,24 +1,22 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import lande from 'lande' import React, {useEffect, useState} from 'react' import {StyleSheet, View} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {s} from '#/lib/styles' +import lande from 'lande' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {Text} from '../../util/text/Text' +import {Button} from '../../util/forms/Button' import {code3ToCode2Strict, codeToLanguageName} from '#/locale/helpers' import { toPostLanguages, useLanguagePrefs, useLanguagePrefsApi, } from '#/state/preferences/languages' - -import {Button} from '../../util/forms/Button' -import {Text} from '../../util/text/Text' +import {usePalette} from '#/lib/hooks/usePalette' +import {s} from '#/lib/styles' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' // fallbacks for safari const onIdle = globalThis.requestIdleCallback || (cb => setTimeout(cb, 1)) diff --git a/src/view/com/composer/text-input/TextInput.tsx b/src/view/com/composer/text-input/TextInput.tsx index 435adfa33c..20be585c25 100644 --- a/src/view/com/composer/text-input/TextInput.tsx +++ b/src/view/com/composer/text-input/TextInput.tsx @@ -1,24 +1,10 @@ -import {AppBskyRichtextFacet, RichText} from '@atproto/api' -import PasteInput, { - PastedFile, - PasteInputRef, -} from '@mattermost/react-native-paste-input' -import {POST_IMG_MAX} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {downloadAndResize} from 'lib/media/manip' -import {isUriImage} from 'lib/media/util' -import {cleanError} from 'lib/strings/errors' -import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' -import {useTheme} from 'lib/ThemeContext' -import isEqual from 'lodash.isequal' -import {isIOS} from 'platform/detection' import React, { - ComponentProps, forwardRef, useCallback, - useMemo, useRef, + useMemo, useState, + ComponentProps, } from 'react' import { NativeSyntheticEvent, @@ -27,9 +13,22 @@ import { TextInputSelectionChangeEventData, View, } from 'react-native' -import {Text} from 'view/com/util/text/Text' - +import PasteInput, { + PastedFile, + PasteInputRef, +} from '@mattermost/react-native-paste-input' +import {AppBskyRichtextFacet, RichText} from '@atproto/api' +import isEqual from 'lodash.isequal' import {Autocomplete} from './mobile/Autocomplete' +import {Text} from 'view/com/util/text/Text' +import {cleanError} from 'lib/strings/errors' +import {getMentionAt, insertMentionAt} from 'lib/strings/mention-manip' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {isUriImage} from 'lib/media/util' +import {downloadAndResize} from 'lib/media/manip' +import {POST_IMG_MAX} from 'lib/constants' +import {isIOS} from 'platform/detection' export interface TextInputRef { focus: () => void diff --git a/src/view/com/composer/text-input/TextInput.web.tsx b/src/view/com/composer/text-input/TextInput.web.tsx index 6b363558ab..c62d11201f 100644 --- a/src/view/com/composer/text-input/TextInput.web.tsx +++ b/src/view/com/composer/text-input/TextInput.web.tsx @@ -1,30 +1,28 @@ -import {AppBskyRichtextFacet, RichText} from '@atproto/api' -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {RichText, AppBskyRichtextFacet} from '@atproto/api' +import EventEmitter from 'eventemitter3' +import {useEditor, EditorContent, JSONContent} from '@tiptap/react' import {Document} from '@tiptap/extension-document' -import Hardbreak from '@tiptap/extension-hard-break' import History from '@tiptap/extension-history' +import Hardbreak from '@tiptap/extension-hard-break' import {Mention} from '@tiptap/extension-mention' import {Paragraph} from '@tiptap/extension-paragraph' import {Placeholder} from '@tiptap/extension-placeholder' import {Text as TiptapText} from '@tiptap/extension-text' -import {generateJSON} from '@tiptap/html' -import {EditorContent, JSONContent, useEditor} from '@tiptap/react' -import EventEmitter from 'eventemitter3' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {blobToDataUri, isUriImage} from 'lib/media/util' import isEqual from 'lodash.isequal' -import React from 'react' -import {StyleSheet, View} from 'react-native' -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' - -import {Portal} from '#/components/Portal' -import {usePalette} from '#/lib/hooks/usePalette' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' - -import {Text} from '../../util/text/Text' import {createSuggestion} from './web/Autocomplete' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {isUriImage, blobToDataUri} from 'lib/media/util' import {Emoji} from './web/EmojiPicker.web' import {LinkDecorator} from './web/LinkDecorator' +import {generateJSON} from '@tiptap/html' +import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {usePalette} from '#/lib/hooks/usePalette' +import {Portal} from '#/components/Portal' +import {Text} from '../../util/text/Text' +import {Trans} from '@lingui/macro' +import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' import {TagDecorator} from './web/TagDecorator' export interface TextInputRef { diff --git a/src/view/com/composer/text-input/mobile/Autocomplete.tsx b/src/view/com/composer/text-input/mobile/Autocomplete.tsx index 1e8b7900b5..c400aa48d5 100644 --- a/src/view/com/composer/text-input/mobile/Autocomplete.tsx +++ b/src/view/com/composer/text-input/mobile/Autocomplete.tsx @@ -1,15 +1,13 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {Trans} from '@lingui/macro' +import React, {useEffect, useRef} from 'react' +import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' -import React, {useEffect, useRef} from 'react' -import {Animated, StyleSheet, TouchableOpacity, View} from 'react-native' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' - -import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' - import {useGrapheme} from '../hooks/useGrapheme' +import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' +import {Trans} from '@lingui/macro' +import {AppBskyActorDefs} from '@atproto/api' export function Autocomplete({ prefix, diff --git a/src/view/com/composer/text-input/web/Autocomplete.tsx b/src/view/com/composer/text-input/web/Autocomplete.tsx index 21fae297c6..76058fed34 100644 --- a/src/view/com/composer/text-input/web/Autocomplete.tsx +++ b/src/view/com/composer/text-input/web/Autocomplete.tsx @@ -1,11 +1,3 @@ -import {Trans} from '@lingui/macro' -import {ReactRenderer} from '@tiptap/react' -import { - SuggestionKeyDownProps, - SuggestionOptions, - SuggestionProps, -} from '@tiptap/suggestion' -import {usePalette} from 'lib/hooks/usePalette' import React, { forwardRef, useEffect, @@ -13,13 +5,19 @@ import React, { useState, } from 'react' import {Pressable, StyleSheet, View} from 'react-native' +import {ReactRenderer} from '@tiptap/react' import tippy, {Instance as TippyInstance} from 'tippy.js' +import { + SuggestionOptions, + SuggestionProps, + SuggestionKeyDownProps, +} from '@tiptap/suggestion' +import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {usePalette} from 'lib/hooks/usePalette' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' - -import {ActorAutocompleteFn} from '#/state/queries/actor-autocomplete' - import {useGrapheme} from '../hooks/useGrapheme' +import {Trans} from '@lingui/macro' interface MentionListRef { onKeyDown: (props: SuggestionKeyDownProps) => boolean diff --git a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx index d918953de9..1493621160 100644 --- a/src/view/com/composer/text-input/web/EmojiPicker.web.tsx +++ b/src/view/com/composer/text-input/web/EmojiPicker.web.tsx @@ -1,12 +1,11 @@ -import Picker from '@emoji-mart/react' import React from 'react' +import Picker from '@emoji-mart/react' import { StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View, } from 'react-native' - import {textInputWebEmitter} from '../TextInput.web' const HEIGHT_OFFSET = 40 diff --git a/src/view/com/composer/text-input/web/LinkDecorator.ts b/src/view/com/composer/text-input/web/LinkDecorator.ts index 207dbe7e40..e36ac80e42 100644 --- a/src/view/com/composer/text-input/web/LinkDecorator.ts +++ b/src/view/com/composer/text-input/web/LinkDecorator.ts @@ -14,11 +14,12 @@ * the facet-set. */ -import {URL_REGEX} from '@atproto/api' import {Mark} from '@tiptap/core' -import {Node as ProsemirrorNode} from '@tiptap/pm/model' import {Plugin, PluginKey} from '@tiptap/pm/state' +import {Node as ProsemirrorNode} from '@tiptap/pm/model' import {Decoration, DecorationSet} from '@tiptap/pm/view' +import {URL_REGEX} from '@atproto/api' + import {isValidDomain} from 'lib/strings/url-helpers' export const LinkDecorator = Mark.create({ diff --git a/src/view/com/composer/text-input/web/TagDecorator.ts b/src/view/com/composer/text-input/web/TagDecorator.ts index 9225fd6bf9..2bf3184a8c 100644 --- a/src/view/com/composer/text-input/web/TagDecorator.ts +++ b/src/view/com/composer/text-input/web/TagDecorator.ts @@ -14,11 +14,11 @@ * the facet-set. */ -import {TAG_REGEX, TRAILING_PUNCTUATION_REGEX} from '@atproto/api' import {Mark} from '@tiptap/core' -import {Node as ProsemirrorNode} from '@tiptap/pm/model' import {Plugin, PluginKey} from '@tiptap/pm/state' +import {Node as ProsemirrorNode} from '@tiptap/pm/model' import {Decoration, DecorationSet} from '@tiptap/pm/view' +import {TAG_REGEX, TRAILING_PUNCTUATION_REGEX} from '@atproto/api' function getDecorations(doc: ProsemirrorNode) { const decorations: Decoration[] = [] diff --git a/src/view/com/composer/threadgate/ThreadgateBtn.tsx b/src/view/com/composer/threadgate/ThreadgateBtn.tsx index 0647d4215b..ebbc613fff 100644 --- a/src/view/com/composer/threadgate/ThreadgateBtn.tsx +++ b/src/view/com/composer/threadgate/ThreadgateBtn.tsx @@ -1,18 +1,17 @@ +import React from 'react' +import {TouchableOpacity, StyleSheet, Keyboard} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {usePalette} from 'lib/hooks/usePalette' import {useAnalytics} from 'lib/analytics/analytics' import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import React from 'react' -import {Keyboard, StyleSheet, TouchableOpacity} from 'react-native' - -import {isNative} from '#/platform/detection' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {useModalControls} from '#/state/modals' import {ThreadgateSetting} from '#/state/queries/threadgate' +import {isNative} from '#/platform/detection' export function ThreadgateBtn({ threadgate, diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts index 5daff41eab..54773d565c 100644 --- a/src/view/com/composer/useExternalLinkFetch.ts +++ b/src/view/com/composer/useExternalLinkFetch.ts @@ -1,25 +1,24 @@ +import {useState, useEffect} from 'react' +import {ImageModel} from 'state/models/media/image' import * as apilib from 'lib/api/index' -import {POST_IMG_MAX} from 'lib/constants' +import {getLinkMeta} from 'lib/link-meta/link-meta' import { + getPostAsQuote, getFeedAsEmbed, getListAsEmbed, - getPostAsQuote, } from 'lib/link-meta/bsky' -import {getLinkMeta} from 'lib/link-meta/link-meta' import {downloadAndResize} from 'lib/media/manip' import { + isBskyPostUrl, isBskyCustomFeedUrl, isBskyListUrl, - isBskyPostUrl, } from 'lib/strings/url-helpers' -import {useEffect, useState} from 'react' -import {ImageModel} from 'state/models/media/image' import {ComposerOpts} from 'state/shell/composer' - +import {POST_IMG_MAX} from 'lib/constants' import {logger} from '#/logger' -import {useFetchDid} from '#/state/queries/handle' -import {useGetPost} from '#/state/queries/post' import {getAgent} from '#/state/session' +import {useGetPost} from '#/state/queries/post' +import {useFetchDid} from '#/state/queries/handle' export function useExternalLinkFetch({ setQuote, diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx index 1694877534..e6b5d1fb68 100644 --- a/src/view/com/feeds/FeedPage.tsx +++ b/src/view/com/feeds/FeedPage.tsx @@ -1,29 +1,27 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' import {useNavigation} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' import {useAnalytics} from 'lib/analytics/analytics' +import {useQueryClient} from '@tanstack/react-query' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' +import {MainScrollProvider} from '../util/MainScrollProvider' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useSetMinimalShellMode} from '#/state/shell' +import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' import {ComposeIcon2} from 'lib/icons' import {s} from 'lib/styles' -import React from 'react' -import {useWindowDimensions, View} from 'react-native' - -import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers' -import {isNative} from '#/platform/detection' -import {listenSoftReset} from '#/state/events' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' -import {truncateAndInvalidate} from '#/state/queries/util' -import {useSession} from '#/state/session' -import {useSetMinimalShellMode} from '#/state/shell' -import {useComposerControls} from '#/state/shell/composer' - +import {View, useWindowDimensions} from 'react-native' +import {ListMethods} from '../util/List' import {Feed} from '../posts/Feed' import {FAB} from '../util/fab/FAB' -import {ListMethods} from '../util/List' import {LoadLatestBtn} from '../util/load-latest/LoadLatestBtn' -import {MainScrollProvider} from '../util/MainScrollProvider' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSession} from '#/state/session' +import {useComposerControls} from '#/state/shell/composer' +import {listenSoftReset} from '#/state/events' +import {truncateAndInvalidate} from '#/state/queries/util' +import {TabState, getTabState, getRootNavigation} from '#/lib/routes/helpers' +import {isNative} from '#/platform/detection' const POLL_FREQ = 60e3 // 60sec diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index 4e0865af57..4af62f6f63 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -1,32 +1,30 @@ -import {AtUri} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' -import {usePalette} from 'lib/hooks/usePalette' -import {sanitizeHandle} from 'lib/strings/handles' -import {pluralize} from 'lib/strings/helpers' -import {s} from 'lib/styles' import React from 'react' import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import * as Toast from 'view/com/util/Toast' - -import {useTheme} from '#/alf' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from '../util/text/Text' import {RichText} from '#/components/RichText' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {UserAvatar} from '../util/UserAvatar' +import {pluralize} from 'lib/strings/helpers' +import {AtUri} from '@atproto/api' +import * as Toast from 'view/com/util/Toast' +import {sanitizeHandle} from 'lib/strings/handles' import {logger} from '#/logger' import {useModalControls} from '#/state/modals' -import {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { usePinFeedMutation, - usePreferencesQuery, UsePreferencesQueryResponse, - useRemoveFeedMutation, + usePreferencesQuery, useSaveFeedMutation, + useRemoveFeedMutation, } from '#/state/queries/preferences' +import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' - -import {Text} from '../util/text/Text' -import {UserAvatar} from '../util/UserAvatar' +import {useTheme} from '#/alf' +import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped' export function FeedSourceCard({ feedUri, diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index 702fe0d4e8..e9cf9e5359 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -1,24 +1,22 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQueryClient} from '@tanstack/react-query' -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {useTheme} from '#/lib/ThemeContext' -import {logger} from '#/logger' -import {isNative} from '#/platform/detection' -import {hydrateFeedGenerator} from '#/state/queries/feed' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' -import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' - -import {ErrorMessage} from '../util/error/ErrorMessage' +import {useQueryClient} from '@tanstack/react-query' import {List, ListRef} from '../util/List' +import {FeedSourceCardLoaded} from './FeedSourceCard' +import {ErrorMessage} from '../util/error/ErrorMessage' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {Text} from '../util/text/Text' -import {FeedSourceCardLoaded} from './FeedSourceCard' +import {usePalette} from 'lib/hooks/usePalette' +import {useProfileFeedgensQuery, RQKEY} from '#/state/queries/profile-feedgens' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {cleanError} from '#/lib/strings/errors' +import {useTheme} from '#/lib/ThemeContext' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {hydrateFeedGenerator} from '#/state/queries/feed' +import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {isNative} from '#/platform/detection' +import {useLingui} from '@lingui/react' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/home/HomeHeader.tsx b/src/view/com/home/HomeHeader.tsx index 13819142a2..aa3ecb7fc2 100644 --- a/src/view/com/home/HomeHeader.tsx +++ b/src/view/com/home/HomeHeader.tsx @@ -1,14 +1,12 @@ +import React from 'react' +import {RenderTabBarFnProps} from 'view/com/pager/Pager' +import {HomeHeaderLayout} from './HomeHeaderLayout' +import {FeedSourceInfo} from '#/state/queries/feed' import {useNavigation} from '@react-navigation/native' import {NavigationProp} from 'lib/routes/types' import {isWeb} from 'platform/detection' -import React from 'react' -import {RenderTabBarFnProps} from 'view/com/pager/Pager' - -import {usePalette} from '#/lib/hooks/usePalette' -import {FeedSourceInfo} from '#/state/queries/feed' - import {TabBar} from '../pager/TabBar' -import {HomeHeaderLayout} from './HomeHeaderLayout' +import {usePalette} from '#/lib/hooks/usePalette' export function HomeHeader( props: RenderTabBarFnProps & { diff --git a/src/view/com/home/HomeHeaderLayout.web.tsx b/src/view/com/home/HomeHeaderLayout.web.tsx index 25d90e4e4b..9818b56f6f 100644 --- a/src/view/com/home/HomeHeaderLayout.web.tsx +++ b/src/view/com/home/HomeHeaderLayout.web.tsx @@ -1,22 +1,20 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import Animated from 'react-native-reanimated' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' +import {Logo} from '#/view/icons/Logo' +import {Link} from '../util/Link' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import React from 'react' -import {StyleSheet, View} from 'react-native' -import Animated from 'react-native-reanimated' - +import {msg} from '@lingui/macro' import {CogIcon} from '#/lib/icons' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useShellLayout} from '#/state/shell/shell-layout' -import {Logo} from '#/view/icons/Logo' - -import {Link} from '../util/Link' -import {HomeHeaderLayoutMobile} from './HomeHeaderLayoutMobile' export function HomeHeaderLayout(props: { children: React.ReactNode diff --git a/src/view/com/home/HomeHeaderLayoutMobile.tsx b/src/view/com/home/HomeHeaderLayoutMobile.tsx index c621c80d2a..d7b7231c60 100644 --- a/src/view/com/home/HomeHeaderLayoutMobile.tsx +++ b/src/view/com/home/HomeHeaderLayoutMobile.tsx @@ -1,24 +1,23 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {HITSLOP_10} from 'lib/constants' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {usePalette} from 'lib/hooks/usePalette' -import {isWeb} from 'platform/detection' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {Link} from '../util/Link' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' +import {HITSLOP_10} from 'lib/constants' import Animated from 'react-native-reanimated' - -import {atoms} from '#/alf' -import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' -import {Link as Link2} from '#/components/Link' -import {IS_DEV} from '#/env' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useSetDrawerOpen} from '#/state/shell/drawer-open' import {useShellLayout} from '#/state/shell/shell-layout' +import {isWeb} from 'platform/detection' import {Logo} from '#/view/icons/Logo' -import {Link} from '../util/Link' +import {IS_DEV} from '#/env' +import {atoms} from '#/alf' +import {Link as Link2} from '#/components/Link' +import {ColorPalette_Stroke2_Corner0_Rounded as ColorPalette} from '#/components/icons/ColorPalette' export function HomeHeaderLayoutMobile({ children, diff --git a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx index eecc3f6f36..3401adaff4 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx @@ -5,10 +5,10 @@ * LICENSE file in the root directory of this source tree. * */ -import {t} from '@lingui/macro' -import {createHitslop} from 'lib/constants' import React from 'react' -import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native' +import {createHitslop} from 'lib/constants' +import {SafeAreaView, Text, TouchableOpacity, StyleSheet} from 'react-native' +import {t} from '@lingui/macro' type Props = { onRequestClose: () => void diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx index 85963067c5..414f98a611 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -1,28 +1,28 @@ -import {Image} from 'expo-image' import React, {useState} from 'react' + import {ActivityIndicator, Dimensions, StyleSheet} from 'react-native' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import {Image} from 'expo-image' import Animated, { runOnJS, - useAnimatedReaction, useAnimatedRef, useAnimatedStyle, + useAnimatedReaction, useSharedValue, withDecay, withSpring, } from 'react-native-reanimated' - -import type {Dimensions as ImageDimensions, ImageSource} from '../../@types' +import {GestureDetector, Gesture} from 'react-native-gesture-handler' import useImageDimensions from '../../hooks/useImageDimensions' import { - applyRounding, createTransform, + readTransform, + applyRounding, prependPan, prependPinch, prependTransform, - readTransform, TransformMatrix, } from '../../transforms' +import type {ImageSource, Dimensions as ImageDimensions} from '../../@types' const SCREEN = Dimensions.get('window') const MIN_DOUBLE_TAP_SCALE = 2 diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index 5fabeb1703..383490f4f1 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -6,10 +6,10 @@ * */ -import {Image} from 'expo-image' import React, {useState} from 'react' + import {Dimensions, StyleSheet} from 'react-native' -import {Gesture, GestureDetector} from 'react-native-gesture-handler' +import {Image} from 'expo-image' import Animated, { interpolate, runOnJS, @@ -17,11 +17,12 @@ import Animated, { useAnimatedStyle, useSharedValue, } from 'react-native-reanimated' - import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' +import {Gesture, GestureDetector} from 'react-native-gesture-handler' -import {Dimensions as ImageDimensions, ImageSource} from '../../@types' import useImageDimensions from '../../hooks/useImageDimensions' + +import {ImageSource, Dimensions as ImageDimensions} from '../../@types' import {ImageLoading} from './ImageLoading' const SWIPE_CLOSE_OFFSET = 75 diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index 4cb7903efa..08b99bf9ee 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -2,7 +2,6 @@ import React from 'react' import {View} from 'react-native' - import {ImageSource} from '../../@types' type Props = { diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx index 318e7d8da2..9667fcaa7b 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageLoading.tsx @@ -7,6 +7,7 @@ */ import React from 'react' + import {ActivityIndicator, Dimensions, StyleSheet, View} from 'react-native' const SCREEN = Dimensions.get('screen') diff --git a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts index 46f9f22953..cb46fd0d9c 100644 --- a/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts +++ b/src/view/com/lightbox/ImageViewing/hooks/useImageDimensions.ts @@ -8,7 +8,6 @@ import {useEffect, useState} from 'react' import {Image, ImageURISource} from 'react-native' - import {Dimensions, ImageSource} from '../@types' const CACHE_SIZE = 50 diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index 1432b34ff8..ff8fdb86d3 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -9,14 +9,15 @@ // https://github.com/jobtoday/react-native-image-viewing import React, {ComponentType, useCallback, useMemo, useState} from 'react' -import {Platform, StyleSheet, View} from 'react-native' -import PagerView from 'react-native-pager-view' -import Animated, {useAnimatedStyle, withSpring} from 'react-native-reanimated' -import {Edge, SafeAreaView} from 'react-native-safe-area-context' +import {StyleSheet, View, Platform} from 'react-native' + +import ImageItem from './components/ImageItem/ImageItem' +import ImageDefaultHeader from './components/ImageDefaultHeader' import {ImageSource} from './@types' -import ImageDefaultHeader from './components/ImageDefaultHeader' -import ImageItem from './components/ImageItem/ImageItem' +import Animated, {useAnimatedStyle, withSpring} from 'react-native-reanimated' +import {Edge, SafeAreaView} from 'react-native-safe-area-context' +import PagerView from 'react-native-pager-view' type Props = { images: ImageSource[] diff --git a/src/view/com/lightbox/Lightbox.tsx b/src/view/com/lightbox/Lightbox.tsx index b3e5dfb9b2..2ee5b8d593 100644 --- a/src/view/com/lightbox/Lightbox.tsx +++ b/src/view/com/lightbox/Lightbox.tsx @@ -1,24 +1,22 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import * as MediaLibrary from 'expo-media-library' -import {saveImageToMediaLibrary, shareImageModal} from 'lib/media/manip' -import {colors, s} from 'lib/styles' -import {isIOS} from 'platform/detection' import React from 'react' import {LayoutAnimation, StyleSheet, View} from 'react-native' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import ImageView from './ImageViewing' +import {shareImageModal, saveImageToMediaLibrary} from 'lib/media/manip' +import * as Toast from '../util/Toast' +import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {Button} from '../util/forms/Button' +import {isIOS} from 'platform/detection' +import * as MediaLibrary from 'expo-media-library' import { - ImagesLightbox, - ProfileImageLightbox, useLightbox, useLightboxControls, + ProfileImageLightbox, + ImagesLightbox, } from '#/state/lightbox' - -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import ImageView from './ImageViewing' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function Lightbox() { const {activeLightbox} = useLightbox() diff --git a/src/view/com/lightbox/Lightbox.web.tsx b/src/view/com/lightbox/Lightbox.web.tsx index e3c3d5acde..fb97c30a45 100644 --- a/src/view/com/lightbox/Lightbox.web.tsx +++ b/src/view/com/lightbox/Lightbox.web.tsx @@ -1,31 +1,29 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {colors, s} from 'lib/styles' import React, {useCallback, useEffect, useState} from 'react' import { Image, ImageStyle, - Pressable, - StyleSheet, TouchableOpacity, TouchableWithoutFeedback, + StyleSheet, View, + Pressable, } from 'react-native' - -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import { - ImagesLightbox, - ProfileImageLightbox, + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {colors, s} from 'lib/styles' +import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' +import {Text} from '../util/text/Text' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import { useLightbox, useLightboxControls, + ImagesLightbox, + ProfileImageLightbox, } from '#/state/lightbox' - -import {Text} from '../util/text/Text' -import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' interface Img { uri: string diff --git a/src/view/com/lists/ListCard.tsx b/src/view/com/lists/ListCard.tsx index 0a36902a42..19842eb54d 100644 --- a/src/view/com/lists/ListCard.tsx +++ b/src/view/com/lists/ListCard.tsx @@ -1,20 +1,18 @@ -import {AppBskyGraphDefs, AtUri, RichText} from '@atproto/api' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {atoms as a} from '#/alf' -import {RichText as RichTextCom} from '#/components/RichText' -import {useSession} from '#/state/session' - +import {AtUri, AppBskyGraphDefs, RichText} from '@atproto/api' import {Link} from '../util/Link' import {Text} from '../util/text/Text' +import {RichText as RichTextCom} from '#/components/RichText' import {UserAvatar} from '../util/UserAvatar' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useSession} from '#/state/session' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import {Trans} from '@lingui/macro' +import {atoms as a} from '#/alf' export const ListCard = ({ testID, diff --git a/src/view/com/lists/ListMembers.tsx b/src/view/com/lists/ListMembers.tsx index 796db89673..4f2b56426e 100644 --- a/src/view/com/lists/ListMembers.tsx +++ b/src/view/com/lists/ListMembers.tsx @@ -1,8 +1,3 @@ -import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import { ActivityIndicator, @@ -11,19 +6,22 @@ import { View, ViewStyle, } from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {useModalControls} from '#/state/modals' -import {useListMembersQuery} from '#/state/queries/list-members' -import {useSession} from '#/state/session' - -import {ProfileCard} from '../profile/ProfileCard' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' +import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' import {List, ListRef} from '../util/List' import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {ErrorMessage} from '../util/error/ErrorMessage' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {ProfileCard} from '../profile/ProfileCard' +import {Button} from '../util/forms/Button' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useListMembersQuery} from '#/state/queries/list-members' +import {logger} from '#/logger' +import {useModalControls} from '#/state/modals' +import {useSession} from '#/state/session' +import {cleanError} from '#/lib/strings/errors' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_ITEM = {_reactKey: '__empty__'} diff --git a/src/view/com/lists/MyLists.tsx b/src/view/com/lists/MyLists.tsx index 8d746ca340..e9d2e4f0fe 100644 --- a/src/view/com/lists/MyLists.tsx +++ b/src/view/com/lists/MyLists.tsx @@ -1,8 +1,3 @@ -import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {Trans} from '@lingui/macro' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -13,15 +8,18 @@ import { View, ViewStyle, } from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List} from '../util/List' -import {Text} from '../util/text/Text' +import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' import {ListCard} from './ListCard' +import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {List} from '../util/List' +import {s} from 'lib/styles' +import {logger} from '#/logger' +import {Trans} from '@lingui/macro' +import {cleanError} from '#/lib/strings/errors' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index d2344914ae..a47b25bed4 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -1,23 +1,21 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {useTheme} from '#/lib/ThemeContext' -import {logger} from '#/logger' -import {isNative} from '#/platform/detection' -import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' -import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' - -import {ErrorMessage} from '../util/error/ErrorMessage' +import {useQueryClient} from '@tanstack/react-query' import {List, ListRef} from '../util/List' +import {ListCard} from './ListCard' +import {ErrorMessage} from '../util/error/ErrorMessage' import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' import {Text} from '../util/text/Text' -import {ListCard} from './ListCard' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {useProfileListsQuery, RQKEY} from '#/state/queries/profile-lists' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {cleanError} from '#/lib/strings/errors' +import {useTheme} from '#/lib/ThemeContext' +import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {isNative} from '#/platform/detection' +import {useLingui} from '@lingui/react' const LOADING = {_reactKey: '__loading__'} const EMPTY = {_reactKey: '__empty__'} diff --git a/src/view/com/modals/AddAppPasswords.tsx b/src/view/com/modals/AddAppPasswords.tsx index 2346f6d4e0..a8913dd54c 100644 --- a/src/view/com/modals/AddAppPasswords.tsx +++ b/src/view/com/modals/AddAppPasswords.tsx @@ -1,27 +1,25 @@ +import React, {useState} from 'react' +import {StyleSheet, TextInput, View, TouchableOpacity} from 'react-native' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from 'platform/detection' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import Clipboard from '@react-native-clipboard/clipboard' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' -import {isNative} from 'platform/detection' -import React, {useState} from 'react' -import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native' - +import * as Toast from '../util/Toast' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { - useAppPasswordCreateMutation, useAppPasswordsQuery, + useAppPasswordCreateMutation, } from '#/state/queries/app-passwords' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' - export const snapPoints = ['70%'] const shadesOfBlue: string[] = [ diff --git a/src/view/com/modals/AltImage.tsx b/src/view/com/modals/AltImage.tsx index e3e872a172..17ce05cda8 100644 --- a/src/view/com/modals/AltImage.tsx +++ b/src/view/com/modals/AltImage.tsx @@ -1,30 +1,28 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' -import {MAX_ALT_TEXT} from 'lib/constants' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {usePalette} from 'lib/hooks/usePalette' -import {enforceLen} from 'lib/strings/helpers' -import {gradients, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' -import React, {useCallback, useMemo, useState} from 'react' +import React, {useMemo, useCallback, useState} from 'react' import { ImageStyle, - ScrollView as RNScrollView, StyleSheet, - TextInput as RNTextInput, TouchableOpacity, - useWindowDimensions, View, + TextInput as RNTextInput, + useWindowDimensions, + ScrollView as RNScrollView, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' -import {ImageModel} from 'state/models/media/image' - -import {useModalControls} from '#/state/modals' - -import {Text} from '../util/text/Text' import {ScrollView, TextInput} from './util' +import {Image} from 'expo-image' +import {usePalette} from 'lib/hooks/usePalette' +import {gradients, s} from 'lib/styles' +import {enforceLen} from 'lib/strings/helpers' +import {MAX_ALT_TEXT} from 'lib/constants' +import {useTheme} from 'lib/ThemeContext' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {Text} from '../util/text/Text' +import LinearGradient from 'react-native-linear-gradient' +import {isWeb} from 'platform/detection' +import {ImageModel} from 'state/models/media/image' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {useModalControls} from '#/state/modals' export const snapPoints = ['100%'] diff --git a/src/view/com/modals/AppealLabel.tsx b/src/view/com/modals/AppealLabel.tsx index 5756452a2a..b0aaaf6255 100644 --- a/src/view/com/modals/AppealLabel.tsx +++ b/src/view/com/modals/AppealLabel.tsx @@ -1,19 +1,17 @@ -import {ComAtprotoModerationDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' import React, {useState} from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {useModalControls} from '#/state/modals' -import {getAgent} from '#/state/session' - -import {CharProgress} from '../composer/char-progress/CharProgress' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' +import {ComAtprotoModerationDefs} from '@atproto/api' import {ScrollView, TextInput} from './util' +import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {CharProgress} from '../composer/char-progress/CharProgress' +import {getAgent} from '#/state/session' +import * as Toast from '../util/Toast' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' export const snapPoints = ['40%'] diff --git a/src/view/com/modals/BirthDateSettings.tsx b/src/view/com/modals/BirthDateSettings.tsx index dc8b914a50..1cab959896 100644 --- a/src/view/com/modals/BirthDateSettings.tsx +++ b/src/view/com/modals/BirthDateSettings.tsx @@ -1,10 +1,3 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -12,18 +5,23 @@ import { TouchableOpacity, View, } from 'react-native' - -import {logger} from '#/logger' +import {Text} from '../util/text/Text' +import {DateInput} from '../util/forms/DateInput' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { usePreferencesQuery, - UsePreferencesQueryResponse, usePreferencesSetBirthDateMutation, + UsePreferencesQueryResponse, } from '#/state/queries/preferences' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {DateInput} from '../util/forms/DateInput' -import {Text} from '../util/text/Text' +import {logger} from '#/logger' export const snapPoints = ['50%', '90%'] diff --git a/src/view/com/modals/ChangeEmail.tsx b/src/view/com/modals/ChangeEmail.tsx index 23d0b6f0d7..c5672bc814 100644 --- a/src/view/com/modals/ChangeEmail.tsx +++ b/src/view/com/modals/ChangeEmail.tsx @@ -1,21 +1,19 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native' - -import {useModalControls} from '#/state/modals' -import {getAgent, useSession, useSessionApi} from '#/state/session' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' import {ScrollView, TextInput} from './util' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {ErrorMessage} from '../util/error/ErrorMessage' +import * as Toast from '../util/Toast' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useSession, useSessionApi, getAgent} from '#/state/session' enum Stages { InputEmail, diff --git a/src/view/com/modals/ChangeHandle.tsx b/src/view/com/modals/ChangeHandle.tsx index 1521b2d5cc..a43c30c29c 100644 --- a/src/view/com/modals/ChangeHandle.tsx +++ b/src/view/com/modals/ChangeHandle.tsx @@ -1,39 +1,37 @@ -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import Clipboard from '@react-native-clipboard/clipboard' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {cleanError} from 'lib/strings/errors' -import {createFullHandle, makeValidHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' import React, {useState} from 'react' +import Clipboard from '@react-native-clipboard/clipboard' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import * as Toast from '../util/Toast' import { ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native' - -import {logger} from '#/logger' -import {useModalControls} from '#/state/modals' -import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle' -import {useServiceQuery} from '#/state/queries/service' -import { - getAgent, - SessionAccount, - useSession, - useSessionApi, -} from '#/state/session' - -import {ErrorMessage} from '../util/error/ErrorMessage' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {ScrollView, TextInput} from './util' +import {Text} from '../util/text/Text' import {Button} from '../util/forms/Button' import {SelectableBtn} from '../util/forms/SelectableBtn' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {ScrollView, TextInput} from './util' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {s} from 'lib/styles' +import {createFullHandle, makeValidHandle} from 'lib/strings/handles' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useAnalytics} from 'lib/analytics/analytics' +import {cleanError} from 'lib/strings/errors' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useServiceQuery} from '#/state/queries/service' +import {useUpdateHandleMutation, useFetchDid} from '#/state/queries/handle' +import { + useSession, + useSessionApi, + SessionAccount, + getAgent, +} from '#/state/session' export const snapPoints = ['100%'] diff --git a/src/view/com/modals/ChangePassword.tsx b/src/view/com/modals/ChangePassword.tsx index ba60e5d889..d8add97946 100644 --- a/src/view/com/modals/ChangePassword.tsx +++ b/src/view/com/modals/ChangePassword.tsx @@ -1,13 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import * as EmailValidator from 'email-validator' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError, isNetworkError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' -import {colors, s} from 'lib/styles' -import {isAndroid, isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -16,16 +6,24 @@ import { TouchableOpacity, View, } from 'react-native' - -import {logger} from '#/logger' -import {useModalControls} from '#/state/modals' -import {getAgent, useSession} from '#/state/session' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' import {ScrollView} from './util' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {TextInput} from './util' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isAndroid, isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError, isNetworkError} from 'lib/strings/errors' +import {checkAndFormatResetCode} from 'lib/strings/password' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useSession, getAgent} from '#/state/session' +import * as EmailValidator from 'email-validator' +import {logger} from '#/logger' enum Stages { RequestCode, diff --git a/src/view/com/modals/Confirm.tsx b/src/view/com/modals/Confirm.tsx index 470d3cf61f..307897fb8a 100644 --- a/src/view/com/modals/Confirm.tsx +++ b/src/view/com/modals/Confirm.tsx @@ -1,9 +1,3 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {cleanError} from 'lib/strings/errors' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -11,13 +5,17 @@ import { TouchableOpacity, View, } from 'react-native' - +import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {cleanError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' import type {ConfirmModal} from '#/state/modals' import {useModalControls} from '#/state/modals' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' - export const snapPoints = ['50%'] export function Component({ diff --git a/src/view/com/modals/ContentFilteringSettings.tsx b/src/view/com/modals/ContentFilteringSettings.tsx index ed0b6dcf82..328d23dc29 100644 --- a/src/view/com/modals/ContentFilteringSettings.tsx +++ b/src/view/com/modals/ContentFilteringSettings.tsx @@ -1,32 +1,30 @@ -import {LabelPreference} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {colors, gradients, s} from 'lib/styles' -import {isIOS} from 'platform/detection' import React from 'react' -import {Linking, Pressable, StyleSheet, View} from 'react-native' +import {LabelPreference} from '@atproto/api' +import {StyleSheet, Pressable, View, Linking} from 'react-native' import LinearGradient from 'react-native-linear-gradient' - +import {ScrollView} from './util' +import {s, colors, gradients} from 'lib/styles' +import {Text} from '../util/text/Text' +import {TextLink} from '../util/Link' +import {ToggleButton} from '../util/forms/ToggleButton' +import {Button} from '../util/forms/Button' +import {usePalette} from 'lib/hooks/usePalette' +import {isIOS} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import * as Toast from '../util/Toast' import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { - CONFIGURABLE_LABEL_GROUPS, - ConfigurableLabelGroup, usePreferencesQuery, - UsePreferencesQueryResponse, - usePreferencesSetAdultContentMutation, usePreferencesSetContentLabelMutation, + usePreferencesSetAdultContentMutation, + ConfigurableLabelGroup, + CONFIGURABLE_LABEL_GROUPS, + UsePreferencesQueryResponse, } from '#/state/queries/preferences' -import {Button} from '../util/forms/Button' -import {ToggleButton} from '../util/forms/ToggleButton' -import {TextLink} from '../util/Link' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {ScrollView} from './util' - export const snapPoints = ['90%'] export function Component({}: {}) { diff --git a/src/view/com/modals/CreateOrEditList.tsx b/src/view/com/modals/CreateOrEditList.tsx index 3c7618e1e6..0e11fcffd5 100644 --- a/src/view/com/modals/CreateOrEditList.tsx +++ b/src/view/com/modals/CreateOrEditList.tsx @@ -1,19 +1,4 @@ -import { - AppBskyGraphDefs, - AppBskyRichtextFacet, - RichText as RichTextAPI, -} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {compressIfNeeded} from 'lib/media/manip' -import {cleanError, isNetworkError} from 'lib/strings/errors' -import {enforceLen} from 'lib/strings/helpers' -import {colors, gradients, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import React, {useCallback, useMemo, useState} from 'react' +import React, {useState, useCallback, useMemo} from 'react' import { ActivityIndicator, KeyboardAvoidingView, @@ -23,23 +8,36 @@ import { TouchableOpacity, View, } from 'react-native' -import {Image as RNImage} from 'react-native-image-crop-picker' +import { + AppBskyGraphDefs, + AppBskyRichtextFacet, + RichText as RichTextAPI, +} from '@atproto/api' import LinearGradient from 'react-native-linear-gradient' - -import {richTextToString} from '#/lib/strings/rich-text-helpers' -import {shortenLinks} from '#/lib/strings/rich-text-manip' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {Text} from '../util/text/Text' +import {ErrorMessage} from '../util/error/ErrorMessage' +import * as Toast from '../util/Toast' +import {s, colors, gradients} from 'lib/styles' +import {enforceLen} from 'lib/strings/helpers' +import {compressIfNeeded} from 'lib/media/manip' +import {EditableUserAvatar} from '../util/UserAvatar' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError, isNetworkError} from 'lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { useListCreateMutation, useListMetadataMutation, } from '#/state/queries/list' +import {richTextToString} from '#/lib/strings/rich-text-helpers' +import {shortenLinks} from '#/lib/strings/rich-text-manip' import {getAgent} from '#/state/session' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {EditableUserAvatar} from '../util/UserAvatar' - const MAX_NAME = 64 // todo const MAX_DESCRIPTION = 300 // todo diff --git a/src/view/com/modals/DeleteAccount.tsx b/src/view/com/modals/DeleteAccount.tsx index f0d2af8d25..40d78cfe0c 100644 --- a/src/view/com/modals/DeleteAccount.tsx +++ b/src/view/com/modals/DeleteAccount.tsx @@ -1,29 +1,27 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {colors, gradients, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isAndroid} from 'platform/detection' import React from 'react' import { - ActivityIndicator, SafeAreaView, + ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native' +import {TextInput, ScrollView} from './util' import LinearGradient from 'react-native-linear-gradient' - -import {useModalControls} from '#/state/modals' -import {getAgent, useSession, useSessionApi} from '#/state/session' - -import {resetToTab} from '../../../Navigation' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' import * as Toast from '../util/Toast' -import {ScrollView, TextInput} from './util' +import {Text} from '../util/text/Text' +import {s, colors, gradients} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {cleanError} from 'lib/strings/errors' +import {resetToTab} from '../../../Navigation' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useSession, useSessionApi, getAgent} from '#/state/session' +import {isAndroid} from 'platform/detection' export const snapPoints = isAndroid ? ['90%'] : ['55%'] diff --git a/src/view/com/modals/EditImage.tsx b/src/view/com/modals/EditImage.tsx index 0b77a506a1..3b35ffee21 100644 --- a/src/view/com/modals/EditImage.tsx +++ b/src/view/com/modals/EditImage.tsx @@ -1,29 +1,27 @@ -import {MaterialIcons} from '@expo/vector-icons' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Slider} from '@miblanchard/react-native-slider' -import {MAX_ALT_TEXT} from 'lib/constants' +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' +import {Pressable, StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' -import {enforceLen} from 'lib/strings/helpers' +import {useWindowDimensions} from 'react-native' import {gradients, s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import {getKeys} from 'lib/type-assertions' -import {observer} from 'mobx-react-lite' -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' -import ImageEditor, {Position} from 'react-avatar-editor' -import {Pressable, StyleSheet, View} from 'react-native' -import {useWindowDimensions} from 'react-native' +import {Text} from '../util/text/Text' import LinearGradient from 'react-native-linear-gradient' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import ImageEditor, {Position} from 'react-avatar-editor' +import {TextInput} from './util' +import {enforceLen} from 'lib/strings/helpers' +import {MAX_ALT_TEXT} from 'lib/constants' import {GalleryModel} from 'state/models/media/gallery' import {ImageModel} from 'state/models/media/image' - +import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' +import {Slider} from '@miblanchard/react-native-slider' +import {MaterialIcons} from '@expo/vector-icons' +import {observer} from 'mobx-react-lite' +import {getKeys} from 'lib/type-assertions' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' -import {Text} from '../util/text/Text' -import {TextInput} from './util' - export const snapPoints = ['80%'] const RATIOS = { diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index 7e11e6bbc2..097b7b0d1b 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -1,16 +1,5 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {compressIfNeeded} from 'lib/media/manip' -import {cleanError} from 'lib/strings/errors' -import {enforceLen} from 'lib/strings/helpers' -import {colors, gradients, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' -import React, {useCallback, useState} from 'react' +import React, {useState, useCallback} from 'react' +import * as Toast from '../util/Toast' import { ActivityIndicator, KeyboardAvoidingView, @@ -20,19 +9,28 @@ import { TouchableOpacity, View, } from 'react-native' -import {Image as RNImage} from 'react-native-image-crop-picker' import LinearGradient from 'react-native-linear-gradient' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {AppBskyActorDefs} from '@atproto/api' +import {Text} from '../util/text/Text' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {s, colors, gradients} from 'lib/styles' +import {enforceLen} from 'lib/strings/helpers' +import {MAX_DISPLAY_NAME, MAX_DESCRIPTION} from 'lib/constants' +import {compressIfNeeded} from 'lib/media/manip' +import {UserBanner} from '../util/UserBanner' +import {EditableUserAvatar} from '../util/UserAvatar' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useAnalytics} from 'lib/analytics/analytics' +import {cleanError} from 'lib/strings/errors' import Animated, {FadeOut} from 'react-native-reanimated' - -import {logger} from '#/logger' +import {isWeb} from 'platform/detection' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import {useProfileUpdateMutation} from '#/state/queries/profile' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {EditableUserAvatar} from '../util/UserAvatar' -import {UserBanner} from '../util/UserBanner' +import {logger} from '#/logger' const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) diff --git a/src/view/com/modals/EmbedConsent.tsx b/src/view/com/modals/EmbedConsent.tsx index 9eaaf082a0..04104c52e1 100644 --- a/src/view/com/modals/EmbedConsent.tsx +++ b/src/view/com/modals/EmbedConsent.tsx @@ -1,22 +1,20 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, gradients, s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' - -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' +import {s, colors, gradients} from 'lib/styles' +import {Text} from '../util/text/Text' +import {ScrollView} from './util' +import {usePalette} from 'lib/hooks/usePalette' import { EmbedPlayerSource, embedPlayerSources, externalEmbedLabels, } from '#/lib/strings/embed-player' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import {useSetExternalEmbedPref} from '#/state/preferences/external-embeds-prefs' - -import {Text} from '../util/text/Text' -import {ScrollView} from './util' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' export const snapPoints = [450] diff --git a/src/view/com/modals/InAppBrowserConsent.tsx b/src/view/com/modals/InAppBrowserConsent.tsx index cc19037571..86bb46ca81 100644 --- a/src/view/com/modals/InAppBrowserConsent.tsx +++ b/src/view/com/modals/InAppBrowserConsent.tsx @@ -1,20 +1,20 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' +import {s} from 'lib/styles' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {ScrollView} from './util' +import {usePalette} from 'lib/hooks/usePalette' + +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { useOpenLink, useSetInAppBrowser, } from '#/state/preferences/in-app-browser' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import {ScrollView} from './util' - export const snapPoints = [350] export function Component({href}: {href: string}) { diff --git a/src/view/com/modals/InviteCodes.tsx b/src/view/com/modals/InviteCodes.tsx index 80155e2280..c0318df015 100644 --- a/src/view/com/modals/InviteCodes.tsx +++ b/src/view/com/modals/InviteCodes.tsx @@ -1,38 +1,36 @@ +import React from 'react' +import { + StyleSheet, + TouchableOpacity, + View, + ActivityIndicator, +} from 'react-native' import {ComAtprotoServerDefs} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import Clipboard from '@react-native-clipboard/clipboard' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {isWeb} from 'platform/detection' -import React from 'react' -import { - ActivityIndicator, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' - -import {makeProfileLink} from '#/lib/routes/links' -import {useInvitesAPI, useInvitesState} from '#/state/invites' -import {useModalControls} from '#/state/modals' -import { - InviteCodesQueryResponse, - useInviteCodesQuery, -} from '#/state/queries/invites' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' -import {Link} from '../util/Link' import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' import * as Toast from '../util/Toast' -import {UserInfoText} from '../util/UserInfoText' import {ScrollView} from './util' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Trans, msg} from '@lingui/macro' +import {cleanError} from 'lib/strings/errors' +import {useModalControls} from '#/state/modals' +import {useInvitesState, useInvitesAPI} from '#/state/invites' +import {UserInfoText} from '../util/UserInfoText' +import {makeProfileLink} from '#/lib/routes/links' +import {Link} from '../util/Link' +import {ErrorMessage} from '../util/error/ErrorMessage' +import { + useInviteCodesQuery, + InviteCodesQueryResponse, +} from '#/state/queries/invites' +import {useLingui} from '@lingui/react' export const snapPoints = ['70%'] diff --git a/src/view/com/modals/LinkWarning.tsx b/src/view/com/modals/LinkWarning.tsx index 1d0f1bda67..81fdc72853 100644 --- a/src/view/com/modals/LinkWarning.tsx +++ b/src/view/com/modals/LinkWarning.tsx @@ -1,21 +1,19 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {isPossiblyAUrl, splitApexDomain} from 'lib/strings/url-helpers' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React from 'react' import {SafeAreaView, StyleSheet, View} from 'react-native' - +import {ScrollView} from './util' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {isPossiblyAUrl, splitApexDomain} from 'lib/strings/url-helpers' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import {useOpenLink} from '#/state/preferences/in-app-browser' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import {ScrollView} from './util' - export const snapPoints = ['50%'] export function Component({text, href}: {text: string; href: string}) { diff --git a/src/view/com/modals/ListAddRemoveUsers.tsx b/src/view/com/modals/ListAddRemoveUsers.tsx index eae746d2bf..27c33f806c 100644 --- a/src/view/com/modals/ListAddRemoveUsers.tsx +++ b/src/view/com/modals/ListAddRemoveUsers.tsx @@ -1,15 +1,3 @@ -import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {cleanError} from 'lib/strings/errors' -import {sanitizeHandle} from 'lib/strings/handles' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useCallback, useState} from 'react' import { ActivityIndicator, @@ -18,23 +6,33 @@ import { StyleSheet, View, } from 'react-native' - +import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api' +import {ScrollView, TextInput} from './util' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {UserAvatar} from '../util/UserAvatar' +import * as Toast from '../util/Toast' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' +import {cleanError} from 'lib/strings/errors' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' import {HITSLOP_20} from '#/lib/constants' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' -import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import { + useDangerousListMembershipsQuery, getMembership, ListMembersip, - useDangerousListMembershipsQuery, useListMembershipAddMutation, useListMembershipRemoveMutation, } from '#/state/queries/list-memberships' - -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {UserAvatar} from '../util/UserAvatar' -import {ScrollView, TextInput} from './util' +import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' export const snapPoints = ['90%'] diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index fb0ea471d7..100444ff58 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -1,40 +1,39 @@ -import BottomSheet from '@gorhom/bottom-sheet' -import {usePalette} from 'lib/hooks/usePalette' -import React, {useEffect, useRef} from 'react' +import React, {useRef, useEffect} from 'react' import {StyleSheet} from 'react-native' import {SafeAreaView} from 'react-native-safe-area-context' - -import {useModalControls, useModals} from '#/state/modals' - +import BottomSheet from '@gorhom/bottom-sheet' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' -import * as AddAppPassword from './AddAppPasswords' -import * as AltImageModal from './AltImage' -import * as EditImageModal from './AltImage' -import * as AppealLabelModal from './AppealLabel' -import * as BirthDateSettingsModal from './BirthDateSettings' -import * as ChangeEmailModal from './ChangeEmail' -import * as ChangeHandleModal from './ChangeHandle' -import * as ChangePasswordModal from './ChangePassword' +import {usePalette} from 'lib/hooks/usePalette' + +import {useModals, useModalControls} from '#/state/modals' import * as ConfirmModal from './Confirm' -import * as ContentFilteringSettingsModal from './ContentFilteringSettings' -import * as CreateOrEditListModal from './CreateOrEditList' -import * as DeleteAccountModal from './DeleteAccount' import * as EditProfileModal from './EditProfile' -import * as EmbedConsentModal from './EmbedConsent' -import * as InAppBrowserConsentModal from './InAppBrowserConsent' -import * as InviteCodesModal from './InviteCodes' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' -import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' -import * as LinkWarningModal from './LinkWarning' -import * as ListAddUserModal from './ListAddRemoveUsers' -import * as ModerationDetailsModal from './ModerationDetails' -import * as ReportModal from './report/Modal' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' -import * as SwitchAccountModal from './SwitchAccount' import * as ThreadgateModal from './Threadgate' +import * as CreateOrEditListModal from './CreateOrEditList' import * as UserAddRemoveListsModal from './UserAddRemoveLists' +import * as ListAddUserModal from './ListAddRemoveUsers' +import * as AltImageModal from './AltImage' +import * as EditImageModal from './AltImage' +import * as ReportModal from './report/Modal' +import * as AppealLabelModal from './AppealLabel' +import * as DeleteAccountModal from './DeleteAccount' +import * as ChangeHandleModal from './ChangeHandle' +import * as InviteCodesModal from './InviteCodes' +import * as AddAppPassword from './AddAppPasswords' +import * as ContentFilteringSettingsModal from './ContentFilteringSettings' +import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' +import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' +import * as ModerationDetailsModal from './ModerationDetails' +import * as BirthDateSettingsModal from './BirthDateSettings' import * as VerifyEmailModal from './VerifyEmail' +import * as ChangeEmailModal from './ChangeEmail' +import * as ChangePasswordModal from './ChangePassword' +import * as SwitchAccountModal from './SwitchAccount' +import * as LinkWarningModal from './LinkWarning' +import * as EmbedConsentModal from './EmbedConsent' +import * as InAppBrowserConsentModal from './InAppBrowserConsent' const DEFAULT_SNAPPOINTS = ['90%'] const HANDLE_HEIGHT = 24 diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 295942dd67..0ced894a17 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -1,40 +1,39 @@ +import React from 'react' +import {TouchableWithoutFeedback, StyleSheet, View} from 'react-native' +import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import React from 'react' -import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native' -import Animated, {FadeIn, FadeOut} from 'react-native-reanimated' - import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import type {Modal as ModalIface} from '#/state/modals' -import {useModalControls, useModals} from '#/state/modals' -import * as AddAppPassword from './AddAppPasswords' -import * as AltTextImageModal from './AltImage' -import * as AppealLabelModal from './AppealLabel' -import * as BirthDateSettingsModal from './BirthDateSettings' -import * as ChangeEmailModal from './ChangeEmail' -import * as ChangeHandleModal from './ChangeHandle' -import * as ChangePasswordModal from './ChangePassword' +import {useModals, useModalControls} from '#/state/modals' +import type {Modal as ModalIface} from '#/state/modals' import * as ConfirmModal from './Confirm' -import * as ContentFilteringSettingsModal from './ContentFilteringSettings' -import * as CreateOrEditListModal from './CreateOrEditList' -import * as CropImageModal from './crop-image/CropImage.web' -import * as DeleteAccountModal from './DeleteAccount' -import * as EditImageModal from './EditImage' import * as EditProfileModal from './EditProfile' -import * as EmbedConsentModal from './EmbedConsent' -import * as InviteCodesModal from './InviteCodes' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' -import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' -import * as LinkWarningModal from './LinkWarning' -import * as ListAddUserModal from './ListAddRemoveUsers' -import * as ModerationDetailsModal from './ModerationDetails' import * as ReportModal from './report/Modal' +import * as AppealLabelModal from './AppealLabel' +import * as CreateOrEditListModal from './CreateOrEditList' +import * as UserAddRemoveLists from './UserAddRemoveLists' +import * as ListAddUserModal from './ListAddRemoveUsers' +import * as DeleteAccountModal from './DeleteAccount' import * as RepostModal from './Repost' import * as SelfLabelModal from './SelfLabel' import * as ThreadgateModal from './Threadgate' -import * as UserAddRemoveLists from './UserAddRemoveLists' +import * as CropImageModal from './crop-image/CropImage.web' +import * as AltTextImageModal from './AltImage' +import * as EditImageModal from './EditImage' +import * as ChangeHandleModal from './ChangeHandle' +import * as InviteCodesModal from './InviteCodes' +import * as AddAppPassword from './AddAppPasswords' +import * as ContentFilteringSettingsModal from './ContentFilteringSettings' +import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' +import * as PostLanguagesSettingsModal from './lang-settings/PostLanguagesSettings' +import * as ModerationDetailsModal from './ModerationDetails' +import * as BirthDateSettingsModal from './BirthDateSettings' import * as VerifyEmailModal from './VerifyEmail' +import * as ChangeEmailModal from './ChangeEmail' +import * as ChangePasswordModal from './ChangePassword' +import * as LinkWarningModal from './LinkWarning' +import * as EmbedConsentModal from './EmbedConsent' export function ModalsContainer() { const {isModalActive, activeModals} = useModals() diff --git a/src/view/com/modals/ModerationDetails.tsx b/src/view/com/modals/ModerationDetails.tsx index 77b7628e6f..f890d50dce 100644 --- a/src/view/com/modals/ModerationDetails.tsx +++ b/src/view/com/modals/ModerationDetails.tsx @@ -1,19 +1,17 @@ -import {ModerationUI} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {listUriToHref} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React from 'react' import {StyleSheet, View} from 'react-native' - -import {useModalControls} from '#/state/modals' - -import {Button} from '../util/forms/Button' -import {TextLink} from '../util/Link' +import {ModerationUI} from '@atproto/api' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s} from 'lib/styles' import {Text} from '../util/text/Text' +import {TextLink} from '../util/Link' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {listUriToHref} from 'lib/strings/url-helpers' +import {Button} from '../util/forms/Button' +import {useModalControls} from '#/state/modals' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' export const snapPoints = [300] diff --git a/src/view/com/modals/Repost.tsx b/src/view/com/modals/Repost.tsx index a052979dd1..6e4881adcd 100644 --- a/src/view/com/modals/Repost.tsx +++ b/src/view/com/modals/Repost.tsx @@ -1,16 +1,14 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {RepostIcon} from 'lib/icons' -import {colors, gradients, s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' import LinearGradient from 'react-native-linear-gradient' - -import {useModalControls} from '#/state/modals' - +import {s, colors, gradients} from 'lib/styles' import {Text} from '../util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {RepostIcon} from 'lib/icons' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' export const snapPoints = [250] diff --git a/src/view/com/modals/SelfLabel.tsx b/src/view/com/modals/SelfLabel.tsx index a79a90d372..779a9e71b3 100644 --- a/src/view/com/modals/SelfLabel.tsx +++ b/src/view/com/modals/SelfLabel.tsx @@ -1,18 +1,16 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {ScrollView} from 'view/com/modals/util' - -import {useModalControls} from '#/state/modals' - +import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {isWeb} from 'platform/detection' import {Button} from '../util/forms/Button' import {SelectableBtn} from '../util/forms/SelectableBtn' -import {Text} from '../util/text/Text' +import {ScrollView} from 'view/com/modals/util' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn'] diff --git a/src/view/com/modals/SwitchAccount.tsx b/src/view/com/modals/SwitchAccount.tsx index 220aba43f4..c034c4b528 100644 --- a/src/view/com/modals/SwitchAccount.tsx +++ b/src/view/com/modals/SwitchAccount.tsx @@ -1,12 +1,3 @@ -import {BottomSheetScrollView} from '@gorhom/bottom-sheet' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnalytics} from 'lib/analytics/analytics' -import {Haptics} from 'lib/haptics' -import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -14,15 +5,22 @@ import { TouchableOpacity, View, } from 'react-native' - -import {useProfileQuery} from '#/state/queries/profile' -import {SessionAccount, useSession, useSessionApi} from '#/state/session' -import {useCloseAllActiveElements} from '#/state/util' - +import {Text} from '../util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' +import {UserAvatar} from '../util/UserAvatar' import {AccountDropdownBtn} from '../util/AccountDropdownBtn' import {Link} from '../util/Link' -import {Text} from '../util/text/Text' -import {UserAvatar} from '../util/UserAvatar' +import {makeProfileLink} from 'lib/routes/links' +import {BottomSheetScrollView} from '@gorhom/bottom-sheet' +import {Haptics} from 'lib/haptics' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useCloseAllActiveElements} from '#/state/util' export const snapPoints = ['40%', '90%'] diff --git a/src/view/com/modals/Threadgate.tsx b/src/view/com/modals/Threadgate.tsx index b7661c4287..0e49fc2f35 100644 --- a/src/view/com/modals/Threadgate.tsx +++ b/src/view/com/modals/Threadgate.tsx @@ -1,10 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {colors, s} from 'lib/styles' -import isEqual from 'lodash.isequal' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { Pressable, @@ -14,13 +7,18 @@ import { View, ViewStyle, } from 'react-native' -import {ScrollView} from 'view/com/modals/util' - -import {useModalControls} from '#/state/modals' -import {useMyListsQuery} from '#/state/queries/my-lists' -import {ThreadgateSetting} from '#/state/queries/threadgate' - import {Text} from '../util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {ScrollView} from 'view/com/modals/util' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {ThreadgateSetting} from '#/state/queries/threadgate' +import {useMyListsQuery} from '#/state/queries/my-lists' +import isEqual from 'lodash.isequal' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' export const snapPoints = ['60%'] diff --git a/src/view/com/modals/UserAddRemoveLists.tsx b/src/view/com/modals/UserAddRemoveLists.tsx index ff5dfea1d3..8452f25133 100644 --- a/src/view/com/modals/UserAddRemoveLists.tsx +++ b/src/view/com/modals/UserAddRemoveLists.tsx @@ -1,11 +1,3 @@ -import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' -import {isAndroid, isMobileWeb, isWeb} from 'platform/detection' import React, {useCallback} from 'react' import { ActivityIndicator, @@ -13,24 +5,30 @@ import { useWindowDimensions, View, } from 'react-native' - -import {cleanError} from '#/lib/strings/errors' +import {AppBskyGraphDefs as GraphDefs} from '@atproto/api' +import {Text} from '../util/text/Text' +import {UserAvatar} from '../util/UserAvatar' +import {MyLists} from '../lists/MyLists' +import {Button} from '../util/forms/Button' +import * as Toast from '../util/Toast' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb, isAndroid, isMobileWeb} from 'platform/detection' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' import { + useDangerousListMembershipsQuery, getMembership, ListMembersip, - useDangerousListMembershipsQuery, useListMembershipAddMutation, useListMembershipRemoveMutation, } from '#/state/queries/list-memberships' +import {cleanError} from '#/lib/strings/errors' import {useSession} from '#/state/session' -import {MyLists} from '../lists/MyLists' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' -import {UserAvatar} from '../util/UserAvatar' - export const snapPoints = ['fullscreen'] export function Component({ diff --git a/src/view/com/modals/VerifyEmail.tsx b/src/view/com/modals/VerifyEmail.tsx index 8c8c64ad92..30a57afc58 100644 --- a/src/view/com/modals/VerifyEmail.tsx +++ b/src/view/com/modals/VerifyEmail.tsx @@ -1,11 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import { ActivityIndicator, @@ -14,17 +6,23 @@ import { StyleSheet, View, } from 'react-native' -import {Circle, Path, Svg} from 'react-native-svg' - -import {logger} from '#/logger' -import {useModalControls} from '#/state/modals' -import {getAgent, useSession, useSessionApi} from '#/state/session' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' +import {Svg, Circle, Path} from 'react-native-svg' import {ScrollView, TextInput} from './util' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import {ErrorMessage} from '../util/error/ErrorMessage' +import * as Toast from '../util/Toast' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {cleanError} from 'lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useSession, useSessionApi, getAgent} from '#/state/session' +import {logger} from '#/logger' export const snapPoints = ['90%'] diff --git a/src/view/com/modals/crop-image/CropImage.web.tsx b/src/view/com/modals/crop-image/CropImage.web.tsx index 9c42d9532f..6f094a1fdf 100644 --- a/src/view/com/modals/crop-image/CropImage.web.tsx +++ b/src/view/com/modals/crop-image/CropImage.web.tsx @@ -1,18 +1,17 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Slider} from '@miblanchard/react-native-slider' -import {usePalette} from 'lib/hooks/usePalette' -import {RectTallIcon, RectWideIcon, SquareIcon} from 'lib/icons' -import {Dimensions} from 'lib/media/types' -import {getDataUriSize} from 'lib/media/util' -import {gradients, s} from 'lib/styles' import React from 'react' -import ImageEditor from 'react-avatar-editor' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {Image as RNImage} from 'react-native-image-crop-picker' +import ImageEditor from 'react-avatar-editor' +import {Slider} from '@miblanchard/react-native-slider' import LinearGradient from 'react-native-linear-gradient' import {Text} from 'view/com/util/text/Text' - +import {Dimensions} from 'lib/media/types' +import {getDataUriSize} from 'lib/media/util' +import {s, gradients} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {SquareIcon, RectWideIcon, RectTallIcon} from 'lib/icons' +import {Image as RNImage} from 'react-native-image-crop-picker' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' enum AspectRatio { diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx index ce462d072e..91e11a19ca 100644 --- a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx +++ b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx @@ -1,11 +1,11 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {StyleSheet, Text, View, Pressable} from 'react-native' +import LinearGradient from 'react-native-linear-gradient' +import {s, colors, gradients} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {colors, gradients, s} from 'lib/styles' -import React from 'react' -import {Pressable, StyleSheet, Text, View} from 'react-native' -import LinearGradient from 'react-native-linear-gradient' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const ConfirmLanguagesButton = ({ onPress, diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx index 52863b2a8b..b8c125b65c 100644 --- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx @@ -1,22 +1,20 @@ -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {ScrollView} from '../util' +import {Text} from '../../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {deviceLocales} from 'platform/detection' -import React from 'react' -import {StyleSheet, View} from 'react-native' - +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {LanguageToggle} from './LanguageToggle' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' +import {Trans} from '@lingui/macro' import {useModalControls} from '#/state/modals' import { useLanguagePrefs, useLanguagePrefsApi, } from '#/state/preferences/languages' -import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' -import {Text} from '../../util/text/Text' -import {ScrollView} from '../util' -import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' -import {LanguageToggle} from './LanguageToggle' - export const snapPoints = ['100%'] export function Component({}: {}) { diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx index 3d65137018..45b100f201 100644 --- a/src/view/com/modals/lang-settings/LanguageToggle.tsx +++ b/src/view/com/modals/lang-settings/LanguageToggle.tsx @@ -1,9 +1,8 @@ -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleSheet} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' import {ToggleButton} from 'view/com/util/forms/ToggleButton' - -import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages' +import {useLanguagePrefs, toPostLanguages} from '#/state/preferences/languages' export function LanguageToggle({ code2, diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx index 49a209759b..05cfb81156 100644 --- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx @@ -1,23 +1,21 @@ -import {Trans} from '@lingui/macro' +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {ScrollView} from '../util' +import {Text} from '../../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {deviceLocales} from 'platform/detection' -import React from 'react' -import {StyleSheet, View} from 'react-native' +import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' +import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' import {ToggleButton} from 'view/com/util/forms/ToggleButton' - +import {Trans} from '@lingui/macro' import {useModalControls} from '#/state/modals' import { - hasPostLanguage, useLanguagePrefs, useLanguagePrefsApi, + hasPostLanguage, } from '#/state/preferences/languages' -import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' -import {Text} from '../../util/text/Text' -import {ScrollView} from '../util' -import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' - export const snapPoints = ['100%'] export function Component() { diff --git a/src/view/com/modals/report/InputIssueDetails.tsx b/src/view/com/modals/report/InputIssueDetails.tsx index e353da56f3..2bc86f75e7 100644 --- a/src/view/com/modals/report/InputIssueDetails.tsx +++ b/src/view/com/modals/report/InputIssueDetails.tsx @@ -1,16 +1,15 @@ +import React from 'react' +import {View, TouchableOpacity, StyleSheet} from 'react-native' +import {TextInput} from '../util' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {CharProgress} from '../../composer/char-progress/CharProgress' +import {Text} from '../../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {s} from 'lib/styles' -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' - -import {CharProgress} from '../../composer/char-progress/CharProgress' -import {Text} from '../../util/text/Text' -import {TextInput} from '../util' import {SendReportButton} from './SendReportButton' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function InputIssueDetails({ details, diff --git a/src/view/com/modals/report/Modal.tsx b/src/view/com/modals/report/Modal.tsx index 3540b8b029..abbad9b402 100644 --- a/src/view/com/modals/report/Modal.tsx +++ b/src/view/com/modals/report/Modal.tsx @@ -1,24 +1,22 @@ -import {AtUri} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {cleanError} from 'lib/strings/errors' -import {s} from 'lib/styles' -import React, {useMemo, useState} from 'react' +import React, {useState, useMemo} from 'react' import {Linking, StyleSheet, TouchableOpacity, View} from 'react-native' import {ScrollView} from 'react-native-gesture-handler' - -import {useModalControls} from '#/state/modals' -import {getAgent} from '#/state/session' - -import {ErrorMessage} from '../../util/error/ErrorMessage' +import {AtUri} from '@atproto/api' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s} from 'lib/styles' import {Text} from '../../util/text/Text' import * as Toast from '../../util/Toast' +import {ErrorMessage} from '../../util/error/ErrorMessage' +import {cleanError} from 'lib/strings/errors' +import {usePalette} from 'lib/hooks/usePalette' +import {SendReportButton} from './SendReportButton' import {InputIssueDetails} from './InputIssueDetails' import {ReportReasonOptions} from './ReasonOptions' -import {SendReportButton} from './SendReportButton' import {CollectionId} from './types' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {getAgent} from '#/state/session' const DMCA_LINK = 'https://bsky.social/about/support/copyright' diff --git a/src/view/com/modals/report/ReasonOptions.tsx b/src/view/com/modals/report/ReasonOptions.tsx index 3ed7bb79d1..23b49b6648 100644 --- a/src/view/com/modals/report/ReasonOptions.tsx +++ b/src/view/com/modals/report/ReasonOptions.tsx @@ -1,10 +1,10 @@ -import {AtUri, ComAtprotoModerationDefs} from '@atproto/api' -import {usePalette, UsePaletteValue} from 'lib/hooks/usePalette' -import React, {useMemo} from 'react' import {View} from 'react-native' -import {RadioGroup, RadioGroupItem} from 'view/com/util/forms/RadioGroup' +import React, {useMemo} from 'react' +import {AtUri, ComAtprotoModerationDefs} from '@atproto/api' import {Text} from '../../util/text/Text' +import {UsePaletteValue, usePalette} from 'lib/hooks/usePalette' +import {RadioGroup, RadioGroupItem} from 'view/com/util/forms/RadioGroup' import {CollectionId} from './types' type ReasonMap = Record diff --git a/src/view/com/modals/report/SendReportButton.tsx b/src/view/com/modals/report/SendReportButton.tsx index eeda20b84c..40c239bffe 100644 --- a/src/view/com/modals/report/SendReportButton.tsx +++ b/src/view/com/modals/report/SendReportButton.tsx @@ -1,16 +1,15 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {colors, gradients, s} from 'lib/styles' import React from 'react' +import LinearGradient from 'react-native-linear-gradient' import { ActivityIndicator, StyleSheet, TouchableOpacity, View, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' - import {Text} from '../../util/text/Text' +import {s, gradients, colors} from 'lib/styles' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export function SendReportButton({ onPress, diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index bfce184368..dd439d4755 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -1,23 +1,21 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {s} from 'lib/styles' import React from 'react' +import {CenteredView} from '../util/Views' import {ActivityIndicator, StyleSheet, View} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' +import {FeedItem} from './FeedItem' +import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {EmptyState} from '../util/EmptyState' +import {s} from 'lib/styles' import {useNotificationFeedQuery} from '#/state/queries/notifications/feed' import {useUnreadNotificationsApi} from '#/state/queries/notifications/unread' +import {logger} from '#/logger' +import {cleanError} from '#/lib/strings/errors' import {useModerationOpts} from '#/state/queries/preferences' - -import {EmptyState} from '../util/EmptyState' -import {ErrorMessage} from '../util/error/ErrorMessage' import {List, ListRef} from '../util/List' -import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {CenteredView} from '../util/Views' -import {FeedItem} from './FeedItem' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {usePalette} from '#/lib/hooks/usePalette' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} const LOAD_MORE_ERROR_ITEM = {_reactKey: '__load_more_error__'} diff --git a/src/view/com/notifications/FeedItem.tsx b/src/view/com/notifications/FeedItem.tsx index e5b3466b5b..45166fe3c3 100644 --- a/src/view/com/notifications/FeedItem.tsx +++ b/src/view/com/notifications/FeedItem.tsx @@ -1,11 +1,19 @@ +import React, {memo, useMemo, useState, useEffect} from 'react' +import { + Animated, + TouchableOpacity, + Pressable, + StyleSheet, + View, +} from 'react-native' import { AppBskyEmbedImages, - AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyFeedPost, - moderateProfile, ModerationOpts, ProfileModeration, + moderateProfile, + AppBskyEmbedRecordWithMedia, } from '@atproto/api' import {AtUri} from '@atproto/api' import { @@ -13,38 +21,28 @@ import { FontAwesomeIconStyle, Props, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {usePalette} from 'lib/hooks/usePalette' -import {HeartIconSolid} from 'lib/icons' -import {makeProfileLink} from 'lib/routes/links' +import {FeedNotification} from '#/state/queries/notifications/feed' +import {s, colors} from 'lib/styles' +import {niceDate} from 'lib/strings/time' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {pluralize} from 'lib/strings/helpers' -import {niceDate} from 'lib/strings/time' -import {colors, s} from 'lib/styles' -import {isWeb} from 'platform/detection' -import React, {memo, useEffect, useMemo, useState} from 'react' -import { - Animated, - Pressable, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' - -import {FeedNotification} from '#/state/queries/notifications/feed' - -import {FeedSourceCard} from '../feeds/FeedSourceCard' -import {Post} from '../post/Post' -import {ImageHorzList} from '../util/images/ImageHorzList' -import {Link, TextLink} from '../util/Link' -import {formatCount} from '../util/numeric/format' +import {HeartIconSolid} from 'lib/icons' import {Text} from '../util/text/Text' -import {TimeElapsed} from '../util/TimeElapsed' -import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar' +import {UserAvatar, PreviewableUserAvatar} from '../util/UserAvatar' import {UserPreviewLink} from '../util/UserPreviewLink' +import {ImageHorzList} from '../util/images/ImageHorzList' +import {Post} from '../post/Post' +import {Link, TextLink} from '../util/Link' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import {formatCount} from '../util/numeric/format' +import {makeProfileLink} from 'lib/routes/links' +import {TimeElapsed} from '../util/TimeElapsed' +import {isWeb} from 'platform/detection' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FeedSourceCard} from '../feeds/FeedSourceCard' const MAX_AUTHORS = 5 diff --git a/src/view/com/pager/Pager.tsx b/src/view/com/pager/Pager.tsx index e17e25099b..06ec2e4503 100644 --- a/src/view/com/pager/Pager.tsx +++ b/src/view/com/pager/Pager.tsx @@ -1,11 +1,11 @@ -import {s} from 'lib/styles' import React, {forwardRef} from 'react' import {Animated, View} from 'react-native' import PagerView, { - PagerViewOnPageScrollEvent, PagerViewOnPageSelectedEvent, + PagerViewOnPageScrollEvent, PageScrollStateChangedNativeEvent, } from 'react-native-pager-view' +import {s} from 'lib/styles' export type PageSelectedEvent = PagerViewOnPageSelectedEvent const AnimatedPagerView = Animated.createAnimatedComponent(PagerView) diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx index 2bad144910..42982ef7f8 100644 --- a/src/view/com/pager/Pager.web.tsx +++ b/src/view/com/pager/Pager.web.tsx @@ -1,7 +1,7 @@ -import {s} from 'lib/styles' import React from 'react' import {flushSync} from 'react-dom' import {View} from 'react-native' +import {s} from 'lib/styles' export interface RenderTabBarFnProps { selectedPage: number diff --git a/src/view/com/pager/PagerWithHeader.tsx b/src/view/com/pager/PagerWithHeader.tsx index 5317a77739..aa110682a2 100644 --- a/src/view/com/pager/PagerWithHeader.tsx +++ b/src/view/com/pager/PagerWithHeader.tsx @@ -1,28 +1,26 @@ import * as React from 'react' import { LayoutChangeEvent, - NativeScrollEvent, ScrollView, StyleSheet, View, + NativeScrollEvent, } from 'react-native' import Animated, { - AnimatedRef, + useAnimatedStyle, + useSharedValue, runOnJS, runOnUI, scrollTo, - SharedValue, useAnimatedRef, - useAnimatedStyle, - useSharedValue, + AnimatedRef, + SharedValue, } from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' - -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' -import {ScrollProvider} from '#/lib/ScrollContext' - -import {ListMethods} from '../util/List' import {TabBar} from './TabBar' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {ListMethods} from '../util/List' +import {ScrollProvider} from '#/lib/ScrollContext' export interface PagerWithHeaderChildParams { headerHeight: number diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx index 4c95aa8780..9c63c149fe 100644 --- a/src/view/com/pager/PagerWithHeader.web.tsx +++ b/src/view/com/pager/PagerWithHeader.web.tsx @@ -2,12 +2,10 @@ import * as React from 'react' import {FlatList, ScrollView, StyleSheet, View} from 'react-native' import {useAnimatedRef} from 'react-native-reanimated' import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' - +import {TabBar} from './TabBar' import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' - import {ListMethods} from '../util/List' -import {TabBar} from './TabBar' export interface PagerWithHeaderChildParams { headerHeight: number diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx index db05237c54..ff8acd60cc 100644 --- a/src/view/com/pager/TabBar.tsx +++ b/src/view/com/pager/TabBar.tsx @@ -1,13 +1,11 @@ +import React, {useRef, useMemo, useEffect, useState, useCallback} from 'react' +import {StyleSheet, View, ScrollView, LayoutChangeEvent} from 'react-native' +import {Text} from '../util/text/Text' +import {PressableWithHover} from '../util/PressableWithHover' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react' -import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native' - -import {isNative} from '#/platform/detection' - -import {PressableWithHover} from '../util/PressableWithHover' -import {Text} from '../util/text/Text' import {DraggableScrollView} from './DraggableScrollView' +import {isNative} from '#/platform/detection' export interface TabBarProps { testID?: string diff --git a/src/view/com/post-thread/PostLikedBy.tsx b/src/view/com/post-thread/PostLikedBy.tsx index 67ed3b3f53..55463dc137 100644 --- a/src/view/com/post-thread/PostLikedBy.tsx +++ b/src/view/com/post-thread/PostLikedBy.tsx @@ -1,17 +1,15 @@ -import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' import React, {useCallback, useMemo, useState} from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {usePostLikedByQuery} from '#/state/queries/post-liked-by' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' - -import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List} from '../util/List' -import {LoadingScreen} from '../util/LoadingScreen' +import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api' import {CenteredView} from '../util/Views' +import {List} from '../util/List' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' +import {logger} from '#/logger' +import {LoadingScreen} from '../util/LoadingScreen' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {usePostLikedByQuery} from '#/state/queries/post-liked-by' +import {cleanError} from '#/lib/strings/errors' export function PostLikedBy({uri}: {uri: string}) { const [isPTRing, setIsPTRing] = useState(false) diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index 82c969235e..31a0be832d 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -1,17 +1,15 @@ -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import React, {useCallback, useMemo, useState} from 'react' +import React, {useMemo, useCallback, useState} from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' - +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' +import {CenteredView} from '../util/Views' +import {List} from '../util/List' import {ProfileCardWithFollowBtn} from '../profile/ProfileCard' import {ErrorMessage} from '../util/error/ErrorMessage' -import {List} from '../util/List' +import {logger} from '#/logger' import {LoadingScreen} from '../util/LoadingScreen' -import {CenteredView} from '../util/Views' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' +import {usePostRepostedByQuery} from '#/state/queries/post-reposted-by' +import {cleanError} from '#/lib/strings/errors' export function PostRepostedBy({uri}: {uri: string}) { const [isPTRing, setIsPTRing] = useState(false) diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index f022bdeacd..a7ee42a948 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -1,17 +1,3 @@ -import {AppBskyFeedDefs} from '@atproto/api' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {s} from 'lib/styles' import React, {useEffect, useRef} from 'react' import { ActivityIndicator, @@ -20,33 +6,45 @@ import { TouchableOpacity, View, } from 'react-native' - -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' -import {cleanError} from '#/lib/strings/errors' -import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {AppBskyFeedDefs} from '@atproto/api' +import {CenteredView} from '../util/Views' +import {LoadingScreen} from '../util/LoadingScreen' +import {List, ListMethods} from '../util/List' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {PostThreadItem} from './PostThreadItem' +import {ComposePrompt} from '../composer/Prompt' +import {ViewHeader} from '../util/ViewHeader' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {Text} from '../util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useSetTitle} from 'lib/hooks/useSetTitle' import { - sortThread, - ThreadBlocked, ThreadNode, - ThreadNotFound, ThreadPost, + ThreadNotFound, + ThreadBlocked, usePostThreadQuery, + sortThread, } from '#/state/queries/post-thread' +import {useNavigation} from '@react-navigation/native' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NavigationProp} from 'lib/routes/types' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {cleanError} from '#/lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { + UsePreferencesQueryResponse, useModerationOpts, usePreferencesQuery, - UsePreferencesQueryResponse, } from '#/state/queries/preferences' import {useSession} from '#/state/session' - -import {ComposePrompt} from '../composer/Prompt' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List, ListMethods} from '../util/List' -import {LoadingScreen} from '../util/LoadingScreen' -import {Text} from '../util/text/Text' -import {ViewHeader} from '../util/ViewHeader' -import {CenteredView} from '../util/Views' -import {PostThreadItem} from './PostThreadItem' +import {isAndroid, isNative, isWeb} from '#/platform/detection' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' // FlatList maintainVisibleContentPosition breaks if too many items // are prepended. This seems to be an optimal number based on *shrug*. diff --git a/src/view/com/post-thread/PostThreadFollowBtn.tsx b/src/view/com/post-thread/PostThreadFollowBtn.tsx index 63e2888fd5..e5b747cc9a 100644 --- a/src/view/com/post-thread/PostThreadFollowBtn.tsx +++ b/src/view/com/post-thread/PostThreadFollowBtn.tsx @@ -1,24 +1,24 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {track} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {useNavigation} from '@react-navigation/native' +import {AppBskyActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + +import {logger} from '#/logger' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Shadow, useProfileShadow} from 'state/cache/profile-shadow' +import {track} from 'lib/analytics/analytics' import { useProfileFollowMutationQueue, useProfileQuery, } from 'state/queries/profile' import {useRequireAuth} from 'state/session' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' - -import {logger} from '#/logger' export function PostThreadFollowBtn({did}: {did: string}) { const {data: profile, isLoading} = useProfileQuery({did}) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 54c47adaee..9522ea6a07 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -1,52 +1,50 @@ +import React, {memo, useMemo} from 'react' +import {StyleSheet, View} from 'react-native' import { + AtUri, AppBskyFeedDefs, AppBskyFeedPost, - AtUri, - PostModeration, RichText as RichTextAPI, + PostModeration, } from '@atproto/api' +import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {MAX_POST_LINES} from 'lib/constants' -import {isEmbedByEmbedder} from 'lib/embeds' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {makeProfileLink} from 'lib/routes/links' +import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn' +import {Link, TextLink} from '../util/Link' +import {RichText} from '#/components/RichText' +import {Text} from '../util/text/Text' +import {PreviewableUserAvatar} from '../util/UserAvatar' +import {s} from 'lib/styles' +import {niceDate} from 'lib/strings/time' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' import {countLines, pluralize} from 'lib/strings/helpers' -import {niceDate} from 'lib/strings/time' -import {s} from 'lib/styles' -import React, {memo, useMemo} from 'react' -import {StyleSheet, View} from 'react-native' -import {useSession} from 'state/session' -import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn' - -import {atoms as a} from '#/alf' -import {RichText} from '#/components/RichText' -import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' -import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' -import {useLanguagePrefs} from '#/state/preferences' -import {useOpenLink} from '#/state/preferences/in-app-browser' -import {ThreadPost} from '#/state/queries/post-thread' -import {useModerationOpts} from '#/state/queries/preferences' -import {useComposerControls} from '#/state/shell/composer' - +import {isEmbedByEmbedder} from 'lib/embeds' import {getTranslatorLink, isPostInLanguage} from '../../../locale/helpers' -import {WhoCanReply} from '../threadgate/WhoCanReply' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Link, TextLink} from '../util/Link' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {PostMeta} from '../util/PostMeta' +import {PostEmbeds} from '../util/post-embeds' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' +import {PostHider} from '../util/moderation/PostHider' import {ContentHider} from '../util/moderation/ContentHider' import {PostAlerts} from '../util/moderation/PostAlerts' -import {PostHider} from '../util/moderation/PostHider' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {usePalette} from 'lib/hooks/usePalette' import {formatCount} from '../util/numeric/format' -import {PostCtrls} from '../util/post-ctrls/PostCtrls' -import {PostEmbeds} from '../util/post-embeds' -import {PostMeta} from '../util/PostMeta' -import {Text} from '../util/text/Text' -import {PreviewableUserAvatar} from '../util/UserAvatar' +import {makeProfileLink} from 'lib/routes/links' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {MAX_POST_LINES} from 'lib/constants' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useLanguagePrefs} from '#/state/preferences' +import {useComposerControls} from '#/state/shell/composer' +import {useModerationOpts} from '#/state/queries/preferences' +import {useOpenLink} from '#/state/preferences/in-app-browser' +import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' +import {ThreadPost} from '#/state/queries/post-thread' +import {useSession} from 'state/session' +import {WhoCanReply} from '../threadgate/WhoCanReply' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {atoms as a} from '#/alf' export function PostThreadItem({ post, diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index d7f6bb2cbb..5fa4da84e1 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -1,3 +1,5 @@ +import React, {useState, useMemo} from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -5,33 +7,29 @@ import { PostModeration, RichText as RichTextAPI, } from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {MAX_POST_LINES} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {countLines} from 'lib/strings/helpers' -import {colors, s} from 'lib/styles' -import React, {useMemo, useState} from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {atoms as a} from '#/alf' -import {RichText} from '#/components/RichText' import {moderatePost_wrapped as moderatePost} from '#/lib/moderatePost_wrapped' -import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' -import {useModerationOpts} from '#/state/queries/preferences' -import {useComposerControls} from '#/state/shell/composer' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Link, TextLink} from '../util/Link' +import {UserInfoText} from '../util/UserInfoText' +import {PostMeta} from '../util/PostMeta' +import {PostEmbeds} from '../util/post-embeds' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {ContentHider} from '../util/moderation/ContentHider' import {PostAlerts} from '../util/moderation/PostAlerts' -import {PostCtrls} from '../util/post-ctrls/PostCtrls' -import {PostEmbeds} from '../util/post-embeds' -import {PostMeta} from '../util/PostMeta' import {Text} from '../util/text/Text' +import {RichText} from '#/components/RichText' import {PreviewableUserAvatar} from '../util/UserAvatar' -import {UserInfoText} from '../util/UserInfoText' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' +import {MAX_POST_LINES} from 'lib/constants' +import {countLines} from 'lib/strings/helpers' +import {useModerationOpts} from '#/state/queries/preferences' +import {useComposerControls} from '#/state/shell/composer' +import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {atoms as a} from '#/alf' export function Post({ post, diff --git a/src/view/com/posts/CustomFeedEmptyState.tsx b/src/view/com/posts/CustomFeedEmptyState.tsx index 473968fca4..62a10fd197 100644 --- a/src/view/com/posts/CustomFeedEmptyState.tsx +++ b/src/view/com/posts/CustomFeedEmptyState.tsx @@ -1,19 +1,18 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' import {MagnifyingGlassIcon} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import React from 'react' -import {StyleSheet, View} from 'react-native' - -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' +import {Trans} from '@lingui/macro' export function CustomFeedEmptyState() { const pal = usePalette('default') diff --git a/src/view/com/posts/DiscoverFallbackHeader.tsx b/src/view/com/posts/DiscoverFallbackHeader.tsx index cb6dcc021f..ffde899979 100644 --- a/src/view/com/posts/DiscoverFallbackHeader.tsx +++ b/src/view/com/posts/DiscoverFallbackHeader.tsx @@ -1,12 +1,10 @@ -import {Trans} from '@lingui/macro' import React from 'react' import {View} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {InfoCircleIcon} from '#/lib/icons' - -import {TextLink} from '../util/Link' +import {Trans} from '@lingui/macro' import {Text} from '../util/text/Text' +import {usePalette} from '#/lib/hooks/usePalette' +import {TextLink} from '../util/Link' +import {InfoCircleIcon} from '#/lib/icons' export function DiscoverFallbackHeader() { const pal = usePalette('default') diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 65f5437cb8..cd3e98785d 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -1,9 +1,3 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' -import {useTheme} from 'lib/ThemeContext' import React, {memo} from 'react' import { ActivityIndicator, @@ -14,27 +8,31 @@ import { View, ViewStyle, } from 'react-native' - -import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' -import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' -import {listenPostCreated} from '#/state/events' -import {STALE} from '#/state/queries' -import { - FeedDescriptor, - FeedParams, - pollLatest, - RQKEY, - usePostFeedQuery, -} from '#/state/queries/post-feed' -import {useSession} from '#/state/session' - +import {useQueryClient} from '@tanstack/react-query' import {List, ListRef} from '../util/List' import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' -import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' -import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' import {FeedErrorMessage} from './FeedErrorMessage' import {FeedSlice} from './FeedSlice' +import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' +import {useAnalytics} from 'lib/analytics/analytics' +import {useTheme} from 'lib/ThemeContext' +import {logger} from '#/logger' +import { + RQKEY, + FeedDescriptor, + FeedParams, + usePostFeedQuery, + pollLatest, +} from '#/state/queries/post-feed' +import {isWeb} from '#/platform/detection' +import {listenPostCreated} from '#/state/events' +import {useSession} from '#/state/session' +import {STALE} from '#/state/queries' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {DiscoverFallbackHeader} from './DiscoverFallbackHeader' +import {FALLBACK_MARKER_POST} from '#/lib/api/feed/home' +import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender' const LOADING_ITEM = {_reactKey: '__loading__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} diff --git a/src/view/com/posts/FeedErrorMessage.tsx b/src/view/com/posts/FeedErrorMessage.tsx index 54381081d1..6d99c32f18 100644 --- a/src/view/com/posts/FeedErrorMessage.tsx +++ b/src/view/com/posts/FeedErrorMessage.tsx @@ -1,23 +1,21 @@ -import {AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api' -import {msg as msgLingui, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {NavigationProp} from 'lib/routes/types' import React from 'react' import {View} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' +import {AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' +import * as Toast from '../util/Toast' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {usePalette} from 'lib/hooks/usePalette' +import {useNavigation} from '@react-navigation/native' +import {NavigationProp} from 'lib/routes/types' import {logger} from '#/logger' import {useModalControls} from '#/state/modals' +import {msg as msgLingui, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {FeedDescriptor} from '#/state/queries/post-feed' -import {useRemoveFeedMutation} from '#/state/queries/preferences' - import {EmptyState} from '../util/EmptyState' -import {ErrorMessage} from '../util/error/ErrorMessage' -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' -import * as Toast from '../util/Toast' +import {cleanError} from '#/lib/strings/errors' +import {useRemoveFeedMutation} from '#/state/queries/preferences' export enum KnownError { Block = 'Block', diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 078465961b..7d29703e2d 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -1,3 +1,5 @@ +import React, {memo, useMemo, useState} from 'react' +import {StyleSheet, View} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, @@ -9,36 +11,32 @@ import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {isReasonFeedSource, ReasonFeedSource} from 'lib/api/feed/types' -import {MAX_POST_LINES} from 'lib/constants' -import {isEmbedByEmbedder} from 'lib/embeds' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {countLines} from 'lib/strings/helpers' -import {s} from 'lib/styles' -import React, {memo, useMemo, useState} from 'react' -import {StyleSheet, View} from 'react-native' - -import {atoms as a} from '#/alf' -import {RichText} from '#/components/RichText' -import {POST_TOMBSTONE, Shadow, usePostShadow} from '#/state/cache/post-shadow' -import {useSession} from '#/state/session' -import {useComposerControls} from '#/state/shell/composer' - -import {FeedNameText} from '../util/FeedInfoText' -import {Link, TextLink, TextLinkOnWebOnly} from '../util/Link' -import {ContentHider} from '../util/moderation/ContentHider' -import {PostAlerts} from '../util/moderation/PostAlerts' +import {ReasonFeedSource, isReasonFeedSource} from 'lib/api/feed/types' +import {Link, TextLinkOnWebOnly, TextLink} from '../util/Link' +import {Text} from '../util/text/Text' +import {UserInfoText} from '../util/UserInfoText' +import {PostMeta} from '../util/PostMeta' import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {PostEmbeds} from '../util/post-embeds' -import {PostMeta} from '../util/PostMeta' -import {Text} from '../util/text/Text' +import {ContentHider} from '../util/moderation/ContentHider' +import {PostAlerts} from '../util/moderation/PostAlerts' +import {RichText} from '#/components/RichText' import {PreviewableUserAvatar} from '../util/UserAvatar' -import {UserInfoText} from '../util/UserInfoText' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import {isEmbedByEmbedder} from 'lib/embeds' +import {MAX_POST_LINES} from 'lib/constants' +import {countLines} from 'lib/strings/helpers' +import {useComposerControls} from '#/state/shell/composer' +import {Shadow, usePostShadow, POST_TOMBSTONE} from '#/state/cache/post-shadow' +import {FeedNameText} from '../util/FeedInfoText' +import {useSession} from '#/state/session' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {atoms as a} from '#/alf' export function FeedItem({ post, diff --git a/src/view/com/posts/FeedSlice.tsx b/src/view/com/posts/FeedSlice.tsx index b4a6b37e67..84edee4a11 100644 --- a/src/view/com/posts/FeedSlice.tsx +++ b/src/view/com/posts/FeedSlice.tsx @@ -1,16 +1,14 @@ -import {AtUri} from '@atproto/api' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' import React, {memo} from 'react' import {StyleSheet, View} from 'react-native' -import Svg, {Circle, Line} from 'react-native-svg' - import {FeedPostSlice} from '#/state/queries/post-feed' - +import {AtUri} from '@atproto/api' import {Link} from '../util/Link' import {Text} from '../util/text/Text' +import Svg, {Circle, Line} from 'react-native-svg' import {FeedItem} from './FeedItem' +import {usePalette} from 'lib/hooks/usePalette' +import {makeProfileLink} from 'lib/routes/links' +import {Trans} from '@lingui/macro' let FeedSlice = ({slice}: {slice: FeedPostSlice}): React.ReactNode => { if (slice.isThread && slice.items.length > 3) { diff --git a/src/view/com/posts/FollowingEmptyState.tsx b/src/view/com/posts/FollowingEmptyState.tsx index e2991435e8..ef02039afb 100644 --- a/src/view/com/posts/FollowingEmptyState.tsx +++ b/src/view/com/posts/FollowingEmptyState.tsx @@ -1,19 +1,18 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' import {MagnifyingGlassIcon} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import React from 'react' -import {StyleSheet, View} from 'react-native' - -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' +import {Trans} from '@lingui/macro' export function FollowingEmptyState() { const pal = usePalette('default') diff --git a/src/view/com/posts/FollowingEndOfFeed.tsx b/src/view/com/posts/FollowingEndOfFeed.tsx index c91d94ce24..bea5bedeac 100644 --- a/src/view/com/posts/FollowingEndOfFeed.tsx +++ b/src/view/com/posts/FollowingEndOfFeed.tsx @@ -1,18 +1,17 @@ +import React from 'react' +import {StyleSheet, View, Dimensions} from 'react-native' +import {useNavigation} from '@react-navigation/native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' +import {Text} from '../util/text/Text' +import {Button} from '../util/forms/Button' import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' import {isWeb} from 'platform/detection' -import React from 'react' -import {Dimensions, StyleSheet, View} from 'react-native' - -import {Button} from '../util/forms/Button' -import {Text} from '../util/text/Text' +import {Trans} from '@lingui/macro' export function FollowingEndOfFeed() { const pal = usePalette('default') diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx index d1ef10c36c..9cc635b664 100644 --- a/src/view/com/profile/FollowButton.tsx +++ b/src/view/com/profile/FollowButton.tsx @@ -1,14 +1,12 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {StyleProp, TextStyle, View} from 'react-native' - -import {Shadow} from '#/state/cache/types' -import {useProfileFollowMutationQueue} from '#/state/queries/profile' - +import {AppBskyActorDefs} from '@atproto/api' import {Button, ButtonType} from '../util/forms/Button' import * as Toast from '../util/Toast' +import {useProfileFollowMutationQueue} from '#/state/queries/profile' +import {Shadow} from '#/state/cache/types' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' export function FollowButton({ unfollowedType = 'inverted', diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 2830268d43..266adc51de 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -1,31 +1,29 @@ +import * as React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { AppBskyActorDefs, moderateProfile, ProfileModeration, } from '@atproto/api' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import { - describeModerationCause, - getModerationCauseKey, - getProfileModerationCauses, -} from 'lib/moderation' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {s} from 'lib/styles' -import * as React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {useProfileShadow} from '#/state/cache/profile-shadow' -import {Shadow} from '#/state/cache/types' -import {useModerationOpts} from '#/state/queries/preferences' -import {useSession} from '#/state/session' - import {Link} from '../util/Link' import {Text} from '../util/text/Text' import {UserAvatar} from '../util/UserAvatar' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' import {FollowButton} from './FollowButton' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import { + describeModerationCause, + getProfileModerationCauses, + getModerationCauseKey, +} from 'lib/moderation' +import {Shadow} from '#/state/cache/types' +import {useModerationOpts} from '#/state/queries/preferences' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useSession} from '#/state/session' +import {Trans} from '@lingui/macro' export function ProfileCard({ testID, diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index e48ec96591..411ae6c176 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -1,17 +1,15 @@ -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' +import {CenteredView} from '../util/Views' +import {LoadingScreen} from '../util/LoadingScreen' +import {List} from '../util/List' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {ProfileCardWithFollowBtn} from './ProfileCard' import {useProfileFollowersQuery} from '#/state/queries/profile-followers' import {useResolveDidQuery} from '#/state/queries/resolve-uri' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List} from '../util/List' -import {LoadingScreen} from '../util/LoadingScreen' -import {CenteredView} from '../util/Views' -import {ProfileCardWithFollowBtn} from './ProfileCard' +import {logger} from '#/logger' +import {cleanError} from '#/lib/strings/errors' export function ProfileFollowers({name}: {name: string}) { const [isPTRing, setIsPTRing] = React.useState(false) diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index 58275cd0ed..bd4af10810 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -1,17 +1,15 @@ -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' +import {CenteredView} from '../util/Views' +import {LoadingScreen} from '../util/LoadingScreen' +import {List} from '../util/List' +import {ErrorMessage} from '../util/error/ErrorMessage' +import {ProfileCardWithFollowBtn} from './ProfileCard' import {useProfileFollowsQuery} from '#/state/queries/profile-follows' import {useResolveDidQuery} from '#/state/queries/resolve-uri' - -import {ErrorMessage} from '../util/error/ErrorMessage' -import {List} from '../util/List' -import {LoadingScreen} from '../util/LoadingScreen' -import {CenteredView} from '../util/Views' -import {ProfileCardWithFollowBtn} from './ProfileCard' +import {logger} from '#/logger' +import {cleanError} from '#/lib/strings/errors' export function ProfileFollows({name}: {name: string}) { const [isPTRing, setIsPTRing] = React.useState(false) diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index b78c95f789..a11fe83743 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -1,24 +1,3 @@ -import { - AppBskyActorDefs, - moderateProfile, - ModerationOpts, - RichText as RichTextAPI, -} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {BACK_HITSLOP} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {makeProfileLink} from 'lib/routes/links' -import {NavigationProp} from 'lib/routes/types' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {isInvalidHandle, sanitizeHandle} from 'lib/strings/handles' -import {pluralize} from 'lib/strings/helpers' -import {colors, s} from 'lib/styles' -import {isNative} from 'platform/detection' import React, {memo, useMemo} from 'react' import { StyleSheet, @@ -26,34 +5,53 @@ import { TouchableWithoutFeedback, View, } from 'react-native' -import {useProfileShadow} from 'state/cache/profile-shadow' -import {ProfileMenu} from 'view/com/profile/ProfileMenu' - -import {atoms as a} from '#/alf' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' +import { + AppBskyActorDefs, + ModerationOpts, + moderateProfile, + RichText as RichTextAPI, +} from '@atproto/api' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {NavigationProp} from 'lib/routes/types' +import {isNative} from 'platform/detection' +import {BlurView} from '../util/BlurView' +import * as Toast from '../util/Toast' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {Text} from '../util/text/Text' +import {ThemedText} from '../util/text/ThemedText' import {RichText} from '#/components/RichText' -import {logger} from '#/logger' -import {Shadow} from '#/state/cache/types' -import {ProfileImageLightbox, useLightboxControls} from '#/state/lightbox' +import {UserAvatar} from '../util/UserAvatar' +import {UserBanner} from '../util/UserBanner' +import {ProfileHeaderAlerts} from '../util/moderation/ProfileHeaderAlerts' +import {formatCount} from '../util/numeric/format' +import {Link} from '../util/Link' +import {ProfileHeaderSuggestedFollows} from './ProfileHeaderSuggestedFollows' import {useModalControls} from '#/state/modals' +import {useLightboxControls, ProfileImageLightbox} from '#/state/lightbox' import { useProfileBlockMutationQueue, useProfileFollowMutationQueue, } from '#/state/queries/profile' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {BACK_HITSLOP} from 'lib/constants' +import {isInvalidHandle, sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import {pluralize} from 'lib/strings/helpers' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {s, colors} from 'lib/styles' +import {logger} from '#/logger' import {useSession} from '#/state/session' +import {Shadow} from '#/state/cache/types' import {useRequireAuth} from '#/state/session' - -import {BlurView} from '../util/BlurView' -import {Link} from '../util/Link' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {LabelInfo} from '../util/moderation/LabelInfo' -import {ProfileHeaderAlerts} from '../util/moderation/ProfileHeaderAlerts' -import {formatCount} from '../util/numeric/format' -import {Text} from '../util/text/Text' -import {ThemedText} from '../util/text/ThemedText' -import * as Toast from '../util/Toast' -import {UserAvatar} from '../util/UserAvatar' -import {UserBanner} from '../util/UserBanner' -import {ProfileHeaderSuggestedFollows} from './ProfileHeaderSuggestedFollows' +import {useProfileShadow} from 'state/cache/profile-shadow' +import {atoms as a} from '#/alf' +import {ProfileMenu} from 'view/com/profile/ProfileMenu' let ProfileHeaderLoading = (_props: {}): React.ReactNode => { const pal = usePalette('default') diff --git a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx index bc440a68ab..6edc61fcf8 100644 --- a/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx +++ b/src/view/com/profile/ProfileHeaderSuggestedFollows.tsx @@ -1,28 +1,27 @@ +import React from 'react' +import {View, StyleSheet, Pressable, ScrollView} from 'react-native' import {AppBskyActorDefs, moderateProfile} from '@atproto/api' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {isWeb} from 'platform/detection' -import React from 'react' -import {Pressable, ScrollView, StyleSheet, View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' -import {Link} from 'view/com/util/Link' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' - -import {useProfileShadow} from '#/state/cache/profile-shadow' -import {useModerationOpts} from '#/state/queries/preferences' -import {useProfileFollowMutationQueue} from '#/state/queries/profile' -import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows' import * as Toast from '../util/Toast' +import {usePalette} from 'lib/hooks/usePalette' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {Button} from 'view/com/util/forms/Button' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import {Link} from 'view/com/util/Link' +import {useAnalytics} from 'lib/analytics/analytics' +import {isWeb} from 'platform/detection' +import {useModerationOpts} from '#/state/queries/preferences' +import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useProfileFollowMutationQueue} from '#/state/queries/profile' +import {Trans} from '@lingui/macro' const OUTER_PADDING = 10 const INNER_PADDING = 14 diff --git a/src/view/com/profile/ProfileMenu.tsx b/src/view/com/profile/ProfileMenu.tsx index c427ac9f72..d79e1891d8 100644 --- a/src/view/com/profile/ProfileMenu.tsx +++ b/src/view/com/profile/ProfileMenu.tsx @@ -1,17 +1,21 @@ -import {AppBskyActorDefs} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {shareUrl} from 'lib/sharing' -import {toShareUrl} from 'lib/strings/url-helpers' import React, {memo} from 'react' import {TouchableOpacity} from 'react-native' -import {Shadow} from 'state/cache/types' +import {AppBskyActorDefs} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useQueryClient} from '@tanstack/react-query' +import * as Toast from 'view/com/util/Toast' +import {EventStopper} from 'view/com/util/EventStopper' +import {useSession} from 'state/session' +import * as Menu from '#/components/Menu' +import {useTheme} from '#/alf' +import {usePalette} from 'lib/hooks/usePalette' +import {HITSLOP_10} from 'lib/constants' +import {shareUrl} from 'lib/sharing' +import {toShareUrl} from 'lib/strings/url-helpers' +import {makeProfileLink} from 'lib/routes/links' +import {useAnalytics} from 'lib/analytics/analytics' import {useModalControls} from 'state/modals' import { RQKEY as profileQueryKey, @@ -19,21 +23,16 @@ import { useProfileFollowMutationQueue, useProfileMuteMutationQueue, } from 'state/queries/profile' -import {useSession} from 'state/session' -import {EventStopper} from 'view/com/util/EventStopper' -import * as Toast from 'view/com/util/Toast' - -import {useTheme} from '#/alf' import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' -import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' -import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2' +import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' +import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck' import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX' -import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' -import * as Menu from '#/components/Menu' +import {PeopleRemove2_Stroke2_Corner0_Rounded as UserMinus} from '#/components/icons/PeopleRemove2' import {logger} from '#/logger' +import {Shadow} from 'state/cache/types' let ProfileMenu = ({ profile, diff --git a/src/view/com/profile/ProfileSubpageHeader.tsx b/src/view/com/profile/ProfileSubpageHeader.tsx index f2934fa1c3..eaf00f3e66 100644 --- a/src/view/com/profile/ProfileSubpageHeader.tsx +++ b/src/view/com/profile/ProfileSubpageHeader.tsx @@ -1,26 +1,24 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {BACK_HITSLOP} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {makeProfileLink} from 'lib/routes/links' -import {NavigationProp} from 'lib/routes/types' -import {sanitizeHandle} from 'lib/strings/handles' -import {isNative} from 'platform/detection' import React from 'react' import {Pressable, StyleSheet, View} from 'react-native' - -import {emitSoftReset} from '#/state/events' -import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' -import {useSetDrawerOpen} from '#/state/shell' - -import {TextLink} from '../util/Link' -import {LoadingPlaceholder} from '../util/LoadingPlaceholder' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Text} from '../util/text/Text' +import {TextLink} from '../util/Link' import {UserAvatar, UserAvatarType} from '../util/UserAvatar' +import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {CenteredView} from '../util/Views' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink} from 'lib/routes/links' +import {NavigationProp} from 'lib/routes/types' +import {BACK_HITSLOP} from 'lib/constants' +import {isNative} from 'platform/detection' +import {useLightboxControls, ImagesLightbox} from '#/state/lightbox' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {useSetDrawerOpen} from '#/state/shell' +import {emitSoftReset} from '#/state/events' export function ProfileSubpageHeader({ isLoading, diff --git a/src/view/com/testing/TestCtrls.e2e.tsx b/src/view/com/testing/TestCtrls.e2e.tsx index 77a114b54a..e1e8994882 100644 --- a/src/view/com/testing/TestCtrls.e2e.tsx +++ b/src/view/com/testing/TestCtrls.e2e.tsx @@ -1,13 +1,11 @@ -import {useQueryClient} from '@tanstack/react-query' import React from 'react' import {Pressable, View} from 'react-native' - -import {useModalControls} from '#/state/modals' -import {useSetFeedViewPreferencesMutation} from '#/state/queries/preferences' -import {useSessionApi} from '#/state/session' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' - import {navigate} from '../../../Navigation' +import {useModalControls} from '#/state/modals' +import {useQueryClient} from '@tanstack/react-query' +import {useSessionApi} from '#/state/session' +import {useSetFeedViewPreferencesMutation} from '#/state/queries/preferences' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' /** * This utility component is only included in the test simulator diff --git a/src/view/com/threadgate/WhoCanReply.tsx b/src/view/com/threadgate/WhoCanReply.tsx index bd17a0de32..1c34623d84 100644 --- a/src/view/com/threadgate/WhoCanReply.tsx +++ b/src/view/com/threadgate/WhoCanReply.tsx @@ -1,22 +1,21 @@ +import React from 'react' +import {StyleProp, View, ViewStyle} from 'react-native' import { AppBskyFeedDefs, AppBskyFeedThreadgate, AppBskyGraphDefs, AtUri, } from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Trans} from '@lingui/macro' -import React from 'react' -import {StyleProp, View, ViewStyle} from 'react-native' - -import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {makeListLink, makeProfileLink} from '#/lib/routes/links' -import {colors} from '#/lib/styles' - -import {TextLink} from '../util/Link' import {Text} from '../util/text/Text' +import {TextLink} from '../util/Link' +import {makeProfileLink, makeListLink} from '#/lib/routes/links' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' + +import {colors} from '#/lib/styles' export function WhoCanReply({ post, diff --git a/src/view/com/util/AccountDropdownBtn.tsx b/src/view/com/util/AccountDropdownBtn.tsx index 24f64af456..221879df79 100644 --- a/src/view/com/util/AccountDropdownBtn.tsx +++ b/src/view/com/util/AccountDropdownBtn.tsx @@ -1,18 +1,16 @@ +import React from 'react' +import {Pressable} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' -import React from 'react' -import {Pressable} from 'react-native' - -import {SessionAccount, useSessionApi} from '#/state/session' - -import * as Toast from '../../com/util/Toast' +import {usePalette} from 'lib/hooks/usePalette' import {DropdownItem, NativeDropdown} from './forms/NativeDropdown' +import * as Toast from '../../com/util/Toast' +import {useSessionApi, SessionAccount} from '#/state/session' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' export function AccountDropdownBtn({account}: {account: SessionAccount}) { const pal = usePalette('default') diff --git a/src/view/com/util/BlurView.android.tsx b/src/view/com/util/BlurView.android.tsx index a62e1dff01..eee1d9d867 100644 --- a/src/view/com/util/BlurView.android.tsx +++ b/src/view/com/util/BlurView.android.tsx @@ -1,6 +1,6 @@ -import {addStyle} from 'lib/styles' import React from 'react' import {StyleSheet, View, ViewProps} from 'react-native' +import {addStyle} from 'lib/styles' type BlurViewProps = ViewProps & { blurType?: 'dark' | 'light' diff --git a/src/view/com/util/BlurView.web.tsx b/src/view/com/util/BlurView.web.tsx index 09807816b3..d1fb4665fb 100644 --- a/src/view/com/util/BlurView.web.tsx +++ b/src/view/com/util/BlurView.web.tsx @@ -1,6 +1,6 @@ -import {addStyle} from 'lib/styles' import React from 'react' import {StyleSheet, View, ViewProps} from 'react-native' +import {addStyle} from 'lib/styles' type BlurViewProps = ViewProps & { blurType?: 'dark' | 'light' diff --git a/src/view/com/util/BottomSheetCustomBackdrop.tsx b/src/view/com/util/BottomSheetCustomBackdrop.tsx index 7cf9c10da6..ed5a2f1654 100644 --- a/src/view/com/util/BottomSheetCustomBackdrop.tsx +++ b/src/view/com/util/BottomSheetCustomBackdrop.tsx @@ -1,12 +1,12 @@ -import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet' -import {t} from '@lingui/macro' import React, {useMemo} from 'react' import {TouchableWithoutFeedback} from 'react-native' +import {BottomSheetBackdropProps} from '@gorhom/bottom-sheet' import Animated, { Extrapolate, interpolate, useAnimatedStyle, } from 'react-native-reanimated' +import {t} from '@lingui/macro' export function createCustomBackdrop( onClose?: (() => void) | undefined, diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx index cc71165b55..7486b212fa 100644 --- a/src/view/com/util/EmptyState.tsx +++ b/src/view/com/util/EmptyState.tsx @@ -1,14 +1,13 @@ +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {IconProp} from '@fortawesome/fontawesome-svg-core' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import {UserGroupIcon} from 'lib/icons' -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - import {Text} from './text/Text' +import {UserGroupIcon} from 'lib/icons' +import {usePalette} from 'lib/hooks/usePalette' export function EmptyState({ testID, diff --git a/src/view/com/util/EmptyStateWithButton.tsx b/src/view/com/util/EmptyStateWithButton.tsx index 1a580ae9aa..008ca2bdb6 100644 --- a/src/view/com/util/EmptyStateWithButton.tsx +++ b/src/view/com/util/EmptyStateWithButton.tsx @@ -1,15 +1,14 @@ -import {IconProp} from '@fortawesome/fontawesome-svg-core' +import React from 'react' +import {StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {Text} from './text/Text' +import {Button} from './forms/Button' import {usePalette} from 'lib/hooks/usePalette' import {s} from 'lib/styles' -import React from 'react' -import {StyleSheet, View} from 'react-native' - -import {Button} from './forms/Button' -import {Text} from './text/Text' interface Props { testID?: string diff --git a/src/view/com/util/ErrorBoundary.tsx b/src/view/com/util/ErrorBoundary.tsx index b287a2469a..5ec1d00144 100644 --- a/src/view/com/util/ErrorBoundary.tsx +++ b/src/view/com/util/ErrorBoundary.tsx @@ -1,10 +1,8 @@ -import {t} from '@lingui/macro' import React, {Component, ErrorInfo, ReactNode} from 'react' - -import {logger} from '#/logger' - import {ErrorScreen} from './error/ErrorScreen' import {CenteredView} from './Views' +import {t} from '@lingui/macro' +import {logger} from '#/logger' interface Props { children?: ReactNode diff --git a/src/view/com/util/FeedInfoText.tsx b/src/view/com/util/FeedInfoText.tsx index 3afaf256cc..54124c739a 100644 --- a/src/view/com/util/FeedInfoText.tsx +++ b/src/view/com/util/FeedInfoText.tsx @@ -1,12 +1,10 @@ -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {TypographyVariant} from 'lib/ThemeContext' import React from 'react' import {StyleProp, StyleSheet, TextStyle} from 'react-native' - -import {useFeedSourceInfoQuery} from '#/state/queries/feed' - import {TextLinkOnWebOnly} from './Link' import {LoadingPlaceholder} from './LoadingPlaceholder' +import {TypographyVariant} from 'lib/ThemeContext' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {useFeedSourceInfoQuery} from '#/state/queries/feed' export function FeedNameText({ type = 'md', diff --git a/src/view/com/util/Html.tsx b/src/view/com/util/Html.tsx index b8d31dfd6a..2e47194811 100644 --- a/src/view/com/util/Html.tsx +++ b/src/view/com/util/Html.tsx @@ -1,17 +1,16 @@ +import * as React from 'react' +import {StyleSheet, View} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {Text} from './text/Text' +import {TextLink} from './Link' import { H1 as ExpoH1, H2 as ExpoH2, H3 as ExpoH3, H4 as ExpoH4, } from '@expo/html-elements' -import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useTheme} from 'lib/ThemeContext' -import * as React from 'react' -import {StyleSheet, View} from 'react-native' - -import {TextLink} from './Link' -import {Text} from './text/Text' /** * These utilities are used to define long documents in an html-like diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index 112e061bcc..f456224885 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -1,38 +1,36 @@ -import {sanitizeUrl} from '@braintree/sanitize-url' -import {StackActions, useLinkProps} from '@react-navigation/native' +import React, {ComponentProps, memo, useMemo} from 'react' import { - DebouncedNavigationProp, - useNavigationDeduped, -} from 'lib/hooks/useNavigationDeduped' + GestureResponderEvent, + Platform, + StyleProp, + TextStyle, + TextProps, + View, + ViewStyle, + Pressable, + TouchableWithoutFeedback, + TouchableOpacity, +} from 'react-native' +import {useLinkProps, StackActions} from '@react-navigation/native' +import {Text} from './text/Text' +import {TypographyVariant} from 'lib/ThemeContext' +import {router} from '../../../routes' import { convertBskyAppUrlIfNeeded, isExternalUrl, linkRequiresWarning, } from 'lib/strings/url-helpers' -import {TypographyVariant} from 'lib/ThemeContext' import {isAndroid, isWeb} from 'platform/detection' -import React, {ComponentProps, memo, useMemo} from 'react' -import { - GestureResponderEvent, - Platform, - Pressable, - StyleProp, - TextProps, - TextStyle, - TouchableOpacity, - TouchableWithoutFeedback, - View, - ViewStyle, -} from 'react-native' -import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper' - +import {sanitizeUrl} from '@braintree/sanitize-url' +import {PressableWithHover} from './PressableWithHover' +import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' import {useModalControls} from '#/state/modals' import {useOpenLink} from '#/state/preferences/in-app-browser' - -import {router} from '../../../routes' -import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' -import {PressableWithHover} from './PressableWithHover' -import {Text} from './text/Text' +import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper' +import { + DebouncedNavigationProp, + useNavigationDeduped, +} from 'lib/hooks/useNavigationDeduped' type Event = | React.MouseEvent diff --git a/src/view/com/util/List.tsx b/src/view/com/util/List.tsx index 896608af1f..d30a9d805b 100644 --- a/src/view/com/util/List.tsx +++ b/src/view/com/util/List.tsx @@ -1,13 +1,11 @@ -import {addStyle} from 'lib/styles' import React, {memo} from 'react' import {FlatListProps, RefreshControl} from 'react-native' +import {FlatList_INTERNAL} from './Views' +import {addStyle} from 'lib/styles' +import {useScrollHandlers} from '#/lib/ScrollContext' import {runOnJS, useSharedValue} from 'react-native-reanimated' - import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED' import {usePalette} from '#/lib/hooks/usePalette' -import {useScrollHandlers} from '#/lib/ScrollContext' - -import {FlatList_INTERNAL} from './Views' export type ListMethods = FlatList_INTERNAL export type ListProps = Omit< diff --git a/src/view/com/util/List.web.tsx b/src/view/com/util/List.web.tsx index 6fb17b9f68..936bac198d 100644 --- a/src/view/com/util/List.web.tsx +++ b/src/view/com/util/List.web.tsx @@ -1,12 +1,11 @@ +import React, {isValidElement, memo, useRef, startTransition} from 'react' +import {FlatListProps, StyleSheet, View, ViewProps} from 'react-native' +import {addStyle} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {addStyle} from 'lib/styles' -import React, {isValidElement, memo, startTransition, useRef} from 'react' -import {FlatListProps, StyleSheet, View, ViewProps} from 'react-native' - -import {batchedUpdates} from '#/lib/batchedUpdates' -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import {useScrollHandlers} from '#/lib/ScrollContext' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {batchedUpdates} from '#/lib/batchedUpdates' export type ListMethods = any // TODO: Better types. export type ListProps = Omit< diff --git a/src/view/com/util/LoadMoreRetryBtn.tsx b/src/view/com/util/LoadMoreRetryBtn.tsx index fa82456322..a2e9838b36 100644 --- a/src/view/com/util/LoadMoreRetryBtn.tsx +++ b/src/view/com/util/LoadMoreRetryBtn.tsx @@ -1,13 +1,12 @@ +import React from 'react' +import {StyleSheet} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {usePalette} from 'lib/hooks/usePalette' -import React from 'react' -import {StyleSheet} from 'react-native' - import {Button} from './forms/Button' import {Text} from './text/Text' +import {usePalette} from 'lib/hooks/usePalette' export function LoadMoreRetryBtn({ label, diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index fb2c226e8e..6dfe125985 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -1,20 +1,20 @@ -import {usePalette} from 'lib/hooks/usePalette' +import React from 'react' +import { + StyleSheet, + StyleProp, + View, + ViewStyle, + DimensionValue, +} from 'react-native' import { - CommentBottomArrow, HeartIcon, HeartIconSolid, + CommentBottomArrow, RepostIcon, } from 'lib/icons' import {s} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import { - DimensionValue, - StyleProp, - StyleSheet, - View, - ViewStyle, -} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' export function LoadingPlaceholder({ width, diff --git a/src/view/com/util/LoadingScreen.tsx b/src/view/com/util/LoadingScreen.tsx index 0736649316..93c3bee42a 100644 --- a/src/view/com/util/LoadingScreen.tsx +++ b/src/view/com/util/LoadingScreen.tsx @@ -1,7 +1,6 @@ -import {s} from 'lib/styles' import React from 'react' import {ActivityIndicator, View} from 'react-native' - +import {s} from 'lib/styles' import {CenteredView} from './Views' export function LoadingScreen() { diff --git a/src/view/com/util/MainScrollProvider.tsx b/src/view/com/util/MainScrollProvider.tsx index 1ed0631ac4..01b8a954d5 100644 --- a/src/view/com/util/MainScrollProvider.tsx +++ b/src/view/com/util/MainScrollProvider.tsx @@ -1,12 +1,11 @@ -import EventEmitter from 'eventemitter3' -import {isNative, isWeb} from 'platform/detection' import React, {useCallback, useEffect} from 'react' -import {NativeScrollEvent} from 'react-native' -import {interpolate, useSharedValue} from 'react-native-reanimated' - +import EventEmitter from 'eventemitter3' import {ScrollProvider} from '#/lib/ScrollContext' -import {useMinimalShellMode, useSetMinimalShellMode} from '#/state/shell' +import {NativeScrollEvent} from 'react-native' +import {useSetMinimalShellMode, useMinimalShellMode} from '#/state/shell' import {useShellLayout} from '#/state/shell/shell-layout' +import {isNative, isWeb} from 'platform/detection' +import {useSharedValue, interpolate} from 'react-native-reanimated' const WEB_HIDE_SHELL_THRESHOLD = 200 diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx index 5832fc5d86..3795dcf136 100644 --- a/src/view/com/util/PostMeta.tsx +++ b/src/view/com/util/PostMeta.tsx @@ -1,20 +1,18 @@ -import {ModerationUI} from '@atproto/api' -import {usePalette} from 'lib/hooks/usePalette' -import {makeProfileLink} from 'lib/routes/links' -import {sanitizeDisplayName} from 'lib/strings/display-names' -import {sanitizeHandle} from 'lib/strings/handles' -import {niceDate} from 'lib/strings/time' -import {TypographyVariant} from 'lib/ThemeContext' -import {isAndroid, isWeb} from 'platform/detection' import React, {memo} from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' - -import {usePrefetchProfileQuery} from '#/state/queries/profile' - -import {TextLinkOnWebOnly} from './Link' import {Text} from './text/Text' -import {TimeElapsed} from './TimeElapsed' +import {TextLinkOnWebOnly} from './Link' +import {niceDate} from 'lib/strings/time' +import {usePalette} from 'lib/hooks/usePalette' +import {TypographyVariant} from 'lib/ThemeContext' import {UserAvatar} from './UserAvatar' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {sanitizeHandle} from 'lib/strings/handles' +import {isAndroid, isWeb} from 'platform/detection' +import {TimeElapsed} from './TimeElapsed' +import {makeProfileLink} from 'lib/routes/links' +import {ModerationUI} from '@atproto/api' +import {usePrefetchProfileQuery} from '#/state/queries/profile' interface PostMetaOpts { author: { diff --git a/src/view/com/util/PressableWithHover.tsx b/src/view/com/util/PressableWithHover.tsx index 83c84f836b..77276f1843 100644 --- a/src/view/com/util/PressableWithHover.tsx +++ b/src/view/com/util/PressableWithHover.tsx @@ -1,12 +1,12 @@ -import {addStyle} from 'lib/styles' import React, { - forwardRef, - PropsWithChildren, - Ref, - useCallback, useState, + useCallback, + PropsWithChildren, + forwardRef, + Ref, } from 'react' import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' +import {addStyle} from 'lib/styles' interface PressableWithHover extends PressableProps { hoverStyle: StyleProp diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx index b607a018a9..66e363cd41 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector.tsx @@ -1,10 +1,9 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import React, {createRef, useMemo, useRef, useState} from 'react' +import React, {createRef, useState, useMemo, useRef} from 'react' import {Animated, Pressable, StyleSheet, View} from 'react-native' - import {Text} from './text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' interface Layout { x: number diff --git a/src/view/com/util/SimpleViewHeader.tsx b/src/view/com/util/SimpleViewHeader.tsx index 3319f7a943..814b2fb15d 100644 --- a/src/view/com/util/SimpleViewHeader.tsx +++ b/src/view/com/util/SimpleViewHeader.tsx @@ -1,9 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' import React from 'react' import { StyleProp, @@ -12,11 +6,15 @@ import { View, ViewStyle, } from 'react-native' - -import {isWeb} from '#/platform/detection' -import {useSetDrawerOpen} from '#/state/shell' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' import {CenteredView} from './Views' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useAnalytics} from 'lib/analytics/analytics' +import {NavigationProp} from 'lib/routes/types' +import {useSetDrawerOpen} from '#/state/shell' +import {isWeb} from '#/platform/detection' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} diff --git a/src/view/com/util/TimeElapsed.tsx b/src/view/com/util/TimeElapsed.tsx index bf848193d1..aa3a092235 100644 --- a/src/view/com/util/TimeElapsed.tsx +++ b/src/view/com/util/TimeElapsed.tsx @@ -1,6 +1,5 @@ -import {ago} from 'lib/strings/time' import React from 'react' - +import {ago} from 'lib/strings/time' import {useTickEveryMinute} from '#/state/shell' // FIXME(dan): Figure out why the false positives diff --git a/src/view/com/util/Toast.tsx b/src/view/com/util/Toast.tsx index 91187e2059..5462505e1e 100644 --- a/src/view/com/util/Toast.tsx +++ b/src/view/com/util/Toast.tsx @@ -1,15 +1,13 @@ -import {Props as FontAwesomeProps} from '@fortawesome/react-native-fontawesome' -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' -import {usePalette} from 'lib/hooks/usePalette' -import {colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' +import RootSiblings from 'react-native-root-siblings' import React from 'react' import {Animated, StyleSheet, View} from 'react-native' -import RootSiblings from 'react-native-root-siblings' - -import {IS_TEST} from '#/env' - +import {Props as FontAwesomeProps} from '@fortawesome/react-native-fontawesome' import {Text} from './text/Text' +import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' +import {IS_TEST} from '#/env' const TIMEOUT = 4e3 diff --git a/src/view/com/util/Toast.web.tsx b/src/view/com/util/Toast.web.tsx index da7a5df8ea..d5a8435412 100644 --- a/src/view/com/util/Toast.web.tsx +++ b/src/view/com/util/Toast.web.tsx @@ -2,13 +2,13 @@ * Note: the dataSet properties are used to leverage custom CSS in public/index.html */ +import React, {useState, useEffect} from 'react' +import {StyleSheet, Text, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, Props as FontAwesomeProps, } from '@fortawesome/react-native-fontawesome' -import React, {useEffect, useState} from 'react' -import {StyleSheet, Text, View} from 'react-native' const DURATION = 3500 diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index 2aa28b725f..4132373974 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -1,31 +1,30 @@ -import {ModerationUI} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import { - useCameraPermission, - usePhotoLibraryPermission, -} from 'lib/hooks/usePermissions' -import {colors} from 'lib/styles' -import {isAndroid, isNative, isWeb} from 'platform/detection' import React, {memo, useMemo} from 'react' import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' +import Svg, {Circle, Rect, Path} from 'react-native-svg' import {Image as RNImage} from 'react-native-image-crop-picker' -import Svg, {Circle, Path, Rect} from 'react-native-svg' -import {HighPriorityImage} from 'view/com/util/images/Image' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {ModerationUI} from '@atproto/api' -import {useTheme} from '#/alf' +import {HighPriorityImage} from 'view/com/util/images/Image' +import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' +import { + usePhotoLibraryPermission, + useCameraPermission, +} from 'lib/hooks/usePermissions' +import {colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb, isAndroid, isNative} from 'platform/detection' +import {UserPreviewLink} from './UserPreviewLink' +import * as Menu from '#/components/Menu' import { - Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, Camera_Stroke2_Corner0_Rounded as Camera, + Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, } from '#/components/icons/Camera' import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import * as Menu from '#/components/Menu' - -import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' -import {UserPreviewLink} from './UserPreviewLink' +import {useTheme} from '#/alf' export type UserAvatarType = 'user' | 'algo' | 'list' diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx index 6eb0ccc12a..a5ddfee8ac 100644 --- a/src/view/com/util/UserBanner.tsx +++ b/src/view/com/util/UserBanner.tsx @@ -1,30 +1,29 @@ -import {ModerationUI} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' -import {usePalette} from 'lib/hooks/usePalette' -import { - useCameraPermission, - usePhotoLibraryPermission, -} from 'lib/hooks/usePermissions' -import {colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isAndroid, isNative} from 'platform/detection' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {ModerationUI} from '@atproto/api' +import {Image} from 'expo-image' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {useTheme as useAlfTheme} from '#/alf' +import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' +import { + usePhotoLibraryPermission, + useCameraPermission, +} from 'lib/hooks/usePermissions' +import {usePalette} from 'lib/hooks/usePalette' +import {isAndroid, isNative} from 'platform/detection' import {Image as RNImage} from 'react-native-image-crop-picker' import {EventStopper} from 'view/com/util/EventStopper' - -import {useTheme as useAlfTheme} from '#/alf' +import * as Menu from '#/components/Menu' import { Camera_Filled_Stroke2_Corner0_Rounded as CameraFilled, Camera_Stroke2_Corner0_Rounded as Camera, } from '#/components/icons/Camera' import {StreamingLive_Stroke2_Corner0_Rounded as Library} from '#/components/icons/StreamingLive' import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import * as Menu from '#/components/Menu' - -import {openCamera, openCropper, openPicker} from '../../../lib/media/picker' export function UserBanner({ banner, diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index ab937c664b..9cb9997f60 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -1,17 +1,15 @@ +import React from 'react' import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' -import {makeProfileLink} from 'lib/routes/links' +import {StyleProp, StyleSheet, TextStyle} from 'react-native' +import {TextLinkOnWebOnly} from './Link' +import {Text} from './text/Text' +import {LoadingPlaceholder} from './LoadingPlaceholder' +import {TypographyVariant} from 'lib/ThemeContext' import {sanitizeDisplayName} from 'lib/strings/display-names' import {sanitizeHandle} from 'lib/strings/handles' -import {TypographyVariant} from 'lib/ThemeContext' -import React from 'react' -import {StyleProp, StyleSheet, TextStyle} from 'react-native' - -import {STALE} from '#/state/queries' +import {makeProfileLink} from 'lib/routes/links' import {useProfileQuery} from '#/state/queries/profile' - -import {TextLinkOnWebOnly} from './Link' -import {LoadingPlaceholder} from './LoadingPlaceholder' -import {Text} from './text/Text' +import {STALE} from '#/state/queries' export function UserInfoText({ type = 'md', diff --git a/src/view/com/util/UserPreviewLink.tsx b/src/view/com/util/UserPreviewLink.tsx index 09d230000e..a2c46afc01 100644 --- a/src/view/com/util/UserPreviewLink.tsx +++ b/src/view/com/util/UserPreviewLink.tsx @@ -1,11 +1,9 @@ -import {makeProfileLink} from 'lib/routes/links' -import {isWeb} from 'platform/detection' import React from 'react' import {StyleProp, ViewStyle} from 'react-native' - -import {usePrefetchProfileQuery} from '#/state/queries/profile' - import {Link} from './Link' +import {isWeb} from 'platform/detection' +import {makeProfileLink} from 'lib/routes/links' +import {usePrefetchProfileQuery} from '#/state/queries/profile' interface UserPreviewLinkProps { did: string diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 3ac7572692..872e10eef0 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -1,21 +1,19 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {NavigationProp} from 'lib/routes/types' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' - -import {useTheme} from '#/alf' -import {useSetDrawerOpen} from '#/state/shell' - -import {Text} from './text/Text' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' import {CenteredView} from './Views' +import {Text} from './text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useAnalytics} from 'lib/analytics/analytics' +import {NavigationProp} from 'lib/routes/types' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import Animated from 'react-native-reanimated' +import {useSetDrawerOpen} from '#/state/shell' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useTheme} from '#/alf' const BACK_HITSLOP = {left: 20, top: 20, right: 50, bottom: 20} diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx index 3800283349..ee993c564d 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/src/view/com/util/ViewSelector.tsx @@ -1,21 +1,20 @@ -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {usePalette} from 'lib/hooks/usePalette' -import {clamp} from 'lib/numbers' -import {colors, s} from 'lib/styles' -import {isAndroid} from 'platform/detection' import React, {useEffect, useState} from 'react' import { - NativeScrollEvent, NativeSyntheticEvent, + NativeScrollEvent, Pressable, RefreshControl, - ScrollView, StyleSheet, View, + ScrollView, } from 'react-native' - -import {Text} from './text/Text' import {FlatList_INTERNAL} from './Views' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {Text} from './text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {clamp} from 'lib/numbers' +import {s, colors} from 'lib/styles' +import {isAndroid} from 'platform/detection' const HEADER_ITEM = {_reactKey: '__header__'} const SELECTOR_ITEM = {_reactKey: '__selector__'} diff --git a/src/view/com/util/Views.web.tsx b/src/view/com/util/Views.web.tsx index db023a32c8..ae165077ca 100644 --- a/src/view/com/util/Views.web.tsx +++ b/src/view/com/util/Views.web.tsx @@ -12,9 +12,6 @@ * need to match layout but which aren't scrolled. */ -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {addStyle} from 'lib/styles' import React from 'react' import { FlatListProps, @@ -23,6 +20,9 @@ import { View, ViewProps, } from 'react-native' +import {addStyle} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import Animated from 'react-native-reanimated' interface AddedProps { diff --git a/src/view/com/util/anim/TriggerableAnimated.tsx b/src/view/com/util/anim/TriggerableAnimated.tsx index bb88035d7b..eedeeda037 100644 --- a/src/view/com/util/anim/TriggerableAnimated.tsx +++ b/src/view/com/util/anim/TriggerableAnimated.tsx @@ -1,6 +1,6 @@ -import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import React from 'react' import {Animated, StyleProp, View, ViewStyle} from 'react-native' +import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' type CreateAnimFn = (interp: Animated.Value) => Animated.CompositeAnimation type FinishCb = () => void diff --git a/src/view/com/util/error/ErrorMessage.tsx b/src/view/com/util/error/ErrorMessage.tsx index 5418a0204d..a4238b8a46 100644 --- a/src/view/com/util/error/ErrorMessage.tsx +++ b/src/view/com/util/error/ErrorMessage.tsx @@ -1,21 +1,20 @@ +import React from 'react' +import { + StyleSheet, + TouchableOpacity, + StyleProp, + View, + ViewStyle, +} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import { - StyleProp, - StyleSheet, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native' - import {Text} from '../text/Text' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' export function ErrorMessage({ message, diff --git a/src/view/com/util/error/ErrorScreen.tsx b/src/view/com/util/error/ErrorScreen.tsx index f3c4a7a3bd..98fe6437b6 100644 --- a/src/view/com/util/error/ErrorScreen.tsx +++ b/src/view/com/util/error/ErrorScreen.tsx @@ -1,19 +1,18 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {ViewHeader} from 'view/com/util/ViewHeader' - -import {Button} from '../forms/Button' import {Text} from '../text/Text' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {Button} from '../forms/Button' import {CenteredView} from '../Views' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' export function ErrorScreen({ title, diff --git a/src/view/com/util/fab/FAB.web.tsx b/src/view/com/util/fab/FAB.web.tsx index cbe1adfd38..0a8831fa92 100644 --- a/src/view/com/util/fab/FAB.web.tsx +++ b/src/view/com/util/fab/FAB.web.tsx @@ -1,8 +1,7 @@ -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {View} from 'react-native' - import {FABInner, FABProps} from './FABInner' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' export const FAB = (_opts: FABProps) => { const {isDesktop} = useWebMediaQueries() diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index 15e3262ae9..27a16117bd 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -1,14 +1,13 @@ -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {clamp} from 'lib/numbers' -import {gradients} from 'lib/styles' import React, {ComponentProps} from 'react' import {StyleSheet, TouchableWithoutFeedback} from 'react-native' import LinearGradient from 'react-native-linear-gradient' -import Animated from 'react-native-reanimated' +import {gradients} from 'lib/styles' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {useSafeAreaInsets} from 'react-native-safe-area-context' - +import {clamp} from 'lib/numbers' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {isWeb} from '#/platform/detection' +import Animated from 'react-native-reanimated' export interface FABProps extends ComponentProps { diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index 62d49c00bf..e6e05bb044 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/src/view/com/util/forms/Button.tsx @@ -1,21 +1,20 @@ -import {choose} from 'lib/functions' -import {useTheme} from 'lib/ThemeContext' import React from 'react' import { - ActivityIndicator, GestureResponderEvent, - NativeSyntheticEvent, - NativeTouchEvent, - Pressable, - PressableStateCallbackType, StyleProp, StyleSheet, TextStyle, - View, + Pressable, ViewStyle, + PressableStateCallbackType, + ActivityIndicator, + View, + NativeSyntheticEvent, + NativeTouchEvent, } from 'react-native' - import {Text} from '../text/Text' +import {useTheme} from 'lib/ThemeContext' +import {choose} from 'lib/functions' export type ButtonType = | 'primary' diff --git a/src/view/com/util/forms/DateInput.tsx b/src/view/com/util/forms/DateInput.tsx index 8a813049a4..0104562aa5 100644 --- a/src/view/com/util/forms/DateInput.tsx +++ b/src/view/com/util/forms/DateInput.tsx @@ -1,19 +1,18 @@ +import React, {useState, useCallback} from 'react' +import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {getLocales} from 'expo-localization' -import {usePalette} from 'lib/hooks/usePalette' +import {isIOS, isAndroid} from 'platform/detection' +import {Button, ButtonType} from './Button' +import {Text} from '../text/Text' import {TypographyVariant} from 'lib/ThemeContext' import {useTheme} from 'lib/ThemeContext' -import {isAndroid, isIOS} from 'platform/detection' -import React, {useCallback, useState} from 'react' -import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {getLocales} from 'expo-localization' import DatePicker from 'react-native-date-picker' -import {Text} from '../text/Text' -import {Button, ButtonType} from './Button' - const LOCALE = getLocales()[0] interface Props { diff --git a/src/view/com/util/forms/DateInput.web.tsx b/src/view/com/util/forms/DateInput.web.tsx index ff1ed58b76..8d74f6dae2 100644 --- a/src/view/com/util/forms/DateInput.web.tsx +++ b/src/view/com/util/forms/DateInput.web.tsx @@ -1,8 +1,8 @@ -import {usePalette} from 'lib/hooks/usePalette' -import React, {useCallback, useState} from 'react' +import React, {useState, useCallback} from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' // @ts-ignore types not available -prf import {unstable_createElement} from 'react-native-web' +import {usePalette} from 'lib/hooks/usePalette' interface Props { testID?: string diff --git a/src/view/com/util/forms/DropdownButton.tsx b/src/view/com/util/forms/DropdownButton.tsx index f12f1d09cc..2285b0615a 100644 --- a/src/view/com/util/forms/DropdownButton.tsx +++ b/src/view/com/util/forms/DropdownButton.tsx @@ -1,12 +1,3 @@ -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' import React, {PropsWithChildren, useMemo, useRef} from 'react' import { Dimensions, @@ -19,10 +10,18 @@ import { View, ViewStyle, } from 'react-native' +import {IconProp} from '@fortawesome/fontawesome-svg-core' import RootSiblings from 'react-native-root-siblings' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {Text} from '../text/Text' import {Button, ButtonType} from './Button' +import {colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {HITSLOP_10} from 'lib/constants' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {isWeb} from 'platform/detection' const ESTIMATED_BTN_HEIGHT = 50 const ESTIMATED_SEP_HEIGHT = 16 diff --git a/src/view/com/util/forms/NativeDropdown.tsx b/src/view/com/util/forms/NativeDropdown.tsx index 62f830c43b..0a47569f27 100644 --- a/src/view/com/util/forms/NativeDropdown.tsx +++ b/src/view/com/util/forms/NativeDropdown.tsx @@ -1,13 +1,13 @@ -import {IconProp} from '@fortawesome/fontawesome-svg-core' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' import React from 'react' -import {Platform, Pressable, StyleSheet, View, ViewStyle} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import * as DropdownMenu from 'zeego/dropdown-menu' +import {Pressable, StyleSheet, Platform, View, ViewStyle} from 'react-native' +import {IconProp} from '@fortawesome/fontawesome-svg-core' import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' +import {usePalette} from 'lib/hooks/usePalette' +import {isWeb} from 'platform/detection' +import {useTheme} from 'lib/ThemeContext' +import {HITSLOP_10} from 'lib/constants' // Custom Dropdown Menu Components // == diff --git a/src/view/com/util/forms/NativeDropdown.web.tsx b/src/view/com/util/forms/NativeDropdown.web.tsx index 10a005446c..6abeb16cc2 100644 --- a/src/view/com/util/forms/NativeDropdown.web.tsx +++ b/src/view/com/util/forms/NativeDropdown.web.tsx @@ -1,12 +1,12 @@ -import {IconProp} from '@fortawesome/fontawesome-svg-core' +import React from 'react' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import * as DropdownMenu from '@radix-ui/react-dropdown-menu' -import {HITSLOP_10} from 'lib/constants' +import {Pressable, StyleSheet, View, Text, ViewStyle} from 'react-native' +import {IconProp} from '@fortawesome/fontawesome-svg-core' +import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' import {usePalette} from 'lib/hooks/usePalette' import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import {Pressable, StyleSheet, Text, View, ViewStyle} from 'react-native' -import {MenuItemCommonProps} from 'zeego/lib/typescript/menu' +import {HITSLOP_10} from 'lib/constants' // Custom Dropdown Menu Components // == diff --git a/src/view/com/util/forms/PostDropdownBtn.tsx b/src/view/com/util/forms/PostDropdownBtn.tsx index 9727fc21f8..3c1a736f3f 100644 --- a/src/view/com/util/forms/PostDropdownBtn.tsx +++ b/src/view/com/util/forms/PostDropdownBtn.tsx @@ -1,50 +1,49 @@ +import React, {memo} from 'react' +import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native' +import Clipboard from '@react-native-clipboard/clipboard' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useNavigation} from '@react-navigation/native' import { AppBskyActorDefs, AppBskyFeedPost, AtUri, RichText as RichTextAPI, } from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import Clipboard from '@react-native-clipboard/clipboard' -import {useNavigation} from '@react-navigation/native' -import {getCurrentRoute} from 'lib/routes/helpers' -import {shareUrl} from 'lib/sharing' import {toShareUrl} from 'lib/strings/url-helpers' import {useTheme} from 'lib/ThemeContext' -import React, {memo} from 'react' -import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native' - -import {atoms as a, useTheme as useAlf} from '#/alf' -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' -import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' -import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' -import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' -import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' -import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' -import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' -import * as Menu from '#/components/Menu' +import {shareUrl} from 'lib/sharing' +import * as Toast from '../Toast' +import {EventStopper} from '../EventStopper' +import {useModalControls} from '#/state/modals' import {makeProfileLink} from '#/lib/routes/links' import {CommonNavigatorParams} from '#/lib/routes/types' -import {richTextToString} from '#/lib/strings/rich-text-helpers' +import {getCurrentRoute} from 'lib/routes/helpers' import {getTranslatorLink} from '#/locale/helpers' -import {logger} from '#/logger' -import {isWeb} from '#/platform/detection' -import {useModalControls} from '#/state/modals' +import {usePostDeleteMutation} from '#/state/queries/post' import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads' import {useLanguagePrefs} from '#/state/preferences' import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences' import {useOpenLink} from '#/state/preferences/in-app-browser' -import {usePostDeleteMutation} from '#/state/queries/post' +import {logger} from '#/logger' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useSession} from '#/state/session' +import {isWeb} from '#/platform/detection' +import {richTextToString} from '#/lib/strings/rich-text-helpers' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' -import {EventStopper} from '../EventStopper' -import * as Toast from '../Toast' +import {atoms as a, useTheme as useAlf} from '#/alf' +import * as Menu from '#/components/Menu' +import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard' +import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash' +import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute' +import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker' +import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble' +import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' +import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' let PostDropdownBtn = ({ testID, diff --git a/src/view/com/util/forms/RadioButton.tsx b/src/view/com/util/forms/RadioButton.tsx index 696a0c00ab..9d1cb47497 100644 --- a/src/view/com/util/forms/RadioButton.tsx +++ b/src/view/com/util/forms/RadioButton.tsx @@ -1,10 +1,9 @@ -import {choose} from 'lib/functions' -import {useTheme} from 'lib/ThemeContext' import React from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' - import {Text} from '../text/Text' import {Button, ButtonType} from './Button' +import {useTheme} from 'lib/ThemeContext' +import {choose} from 'lib/functions' export function RadioButton({ testID, diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx index abd1f5589d..14599e6490 100644 --- a/src/view/com/util/forms/RadioGroup.tsx +++ b/src/view/com/util/forms/RadioGroup.tsx @@ -1,9 +1,8 @@ -import {s} from 'lib/styles' import React, {useState} from 'react' import {View} from 'react-native' - -import {ButtonType} from './Button' import {RadioButton} from './RadioButton' +import {ButtonType} from './Button' +import {s} from 'lib/styles' export interface RadioGroupItem { label: string | JSX.Element diff --git a/src/view/com/util/forms/SearchInput.tsx b/src/view/com/util/forms/SearchInput.tsx index ff8b6bbddb..5a21d8fdd0 100644 --- a/src/view/com/util/forms/SearchInput.tsx +++ b/src/view/com/util/forms/SearchInput.tsx @@ -1,13 +1,3 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {MagnifyingGlassIcon} from 'lib/icons' -import {useTheme} from 'lib/ThemeContext' import React from 'react' import { StyleProp, @@ -17,6 +7,16 @@ import { View, ViewStyle, } from 'react-native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {HITSLOP_10} from 'lib/constants' +import {MagnifyingGlassIcon} from 'lib/icons' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' interface Props { query: string diff --git a/src/view/com/util/forms/SelectableBtn.tsx b/src/view/com/util/forms/SelectableBtn.tsx index 94eb049d2a..e577e155de 100644 --- a/src/view/com/util/forms/SelectableBtn.tsx +++ b/src/view/com/util/forms/SelectableBtn.tsx @@ -1,9 +1,8 @@ +import React from 'react' +import {Pressable, ViewStyle, StyleProp, StyleSheet} from 'react-native' +import {Text} from '../text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import React from 'react' -import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' - -import {Text} from '../text/Text' interface SelectableBtnProps { testID?: string diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx index e40218b803..c98e846cd3 100644 --- a/src/view/com/util/forms/ToggleButton.tsx +++ b/src/view/com/util/forms/ToggleButton.tsx @@ -1,12 +1,11 @@ -import {choose} from 'lib/functions' -import {colors} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {TypographyVariant} from 'lib/ThemeContext' import React from 'react' import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native' - import {Text} from '../text/Text' import {Button, ButtonType} from './Button' +import {useTheme} from 'lib/ThemeContext' +import {choose} from 'lib/functions' +import {colors} from 'lib/styles' +import {TypographyVariant} from 'lib/ThemeContext' export function ToggleButton({ testID, diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index 2b52b103d0..61cb6f69f3 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -1,11 +1,11 @@ +import React from 'react' +import {StyleProp, StyleSheet, Pressable, View, ViewStyle} from 'react-native' +import {Image} from 'expo-image' +import {clamp} from 'lib/numbers' +import {Dimensions} from 'lib/media/types' +import * as imageSizes from 'lib/media/image-sizes' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' -import * as imageSizes from 'lib/media/image-sizes' -import {Dimensions} from 'lib/media/types' -import {clamp} from 'lib/numbers' -import React from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' const MIN_ASPECT_RATIO = 0.33 // 1/3 const MAX_ASPECT_RATIO = 10 // 10/1 diff --git a/src/view/com/util/images/Gallery.tsx b/src/view/com/util/images/Gallery.tsx index b5bc394989..7de3b093ae 100644 --- a/src/view/com/util/images/Gallery.tsx +++ b/src/view/com/util/images/Gallery.tsx @@ -1,10 +1,10 @@ import {AppBskyEmbedImages} from '@atproto/api' +import React, {ComponentProps, FC} from 'react' +import {StyleSheet, Text, Pressable, View} from 'react-native' +import {Image} from 'expo-image' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {Image} from 'expo-image' import {isWeb} from 'platform/detection' -import React, {ComponentProps, FC} from 'react' -import {Pressable, StyleSheet, Text, View} from 'react-native' type EventFunction = (index: number) => void diff --git a/src/view/com/util/images/Image.tsx b/src/view/com/util/images/Image.tsx index fbdcfebbf9..e779fa3787 100644 --- a/src/view/com/util/images/Image.tsx +++ b/src/view/com/util/images/Image.tsx @@ -1,5 +1,5 @@ -import {Image, ImageProps, ImageSource} from 'expo-image' import React from 'react' +import {Image, ImageProps, ImageSource} from 'expo-image' interface HighPriorityImageProps extends ImageProps { source: ImageSource diff --git a/src/view/com/util/images/Image.web.tsx b/src/view/com/util/images/Image.web.tsx index eeaf16b9a6..ecd9d730ab 100644 --- a/src/view/com/util/images/Image.web.tsx +++ b/src/view/com/util/images/Image.web.tsx @@ -1,8 +1,8 @@ import { Image, + NativeSyntheticEvent, ImageLoadEventData, ImageSourcePropType, - NativeSyntheticEvent, } from 'react-native' export default Image export const HighPriorityImage = Image diff --git a/src/view/com/util/images/ImageHorzList.tsx b/src/view/com/util/images/ImageHorzList.tsx index a93fa195ca..e37f8af1b7 100644 --- a/src/view/com/util/images/ImageHorzList.tsx +++ b/src/view/com/util/images/ImageHorzList.tsx @@ -1,7 +1,7 @@ -import {AppBskyEmbedImages} from '@atproto/api' -import {Image} from 'expo-image' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {Image} from 'expo-image' +import {AppBskyEmbedImages} from '@atproto/api' interface Props { images: AppBskyEmbedImages.ViewImage[] diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index fe2a409b20..ba6c04f505 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -1,9 +1,8 @@ -import {AppBskyEmbedImages} from '@atproto/api' -import {isWeb} from 'platform/detection' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - +import {AppBskyEmbedImages} from '@atproto/api' import {GalleryItem} from './Gallery' +import {isWeb} from 'platform/detection' interface ImageLayoutGridProps { images: AppBskyEmbedImages.ViewImage[] diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx index 1032c1f14e..9424a7154b 100644 --- a/src/view/com/util/layouts/LoggedOutLayout.tsx +++ b/src/view/com/util/layouts/LoggedOutLayout.tsx @@ -1,10 +1,9 @@ -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {StyleSheet, View} from 'react-native' - import {Text} from '../text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' export const LoggedOutLayout = ({ leadin, diff --git a/src/view/com/util/layouts/TitleColumnLayout.tsx b/src/view/com/util/layouts/TitleColumnLayout.tsx index 3033d7f42e..49ad9fcdb3 100644 --- a/src/view/com/util/layouts/TitleColumnLayout.tsx +++ b/src/view/com/util/layouts/TitleColumnLayout.tsx @@ -1,7 +1,7 @@ -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' interface Props { testID?: string diff --git a/src/view/com/util/layouts/withBreakpoints.tsx b/src/view/com/util/layouts/withBreakpoints.tsx index de649e55c3..5746aa660d 100644 --- a/src/view/com/util/layouts/withBreakpoints.tsx +++ b/src/view/com/util/layouts/withBreakpoints.tsx @@ -1,6 +1,6 @@ -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {isNative} from 'platform/detection' import React from 'react' +import {isNative} from 'platform/detection' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' export const withBreakpoints =

( Mobile: React.ComponentType

, diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index 4cc30432dc..f02e4a2bd7 100644 --- a/src/view/com/util/load-latest/LoadLatestBtn.tsx +++ b/src/view/com/util/load-latest/LoadLatestBtn.tsx @@ -1,13 +1,13 @@ +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {HITSLOP_20} from 'lib/constants' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import Animated from 'react-native-reanimated' +import {useMediaQuery} from 'react-responsive' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {colors} from 'lib/styles' -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {useMediaQuery} from 'react-responsive' +import {HITSLOP_20} from 'lib/constants' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity) import {isWeb} from 'platform/detection' diff --git a/src/view/com/util/moderation/ContentHider.tsx b/src/view/com/util/moderation/ContentHider.tsx index 8d4978d229..cd25452904 100644 --- a/src/view/com/util/moderation/ContentHider.tsx +++ b/src/view/com/util/moderation/ContentHider.tsx @@ -1,17 +1,15 @@ -import {ModerationUI, PostModeration} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {ShieldExclamation} from 'lib/icons' -import {describeModerationCause} from 'lib/moderation' -import {isPostMediaBlurred} from 'lib/moderation' import React from 'react' import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {useModalControls} from '#/state/modals' - +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {usePalette} from 'lib/hooks/usePalette' +import {ModerationUI, PostModeration} from '@atproto/api' import {Text} from '../text/Text' +import {ShieldExclamation} from 'lib/icons' +import {describeModerationCause} from 'lib/moderation' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {useModalControls} from '#/state/modals' +import {isPostMediaBlurred} from 'lib/moderation' export function ContentHider({ testID, diff --git a/src/view/com/util/moderation/LabelInfo.tsx b/src/view/com/util/moderation/LabelInfo.tsx index 55f8b2dabf..970338752c 100644 --- a/src/view/com/util/moderation/LabelInfo.tsx +++ b/src/view/com/util/moderation/LabelInfo.tsx @@ -1,13 +1,11 @@ -import {ComAtprotoLabelDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' import React from 'react' import {Pressable, StyleProp, View, ViewStyle} from 'react-native' - -import {useModalControls} from '#/state/modals' - +import {ComAtprotoLabelDefs} from '@atproto/api' import {Text} from '../text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' export function LabelInfo({ details, diff --git a/src/view/com/util/moderation/PostAlerts.tsx b/src/view/com/util/moderation/PostAlerts.tsx index 135a99486a..bc5bf9b325 100644 --- a/src/view/com/util/moderation/PostAlerts.tsx +++ b/src/view/com/util/moderation/PostAlerts.tsx @@ -1,16 +1,14 @@ +import React from 'react' +import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' import {ModerationUI} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Text} from '../text/Text' import {usePalette} from 'lib/hooks/usePalette' import {ShieldExclamation} from 'lib/icons' import {describeModerationCause} from 'lib/moderation' -import React from 'react' -import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native' - +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useModalControls} from '#/state/modals' -import {Text} from '../text/Text' - export function PostAlerts({ moderation, style, diff --git a/src/view/com/util/moderation/PostHider.tsx b/src/view/com/util/moderation/PostHider.tsx index 02d309a855..ede62e988c 100644 --- a/src/view/com/util/moderation/PostHider.tsx +++ b/src/view/com/util/moderation/PostHider.tsx @@ -1,18 +1,16 @@ +import React, {ComponentProps} from 'react' +import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native' import {ModerationUI} from '@atproto/api' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {usePalette} from 'lib/hooks/usePalette' -import {ShieldExclamation} from 'lib/icons' -import {describeModerationCause} from 'lib/moderation' -import {addStyle} from 'lib/styles' -import React, {ComponentProps} from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - -import {useModalControls} from '#/state/modals' - import {Link} from '../Link' import {Text} from '../text/Text' +import {addStyle} from 'lib/styles' +import {describeModerationCause} from 'lib/moderation' +import {ShieldExclamation} from 'lib/icons' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' +import {useModalControls} from '#/state/modals' interface Props extends ComponentProps { iconSize: number diff --git a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx index 0d4660ebbc..0f07b679ba 100644 --- a/src/view/com/util/moderation/ProfileHeaderAlerts.tsx +++ b/src/view/com/util/moderation/ProfileHeaderAlerts.tsx @@ -1,20 +1,18 @@ +import React from 'react' +import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import {ProfileModeration} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {Text} from '../text/Text' import {usePalette} from 'lib/hooks/usePalette' import {ShieldExclamation} from 'lib/icons' import { describeModerationCause, getProfileModerationCauses, } from 'lib/moderation' -import React from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' - +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {useModalControls} from '#/state/modals' -import {Text} from '../text/Text' - export function ProfileHeaderAlerts({ moderation, style, diff --git a/src/view/com/util/moderation/ScreenHider.tsx b/src/view/com/util/moderation/ScreenHider.tsx index 52e5e37a0f..86f0cbf7bf 100644 --- a/src/view/com/util/moderation/ScreenHider.tsx +++ b/src/view/com/util/moderation/ScreenHider.tsx @@ -1,29 +1,27 @@ -import {ModerationUI} from '@atproto/api' +import React from 'react' +import { + TouchableWithoutFeedback, + StyleProp, + StyleSheet, + View, + ViewStyle, +} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import {useNavigation} from '@react-navigation/native' +import {ModerationUI} from '@atproto/api' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {describeModerationCause} from 'lib/moderation' import {NavigationProp} from 'lib/routes/types' -import React from 'react' -import { - StyleProp, - StyleSheet, - TouchableWithoutFeedback, - View, - ViewStyle, -} from 'react-native' - -import {s} from '#/lib/styles' -import {useModalControls} from '#/state/modals' - -import {Button} from '../forms/Button' import {Text} from '../text/Text' +import {Button} from '../forms/Button' +import {describeModerationCause} from 'lib/moderation' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {s} from '#/lib/styles' import {CenteredView} from '../Views' export function ScreenHider({ diff --git a/src/view/com/util/post-ctrls/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx index d1340f6d2d..1e26eeccee 100644 --- a/src/view/com/util/post-ctrls/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -1,20 +1,3 @@ -import { - AppBskyFeedDefs, - AppBskyFeedPost, - AtUri, - RichText as RichTextAPI, -} from '@atproto/api' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {HITSLOP_10, HITSLOP_20} from 'lib/constants' -import {Haptics} from 'lib/haptics' -import {CommentBottomArrow, HeartIcon, HeartIconSolid} from 'lib/icons' -import {makeProfileLink} from 'lib/routes/links' -import {shareUrl} from 'lib/sharing' -import {pluralize} from 'lib/strings/helpers' -import {toShareUrl} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' import React, {memo, useCallback} from 'react' import { StyleProp, @@ -23,20 +6,35 @@ import { View, ViewStyle, } from 'react-native' - -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' -import {Shadow} from '#/state/cache/types' +import { + AppBskyFeedDefs, + AppBskyFeedPost, + AtUri, + RichText as RichTextAPI, +} from '@atproto/api' +import {Text} from '../text/Text' +import {PostDropdownBtn} from '../forms/PostDropdownBtn' +import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' +import {s} from 'lib/styles' +import {pluralize} from 'lib/strings/helpers' +import {useTheme} from 'lib/ThemeContext' +import {RepostButton} from './RepostButton' +import {Haptics} from 'lib/haptics' +import {HITSLOP_10, HITSLOP_20} from 'lib/constants' import {useModalControls} from '#/state/modals' import { usePostLikeMutationQueue, usePostRepostMutationQueue, } from '#/state/queries/post' -import {useRequireAuth} from '#/state/session' import {useComposerControls} from '#/state/shell/composer' - -import {PostDropdownBtn} from '../forms/PostDropdownBtn' -import {Text} from '../text/Text' -import {RepostButton} from './RepostButton' +import {Shadow} from '#/state/cache/types' +import {useRequireAuth} from '#/state/session' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox' +import {toShareUrl} from 'lib/strings/url-helpers' +import {shareUrl} from 'lib/sharing' +import {makeProfileLink} from 'lib/routes/links' let PostCtrls = ({ big, diff --git a/src/view/com/util/post-ctrls/RepostButton.tsx b/src/view/com/util/post-ctrls/RepostButton.tsx index b0cf6a7b1a..cc3db50c8b 100644 --- a/src/view/com/util/post-ctrls/RepostButton.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.tsx @@ -1,17 +1,15 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {HITSLOP_10, HITSLOP_20} from 'lib/constants' -import {RepostIcon} from 'lib/icons' -import {pluralize} from 'lib/strings/helpers' -import {colors, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' import React, {memo, useCallback} from 'react' import {StyleProp, StyleSheet, TouchableOpacity, ViewStyle} from 'react-native' - +import {RepostIcon} from 'lib/icons' +import {s, colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {Text} from '../text/Text' +import {pluralize} from 'lib/strings/helpers' +import {HITSLOP_10, HITSLOP_20} from 'lib/constants' import {useModalControls} from '#/state/modals' import {useRequireAuth} from '#/state/session' - -import {Text} from '../text/Text' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' interface Props { isReposted: boolean diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx index 391eeaf1fc..bbe5869feb 100644 --- a/src/view/com/util/post-ctrls/RepostButton.web.tsx +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -1,21 +1,20 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle, Pressable} from 'react-native' import {RepostIcon} from 'lib/icons' import {colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {Text} from '../text/Text' +import { + NativeDropdown, + DropdownItem as NativeDropdownItem, +} from '../forms/NativeDropdown' +import {EventStopper} from '../EventStopper' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {useRequireAuth} from '#/state/session' import {useSession} from '#/state/session' -import {EventStopper} from '../EventStopper' -import { - DropdownItem as NativeDropdownItem, - NativeDropdown, -} from '../forms/NativeDropdown' -import {Text} from '../text/Text' - interface Props { isReposted: boolean repostCount?: number diff --git a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx index 135f9b211a..f06c8b794d 100644 --- a/src/view/com/util/post-embeds/ExternalGifEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalGifEmbed.tsx @@ -1,10 +1,6 @@ -import {AppBskyEmbedExternal} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Image, ImageLoadEventData} from 'expo-image' import {EmbedPlayerParams, getGifDims} from 'lib/strings/embed-player' import React from 'react' +import {Image, ImageLoadEventData} from 'expo-image' import { ActivityIndicator, GestureResponderEvent, @@ -13,10 +9,13 @@ import { StyleSheet, View, } from 'react-native' -import {useModalControls} from 'state/modals' -import {useExternalEmbedsPrefs} from 'state/preferences' - import {isIOS, isNative, isWeb} from '#/platform/detection' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {useExternalEmbedsPrefs} from 'state/preferences' +import {useModalControls} from 'state/modals' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {AppBskyEmbedExternal} from '@atproto/api' export function ExternalGifEmbed({ link, diff --git a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx index a29901baef..aaa98a41f6 100644 --- a/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalLinkEmbed.tsx @@ -1,16 +1,15 @@ -import {AppBskyEmbedExternal} from '@atproto/api' +import React from 'react' import {Image} from 'expo-image' +import {Text} from '../text/Text' +import {StyleSheet, View} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player' +import {AppBskyEmbedExternal} from '@atproto/api' import {toNiceDomain} from 'lib/strings/url-helpers' -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {useExternalEmbedsPrefs} from 'state/preferences' -import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed' +import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player' import {ExternalPlayer} from 'view/com/util/post-embeds/ExternalPlayerEmbed' - -import {Text} from '../text/Text' +import {ExternalGifEmbed} from 'view/com/util/post-embeds/ExternalGifEmbed' +import {useExternalEmbedsPrefs} from 'state/preferences' export const ExternalLinkEmbed = ({ link, diff --git a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx index 1b9d408445..cf2db5b333 100644 --- a/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx +++ b/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx @@ -1,12 +1,3 @@ -import {AppBskyEmbedExternal} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation} from '@react-navigation/native' -import {Image} from 'expo-image' -import {NavigationProp} from 'lib/routes/types' -import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player' -import {isNative} from 'platform/detection' import React from 'react' import { ActivityIndicator, @@ -22,12 +13,20 @@ import Animated, { useAnimatedRef, useFrameCallback, } from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Image} from 'expo-image' import {WebView} from 'react-native-webview' -import {useModalControls} from 'state/modals' -import {useExternalEmbedsPrefs} from 'state/preferences' - +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useNavigation} from '@react-navigation/native' +import {AppBskyEmbedExternal} from '@atproto/api' +import {EmbedPlayerParams, getPlayerAspect} from 'lib/strings/embed-player' import {EventStopper} from '../EventStopper' +import {isNative} from 'platform/detection' +import {NavigationProp} from 'lib/routes/types' +import {useExternalEmbedsPrefs} from 'state/preferences' +import {useModalControls} from 'state/modals' interface ShouldStartLoadRequest { url: string diff --git a/src/view/com/util/post-embeds/ListEmbed.tsx b/src/view/com/util/post-embeds/ListEmbed.tsx index ad766d900f..fc5ad270fc 100644 --- a/src/view/com/util/post-embeds/ListEmbed.tsx +++ b/src/view/com/util/post-embeds/ListEmbed.tsx @@ -1,9 +1,9 @@ -import {AppBskyGraphDefs} from '@atproto/api' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {usePalette} from 'lib/hooks/usePalette' import {ListCard} from 'view/com/lists/ListCard' +import {AppBskyGraphDefs} from '@atproto/api' +import {s} from 'lib/styles' export function ListEmbed({ item, diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx index b3b24192b7..35b0912698 100644 --- a/src/view/com/util/post-embeds/QuoteEmbed.tsx +++ b/src/view/com/util/post-embeds/QuoteEmbed.tsx @@ -1,29 +1,27 @@ +import React from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' import { - AppBskyEmbedExternal, - AppBskyEmbedImages, AppBskyEmbedRecord, - AppBskyEmbedRecordWithMedia, AppBskyFeedPost, + AppBskyEmbedImages, + AppBskyEmbedRecordWithMedia, ModerationUI, + AppBskyEmbedExternal, RichText as RichTextAPI, } from '@atproto/api' import {AtUri} from '@atproto/api' -import {Trans} from '@lingui/macro' -import {usePalette} from 'lib/hooks/usePalette' -import {InfoCircleIcon} from 'lib/icons' -import {makeProfileLink} from 'lib/routes/links' -import React from 'react' -import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' -import {ComposerOptsQuote} from 'state/shell/composer' - -import {atoms as a} from '#/alf' -import {RichText} from '#/components/RichText' - -import {Link} from '../Link' -import {PostAlerts} from '../moderation/PostAlerts' import {PostMeta} from '../PostMeta' +import {Link} from '../Link' import {Text} from '../text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {ComposerOptsQuote} from 'state/shell/composer' import {PostEmbeds} from '.' +import {PostAlerts} from '../moderation/PostAlerts' +import {makeProfileLink} from 'lib/routes/links' +import {InfoCircleIcon} from 'lib/icons' +import {Trans} from '@lingui/macro' +import {RichText} from '#/components/RichText' +import {atoms as a} from '#/alf' export function MaybeQuoteEmbed({ embed, diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index c2fabd2a03..7e235babb6 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -1,6 +1,16 @@ +import React, {useCallback} from 'react' +import { + StyleSheet, + StyleProp, + View, + ViewStyle, + Text, + InteractionManager, +} from 'react-native' +import {Image} from 'expo-image' import { - AppBskyEmbedExternal, AppBskyEmbedImages, + AppBskyEmbedExternal, AppBskyEmbedRecord, AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, @@ -8,31 +18,19 @@ import { ModerationUI, PostModeration, } from '@atproto/api' -import {Image} from 'expo-image' -import {usePalette} from 'lib/hooks/usePalette' -import {isCauseALabelOnUri, isQuoteBlurred} from 'lib/moderation' -import React, {useCallback} from 'react' -import { - InteractionManager, - StyleProp, - StyleSheet, - Text, - View, - ViewStyle, -} from 'react-native' -import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' - -import {shareUrl} from '#/lib/sharing' -import {isNative} from '#/platform/detection' -import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' - -import {AutoSizedImage} from '../images/AutoSizedImage' -import {ImageLayoutGrid} from '../images/ImageLayoutGrid' import {Link} from '../Link' -import {ContentHider} from '../moderation/ContentHider' +import {ImageLayoutGrid} from '../images/ImageLayoutGrid' +import {useLightboxControls, ImagesLightbox} from '#/state/lightbox' +import {usePalette} from 'lib/hooks/usePalette' import {ExternalLinkEmbed} from './ExternalLinkEmbed' -import {ListEmbed} from './ListEmbed' import {MaybeQuoteEmbed} from './QuoteEmbed' +import {AutoSizedImage} from '../images/AutoSizedImage' +import {ListEmbed} from './ListEmbed' +import {isCauseALabelOnUri, isQuoteBlurred} from 'lib/moderation' +import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {ContentHider} from '../moderation/ContentHider' +import {isNative} from '#/platform/detection' +import {shareUrl} from '#/lib/sharing' type Embed = | AppBskyEmbedRecord.View diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index 5756db3245..f4ade30e55 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -1,17 +1,15 @@ -import {AppBskyRichtextFacet, RichText as RichTextObj} from '@atproto/api' -import {usePalette} from 'lib/hooks/usePalette' -import {makeTagLink} from 'lib/routes/links' -import {toShortUrl} from 'lib/strings/url-helpers' -import {lh} from 'lib/styles' -import {TypographyVariant, useTheme} from 'lib/ThemeContext' import React from 'react' -import {StyleProp, TextStyle} from 'react-native' - -import {TagMenu, useTagMenuControl} from '#/components/TagMenu' -import {isNative} from '#/platform/detection' - +import {TextStyle, StyleProp} from 'react-native' +import {RichText as RichTextObj, AppBskyRichtextFacet} from '@atproto/api' import {TextLink} from '../Link' import {Text} from './Text' +import {lh} from 'lib/styles' +import {toShortUrl} from 'lib/strings/url-helpers' +import {useTheme, TypographyVariant} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {makeTagLink} from 'lib/routes/links' +import {TagMenu, useTagMenuControl} from '#/components/TagMenu' +import {isNative} from '#/platform/detection' const WORD_WRAP = {wordWrap: 1} diff --git a/src/view/com/util/text/Text.tsx b/src/view/com/util/text/Text.tsx index 0dfa667fbc..ccb51bfca6 100644 --- a/src/view/com/util/text/Text.tsx +++ b/src/view/com/util/text/Text.tsx @@ -1,8 +1,8 @@ -import {lh, s} from 'lib/styles' -import {TypographyVariant, useTheme} from 'lib/ThemeContext' -import {isIOS} from 'platform/detection' import React from 'react' import {Text as RNText, TextProps} from 'react-native' +import {s, lh} from 'lib/styles' +import {useTheme, TypographyVariant} from 'lib/ThemeContext' +import {isIOS} from 'platform/detection' import {UITextView} from 'react-native-ui-text-view' export type CustomTextProps = TextProps & { diff --git a/src/view/com/util/text/ThemedText.tsx b/src/view/com/util/text/ThemedText.tsx index 27268472bf..2844d273c2 100644 --- a/src/view/com/util/text/ThemedText.tsx +++ b/src/view/com/util/text/ThemedText.tsx @@ -1,8 +1,7 @@ +import React from 'react' +import {CustomTextProps, Text} from './Text' import {usePalette} from 'lib/hooks/usePalette' import {addStyle} from 'lib/styles' -import React from 'react' - -import {CustomTextProps, Text} from './Text' export type ThemedTextProps = CustomTextProps & { fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light' diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index d6d4c83215..9212381a9e 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -1,12 +1,12 @@ import React from 'react' import {StyleSheet, TextProps} from 'react-native' import Svg, { + Path, Defs, LinearGradient, - Path, - PathProps, Stop, SvgProps, + PathProps, } from 'react-native-svg' import {colors} from '#/lib/styles' diff --git a/src/view/icons/Logotype.tsx b/src/view/icons/Logotype.tsx index d6c35f6d9e..080c402fb3 100644 --- a/src/view/icons/Logotype.tsx +++ b/src/view/icons/Logotype.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Svg, {Path, PathProps, SvgProps} from 'react-native-svg' +import Svg, {Path, SvgProps, PathProps} from 'react-native-svg' import {usePalette} from '#/lib/hooks/usePalette' diff --git a/src/view/icons/index.tsx b/src/view/icons/index.tsx index 570d1b53bc..ede1e63355 100644 --- a/src/view/icons/index.tsx +++ b/src/view/icons/index.tsx @@ -1,71 +1,63 @@ import {library} from '@fortawesome/fontawesome-svg-core' + import {faAddressCard} from '@fortawesome/free-regular-svg-icons' -import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' -import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' -import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' -import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle' -import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck' -import {faCirclePlay} from '@fortawesome/free-regular-svg-icons/faCirclePlay' -import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser' -import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' -import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' -import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' -import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' -import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash' -import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile' -import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk' -import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' -import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' -import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage' -import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' -import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' -import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare' -import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' -import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' -import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' -import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' -import {faFlask} from '@fortawesome/free-solid-svg-icons' import {faAngleDown} from '@fortawesome/free-solid-svg-icons/faAngleDown' import {faAngleLeft} from '@fortawesome/free-solid-svg-icons/faAngleLeft' import {faAngleRight} from '@fortawesome/free-solid-svg-icons/faAngleRight' import {faAngleUp} from '@fortawesome/free-solid-svg-icons/faAngleUp' -import {faArrowDown} from '@fortawesome/free-solid-svg-icons/faArrowDown' import {faArrowLeft} from '@fortawesome/free-solid-svg-icons/faArrowLeft' import {faArrowRight} from '@fortawesome/free-solid-svg-icons/faArrowRight' -import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowRightFromBracket' -import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft' -import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate' -import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp' import {faArrowUp} from '@fortawesome/free-solid-svg-icons/faArrowUp' +import {faArrowDown} from '@fortawesome/free-solid-svg-icons/faArrowDown' +import {faArrowRightFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowRightFromBracket' import {faArrowUpFromBracket} from '@fortawesome/free-solid-svg-icons/faArrowUpFromBracket' import {faArrowUpRightFromSquare} from '@fortawesome/free-solid-svg-icons/faArrowUpRightFromSquare' +import {faArrowRotateLeft} from '@fortawesome/free-solid-svg-icons/faArrowRotateLeft' +import {faArrowTrendUp} from '@fortawesome/free-solid-svg-icons/faArrowTrendUp' +import {faArrowsRotate} from '@fortawesome/free-solid-svg-icons/faArrowsRotate' import {faAt} from '@fortawesome/free-solid-svg-icons/faAt' -import {faBan} from '@fortawesome/free-solid-svg-icons/faBan' import {faBars} from '@fortawesome/free-solid-svg-icons/faBars' +import {faBan} from '@fortawesome/free-solid-svg-icons/faBan' import {faBell} from '@fortawesome/free-solid-svg-icons/faBell' +import {faBell as farBell} from '@fortawesome/free-regular-svg-icons/faBell' import {faBookmark} from '@fortawesome/free-solid-svg-icons/faBookmark' +import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faBookmark' +import {faCalendar as farCalendar} from '@fortawesome/free-regular-svg-icons/faCalendar' import {faCamera} from '@fortawesome/free-solid-svg-icons/faCamera' import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck' -import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown' import {faChevronRight} from '@fortawesome/free-solid-svg-icons/faChevronRight' +import {faCircle} from '@fortawesome/free-regular-svg-icons/faCircle' +import {faCircleCheck as farCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck' import {faCircleCheck} from '@fortawesome/free-solid-svg-icons/faCircleCheck' import {faCircleDot} from '@fortawesome/free-solid-svg-icons/faCircleDot' import {faCircleExclamation} from '@fortawesome/free-solid-svg-icons/faCircleExclamation' +import {faCirclePlay} from '@fortawesome/free-regular-svg-icons/faCirclePlay' +import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser' import {faClone} from '@fortawesome/free-solid-svg-icons/faClone' +import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone' +import {faComment} from '@fortawesome/free-regular-svg-icons/faComment' import {faCommentSlash} from '@fortawesome/free-solid-svg-icons/faCommentSlash' +import {faComments} from '@fortawesome/free-regular-svg-icons/faComments' +import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass' import {faDownload} from '@fortawesome/free-solid-svg-icons/faDownload' import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis' import {faEnvelope} from '@fortawesome/free-solid-svg-icons/faEnvelope' import {faExclamation} from '@fortawesome/free-solid-svg-icons/faExclamation' import {faEye} from '@fortawesome/free-solid-svg-icons/faEye' -import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' +import {faEyeSlash as farEyeSlash} from '@fortawesome/free-regular-svg-icons/faEyeSlash' +import {faFaceSmile} from '@fortawesome/free-regular-svg-icons/faFaceSmile' import {faFire} from '@fortawesome/free-solid-svg-icons/faFire' +import {faFlask} from '@fortawesome/free-solid-svg-icons' +import {faFloppyDisk} from '@fortawesome/free-regular-svg-icons/faFloppyDisk' import {faGear} from '@fortawesome/free-solid-svg-icons/faGear' import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe' import {faHand} from '@fortawesome/free-solid-svg-icons/faHand' +import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand' import {faHashtag} from '@fortawesome/free-solid-svg-icons/faHashtag' +import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart' import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart' import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse' +import {faImage as farImage} from '@fortawesome/free-regular-svg-icons/faImage' import {faImage} from '@fortawesome/free-solid-svg-icons/faImage' import {faInfo} from '@fortawesome/free-solid-svg-icons/faInfo' import {faLanguage} from '@fortawesome/free-solid-svg-icons/faLanguage' @@ -74,8 +66,10 @@ import {faList} from '@fortawesome/free-solid-svg-icons/faList' import {faListUl} from '@fortawesome/free-solid-svg-icons/faListUl' import {faLock} from '@fortawesome/free-solid-svg-icons/faLock' import {faMagnifyingGlass} from '@fortawesome/free-solid-svg-icons/faMagnifyingGlass' +import {faMessage} from '@fortawesome/free-regular-svg-icons/faMessage' import {faNoteSticky} from '@fortawesome/free-solid-svg-icons/faNoteSticky' import {faPause} from '@fortawesome/free-solid-svg-icons/faPause' +import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste' import {faPen} from '@fortawesome/free-solid-svg-icons/faPen' import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib' import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare' @@ -93,16 +87,23 @@ import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSq import {faShield} from '@fortawesome/free-solid-svg-icons/faShield' import {faSignal} from '@fortawesome/free-solid-svg-icons/faSignal' import {faSliders} from '@fortawesome/free-solid-svg-icons/faSliders' +import {faSquare} from '@fortawesome/free-regular-svg-icons/faSquare' +import {faSquareCheck} from '@fortawesome/free-regular-svg-icons/faSquareCheck' +import {faSquarePlus} from '@fortawesome/free-regular-svg-icons/faSquarePlus' import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack' import {faTicket} from '@fortawesome/free-solid-svg-icons/faTicket' -import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck' -import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus' +import {faTrashCan} from '@fortawesome/free-regular-svg-icons/faTrashCan' +import {faUser} from '@fortawesome/free-regular-svg-icons/faUser' import {faUsers} from '@fortawesome/free-solid-svg-icons/faUsers' +import {faUserCheck} from '@fortawesome/free-solid-svg-icons/faUserCheck' import {faUserSlash} from '@fortawesome/free-solid-svg-icons/faUserSlash' -import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash' +import {faUserPlus} from '@fortawesome/free-solid-svg-icons/faUserPlus' import {faUserXmark} from '@fortawesome/free-solid-svg-icons/faUserXmark' +import {faUsersSlash} from '@fortawesome/free-solid-svg-icons/faUsersSlash' import {faX} from '@fortawesome/free-solid-svg-icons/faX' import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark' +import {faChevronDown} from '@fortawesome/free-solid-svg-icons/faChevronDown' +import {faFilter} from '@fortawesome/free-solid-svg-icons/faFilter' library.add( faAddressCard, diff --git a/src/view/screens/AppPasswords.tsx b/src/view/screens/AppPasswords.tsx index b28b992bb0..dc439c3679 100644 --- a/src/view/screens/AppPasswords.tsx +++ b/src/view/screens/AppPasswords.tsx @@ -1,12 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -14,23 +5,30 @@ import { TouchableOpacity, View, } from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {ScrollView} from 'react-native-gesture-handler' +import {Text} from '../com/util/text/Text' +import {Button} from '../com/util/forms/Button' +import * as Toast from '../com/util/Toast' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {CommonNavigatorParams} from 'lib/routes/types' +import {useAnalytics} from 'lib/analytics/analytics' +import {useFocusEffect} from '@react-navigation/native' +import {ViewHeader} from '../com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' - -import {cleanError} from '#/lib/strings/errors' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' import {useLanguagePrefs} from '#/state/preferences' import { - useAppPasswordDeleteMutation, useAppPasswordsQuery, + useAppPasswordDeleteMutation, } from '#/state/queries/app-passwords' -import {useSetMinimalShellMode} from '#/state/shell' - import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {Button} from '../com/util/forms/Button' -import {Text} from '../com/util/text/Text' -import * as Toast from '../com/util/Toast' -import {ViewHeader} from '../com/util/ViewHeader' +import {cleanError} from '#/lib/strings/errors' type Props = NativeStackScreenProps export function AppPasswords({}: Props) { diff --git a/src/view/screens/CommunityGuidelines.tsx b/src/view/screens/CommunityGuidelines.tsx index e995b8795f..f6c29a3b8d 100644 --- a/src/view/screens/CommunityGuidelines.tsx +++ b/src/view/screens/CommunityGuidelines.tsx @@ -1,18 +1,16 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {TextLink} from 'view/com/util/Link' +import {useFocusEffect} from '@react-navigation/native' import {Text} from 'view/com/util/text/Text' -import {ScrollView} from 'view/com/util/Views' - -import {useSetMinimalShellMode} from '#/state/shell' - +import {TextLink} from 'view/com/util/Link' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/CopyrightPolicy.tsx b/src/view/screens/CopyrightPolicy.tsx index 0288eaa4ea..522a9e4dba 100644 --- a/src/view/screens/CopyrightPolicy.tsx +++ b/src/view/screens/CopyrightPolicy.tsx @@ -1,18 +1,16 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {TextLink} from 'view/com/util/Link' +import {useFocusEffect} from '@react-navigation/native' import {Text} from 'view/com/util/text/Text' -import {ScrollView} from 'view/com/util/Views' - -import {useSetMinimalShellMode} from '#/state/shell' - +import {TextLink} from 'view/com/util/Link' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const CopyrightPolicyScreen = (_props: Props) => { diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index 226e7a9f09..f26b1505a8 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -1,24 +1,23 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' -import {PaletteColorName, ThemeProvider} from 'lib/ThemeContext' import React from 'react' import {ScrollView, View} from 'react-native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {ViewHeader} from '../com/util/ViewHeader' +import {ThemeProvider, PaletteColorName} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' import * as Toast from 'view/com/util/Toast' - +import {Text} from '../com/util/text/Text' +import {ViewSelector} from '../com/util/ViewSelector' import {EmptyState} from '../com/util/EmptyState' -import {ErrorMessage} from '../com/util/error/ErrorMessage' -import {ErrorScreen} from '../com/util/error/ErrorScreen' +import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' import {Button, ButtonType} from '../com/util/forms/Button' import {DropdownButton, DropdownItem} from '../com/util/forms/DropdownButton' -import {RadioGroup} from '../com/util/forms/RadioGroup' import {ToggleButton} from '../com/util/forms/ToggleButton' -import * as LoadingPlaceholder from '../com/util/LoadingPlaceholder' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' -import {ViewSelector} from '../com/util/ViewSelector' +import {RadioGroup} from '../com/util/forms/RadioGroup' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {ErrorMessage} from '../com/util/error/ErrorMessage' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' const MAIN_VIEWS = ['Base', 'Controls', 'Error', 'Notifs'] diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx index 05377b8fb9..2e3bf08db5 100644 --- a/src/view/screens/Feeds.tsx +++ b/src/view/screens/Feeds.tsx @@ -1,53 +1,52 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {HITSLOP_10} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CogIcon, ComposeIcon2, MagnifyingGlassIcon2} from 'lib/icons' -import {FeedsTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {cleanError} from 'lib/strings/errors' -import {s} from 'lib/styles' -import debounce from 'lodash.debounce' import React from 'react' import { ActivityIndicator, - type FlatList, - Pressable, StyleSheet, View, + type FlatList, + Pressable, } from 'react-native' -import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {FAB} from 'view/com/util/fab/FAB' -import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput' -import {Link} from 'view/com/util/Link' -import {List} from 'view/com/util/List' -import { - FeedFeedLoadingPlaceholder, - LoadingPlaceholder, -} from 'view/com/util/LoadingPlaceholder' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome' import {ViewHeader} from 'view/com/util/ViewHeader' - +import {FAB} from 'view/com/util/fab/FAB' +import {Link} from 'view/com/util/Link' +import {NativeStackScreenProps, FeedsTabNavigatorParams} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ComposeIcon2, CogIcon, MagnifyingGlassIcon2} from 'lib/icons' +import {s} from 'lib/styles' import {atoms as a, useTheme} from '#/alf' -import {IconCircle} from '#/components/IconCircle' -import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' -import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' -import {isNative, isWeb} from '#/platform/detection' +import {SearchInput, SearchInputRef} from 'view/com/util/forms/SearchInput' +import {UserAvatar} from 'view/com/util/UserAvatar' +import { + LoadingPlaceholder, + FeedFeedLoadingPlaceholder, +} from 'view/com/util/LoadingPlaceholder' +import {ErrorMessage} from 'view/com/util/error/ErrorMessage' +import debounce from 'lodash.debounce' +import {Text} from 'view/com/util/text/Text' +import {List} from 'view/com/util/List' +import {useFocusEffect} from '@react-navigation/native' +import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSetMinimalShellMode} from '#/state/shell' +import {usePreferencesQuery} from '#/state/queries/preferences' import { - getAvatarTypeFromUri, useFeedSourceInfoQuery, useGetPopularFeedsQuery, useSearchPopularFeedsMutation, + getAvatarTypeFromUri, } from '#/state/queries/feed' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {useSession} from '#/state/session' -import {useSetMinimalShellMode} from '#/state/shell' +import {cleanError} from 'lib/strings/errors' import {useComposerControls} from '#/state/shell/composer' +import {useSession} from '#/state/session' +import {isNative, isWeb} from '#/platform/detection' +import {HITSLOP_10} from 'lib/constants' +import {IconCircle} from '#/components/IconCircle' +import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle' +import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass' type Props = NativeStackScreenProps diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index ad48d0aa1b..99ac8c44af 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -1,25 +1,23 @@ -import {useFocusEffect} from '@react-navigation/native' -import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import React from 'react' -import {ActivityIndicator, StyleSheet, View} from 'react-native' -import {FeedPage} from 'view/com/feeds/FeedPage' -import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager' -import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' +import {View, ActivityIndicator, StyleSheet} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, HomeTabNavigatorParams} from 'lib/routes/types' +import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState' import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed' - -import {useSetTitle} from '#/lib/hooks/useSetTitle' -import {emitSoftReset} from '#/state/events' -import {FeedSourceInfo, usePinnedFeedsInfos} from '#/state/queries/feed' -import {FeedDescriptor, FeedParams} from '#/state/queries/post-feed' -import {usePreferencesQuery} from '#/state/queries/preferences' -import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' -import {useSession} from '#/state/session' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' -import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' - -import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA' +import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState' import {HomeHeader} from '../com/home/HomeHeader' +import {Pager, RenderTabBarFnProps, PagerRef} from 'view/com/pager/Pager' +import {FeedPage} from 'view/com/feeds/FeedPage' +import {HomeLoggedOutCTA} from '../com/auth/HomeLoggedOutCTA' +import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' +import {usePreferencesQuery} from '#/state/queries/preferences' +import {usePinnedFeedsInfos, FeedSourceInfo} from '#/state/queries/feed' +import {UsePreferencesQueryResponse} from '#/state/queries/preferences/types' +import {emitSoftReset} from '#/state/events' +import {useSession} from '#/state/session' +import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' +import {useSetTitle} from '#/lib/hooks/useSetTitle' type Props = NativeStackScreenProps export function HomeScreen(props: Props) { diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx index 02251102aa..819840a461 100644 --- a/src/view/screens/LanguageSettings.tsx +++ b/src/view/screens/LanguageSettings.tsx @@ -1,29 +1,27 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' +import {Text} from '../com/util/text/Text' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {CenteredView} from 'view/com/util/Views' +import {Button} from 'view/com/util/forms/Button' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import {useAnalytics} from 'lib/analytics/analytics' import {useFocusEffect} from '@react-navigation/native' import {APP_LANGUAGES, LANGUAGES} from 'lib/../locale/languages' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' -import React from 'react' -import {StyleSheet, View} from 'react-native' import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select' -import {Button} from 'view/com/util/forms/Button' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {CenteredView} from 'view/com/util/Views' - -import {sanitizeAppLanguageSetting} from '#/locale/helpers' +import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' -import {useSetMinimalShellMode} from '#/state/shell' - -import {Text} from '../com/util/text/Text' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {sanitizeAppLanguageSetting} from '#/locale/helpers' type Props = NativeStackScreenProps diff --git a/src/view/screens/Lists.tsx b/src/view/screens/Lists.tsx index d57e6a7145..bdd5dd9b78 100644 --- a/src/view/screens/Lists.tsx +++ b/src/view/screens/Lists.tsx @@ -1,21 +1,20 @@ -import {AtUri} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {NavigationProp} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' -import {Text} from 'view/com/util/text/Text' - -import {useModalControls} from '#/state/modals' -import {useSetMinimalShellMode} from '#/state/shell' +import {useFocusEffect, useNavigation} from '@react-navigation/native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {AtUri} from '@atproto/api' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {MyLists} from '#/view/com/lists/MyLists' +import {Text} from 'view/com/util/text/Text' +import {Button} from 'view/com/util/forms/Button' +import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {useModalControls} from '#/state/modals' +import {Trans} from '@lingui/macro' type Props = NativeStackScreenProps export function ListsScreen({}: Props) { diff --git a/src/view/screens/Log.tsx b/src/view/screens/Log.tsx index eabf66bf09..e727a1fb81 100644 --- a/src/view/screens/Log.tsx +++ b/src/view/screens/Log.tsx @@ -1,20 +1,18 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {ago} from 'lib/strings/time' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, TouchableOpacity, View} from 'react-native' - -import {getEntries} from '#/logger/logDump' -import {useSetMinimalShellMode} from '#/state/shell' - -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' +import {useFocusEffect} from '@react-navigation/native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ScrollView} from '../com/util/Views' +import {s} from 'lib/styles' +import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from '../com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {getEntries} from '#/logger/logDump' +import {ago} from 'lib/strings/time' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {useSetMinimalShellMode} from '#/state/shell' export function LogScreen({}: NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/Moderation.tsx b/src/view/screens/Moderation.tsx index 5b06ab845f..928766c304 100644 --- a/src/view/screens/Moderation.tsx +++ b/src/view/screens/Moderation.tsx @@ -1,16 +1,3 @@ -import {ComAtprotoLabelDefs} from '@atproto/api' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -18,22 +5,33 @@ import { TouchableOpacity, View, } from 'react-native' - -import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' +import {useFocusEffect} from '@react-navigation/native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {ComAtprotoLabelDefs} from '@atproto/api' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {s} from 'lib/styles' +import {CenteredView} from '../com/util/Views' +import {ViewHeader} from '../com/util/ViewHeader' +import {Link, TextLink} from '../com/util/Link' +import {Text} from '../com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {ToggleButton} from '../com/util/forms/ToggleButton' +import {useSession} from '#/state/session' import { useProfileQuery, useProfileUpdateMutation, } from '#/state/queries/profile' -import {useSession} from '#/state/session' -import {useSetMinimalShellMode} from '#/state/shell' - -import {ToggleButton} from '../com/util/forms/ToggleButton' -import {Link, TextLink} from '../com/util/Link' -import {Text} from '../com/util/text/Text' -import {ViewHeader} from '../com/util/ViewHeader' -import {CenteredView} from '../com/util/Views' import {ScrollView} from '../com/util/Views' +import {useGlobalDialogsControlContext} from '#/components/dialogs/Context' type Props = NativeStackScreenProps export function ModerationScreen({}: Props) { diff --git a/src/view/screens/ModerationBlockedAccounts.tsx b/src/view/screens/ModerationBlockedAccounts.tsx index 9c25764f8a..09d77987f9 100644 --- a/src/view/screens/ModerationBlockedAccounts.tsx +++ b/src/view/screens/ModerationBlockedAccounts.tsx @@ -1,12 +1,3 @@ -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -15,17 +6,24 @@ import { StyleSheet, View, } from 'react-native' -import {ProfileCard} from 'view/com/profile/ProfileCard' -import {CenteredView} from 'view/com/util/Views' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' -import {useSetMinimalShellMode} from '#/state/shell' - -import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import {Text} from '../com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {CommonNavigatorParams} from 'lib/routes/types' +import {useAnalytics} from 'lib/analytics/analytics' +import {useFocusEffect} from '@react-navigation/native' import {ViewHeader} from '../com/util/ViewHeader' +import {CenteredView} from 'view/com/util/Views' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {ProfileCard} from 'view/com/profile/ProfileCard' +import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts' +import {cleanError} from '#/lib/strings/errors' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx index 6d9e413843..b7d993acc7 100644 --- a/src/view/screens/ModerationModlists.tsx +++ b/src/view/screens/ModerationModlists.tsx @@ -1,21 +1,20 @@ -import {AtUri} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Trans} from '@lingui/macro' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {NavigationProp} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' -import {Text} from 'view/com/util/text/Text' - -import {useModalControls} from '#/state/modals' -import {useSetMinimalShellMode} from '#/state/shell' +import {useFocusEffect, useNavigation} from '@react-navigation/native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {AtUri} from '@atproto/api' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {MyLists} from '#/view/com/lists/MyLists' +import {Text} from 'view/com/util/text/Text' +import {Button} from 'view/com/util/forms/Button' +import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {useModalControls} from '#/state/modals' +import {Trans} from '@lingui/macro' type Props = NativeStackScreenProps export function ModerationModlistsScreen({}: Props) { diff --git a/src/view/screens/ModerationMutedAccounts.tsx b/src/view/screens/ModerationMutedAccounts.tsx index 635c9f468d..1aff19dd3b 100644 --- a/src/view/screens/ModerationMutedAccounts.tsx +++ b/src/view/screens/ModerationMutedAccounts.tsx @@ -1,12 +1,3 @@ -import {AppBskyActorDefs as ActorDefs} from '@atproto/api' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams} from 'lib/routes/types' import React from 'react' import { ActivityIndicator, @@ -15,17 +6,24 @@ import { StyleSheet, View, } from 'react-native' -import {ProfileCard} from 'view/com/profile/ProfileCard' -import {CenteredView} from 'view/com/util/Views' - -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' -import {useSetMinimalShellMode} from '#/state/shell' - -import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {AppBskyActorDefs as ActorDefs} from '@atproto/api' import {Text} from '../com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {CommonNavigatorParams} from 'lib/routes/types' +import {useAnalytics} from 'lib/analytics/analytics' +import {useFocusEffect} from '@react-navigation/native' import {ViewHeader} from '../com/util/ViewHeader' +import {CenteredView} from 'view/com/util/Views' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {ProfileCard} from 'view/com/profile/ProfileCard' +import {logger} from '#/logger' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts' +import {cleanError} from '#/lib/strings/errors' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/NotFound.tsx b/src/view/screens/NotFound.tsx index d101a45b73..dfa840abbc 100644 --- a/src/view/screens/NotFound.tsx +++ b/src/view/screens/NotFound.tsx @@ -1,21 +1,19 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import { - StackActions, - useFocusEffect, - useNavigation, -} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {NavigationProp} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import {Button} from 'view/com/util/forms/Button' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {Text} from '../com/util/text/Text' +import { + useNavigation, + StackActions, + useFocusEffect, +} from '@react-navigation/native' import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from '../com/util/text/Text' +import {Button} from 'view/com/util/forms/Button' +import {NavigationProp} from 'lib/routes/types' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const NotFoundScreen = () => { const pal = usePalette('default') diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx index 030f73bd8a..48c834a28f 100644 --- a/src/view/screens/Notifications.tsx +++ b/src/view/screens/Notifications.tsx @@ -1,39 +1,37 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {View} from 'react-native' import {useFocusEffect, useIsFocused} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ComposeIcon2} from 'lib/icons' import { NativeStackScreenProps, NotificationsTabNavigatorParams, } from 'lib/routes/types' -import {colors, s} from 'lib/styles' -import React from 'react' -import {View} from 'react-native' +import {ViewHeader} from '../com/util/ViewHeader' +import {Feed} from '../com/notifications/Feed' import {TextLink} from 'view/com/util/Link' import {ListMethods} from 'view/com/util/List' import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' - -import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {MainScrollProvider} from '../com/util/MainScrollProvider' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s, colors} from 'lib/styles' +import {useAnalytics} from 'lib/analytics/analytics' import {logger} from '#/logger' -import {isNative} from '#/platform/detection' -import {emitSoftReset, listenSoftReset} from '#/state/events' -import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { useUnreadNotifications, useUnreadNotificationsApi, } from '#/state/queries/notifications/unread' +import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed' +import {listenSoftReset, emitSoftReset} from '#/state/events' import {truncateAndInvalidate} from '#/state/queries/util' -import {useSetMinimalShellMode} from '#/state/shell' -import {useComposerControls} from '#/state/shell/composer' - -import {Feed} from '../com/notifications/Feed' +import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' +import {isNative} from '#/platform/detection' import {FAB} from '../com/util/fab/FAB' -import {MainScrollProvider} from '../com/util/MainScrollProvider' -import {ViewHeader} from '../com/util/ViewHeader' +import {ComposeIcon2} from 'lib/icons' +import {useComposerControls} from '#/state/shell/composer' type Props = NativeStackScreenProps< NotificationsTabNavigatorParams, diff --git a/src/view/screens/PostLikedBy.tsx b/src/view/screens/PostLikedBy.tsx index cfc1997f8d..604301544c 100644 --- a/src/view/screens/PostLikedBy.tsx +++ b/src/view/screens/PostLikedBy.tsx @@ -1,15 +1,13 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' import React from 'react' import {View} from 'react-native' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const PostLikedByScreen = ({route}: Props) => { diff --git a/src/view/screens/PostRepostedBy.tsx b/src/view/screens/PostRepostedBy.tsx index 46beb7ed9f..07017d6920 100644 --- a/src/view/screens/PostRepostedBy.tsx +++ b/src/view/screens/PostRepostedBy.tsx @@ -1,15 +1,13 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' import React from 'react' import {View} from 'react-native' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = NativeStackScreenProps export const PostRepostedByScreen = ({route}: Props) => { diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index 5ae68db2e7..aa09ab9ed7 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -1,30 +1,28 @@ -import {useFocusEffect} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' -import {s} from 'lib/styles' -import {clamp} from 'lodash' import React from 'react' import {StyleSheet, View} from 'react-native' import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {useFocusEffect} from '@react-navigation/native' +import {useQueryClient} from '@tanstack/react-query' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' import {ComposePrompt} from 'view/com/composer/Prompt' - -import {isWeb} from '#/platform/detection' +import {s} from 'lib/styles' +import {useSafeAreaInsets} from 'react-native-safe-area-context' import { RQKEY as POST_THREAD_RQKEY, ThreadNode, } from '#/state/queries/post-thread' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {useSession} from '#/state/session' +import {clamp} from 'lodash' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {useSetMinimalShellMode} from '#/state/shell' -import {useComposerControls} from '#/state/shell/composer' - -import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' import {ErrorMessage} from '../com/util/error/ErrorMessage' import {CenteredView} from '../com/util/Views' +import {useComposerControls} from '#/state/shell/composer' +import {useSession} from '#/state/session' +import {isWeb} from '#/platform/detection' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { diff --git a/src/view/screens/PreferencesExternalEmbeds.tsx b/src/view/screens/PreferencesExternalEmbeds.tsx index 668d7a7b1d..1e8cedf7e2 100644 --- a/src/view/screens/PreferencesExternalEmbeds.tsx +++ b/src/view/screens/PreferencesExternalEmbeds.tsx @@ -1,27 +1,25 @@ -import {Trans} from '@lingui/macro' -import {useFocusEffect} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import { - useExternalEmbedsPrefs, - useSetExternalEmbedPref, -} from 'state/preferences' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' - +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {s} from 'lib/styles' +import {Text} from '../com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import { EmbedPlayerSource, externalEmbedLabels, } from '#/lib/strings/embed-player' import {useSetMinimalShellMode} from '#/state/shell' - -import {SimpleViewHeader} from '../com/util/SimpleViewHeader' -import {Text} from '../com/util/text/Text' +import {Trans} from '@lingui/macro' import {ScrollView} from '../com/util/Views' +import { + useExternalEmbedsPrefs, + useSetExternalEmbedPref, +} from 'state/preferences' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {SimpleViewHeader} from '../com/util/SimpleViewHeader' type Props = NativeStackScreenProps< CommonNavigatorParams, diff --git a/src/view/screens/PreferencesFollowingFeed.tsx b/src/view/screens/PreferencesFollowingFeed.tsx index 4062bea011..b4acbcd44c 100644 --- a/src/view/screens/PreferencesFollowingFeed.tsx +++ b/src/view/screens/PreferencesFollowingFeed.tsx @@ -1,26 +1,24 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {Slider} from '@miblanchard/react-native-slider' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {colors, s} from 'lib/styles' -import debounce from 'lodash.debounce' -import {isWeb} from 'platform/detection' import React, {useState} from 'react' import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Slider} from '@miblanchard/react-native-slider' +import {Text} from '../com/util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {isWeb} from 'platform/detection' import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' - +import debounce from 'lodash.debounce' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { usePreferencesQuery, useSetFeedViewPreferencesMutation, } from '#/state/queries/preferences' -import {Text} from '../com/util/text/Text' - function RepliesThresholdInput({ enabled, initialValue, diff --git a/src/view/screens/PreferencesThreads.tsx b/src/view/screens/PreferencesThreads.tsx index 3e4abb7db7..321c672936 100644 --- a/src/view/screens/PreferencesThreads.tsx +++ b/src/view/screens/PreferencesThreads.tsx @@ -1,10 +1,3 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {colors, s} from 'lib/styles' import React from 'react' import { ActivityIndicator, @@ -13,18 +6,23 @@ import { TouchableOpacity, View, } from 'react-native' -import {RadioGroup} from 'view/com/util/forms/RadioGroup' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {Text} from '../com/util/text/Text' +import {s, colors} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {RadioGroup} from 'view/com/util/forms/RadioGroup' +import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {ViewHeader} from 'view/com/util/ViewHeader' import {CenteredView} from 'view/com/util/Views' - +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { usePreferencesQuery, useSetThreadViewPreferencesMutation, } from '#/state/queries/preferences' -import {Text} from '../com/util/text/Text' - type Props = NativeStackScreenProps export function PreferencesThreads({navigation}: Props) { const pal = usePalette('default') diff --git a/src/view/screens/PrivacyPolicy.tsx b/src/view/screens/PrivacyPolicy.tsx index ff92909c9b..776d83918c 100644 --- a/src/view/screens/PrivacyPolicy.tsx +++ b/src/view/screens/PrivacyPolicy.tsx @@ -1,18 +1,16 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {TextLink} from 'view/com/util/Link' +import {useFocusEffect} from '@react-navigation/native' import {Text} from 'view/com/util/text/Text' -import {ScrollView} from 'view/com/util/Views' - -import {useSetMinimalShellMode} from '#/state/shell' - +import {TextLink} from 'view/com/util/Link' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const PrivacyPolicyScreen = (_props: Props) => { diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index f2c0af855d..b30b4491bd 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -1,3 +1,6 @@ +import React, {useMemo} from 'react' +import {StyleSheet, View} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' import { AppBskyActorDefs, moderateProfile, @@ -6,50 +9,45 @@ import { } from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {usePalette} from 'lib/hooks/usePalette' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import {ComposeIcon2} from 'lib/icons' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {combinedDisplayName} from 'lib/strings/display-names' -import {colors, s} from 'lib/styles' -import React, {useMemo} from 'react' -import {StyleSheet, View} from 'react-native' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {Feed} from 'view/com/posts/Feed' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import {CenteredView} from '../com/util/Views' +import {ListRef} from '../com/util/List' import {ScreenHider} from 'view/com/util/moderation/ScreenHider' - -import {cleanError} from '#/lib/strings/errors' -import {isInvalidHandle} from '#/lib/strings/handles' -import {isNative} from '#/platform/detection' -import {useProfileShadow} from '#/state/cache/profile-shadow' -import {listenSoftReset} from '#/state/events' +import {Feed} from 'view/com/posts/Feed' +import {ProfileLists} from '../com/lists/ProfileLists' +import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens' +import {ProfileHeader, ProfileHeaderLoading} from '../com/profile/ProfileHeader' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {ErrorScreen} from '../com/util/error/ErrorScreen' +import {EmptyState} from '../com/util/EmptyState' +import {FAB} from '../com/util/fab/FAB' +import {s, colors} from 'lib/styles' +import {useAnalytics} from 'lib/analytics/analytics' +import {ComposeIcon2} from 'lib/icons' +import {useSetTitle} from 'lib/hooks/useSetTitle' +import {combinedDisplayName} from 'lib/strings/display-names' import { FeedDescriptor, resetProfilePostsQueries, } from '#/state/queries/post-feed' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import {useModerationOpts} from '#/state/queries/preferences' -import {useProfileQuery} from '#/state/queries/profile' -import {useProfileExtraInfoQuery} from '#/state/queries/profile-extra-info' import {useResolveDidQuery} from '#/state/queries/resolve-uri' -import {truncateAndInvalidate} from '#/state/queries/util' -import {getAgent, useSession} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useProfileShadow} from '#/state/cache/profile-shadow' +import {useSession, getAgent} from '#/state/session' +import {useModerationOpts} from '#/state/queries/preferences' +import {useProfileExtraInfoQuery} from '#/state/queries/profile-extra-info' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' -import {useComposerControls} from '#/state/shell/composer' -import {Text} from '#/view/com/util/text/Text' - -import {ProfileFeedgens} from '../com/feeds/ProfileFeedgens' -import {ProfileLists} from '../com/lists/ProfileLists' -import {ProfileHeader, ProfileHeaderLoading} from '../com/profile/ProfileHeader' -import {EmptyState} from '../com/util/EmptyState' -import {ErrorScreen} from '../com/util/error/ErrorScreen' -import {FAB} from '../com/util/fab/FAB' -import {ListRef} from '../com/util/List' +import {cleanError} from '#/lib/strings/errors' import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn' -import {CenteredView} from '../com/util/Views' +import {useQueryClient} from '@tanstack/react-query' +import {useComposerControls} from '#/state/shell/composer' +import {listenSoftReset} from '#/state/events' +import {truncateAndInvalidate} from '#/state/queries/util' +import {Text} from '#/view/com/util/text/Text' +import {usePalette} from 'lib/hooks/usePalette' +import {isNative} from '#/platform/detection' +import {isInvalidHandle} from '#/lib/strings/handles' interface SectionRef { scrollToTop: () => void diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx index 87c8f82b75..b3a7328c17 100644 --- a/src/view/screens/ProfileFeed.tsx +++ b/src/view/screens/ProfileFeed.tsx @@ -1,71 +1,70 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useIsFocused, useNavigation} from '@react-navigation/native' +import React, {useMemo, useCallback} from 'react' +import {StyleSheet, View, Pressable} from 'react-native' import {NativeStackScreenProps} from '@react-navigation/native-stack' +import {useIsFocused, useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import {Haptics} from 'lib/haptics' import {usePalette} from 'lib/hooks/usePalette' -import {useSetTitle} from 'lib/hooks/useSetTitle' -import {ComposeIcon2} from 'lib/icons' -import {makeCustomFeedLink} from 'lib/routes/links' import {CommonNavigatorParams} from 'lib/routes/types' -import {NavigationProp} from 'lib/routes/types' -import {shareUrl} from 'lib/sharing' -import {pluralize} from 'lib/strings/helpers' import {makeRecordUri} from 'lib/strings/url-helpers' -import {toShareUrl} from 'lib/strings/url-helpers' import {s} from 'lib/styles' -import React, {useCallback, useMemo} from 'react' -import {Pressable, StyleSheet, View} from 'react-native' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {Feed} from 'view/com/posts/Feed' -import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' -import {EmptyState} from 'view/com/util/EmptyState' -import {FAB} from 'view/com/util/fab/FAB' -import {Button} from 'view/com/util/forms/Button' -import {ListRef} from 'view/com/util/List' -import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {LoadingScreen} from 'view/com/util/LoadingScreen' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {CenteredView} from 'view/com/util/Views' - -import {atoms as a, useTheme} from '#/alf' -import {Button as NewButton, ButtonText} from '#/components/Button' -import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' -import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' -import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' -import { - Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, - Heart2_Stroke2_Corner0_Rounded as HeartOutline, -} from '#/components/icons/Heart2' -import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' -import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' -import {InlineLink} from '#/components/Link' -import * as Menu from '#/components/Menu' -import {RichText} from '#/components/RichText' -import {HITSLOP_20} from '#/lib/constants' -import {logger} from '#/logger' -import {isNative} from '#/platform/detection' -import {listenSoftReset} from '#/state/events' -import {useModalControls} from '#/state/modals' -import {FeedSourceFeedInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' -import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' import {FeedDescriptor} from '#/state/queries/post-feed' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' +import {Feed} from 'view/com/posts/Feed' +import {InlineLink} from '#/components/Link' +import {ListRef} from 'view/com/util/List' +import {Button} from 'view/com/util/forms/Button' +import {Text} from 'view/com/util/text/Text' +import {RichText} from '#/components/RichText' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {FAB} from 'view/com/util/fab/FAB' +import {EmptyState} from 'view/com/util/EmptyState' +import {LoadingScreen} from 'view/com/util/LoadingScreen' +import * as Toast from 'view/com/util/Toast' +import {useSetTitle} from 'lib/hooks/useSetTitle' import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' +import {shareUrl} from 'lib/sharing' +import {toShareUrl} from 'lib/strings/url-helpers' +import {Haptics} from 'lib/haptics' +import {useAnalytics} from 'lib/analytics/analytics' +import {makeCustomFeedLink} from 'lib/routes/links' +import {pluralize} from 'lib/strings/helpers' +import {CenteredView} from 'view/com/util/Views' +import {NavigationProp} from 'lib/routes/types' +import {ComposeIcon2} from 'lib/icons' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useModalControls} from '#/state/modals' +import {useFeedSourceInfoQuery, FeedSourceFeedInfo} from '#/state/queries/feed' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' import { - usePinFeedMutation, - usePreferencesQuery, UsePreferencesQueryResponse, - useRemoveFeedMutation, + usePreferencesQuery, useSaveFeedMutation, + useRemoveFeedMutation, + usePinFeedMutation, useUnpinFeedMutation, } from '#/state/queries/preferences' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {truncateAndInvalidate} from '#/state/queries/util' import {useSession} from '#/state/session' +import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like' import {useComposerControls} from '#/state/shell/composer' +import {truncateAndInvalidate} from '#/state/queries/util' +import {isNative} from '#/platform/detection' +import {listenSoftReset} from '#/state/events' +import {atoms as a, useTheme} from '#/alf' +import * as Menu from '#/components/Menu' +import {HITSLOP_20} from '#/lib/constants' +import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' +import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' +import { + Heart2_Stroke2_Corner0_Rounded as HeartOutline, + Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled, +} from '#/components/icons/Heart2' +import {Button as NewButton, ButtonText} from '#/components/Button' const SECTION_TITLES = ['Posts'] diff --git a/src/view/screens/ProfileFeedLikedBy.tsx b/src/view/screens/ProfileFeedLikedBy.tsx index 877378403d..b1bcf48ba4 100644 --- a/src/view/screens/ProfileFeedLikedBy.tsx +++ b/src/view/screens/ProfileFeedLikedBy.tsx @@ -1,15 +1,13 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {makeRecordUri} from 'lib/strings/url-helpers' import React from 'react' import {View} from 'react-native' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {PostLikedBy as PostLikedByComponent} from '../com/post-thread/PostLikedBy' +import {makeRecordUri} from 'lib/strings/url-helpers' +import {useSetMinimalShellMode} from '#/state/shell' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = NativeStackScreenProps export const ProfileFeedLikedByScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileFollowers.tsx b/src/view/screens/ProfileFollowers.tsx index 7925837967..2cad08cb5d 100644 --- a/src/view/screens/ProfileFollowers.tsx +++ b/src/view/screens/ProfileFollowers.tsx @@ -1,14 +1,12 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import React from 'react' import {View} from 'react-native' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers' +import {useSetMinimalShellMode} from '#/state/shell' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = NativeStackScreenProps export const ProfileFollowersScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileFollows.tsx b/src/view/screens/ProfileFollows.tsx index 70fcfa9c6f..80502b98bc 100644 --- a/src/view/screens/ProfileFollows.tsx +++ b/src/view/screens/ProfileFollows.tsx @@ -1,14 +1,12 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import React from 'react' import {View} from 'react-native' - -import {useSetMinimalShellMode} from '#/state/shell' - -import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows' +import {useSetMinimalShellMode} from '#/state/shell' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' type Props = NativeStackScreenProps export const ProfileFollowsScreen = ({route}: Props) => { diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 08644dccce..9e98757efa 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -1,67 +1,66 @@ -import {AppBskyGraphDefs, AtUri, RichText as RichTextAPI} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React, {useCallback, useMemo} from 'react' +import {Pressable, StyleSheet, View} from 'react-native' import {useFocusEffect, useIsFocused} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {useNavigation} from '@react-navigation/native' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import {AppBskyGraphDefs, AtUri, RichText as RichTextAPI} from '@atproto/api' import {useQueryClient} from '@tanstack/react-query' +import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' +import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' +import {Feed} from 'view/com/posts/Feed' +import {Text} from 'view/com/util/text/Text' +import {NativeDropdown, DropdownItem} from 'view/com/util/forms/NativeDropdown' +import {CenteredView} from 'view/com/util/Views' +import {EmptyState} from 'view/com/util/EmptyState' +import {LoadingScreen} from 'view/com/util/LoadingScreen' +import {RichText} from '#/components/RichText' +import {Button} from 'view/com/util/forms/Button' +import {TextLink} from 'view/com/util/Link' +import {ListRef} from 'view/com/util/List' +import * as Toast from 'view/com/util/Toast' +import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' +import {FAB} from 'view/com/util/fab/FAB' import {Haptics} from 'lib/haptics' +import {FeedDescriptor} from '#/state/queries/post-feed' import {usePalette} from 'lib/hooks/usePalette' import {useSetTitle} from 'lib/hooks/useSetTitle' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {ComposeIcon2} from 'lib/icons' -import {makeListLink, makeProfileLink} from 'lib/routes/links' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' +import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' import {NavigationProp} from 'lib/routes/types' -import {shareUrl} from 'lib/sharing' -import {sanitizeHandle} from 'lib/strings/handles' import {toShareUrl} from 'lib/strings/url-helpers' +import {shareUrl} from 'lib/sharing' import {s} from 'lib/styles' -import React, {useCallback, useMemo} from 'react' -import {Pressable, StyleSheet, View} from 'react-native' -import {PagerWithHeader} from 'view/com/pager/PagerWithHeader' -import {Feed} from 'view/com/posts/Feed' -import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' -import {EmptyState} from 'view/com/util/EmptyState' -import {FAB} from 'view/com/util/fab/FAB' -import {Button} from 'view/com/util/forms/Button' -import {DropdownItem, NativeDropdown} from 'view/com/util/forms/NativeDropdown' -import {TextLink} from 'view/com/util/Link' -import {ListRef} from 'view/com/util/List' -import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn' -import {LoadingScreen} from 'view/com/util/LoadingScreen' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {CenteredView} from 'view/com/util/Views' - -import {atoms as a, useTheme} from '#/alf' -import {RichText} from '#/components/RichText' -import {useAnalytics} from '#/lib/analytics/analytics' -import {cleanError} from '#/lib/strings/errors' -import {logger} from '#/logger' -import {isNative, isWeb} from '#/platform/detection' -import {listenSoftReset} from '#/state/events' +import {sanitizeHandle} from 'lib/strings/handles' +import {makeProfileLink, makeListLink} from 'lib/routes/links' +import {ComposeIcon2} from 'lib/icons' +import {ListMembers} from '#/view/com/lists/ListMembers' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSetMinimalShellMode} from '#/state/shell' import {useModalControls} from '#/state/modals' +import {useResolveUriQuery} from '#/state/queries/resolve-uri' import { + useListQuery, + useListMuteMutation, useListBlockMutation, useListDeleteMutation, - useListMuteMutation, - useListQuery, } from '#/state/queries/list' -import {FeedDescriptor} from '#/state/queries/post-feed' -import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed' -import { - usePinFeedMutation, - usePreferencesQuery, - useSetSaveFeedsMutation, - useUnpinFeedMutation, -} from '#/state/queries/preferences' -import {useResolveUriQuery} from '#/state/queries/resolve-uri' -import {truncateAndInvalidate} from '#/state/queries/util' +import {cleanError} from '#/lib/strings/errors' import {useSession} from '#/state/session' -import {useSetMinimalShellMode} from '#/state/shell' import {useComposerControls} from '#/state/shell/composer' -import {ListMembers} from '#/view/com/lists/ListMembers' +import {isNative, isWeb} from '#/platform/detection' +import {truncateAndInvalidate} from '#/state/queries/util' +import { + usePreferencesQuery, + usePinFeedMutation, + useUnpinFeedMutation, + useSetSaveFeedsMutation, +} from '#/state/queries/preferences' +import {logger} from '#/logger' +import {useAnalytics} from '#/lib/analytics/analytics' +import {listenSoftReset} from '#/state/events' +import {atoms as a, useTheme} from '#/alf' const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_MOD = ['About'] diff --git a/src/view/screens/SavedFeeds.tsx b/src/view/screens/SavedFeeds.tsx index b58f9f4f15..251c706384 100644 --- a/src/view/screens/SavedFeeds.tsx +++ b/src/view/screens/SavedFeeds.tsx @@ -1,32 +1,31 @@ -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {StyleSheet, View, ActivityIndicator, Pressable} from 'react-native' import {useFocusEffect} from '@react-navigation/native' import {NativeStackScreenProps} from '@react-navigation/native-stack' -import {useAnalytics} from 'lib/analytics/analytics' -import {Haptics} from 'lib/haptics' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {CommonNavigatorParams} from 'lib/routes/types' -import {colors, s} from 'lib/styles' -import React from 'react' -import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native' -import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' -import {TextLink} from 'view/com/util/Link' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {ViewHeader} from 'view/com/util/ViewHeader' -import {CenteredView, ScrollView} from 'view/com/util/Views' - import {track} from '#/lib/analytics/analytics' +import {useAnalytics} from 'lib/analytics/analytics' +import {usePalette} from 'lib/hooks/usePalette' +import {CommonNavigatorParams} from 'lib/routes/types' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {ViewHeader} from 'view/com/util/ViewHeader' +import {ScrollView, CenteredView} from 'view/com/util/Views' +import {Text} from 'view/com/util/text/Text' +import {s, colors} from 'lib/styles' +import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' +import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' +import * as Toast from 'view/com/util/Toast' +import {Haptics} from 'lib/haptics' +import {TextLink} from 'view/com/util/Link' import {logger} from '#/logger' -import { - usePinFeedMutation, - usePreferencesQuery, - useSetSaveFeedsMutation, - useUnpinFeedMutation, -} from '#/state/queries/preferences' import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import { + usePreferencesQuery, + usePinFeedMutation, + useUnpinFeedMutation, + useSetSaveFeedsMutation, +} from '#/state/queries/preferences' const HITSLOP_TOP = { top: 20, diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index d9d11c8104..42eec53d31 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -1,59 +1,59 @@ +import React from 'react' +import { + View, + StyleSheet, + ActivityIndicator, + TextInput, + Pressable, + Platform, +} from 'react-native' +import {ScrollView, CenteredView} from '#/view/com/util/Views' +import {List} from '#/view/com/util/List' import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' import { FontAwesomeIcon, FontAwesomeIconStyle, } from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import AsyncStorage from '@react-native-async-storage/async-storage' import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' + +import {logger} from '#/logger' import { NativeStackScreenProps, SearchTabNavigatorParams, } from 'lib/routes/types' -import {useTheme} from 'lib/ThemeContext' -import React from 'react' -import { - ActivityIndicator, - Platform, - Pressable, - StyleSheet, - TextInput, - View, -} from 'react-native' +import {Text} from '#/view/com/util/text/Text' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' - -import {useAnalytics} from '#/lib/analytics/analytics' -import {HITSLOP_10} from '#/lib/constants' -import {usePalette} from '#/lib/hooks/usePalette' -import {MagnifyingGlassIcon} from '#/lib/icons' -import {NavigationProp} from '#/lib/routes/types' -import {augmentSearchQuery} from '#/lib/strings/helpers' -import {s} from '#/lib/styles' -import {logger} from '#/logger' -import {isNative, isWeb} from '#/platform/detection' -import {listenSoftReset} from '#/state/events' -import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' -import {useActorSearch} from '#/state/queries/actor-search' -import {useModerationOpts} from '#/state/queries/preferences' -import {useSearchPostsQuery} from '#/state/queries/search-posts' -import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' -import {useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell' -import {useSetDrawerSwipeDisabled, useSetMinimalShellMode} from '#/state/shell' +import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' +import {Post} from '#/view/com/post/Post' import {Pager} from '#/view/com/pager/Pager' import {TabBar} from '#/view/com/pager/TabBar' -import {Post} from '#/view/com/post/Post' -import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard' -import {List} from '#/view/com/util/List' -import {Text} from '#/view/com/util/text/Text' -import {CenteredView, ScrollView} from '#/view/com/util/Views' +import {HITSLOP_10} from '#/lib/constants' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {usePalette} from '#/lib/hooks/usePalette' +import {useTheme} from 'lib/ThemeContext' +import {useSession} from '#/state/session' +import {useGetSuggestedFollowersByActor} from '#/state/queries/suggested-follows' +import {useSearchPostsQuery} from '#/state/queries/search-posts' +import {useActorSearch} from '#/state/queries/actor-search' +import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' +import {useSetDrawerOpen} from '#/state/shell' +import {useAnalytics} from '#/lib/analytics/analytics' +import {MagnifyingGlassIcon} from '#/lib/icons' +import {useModerationOpts} from '#/state/queries/preferences' import { MATCH_HANDLE, SearchLinkCard, SearchProfileCard, } from '#/view/shell/desktop/Search' +import {useSetMinimalShellMode, useSetDrawerSwipeDisabled} from '#/state/shell' +import {isNative, isWeb} from '#/platform/detection' +import {listenSoftReset} from '#/state/events' +import {s} from '#/lib/styles' +import AsyncStorage from '@react-native-async-storage/async-storage' +import {augmentSearchQuery} from '#/lib/strings/helpers' +import {NavigationProp} from '#/lib/routes/types' function Loader() { const pal = usePalette('default') diff --git a/src/view/screens/Settings/ExportCarDialog.tsx b/src/view/screens/Settings/ExportCarDialog.tsx index e4747c6966..dca51c0dca 100644 --- a/src/view/screens/Settings/ExportCarDialog.tsx +++ b/src/view/screens/Settings/ExportCarDialog.tsx @@ -1,13 +1,13 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' import React from 'react' import {View} from 'react-native' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {Button, ButtonText} from '#/components/Button' import * as Dialog from '#/components/Dialog' +import {Text, P} from '#/components/Typography' +import {Button, ButtonText} from '#/components/Button' import {InlineLink, Link} from '#/components/Link' -import {P, Text} from '#/components/Typography' import {getAgent, useSession} from '#/state/session' export function ExportCarDialog({ diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index f25fca15a0..00b507a997 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -1,73 +1,72 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import Clipboard from '@react-native-clipboard/clipboard' -import {useFocusEffect, useNavigation} from '@react-navigation/native' -import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from 'lib/analytics/analytics' -import * as AppInfo from 'lib/app-info' -import {STATUS_PAGE_URL} from 'lib/constants' -import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' -import {useCustomPalette} from 'lib/hooks/useCustomPalette' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HandIcon, HashtagIcon} from 'lib/icons' -import {makeProfileLink} from 'lib/routes/links' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {NavigationProp} from 'lib/routes/types' -import {colors, s} from 'lib/styles' import React from 'react' import { ActivityIndicator, Linking, Platform, - Pressable, StyleSheet, + Pressable, TextStyle, TouchableOpacity, View, ViewStyle, } from 'react-native' -import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' -import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' -import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {Link, TextLink} from 'view/com/util/Link' -import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' -import {Text} from 'view/com/util/text/Text' -import * as Toast from 'view/com/util/Toast' -import {UserAvatar} from 'view/com/util/UserAvatar' -import {ScrollView} from 'view/com/util/Views' - -import {useDialogControl} from '#/components/Dialog' -import {isNative} from '#/platform/detection' +import {useFocusEffect, useNavigation} from '@react-navigation/native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' +import * as AppInfo from 'lib/app-info' +import {usePalette} from 'lib/hooks/usePalette' +import {useCustomPalette} from 'lib/hooks/useCustomPalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' +import {useAnalytics} from 'lib/analytics/analytics' +import {NavigationProp} from 'lib/routes/types' +import {HandIcon, HashtagIcon} from 'lib/icons' +import Clipboard from '@react-native-clipboard/clipboard' +import {makeProfileLink} from 'lib/routes/links' +import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' import {useModalControls} from '#/state/modals' -import {clearLegacyStorage} from '#/state/persisted/legacy' -// TODO import {useInviteCodesQuery} from '#/state/queries/invites' -import {clear as clearStorage} from '#/state/persisted/store' +import { + useSetMinimalShellMode, + useThemePrefs, + useSetThemePrefs, + useOnboardingDispatch, +} from '#/state/shell' import { useRequireAltTextEnabled, useSetRequireAltTextEnabled, } from '#/state/preferences' +import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useClearPreferencesMutation} from '#/state/queries/preferences' +// TODO import {useInviteCodesQuery} from '#/state/queries/invites' +import {clear as clearStorage} from '#/state/persisted/store' +import {clearLegacyStorage} from '#/state/persisted/legacy' +import {STATUS_PAGE_URL} from 'lib/constants' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useQueryClient} from '@tanstack/react-query' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import {useCloseAllActiveElements} from '#/state/util' import { useInAppBrowser, useSetInAppBrowser, } from '#/state/preferences/in-app-browser' -import {useClearPreferencesMutation} from '#/state/queries/preferences' -import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' -import {useProfileQuery} from '#/state/queries/profile' -import {SessionAccount, useSession, useSessionApi} from '#/state/session' -import { - useOnboardingDispatch, - useSetMinimalShellMode, - useSetThemePrefs, - useThemePrefs, -} from '#/state/shell' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import {useCloseAllActiveElements} from '#/state/util' +import {isNative} from '#/platform/detection' +import {useDialogControl} from '#/components/Dialog' +import {s, colors} from 'lib/styles' +import {ScrollView} from 'view/com/util/Views' +import {Link, TextLink} from 'view/com/util/Link' +import {Text} from 'view/com/util/text/Text' +import * as Toast from 'view/com/util/Toast' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {SelectableBtn} from 'view/com/util/forms/SelectableBtn' +import {AccountDropdownBtn} from 'view/com/util/AccountDropdownBtn' +import {SimpleViewHeader} from 'view/com/util/SimpleViewHeader' import {ExportCarDialog} from './ExportCarDialog' function SettingsAccountCard({account}: {account: SessionAccount}) { diff --git a/src/view/screens/Storybook/Breakpoints.tsx b/src/view/screens/Storybook/Breakpoints.tsx index 5dd8a89fc0..1b846d517c 100644 --- a/src/view/screens/Storybook/Breakpoints.tsx +++ b/src/view/screens/Storybook/Breakpoints.tsx @@ -1,8 +1,8 @@ import React from 'react' import {View} from 'react-native' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' -import {H3, Text} from '#/components/Typography' +import {atoms as a, useTheme, useBreakpoints} from '#/alf' +import {Text, H3} from '#/components/Typography' export function Breakpoints() { const t = useTheme() diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index 8a037844e2..320db13ff8 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -4,15 +4,15 @@ import {View} from 'react-native' import {atoms as a} from '#/alf' import { Button, + ButtonVariant, ButtonColor, ButtonIcon, ButtonText, - ButtonVariant, } from '#/components/Button' +import {H1} from '#/components/Typography' import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {H1} from '#/components/Typography' export function Buttons() { return ( diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx index af51c808f4..09be124db5 100644 --- a/src/view/screens/Storybook/Dialogs.tsx +++ b/src/view/screens/Storybook/Dialogs.tsx @@ -3,9 +3,9 @@ import {View} from 'react-native' import {atoms as a} from '#/alf' import {Button} from '#/components/Button' +import {H3, P} from '#/components/Typography' import * as Dialog from '#/components/Dialog' import * as Prompt from '#/components/Prompt' -import {H3, P} from '#/components/Typography' import {useDialogStateControlContext} from '#/state/dialogs' export function Dialogs() { diff --git a/src/view/screens/Storybook/Forms.tsx b/src/view/screens/Storybook/Forms.tsx index 0904f6113d..2d5495d706 100644 --- a/src/view/screens/Storybook/Forms.tsx +++ b/src/view/screens/Storybook/Forms.tsx @@ -2,13 +2,13 @@ import React from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' -import {Button} from '#/components/Button' -import {DateField, Label} from '#/components/forms/DateField' +import {H1, H3} from '#/components/Typography' import * as TextField from '#/components/forms/TextField' +import {DateField, Label} from '#/components/forms/DateField' import * as Toggle from '#/components/forms/Toggle' import * as ToggleButton from '#/components/forms/ToggleButton' +import {Button} from '#/components/Button' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {H1, H3} from '#/components/Typography' export function Forms() { const [toggleGroupAValues, setToggleGroupAValues] = React.useState(['a']) diff --git a/src/view/screens/Storybook/Icons.tsx b/src/view/screens/Storybook/Icons.tsx index f411a726b3..9d7dc0aa8a 100644 --- a/src/view/screens/Storybook/Icons.tsx +++ b/src/view/screens/Storybook/Icons.tsx @@ -2,11 +2,11 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' +import {H1} from '#/components/Typography' +import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight' import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' -import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {Loader} from '#/components/Loader' -import {H1} from '#/components/Typography' export function Icons() { const t = useTheme() diff --git a/src/view/screens/Storybook/Links.tsx b/src/view/screens/Storybook/Links.tsx index db65d6fed1..f9ecfba554 100644 --- a/src/view/screens/Storybook/Links.tsx +++ b/src/view/screens/Storybook/Links.tsx @@ -1,7 +1,7 @@ import React from 'react' import {View} from 'react-native' -import {atoms as a, useTheme} from '#/alf' +import {useTheme, atoms as a} from '#/alf' import {ButtonText} from '#/components/Button' import {InlineLink, Link} from '#/components/Link' import {H1, Text} from '#/components/Typography' diff --git a/src/view/screens/Storybook/Menus.tsx b/src/view/screens/Storybook/Menus.tsx index 3e5c74d86e..2f2b147215 100644 --- a/src/view/screens/Storybook/Menus.tsx +++ b/src/view/screens/Storybook/Menus.tsx @@ -2,9 +2,9 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' -import * as Menu from '#/components/Menu' import {Text} from '#/components/Typography' +import * as Menu from '#/components/Menu' +import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2' // import {useDialogStateControlContext} from '#/state/dialogs' export function Menus() { diff --git a/src/view/screens/Storybook/Spacing.tsx b/src/view/screens/Storybook/Spacing.tsx index 9b97e92adc..d7faf93a80 100644 --- a/src/view/screens/Storybook/Spacing.tsx +++ b/src/view/screens/Storybook/Spacing.tsx @@ -2,7 +2,7 @@ import React from 'react' import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' -import {H1, Text} from '#/components/Typography' +import {Text, H1} from '#/components/Typography' export function Spacing() { const t = useTheme() diff --git a/src/view/screens/Storybook/Theming.tsx b/src/view/screens/Storybook/Theming.tsx index 122a57cf8c..5b6763370d 100644 --- a/src/view/screens/Storybook/Theming.tsx +++ b/src/view/screens/Storybook/Theming.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' - import {Palette} from './Palette' export function Theming() { diff --git a/src/view/screens/Storybook/Typography.tsx b/src/view/screens/Storybook/Typography.tsx index 03f86fd467..f0d67c5281 100644 --- a/src/view/screens/Storybook/Typography.tsx +++ b/src/view/screens/Storybook/Typography.tsx @@ -2,8 +2,8 @@ import React from 'react' import {View} from 'react-native' import {atoms as a} from '#/alf' -import {RichText} from '#/components/RichText' import {Text} from '#/components/Typography' +import {RichText} from '#/components/RichText' export function Typography() { return ( diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx index e1a31c76a2..e43d756de5 100644 --- a/src/view/screens/Storybook/index.tsx +++ b/src/view/screens/Storybook/index.tsx @@ -1,22 +1,22 @@ import React from 'react' import {View} from 'react-native' - -import {atoms as a, ThemeProvider, useTheme} from '#/alf' -import {Button} from '#/components/Button' -import {useSetThemePrefs} from '#/state/shell' import {CenteredView, ScrollView} from '#/view/com/util/Views' -import {Breakpoints} from './Breakpoints' -import {Buttons} from './Buttons' -import {Dialogs} from './Dialogs' -import {Forms} from './Forms' -import {Icons} from './Icons' -import {Links} from './Links' -import {Menus} from './Menus' -import {Shadows} from './Shadows' -import {Spacing} from './Spacing' +import {atoms as a, useTheme, ThemeProvider} from '#/alf' +import {useSetThemePrefs} from '#/state/shell' +import {Button} from '#/components/Button' + import {Theming} from './Theming' import {Typography} from './Typography' +import {Spacing} from './Spacing' +import {Buttons} from './Buttons' +import {Links} from './Links' +import {Forms} from './Forms' +import {Dialogs} from './Dialogs' +import {Breakpoints} from './Breakpoints' +import {Shadows} from './Shadows' +import {Icons} from './Icons' +import {Menus} from './Menus' export function Storybook() { const t = useTheme() diff --git a/src/view/screens/Support.tsx b/src/view/screens/Support.tsx index 083a70d07d..9e7d36ec7a 100644 --- a/src/view/screens/Support.tsx +++ b/src/view/screens/Support.tsx @@ -1,19 +1,17 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {HELP_DESK_URL} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {TextLink} from 'view/com/util/Link' -import {Text} from 'view/com/util/text/Text' -import {CenteredView} from 'view/com/util/Views' - -import {useSetMinimalShellMode} from '#/state/shell' - +import {useFocusEffect} from '@react-navigation/native' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {Text} from 'view/com/util/text/Text' +import {TextLink} from 'view/com/util/Link' +import {CenteredView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {HELP_DESK_URL} from 'lib/constants' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const SupportScreen = (_props: Props) => { diff --git a/src/view/screens/TermsOfService.tsx b/src/view/screens/TermsOfService.tsx index 307cd330e3..47aa9f2688 100644 --- a/src/view/screens/TermsOfService.tsx +++ b/src/view/screens/TermsOfService.tsx @@ -1,18 +1,16 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useFocusEffect} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' -import {TextLink} from 'view/com/util/Link' +import {useFocusEffect} from '@react-navigation/native' import {Text} from 'view/com/util/text/Text' -import {ScrollView} from 'view/com/util/Views' - -import {useSetMinimalShellMode} from '#/state/shell' - +import {TextLink} from 'view/com/util/Link' +import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types' import {ViewHeader} from '../com/util/ViewHeader' +import {ScrollView} from 'view/com/util/Views' +import {usePalette} from 'lib/hooks/usePalette' +import {s} from 'lib/styles' +import {useSetMinimalShellMode} from '#/state/shell' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' type Props = NativeStackScreenProps export const TermsOfServiceScreen = (_props: Props) => { diff --git a/src/view/shell/Composer.tsx b/src/view/shell/Composer.tsx index 5ab9407f02..1937fcb6ea 100644 --- a/src/view/shell/Composer.tsx +++ b/src/view/shell/Composer.tsx @@ -1,11 +1,10 @@ +import React, {useEffect} from 'react' +import {observer} from 'mobx-react-lite' +import {Animated, Easing, Platform, StyleSheet, View} from 'react-native' +import {ComposePost} from '../com/composer/Composer' +import {useComposerState} from 'state/shell/composer' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {usePalette} from 'lib/hooks/usePalette' -import {observer} from 'mobx-react-lite' -import React, {useEffect} from 'react' -import {Animated, Easing, Platform, StyleSheet, View} from 'react-native' -import {useComposerState} from 'state/shell/composer' - -import {ComposePost} from '../com/composer/Composer' export const Composer = observer(function ComposerImpl({ winHeight, diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx index c0b71a1c8e..00233f66af 100644 --- a/src/view/shell/Composer.web.tsx +++ b/src/view/shell/Composer.web.tsx @@ -1,18 +1,16 @@ -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import React from 'react' import {StyleSheet, View} from 'react-native' import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated' +import {ComposePost} from '../com/composer/Composer' import {useComposerState} from 'state/shell/composer' +import {usePalette} from 'lib/hooks/usePalette' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' import { EmojiPicker, EmojiPickerState, } from 'view/com/composer/text-input/web/EmojiPicker.web' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' - -import {ComposePost} from '../com/composer/Composer' - const BOTTOM_BAR_HEIGHT = 61 export function Composer({}: {winHeight: number}) { diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 6bc9700ee1..2a37d1fe96 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -1,34 +1,3 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {StackActions, useNavigation} from '@react-navigation/native' -import {useAnalytics} from 'lib/analytics/analytics' -import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' -import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' -import {usePalette} from 'lib/hooks/usePalette' -import { - BellIcon, - BellIconSolid, - CogIcon, - HandIcon, - HashtagIcon, - HomeIcon, - HomeIconSolid, - ListIcon, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIcon, - UserIconSolid, -} from 'lib/icons' -import {getTabState, TabState} from 'lib/routes/helpers' -import {NavigationProp} from 'lib/routes/types' -import {pluralize} from 'lib/strings/helpers' -import {colors, s} from 'lib/styles' -import {useTheme} from 'lib/ThemeContext' -import {isWeb} from 'platform/detection' import React, {ComponentProps} from 'react' import { Linking, @@ -40,19 +9,49 @@ import { View, ViewStyle, } from 'react-native' -import {formatCountShortOnly} from 'view/com/util/numeric/format' -import {Text} from 'view/com/util/text/Text' +import {useNavigation, StackActions} from '@react-navigation/native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {s, colors} from 'lib/styles' +import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' +import { + HomeIcon, + HomeIconSolid, + BellIcon, + BellIconSolid, + UserIcon, + CogIcon, + MagnifyingGlassIcon2, + MagnifyingGlassIcon2Solid, + UserIconSolid, + HashtagIcon, + ListIcon, + HandIcon, +} from 'lib/icons' import {UserAvatar} from 'view/com/util/UserAvatar' +import {Text} from 'view/com/util/text/Text' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {useAnalytics} from 'lib/analytics/analytics' +import {pluralize} from 'lib/strings/helpers' +import {getTabState, TabState} from 'lib/routes/helpers' +import {NavigationProp} from 'lib/routes/types' +import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' +import {isWeb} from 'platform/detection' +import {formatCountShortOnly} from 'view/com/util/numeric/format' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {useSetDrawerOpen} from '#/state/shell' +import {useSession, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' +import {emitSoftReset} from '#/state/events' +import {NavSignupCard} from '#/view/shell/NavSignupCard' +import {TextLink} from '../com/util/Link' import {useTheme as useAlfTheme} from '#/alf' -import {emitSoftReset} from '#/state/events' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' -import {useProfileQuery} from '#/state/queries/profile' -import {SessionAccount, useSession} from '#/state/session' -import {useSetDrawerOpen} from '#/state/shell' -import {NavSignupCard} from '#/view/shell/NavSignupCard' - -import {TextLink} from '../com/util/Link' let DrawerProfileCard = ({ account, diff --git a/src/view/shell/NavSignupCard.tsx b/src/view/shell/NavSignupCard.tsx index 63d5ea2b0c..bae37e8380 100644 --- a/src/view/shell/NavSignupCard.tsx +++ b/src/view/shell/NavSignupCard.tsx @@ -1,14 +1,14 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {usePalette} from 'lib/hooks/usePalette' -import {s} from 'lib/styles' import React from 'react' import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {s} from 'lib/styles' +import {usePalette} from 'lib/hooks/usePalette' +import {Text} from '#/view/com/util/text/Text' +import {Button} from '#/view/com/util/forms/Button' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' -import {Button} from '#/view/com/util/forms/Button' -import {Text} from '#/view/com/util/text/Text' import {Logo} from '#/view/icons/Logo' let NavSignupCard = ({}: {}): React.ReactNode => { diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx index 70503f4c40..115faa2965 100644 --- a/src/view/shell/bottom-bar/BottomBar.tsx +++ b/src/view/shell/bottom-bar/BottomBar.tsx @@ -1,44 +1,42 @@ -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {BottomTabBarProps} from '@react-navigation/bottom-tabs' +import React, {ComponentProps} from 'react' +import {GestureResponderEvent, TouchableOpacity, View} from 'react-native' +import Animated from 'react-native-reanimated' import {StackActions} from '@react-navigation/native' +import {BottomTabBarProps} from '@react-navigation/bottom-tabs' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {Text} from 'view/com/util/text/Text' import {useAnalytics} from 'lib/analytics/analytics' -import {useDedupe} from 'lib/hooks/useDedupe' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' -import {usePalette} from 'lib/hooks/usePalette' +import {clamp} from 'lib/numbers' import { - BellIcon, - BellIconSolid, - HashtagIcon, HomeIcon, HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, + HashtagIcon, + BellIcon, + BellIconSolid, } from 'lib/icons' -import {clamp} from 'lib/numbers' +import {usePalette} from 'lib/hooks/usePalette' import {getTabState, TabState} from 'lib/routes/helpers' -import {s} from 'lib/styles' -import React, {ComponentProps} from 'react' -import {GestureResponderEvent, TouchableOpacity, View} from 'react-native' -import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {Text} from 'view/com/util/text/Text' +import {styles} from './BottomBarStyles' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' +import {useNavigationTabState} from 'lib/hooks/useNavigationTabState' import {UserAvatar} from 'view/com/util/UserAvatar' - -import {emitSoftReset} from '#/state/events' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' import {useModalControls} from '#/state/modals' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' -import {useProfileQuery} from '#/state/queries/profile' -import {useSession} from '#/state/session' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useShellLayout} from '#/state/shell/shell-layout' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' +import {emitSoftReset} from '#/state/events' +import {useSession} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {Button} from '#/view/com/util/forms/Button' +import {s} from 'lib/styles' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' - -import {styles} from './BottomBarStyles' +import {useDedupe} from 'lib/hooks/useDedupe' type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds' diff --git a/src/view/shell/bottom-bar/BottomBarStyles.tsx b/src/view/shell/bottom-bar/BottomBarStyles.tsx index 1e8347161a..f226406f5d 100644 --- a/src/view/shell/bottom-bar/BottomBarStyles.tsx +++ b/src/view/shell/bottom-bar/BottomBarStyles.tsx @@ -1,5 +1,5 @@ -import {colors} from 'lib/styles' import {StyleSheet} from 'react-native' +import {colors} from 'lib/styles' export const styles = StyleSheet.create({ bottomBar: { diff --git a/src/view/shell/bottom-bar/BottomBarWeb.tsx b/src/view/shell/bottom-bar/BottomBarWeb.tsx index 582c92b02e..b330c4b808 100644 --- a/src/view/shell/bottom-bar/BottomBarWeb.tsx +++ b/src/view/shell/bottom-bar/BottomBarWeb.tsx @@ -1,40 +1,38 @@ +import React from 'react' +import {usePalette} from 'lib/hooks/usePalette' +import {useNavigationState} from '@react-navigation/native' +import Animated from 'react-native-reanimated' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {View} from 'react-native' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useNavigationState} from '@react-navigation/native' -import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' -import {usePalette} from 'lib/hooks/usePalette' +import {getCurrentRoute, isTab} from 'lib/routes/helpers' +import {styles} from './BottomBarStyles' +import {clamp} from 'lib/numbers' import { BellIcon, BellIconSolid, - HashtagIcon, HomeIcon, HomeIconSolid, MagnifyingGlassIcon2, MagnifyingGlassIcon2Solid, + HashtagIcon, UserIcon, UserIconSolid, } from 'lib/icons' -import {clamp} from 'lib/numbers' -import {getCurrentRoute, isTab} from 'lib/routes/helpers' +import {Link} from 'view/com/util/Link' +import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams} from 'lib/routes/types' -import {s} from 'lib/styles' -import React from 'react' -import {View} from 'react-native' -import Animated from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {Link} from 'view/com/util/Link' - import {useSession} from '#/state/session' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {Button} from '#/view/com/util/forms/Button' import {Text} from '#/view/com/util/text/Text' +import {s} from 'lib/styles' import {Logo} from '#/view/icons/Logo' import {Logotype} from '#/view/icons/Logotype' -import {styles} from './BottomBarStyles' - export function BottomBarWeb() { const {_} = useLingui() const {hasSession, currentAccount} = useSession() diff --git a/src/view/shell/createNativeStackNavigatorWithAuth.tsx b/src/view/shell/createNativeStackNavigatorWithAuth.tsx index 968e149f63..938213c313 100644 --- a/src/view/shell/createNativeStackNavigatorWithAuth.tsx +++ b/src/view/shell/createNativeStackNavigatorWithAuth.tsx @@ -1,6 +1,11 @@ +import * as React from 'react' +import {View} from 'react-native' +import {PWI_ENABLED, NEW_ONBOARDING_ENABLED} from '#/lib/build-flags' + // Based on @react-navigation/native-stack/src/createNativeStackNavigator.ts // MIT License // Copyright (c) 2017 React Navigation Contributors + import { createNavigatorFactory, EventArg, @@ -16,28 +21,24 @@ import type { NativeStackNavigationEventMap, NativeStackNavigationOptions, } from '@react-navigation/native-stack' -import {NativeStackView} from '@react-navigation/native-stack' import type {NativeStackNavigatorProps} from '@react-navigation/native-stack/src/types' -import {isWeb} from 'platform/detection' -import * as React from 'react' -import {View} from 'react-native' +import {NativeStackView} from '@react-navigation/native-stack' -import {NEW_ONBOARDING_ENABLED, PWI_ENABLED} from '#/lib/build-flags' +import {BottomBarWeb} from './bottom-bar/BottomBarWeb' +import {DesktopLeftNav} from './desktop/LeftNav' +import {DesktopRightNav} from './desktop/RightNav' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {Deactivated} from '#/screens/Deactivated' -import {Onboarding as NewOnboarding} from '#/screens/Onboarding' -import {useSession} from '#/state/session' import {useOnboardingState} from '#/state/shell' import { useLoggedOutView, useLoggedOutViewControls, } from '#/state/shell/logged-out' - +import {useSession} from '#/state/session' +import {isWeb} from 'platform/detection' +import {Deactivated} from '#/screens/Deactivated' import {LoggedOut} from '../com/auth/LoggedOut' import {Onboarding} from '../com/auth/Onboarding' -import {BottomBarWeb} from './bottom-bar/BottomBarWeb' -import {DesktopLeftNav} from './desktop/LeftNav' -import {DesktopRightNav} from './desktop/RightNav' +import {Onboarding as NewOnboarding} from '#/screens/Onboarding' type NativeStackNavigationOptionsWithAuth = NativeStackNavigationOptions & { requireAuth?: boolean diff --git a/src/view/shell/desktop/Feeds.tsx b/src/view/shell/desktop/Feeds.tsx index 22e1f9e67d..f447490b36 100644 --- a/src/view/shell/desktop/Feeds.tsx +++ b/src/view/shell/desktop/Feeds.tsx @@ -1,17 +1,16 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useNavigation, useNavigationState} from '@react-navigation/native' -import {usePalette} from 'lib/hooks/usePalette' -import {getCurrentRoute} from 'lib/routes/helpers' -import {NavigationProp} from 'lib/routes/types' import React from 'react' -import {StyleSheet, View} from 'react-native' +import {View, StyleSheet} from 'react-native' +import {useNavigationState, useNavigation} from '@react-navigation/native' +import {usePalette} from 'lib/hooks/usePalette' import {TextLink} from 'view/com/util/Link' - -import {emitSoftReset} from '#/state/events' +import {getCurrentRoute} from 'lib/routes/helpers' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' import {usePinnedFeedsInfos} from '#/state/queries/feed' -import {FeedDescriptor} from '#/state/queries/post-feed' import {useSelectedFeed, useSetSelectedFeed} from '#/state/shell/selected-feed' +import {FeedDescriptor} from '#/state/queries/post-feed' +import {NavigationProp} from 'lib/routes/types' +import {emitSoftReset} from '#/state/events' export function DesktopFeeds() { const pal = usePalette('default') diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx index f3340b7a73..c56ba941ed 100644 --- a/src/view/shell/desktop/LeftNav.tsx +++ b/src/view/shell/desktop/LeftNav.tsx @@ -1,54 +1,52 @@ -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' +import React from 'react' +import {StyleSheet, TouchableOpacity, View} from 'react-native' +import {PressableWithHover} from 'view/com/util/PressableWithHover' import { useLinkProps, useNavigation, useNavigationState, } from '@react-navigation/native' +import { + FontAwesomeIcon, + FontAwesomeIconStyle, +} from '@fortawesome/react-native-fontawesome' +import {Text} from 'view/com/util/text/Text' +import {UserAvatar} from 'view/com/util/UserAvatar' +import {Link} from 'view/com/util/Link' +import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {s, colors} from 'lib/styles' import { + HomeIcon, + HomeIconSolid, + MagnifyingGlassIcon2, + MagnifyingGlassIcon2Solid, BellIcon, BellIconSolid, + UserIcon, + UserIconSolid, CogIcon, CogIconSolid, ComposeIcon2, - HandIcon, - HashtagIcon, - HomeIcon, - HomeIconSolid, ListIcon, - MagnifyingGlassIcon2, - MagnifyingGlassIcon2Solid, - UserIcon, - UserIconSolid, + HashtagIcon, + HandIcon, } from 'lib/icons' -import {getCurrentRoute, isStateAtTabRoot, isTab} from 'lib/routes/helpers' +import {getCurrentRoute, isTab, isStateAtTabRoot} from 'lib/routes/helpers' +import {NavigationProp, CommonNavigatorParams} from 'lib/routes/types' +import {router} from '../../../routes' import {makeProfileLink} from 'lib/routes/links' -import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types' -import {colors, s} from 'lib/styles' -import React from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' -import {Link} from 'view/com/util/Link' -import {LoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' -import {PressableWithHover} from 'view/com/util/PressableWithHover' -import {Text} from 'view/com/util/text/Text' -import {UserAvatar} from 'view/com/util/UserAvatar' - -import {isInvalidHandle} from '#/lib/strings/handles' -import {emitSoftReset} from '#/state/events' -import {useFetchHandle} from '#/state/queries/handle' -import {useUnreadNotifications} from '#/state/queries/notifications/unread' +import {useLingui} from '@lingui/react' +import {Trans, msg} from '@lingui/macro' import {useProfileQuery} from '#/state/queries/profile' import {useSession} from '#/state/session' +import {useUnreadNotifications} from '#/state/queries/notifications/unread' import {useComposerControls} from '#/state/shell/composer' +import {useFetchHandle} from '#/state/queries/handle' +import {emitSoftReset} from '#/state/events' import {NavSignupCard} from '#/view/shell/NavSignupCard' - -import {router} from '../../../routes' +import {isInvalidHandle} from '#/lib/strings/handles' function ProfileCard() { const {currentAccount} = useSession() diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index bfbb19f108..c1f4987248 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -1,18 +1,16 @@ -import {msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {s} from 'lib/styles' import React from 'react' import {StyleSheet, View} from 'react-native' -import {TextLink} from 'view/com/util/Link' -import {Text} from 'view/com/util/text/Text' - -import {useSession} from '#/state/session' - -import {DesktopFeeds} from './Feeds' +import {usePalette} from 'lib/hooks/usePalette' import {DesktopSearch} from './Search' +import {DesktopFeeds} from './Feeds' +import {Text} from 'view/com/util/text/Text' +import {TextLink} from 'view/com/util/Link' +import {FEEDBACK_FORM_URL, HELP_DESK_URL} from 'lib/constants' +import {s} from 'lib/styles' +import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {useSession} from '#/state/session' export function DesktopRightNav({routeName}: {routeName: string}) { const pal = usePalette('default') diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index 043b9ff3c9..4a94837338 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -1,33 +1,33 @@ +import React from 'react' +import { + ViewStyle, + TextInput, + View, + StyleSheet, + TouchableOpacity, + ActivityIndicator, +} from 'react-native' +import {useNavigation, StackActions} from '@react-navigation/native' import { AppBskyActorDefs, moderateProfile, ProfileModeration, } from '@atproto/api' -import {msg, Trans} from '@lingui/macro' +import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {StackActions, useNavigation} from '@react-navigation/native' + +import {s} from '#/lib/styles' +import {sanitizeDisplayName} from '#/lib/strings/display-names' +import {sanitizeHandle} from '#/lib/strings/handles' +import {makeProfileLink} from '#/lib/routes/links' +import {Link} from '#/view/com/util/Link' import {usePalette} from 'lib/hooks/usePalette' import {MagnifyingGlassIcon2} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' -import React from 'react' -import { - ActivityIndicator, - StyleSheet, - TextInput, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native' import {Text} from 'view/com/util/text/Text' - -import {makeProfileLink} from '#/lib/routes/links' -import {sanitizeDisplayName} from '#/lib/strings/display-names' -import {sanitizeHandle} from '#/lib/strings/handles' -import {s} from '#/lib/styles' +import {UserAvatar} from '#/view/com/util/UserAvatar' import {useActorAutocompleteFn} from '#/state/queries/actor-autocomplete' import {useModerationOpts} from '#/state/queries/preferences' -import {Link} from '#/view/com/util/Link' -import {UserAvatar} from '#/view/com/util/UserAvatar' export const MATCH_HANDLE = /@?([a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*(?:\.[a-zA-Z]{2,}))/ diff --git a/src/view/shell/index.tsx b/src/view/shell/index.tsx index b207543785..76a7f8fb3a 100644 --- a/src/view/shell/index.tsx +++ b/src/view/shell/index.tsx @@ -1,39 +1,37 @@ -import {useNavigationState} from '@react-navigation/native' -import {StatusBar} from 'expo-status-bar' -import {usePalette} from 'lib/hooks/usePalette' -import * as notifications from 'lib/notifications/notifications' -import {isStateAtTabRoot} from 'lib/routes/helpers' -import {useTheme} from 'lib/ThemeContext' -import {isAndroid} from 'platform/detection' import React from 'react' +import {StatusBar} from 'expo-status-bar' import { - BackHandler, DimensionValue, StyleSheet, useWindowDimensions, View, + BackHandler, } from 'react-native' -import {Drawer} from 'react-native-drawer-layout' -import Animated from 'react-native-reanimated' import {useSafeAreaInsets} from 'react-native-safe-area-context' -import {useDialogStateContext} from 'state/dialogs' -import {Lightbox} from 'view/com/lightbox/Lightbox' +import {Drawer} from 'react-native-drawer-layout' +import {useNavigationState} from '@react-navigation/native' import {ModalsContainer} from 'view/com/modals/Modal' +import {Lightbox} from 'view/com/lightbox/Lightbox' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' - -import {MutedWordsDialog} from '#/components/dialogs/MutedWords' -import {Outlet as PortalOutlet} from '#/components/Portal' -import {useSession} from '#/state/session' +import {DrawerContent} from './Drawer' +import {Composer} from './Composer' +import {useTheme} from 'lib/ThemeContext' +import {usePalette} from 'lib/hooks/usePalette' +import {RoutesContainer, TabsNavigator} from '../../Navigation' +import {isStateAtTabRoot} from 'lib/routes/helpers' import { useIsDrawerOpen, - useIsDrawerSwipeDisabled, useSetDrawerOpen, + useIsDrawerSwipeDisabled, } from '#/state/shell' +import {isAndroid} from 'platform/detection' +import {useSession} from '#/state/session' import {useCloseAnyActiveElement} from '#/state/util' - -import {RoutesContainer, TabsNavigator} from '../../Navigation' -import {Composer} from './Composer' -import {DrawerContent} from './Drawer' +import * as notifications from 'lib/notifications/notifications' +import {Outlet as PortalOutlet} from '#/components/Portal' +import {MutedWordsDialog} from '#/components/dialogs/MutedWords' +import {useDialogStateContext} from 'state/dialogs' +import Animated from 'react-native-reanimated' function ShellInner() { const isDrawerOpen = useIsDrawerOpen() diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index d5ac5b970b..71dccb8c48 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -1,24 +1,22 @@ -import {t} from '@lingui/macro' -import {useNavigation} from '@react-navigation/native' -import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {NavigationProp} from 'lib/routes/types' -import {colors, s} from 'lib/styles' import React, {useEffect} from 'react' -import {StyleSheet, TouchableOpacity, View} from 'react-native' - -import {MutedWordsDialog} from '#/components/dialogs/MutedWords' -import {Outlet as PortalOutlet} from '#/components/Portal' -import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' -import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' -import {useCloseAllActiveElements} from '#/state/util' - -import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' -import {FlatNavigator, RoutesContainer} from '../../Navigation' +import {View, StyleSheet, TouchableOpacity} from 'react-native' +import {ErrorBoundary} from '../com/util/ErrorBoundary' import {Lightbox} from '../com/lightbox/Lightbox' import {ModalsContainer} from '../com/modals/Modal' -import {ErrorBoundary} from '../com/util/ErrorBoundary' import {Composer} from './Composer.web' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {s, colors} from 'lib/styles' +import {RoutesContainer, FlatNavigator} from '../../Navigation' import {DrawerContent} from './Drawer' +import {useWebMediaQueries} from '../../lib/hooks/useWebMediaQueries' +import {useNavigation} from '@react-navigation/native' +import {NavigationProp} from 'lib/routes/types' +import {t} from '@lingui/macro' +import {useIsDrawerOpen, useSetDrawerOpen} from '#/state/shell' +import {useCloseAllActiveElements} from '#/state/util' +import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock' +import {Outlet as PortalOutlet} from '#/components/Portal' +import {MutedWordsDialog} from '#/components/dialogs/MutedWords' function ShellInner() { const isDrawerOpen = useIsDrawerOpen() From 70c76a76a0d0285c28fa456c3af7741ad7a727cb Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 14:50:25 +0000 Subject: [PATCH 04/60] add custom import order --- .eslintrc.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/.eslintrc.js b/.eslintrc.js index b26bee1baf..c1592b76a7 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -17,7 +17,29 @@ module.exports = { rules: { 'react/no-unescaped-entities': 0, 'react-native/no-inline-styles': 0, - 'simple-import-sort/imports': 'error', + 'simple-import-sort/imports': [ + 'error', + { + groups: [ + // Side effect imports. + ['^\\u0000'], + // Node.js builtins prefixed with `node:`. + ['^node:'], + // Packages. + // Things that start with a letter (or digit or underscore), or `@` followed by a letter. + // React/React Native priortized, followed by expo + [ + '^(react/(.*)$)|^(react$)|^(react-native(.*)$)', + '^(expo(.*)$)|^(expo$)', + '^@?\\w', + '^', + ], + // Relative imports. + // Anything that starts with a dot or a # + ['^#', '^\\.'], + ], + }, + ], 'simple-import-sort/exports': 'error', }, ignorePatterns: [ From 4d2efd84e437e0c93a66b678093012b5c064c725 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 15:49:24 +0000 Subject: [PATCH 05/60] sort relative imports and move unprefixed ones --- .eslintrc.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index c1592b76a7..a74bd79eae 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -28,15 +28,28 @@ module.exports = { // Packages. // Things that start with a letter (or digit or underscore), or `@` followed by a letter. // React/React Native priortized, followed by expo + // Followed by all packages excluding unprefixed relative ones [ - '^(react/(.*)$)|^(react$)|^(react-native(.*)$)', + '^(react\\/(.*)$)|^(react$)|^(react-native(.*)$)', '^(expo(.*)$)|^(expo$)', - '^@?\\w', - '^', + '^(?!(?:alf|components|lib|locale|logger|platform|screens|state|view)(?:$|\\/))@?\\w', ], // Relative imports. - // Anything that starts with a dot or a # - ['^#', '^\\.'], + // Anything that starts with a dot + // due to unprefixed relative imports being used, we whitelist + // the relative paths we use + // (?:$|\\/) matches end of string or / + [ + '^(?:#\\/)?(?:lib|state|logger|platform|locale)(?:$|\\/)', + '^(?:#\\/)?view(?:$|\\/)', + '^(?:#\\/)?screens(?:$|\\/)', + '^(?:#\\/)?alf(?:$|\\/)', + '^(?:#\\/)?components(?:$|\\/)', + '^#\\/', + '^\\.', + ], + // anything else - hopefully we don't have any of these + ['^'], ], }, ], From 41b10e3df548240f4deaab9812c882f3b4c9402c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 15:51:55 +0000 Subject: [PATCH 06/60] forgot to save comment whoops --- .eslintrc.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a74bd79eae..bade064475 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -35,9 +35,8 @@ module.exports = { '^(?!(?:alf|components|lib|locale|logger|platform|screens|state|view)(?:$|\\/))@?\\w', ], // Relative imports. - // Anything that starts with a dot - // due to unprefixed relative imports being used, we whitelist - // the relative paths we use + // Ideally, anything that starts with a dot or # + // due to unprefixed relative imports being used, we whitelist the relative paths we use // (?:$|\\/) matches end of string or / [ '^(?:#\\/)?(?:lib|state|logger|platform|locale)(?:$|\\/)', From f5b39f2755bdf62b79a7310e58e70fbcc79ac854 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 22:16:32 +0000 Subject: [PATCH 07/60] convert base login component and ChooseAccountForm --- src/alf/atoms.ts | 6 + src/screens/Login/ChooseAccountForm.tsx | 183 ++++++++++++++++++ src/screens/Login/index.tsx | 166 ++++++++++++++++ src/view/com/auth/LoggedOut.tsx | 16 +- src/view/com/auth/login/ChooseAccountForm.tsx | 158 --------------- src/view/com/auth/login/Login.tsx | 164 ---------------- 6 files changed, 363 insertions(+), 330 deletions(-) create mode 100644 src/screens/Login/ChooseAccountForm.tsx create mode 100644 src/screens/Login/index.tsx delete mode 100644 src/view/com/auth/login/ChooseAccountForm.tsx delete mode 100644 src/view/com/auth/login/Login.tsx diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 5088e3aaca..fef68ecaba 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -154,6 +154,12 @@ export const atoms = { align_end: { alignItems: 'flex-end', }, + align_baseline: { + alignItems: 'baseline', + }, + align_stretch: { + alignItems: 'stretch', + }, self_auto: { alignSelf: 'auto', }, diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx new file mode 100644 index 0000000000..99d1beb891 --- /dev/null +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -0,0 +1,183 @@ +import React from 'react' +import {ScrollView, TouchableOpacity, View} from 'react-native' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import flattenReactChildren from 'react-keyed-flatten-children' + +import {useAnalytics} from 'lib/analytics/analytics' +import {UserAvatar} from '../../view/com/util/UserAvatar' +import {colors} from 'lib/styles' +import {styles} from '../../view/com/auth/login/styles' +import {useSession, useSessionApi, SessionAccount} from '#/state/session' +import {useProfileQuery} from '#/state/queries/profile' +import {useLoggedOutViewControls} from '#/state/shell/logged-out' +import * as Toast from '#/view/com/util/Toast' +import {Button} from '#/components/Button' +import {atoms as a, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' + +function Group({children}: {children: React.ReactNode}) { + const t = useTheme() + return ( + + {flattenReactChildren(children).map((child, i) => { + return React.isValidElement(child) ? ( + + {i > 0 ? ( + + ) : null} + {React.cloneElement(child, { + // @ts-ignore + style: { + borderRadius: 0, + borderWidth: 0, + }, + })} + + ) : null + })} + + ) +} + +function AccountItem({ + account, + onSelect, + isCurrentAccount, +}: { + account: SessionAccount + onSelect: (account: SessionAccount) => void + isCurrentAccount: boolean +}) { + const t = useTheme() + const {_} = useLingui() + const {data: profile} = useProfileQuery({did: account.did}) + + const onPress = React.useCallback(() => { + onSelect(account) + }, [account, onSelect]) + + return ( + + + + + + + + {profile?.displayName || account.handle}{' '} + + {account.handle} + + {isCurrentAccount ? ( + + ) : ( + + )} + + + ) +} +export const ChooseAccountForm = ({ + onSelectAccount, + onPressBack, +}: { + onSelectAccount: (account?: SessionAccount) => void + onPressBack: () => void +}) => { + const {track, screen} = useAnalytics() + const {_} = useLingui() + const t = useTheme() + const {accounts, currentAccount} = useSession() + const {initSession} = useSessionApi() + const {setShowLoggedOut} = useLoggedOutViewControls() + + React.useEffect(() => { + screen('Choose Account') + }, [screen]) + + const onSelect = React.useCallback( + async (account: SessionAccount) => { + if (account.accessJwt) { + if (account.did === currentAccount?.did) { + setShowLoggedOut(false) + Toast.show(_(msg`Already signed in as @${account.handle}`)) + } else { + await initSession(account) + track('Sign In', {resumedSession: true}) + setTimeout(() => { + Toast.show(_(msg`Signed in as @${account.handle}`)) + }, 100) + } + } else { + onSelectAccount(account) + } + }, + [currentAccount, track, initSession, onSelectAccount, setShowLoggedOut, _], + ) + + return ( + + + Sign in as... + + + {accounts.map(account => ( + + ))} + onSelectAccount(undefined)} + accessibilityRole="button" + accessibilityLabel={_(msg`Login to account that is not listed`)} + accessibilityHint=""> + + + Other account + + + + + + + + + + + ) +} diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx new file mode 100644 index 0000000000..f2cfde550b --- /dev/null +++ b/src/screens/Login/index.tsx @@ -0,0 +1,166 @@ +import React from 'react' +import {useAnalytics} from '#/lib/analytics/analytics' +import {useLingui} from '@lingui/react' +import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' +import {SessionAccount, useSession} from '#/state/session' +import {DEFAULT_SERVICE} from '#/lib/constants' +import {useLoggedOutView} from '#/state/shell/logged-out' +import {useServiceQuery} from '#/state/queries/service' +import {msg} from '@lingui/macro' +import {logger} from '#/logger' +import {atoms as a} from '#/alf' +import {KeyboardAvoidingView} from 'react-native' +import {ChooseAccountForm} from './ChooseAccountForm' +import {ForgotPasswordForm} from '#/view/com/auth/login/ForgotPasswordForm' +import {SetNewPasswordForm} from '#/view/com/auth/login/SetNewPasswordForm' +import {PasswordUpdatedForm} from '#/view/com/auth/login/PasswordUpdatedForm' +import {LoginForm} from '#/view/com/auth/login/LoginForm' + +enum Forms { + Login, + ChooseAccount, + ForgotPassword, + SetNewPassword, + PasswordUpdated, +} + +export const Login = ({onPressBack}: {onPressBack: () => void}) => { + const {_} = useLingui() + + const {accounts} = useSession() + const {track} = useAnalytics() + const {requestedAccountSwitchTo} = useLoggedOutView() + const requestedAccount = accounts.find( + acc => acc.did === requestedAccountSwitchTo, + ) + + const [error, setError] = React.useState('') + const [serviceUrl, setServiceUrl] = React.useState( + requestedAccount?.service || DEFAULT_SERVICE, + ) + const [initialHandle, setInitialHandle] = React.useState( + requestedAccount?.handle || '', + ) + const [currentForm, setCurrentForm] = React.useState( + requestedAccount + ? Forms.Login + : accounts.length + ? Forms.ChooseAccount + : Forms.Login, + ) + + const { + data: serviceDescription, + error: serviceError, + refetch: refetchService, + } = useServiceQuery(serviceUrl) + + const onSelectAccount = (account?: SessionAccount) => { + if (account?.service) { + setServiceUrl(account.service) + } + setInitialHandle(account?.handle || '') + setCurrentForm(Forms.Login) + } + + const gotoForm = (form: Forms) => () => { + setError('') + setCurrentForm(form) + } + + React.useEffect(() => { + if (serviceError) { + setError( + _( + msg`Unable to contact your service. Please check your Internet connection.`, + ), + ) + logger.warn(`Failed to fetch service description for ${serviceUrl}`, { + error: String(serviceError), + }) + } else { + setError('') + } + }, [serviceError, serviceUrl, _]) + + const onPressRetryConnect = () => refetchService() + const onPressForgotPassword = () => { + track('Signin:PressedForgotPassword') + setCurrentForm(Forms.ForgotPassword) + } + + let content = null + let title = '' + let description = '' + + switch (currentForm) { + case Forms.Login: + title = _(msg`Sign in`) + description = _(msg`Enter your username and password`) + content = ( + + ) + break + case Forms.ChooseAccount: + title = _(msg`Sign in`) + description = _(msg`Select from an existing account`) + content = ( + + ) + break + case Forms.ForgotPassword: + title = _(msg`Forgot Password`) + description = _(msg`Let's get your password reset!`) + content = ( + + ) + break + case Forms.SetNewPassword: + title = _(msg`Forgot Password`) + description = _(msg`Let's get your password reset!`) + content = ( + + ) + break + case Forms.PasswordUpdated: + title = _(msg`Password updated`) + description = _(msg`You can now sign in with your new password.`) + content = + break + } + + return ( + + + {content} + + + ) +} diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index 603abbab2d..58604ec9ee 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -5,16 +5,16 @@ import {useLingui} from '@lingui/react' import {Trans, msg} from '@lingui/macro' import {useNavigation} from '@react-navigation/native' -import {isIOS, isNative} from 'platform/detection' -import {Login} from 'view/com/auth/login/Login' -import {CreateAccount} from 'view/com/auth/create/CreateAccount' -import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {useAnalytics} from 'lib/analytics/analytics' +import {isIOS, isNative} from '#/platform/detection' +import {Login} from '#/screens/Login' +import {CreateAccount} from '#/view/com/auth/create/CreateAccount' +import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' +import {s} from '#/lib/styles' +import {usePalette} from '#/lib/hooks/usePalette' +import {useAnalytics} from '#/lib/analytics/analytics' import {SplashScreen} from './SplashScreen' import {useSetMinimalShellMode} from '#/state/shell/minimal-mode' -import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import { useLoggedOutView, useLoggedOutViewControls, diff --git a/src/view/com/auth/login/ChooseAccountForm.tsx b/src/view/com/auth/login/ChooseAccountForm.tsx deleted file mode 100644 index 32cd8315d3..0000000000 --- a/src/view/com/auth/login/ChooseAccountForm.tsx +++ /dev/null @@ -1,158 +0,0 @@ -import React from 'react' -import {ScrollView, TouchableOpacity, View} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {UserAvatar} from '../../util/UserAvatar' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {styles} from './styles' -import {useSession, useSessionApi, SessionAccount} from '#/state/session' -import {useProfileQuery} from '#/state/queries/profile' -import {useLoggedOutViewControls} from '#/state/shell/logged-out' -import * as Toast from '#/view/com/util/Toast' - -function AccountItem({ - account, - onSelect, - isCurrentAccount, -}: { - account: SessionAccount - onSelect: (account: SessionAccount) => void - isCurrentAccount: boolean -}) { - const pal = usePalette('default') - const {_} = useLingui() - const {data: profile} = useProfileQuery({did: account.did}) - - const onPress = React.useCallback(() => { - onSelect(account) - }, [account, onSelect]) - - return ( - - - - - - - - {profile?.displayName || account.handle}{' '} - - - {account.handle} - - - {isCurrentAccount ? ( - - ) : ( - - )} - - - ) -} -export const ChooseAccountForm = ({ - onSelectAccount, - onPressBack, -}: { - onSelectAccount: (account?: SessionAccount) => void - onPressBack: () => void -}) => { - const {track, screen} = useAnalytics() - const pal = usePalette('default') - const {_} = useLingui() - const {accounts, currentAccount} = useSession() - const {initSession} = useSessionApi() - const {setShowLoggedOut} = useLoggedOutViewControls() - - React.useEffect(() => { - screen('Choose Account') - }, [screen]) - - const onSelect = React.useCallback( - async (account: SessionAccount) => { - if (account.accessJwt) { - if (account.did === currentAccount?.did) { - setShowLoggedOut(false) - Toast.show(_(msg`Already signed in as @${account.handle}`)) - } else { - await initSession(account) - track('Sign In', {resumedSession: true}) - setTimeout(() => { - Toast.show(_(msg`Signed in as @${account.handle}`)) - }, 100) - } - } else { - onSelectAccount(account) - } - }, - [currentAccount, track, initSession, onSelectAccount, setShowLoggedOut, _], - ) - - return ( - - - Sign in as... - - {accounts.map(account => ( - - ))} - onSelectAccount(undefined)} - accessibilityRole="button" - accessibilityLabel={_(msg`Login to account that is not listed`)} - accessibilityHint=""> - - - - Other account - - - - - - - - - Back - - - - - - ) -} diff --git a/src/view/com/auth/login/Login.tsx b/src/view/com/auth/login/Login.tsx deleted file mode 100644 index bc931ac04c..0000000000 --- a/src/view/com/auth/login/Login.tsx +++ /dev/null @@ -1,164 +0,0 @@ -import React, {useState, useEffect} from 'react' -import {KeyboardAvoidingView} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' -import {DEFAULT_SERVICE} from '#/lib/constants' -import {usePalette} from 'lib/hooks/usePalette' -import {logger} from '#/logger' -import {ChooseAccountForm} from './ChooseAccountForm' -import {LoginForm} from './LoginForm' -import {ForgotPasswordForm} from './ForgotPasswordForm' -import {SetNewPasswordForm} from './SetNewPasswordForm' -import {PasswordUpdatedForm} from './PasswordUpdatedForm' -import {useLingui} from '@lingui/react' -import {msg} from '@lingui/macro' -import {useSession, SessionAccount} from '#/state/session' -import {useServiceQuery} from '#/state/queries/service' -import {useLoggedOutView} from '#/state/shell/logged-out' - -enum Forms { - Login, - ChooseAccount, - ForgotPassword, - SetNewPassword, - PasswordUpdated, -} - -export const Login = ({onPressBack}: {onPressBack: () => void}) => { - const {_} = useLingui() - const pal = usePalette('default') - - const {accounts} = useSession() - const {track} = useAnalytics() - const {requestedAccountSwitchTo} = useLoggedOutView() - const requestedAccount = accounts.find( - a => a.did === requestedAccountSwitchTo, - ) - - const [error, setError] = useState('') - const [serviceUrl, setServiceUrl] = useState( - requestedAccount?.service || DEFAULT_SERVICE, - ) - const [initialHandle, setInitialHandle] = useState( - requestedAccount?.handle || '', - ) - const [currentForm, setCurrentForm] = useState( - requestedAccount - ? Forms.Login - : accounts.length - ? Forms.ChooseAccount - : Forms.Login, - ) - - const { - data: serviceDescription, - error: serviceError, - refetch: refetchService, - } = useServiceQuery(serviceUrl) - - const onSelectAccount = (account?: SessionAccount) => { - if (account?.service) { - setServiceUrl(account.service) - } - setInitialHandle(account?.handle || '') - setCurrentForm(Forms.Login) - } - - const gotoForm = (form: Forms) => () => { - setError('') - setCurrentForm(form) - } - - useEffect(() => { - if (serviceError) { - setError( - _( - msg`Unable to contact your service. Please check your Internet connection.`, - ), - ) - logger.warn(`Failed to fetch service description for ${serviceUrl}`, { - error: String(serviceError), - }) - } else { - setError('') - } - }, [serviceError, serviceUrl, _]) - - const onPressRetryConnect = () => refetchService() - const onPressForgotPassword = () => { - track('Signin:PressedForgotPassword') - setCurrentForm(Forms.ForgotPassword) - } - - return ( - - {currentForm === Forms.Login ? ( - - - - ) : undefined} - {currentForm === Forms.ChooseAccount ? ( - - - - ) : undefined} - {currentForm === Forms.ForgotPassword ? ( - - - - ) : undefined} - {currentForm === Forms.SetNewPassword ? ( - - - - ) : undefined} - {currentForm === Forms.PasswordUpdated ? ( - - - - ) : undefined} - - ) -} From 9f5289a1017856c303d7fefe28327b30eac3a909 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 23:34:01 +0000 Subject: [PATCH 08/60] alf the login form --- src/components/forms/TextField.tsx | 8 +- src/components/icons/Lock.tsx | 5 + src/components/icons/Pencil.tsx | 5 + src/screens/Login/ChooseAccountForm.tsx | 95 ++++---- .../login => screens/Login}/LoginForm.tsx | 204 +++++++++--------- src/screens/Login/index.tsx | 4 +- src/view/com/auth/server-input/index.tsx | 2 +- 7 files changed, 169 insertions(+), 154 deletions(-) create mode 100644 src/components/icons/Lock.tsx create mode 100644 src/components/icons/Pencil.tsx rename src/{view/com/auth/login => screens/Login}/LoginForm.tsx (61%) diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index b37f4bfae9..3cffe5b2b6 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -14,6 +14,7 @@ import {useTheme, atoms as a, web, android} from '#/alf' import {Text} from '#/components/Typography' import {useInteractionState} from '#/components/hooks/useInteractionState' import {Props as SVGIconProps} from '#/components/icons/common' +import {mergeRefs} from '#/lib/merge-refs' const Context = React.createContext<{ inputRef: React.RefObject | null @@ -128,6 +129,7 @@ export type InputProps = Omit & { value: string onChangeText: (value: string) => void isInvalid?: boolean + inputRef?: React.RefObject } export function createInput(Component: typeof TextInput) { @@ -137,6 +139,7 @@ export function createInput(Component: typeof TextInput) { value, onChangeText, isInvalid, + inputRef, ...rest }: InputProps) { const t = useTheme() @@ -161,19 +164,22 @@ export function createInput(Component: typeof TextInput) { ) } + const refs = mergeRefs([ctx.inputRef, inputRef!].filter(Boolean)) + return ( <> { screen('Choose Account') @@ -133,50 +134,54 @@ export const ChooseAccountForm = ({ return ( - - Sign in as... - - - {accounts.map(account => ( - - ))} - onSelectAccount(undefined)} - accessibilityRole="button" - accessibilityLabel={_(msg`Login to account that is not listed`)} - accessibilityHint=""> - - - Other account - - - - - - - - + + + Sign in as... + + + {accounts.map(account => ( + + ))} + onSelectAccount(undefined)} + accessibilityRole="button" + accessibilityLabel={_(msg`Login to account that is not listed`)} + accessibilityHint=""> + + + Other account + + + + + + + + + ) diff --git a/src/view/com/auth/login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx similarity index 61% rename from src/view/com/auth/login/LoginForm.tsx rename to src/screens/Login/LoginForm.tsx index fdba9f203f..8ac4fa3595 100644 --- a/src/view/com/auth/login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -6,28 +6,31 @@ import { TouchableOpacity, View, } from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' import {ComAtprotoServerDescribeServer} from '@atproto/api' +import {Trans, msg} from '@lingui/macro' + import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' import {s} from 'lib/styles' import {createFullHandle} from 'lib/strings/handles' import {toNiceDomain} from 'lib/strings/url-helpers' import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' import {useSessionApi} from '#/state/session' import {cleanError} from 'lib/strings/errors' import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {styles} from './styles' +import {styles} from '../../view/com/auth/login/styles' import {useLingui} from '@lingui/react' import {useDialogControl} from '#/components/Dialog' - -import {ServerInputDialog} from '../server-input' +import {ServerInputDialog} from '../../view/com/auth/server-input' +import {Button} from '#/components/Button' +import {isAndroid} from '#/platform/detection' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import * as TextField from '#/components/forms/TextField' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' +import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema @@ -40,7 +43,6 @@ export const LoginForm = ({ setServiceUrl, onPressRetryConnect, onPressBack, - onPressForgotPassword, }: { error: string serviceUrl: string @@ -53,8 +55,7 @@ export const LoginForm = ({ onPressForgotPassword: () => void }) => { const {track} = useAnalytics() - const pal = usePalette('default') - const theme = useTheme() + const t = useTheme() const [isProcessing, setIsProcessing] = useState(false) const [identifier, setIdentifier] = useState(initialHandle) const [password, setPassword] = useState('') @@ -62,6 +63,7 @@ export const LoginForm = ({ const {_} = useLingui() const {login} = useSessionApi() const serverInputControl = useDialogControl() + const {gtMobile} = useBreakpoints() const onPressSelectService = () => { serverInputControl.open() @@ -127,55 +129,54 @@ export const LoginForm = ({ const isReady = !!serviceDescription && !!identifier && !!password return ( - + - - Sign into - - - - - - - {toNiceDomain(serviceUrl)} - - - - - - + + + Hosting provider + + + + {toNiceDomain(serviceUrl)} + + + + - - Account - - - - - + + Account + + + + setIdentifier((str || '').toLowerCase().trim()) } editable={!isProcessing} - accessibilityLabel={_(msg`Username or email address`)} accessibilityHint={_( msg`Input the username or email address you used at signup`, )} /> - - - - + + + + + - Forgot - - + */} + {error ? ( - - - - - + + + {error} ) : undefined} - - - - Back - - + + {!serviceDescription && error ? ( - - - Retry - - + label={_(msg`Retry`)} + accessibilityHint={_(msg`Retries login`)} + variant="solid" + color="secondary" + size="small" + onPress={onPressRetryConnect}> + {_(msg`Retry`)} + ) : !serviceDescription ? ( <> - + Connecting... ) : isProcessing ? ( ) : isReady ? ( - - - Next - - + ) : undefined} diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index f2cfde550b..3bd2df60ba 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -1,4 +1,5 @@ import React from 'react' +import {KeyboardAvoidingView} from 'react-native' import {useAnalytics} from '#/lib/analytics/analytics' import {useLingui} from '@lingui/react' import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' @@ -9,12 +10,11 @@ import {useServiceQuery} from '#/state/queries/service' import {msg} from '@lingui/macro' import {logger} from '#/logger' import {atoms as a} from '#/alf' -import {KeyboardAvoidingView} from 'react-native' import {ChooseAccountForm} from './ChooseAccountForm' import {ForgotPasswordForm} from '#/view/com/auth/login/ForgotPasswordForm' import {SetNewPasswordForm} from '#/view/com/auth/login/SetNewPasswordForm' import {PasswordUpdatedForm} from '#/view/com/auth/login/PasswordUpdatedForm' -import {LoginForm} from '#/view/com/auth/login/LoginForm' +import {LoginForm} from '#/screens/Login/LoginForm' enum Forms { Login, diff --git a/src/view/com/auth/server-input/index.tsx b/src/view/com/auth/server-input/index.tsx index 32b5a3141a..81f4bdf937 100644 --- a/src/view/com/auth/server-input/index.tsx +++ b/src/view/com/auth/server-input/index.tsx @@ -67,7 +67,7 @@ export function ServerInputDialog({ return ( From a06f6ada4e3905df49fe297d8393bb70ebca31be Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 13 Mar 2024 23:47:01 +0000 Subject: [PATCH 09/60] experiment: animate between screens --- src/screens/Login/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index 3bd2df60ba..028a497d28 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -2,6 +2,8 @@ import React from 'react' import {KeyboardAvoidingView} from 'react-native' import {useAnalytics} from '#/lib/analytics/analytics' import {useLingui} from '@lingui/react' +import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated' + import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' import {SessionAccount, useSession} from '#/state/session' import {DEFAULT_SERVICE} from '#/lib/constants' @@ -159,7 +161,12 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { return ( - {content} + + {content} + ) From 8316f97e274504c3fc10dc22017ecbf958727c22 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Thu, 14 Mar 2024 18:25:39 +0000 Subject: [PATCH 10/60] fix collapsed input issue --- src/screens/Login/LoginForm.tsx | 309 ++++++++++++++++---------------- 1 file changed, 159 insertions(+), 150 deletions(-) diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index 8ac4fa3595..3089b38871 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -2,6 +2,7 @@ import React, {useState, useRef} from 'react' import { ActivityIndicator, Keyboard, + ScrollView, TextInput, TouchableOpacity, View, @@ -21,7 +22,7 @@ import {styles} from '../../view/com/auth/login/styles' import {useLingui} from '@lingui/react' import {useDialogControl} from '#/components/Dialog' import {ServerInputDialog} from '../../view/com/auth/server-input' -import {Button} from '#/components/Button' +import {Button, ButtonText} from '#/components/Button' import {isAndroid} from '#/platform/detection' import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Text} from '#/components/Typography' @@ -43,6 +44,7 @@ export const LoginForm = ({ setServiceUrl, onPressRetryConnect, onPressBack, + onPressForgotPassword, }: { error: string serviceUrl: string @@ -129,164 +131,171 @@ export const LoginForm = ({ const isReady = !!serviceDescription && !!identifier && !!password return ( - - + + + - - - Hosting provider - - - - {toNiceDomain(serviceUrl)} - - - - - - - - Account - - - - { - passwordInputRef.current?.focus() - }} - blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field - value={identifier} - onChangeText={str => - setIdentifier((str || '').toLowerCase().trim()) - } - editable={!isProcessing} - accessibilityHint={_( - msg`Input the username or email address you used at signup`, - )} - /> - - - - - - - {/* + + Hosting provider + + - - Forgot - - */} - - - {error ? ( - - - - {error} - + style={[ + a.w_full, + a.flex_row, + a.align_center, + a.rounded_sm, + a.px_md, + a.gap_xs, + {paddingVertical: isAndroid ? 14 : 9}, + t.atoms.bg_contrast_25, + ]} + onPress={onPressSelectService}> + + {toNiceDomain(serviceUrl)} + + + + - ) : undefined} - - - - {!serviceDescription && error ? ( + + + Account + + + + { + passwordInputRef.current?.focus() + }} + blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field + value={identifier} + onChangeText={str => + setIdentifier((str || '').toLowerCase().trim()) + } + editable={!isProcessing} + accessibilityHint={_( + msg`Input the username or email address you used at signup`, + )} + /> + + + + + + + + + Forgot? + + + + + {error ? ( + + + + {error} + + + ) : undefined} + - ) : !serviceDescription ? ( - <> + + {!serviceDescription && error ? ( + + ) : !serviceDescription ? ( + <> + + + Connecting... + + + ) : isProcessing ? ( - - Connecting... - - - ) : isProcessing ? ( - - ) : isReady ? ( - - ) : undefined} + ) : isReady ? ( + + ) : undefined} + - + ) } From a1fc95f30e8ff9f8903451b6f5d2daa318653167 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 13:49:13 +0000 Subject: [PATCH 11/60] convert password reset flow --- .../icons/ticket_stroke2_corner0_rounded.svg | 1 + src/alf/atoms.ts | 69 ++++ src/components/forms/HostingProvider.tsx | 69 ++++ src/components/icons/Ticket.tsx | 5 + src/screens/Login/ChooseAccountForm.tsx | 43 +-- src/screens/Login/ForgotPasswordForm.tsx | 183 +++++++++++ src/screens/Login/FormContainer.tsx | 52 +++ src/screens/Login/FormError.tsx | 34 ++ src/screens/Login/LoginForm.tsx | 297 ++++++++---------- src/screens/Login/PasswordUpdatedForm.tsx | 49 +++ src/screens/Login/SetNewPasswordForm.tsx | 189 +++++++++++ src/screens/Login/index.tsx | 6 +- .../com/auth/login/ForgotPasswordForm.tsx | 228 -------------- .../com/auth/login/PasswordUpdatedForm.tsx | 48 --- .../com/auth/login/SetNewPasswordForm.tsx | 211 ------------- src/view/com/auth/login/styles.ts | 118 ------- 16 files changed, 803 insertions(+), 799 deletions(-) create mode 100644 assets/icons/ticket_stroke2_corner0_rounded.svg create mode 100644 src/components/forms/HostingProvider.tsx create mode 100644 src/components/icons/Ticket.tsx create mode 100644 src/screens/Login/ForgotPasswordForm.tsx create mode 100644 src/screens/Login/FormContainer.tsx create mode 100644 src/screens/Login/FormError.tsx create mode 100644 src/screens/Login/PasswordUpdatedForm.tsx create mode 100644 src/screens/Login/SetNewPasswordForm.tsx delete mode 100644 src/view/com/auth/login/ForgotPasswordForm.tsx delete mode 100644 src/view/com/auth/login/PasswordUpdatedForm.tsx delete mode 100644 src/view/com/auth/login/SetNewPasswordForm.tsx delete mode 100644 src/view/com/auth/login/styles.ts diff --git a/assets/icons/ticket_stroke2_corner0_rounded.svg b/assets/icons/ticket_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..184addc8e8 --- /dev/null +++ b/assets/icons/ticket_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index fef68ecaba..33803b6fb0 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -300,6 +300,9 @@ export const atoms = { /* * Padding */ + p_0: { + padding: 0, + }, p_2xs: { padding: tokens.space._2xs, }, @@ -330,6 +333,10 @@ export const atoms = { p_5xl: { padding: tokens.space._5xl, }, + px_0: { + paddingLeft: 0, + paddingRight: 0, + }, px_2xs: { paddingLeft: tokens.space._2xs, paddingRight: tokens.space._2xs, @@ -370,6 +377,10 @@ export const atoms = { paddingLeft: tokens.space._5xl, paddingRight: tokens.space._5xl, }, + py_0: { + paddingTop: 0, + paddingBottom: 0, + }, py_2xs: { paddingTop: tokens.space._2xs, paddingBottom: tokens.space._2xs, @@ -410,6 +421,9 @@ export const atoms = { paddingTop: tokens.space._5xl, paddingBottom: tokens.space._5xl, }, + pt_0: { + paddingTop: 0, + }, pt_2xs: { paddingTop: tokens.space._2xs, }, @@ -440,6 +454,9 @@ export const atoms = { pt_5xl: { paddingTop: tokens.space._5xl, }, + pb_0: { + paddingBottom: 0, + }, pb_2xs: { paddingBottom: tokens.space._2xs, }, @@ -470,6 +487,9 @@ export const atoms = { pb_5xl: { paddingBottom: tokens.space._5xl, }, + pl_0: { + paddingLeft: 0, + }, pl_2xs: { paddingLeft: tokens.space._2xs, }, @@ -500,6 +520,9 @@ export const atoms = { pl_5xl: { paddingLeft: tokens.space._5xl, }, + pr_0: { + paddingRight: 0, + }, pr_2xs: { paddingRight: tokens.space._2xs, }, @@ -534,6 +557,9 @@ export const atoms = { /* * Margin */ + m_0: { + margin: 0, + }, m_2xs: { margin: tokens.space._2xs, }, @@ -564,6 +590,13 @@ export const atoms = { m_5xl: { margin: tokens.space._5xl, }, + m_auto: { + margin: 'auto', + }, + mx_0: { + marginLeft: 0, + marginRight: 0, + }, mx_2xs: { marginLeft: tokens.space._2xs, marginRight: tokens.space._2xs, @@ -604,6 +637,14 @@ export const atoms = { marginLeft: tokens.space._5xl, marginRight: tokens.space._5xl, }, + mx_auto: { + marginLeft: 'auto', + marginRight: 'auto', + }, + my_0: { + marginTop: 0, + marginBottom: 0, + }, my_2xs: { marginTop: tokens.space._2xs, marginBottom: tokens.space._2xs, @@ -644,6 +685,13 @@ export const atoms = { marginTop: tokens.space._5xl, marginBottom: tokens.space._5xl, }, + my_auto: { + marginTop: 'auto', + marginBottom: 'auto', + }, + mt_0: { + marginTop: 0, + }, mt_2xs: { marginTop: tokens.space._2xs, }, @@ -674,6 +722,12 @@ export const atoms = { mt_5xl: { marginTop: tokens.space._5xl, }, + mt_auto: { + marginTop: 'auto', + }, + mb_0: { + marginBottom: 0, + }, mb_2xs: { marginBottom: tokens.space._2xs, }, @@ -704,6 +758,12 @@ export const atoms = { mb_5xl: { marginBottom: tokens.space._5xl, }, + mb_auto: { + marginBottom: 'auto', + }, + ml_0: { + marginLeft: 0, + }, ml_2xs: { marginLeft: tokens.space._2xs, }, @@ -734,6 +794,12 @@ export const atoms = { ml_5xl: { marginLeft: tokens.space._5xl, }, + ml_auto: { + marginLeft: 'auto', + }, + mr_0: { + marginRight: 0, + }, mr_2xs: { marginRight: tokens.space._2xs, }, @@ -764,4 +830,7 @@ export const atoms = { mr_5xl: { marginRight: tokens.space._5xl, }, + mr_auto: { + marginRight: 'auto', + }, } as const diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx new file mode 100644 index 0000000000..df506b77c1 --- /dev/null +++ b/src/components/forms/HostingProvider.tsx @@ -0,0 +1,69 @@ +import React from 'react' +import {TouchableOpacity, View} from 'react-native' + +import {isAndroid} from '#/platform/detection' +import {atoms as a, useTheme} from '#/alf' +import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' +import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import * as TextField from './TextField' +import {useDialogControl} from '../Dialog' +import {Text} from '../Typography' +import {ServerInputDialog} from '#/view/com/auth/server-input' +import {toNiceDomain} from '#/lib/strings/url-helpers' + +export function HostingProvider({ + serviceUrl, + onSelectServiceUrl, + onOpenDialog, +}: { + serviceUrl: string + onSelectServiceUrl: (provider: string) => void + onOpenDialog?: () => void +}) { + const serverInputControl = useDialogControl() + const t = useTheme() + + const onPressSelectService = React.useCallback(() => { + serverInputControl.open() + if (onOpenDialog) { + onOpenDialog() + } + }, [onOpenDialog, serverInputControl]) + + return ( + <> + + + + {toNiceDomain(serviceUrl)} + + + + + + ) +} diff --git a/src/components/icons/Ticket.tsx b/src/components/icons/Ticket.tsx new file mode 100644 index 0000000000..0df6b81204 --- /dev/null +++ b/src/components/icons/Ticket.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12c0-1.296.704-2.426 1.75-3.032a.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', +}) diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index f5b3c2a861..7a3a4555b2 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {ScrollView, TouchableOpacity, View} from 'react-native' +import {TouchableOpacity, View} from 'react-native' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import flattenReactChildren from 'react-keyed-flatten-children' @@ -7,16 +7,17 @@ import flattenReactChildren from 'react-keyed-flatten-children' import {useAnalytics} from 'lib/analytics/analytics' import {UserAvatar} from '../../view/com/util/UserAvatar' import {colors} from 'lib/styles' -import {styles} from '../../view/com/auth/login/styles' import {useSession, useSessionApi, SessionAccount} from '#/state/session' import {useProfileQuery} from '#/state/queries/profile' import {useLoggedOutViewControls} from '#/state/shell/logged-out' import * as Toast from '#/view/com/util/Toast' import {Button} from '#/components/Button' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import * as TextField from '#/components/forms/TextField' +import {FormContainer} from './FormContainer' function Group({children}: {children: React.ReactNode}) { const t = useTheme() @@ -106,7 +107,6 @@ export const ChooseAccountForm = ({ const {accounts, currentAccount} = useSession() const {initSession} = useSessionApi() const {setShowLoggedOut} = useLoggedOutViewControls() - const {gtMobile} = useBreakpoints() React.useEffect(() => { screen('Choose Account') @@ -133,12 +133,13 @@ export const ChooseAccountForm = ({ ) return ( - - - + Select account}> + + Sign in as... - + {accounts.map(account => ( - - - - - + + + + + ) } diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx new file mode 100644 index 0000000000..fa674155ab --- /dev/null +++ b/src/screens/Login/ForgotPasswordForm.tsx @@ -0,0 +1,183 @@ +import React, {useState, useEffect} from 'react' +import {ActivityIndicator, Keyboard, View} from 'react-native' +import {ComAtprotoServerDescribeServer} from '@atproto/api' +import * as EmailValidator from 'email-validator' +import {BskyAgent} from '@atproto/api' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import * as TextField from '#/components/forms/TextField' +import {HostingProvider} from '#/components/forms/HostingProvider' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {atoms as a, useTheme} from '#/alf' +import {useAnalytics} from 'lib/analytics/analytics' +import {isNetworkError} from 'lib/strings/errors' +import {cleanError} from 'lib/strings/errors' +import {logger} from '#/logger' +import {Button, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {FormContainer} from './FormContainer' +import {FormError} from './FormError' + +type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema + +export const ForgotPasswordForm = ({ + error, + serviceUrl, + serviceDescription, + setError, + setServiceUrl, + onPressBack, + onEmailSent, +}: { + error: string + serviceUrl: string + serviceDescription: ServiceDescription | undefined + setError: (v: string) => void + setServiceUrl: (v: string) => void + onPressBack: () => void + onEmailSent: () => void +}) => { + const t = useTheme() + const [isProcessing, setIsProcessing] = useState(false) + const [email, setEmail] = useState('') + const {screen} = useAnalytics() + const {_} = useLingui() + + useEffect(() => { + screen('Signin:ForgotPassword') + }, [screen]) + + const onPressSelectService = React.useCallback(() => { + Keyboard.dismiss() + }, []) + + const onPressNext = async () => { + if (!EmailValidator.validate(email)) { + return setError(_(msg`Your email appears to be invalid.`)) + } + + setError('') + setIsProcessing(true) + + try { + const agent = new BskyAgent({service: serviceUrl}) + await agent.com.atproto.server.requestPasswordReset({email}) + onEmailSent() + } catch (e: any) { + const errMsg = e.toString() + logger.warn('Failed to request password reset', {error: e}) + setIsProcessing(false) + if (isNetworkError(e)) { + setError( + _( + msg`Unable to contact your service. Please check your Internet connection.`, + ), + ) + } else { + setError(cleanError(errMsg)) + } + } + } + + return ( + Reset password}> + + + Hosting provider + + + + + + Email address + + + + + + + + + + Enter the email you used to create your account. We'll send you a + "reset code" so you can set a new password. + + + + + + + + {!serviceDescription || isProcessing ? ( + + ) : ( + + )} + {!serviceDescription || isProcessing ? ( + + Processing... + + ) : undefined} + + + + + + ) +} diff --git a/src/screens/Login/FormContainer.tsx b/src/screens/Login/FormContainer.tsx new file mode 100644 index 0000000000..a08aa05b0f --- /dev/null +++ b/src/screens/Login/FormContainer.tsx @@ -0,0 +1,52 @@ +import React from 'react' +import { + ScrollView, + StyleSheet, + View, + type StyleProp, + type ViewStyle, +} from 'react-native' + +import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {Text} from '#/components/Typography' +import {isWeb} from '#/platform/detection' + +export function FormContainer({ + testID, + title, + children, + style, + contentContainerStyle, +}: { + testID?: string + title?: React.ReactNode + children: React.ReactNode + style?: StyleProp + contentContainerStyle?: StyleProp +}) { + const {gtMobile} = useBreakpoints() + const t = useTheme() + return ( + + + {title && !gtMobile && ( + + {title} + + )} + {children} + + + ) +} + +const styles = StyleSheet.create({ + maxHeight: { + // @ts-ignore web only -prf + maxHeight: isWeb ? '100vh' : undefined, + height: !isWeb ? '100%' : undefined, + }, +}) diff --git a/src/screens/Login/FormError.tsx b/src/screens/Login/FormError.tsx new file mode 100644 index 0000000000..3c6a8649d9 --- /dev/null +++ b/src/screens/Login/FormError.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import {StyleSheet, View} from 'react-native' + +import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' +import {Text} from '#/components/Typography' +import {atoms as a, useTheme} from '#/alf' +import {colors} from '#/lib/styles' + +export function FormError({error}: {error?: string}) { + const t = useTheme() + + if (!error) return null + + return ( + + + + {error} + + + ) +} + +const styles = StyleSheet.create({ + error: { + backgroundColor: colors.red4, + flexDirection: 'row', + alignItems: 'center', + marginBottom: 15, + borderRadius: 8, + paddingHorizontal: 8, + paddingVertical: 8, + }, +}) diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index 3089b38871..5801552811 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -2,36 +2,29 @@ import React, {useState, useRef} from 'react' import { ActivityIndicator, Keyboard, - ScrollView, TextInput, TouchableOpacity, View, } from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {useAnalytics} from 'lib/analytics/analytics' -import {s} from 'lib/styles' import {createFullHandle} from 'lib/strings/handles' -import {toNiceDomain} from 'lib/strings/url-helpers' import {isNetworkError} from 'lib/strings/errors' import {useSessionApi} from '#/state/session' import {cleanError} from 'lib/strings/errors' import {logger} from '#/logger' -import {styles} from '../../view/com/auth/login/styles' -import {useLingui} from '@lingui/react' -import {useDialogControl} from '#/components/Dialog' -import {ServerInputDialog} from '../../view/com/auth/server-input' import {Button, ButtonText} from '#/components/Button' -import {isAndroid} from '#/platform/detection' -import {atoms as a, useBreakpoints, useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' import * as TextField from '#/components/forms/TextField' import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' -import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' -import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' +import {HostingProvider} from '#/components/forms/HostingProvider' +import {FormContainer} from './FormContainer' +import {FormError} from './FormError' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema @@ -64,14 +57,11 @@ export const LoginForm = ({ const passwordInputRef = useRef(null) const {_} = useLingui() const {login} = useSessionApi() - const serverInputControl = useDialogControl() - const {gtMobile} = useBreakpoints() - const onPressSelectService = () => { - serverInputControl.open() + const onPressSelectService = React.useCallback(() => { Keyboard.dismiss() track('Signin:PressedSelectService') - } + }, [track]) const onPressNext = async () => { Keyboard.dismiss() @@ -131,171 +121,138 @@ export const LoginForm = ({ const isReady = !!serviceDescription && !!identifier && !!password return ( - - - Sign in}> + + + Hosting provider + + - - - - Hosting provider - + + + + Account + + + + { + passwordInputRef.current?.focus() + }} + blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field + value={identifier} + onChangeText={str => + setIdentifier((str || '').toLowerCase().trim()) + } + editable={!isProcessing} + accessibilityHint={_( + msg`Input the username or email address you used at signup`, + )} + /> + + + + + + - - {toNiceDomain(serviceUrl)} - - - + t.atoms.bg_contrast_100, + {marginLeft: 'auto', left: 6, padding: 6}, + a.z_10, + ]}> + + Forgot? + - - - - Account - - - - { - passwordInputRef.current?.focus() - }} - blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field - value={identifier} - onChangeText={str => - setIdentifier((str || '').toLowerCase().trim()) - } - editable={!isProcessing} - accessibilityHint={_( - msg`Input the username or email address you used at signup`, - )} - /> - - - - - - - - - Forgot? - - - - - {error ? ( - - - - {error} - - - ) : undefined} - + + + + + + + {!serviceDescription && error ? ( - - {!serviceDescription && error ? ( - - ) : !serviceDescription ? ( - <> - - - Connecting... - - - ) : isProcessing ? ( + ) : !serviceDescription ? ( + <> - ) : isReady ? ( - - ) : undefined} - + + Connecting... + + + ) : isProcessing ? ( + + ) : isReady ? ( + + ) : undefined} - + ) } diff --git a/src/screens/Login/PasswordUpdatedForm.tsx b/src/screens/Login/PasswordUpdatedForm.tsx new file mode 100644 index 0000000000..218cab5392 --- /dev/null +++ b/src/screens/Login/PasswordUpdatedForm.tsx @@ -0,0 +1,49 @@ +import React, {useEffect} from 'react' +import {View} from 'react-native' +import {useAnalytics} from 'lib/analytics/analytics' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FormContainer} from './FormContainer' +import {Button, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {atoms as a, useBreakpoints} from '#/alf' + +export const PasswordUpdatedForm = ({ + onPressNext, +}: { + onPressNext: () => void +}) => { + const {screen} = useAnalytics() + const {_} = useLingui() + const {gtMobile} = useBreakpoints() + + useEffect(() => { + screen('Signin:PasswordUpdatedForm') + }, [screen]) + + return ( + + + Password updated! + + + You can now sign in with your new password. + + + + + + ) +} diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx new file mode 100644 index 0000000000..2685ad5ee8 --- /dev/null +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -0,0 +1,189 @@ +import React, {useState, useEffect} from 'react' +import {ActivityIndicator, View} from 'react-native' +import {BskyAgent} from '@atproto/api' +import {useAnalytics} from 'lib/analytics/analytics' + +import {isNetworkError} from 'lib/strings/errors' +import {cleanError} from 'lib/strings/errors' +import {checkAndFormatResetCode} from 'lib/strings/password' +import {logger} from '#/logger' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {FormContainer} from './FormContainer' +import {Text} from '#/components/Typography' +import * as TextField from '#/components/forms/TextField' +import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' +import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' +import {Button, ButtonText} from '#/components/Button' +import {useTheme, atoms as a} from '#/alf' +import {FormError} from './FormError' + +export const SetNewPasswordForm = ({ + error, + serviceUrl, + setError, + onPressBack, + onPasswordSet, +}: { + error: string + serviceUrl: string + setError: (v: string) => void + onPressBack: () => void + onPasswordSet: () => void +}) => { + const {screen} = useAnalytics() + const {_} = useLingui() + const t = useTheme() + + useEffect(() => { + screen('Signin:SetNewPasswordForm') + }, [screen]) + + const [isProcessing, setIsProcessing] = useState(false) + const [resetCode, setResetCode] = useState('') + const [password, setPassword] = useState('') + + const onPressNext = async () => { + onPasswordSet() + if (Math.random() > 0) return + // Check that the code is correct. We do this again just incase the user enters the code after their pw and we + // don't get to call onBlur first + const formattedCode = checkAndFormatResetCode(resetCode) + // TODO Better password strength check + if (!formattedCode || !password) { + setError( + _( + msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, + ), + ) + return + } + + setError('') + setIsProcessing(true) + + try { + const agent = new BskyAgent({service: serviceUrl}) + await agent.com.atproto.server.resetPassword({ + token: formattedCode, + password, + }) + onPasswordSet() + } catch (e: any) { + const errMsg = e.toString() + logger.warn('Failed to set new password', {error: e}) + setIsProcessing(false) + if (isNetworkError(e)) { + setError( + 'Unable to contact your service. Please check your Internet connection.', + ) + } else { + setError(cleanError(errMsg)) + } + } + } + + const onBlur = () => { + const formattedCode = checkAndFormatResetCode(resetCode) + if (!formattedCode) { + setError( + _( + msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, + ), + ) + return + } + setResetCode(formattedCode) + } + + return ( + Set new password}> + + + You will receive an email with a "reset code." Enter that code here, + then enter your new password. + + + + + Reset code + + + setError('')} + onBlur={onBlur} + editable={!isProcessing} + accessibilityHint={_( + msg`Input code sent to your email for password reset`, + )} + /> + + + + + New password + + + + + + + + + + {isProcessing ? ( + + ) : ( + + )} + {isProcessing ? ( + + Updating... + + ) : undefined} + + + ) +} diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index 028a497d28..10edb3eb60 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -13,9 +13,9 @@ import {msg} from '@lingui/macro' import {logger} from '#/logger' import {atoms as a} from '#/alf' import {ChooseAccountForm} from './ChooseAccountForm' -import {ForgotPasswordForm} from '#/view/com/auth/login/ForgotPasswordForm' -import {SetNewPasswordForm} from '#/view/com/auth/login/SetNewPasswordForm' -import {PasswordUpdatedForm} from '#/view/com/auth/login/PasswordUpdatedForm' +import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm' +import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' +import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' import {LoginForm} from '#/screens/Login/LoginForm' enum Forms { diff --git a/src/view/com/auth/login/ForgotPasswordForm.tsx b/src/view/com/auth/login/ForgotPasswordForm.tsx deleted file mode 100644 index 322da2b8fd..0000000000 --- a/src/view/com/auth/login/ForgotPasswordForm.tsx +++ /dev/null @@ -1,228 +0,0 @@ -import React, {useState, useEffect} from 'react' -import { - ActivityIndicator, - Keyboard, - TextInput, - TouchableOpacity, - View, -} from 'react-native' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {ComAtprotoServerDescribeServer} from '@atproto/api' -import * as EmailValidator from 'email-validator' -import {BskyAgent} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {toNiceDomain} from 'lib/strings/url-helpers' -import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {cleanError} from 'lib/strings/errors' -import {logger} from '#/logger' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {styles} from './styles' -import {useDialogControl} from '#/components/Dialog' - -import {ServerInputDialog} from '../server-input' - -type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema - -export const ForgotPasswordForm = ({ - error, - serviceUrl, - serviceDescription, - setError, - setServiceUrl, - onPressBack, - onEmailSent, -}: { - error: string - serviceUrl: string - serviceDescription: ServiceDescription | undefined - setError: (v: string) => void - setServiceUrl: (v: string) => void - onPressBack: () => void - onEmailSent: () => void -}) => { - const pal = usePalette('default') - const theme = useTheme() - const [isProcessing, setIsProcessing] = useState(false) - const [email, setEmail] = useState('') - const {screen} = useAnalytics() - const {_} = useLingui() - const serverInputControl = useDialogControl() - - useEffect(() => { - screen('Signin:ForgotPassword') - }, [screen]) - - const onPressSelectService = React.useCallback(() => { - serverInputControl.open() - Keyboard.dismiss() - }, [serverInputControl]) - - const onPressNext = async () => { - if (!EmailValidator.validate(email)) { - return setError(_(msg`Your email appears to be invalid.`)) - } - - setError('') - setIsProcessing(true) - - try { - const agent = new BskyAgent({service: serviceUrl}) - await agent.com.atproto.server.requestPasswordReset({email}) - onEmailSent() - } catch (e: any) { - const errMsg = e.toString() - logger.warn('Failed to request password reset', {error: e}) - setIsProcessing(false) - if (isNetworkError(e)) { - setError( - _( - msg`Unable to contact your service. Please check your Internet connection.`, - ), - ) - } else { - setError(cleanError(errMsg)) - } - } - } - - return ( - <> - - - - Reset password - - - - Enter the email you used to create your account. We'll send you a - "reset code" so you can set a new password. - - - - - - - {toNiceDomain(serviceUrl)} - - - - - - - - - - - {error ? ( - - - - - - {error} - - - ) : undefined} - - - - Back - - - - {!serviceDescription || isProcessing ? ( - - ) : !email ? ( - - Next - - ) : ( - - - Next - - - )} - {!serviceDescription || isProcessing ? ( - - Processing... - - ) : undefined} - - - - - - Already have a code? - - - - - - ) -} diff --git a/src/view/com/auth/login/PasswordUpdatedForm.tsx b/src/view/com/auth/login/PasswordUpdatedForm.tsx deleted file mode 100644 index 71f750b141..0000000000 --- a/src/view/com/auth/login/PasswordUpdatedForm.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React, {useEffect} from 'react' -import {TouchableOpacity, View} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {styles} from './styles' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -export const PasswordUpdatedForm = ({ - onPressNext, -}: { - onPressNext: () => void -}) => { - const {screen} = useAnalytics() - const pal = usePalette('default') - const {_} = useLingui() - - useEffect(() => { - screen('Signin:PasswordUpdatedForm') - }, [screen]) - - return ( - <> - - - Password updated! - - - You can now sign in with your new password. - - - - - - Okay - - - - - - ) -} diff --git a/src/view/com/auth/login/SetNewPasswordForm.tsx b/src/view/com/auth/login/SetNewPasswordForm.tsx deleted file mode 100644 index 6d1584c86c..0000000000 --- a/src/view/com/auth/login/SetNewPasswordForm.tsx +++ /dev/null @@ -1,211 +0,0 @@ -import React, {useState, useEffect} from 'react' -import { - ActivityIndicator, - TextInput, - TouchableOpacity, - View, -} from 'react-native' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {BskyAgent} from '@atproto/api' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {s} from 'lib/styles' -import {isNetworkError} from 'lib/strings/errors' -import {usePalette} from 'lib/hooks/usePalette' -import {useTheme} from 'lib/ThemeContext' -import {cleanError} from 'lib/strings/errors' -import {checkAndFormatResetCode} from 'lib/strings/password' -import {logger} from '#/logger' -import {styles} from './styles' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -export const SetNewPasswordForm = ({ - error, - serviceUrl, - setError, - onPressBack, - onPasswordSet, -}: { - error: string - serviceUrl: string - setError: (v: string) => void - onPressBack: () => void - onPasswordSet: () => void -}) => { - const pal = usePalette('default') - const theme = useTheme() - const {screen} = useAnalytics() - const {_} = useLingui() - - useEffect(() => { - screen('Signin:SetNewPasswordForm') - }, [screen]) - - const [isProcessing, setIsProcessing] = useState(false) - const [resetCode, setResetCode] = useState('') - const [password, setPassword] = useState('') - - const onPressNext = async () => { - // Check that the code is correct. We do this again just incase the user enters the code after their pw and we - // don't get to call onBlur first - const formattedCode = checkAndFormatResetCode(resetCode) - // TODO Better password strength check - if (!formattedCode || !password) { - setError( - _( - msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, - ), - ) - return - } - - setError('') - setIsProcessing(true) - - try { - const agent = new BskyAgent({service: serviceUrl}) - await agent.com.atproto.server.resetPassword({ - token: formattedCode, - password, - }) - onPasswordSet() - } catch (e: any) { - const errMsg = e.toString() - logger.warn('Failed to set new password', {error: e}) - setIsProcessing(false) - if (isNetworkError(e)) { - setError( - 'Unable to contact your service. Please check your Internet connection.', - ) - } else { - setError(cleanError(errMsg)) - } - } - } - - const onBlur = () => { - const formattedCode = checkAndFormatResetCode(resetCode) - if (!formattedCode) { - setError( - _( - msg`You have entered an invalid code. It should look like XXXXX-XXXXX.`, - ), - ) - return - } - setResetCode(formattedCode) - } - - return ( - <> - - - Set new password - - - - You will receive an email with a "reset code." Enter that code here, - then enter your new password. - - - - - - setError('')} - onBlur={onBlur} - editable={!isProcessing} - accessible={true} - accessibilityLabel={_(msg`Reset code`)} - accessibilityHint={_( - msg`Input code sent to your email for password reset`, - )} - /> - - - - - - - {error ? ( - - - - - - {error} - - - ) : undefined} - - - - Back - - - - {isProcessing ? ( - - ) : !resetCode || !password ? ( - - Next - - ) : ( - - - Next - - - )} - {isProcessing ? ( - - Updating... - - ) : undefined} - - - - ) -} diff --git a/src/view/com/auth/login/styles.ts b/src/view/com/auth/login/styles.ts deleted file mode 100644 index 9dccc2803b..0000000000 --- a/src/view/com/auth/login/styles.ts +++ /dev/null @@ -1,118 +0,0 @@ -import {StyleSheet} from 'react-native' -import {colors} from 'lib/styles' -import {isWeb} from '#/platform/detection' - -export const styles = StyleSheet.create({ - screenTitle: { - marginBottom: 10, - marginHorizontal: 20, - }, - instructions: { - marginBottom: 20, - marginHorizontal: 20, - }, - group: { - borderWidth: 1, - borderRadius: 10, - marginBottom: 20, - marginHorizontal: 20, - }, - groupLabel: { - paddingHorizontal: 20, - paddingBottom: 5, - }, - groupContent: { - borderTopWidth: 1, - flexDirection: 'row', - alignItems: 'center', - }, - noTopBorder: { - borderTopWidth: 0, - }, - groupContentIcon: { - marginLeft: 10, - }, - account: { - borderTopWidth: 1, - paddingHorizontal: 20, - paddingVertical: 4, - }, - accountLast: { - borderBottomWidth: 1, - marginBottom: 20, - paddingVertical: 8, - }, - textInput: { - flex: 1, - width: '100%', - paddingVertical: 10, - paddingHorizontal: 12, - fontSize: 17, - letterSpacing: 0.25, - fontWeight: '400', - borderRadius: 10, - }, - textInputInnerBtn: { - flexDirection: 'row', - alignItems: 'center', - paddingVertical: 6, - paddingHorizontal: 8, - marginHorizontal: 6, - }, - textBtn: { - flexDirection: 'row', - flex: 1, - alignItems: 'center', - }, - textBtnLabel: { - flex: 1, - paddingVertical: 10, - paddingHorizontal: 12, - }, - textBtnFakeInnerBtn: { - flexDirection: 'row', - alignItems: 'center', - borderRadius: 6, - paddingVertical: 6, - paddingHorizontal: 8, - marginHorizontal: 6, - }, - accountText: { - flex: 1, - flexDirection: 'row', - alignItems: 'baseline', - paddingVertical: 10, - }, - accountTextOther: { - paddingLeft: 12, - }, - error: { - backgroundColor: colors.red4, - flexDirection: 'row', - alignItems: 'center', - marginTop: -5, - marginHorizontal: 20, - marginBottom: 15, - borderRadius: 8, - paddingHorizontal: 8, - paddingVertical: 8, - }, - errorIcon: { - borderWidth: 1, - borderColor: colors.white, - color: colors.white, - borderRadius: 30, - width: 16, - height: 16, - alignItems: 'center', - justifyContent: 'center', - marginRight: 5, - }, - dimmed: {opacity: 0.5}, - - maxHeight: { - // @ts-ignore web only -prf - maxHeight: isWeb ? '100vh' : undefined, - height: !isWeb ? '100%' : undefined, - }, -}) From 7d69570a44d38278233f17f74a2239edd8ed81de Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 13:53:57 +0000 Subject: [PATCH 12/60] run ticket through svgomg --- assets/icons/ticket_stroke2_corner0_rounded.svg | 2 +- src/components/icons/Ticket.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/icons/ticket_stroke2_corner0_rounded.svg b/assets/icons/ticket_stroke2_corner0_rounded.svg index 184addc8e8..a45a90ae5f 100644 --- a/assets/icons/ticket_stroke2_corner0_rounded.svg +++ b/assets/icons/ticket_stroke2_corner0_rounded.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/components/icons/Ticket.tsx b/src/components/icons/Ticket.tsx index 0df6b81204..1a8059c2a1 100644 --- a/src/components/icons/Ticket.tsx +++ b/src/components/icons/Ticket.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12c0-1.296.704-2.426 1.75-3.032a.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', + path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z', }) From e31fcb1a6d8820fdbd05b34aa169839214b7a240 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 13:54:23 +0000 Subject: [PATCH 13/60] reenable set new password button --- src/screens/Login/SetNewPasswordForm.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx index 2685ad5ee8..8fbd798c88 100644 --- a/src/screens/Login/SetNewPasswordForm.tsx +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -44,8 +44,6 @@ export const SetNewPasswordForm = ({ const [password, setPassword] = useState('') const onPressNext = async () => { - onPasswordSet() - if (Math.random() > 0) return // Check that the code is correct. We do this again just incase the user enters the code after their pw and we // don't get to call onBlur first const formattedCode = checkAndFormatResetCode(resetCode) From 0f67be362751f4f65bfca473691c27acb816e05c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 14:21:15 +0000 Subject: [PATCH 14/60] animate transitions on web only --- src/screens/Login/ScreenTransition.tsx | 10 ++++++++++ src/screens/Login/ScreenTransition.web.tsx | 1 + src/screens/Login/index.tsx | 9 ++------- 3 files changed, 13 insertions(+), 7 deletions(-) create mode 100644 src/screens/Login/ScreenTransition.tsx create mode 100644 src/screens/Login/ScreenTransition.web.tsx diff --git a/src/screens/Login/ScreenTransition.tsx b/src/screens/Login/ScreenTransition.tsx new file mode 100644 index 0000000000..ab0a223678 --- /dev/null +++ b/src/screens/Login/ScreenTransition.tsx @@ -0,0 +1,10 @@ +import React from 'react' +import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated' + +export function ScreenTransition({children}: {children: React.ReactNode}) { + return ( + + {children} + + ) +} diff --git a/src/screens/Login/ScreenTransition.web.tsx b/src/screens/Login/ScreenTransition.web.tsx new file mode 100644 index 0000000000..4583720aa8 --- /dev/null +++ b/src/screens/Login/ScreenTransition.web.tsx @@ -0,0 +1 @@ +export {Fragment as ScreenTransition} from 'react' diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index 10edb3eb60..da392569a7 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -2,7 +2,6 @@ import React from 'react' import {KeyboardAvoidingView} from 'react-native' import {useAnalytics} from '#/lib/analytics/analytics' import {useLingui} from '@lingui/react' -import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated' import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout' import {SessionAccount, useSession} from '#/state/session' @@ -17,6 +16,7 @@ import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm' import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm' import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm' import {LoginForm} from '#/screens/Login/LoginForm' +import {ScreenTransition} from './ScreenTransition' enum Forms { Login, @@ -161,12 +161,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { return ( - - {content} - + {content} ) From 273fe3e8e9f3ba1807d9f5163c02db9db58b0c22 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 14:21:38 +0000 Subject: [PATCH 15/60] scrollview persist taps, autoFocus code --- src/screens/Login/FormContainer.tsx | 3 ++- src/screens/Login/SetNewPasswordForm.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/screens/Login/FormContainer.tsx b/src/screens/Login/FormContainer.tsx index a08aa05b0f..cd17d06d7f 100644 --- a/src/screens/Login/FormContainer.tsx +++ b/src/screens/Login/FormContainer.tsx @@ -29,7 +29,8 @@ export function FormContainer({ return ( + style={[styles.maxHeight, contentContainerStyle]} + keyboardShouldPersistTaps="handled"> {title && !gtMobile && ( diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx index 8fbd798c88..0bfe722449 100644 --- a/src/screens/Login/SetNewPasswordForm.tsx +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -113,6 +113,7 @@ export const SetNewPasswordForm = ({ testID="resetCodeInput" label={_(msg`Looks like XXXXX-XXXXX`)} autoCapitalize="none" + autoFocus={true} autoCorrect={false} autoComplete="off" value={resetCode} From d2a11f3344149a299372f0a7dcd01de9f58ef9a1 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Fri, 15 Mar 2024 22:08:06 +0000 Subject: [PATCH 16/60] translate error --- src/screens/Login/SetNewPasswordForm.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx index 0bfe722449..be07324833 100644 --- a/src/screens/Login/SetNewPasswordForm.tsx +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -73,7 +73,9 @@ export const SetNewPasswordForm = ({ setIsProcessing(false) if (isNetworkError(e)) { setError( - 'Unable to contact your service. Please check your Internet connection.', + _( + msg`Unable to contact your service. Please check your Internet connection.`, + ), ) } else { setError(cleanError(errMsg)) From 08d12d9a3df1fa062ecc4c67a0a2f686eba4c7c3 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 15:28:06 +0000 Subject: [PATCH 17/60] move FormError to components/forms --- src/{screens/Login => components/forms}/FormError.tsx | 0 src/screens/Login/ForgotPasswordForm.tsx | 2 +- src/screens/Login/LoginForm.tsx | 2 +- src/screens/Login/SetNewPasswordForm.tsx | 2 +- 4 files changed, 3 insertions(+), 3 deletions(-) rename src/{screens/Login => components/forms}/FormError.tsx (100%) diff --git a/src/screens/Login/FormError.tsx b/src/components/forms/FormError.tsx similarity index 100% rename from src/screens/Login/FormError.tsx rename to src/components/forms/FormError.tsx diff --git a/src/screens/Login/ForgotPasswordForm.tsx b/src/screens/Login/ForgotPasswordForm.tsx index fa674155ab..ab9d025365 100644 --- a/src/screens/Login/ForgotPasswordForm.tsx +++ b/src/screens/Login/ForgotPasswordForm.tsx @@ -17,7 +17,7 @@ import {logger} from '#/logger' import {Button, ButtonText} from '#/components/Button' import {Text} from '#/components/Typography' import {FormContainer} from './FormContainer' -import {FormError} from './FormError' +import {FormError} from '#/components/forms/FormError' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index 5801552811..ee47aa41d3 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -24,7 +24,7 @@ import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' import {HostingProvider} from '#/components/forms/HostingProvider' import {FormContainer} from './FormContainer' -import {FormError} from './FormError' +import {FormError} from '#/components/forms/FormError' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema diff --git a/src/screens/Login/SetNewPasswordForm.tsx b/src/screens/Login/SetNewPasswordForm.tsx index be07324833..678440cf47 100644 --- a/src/screens/Login/SetNewPasswordForm.tsx +++ b/src/screens/Login/SetNewPasswordForm.tsx @@ -16,7 +16,7 @@ import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' import {Button, ButtonText} from '#/components/Button' import {useTheme, atoms as a} from '#/alf' -import {FormError} from './FormError' +import {FormError} from '#/components/forms/FormError' export const SetNewPasswordForm = ({ error, From 49a392bfb34b91ba971f32cb25e41b0491c45fc2 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 15:29:25 +0000 Subject: [PATCH 18/60] rm useless function wrap --- src/screens/Login/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index da392569a7..8dee061858 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -85,7 +85,6 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { } }, [serviceError, serviceUrl, _]) - const onPressRetryConnect = () => refetchService() const onPressForgotPassword = () => { track('Signin:PressedForgotPassword') setCurrentForm(Forms.ForgotPassword) @@ -109,7 +108,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { setServiceUrl={setServiceUrl} onPressBack={onPressBack} onPressForgotPassword={onPressForgotPassword} - onPressRetryConnect={onPressRetryConnect} + onPressRetryConnect={refetchService} /> ) break From b6903419a1112bae5397a398756e46a46afcf65f Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 15:31:00 +0000 Subject: [PATCH 19/60] simplify gotoForm --- src/screens/Login/index.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/screens/Login/index.tsx b/src/screens/Login/index.tsx index 8dee061858..f7a0e29e95 100644 --- a/src/screens/Login/index.tsx +++ b/src/screens/Login/index.tsx @@ -65,7 +65,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { setCurrentForm(Forms.Login) } - const gotoForm = (form: Forms) => () => { + const gotoForm = (form: Forms) => { setError('') setCurrentForm(form) } @@ -132,8 +132,8 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { serviceDescription={serviceDescription} setError={setError} setServiceUrl={setServiceUrl} - onPressBack={gotoForm(Forms.Login)} - onEmailSent={gotoForm(Forms.SetNewPassword)} + onPressBack={() => gotoForm(Forms.Login)} + onEmailSent={() => gotoForm(Forms.SetNewPassword)} /> ) break @@ -145,15 +145,17 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => { error={error} serviceUrl={serviceUrl} setError={setError} - onPressBack={gotoForm(Forms.ForgotPassword)} - onPasswordSet={gotoForm(Forms.PasswordUpdated)} + onPressBack={() => gotoForm(Forms.ForgotPassword)} + onPasswordSet={() => gotoForm(Forms.PasswordUpdated)} /> ) break case Forms.PasswordUpdated: title = _(msg`Password updated`) description = _(msg`You can now sign in with your new password.`) - content = + content = ( + gotoForm(Forms.Login)} /> + ) break } From bd8d8fb9f1454ad40b267e8a4a5717eddc0a46a6 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 16:13:15 +0000 Subject: [PATCH 20/60] change error to warn --- .eslintrc.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index bade064475..6165517f77 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,7 +18,7 @@ module.exports = { 'react/no-unescaped-entities': 0, 'react-native/no-inline-styles': 0, 'simple-import-sort/imports': [ - 'error', + 'warn', { groups: [ // Side effect imports. @@ -52,7 +52,7 @@ module.exports = { ], }, ], - 'simple-import-sort/exports': 'error', + 'simple-import-sort/exports': 'warn', }, ignorePatterns: [ '**/__mocks__/*.ts', From a1c4f19731878f7026d398d28e475bbeb7de824a Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 19 Mar 2024 12:47:46 -0700 Subject: [PATCH 21/60] Use ALF for signup flow, improve a11y of signup (#3151) * Use ALF for signup flow, improve a11y of signup * adjust padding * rm log * org imports * clarify allowance of hyphens Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> * fix a few accessibility items * Standardise date input across platforms (#3223) * make the date input consistent across platforms * integrate into new signup form * rm log * add transitions * show correct # of steps * use `FormError` * animate buttons * use `ScreenTransition` * fix android text overflow via flex -> flex_1 * change button color * (android) make date input the same height as others * fix deps * fix deps --------- Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com> Co-authored-by: Samuel Newman --- .../calendar_stroke2_corner0_rounded.svg | 1 + .../envelope_stroke2_corner0_rounded.svg | 1 + assets/icons/lock_stroke2_corner0_rounded.svg | 1 + .../icons/pencil_stroke2_corner0_rounded.svg | 1 + .../forms/DateField/index.android.tsx | 73 +--- .../forms/DateField/index.shared.tsx | 99 ++++++ src/components/forms/DateField/index.tsx | 59 +++- src/components/forms/DateField/index.web.tsx | 4 + src/components/forms/DateField/types.ts | 1 + src/components/forms/TextField.tsx | 6 +- src/components/icons/Calendar.tsx | 5 + src/components/icons/Envelope.tsx | 5 + src/lib/strings/handles.ts | 2 + .../Signup/StepCaptcha.tsx} | 84 ++--- src/screens/Signup/StepHandle.tsx | 134 ++++++++ src/screens/Signup/StepInfo.tsx | 145 ++++++++ src/screens/Signup/index.tsx | 225 ++++++++++++ src/screens/Signup/state.ts | 320 ++++++++++++++++++ src/view/com/auth/LoggedOut.tsx | 4 +- src/view/com/auth/create/CaptchaWebView.tsx | 14 +- src/view/com/auth/create/CreateAccount.tsx | 230 ------------- src/view/com/auth/create/Policies.tsx | 14 +- src/view/com/auth/create/Step1.tsx | 261 -------------- src/view/com/auth/create/Step2.tsx | 140 -------- src/view/com/auth/create/StepHeader.tsx | 44 --- 25 files changed, 1064 insertions(+), 809 deletions(-) create mode 100644 assets/icons/calendar_stroke2_corner0_rounded.svg create mode 100644 assets/icons/envelope_stroke2_corner0_rounded.svg create mode 100644 assets/icons/lock_stroke2_corner0_rounded.svg create mode 100644 assets/icons/pencil_stroke2_corner0_rounded.svg create mode 100644 src/components/forms/DateField/index.shared.tsx create mode 100644 src/components/icons/Calendar.tsx create mode 100644 src/components/icons/Envelope.tsx rename src/{view/com/auth/create/Step3.tsx => screens/Signup/StepCaptcha.tsx} (53%) create mode 100644 src/screens/Signup/StepHandle.tsx create mode 100644 src/screens/Signup/StepInfo.tsx create mode 100644 src/screens/Signup/index.tsx create mode 100644 src/screens/Signup/state.ts delete mode 100644 src/view/com/auth/create/CreateAccount.tsx delete mode 100644 src/view/com/auth/create/Step1.tsx delete mode 100644 src/view/com/auth/create/Step2.tsx delete mode 100644 src/view/com/auth/create/StepHeader.tsx diff --git a/assets/icons/calendar_stroke2_corner0_rounded.svg b/assets/icons/calendar_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..703f389dba --- /dev/null +++ b/assets/icons/calendar_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/envelope_stroke2_corner0_rounded.svg b/assets/icons/envelope_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..c3ab45980b --- /dev/null +++ b/assets/icons/envelope_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/lock_stroke2_corner0_rounded.svg b/assets/icons/lock_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..8b094ba5eb --- /dev/null +++ b/assets/icons/lock_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/pencil_stroke2_corner0_rounded.svg b/assets/icons/pencil_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..7341989894 --- /dev/null +++ b/assets/icons/pencil_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index 451810a5ea..35c2459f07 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/src/components/forms/DateField/index.android.tsx @@ -1,19 +1,12 @@ import React from 'react' -import {View, Pressable} from 'react-native' -import {useTheme, atoms} from '#/alf' -import {Text} from '#/components/Typography' -import {useInteractionState} from '#/components/hooks/useInteractionState' +import {useTheme} from '#/alf' import * as TextField from '#/components/forms/TextField' -import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' - import {DateFieldProps} from '#/components/forms/DateField/types' -import { - localizeDate, - toSimpleDateString, -} from '#/components/forms/DateField/utils' +import {toSimpleDateString} from '#/components/forms/DateField/utils' import DatePicker from 'react-native-date-picker' import {isAndroid} from 'platform/detection' +import {DateFieldButton} from './index.shared' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label @@ -24,18 +17,10 @@ export function DateField({ label, isInvalid, testID, + accessibilityHint, }: DateFieldProps) { const t = useTheme() const [open, setOpen] = React.useState(false) - const { - state: pressed, - onIn: onPressIn, - onOut: onPressOut, - } = useInteractionState() - const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() - - const {chromeFocus, chromeError, chromeErrorHover} = - TextField.useSharedInputStyles() const onChangeInternal = React.useCallback( (date: Date) => { @@ -47,45 +32,23 @@ export function DateField({ [onChangeDate, setOpen], ) + const onPress = React.useCallback(() => { + setOpen(true) + }, []) + const onCancel = React.useCallback(() => { setOpen(false) }, []) return ( - - setOpen(true)} - onPressIn={onPressIn} - onPressOut={onPressOut} - onFocus={onFocus} - onBlur={onBlur} - style={[ - { - paddingTop: 16, - paddingBottom: 16, - borderColor: 'transparent', - borderWidth: 2, - }, - atoms.flex_row, - atoms.flex_1, - atoms.w_full, - atoms.px_lg, - atoms.rounded_sm, - t.atoms.bg_contrast_50, - focused || pressed ? chromeFocus : {}, - isInvalid ? chromeError : {}, - isInvalid && (focused || pressed) ? chromeErrorHover : {}, - ]}> - - - - {localizeDate(value)} - - + <> + {open && ( )} - + ) } diff --git a/src/components/forms/DateField/index.shared.tsx b/src/components/forms/DateField/index.shared.tsx new file mode 100644 index 0000000000..29b3e8cb6d --- /dev/null +++ b/src/components/forms/DateField/index.shared.tsx @@ -0,0 +1,99 @@ +import React from 'react' +import {View, Pressable} from 'react-native' + +import {atoms as a, android, useTheme, web} from '#/alf' +import {Text} from '#/components/Typography' +import {useInteractionState} from '#/components/hooks/useInteractionState' +import * as TextField from '#/components/forms/TextField' +import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' +import {localizeDate} from './utils' + +// looks like a TextField.Input, but is just a button. It'll do something different on each platform on press +// iOS: open a dialog with an inline date picker +// Android: open the date picker modal + +export function DateFieldButton({ + label, + value, + onPress, + isInvalid, + accessibilityHint, +}: { + label: string + value: string + onPress: () => void + isInvalid?: boolean + accessibilityHint?: string +}) { + const t = useTheme() + + const { + state: pressed, + onIn: onPressIn, + onOut: onPressOut, + } = useInteractionState() + const { + state: hovered, + onIn: onHoverIn, + onOut: onHoverOut, + } = useInteractionState() + const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState() + + const {chromeHover, chromeFocus, chromeError, chromeErrorHover} = + TextField.useSharedInputStyles() + + return ( + + + + + {localizeDate(value)} + + + + ) +} diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index 49e47a01e3..22fa3a9f50 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,11 +1,16 @@ import React from 'react' import {View} from 'react-native' -import {useTheme, atoms} from '#/alf' +import {useTheme, atoms as a} from '#/alf' import * as TextField from '#/components/forms/TextField' import {toSimpleDateString} from '#/components/forms/DateField/utils' import {DateFieldProps} from '#/components/forms/DateField/types' import DatePicker from 'react-native-date-picker' +import * as Dialog from '#/components/Dialog' +import {DateFieldButton} from './index.shared' +import {Button, ButtonText} from '#/components/Button' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export * as utils from '#/components/forms/DateField/utils' export const Label = TextField.Label @@ -22,8 +27,12 @@ export function DateField({ onChangeDate, testID, label, + isInvalid, + accessibilityHint, }: DateFieldProps) { + const {_} = useLingui() const t = useTheme() + const control = Dialog.useDialogControl() const onChangeInternal = React.useCallback( (date: Date | undefined) => { @@ -36,17 +45,43 @@ export function DateField({ ) return ( - - + - + + + + + + + + + + + + ) } diff --git a/src/components/forms/DateField/index.web.tsx b/src/components/forms/DateField/index.web.tsx index 32f38a5d16..a3aa302f92 100644 --- a/src/components/forms/DateField/index.web.tsx +++ b/src/components/forms/DateField/index.web.tsx @@ -2,6 +2,7 @@ import React from 'react' import {TextInput, TextInputProps, StyleSheet} from 'react-native' // @ts-ignore import {unstable_createElement} from 'react-native-web' +import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays' import * as TextField from '#/components/forms/TextField' import {toSimpleDateString} from '#/components/forms/DateField/utils' @@ -37,6 +38,7 @@ export function DateField({ label, isInvalid, testID, + accessibilityHint, }: DateFieldProps) { const handleOnChange = React.useCallback( (e: any) => { @@ -52,12 +54,14 @@ export function DateField({ return ( + {}} testID={testID} + accessibilityHint={accessibilityHint} /> ) diff --git a/src/components/forms/DateField/types.ts b/src/components/forms/DateField/types.ts index 129f5672d4..5400cf9037 100644 --- a/src/components/forms/DateField/types.ts +++ b/src/components/forms/DateField/types.ts @@ -4,4 +4,5 @@ export type DateFieldProps = { label: string isInvalid?: boolean testID?: string + accessibilityHint?: string } diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index 3cffe5b2b6..376883c9dd 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -126,8 +126,8 @@ export function useSharedInputStyles() { export type InputProps = Omit & { label: string - value: string - onChangeText: (value: string) => void + value?: string + onChangeText?: (value: string) => void isInvalid?: boolean inputRef?: React.RefObject } @@ -277,7 +277,7 @@ export function Icon({icon: Comp}: {icon: React.ComponentType}) { = 3, totalLength: fullHandle.length <= 253, } diff --git a/src/view/com/auth/create/Step3.tsx b/src/screens/Signup/StepCaptcha.tsx similarity index 53% rename from src/view/com/auth/create/Step3.tsx rename to src/screens/Signup/StepCaptcha.tsx index 53fdfdde81..c4181e5523 100644 --- a/src/view/com/auth/create/Step3.tsx +++ b/src/screens/Signup/StepCaptcha.tsx @@ -1,57 +1,39 @@ import React from 'react' import {ActivityIndicator, StyleSheet, View} from 'react-native' -import { - CreateAccountState, - CreateAccountDispatch, - useSubmitCreateAccount, -} from './state' -import {StepHeader} from './StepHeader' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {isWeb} from 'platform/detection' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' - import {nanoid} from 'nanoid/non-secure' +import {useSignupContext, useSubmitSignup} from '#/screens/Signup/state' import {CaptchaWebView} from 'view/com/auth/create/CaptchaWebView' -import {useTheme} from 'lib/ThemeContext' import {createFullHandle} from 'lib/strings/handles' +import {isWeb} from 'platform/detection' +import {atoms as a, useTheme} from '#/alf' +import {FormError} from '#/components/forms/FormError' +import {ScreenTransition} from '#/screens/Login/ScreenTransition' const CAPTCHA_PATH = '/gate/signup' -export function Step3({ - uiState, - uiDispatch, -}: { - uiState: CreateAccountState - uiDispatch: CreateAccountDispatch -}) { +export function StepCaptcha() { const {_} = useLingui() const theme = useTheme() - const submit = useSubmitCreateAccount(uiState, uiDispatch) + const {state, dispatch} = useSignupContext() + const submit = useSubmitSignup({state, dispatch}) const [completed, setCompleted] = React.useState(false) const stateParam = React.useMemo(() => nanoid(15), []) const url = React.useMemo(() => { - const newUrl = new URL(uiState.serviceUrl) + const newUrl = new URL(state.serviceUrl) newUrl.pathname = CAPTCHA_PATH newUrl.searchParams.set( 'handle', - createFullHandle(uiState.handle, uiState.userDomain), + createFullHandle(state.handle, state.userDomain), ) newUrl.searchParams.set('state', stateParam) - newUrl.searchParams.set('colorScheme', theme.colorScheme) - - console.log(newUrl) + newUrl.searchParams.set('colorScheme', theme.name) return newUrl.href - }, [ - uiState.serviceUrl, - uiState.handle, - uiState.userDomain, - stateParam, - theme.colorScheme, - ]) + }, [state.serviceUrl, state.handle, state.userDomain, stateParam, theme.name]) const onSuccess = React.useCallback( (code: string) => { @@ -62,33 +44,31 @@ export function Step3({ ) const onError = React.useCallback(() => { - uiDispatch({ - type: 'set-error', + dispatch({ + type: 'setError', value: _(msg`Error receiving captcha response.`), }) - }, [_, uiDispatch]) + }, [_, dispatch]) return ( - - - - {!completed ? ( - - ) : ( - - )} + + + + {!completed ? ( + + ) : ( + + )} + + - - {uiState.error ? ( - - ) : undefined} - + ) } diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx new file mode 100644 index 0000000000..e0a79e8fb3 --- /dev/null +++ b/src/screens/Signup/StepHandle.tsx @@ -0,0 +1,134 @@ +import React from 'react' +import {View} from 'react-native' +import {useFocusEffect} from '@react-navigation/native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import * as TextField from '#/components/forms/TextField' +import {useSignupContext} from '#/screens/Signup/state' +import {Text} from '#/components/Typography' +import {atoms as a, useTheme} from '#/alf' +import { + createFullHandle, + IsValidHandle, + validateHandle, +} from 'lib/strings/handles' +import {ScreenTransition} from '#/screens/Login/ScreenTransition' + +export function StepHandle() { + const {_} = useLingui() + const t = useTheme() + const {state, dispatch} = useSignupContext() + + const [validCheck, setValidCheck] = React.useState({ + handleChars: false, + hyphenStartOrEnd: false, + frontLength: false, + totalLength: true, + overall: false, + }) + + useFocusEffect( + React.useCallback(() => { + console.log('run') + setValidCheck(validateHandle(state.handle, state.userDomain)) + }, [state.handle, state.userDomain]), + ) + + const onHandleChange = React.useCallback( + (value: string) => { + if (state.error) { + dispatch({type: 'setError', value: ''}) + } + + dispatch({ + type: 'setHandle', + value, + }) + }, + [dispatch, state.error], + ) + + return ( + + + + + + + + + + Your full handle will be{' '} + + @{createFullHandle(state.handle, state.userDomain)} + + + + + {state.error ? ( + + + {state.error} + + ) : undefined} + {validCheck.hyphenStartOrEnd ? ( + + + + Only contains letters, numbers, and hyphens + + + ) : ( + + + + Doesn't begin or end with a hyphen + + + )} + + + {!validCheck.totalLength ? ( + + No longer than 253 characters + + ) : ( + + At least 3 characters + + )} + + + + + ) +} + +function IsValidIcon({valid}: {valid: boolean}) { + const t = useTheme() + if (!valid) { + return + } + return +} diff --git a/src/screens/Signup/StepInfo.tsx b/src/screens/Signup/StepInfo.tsx new file mode 100644 index 0000000000..30a31884a3 --- /dev/null +++ b/src/screens/Signup/StepInfo.tsx @@ -0,0 +1,145 @@ +import React from 'react' +import {View} from 'react-native' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {atoms as a} from '#/alf' +import * as TextField from '#/components/forms/TextField' +import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '#/components/icons/Envelope' +import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' +import {Ticket_Stroke2_Corner0_Rounded as Ticket} from '#/components/icons/Ticket' +import {is13, is18, useSignupContext} from '#/screens/Signup/state' +import * as DateField from '#/components/forms/DateField' +import {logger} from '#/logger' +import {Loader} from '#/components/Loader' +import {Policies} from 'view/com/auth/create/Policies' +import {HostingProvider} from '#/components/forms/HostingProvider' +import {FormError} from '#/components/forms/FormError' +import {ScreenTransition} from '#/screens/Login/ScreenTransition' + +function sanitizeDate(date: Date): Date { + if (!date || date.toString() === 'Invalid Date') { + logger.error(`Create account: handled invalid date for birthDate`, { + hasDate: !!date, + }) + return new Date() + } + return date +} + +export function StepInfo() { + const {_} = useLingui() + const {state, dispatch} = useSignupContext() + + return ( + + + + + + Hosting provider + + + dispatch({type: 'setServiceUrl', value: v}) + } + /> + + {state.isLoading ? ( + + + + ) : state.serviceDescription ? ( + <> + {state.serviceDescription.inviteCodeRequired && ( + + + Invite code + + + + { + dispatch({ + type: 'setInviteCode', + value: value.trim(), + }) + }} + label={_(msg`Required for this provider`)} + defaultValue={state.inviteCode} + autoCapitalize="none" + autoComplete="email" + keyboardType="email-address" + /> + + + )} + + + Email + + + + { + dispatch({ + type: 'setEmail', + value: value.trim(), + }) + }} + label={_(msg`Enter your email address`)} + defaultValue={state.email} + autoCapitalize="none" + autoComplete="email" + keyboardType="email-address" + /> + + + + + Password + + + + { + dispatch({ + type: 'setPassword', + value, + }) + }} + label={_(msg`Choose your password`)} + defaultValue={state.password} + secureTextEntry + autoComplete="new-password" + /> + + + + + Your birth date + + { + dispatch({ + type: 'setDateOfBirth', + value: sanitizeDate(new Date(date)), + }) + }} + label={_(msg`Date of birth`)} + accessibilityHint={_(msg`Select your date of birth`)} + /> + + + + ) : undefined} + + + ) +} diff --git a/src/screens/Signup/index.tsx b/src/screens/Signup/index.tsx new file mode 100644 index 0000000000..b1acbbdf02 --- /dev/null +++ b/src/screens/Signup/index.tsx @@ -0,0 +1,225 @@ +import React from 'react' +import {ScrollView, View} from 'react-native' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' +import { + initialState, + reducer, + SignupContext, + SignupStep, + useSubmitSignup, +} from '#/screens/Signup/state' +import {StepInfo} from '#/screens/Signup/StepInfo' +import {StepHandle} from '#/screens/Signup/StepHandle' +import {StepCaptcha} from '#/screens/Signup/StepCaptcha' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' +import {FEEDBACK_FORM_URL} from 'lib/constants' +import {InlineLink} from '#/components/Link' +import {useServiceQuery} from 'state/queries/service' +import {getAgent} from 'state/session' +import {createFullHandle} from 'lib/strings/handles' +import {useAnalytics} from 'lib/analytics/analytics' + +export function Signup({onPressBack}: {onPressBack: () => void}) { + const {_} = useLingui() + const t = useTheme() + const {screen} = useAnalytics() + const [state, dispatch] = React.useReducer(reducer, initialState) + const submit = useSubmitSignup({state, dispatch}) + + const { + data: serviceInfo, + isFetching, + isError, + refetch, + } = useServiceQuery(state.serviceUrl) + + React.useEffect(() => { + screen('CreateAccount') + }, [screen]) + + React.useEffect(() => { + if (isFetching) { + dispatch({type: 'setIsLoading', value: true}) + } else if (!isFetching) { + dispatch({type: 'setIsLoading', value: false}) + } + }, [isFetching]) + + React.useEffect(() => { + if (isError) { + dispatch({type: 'setServiceDescription', value: undefined}) + dispatch({ + type: 'setError', + value: _( + msg`Unable to contact your service. Please check your Internet connection.`, + ), + }) + } else if (serviceInfo) { + dispatch({type: 'setServiceDescription', value: serviceInfo}) + dispatch({type: 'setError', value: ''}) + } + }, [_, serviceInfo, isError]) + + const onNextPress = React.useCallback(async () => { + if (state.activeStep === SignupStep.HANDLE) { + try { + dispatch({type: 'setIsLoading', value: true}) + + const res = await getAgent().resolveHandle({ + handle: createFullHandle(state.handle, state.userDomain), + }) + + if (res.data.did) { + dispatch({ + type: 'setError', + value: _(msg`That handle is already taken.`), + }) + return + } + } catch (e) { + // Don't have to handle + } finally { + dispatch({type: 'setIsLoading', value: false}) + } + } + + // phoneVerificationRequired is actually whether a captcha is required + if ( + state.activeStep === SignupStep.HANDLE && + !state.serviceDescription?.phoneVerificationRequired + ) { + submit() + return + } + + dispatch({type: 'next'}) + }, [ + _, + state.activeStep, + state.handle, + state.serviceDescription?.phoneVerificationRequired, + state.userDomain, + submit, + ]) + + const onBackPress = React.useCallback(() => { + if (state.activeStep !== SignupStep.INFO) { + dispatch({type: 'prev'}) + } else { + onPressBack() + } + }, [onPressBack, state.activeStep]) + + return ( + + + + + + + Step {state.activeStep + 1} of{' '} + {state.serviceDescription && + !state.serviceDescription.phoneVerificationRequired + ? '2' + : '3'} + + + {state.activeStep === SignupStep.INFO ? ( + Your account + ) : state.activeStep === SignupStep.HANDLE ? ( + Your user handle + ) : ( + Complete the challenge + )} + + + + {state.activeStep === SignupStep.INFO ? ( + + ) : state.activeStep === SignupStep.HANDLE ? ( + + ) : ( + + )} + + + + + {state.activeStep !== SignupStep.CAPTCHA && ( + <> + {isError ? ( + + ) : ( + + )} + + )} + + + + Having trouble?{' '} + + Contact support + + + + + + + + ) +} diff --git a/src/screens/Signup/state.ts b/src/screens/Signup/state.ts new file mode 100644 index 0000000000..1ae43612ed --- /dev/null +++ b/src/screens/Signup/state.ts @@ -0,0 +1,320 @@ +import React, {useCallback} from 'react' +import {LayoutAnimation} from 'react-native' +import * as EmailValidator from 'email-validator' +import {useLingui} from '@lingui/react' +import {msg} from '@lingui/macro' +import {cleanError} from 'lib/strings/errors' +import { + ComAtprotoServerCreateAccount, + ComAtprotoServerDescribeServer, +} from '@atproto/api' + +import {logger} from '#/logger' +import {DEFAULT_SERVICE, IS_PROD_SERVICE} from 'lib/constants' +import {createFullHandle, validateHandle} from 'lib/strings/handles' +import {getAge} from 'lib/strings/time' +import {useSessionApi} from 'state/session' +import { + DEFAULT_PROD_FEEDS, + usePreferencesSetBirthDateMutation, + useSetSaveFeedsMutation, +} from 'state/queries/preferences' +import {useOnboardingDispatch} from 'state/shell' + +export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema + +const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago + +export enum SignupStep { + INFO, + HANDLE, + CAPTCHA, +} + +export type SignupState = { + hasPrev: boolean + canNext: boolean + activeStep: SignupStep + + serviceUrl: string + serviceDescription?: ServiceDescription + userDomain: string + dateOfBirth: Date + email: string + password: string + inviteCode: string + handle: string + + error: string + isLoading: boolean +} + +export type SignupAction = + | {type: 'prev'} + | {type: 'next'} + | {type: 'finish'} + | {type: 'setStep'; value: SignupStep} + | {type: 'setServiceUrl'; value: string} + | {type: 'setServiceDescription'; value: ServiceDescription | undefined} + | {type: 'setEmail'; value: string} + | {type: 'setPassword'; value: string} + | {type: 'setDateOfBirth'; value: Date} + | {type: 'setInviteCode'; value: string} + | {type: 'setHandle'; value: string} + | {type: 'setVerificationCode'; value: string} + | {type: 'setError'; value: string} + | {type: 'setCanNext'; value: boolean} + | {type: 'setIsLoading'; value: boolean} + +export const initialState: SignupState = { + hasPrev: false, + canNext: false, + activeStep: SignupStep.INFO, + + serviceUrl: DEFAULT_SERVICE, + serviceDescription: undefined, + userDomain: '', + dateOfBirth: DEFAULT_DATE, + email: '', + password: '', + handle: '', + inviteCode: '', + + error: '', + isLoading: false, +} + +export function is13(date: Date) { + return getAge(date) >= 13 +} + +export function is18(date: Date) { + return getAge(date) >= 18 +} + +export function reducer(s: SignupState, a: SignupAction): SignupState { + let next = {...s} + + switch (a.type) { + case 'prev': { + if (s.activeStep !== SignupStep.INFO) { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + next.activeStep-- + next.error = '' + } + break + } + case 'next': { + if (s.activeStep !== SignupStep.CAPTCHA) { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + next.activeStep++ + next.error = '' + } + break + } + case 'setStep': { + next.activeStep = a.value + break + } + case 'setServiceUrl': { + next.serviceUrl = a.value + break + } + case 'setServiceDescription': { + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) + + next.serviceDescription = a.value + next.userDomain = a.value?.availableUserDomains[0] ?? '' + next.isLoading = false + break + } + + case 'setEmail': { + next.email = a.value + break + } + case 'setPassword': { + next.password = a.value + break + } + case 'setDateOfBirth': { + next.dateOfBirth = a.value + break + } + case 'setInviteCode': { + next.inviteCode = a.value + break + } + case 'setHandle': { + next.handle = a.value + break + } + case 'setCanNext': { + next.canNext = a.value + break + } + case 'setIsLoading': { + next.isLoading = a.value + break + } + case 'setError': { + next.error = a.value + break + } + } + + next.hasPrev = next.activeStep !== SignupStep.INFO + + switch (next.activeStep) { + case SignupStep.INFO: { + const isValidEmail = EmailValidator.validate(next.email) + next.canNext = + !!(next.email && next.password && next.dateOfBirth) && + (!next.serviceDescription?.inviteCodeRequired || !!next.inviteCode) && + is13(next.dateOfBirth) && + isValidEmail + break + } + case SignupStep.HANDLE: { + next.canNext = + !!next.handle && validateHandle(next.handle, next.userDomain).overall + break + } + } + + logger.debug('signup', next) + + if (s.activeStep !== next.activeStep) { + logger.debug('signup: step changed', {activeStep: next.activeStep}) + } + + return next +} + +interface IContext { + state: SignupState + dispatch: React.Dispatch +} +export const SignupContext = React.createContext({} as IContext) +export const useSignupContext = () => React.useContext(SignupContext) + +export function useSubmitSignup({ + state, + dispatch, +}: { + state: SignupState + dispatch: (action: SignupAction) => void +}) { + const {_} = useLingui() + const {createAccount} = useSessionApi() + const {mutate: setBirthDate} = usePreferencesSetBirthDateMutation() + const {mutate: setSavedFeeds} = useSetSaveFeedsMutation() + const onboardingDispatch = useOnboardingDispatch() + + return useCallback( + async (verificationCode?: string) => { + if (!state.email) { + dispatch({type: 'setStep', value: SignupStep.INFO}) + return dispatch({ + type: 'setError', + value: _(msg`Please enter your email.`), + }) + } + if (!EmailValidator.validate(state.email)) { + dispatch({type: 'setStep', value: SignupStep.INFO}) + return dispatch({ + type: 'setError', + value: _(msg`Your email appears to be invalid.`), + }) + } + if (!state.password) { + dispatch({type: 'setStep', value: SignupStep.INFO}) + return dispatch({ + type: 'setError', + value: _(msg`Please choose your password.`), + }) + } + if (!state.handle) { + dispatch({type: 'setStep', value: SignupStep.HANDLE}) + return dispatch({ + type: 'setError', + value: _(msg`Please choose your handle.`), + }) + } + if ( + state.serviceDescription?.phoneVerificationRequired && + !verificationCode + ) { + dispatch({type: 'setStep', value: SignupStep.CAPTCHA}) + return dispatch({ + type: 'setError', + value: _(msg`Please complete the verification captcha.`), + }) + } + dispatch({type: 'setError', value: ''}) + dispatch({type: 'setIsLoading', value: true}) + + try { + onboardingDispatch({type: 'start'}) // start now to avoid flashing the wrong view + await createAccount({ + service: state.serviceUrl, + email: state.email, + handle: createFullHandle(state.handle, state.userDomain), + password: state.password, + inviteCode: state.inviteCode.trim(), + verificationCode: verificationCode, + }) + setBirthDate({birthDate: state.dateOfBirth}) + if (IS_PROD_SERVICE(state.serviceUrl)) { + setSavedFeeds(DEFAULT_PROD_FEEDS) + } + } catch (e: any) { + onboardingDispatch({type: 'skip'}) // undo starting the onboard + let errMsg = e.toString() + if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) { + dispatch({ + type: 'setError', + value: _( + msg`Invite code not accepted. Check that you input it correctly and try again.`, + ), + }) + dispatch({type: 'setStep', value: SignupStep.INFO}) + return + } + + if ([400, 429].includes(e.status)) { + logger.warn('Failed to create account', {message: e}) + } else { + logger.error(`Failed to create account (${e.status} status)`, { + message: e, + }) + } + + const error = cleanError(errMsg) + const isHandleError = error.toLowerCase().includes('handle') + + dispatch({type: 'setIsLoading', value: false}) + dispatch({type: 'setError', value: cleanError(errMsg)}) + dispatch({type: 'setStep', value: isHandleError ? 2 : 1}) + } finally { + dispatch({type: 'setIsLoading', value: false}) + } + }, + [ + state.email, + state.password, + state.handle, + state.serviceDescription?.phoneVerificationRequired, + state.serviceUrl, + state.userDomain, + state.inviteCode, + state.dateOfBirth, + dispatch, + _, + onboardingDispatch, + createAccount, + setBirthDate, + setSavedFeeds, + ], + ) +} diff --git a/src/view/com/auth/LoggedOut.tsx b/src/view/com/auth/LoggedOut.tsx index 58604ec9ee..b22bbb7fe4 100644 --- a/src/view/com/auth/LoggedOut.tsx +++ b/src/view/com/auth/LoggedOut.tsx @@ -7,7 +7,7 @@ import {useNavigation} from '@react-navigation/native' import {isIOS, isNative} from '#/platform/detection' import {Login} from '#/screens/Login' -import {CreateAccount} from '#/view/com/auth/create/CreateAccount' +import {Signup} from '#/screens/Signup' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' import {s} from '#/lib/styles' import {usePalette} from '#/lib/hooks/usePalette' @@ -148,7 +148,7 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) { /> ) : undefined} {screenState === ScreenState.S_CreateAccount ? ( - setScreenState(ScreenState.S_LoginOrCreateAccount) } diff --git a/src/view/com/auth/create/CaptchaWebView.tsx b/src/view/com/auth/create/CaptchaWebView.tsx index b0de8b4a4b..06b605e4da 100644 --- a/src/view/com/auth/create/CaptchaWebView.tsx +++ b/src/view/com/auth/create/CaptchaWebView.tsx @@ -2,7 +2,7 @@ import React from 'react' import {WebView, WebViewNavigation} from 'react-native-webview' import {ShouldStartLoadRequest} from 'react-native-webview/lib/WebViewTypes' import {StyleSheet} from 'react-native' -import {CreateAccountState} from 'view/com/auth/create/state' +import {SignupState} from '#/screens/Signup/state' const ALLOWED_HOSTS = [ 'bsky.social', @@ -17,24 +17,24 @@ const ALLOWED_HOSTS = [ export function CaptchaWebView({ url, stateParam, - uiState, + state, onSuccess, onError, }: { url: string stateParam: string - uiState?: CreateAccountState + state?: SignupState onSuccess: (code: string) => void onError: () => void }) { const redirectHost = React.useMemo(() => { - if (!uiState?.serviceUrl) return 'bsky.app' + if (!state?.serviceUrl) return 'bsky.app' - return uiState?.serviceUrl && - new URL(uiState?.serviceUrl).host === 'staging.bsky.dev' + return state?.serviceUrl && + new URL(state?.serviceUrl).host === 'staging.bsky.dev' ? 'staging.bsky.app' : 'bsky.app' - }, [uiState?.serviceUrl]) + }, [state?.serviceUrl]) const wasSuccessful = React.useRef(false) diff --git a/src/view/com/auth/create/CreateAccount.tsx b/src/view/com/auth/create/CreateAccount.tsx deleted file mode 100644 index d193802fe0..0000000000 --- a/src/view/com/auth/create/CreateAccount.tsx +++ /dev/null @@ -1,230 +0,0 @@ -import React from 'react' -import { - ActivityIndicator, - ScrollView, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' -import {useAnalytics} from 'lib/analytics/analytics' -import {Text} from '../../util/text/Text' -import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {useCreateAccount, useSubmitCreateAccount} from './state' -import {useServiceQuery} from '#/state/queries/service' -import {FEEDBACK_FORM_URL, HITSLOP_10} from '#/lib/constants' - -import {Step1} from './Step1' -import {Step2} from './Step2' -import {Step3} from './Step3' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {TextLink} from '../../util/Link' -import {getAgent} from 'state/session' -import {createFullHandle, validateHandle} from 'lib/strings/handles' - -export function CreateAccount({onPressBack}: {onPressBack: () => void}) { - const {screen} = useAnalytics() - const pal = usePalette('default') - const {_} = useLingui() - const [uiState, uiDispatch] = useCreateAccount() - const {isTabletOrDesktop} = useWebMediaQueries() - const submit = useSubmitCreateAccount(uiState, uiDispatch) - - React.useEffect(() => { - screen('CreateAccount') - }, [screen]) - - // fetch service info - // = - - const { - data: serviceInfo, - isFetching: serviceInfoIsFetching, - error: serviceInfoError, - refetch: refetchServiceInfo, - } = useServiceQuery(uiState.serviceUrl) - - React.useEffect(() => { - if (serviceInfo) { - uiDispatch({type: 'set-service-description', value: serviceInfo}) - uiDispatch({type: 'set-error', value: ''}) - } else if (serviceInfoError) { - uiDispatch({ - type: 'set-error', - value: _( - msg`Unable to contact your service. Please check your Internet connection.`, - ), - }) - } - }, [_, uiDispatch, serviceInfo, serviceInfoError]) - - // event handlers - // = - - const onPressBackInner = React.useCallback(() => { - if (uiState.canBack) { - uiDispatch({type: 'back'}) - } else { - onPressBack() - } - }, [uiState, uiDispatch, onPressBack]) - - const onPressNext = React.useCallback(async () => { - if (!uiState.canNext) { - return - } - - if (uiState.step === 2) { - if (!validateHandle(uiState.handle, uiState.userDomain).overall) { - return - } - - uiDispatch({type: 'set-processing', value: true}) - try { - const res = await getAgent().resolveHandle({ - handle: createFullHandle(uiState.handle, uiState.userDomain), - }) - - if (res.data.did) { - uiDispatch({ - type: 'set-error', - value: _(msg`That handle is already taken.`), - }) - return - } - } catch (e) { - // Don't need to handle - } finally { - uiDispatch({type: 'set-processing', value: false}) - } - - if (!uiState.isCaptchaRequired) { - try { - await submit() - } catch { - // dont need to handle here - } - // We don't need to go to the next page if there wasn't a captcha required - return - } - } - - uiDispatch({type: 'next'}) - }, [ - uiState.canNext, - uiState.step, - uiState.isCaptchaRequired, - uiState.handle, - uiState.userDomain, - uiDispatch, - _, - submit, - ]) - - // rendering - // = - - return ( - - - - {uiState.step === 1 && ( - - )} - {uiState.step === 2 && ( - - )} - {uiState.step === 3 && ( - - )} - - - - - Back - - - - {uiState.canNext ? ( - - {uiState.isProcessing ? ( - - ) : ( - - Next - - )} - - ) : serviceInfoError ? ( - refetchServiceInfo()} - accessibilityRole="button" - accessibilityLabel={_(msg`Retry`)} - accessibilityHint="" - accessibilityLiveRegion="polite" - hitSlop={HITSLOP_10}> - - Retry - - - ) : serviceInfoIsFetching ? ( - <> - - - Connecting... - - - ) : undefined} - - - - - - Having trouble?{' '} - - - - - - - - - ) -} - -const styles = StyleSheet.create({ - stepContainer: { - paddingHorizontal: 20, - paddingVertical: 20, - }, -}) diff --git a/src/view/com/auth/create/Policies.tsx b/src/view/com/auth/create/Policies.tsx index 2c7d60818e..dc3c9c1749 100644 --- a/src/view/com/auth/create/Policies.tsx +++ b/src/view/com/auth/create/Policies.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {Linking, StyleSheet, View} from 'react-native' import { FontAwesomeIcon, FontAwesomeIconStyle, @@ -15,9 +15,11 @@ type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema export const Policies = ({ serviceDescription, needsGuardian, + under13, }: { serviceDescription: ServiceDescription needsGuardian: boolean + under13: boolean }) => { const pal = usePalette('default') if (!serviceDescription) { @@ -53,6 +55,7 @@ export const Policies = ({ href={tos} text="Terms of Service" style={[pal.link, s.underline]} + onPress={() => Linking.openURL(tos)} />, ) } @@ -63,6 +66,7 @@ export const Policies = ({ href={pp} text="Privacy Policy" style={[pal.link, s.underline]} + onPress={() => Linking.openURL(pp)} />, ) } @@ -81,12 +85,16 @@ export const Policies = ({ By creating an account you agree to the {els}. - {needsGuardian && ( + {under13 ? ( + + You must be 13 years of age or older to sign up. + + ) : needsGuardian ? ( If you are not yet an adult according to the laws of your country, your parent or legal guardian must read these Terms on your behalf. - )} + ) : undefined} ) } diff --git a/src/view/com/auth/create/Step1.tsx b/src/view/com/auth/create/Step1.tsx deleted file mode 100644 index 1f6852f8cc..0000000000 --- a/src/view/com/auth/create/Step1.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import React from 'react' -import { - ActivityIndicator, - Keyboard, - StyleSheet, - TouchableOpacity, - View, -} from 'react-native' -import {CreateAccountState, CreateAccountDispatch, is18} from './state' -import {Text} from 'view/com/util/text/Text' -import {DateInput} from 'view/com/util/forms/DateInput' -import {StepHeader} from './StepHeader' -import {s} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' -import {TextInput} from '../util/TextInput' -import {Policies} from './Policies' -import {ErrorMessage} from 'view/com/util/error/ErrorMessage' -import {isWeb} from 'platform/detection' -import {Trans, msg} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {logger} from '#/logger' -import { - FontAwesomeIcon, - FontAwesomeIconStyle, -} from '@fortawesome/react-native-fontawesome' -import {useDialogControl} from '#/components/Dialog' - -import {ServerInputDialog} from '../server-input' -import {toNiceDomain} from '#/lib/strings/url-helpers' - -function sanitizeDate(date: Date): Date { - if (!date || date.toString() === 'Invalid Date') { - logger.error(`Create account: handled invalid date for birthDate`, { - hasDate: !!date, - }) - return new Date() - } - return date -} - -export function Step1({ - uiState, - uiDispatch, -}: { - uiState: CreateAccountState - uiDispatch: CreateAccountDispatch -}) { - const pal = usePalette('default') - const {_} = useLingui() - const serverInputControl = useDialogControl() - - const onPressSelectService = React.useCallback(() => { - serverInputControl.open() - Keyboard.dismiss() - }, [serverInputControl]) - - const birthDate = React.useMemo(() => { - return sanitizeDate(uiState.birthDate) - }, [uiState.birthDate]) - - return ( - - uiDispatch({type: 'set-service-url', value: url})} - /> - - - {uiState.error ? ( - - ) : undefined} - - - - Hosting provider - - - - - - - {toNiceDomain(uiState.serviceUrl)} - - - - - - - - - - {!uiState.serviceDescription ? ( - - ) : ( - <> - {uiState.isInviteCodeRequired && ( - - - Invite code - - uiDispatch({type: 'set-invite-code', value})} - accessibilityLabel={_(msg`Invite code`)} - accessibilityHint={_(msg`Input invite code to proceed`)} - autoCapitalize="none" - autoComplete="off" - autoCorrect={false} - autoFocus={true} - /> - - )} - - {!uiState.isInviteCodeRequired || uiState.inviteCode ? ( - <> - - - Email address - - uiDispatch({type: 'set-email', value})} - accessibilityLabel={_(msg`Email`)} - accessibilityHint={_(msg`Input email for Bluesky account`)} - accessibilityLabelledBy="email" - autoCapitalize="none" - autoComplete="email" - autoCorrect={false} - autoFocus={!uiState.isInviteCodeRequired} - /> - - - - - Password - - uiDispatch({type: 'set-password', value})} - accessibilityLabel={_(msg`Password`)} - accessibilityHint={_(msg`Set password`)} - accessibilityLabelledBy="password" - autoCapitalize="none" - autoComplete="new-password" - autoCorrect={false} - /> - - - - - Your birth date - - - uiDispatch({type: 'set-birth-date', value}) - } - buttonType="default-light" - buttonStyle={[pal.border, styles.dateInputButton]} - buttonLabelType="lg" - accessibilityLabel={_(msg`Birthday`)} - accessibilityHint={_(msg`Enter your birth date`)} - accessibilityLabelledBy="birthDate" - /> - - - {uiState.serviceDescription && ( - - )} - - ) : undefined} - - )} - - ) -} - -const styles = StyleSheet.create({ - error: { - borderRadius: 6, - marginBottom: 10, - }, - dateInputButton: { - borderWidth: 1, - borderRadius: 6, - paddingVertical: 14, - }, - // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832. - touchable: { - ...(isWeb && {cursor: 'pointer'}), - }, -}) diff --git a/src/view/com/auth/create/Step2.tsx b/src/view/com/auth/create/Step2.tsx deleted file mode 100644 index 5c262977f1..0000000000 --- a/src/view/com/auth/create/Step2.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {CreateAccountState, CreateAccountDispatch} from './state' -import {Text} from 'view/com/util/text/Text' -import {StepHeader} from './StepHeader' -import {s} from 'lib/styles' -import {TextInput} from '../util/TextInput' -import { - createFullHandle, - IsValidHandle, - validateHandle, -} from 'lib/strings/handles' -import {usePalette} from 'lib/hooks/usePalette' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' -import {atoms as a, useTheme} from '#/alf' -import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' -import {TimesLarge_Stroke2_Corner0_Rounded as Times} from '#/components/icons/Times' -import {useFocusEffect} from '@react-navigation/native' - -/** STEP 3: Your user handle - * @field User handle - */ -export function Step2({ - uiState, - uiDispatch, -}: { - uiState: CreateAccountState - uiDispatch: CreateAccountDispatch -}) { - const pal = usePalette('default') - const {_} = useLingui() - const t = useTheme() - - const [validCheck, setValidCheck] = React.useState({ - handleChars: false, - frontLength: false, - totalLength: true, - overall: false, - }) - - useFocusEffect( - React.useCallback(() => { - setValidCheck(validateHandle(uiState.handle, uiState.userDomain)) - - // Disabling this, because we only want to run this when we focus the screen - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []), - ) - - const onHandleChange = React.useCallback( - (value: string) => { - if (uiState.error) { - uiDispatch({type: 'set-error', value: ''}) - } - - setValidCheck(validateHandle(value, uiState.userDomain)) - uiDispatch({type: 'set-handle', value}) - }, - [uiDispatch, uiState.error, uiState.userDomain], - ) - - return ( - - - - - - - Your full handle will be{' '} - - @{createFullHandle(uiState.handle, uiState.userDomain)} - - - - - {uiState.error ? ( - - - - {uiState.error} - - - ) : undefined} - - - - May only contain letters and numbers - - - - - {!validCheck.totalLength ? ( - - May not be longer than 253 characters - - ) : ( - - Must be at least 3 characters - - )} - - - - - ) -} - -function IsValidIcon({valid}: {valid: boolean}) { - const t = useTheme() - - if (!valid) { - return - } - - return -} diff --git a/src/view/com/auth/create/StepHeader.tsx b/src/view/com/auth/create/StepHeader.tsx deleted file mode 100644 index a98b392d8d..0000000000 --- a/src/view/com/auth/create/StepHeader.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {Text} from 'view/com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {Trans} from '@lingui/macro' -import {CreateAccountState} from './state' - -export function StepHeader({ - uiState, - title, - children, -}: React.PropsWithChildren<{uiState: CreateAccountState; title: string}>) { - const pal = usePalette('default') - const numSteps = 3 - return ( - - - - {uiState.step === 3 ? ( - Last step! - ) : ( - - Step {uiState.step} of {numSteps} - - )} - - - - {title} - - - {children} - - ) -} - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: 20, - }, -}) From 10943b4ff469ab540a7f28647688a3fd3001d5b4 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 19:52:27 +0000 Subject: [PATCH 22/60] fix merge issue (double hook) --- src/components/Lists.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Lists.tsx b/src/components/Lists.tsx index 8e4a58007c..d3e0720286 100644 --- a/src/components/Lists.tsx +++ b/src/components/Lists.tsx @@ -150,7 +150,6 @@ export function ListMaybePlaceholder({ const t = useTheme() const {_} = useLingui() const {gtMobile, gtTablet} = useBreakpoints() - const {_} = useLingui() if (!isLoading && isError) { return ( From b226f41560f2e78d9148ec6e034fb0c00e25422a Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 20:56:13 +0000 Subject: [PATCH 23/60] use in-button spinner instead of activity indicator --- src/screens/Login/LoginForm.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index ee47aa41d3..eddcc96780 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -16,7 +16,7 @@ import {isNetworkError} from 'lib/strings/errors' import {useSessionApi} from '#/state/session' import {cleanError} from 'lib/strings/errors' import {logger} from '#/logger' -import {Button, ButtonText} from '#/components/Button' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {atoms as a, useTheme} from '#/alf' import {Text} from '#/components/Typography' import * as TextField from '#/components/forms/TextField' @@ -25,6 +25,7 @@ import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock' import {HostingProvider} from '#/components/forms/HostingProvider' import {FormContainer} from './FormContainer' import {FormError} from '#/components/forms/FormError' +import {Loader} from '#/components/Loader' type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema @@ -64,6 +65,7 @@ export const LoginForm = ({ }, [track]) const onPressNext = async () => { + if (isProcessing) return Keyboard.dismiss() setError('') setIsProcessing(true) @@ -237,8 +239,6 @@ export const LoginForm = ({ Connecting... - ) : isProcessing ? ( - ) : isReady ? ( ) : undefined} From 8b5279ce15820b48b3557e49904bb736ca53e4d3 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:10:31 +0000 Subject: [PATCH 24/60] animate login spinner --- package.json | 3 ++- src/screens/Login/LoginForm.tsx | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 97fd91b03a..b664dd22a2 100644 --- a/package.json +++ b/package.json @@ -312,5 +312,6 @@ }, "lint-staged": { "*{.js,.jsx,.ts,.tsx}": "yarn eslint --fix" - } + }, + "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" } diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index eddcc96780..e9620db5c5 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -2,6 +2,7 @@ import React, {useState, useRef} from 'react' import { ActivityIndicator, Keyboard, + LayoutAnimation, TextInput, TouchableOpacity, View, @@ -67,6 +68,7 @@ export const LoginForm = ({ const onPressNext = async () => { if (isProcessing) return Keyboard.dismiss() + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) setError('') setIsProcessing(true) @@ -101,6 +103,7 @@ export const LoginForm = ({ }) } catch (e: any) { const errMsg = e.toString() + LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) setIsProcessing(false) if (errMsg.includes('Authentication Required')) { logger.debug('Failed to login due to invalid credentials', { From 793710b02bca33795df968b88e7340881d572fc7 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:14:51 +0000 Subject: [PATCH 25/60] rm package manager field --- package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/package.json b/package.json index b664dd22a2..97fd91b03a 100644 --- a/package.json +++ b/package.json @@ -312,6 +312,5 @@ }, "lint-staged": { "*{.js,.jsx,.ts,.tsx}": "yarn eslint --fix" - }, - "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" + } } From fd448a5fab2e5239abcf4504a1de24cb7aca700c Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:28:18 +0000 Subject: [PATCH 26/60] rename pencil -> pencilLine and reexport --- assets/icons/pencilLine_stroke2_corner0_rounded.svg | 1 + assets/icons/pencil_stroke2_corner0_rounded.svg | 1 - src/components/forms/HostingProvider.tsx | 2 +- src/components/icons/Pencil.tsx | 4 ++-- 4 files changed, 4 insertions(+), 4 deletions(-) create mode 100644 assets/icons/pencilLine_stroke2_corner0_rounded.svg delete mode 100644 assets/icons/pencil_stroke2_corner0_rounded.svg diff --git a/assets/icons/pencilLine_stroke2_corner0_rounded.svg b/assets/icons/pencilLine_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..3ff2161d9c --- /dev/null +++ b/assets/icons/pencilLine_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/pencil_stroke2_corner0_rounded.svg b/assets/icons/pencil_stroke2_corner0_rounded.svg deleted file mode 100644 index 7341989894..0000000000 --- a/assets/icons/pencil_stroke2_corner0_rounded.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index df506b77c1..c8cd7263f8 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -4,7 +4,7 @@ import {TouchableOpacity, View} from 'react-native' import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' -import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' +import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' import * as TextField from './TextField' import {useDialogControl} from '../Dialog' import {Text} from '../Typography' diff --git a/src/components/icons/Pencil.tsx b/src/components/icons/Pencil.tsx index 1b7fc17cf4..854d51a3b2 100644 --- a/src/components/icons/Pencil.tsx +++ b/src/components/icons/Pencil.tsx @@ -1,5 +1,5 @@ import {createSinglePathSVG} from './TEMPLATE' -export const Pencil_Stroke2_Corner0_Rounded = createSinglePathSVG({ - path: 'M13.586 1.5a2 2 0 0 1 2.828 0L19.5 4.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 5.086 21H1a1 1 0 0 1-1-1v-4.086A2 2 0 0 1 .586 14.5l13-13ZM15 2.914l-13 13V19h3.086l13-13L15 2.914ZM11 20a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', +export const PencilLine_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M15.586 2.5a2 2 0 0 1 2.828 0L21.5 5.586a2 2 0 0 1 0 2.828l-13 13A2 2 0 0 1 7.086 22H3a1 1 0 0 1-1-1v-4.086a2 2 0 0 1 .586-1.414l13-13ZM17 3.914l-13 13V20h3.086l13-13L17 3.914ZM13 21a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z', }) From 717c53bea82cfe902af9d1ea17d43b4d8064de04 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:30:41 +0000 Subject: [PATCH 27/60] remove explicit height/width --- src/components/forms/HostingProvider.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index c8cd7263f8..c0dd7218ed 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -57,11 +57,7 @@ export function HostingProvider({ t.atoms.bg_contrast_100, {marginLeft: 'auto', left: 6, padding: 6}, ]}> - + From 8556016a69642477e497fb7d695521b01945febc Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:37:12 +0000 Subject: [PATCH 28/60] remove textfield references from hosting provider --- src/components/forms/HostingProvider.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index c0dd7218ed..80660b5804 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -5,7 +5,6 @@ import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil' -import * as TextField from './TextField' import {useDialogControl} from '../Dialog' import {Text} from '../Typography' import {ServerInputDialog} from '#/view/com/auth/server-input' @@ -49,7 +48,9 @@ export function HostingProvider({ t.atoms.bg_contrast_25, ]} onPress={onPressSelectService}> - + + + {toNiceDomain(serviceUrl)} - + From 2428d22368a96450f9a99b79a7e689a57e899a48 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 21:58:53 +0000 Subject: [PATCH 29/60] change hosting provider and forgot pw touchables to button --- src/components/forms/HostingProvider.tsx | 54 ++++++++++++++++-------- src/screens/Login/LoginForm.tsx | 12 +++--- 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx index 80660b5804..1653b0da41 100644 --- a/src/components/forms/HostingProvider.tsx +++ b/src/components/forms/HostingProvider.tsx @@ -1,5 +1,7 @@ import React from 'react' -import {TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {isAndroid} from '#/platform/detection' import {atoms as a, useTheme} from '#/alf' @@ -9,6 +11,7 @@ import {useDialogControl} from '../Dialog' import {Text} from '../Typography' import {ServerInputDialog} from '#/view/com/auth/server-input' import {toNiceDomain} from '#/lib/strings/url-helpers' +import {Button} from '../Button' export function HostingProvider({ serviceUrl, @@ -21,6 +24,7 @@ export function HostingProvider({ }) { const serverInputControl = useDialogControl() const t = useTheme() + const {_} = useLingui() const onPressSelectService = React.useCallback(() => { serverInputControl.open() @@ -35,8 +39,11 @@ export function HostingProvider({ control={serverInputControl} onSelect={onSelectServiceUrl} /> - - - - - {toNiceDomain(serviceUrl)} - - - - + {({hovered}) => ( + <> + + + + {toNiceDomain(serviceUrl)} + + + + + )} + ) } diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx index e9620db5c5..8c9ef3e271 100644 --- a/src/screens/Login/LoginForm.tsx +++ b/src/screens/Login/LoginForm.tsx @@ -4,7 +4,6 @@ import { Keyboard, LayoutAnimation, TextInput, - TouchableOpacity, View, } from 'react-native' import {ComAtprotoServerDescribeServer} from '@atproto/api' @@ -193,22 +192,23 @@ export const LoginForm = ({ : _(msg`Input the password tied to ${identifier}`) } /> - - + Forgot? - + From 1f02ed5d871a4b6675f3c344a4cae2aea26896b3 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 22:03:49 +0000 Subject: [PATCH 30/60] change choose account form to use Button + add hover styles --- src/screens/Login/ChooseAccountForm.tsx | 90 +++++++++++++++---------- 1 file changed, 54 insertions(+), 36 deletions(-) diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index 7a3a4555b2..4fcca5f520 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {TouchableOpacity, View} from 'react-native' +import {View} from 'react-native' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import flattenReactChildren from 'react-keyed-flatten-children' @@ -67,31 +67,42 @@ function AccountItem({ }, [account, onSelect]) return ( - - - - - - - - {profile?.displayName || account.handle}{' '} + label={ + isCurrentAccount + ? _(msg`Continue as ${account.handle} (currently signed in)`) + : _(msg`Sign in as ${account.handle}`) + }> + {({hovered}) => ( + + + + + + + {profile?.displayName || account.handle}{' '} + + {account.handle} - {account.handle} - - {isCurrentAccount ? ( - - ) : ( - - )} - - + {isCurrentAccount ? ( + + ) : ( + + )} + + )} + ) } export const ChooseAccountForm = ({ @@ -149,28 +160,35 @@ export const ChooseAccountForm = ({ isCurrentAccount={account.did === currentAccount?.did} /> ))} - onSelectAccount(undefined)} - accessibilityRole="button" - accessibilityLabel={_(msg`Login to account that is not listed`)} - accessibilityHint=""> - - + {({hovered}) => ( + - Other account - - - - + + Other account + + + + )} + From 49cd7e4bcf599c17c3e466cc9f483ec063e926c1 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Tue, 19 Mar 2024 22:06:59 +0000 Subject: [PATCH 31/60] add pressed state and rm cloneElement --- src/screens/Login/ChooseAccountForm.tsx | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index 4fcca5f520..dd807ba3a8 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -35,13 +35,7 @@ function Group({children}: {children: React.ReactNode}) { {i > 0 ? ( ) : null} - {React.cloneElement(child, { - // @ts-ignore - style: { - borderRadius: 0, - borderWidth: 0, - }, - })} + {child} ) : null })} @@ -77,14 +71,14 @@ function AccountItem({ ? _(msg`Continue as ${account.handle} (currently signed in)`) : _(msg`Sign in as ${account.handle}`) }> - {({hovered}) => ( + {({hovered, pressed}) => ( @@ -165,7 +159,7 @@ export const ChooseAccountForm = ({ style={[a.flex_1]} onPress={() => onSelectAccount(undefined)} label={_(msg`Login to account that is not listed`)}> - {({hovered}) => ( + {({hovered, pressed}) => ( Date: Tue, 19 Mar 2024 22:16:29 +0000 Subject: [PATCH 32/60] hog FormError --- src/components/forms/FormError.tsx | 25 ++++++++++--------------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/forms/FormError.tsx b/src/components/forms/FormError.tsx index 3c6a8649d9..05f2e58930 100644 --- a/src/components/forms/FormError.tsx +++ b/src/components/forms/FormError.tsx @@ -1,10 +1,9 @@ import React from 'react' -import {StyleSheet, View} from 'react-native' +import {View} from 'react-native' import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning' import {Text} from '#/components/Typography' import {atoms as a, useTheme} from '#/alf' -import {colors} from '#/lib/styles' export function FormError({error}: {error?: string}) { const t = useTheme() @@ -12,7 +11,15 @@ export function FormError({error}: {error?: string}) { if (!error) return null return ( - + {error} @@ -20,15 +27,3 @@ export function FormError({error}: {error?: string}) { ) } - -const styles = StyleSheet.create({ - error: { - backgroundColor: colors.red4, - flexDirection: 'row', - alignItems: 'center', - marginBottom: 15, - borderRadius: 8, - paddingHorizontal: 8, - paddingVertical: 8, - }, -}) From 09e9769eeaa89e09e3b63c48533abc46f193cbfd Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 20 Mar 2024 15:40:03 +0000 Subject: [PATCH 33/60] add logEvent that got lost in merge from main --- src/screens/Login/ChooseAccountForm.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index dd807ba3a8..6e32d472e3 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -18,6 +18,7 @@ import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icon import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' import * as TextField from '#/components/forms/TextField' import {FormContainer} from './FormContainer' +import {logEvent} from '#/lib/statsig/statsig' function Group({children}: {children: React.ReactNode}) { const t = useTheme() @@ -125,6 +126,10 @@ export const ChooseAccountForm = ({ Toast.show(_(msg`Already signed in as @${account.handle}`)) } else { await initSession(account) + logEvent('account:loggedIn', { + logContext: 'ChooseAccountForm', + withPassword: false, + }) track('Sign In', {resumedSession: true}) setTimeout(() => { Toast.show(_(msg`Signed in as @${account.handle}`)) From 4c60d4d07014c4970dfdb7f6272ab2abadf035b9 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 20 Mar 2024 15:42:39 +0000 Subject: [PATCH 34/60] remove unnecessary group component --- src/screens/Login/ChooseAccountForm.tsx | 50 +++++++++---------------- 1 file changed, 17 insertions(+), 33 deletions(-) diff --git a/src/screens/Login/ChooseAccountForm.tsx b/src/screens/Login/ChooseAccountForm.tsx index 6e32d472e3..600a640cae 100644 --- a/src/screens/Login/ChooseAccountForm.tsx +++ b/src/screens/Login/ChooseAccountForm.tsx @@ -2,7 +2,6 @@ import React from 'react' import {View} from 'react-native' import {Trans, msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import flattenReactChildren from 'react-keyed-flatten-children' import {useAnalytics} from 'lib/analytics/analytics' import {UserAvatar} from '../../view/com/util/UserAvatar' @@ -20,30 +19,6 @@ import * as TextField from '#/components/forms/TextField' import {FormContainer} from './FormContainer' import {logEvent} from '#/lib/statsig/statsig' -function Group({children}: {children: React.ReactNode}) { - const t = useTheme() - return ( - - {flattenReactChildren(children).map((child, i) => { - return React.isValidElement(child) ? ( - - {i > 0 ? ( - - ) : null} - {child} - - ) : null - })} - - ) -} - function AccountItem({ account, onSelect, @@ -150,14 +125,23 @@ export const ChooseAccountForm = ({ Sign in as... - + {accounts.map(account => ( - + <> + + + ))} - + + - - + + - + style={[ + a.absolute, + a.inset_0, + {left: 'auto'}, + {pointerEvents: 'none'}, + a.align_center, + a.justify_center, + ]}> + @@ -136,44 +142,3 @@ export const SplashScreen = ({ ) } - -const styles = StyleSheet.create({ - container: { - height: '100%', - }, - hero: { - flex: 2, - justifyContent: 'center', - alignItems: 'center', - }, - btns: { - paddingBottom: 0, - }, - title: { - textAlign: 'center', - fontSize: 68, - fontWeight: 'bold', - }, - subtitle: { - textAlign: 'center', - fontSize: 42, - fontWeight: 'bold', - }, - btn: { - borderRadius: 32, - paddingVertical: 16, - marginBottom: 20, - marginHorizontal: 20, - }, - btnLabel: { - textAlign: 'center', - fontSize: 21, - }, - footer: { - paddingHorizontal: 16, - paddingTop: 12, - paddingBottom: 24, - justifyContent: 'center', - alignItems: 'center', - }, -}) From eacd1cbe2af2446140a8a05140e89941f779c2ff Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 20 Mar 2024 17:11:59 +0000 Subject: [PATCH 39/60] use alf for splashscreen (web) --- src/view/com/auth/SplashScreen.web.tsx | 215 ++++++++++--------------- 1 file changed, 86 insertions(+), 129 deletions(-) diff --git a/src/view/com/auth/SplashScreen.web.tsx b/src/view/com/auth/SplashScreen.web.tsx index f1921c7ffb..7e5ddaffb8 100644 --- a/src/view/com/auth/SplashScreen.web.tsx +++ b/src/view/com/auth/SplashScreen.web.tsx @@ -1,13 +1,9 @@ import React from 'react' -import {StyleSheet, TouchableOpacity, View, Pressable} from 'react-native' +import {View, Pressable} from 'react-native' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {Text} from 'view/com/util/text/Text' import {TextLink} from '../util/Link' import {ErrorBoundary} from 'view/com/util/ErrorBoundary' -import {s, colors} from 'lib/styles' -import {usePalette} from 'lib/hooks/usePalette' import {CenteredView} from '../util/Views' -import {isWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {Trans, msg} from '@lingui/macro' import {Logo} from '#/view/icons/Logo' @@ -16,6 +12,10 @@ import {useLingui} from '@lingui/react' import {sanitizeAppLanguageSetting} from '#/locale/helpers' import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences' import {APP_LANGUAGES} from '#/locale/languages' +import {atoms as a, useTheme} from '#/alf' +import {Button, ButtonText} from '#/components/Button' +import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron' +import {Text} from '#/components/Typography' export const SplashScreen = ({ onDismiss, @@ -26,10 +26,9 @@ export const SplashScreen = ({ onPressSignin: () => void onPressCreateAccount: () => void }) => { - const pal = usePalette('default') - const {isTabletOrMobile} = useWebMediaQueries() - const styles = useStyles() - const isMobileWeb = isWeb && isTabletOrMobile + const {_} = useLingui() + const t = useTheme() + const {isTabletOrMobile: isMobileWeb} = useWebMediaQueries() return ( <> @@ -48,61 +47,89 @@ export const SplashScreen = ({ icon="x" size={24} style={{ - color: String(pal.text.color), + color: String(t.atoms.text.color), }} /> )} - + - + + - - + + + + + + What's up? + - - + + -