feat: optimize ui

liaoliao666 · Mar 18, 2024 · 1e7efb1 · 1e7efb1
1 parent 1d297d1
commit 1e7efb1
Show file tree

Hide file tree

Showing 22 changed files with 215 additions and 182 deletions.
diff --git a/App.tsx b/App.tsx
@@ -5,7 +5,7 @@ import * as SplashScreen from 'expo-splash-screen'
 import { StatusBar } from 'expo-status-bar'
 import { Provider, useAtom, useAtomValue } from 'jotai'
 import { waitForAll } from 'jotai/utils'
-import { ReactElement, ReactNode, Suspense, useMemo } from 'react'
+import { ReactElement, ReactNode, Suspense } from 'react'
 import { LogBox } from 'react-native'
 import 'react-native-gesture-handler'
 import { SafeAreaProvider } from 'react-native-safe-area-context'
@@ -88,19 +88,16 @@ function AppInitializer({ children }: { children: ReactNode }) {
     ])
   )
 
-  useMemo(() => {
-    tw.setColorScheme(colorScheme)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  useDeviceContext(tw, {
+    observeDeviceColorSchemeChanges: false,
+    initialColorScheme: colorScheme,
+  })
 
+  k.node.all.useQuery()
   k.member.checkin.useQuery({
     enabled: !!profile && enabledAutoCheckin,
   })
 
-  k.node.all.useQuery()
-
-  useDeviceContext(tw, { withDeviceColorScheme: false })
-
   return children as ReactElement
 }
 

diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "V2Fun",
     "slug": "v2ex",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "scheme": "v2fun",
     "jsEngine": "jsc",
     "icon": "./assets/icon.png",
@@ -20,7 +20,7 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.liaoliao666.v2ex",
-      "buildNumber": "1.7.0.1"
+      "buildNumber": "1.7.1.1"
     },
     "android": {
       "adaptiveIcon": {

diff --git a/components/StyledTextInput.tsx b/components/StyledTextInput.tsx
@@ -16,7 +16,7 @@ const StyledTextInput = forwardRef<
       ref={ref}
       autoCapitalize="none"
       placeholderTextColor={colors.default}
-      selectionColor={tw.color(`text-[${colors.primary}]`)}
+      selectionColor={colors.primary}
       {...props}
       style={tw.style(
         `bg-[${colors.base200}] h-9 px-3 rounded-lg text-[${colors.foreground}]`,

diff --git a/components/StyledToast.tsx b/components/StyledToast.tsx
@@ -42,7 +42,8 @@ function getToastProps(props: ToastConfigParams<any>) {
     style: tw`rounded-lg border-[${color}] bg-[${bgColor}] border border-solid border-l border-l-[${color}]`,
     contentContainerStyle: tw`overflow-hidden pl-0`,
     text1Style: tw.style(
-      `${fontSize.medium} font-semibold text-[${colors.foreground}]`
+      `${fontSize.medium} text-[${colors.foreground}]`,
+      props.text2 ? `font-semibold` : `font-normal`
     ),
     text2Style: tw`${fontSize.small} text-[${colors.default}]`,
     renderLeadingIcon: () => (

diff --git a/components/topic/ReplyItem.tsx b/components/topic/ReplyItem.tsx
@@ -54,9 +54,7 @@ function ReplyItem({
   inModalScreen?: boolean
   onLayout?: ViewProps['onLayout']
 }) {
-  const [isParsing, setIsParsing] = useState(
-    store.get(enabledParseContentAtom)!
-  )
+  const [isParsed, setIsParsed] = useState(store.get(enabledParseContentAtom)!)
 
   const { colors, fontSize } = useAtomValue(uiAtom)
 
@@ -145,13 +143,13 @@ function ReplyItem({
 
               reply.parsed_content && (
                 <Text
-                  key={'isParsing'}
+                  key={'isParsed'}
                   style={tw`text-[${colors.default}] ${fontSize.small}`}
                   onPress={() => {
-                    setIsParsing(!isParsing)
+                    setIsParsed(!isParsed)
                   }}
                 >
-                  {isParsing ? `显示原始回复` : `隐藏原始回复`}
+                  {isParsed ? `显示原始回复` : `隐藏原始回复`}
                 </Text>
               ),
             ])}
@@ -161,7 +159,7 @@ function ReplyItem({
             <Html
               source={{
                 html:
-                  isParsing && reply.parsed_content
+                  isParsed && reply.parsed_content
                     ? reply.parsed_content
                     : reply.content,
               }}
@@ -341,7 +339,7 @@ function MoreButton({
 }) {
   const { showActionSheetWithOptions } = useActionSheet()
 
-  const ignoreReplyResult = k.reply.ignore.useMutation()
+  const ignoreReplyMutation = k.reply.ignore.useMutation()
 
   const { colors } = useAtomValue(uiAtom)
 
@@ -392,12 +390,12 @@ function MoreButton({
                   return
                 }
 
-                if (ignoreReplyResult.isPending) return
+                if (ignoreReplyMutation.isPending) return
 
                 await confirm('确定隐藏该回复么?')
 
                 try {
-                  await ignoreReplyResult.mutateAsync({
+                  await ignoreReplyMutation.mutateAsync({
                     id: reply.id,
                     once: once!,
                   })

diff --git a/components/topic/TopicInfo.tsx b/components/topic/TopicInfo.tsx
@@ -45,9 +45,7 @@ export default function TopicInfo({
   onAppend: () => void
   children: ReactNode
 }) {
-  const [isParsing, setIsParsing] = useState(
-    store.get(enabledParseContentAtom)!
-  )
+  const [isParsed, setIsParsed] = useState(store.get(enabledParseContentAtom)!)
 
   const hasParsedText =
     !!topic.parsed_content || topic.supplements?.some(o => !!o.parsed_content)
@@ -86,13 +84,13 @@ export default function TopicInfo({
               </Text>,
               hasParsedText && (
                 <Text
-                  key={'isParsing'}
+                  key={'isParsed'}
                   style={tw`text-[${colors.default}] ${fontSize.small} mr-2`}
                   onPress={() => {
-                    setIsParsing(!isParsing)
+                    setIsParsed(!isParsed)
                   }}
                 >
-                  {isParsing ? `显示原始内容` : `隐藏原始内容`}
+                  {isParsed ? `显示原始内容` : `隐藏原始内容`}
                 </Text>
               ),
             ])}
@@ -136,7 +134,7 @@ export default function TopicInfo({
           <Html
             source={{
               html:
-                isParsing && topic.parsed_content
+                isParsed && topic.parsed_content
                   ? topic.parsed_content
                   : topic.content,
             }}
@@ -173,7 +171,7 @@ export default function TopicInfo({
                 <Html
                   source={{
                     html:
-                      isParsing && supplement.parsed_content
+                      isParsed && supplement.parsed_content
                         ? supplement.parsed_content
                         : supplement.content,
                   }}

diff --git a/components/topic/TopicItem.tsx b/components/topic/TopicItem.tsx
@@ -1,11 +1,14 @@
+import { hashKey } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
 import { compact, isEqual, maxBy } from 'lodash-es'
 import { memo } from 'react'
 import { Text, View } from 'react-native'
+import { inferData } from 'react-query-kit'
 
 import { uiAtom } from '@/jotai/uiAtom'
 import { getCurrentRouteName, navigation } from '@/navigation/navigationRef'
 import { Topic, k } from '@/servicies'
+import { useIsMatchedQuery } from '@/utils/query'
 import { isLargeTablet } from '@/utils/tablet'
 import tw from '@/utils/tw'
 
@@ -22,16 +25,15 @@ export interface TopicItemProps {
 export default memo(TopicItem, isEqual)
 
 function TopicItem({ topic, hideAvatar }: TopicItemProps) {
-  const { colors, fontSize } = useAtomValue(uiAtom)
-
-  const { data: isReaded } = k.topic.detail.useInfiniteQuery({
-    variables: { id: topic.id },
-    select: data => {
-      const replyCount = maxBy(data.pages, 'reply_count')?.reply_count || 0
+  const isReaded = useIsMatchedQuery(query => {
+    if (query.queryHash === hashKey(k.topic.detail.getKey({ id: topic.id }))) {
+      const data = query.state.data as inferData<typeof k.topic.detail>
+      const replyCount = maxBy(data?.pages, 'reply_count')?.reply_count || 0
       return replyCount >= topic.reply_count
-    },
-    enabled: false,
+    }
+    return false
   })
+  const { colors, fontSize } = useAtomValue(uiAtom)
 
   return (
     <DebouncedPressable

diff --git a/package.json b/package.json
@@ -63,15 +63,15 @@
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
     "react-native-tab-view": "^3.5.2",
-    "react-native-toast-message": "^2.1.6",
-    "react-native-webview": "13.6.4",
-    "react-native-youtube-iframe": "^2.2.2",
-    "react-query-kit": "^3.1.2",
+    "react-native-toast-message": "^2.2.0",
+    "react-native-webview": "^13.8.1",
+    "react-native-youtube-iframe": "^2.3.0",
+    "react-query-kit": "^3.2.0",
     "rn-placeholder": "^3.0.3",
     "showdown": "^2.1.0",
     "spark-md5": "^3.0.2",
     "suspend-react": "^0.1.3",
-    "twrnc": "^3.6.4",
+    "twrnc": "^4.1.0",
     "zod": "^3.19.1"
   },
   "devDependencies": {

diff --git a/screens/CustomizeThemeScreen.tsx b/screens/CustomizeThemeScreen.tsx
@@ -200,9 +200,7 @@ export default function CustomizeThemeScreen() {
         {renderSubtitle('字体')}
 
         <View style={tw`p-4 flex-row items-center`}>
-          <Text style={tw`text-[${colors.foreground}] ${fontSize.small}`}>
-            Aa
-          </Text>
+          <Text style={tw`text-[${colors.foreground}] text-[13px]`}>Aa</Text>
           <View style={tw`flex-1 px-5`}>
             <Slider
               value={fontScale} // set the current slider's value
@@ -230,9 +228,7 @@ export default function CustomizeThemeScreen() {
               CustomMark={undefined} // Provide your own component to render the marks. The type is a component: ({ value: number; active: boolean }) => JSX.Element ; value indicates the value represented by the mark, while active indicates wether a thumb is currently standing on the mark
             />
           </View>
-          <Text style={tw`text-[${colors.foreground}] ${fontSize.xlarge}`}>
-            Aa
-          </Text>
+          <Text style={tw`text-[${colors.foreground}] text-[19px]`}>Aa</Text>
         </View>
 
         {renderSubtitle('浅色')}