octo/tooot
octo/tooot
1
0
Fork 0
mirror of https://github.com/tooot-app/app synced 2025-04-19 20:57:36 +02:00
Code Issues Projects Releases Wiki Activity

Try without memo

Browse Source
This commit is contained in:
Zhiyuan Zheng 2022-06-01 00:33:59 +02:00
parent 68178f7f31
commit a9e36d4a9c
7 changed files with 188 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
babel.config.js
View File

@ -29,7 +29,19 @@ module.exports = function (api) {
}
return {
presets: ['babel-preset-expo'],
presets: [
'babel-preset-expo',
[
'@babel/preset-react',
{
importSource: '@welldone-software/why-did-you-render',
runtime: 'automatic',
development:
process.env.NODE_ENV === 'development' ||
process.env.BABEL_ENV === 'development'
}
]
],
plugins
}
}

1
package.json
View File

@ -104,6 +104,7 @@
"devDependencies": {
"@babel/core": "7.18.2",
"@babel/plugin-proposal-optional-chaining": "7.17.12",
"@babel/preset-react": "^7.17.12",
"@babel/preset-typescript": "7.17.12",
"@expo/config": "6.0.24",
"@types/lodash": "4.14.182",

2
src/api/tooot.ts
View File

@ -19,7 +19,7 @@ export type Params = {
export const TOOOT_API_DOMAIN = mapEnvironment({
release: 'api.tooot.app',
candidate: 'api.tooot.app',
candidate: 'api-candidate.tooot.app',
development: 'api-development.tooot.app'
})

239
src/components/Timeline/Default.tsx
View File

@ -14,7 +14,7 @@ import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { getInstanceAccount } from '@utils/slices/instancesSlice'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import { isEqual, uniqBy } from 'lodash'
import { uniqBy } from 'lodash'
import React, { useCallback } from 'react'
import { Pressable, View } from 'react-native'
import { useSelector } from 'react-redux'
@ -34,145 +34,136 @@ export interface Props {
}
// When the poll is long
const TimelineDefault = React.memo(
({
item,
queryKey,
rootQueryKey,
origin,
highlighted = false,
disableDetails = false,
disableOnPress = false
}: Props) => {
const { colors } = useTheme()
const instanceAccount = useSelector(getInstanceAccount, () => true)
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const TimelineDefault: React.FC<Props> = ({
item,
queryKey,
rootQueryKey,
origin,
highlighted = false,
disableDetails = false,
disableOnPress = false
}) => {
const { colors } = useTheme()
const instanceAccount = useSelector(getInstanceAccount, () => true)
const navigation =
useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const actualStatus = item.reblog ? item.reblog : item
const actualStatus = item.reblog ? item.reblog : item
const ownAccount = actualStatus.account?.id === instanceAccount?.id
const ownAccount = actualStatus.account?.id === instanceAccount?.id
if (
if (
!highlighted &&
queryKey &&
shouldFilter({ status: actualStatus, queryKey })
) {
return <TimelineFiltered />
}
const onPress = useCallback(() => {
analytics('timeline_default_press', {
page: queryKey ? queryKey[1].page : origin
})
!disableOnPress &&
!highlighted &&
queryKey &&
shouldFilter({ status: actualStatus, queryKey })
) {
return <TimelineFiltered />
}
const onPress = useCallback(() => {
analytics('timeline_default_press', {
page: queryKey ? queryKey[1].page : origin
navigation.push('Tab-Shared-Toot', {
toot: actualStatus,
rootQueryKey: queryKey
})
!disableOnPress &&
!highlighted &&
navigation.push('Tab-Shared-Toot', {
toot: actualStatus,
rootQueryKey: queryKey
})
}, [])
}, [])
return (
<Pressable
accessible={highlighted ? false : true}
return (
<Pressable
accessible={highlighted ? false : true}
style={{
padding: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: colors.backgroundDefault,
paddingBottom:
disableDetails && disableOnPress
? StyleConstants.Spacing.Global.PagePadding
: 0
}}
onPress={onPress}
>
{item.reblog ? (
<TimelineActioned action='reblog' account={item.account} />
) : item._pinned ? (
<TimelineActioned action='pinned' account={item.account} />
) : null}
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
<TimelineAvatar
queryKey={disableOnPress ? undefined : queryKey}
account={actualStatus.account}
highlighted={highlighted}
/>
<TimelineHeaderDefault
queryKey={disableOnPress ? undefined : queryKey}
rootQueryKey={disableOnPress ? undefined : rootQueryKey}
status={actualStatus}
highlighted={highlighted}
/>
</View>
<View
style={{
padding: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: colors.backgroundDefault,
paddingBottom:
disableDetails && disableOnPress
? StyleConstants.Spacing.Global.PagePadding
: 0
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
onPress={onPress}
>
{item.reblog ? (
<TimelineActioned action='reblog' account={item.account} />
) : item._pinned ? (
<TimelineActioned action='pinned' account={item.account} />
) : null}
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
<TimelineAvatar
queryKey={disableOnPress ? undefined : queryKey}
account={actualStatus.account}
highlighted={highlighted}
/>
<TimelineHeaderDefault
queryKey={disableOnPress ? undefined : queryKey}
rootQueryKey={disableOnPress ? undefined : rootQueryKey}
{typeof actualStatus.content === 'string' &&
actualStatus.content.length > 0 ? (
<TimelineContent
status={actualStatus}
highlighted={highlighted}
disableDetails={disableDetails}
/>
</View>
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.M + StyleConstants.Spacing.S
}}
>
{typeof actualStatus.content === 'string' &&
actualStatus.content.length > 0 ? (
<TimelineContent
status={actualStatus}
highlighted={highlighted}
disableDetails={disableDetails}
/>
) : null}
{queryKey && actualStatus.poll ? (
<TimelinePoll
queryKey={queryKey}
rootQueryKey={rootQueryKey}
statusId={actualStatus.id}
poll={actualStatus.poll}
reblog={item.reblog ? true : false}
sameAccount={ownAccount}
/>
) : null}
{!disableDetails &&
Array.isArray(actualStatus.media_attachments) &&
actualStatus.media_attachments.length ? (
<TimelineAttachment status={actualStatus} />
) : null}
{!disableDetails && actualStatus.card ? (
<TimelineCard card={actualStatus.card} />
) : null}
{!disableDetails ? (
<TimelineFullConversation
queryKey={queryKey}
status={actualStatus}
/>
) : null}
<TimelineTranslate status={actualStatus} highlighted={highlighted} />
<TimelineFeedback status={actualStatus} highlighted={highlighted} />
</View>
{queryKey && !disableDetails ? (
<TimelineActions
) : null}
{queryKey && actualStatus.poll ? (
<TimelinePoll
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={highlighted}
status={actualStatus}
ownAccount={ownAccount}
accts={uniqBy(
(
[actualStatus.account] as Mastodon.Account[] &
Mastodon.Mention[]
)
.concat(actualStatus.mentions)
.filter(d => d?.id !== instanceAccount?.id),
d => d?.id
).map(d => d?.acct)}
statusId={actualStatus.id}
poll={actualStatus.poll}
reblog={item.reblog ? true : false}
sameAccount={ownAccount}
/>
) : null}
</Pressable>
)
},
(prev, next) => isEqual(prev.item, next.item)
)
{!disableDetails &&
Array.isArray(actualStatus.media_attachments) &&
actualStatus.media_attachments.length ? (
<TimelineAttachment status={actualStatus} />
) : null}
{!disableDetails && actualStatus.card ? (
<TimelineCard card={actualStatus.card} />
) : null}
{!disableDetails ? (
<TimelineFullConversation queryKey={queryKey} status={actualStatus} />
) : null}
<TimelineTranslate status={actualStatus} highlighted={highlighted} />
<TimelineFeedback status={actualStatus} highlighted={highlighted} />
</View>
{queryKey && !disableDetails ? (
<TimelineActions
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={highlighted}
status={actualStatus}
ownAccount={ownAccount}
accts={uniqBy(
([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
.concat(actualStatus.mentions)
.filter(d => d?.id !== instanceAccount?.id),
d => d?.id
).map(d => d?.acct)}
reblog={item.reblog ? true : false}
/>
) : null}
</Pressable>
)
}
export default TimelineDefault

2
src/startup/dev.ts
View File

@ -1,3 +1,5 @@
/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react'
import log from './log'

4
src/utils/queryHooks/timeline.ts
View File

@ -440,8 +440,8 @@ const useTimelineMutation = ({
...(onMutate && {
onMutate: params => {
queryClient.cancelQueries(params.queryKey)
let oldData
params.queryKey && (oldData = queryClient.getQueryData(params.queryKey))
const oldData =
params.queryKey && queryClient.getQueryData(params.queryKey)
haptics('Light')
switch (params.type) {

55
yarn.lock
View File

@ -693,6 +693,13 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-syntax-jsx@^7.17.12":
version "7.17.12"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
dependencies:
"@babel/helper-plugin-utils" "^7.17.12"
"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
version "7.10.4"
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@ -973,13 +980,20 @@
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-react-display-name@^7.0.0":
"@babel/plugin-transform-react-display-name@^7.0.0", "@babel/plugin-transform-react-display-name@^7.16.7":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.16.7.tgz#7b6d40d232f4c0f550ea348593db3b21e2404340"
integrity sha512-qgIg8BcZgd0G/Cz916D5+9kqX0c7nPZyXaP8R2tLNN5tkyIZdG5fEwBrxwplzSnjC1jvQmyMNVwUCZPcbGY7Pg==
dependencies:
"@babel/helper-plugin-utils" "^7.16.7"
"@babel/plugin-transform-react-jsx-development@^7.16.7":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.16.7.tgz#43a00724a3ed2557ed3f276a01a929e6686ac7b8"
integrity sha512-RMvQWvpla+xy6MlBpPlrKZCMRs2AGiHOGHY3xRwl0pEeim348dDyxeH4xBsMPbIMhujeq7ihE702eM2Ew0Wo+A==
dependencies:
"@babel/plugin-transform-react-jsx" "^7.16.7"
"@babel/plugin-transform-react-jsx-self@^7.0.0":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.16.7.tgz#f432ad0cba14c4a1faf44f0076c69e42a4d4479e"
@ -1005,6 +1019,25 @@
"@babel/plugin-syntax-jsx" "^7.16.7"
"@babel/types" "^7.17.0"
"@babel/plugin-transform-react-jsx@^7.16.7", "@babel/plugin-transform-react-jsx@^7.17.12":
version "7.17.12"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.12.tgz#2aa20022709cd6a3f40b45d60603d5f269586dba"
integrity sha512-Lcaw8bxd1DKht3thfD4A12dqo1X16he1Lm8rIv8sTwjAYNInRS1qHa9aJoqvzpscItXvftKDCfaEQzwoVyXpEQ==
dependencies:
"@babel/helper-annotate-as-pure" "^7.16.7"
"@babel/helper-module-imports" "^7.16.7"
"@babel/helper-plugin-utils" "^7.17.12"
"@babel/plugin-syntax-jsx" "^7.17.12"
"@babel/types" "^7.17.12"
"@babel/plugin-transform-react-pure-annotations@^7.16.7":
version "7.18.0"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.18.0.tgz#ef82c8e310913f3522462c9ac967d395092f1954"
integrity sha512-6+0IK6ouvqDn9bmEG7mEyF/pwlJXVj5lwydybpyyH3D0A7Hftk+NCTdYjnLNZksn261xaOV5ksmp20pQEmc2RQ==
dependencies:
"@babel/helper-annotate-as-pure" "^7.16.7"
"@babel/helper-plugin-utils" "^7.17.12"
"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.16.7":
version "7.16.7"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.16.7.tgz#9e7576dc476cb89ccc5096fff7af659243b4adeb"
@ -1200,6 +1233,18 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"
"@babel/preset-react@^7.17.12":
version "7.17.12"
resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.17.12.tgz#62adbd2d1870c0de3893095757ed5b00b492ab3d"
integrity sha512-h5U+rwreXtZaRBEQhW1hOJLMq8XNJBQ/9oymXiCXTuT/0uOwpbT0gUt+sXeOqoXBgNuUKI7TaObVwoEyWkpFgA==
dependencies:
"@babel/helper-plugin-utils" "^7.17.12"
"@babel/helper-validator-option" "^7.16.7"
"@babel/plugin-transform-react-display-name" "^7.16.7"
"@babel/plugin-transform-react-jsx" "^7.17.12"
"@babel/plugin-transform-react-jsx-development" "^7.16.7"
"@babel/plugin-transform-react-pure-annotations" "^7.16.7"
"@babel/preset-typescript@7.17.12":
version "7.17.12"
resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.17.12.tgz#40269e0a0084d56fc5731b6c40febe1c9a4a3e8c"
@ -1332,6 +1377,14 @@
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
"@babel/types@^7.17.12":
version "7.18.4"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.4.tgz#27eae9b9fd18e9dccc3f9d6ad051336f307be354"
integrity sha512-ThN1mBcMq5pG/Vm2IcBmPPfyPXbd8S02rS+OBIDENdufvqC7Z/jHPCv9IcP01277aKtDI8g/2XysBN4hA8niiw==
dependencies:
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
"@babel/types@^7.18.0", "@babel/types@^7.18.2":
version "7.18.2"
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.2.tgz#191abfed79ebe6f4242f643a9a5cbaa36b10b091"