From dde33ad1ad48ea4319af63fe5167a5fc90317026 Mon Sep 17 00:00:00 2001 From: Zhiyuan Zheng Date: Fri, 13 May 2022 00:04:15 +0200 Subject: [PATCH] Add static emoji option --- src/components/Menu/Row.tsx | 2 +- src/components/Timeline.tsx | 4 +- src/i18n/en/screens/tabs.json | 4 ++ src/screens/Compose/Root/Footer/Emojis.tsx | 62 +++++++++++++++------- src/screens/Tabs/Me/Settings/Analytics.tsx | 62 ++++++++++++---------- src/screens/Tabs/Me/Settings/App.tsx | 17 +++++- src/utils/migrations/settings/migration.ts | 8 +++ src/utils/migrations/settings/v2.ts | 9 ++++ src/utils/slices/settingsSlice.ts | 22 ++++---- 9 files changed, 131 insertions(+), 59 deletions(-) create mode 100644 src/utils/migrations/settings/v2.ts diff --git a/src/components/Menu/Row.tsx b/src/components/Menu/Row.tsx index 130a7bf3..f53d562c 100644 --- a/src/components/Menu/Row.tsx +++ b/src/components/Menu/Row.tsx @@ -166,7 +166,7 @@ const styles = StyleSheet.create({ core: { flex: 1, flexDirection: 'row', - paddingVertical: StyleConstants.Spacing.S + paddingTop: StyleConstants.Spacing.S }, front: { flex: 2, diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx index 2dbde09f..ec8d6b33 100644 --- a/src/components/Timeline.tsx +++ b/src/components/Timeline.tsx @@ -130,7 +130,9 @@ const Timeline: React.FC = ({ } ListEmptyComponent={} ItemSeparatorComponent={ItemSeparatorComponent} - maintainVisibleContentPosition={{ minIndexForVisible: 0 }} + {...(isFetchingPreviousPage && { + maintainVisibleContentPosition: { minIndexForVisible: 0 } + })} refreshing={isFetchingPreviousPage} onRefresh={() => { if (!disableRefresh && !isFetchingPreviousPage) { diff --git a/src/i18n/en/screens/tabs.json b/src/i18n/en/screens/tabs.json index e5efbcd6..2f240322 100644 --- a/src/i18n/en/screens/tabs.json +++ b/src/i18n/en/screens/tabs.json @@ -251,6 +251,10 @@ "cancel": "$t(common:buttons.cancel)" } }, + "staticEmoji": { + "heading": "Use static emoji", + "description": "If you encounter frequent app crash when viewing emoji list, you can try to use static emoji instead." + }, "feedback": { "heading": "Feature Requests" }, diff --git a/src/screens/Compose/Root/Footer/Emojis.tsx b/src/screens/Compose/Root/Footer/Emojis.tsx index be885876..6ae263c2 100644 --- a/src/screens/Compose/Root/Footer/Emojis.tsx +++ b/src/screens/Compose/Root/Footer/Emojis.tsx @@ -3,6 +3,7 @@ import CustomText from '@components/Text' import { useAppDispatch } from '@root/store' import { useAccessibility } from '@utils/accessibility/AccessibilityManager' import { countInstanceEmoji } from '@utils/slices/instancesSlice' +import { getSettingsStaticEmoji } from '@utils/slices/settingsSlice' import { StyleConstants } from '@utils/styles/constants' import { useTheme } from '@utils/styles/ThemeManager' import React, { RefObject, useCallback, useContext, useEffect } from 'react' @@ -10,11 +11,13 @@ import { useTranslation } from 'react-i18next' import { AccessibilityInfo, findNodeHandle, + Image, Pressable, SectionList, View } from 'react-native' import FastImage from 'react-native-fast-image' +import { useSelector } from 'react-redux' import validUrl from 'valid-url' import updateText from '../../updateText' import ComposeContext from '../../utils/createContext' @@ -30,6 +33,8 @@ const ComposeEmojis: React.FC = ({ accessibleRefEmojis }) => { const { t } = useTranslation() const dispatch = useAppDispatch() + const staticEmoji = useSelector(getSettingsStaticEmoji) + useEffect(() => { const tagEmojis = findNodeHandle(accessibleRefEmojis.current) if (composeState.emoji.active) { @@ -82,24 +87,45 @@ const ComposeEmojis: React.FC = ({ accessibleRefEmojis }) => { dispatch(countInstanceEmoji(emoji)) }} > - + {staticEmoji ? ( + + ) : ( + + )} ) } else { diff --git a/src/screens/Tabs/Me/Settings/Analytics.tsx b/src/screens/Tabs/Me/Settings/Analytics.tsx index befe03bc..7701564b 100644 --- a/src/screens/Tabs/Me/Settings/Analytics.tsx +++ b/src/screens/Tabs/Me/Settings/Analytics.tsx @@ -22,35 +22,39 @@ const SettingsAnalytics: React.FC = () => { const instanceVersion = useSelector(getInstanceVersion, () => true) return ( - - - dispatch(changeAnalytics(!settingsAnalytics)) - } - /> - - {t('me.settings.version', { version: Constants.manifest?.version })} - - - {t('me.settings.instanceVersion', { version: instanceVersion })} - - + <> + + + dispatch(changeAnalytics(!settingsAnalytics)) + } + /> + + + + {t('me.settings.version', { version: Constants.manifest?.version })} + + + {t('me.settings.instanceVersion', { version: instanceVersion })} + + + ) } diff --git a/src/screens/Tabs/Me/Settings/App.tsx b/src/screens/Tabs/Me/Settings/App.tsx index f204232b..863e20d1 100644 --- a/src/screens/Tabs/Me/Settings/App.tsx +++ b/src/screens/Tabs/Me/Settings/App.tsx @@ -15,7 +15,9 @@ import { getSettingsBrowser, getSettingsFontsize, getSettingsDarkTheme, - changeDarkTheme + changeDarkTheme, + getSettingsStaticEmoji, + changeStaticEmoji } from '@utils/slices/settingsSlice' import { useTheme } from '@utils/styles/ThemeManager' import * as Notifications from 'expo-notifications' @@ -37,6 +39,7 @@ const SettingsApp: React.FC = () => { const settingsTheme = useSelector(getSettingsTheme) const settingsDarkTheme = useSelector(getSettingsDarkTheme) const settingsBrowser = useSelector(getSettingsBrowser) + const settingsStaticEmoji = useSelector(getSettingsStaticEmoji) return ( @@ -266,6 +269,18 @@ const SettingsApp: React.FC = () => { ) } /> + { + analytics('settings_staticemoji_press', { + current: settingsStaticEmoji.toString(), + new: !settingsStaticEmoji.toString() + }) + dispatch(changeStaticEmoji(!settingsStaticEmoji)) + }} + /> ) } diff --git a/src/utils/migrations/settings/migration.ts b/src/utils/migrations/settings/migration.ts index a66c8bbb..a99a662e 100644 --- a/src/utils/migrations/settings/migration.ts +++ b/src/utils/migrations/settings/migration.ts @@ -1,5 +1,6 @@ import { SettingsV0 } from './v0' import { SettingsV1 } from './v1' +import { SettingsV2 } from './v2' const settingsMigration = { 1: (state: SettingsV0): SettingsV1 => { @@ -7,6 +8,13 @@ const settingsMigration = { ...state, darkTheme: 'lighter' } + }, + 2: (state: SettingsV1): SettingsV2 => { + return { + ...state, + darkTheme: 'lighter', + staticEmoji: false + } } } diff --git a/src/utils/migrations/settings/v2.ts b/src/utils/migrations/settings/v2.ts new file mode 100644 index 00000000..07cbad49 --- /dev/null +++ b/src/utils/migrations/settings/v2.ts @@ -0,0 +1,9 @@ +export type SettingsV2 = { + fontsize: -1 | 0 | 1 | 2 | 3 + language: string + theme: 'light' | 'dark' | 'auto' + darkTheme: 'lighter' | 'darker' + browser: 'internal' | 'external' + staticEmoji: boolean + analytics: boolean +} diff --git a/src/utils/slices/settingsSlice.ts b/src/utils/slices/settingsSlice.ts index 58b55f48..69cde671 100644 --- a/src/utils/slices/settingsSlice.ts +++ b/src/utils/slices/settingsSlice.ts @@ -1,6 +1,7 @@ import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit' import { LOCALES } from '@root/i18n/locales' import { RootState } from '@root/store' +import { SettingsV2 } from '@utils/migrations/settings/v2' import * as Analytics from 'expo-firebase-analytics' import * as Localization from 'expo-localization' import { pickBy } from 'lodash' @@ -13,14 +14,7 @@ export const changeAnalytics = createAsyncThunk( } ) -export type SettingsState = { - fontsize: -1 | 0 | 1 | 2 | 3 - language: string - theme: 'light' | 'dark' | 'auto' - darkTheme: 'lighter' | 'darker' - browser: 'internal' | 'external' - analytics: boolean -} +export type SettingsState = SettingsV2 export const settingsInitialState = { fontsize: 0, @@ -37,6 +31,7 @@ export const settingsInitialState = { theme: 'auto', darkTheme: 'lighter', browser: 'internal', + staticEmoji: false, analytics: true } @@ -73,6 +68,12 @@ const settingsSlice = createSlice({ action: PayloadAction> ) => { state.browser = action.payload + }, + changeStaticEmoji: ( + state, + action: PayloadAction> + ) => { + state.staticEmoji = action.payload } }, extraReducers: builder => { @@ -89,6 +90,8 @@ export const getSettingsTheme = (state: RootState) => state.settings.theme export const getSettingsDarkTheme = (state: RootState) => state.settings.darkTheme export const getSettingsBrowser = (state: RootState) => state.settings.browser +export const getSettingsStaticEmoji = (state: RootState) => + state.settings.staticEmoji export const getSettingsAnalytics = (state: RootState) => state.settings.analytics @@ -97,6 +100,7 @@ export const { changeLanguage, changeTheme, changeDarkTheme, - changeBrowser + changeBrowser, + changeStaticEmoji } = settingsSlice.actions export default settingsSlice.reducer