feat: optimize code

liaoliao666 · Mar 19, 2024 · 8223734 · 8223734
1 parent 1e7efb1
commit 8223734
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 81 deletions.
diff --git a/app.json b/app.json
@@ -2,7 +2,7 @@
   "expo": {
     "name": "V2Fun",
     "slug": "v2ex",
-    "version": "1.7.1",
+    "version": "1.7.2",
     "scheme": "v2fun",
     "jsEngine": "jsc",
     "icon": "./assets/icon.png",
@@ -20,7 +20,7 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.liaoliao666.v2ex",
-      "buildNumber": "1.7.1.1"
+      "buildNumber": "1.7.2.1"
     },
     "android": {
       "adaptiveIcon": {

diff --git a/components/Html/CodeRenderer.tsx b/components/Html/CodeRenderer.tsx
@@ -11,7 +11,7 @@ import RenderHTML, {
 } from 'react-native-render-html'
 
 import { colorSchemeAtom } from '@/jotai/themeAtom'
-import { uiAtom } from '@/jotai/uiAtom'
+import { isDefaultBgColor, uiAtom } from '@/jotai/uiAtom'
 import tw from '@/utils/tw'
 import { useScreenWidth } from '@/utils/useScreenWidth'
 
@@ -64,12 +64,25 @@ const CodeRenderer: CustomBlockRenderer = ({ tnode, style }) => {
         return copy
       }, [context, tnode])}
     >
-      <View style={tw.style(style, `bg-[#fafafa] dark:bg-[#282c34] rounded`)}>
+      <View
+        style={tw.style(
+          style,
+          `rounded`,
+          isDefaultBgColor(colors.base100)
+            ? `bg-[#fafafa] dark:bg-[#282c34]`
+            : `bg-[${colors.base200}] bg-opacity-50 dark:bg-opacity-100`
+        )}
+      >
         <WrapView horizontal nestedScrollEnabled>
           <RenderHTML
             {...getDefaultProps({ inModalScreen })}
             contentWidth={screenWidth - paddingX}
-            baseStyle={tw`text-[#383a42] dark:text-[#abb2bf] px-3 ${fontSize.medium}`}
+            baseStyle={tw.style(
+              `px-3 ${fontSize.medium}`,
+              isDefaultBgColor(colors.base100)
+                ? `text-[#383a42] dark:text-[#abb2bf]`
+                : `text-[${colors.foreground}]`
+            )}
             tagsStyles={{
               pre: tw`mt-2 mb-0`,
               a: tw`text-[${colors.primary}] no-underline`,

diff --git a/components/StyledImage.tsx b/components/StyledImage.tsx
@@ -86,7 +86,7 @@ function BaseImage({
     placeholderContentFit: 'cover',
     style: tw.style(
       // Compute image size if style has no size
-      !hasSize(style) && computeImageDispalySize(containerWidth, size),
+      !hasSize(style) && computeOptimalDispalySize(containerWidth, size),
       style as ViewStyle
     ),
   }
@@ -143,7 +143,7 @@ function imageLoadingRender({
   return (
     <View
       style={tw.style(
-        !hasSize(style) && computeImageDispalySize(containerWidth),
+        !hasSize(style) && computeOptimalDispalySize(containerWidth),
         `bg-[${getUI().colors.neutral}]`,
         style
       )}
@@ -185,7 +185,7 @@ const Svg = ({
   ...props
 }: UriProps & { containerWidth?: number }) => {
   const { xml, size } = suspend(getSvgInfo, [uri!])
-  const svgStyle = computeImageDispalySize(containerWidth, size)
+  const svgStyle = computeOptimalDispalySize(containerWidth, size)
 
   return (
     <SvgXml
@@ -246,7 +246,7 @@ const Gif = (props: StyledImageProps) => {
   )
 }
 
-function computeImageDispalySize(
+function computeOptimalDispalySize(
   containerWidth?: number,
   size?: UriInfo
 ): ViewStyle {
@@ -284,6 +284,13 @@ function computeImageDispalySize(
     }
   }
 
+  if (
+    size.width < Math.min(MAX_IMAGE_HEIGHT, containerWidth) &&
+    size.height < MAX_IMAGE_HEIGHT
+  ) {
+    return size
+  }
+
   const actualWidth = Math.min(aspectRatio * MAX_IMAGE_HEIGHT, containerWidth)
 
   if (actualWidth === containerWidth) {

diff --git a/components/topic/TopicItem.tsx b/components/topic/TopicItem.tsx
@@ -1,16 +1,14 @@
-import { hashKey } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
-import { compact, isEqual, maxBy } from 'lodash-es'
+import { compact, isEqual, isUndefined, 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'
+import { useQueryData } from '@/utils/useQueryData'
 
 import DebouncedPressable from '../DebouncedPressable'
 import Separator from '../Separator'
@@ -22,17 +20,17 @@ export interface TopicItemProps {
   hideAvatar?: boolean
 }
 
-export default memo(TopicItem, isEqual)
+export default memo(TopicItem, (prev, next) => isEqual(prev.topic, next.topic))
 
 function TopicItem({ topic, hideAvatar }: TopicItemProps) {
-  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
+  const isReaded = useQueryData(
+    k.topic.detail.getKey({ id: topic.id }),
+    data => {
+      if (isUndefined(data)) return false
+      const replyCount = maxBy(data.pages, 'reply_count')?.reply_count || 0
       return replyCount >= topic.reply_count
     }
-    return false
-  })
+  )
   const { colors, fontSize } = useAtomValue(uiAtom)
 
   return (

diff --git a/jotai/uiAtom.ts b/jotai/uiAtom.ts
@@ -5,14 +5,22 @@ import { store } from './store'
 import { colorSchemeAtom } from './themeAtom'
 import { atomWithAsyncStorage } from './utils/atomWithAsyncStorage'
 
+const DEFAULT_LIGHT_BG_COLOR = `rgba(255,255,255,1)`
+const DEFAULT_DARK_BG_COLOR = `#262626`
+export const isDefaultBgColor = (color: string) =>
+  color ===
+  (store.get(colorSchemeAtom) === 'light'
+    ? DEFAULT_LIGHT_BG_COLOR
+    : DEFAULT_DARK_BG_COLOR)
+
 export const defaultColors = {
   primary: {
     light: `rgb(29,155,240)`,
     dark: `rgb(29,155,240)`,
   },
   primaryContent: {
-    light: 'rgba(255,255,255,1)',
-    dark: 'rgba(255,255,255,1)',
+    light: `rgba(255,255,255,1)`,
+    dark: `rgba(255,255,255,1)`,
   },
   heart: {
     light: `rgb(249,24,128)`,
@@ -27,8 +35,8 @@ export const defaultColors = {
     dark: `rgb(128,128,128)`,
   },
   base100: {
-    light: 'rgba(255,255,255,1)',
-    dark: '#262626',
+    light: DEFAULT_LIGHT_BG_COLOR,
+    dark: DEFAULT_DARK_BG_COLOR,
   },
   base200: {
     light: 'rgb(239,243,244)',
@@ -94,7 +102,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'bumblebee',
     colorScheme: 'light',
     primary: 'rgba(255,217,0,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     primaryContent: 'rgba(76,69,40,1)',
     neutral: 'rgba(6,0,35,1)',
   },
@@ -103,15 +111,15 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'cmyk',
     colorScheme: 'light',
     primary: 'rgba(69,174,238,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     neutral: 'rgba(26,26,26,1)',
   },
   corporate: {
     label: '企业',
     name: 'corporate',
     colorScheme: 'light',
     primary: 'rgba(77,110,255,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     foreground: 'rgba(24,26,42,1)',
     neutral: 'rgba(24,26,42,1)',
   },
@@ -159,7 +167,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'emerald',
     colorScheme: 'light',
     primary: 'rgba(102,204,138,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     foreground: 'rgba(51,60,77,1)',
     primaryContent: 'rgba(34,61,48,1)',
     neutral: 'rgba(51,60,77,1)',
@@ -169,7 +177,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'fantasy',
     colorScheme: 'light',
     primary: 'rgba(109,0,118,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     foreground: 'rgba(31,41,55,1)',
     neutral: 'rgba(31,41,55,1)',
   },
@@ -189,7 +197,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     primary: 'rgba(254,0,117,1)',
     base100: 'rgba(233,231,231,1)',
     foreground: 'rgba(16,15,15,1)',
-    primaryContent: 'rgba(255,255,255,1)',
+    primaryContent: `rgba(255,255,255,1)`,
     neutral: 'rgba(41,30,0,1)',
   },
   halloween: {
@@ -206,7 +214,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'light',
     colorScheme: 'light',
     primary: 'rgba(74,0,255,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     base200: 'rgba(242,242,242,1)',
     base300: 'rgba(229,230,230,1)',
     foreground: 'rgba(31,41,55,1)',
@@ -217,18 +225,18 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'lofi',
     colorScheme: 'light',
     primary: 'rgba(13,13,13,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     base200: 'rgba(242,242,242,1)',
     base300: 'rgba(230,229,229,1)',
     foreground: 'rgba(0,0,0,1)',
-    primaryContent: 'rgba(255,255,255,1)',
+    primaryContent: `rgba(255,255,255,1)`,
     neutral: 'rgba(0,0,0,1)',
   },
   luxury: {
     label: '奢侈',
     name: 'luxury',
     colorScheme: 'dark',
-    primary: 'rgba(255,255,255,1)',
+    primary: DEFAULT_LIGHT_BG_COLOR,
     base100: 'rgba(9,9,11,1)',
     base200: 'rgba(23,22,24,1)',
     base300: 'rgba(46,45,47,1)',
@@ -240,7 +248,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'pastel',
     colorScheme: 'light',
     primary: 'rgba(209,193,215,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     base200: 'rgba(249,250,251,1)',
     base300: 'rgba(209,213,219,1)',
     neutral: 'rgba(112,172,199,1)',
@@ -280,7 +288,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'wireframe',
     colorScheme: 'light',
     primary: 'rgba(184,184,184,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     base200: 'rgba(238,238,238,1)',
     base300: 'rgba(221,221,221,1)',
     neutral: 'rgba(235,235,235,1)',
@@ -339,7 +347,7 @@ export const themeColorsMap: Record<string, ThemeColors> = {
     name: 'winter',
     colorScheme: 'light',
     primary: 'rgba(0,105,255,1)',
-    base100: 'rgba(255,255,255,1)',
+    base100: DEFAULT_LIGHT_BG_COLOR,
     base200: 'rgba(242,247,255,1)',
     base300: 'rgba(227,233,244,1)',
     foreground: 'rgba(57,78,106,1)',

diff --git a/screens/LoginScreen.tsx b/screens/LoginScreen.tsx
@@ -93,6 +93,7 @@ export default function LoginScreen() {
               value={value?.toString()}
               placeholder="用户名或电子邮件地址"
               keyboardType="email-address"
+              autoComplete="username"
             />
           )}
         />
@@ -110,6 +111,7 @@ export default function LoginScreen() {
               textContentType="password"
               secureTextEntry
               placeholder="请输入密码"
+              autoComplete="password"
             />
           )}
         />
@@ -198,12 +200,18 @@ export default function LoginScreen() {
           control={control}
           name="agreeTerms"
           render={({ field: { value, onChange } }) => (
-            <View style={tw`flex-row items-center mt-4`}>
+            <TouchableOpacity
+              style={tw`flex-row items-center mt-4`}
+              onPress={() => {
+                onChange(!value)
+              }}
+            >
               <BouncyCheckbox
-                isChecked={value}
                 onPress={() => {
                   onChange(!value)
                 }}
+                isChecked={value}
+                disableBuiltInState
                 size={16}
                 fillColor={tw`text-[${colors.primary}]`.color as string}
                 unfillColor={tw`dark:text-[#0f1419] text-white`.color as string}
@@ -236,11 +244,11 @@ export default function LoginScreen() {
                   《隐私政策》
                 </Text>
               </Text>
-            </View>
+            </TouchableOpacity>
           )}
         />
 
-        {(Platform.OS === 'android' || dayjs().isAfter('2024-03-19 12:00')) && (
+        {(Platform.OS === 'android' || dayjs().isAfter('2024-03-20 12:00')) && (
           <TouchableOpacity
             style={tw`w-full mt-4 flex-row justify-center items-center h-[52px] px-8`}
             onPress={() => {

diff --git a/screens/MemberDetailScreen.tsx b/screens/MemberDetailScreen.tsx
@@ -51,7 +51,7 @@ import TopicItem from '@/components/topic/TopicItem'
 import { blackListAtom } from '@/jotai/blackListAtom'
 import { store } from '@/jotai/store'
 import { colorSchemeAtom } from '@/jotai/themeAtom'
-import { formatColor, getUI, uiAtom } from '@/jotai/uiAtom'
+import { formatColor, getUI, isDefaultBgColor, uiAtom } from '@/jotai/uiAtom'
 import { navigation } from '@/navigation/navigationRef'
 import { Member, Topic, k } from '@/servicies'
 import { RootStackParamList } from '@/types'
@@ -65,12 +65,12 @@ const TAB_BAR_HEIGHT = 53
 const TAB_VIEW_MARGIN_TOP = -2
 
 function getTopBarBgCls() {
-  if (getUI().colors.base100 === 'rgba(255,255,255,1)')
-    return `bg-[rgb(51,51,68)]`
+  const { colors } = getUI()
+  if (isDefaultBgColor(colors.base100)) return `bg-[rgb(51,51,68)]`
   return `bg-[${formatColor(
     store.get(colorSchemeAtom) === 'light'
-      ? darken(getUI().colors.base300, 0.6)
-      : lighten(getUI().colors.base300, 0.2)
+      ? darken(colors.base300, 0.6)
+      : lighten(colors.base300, 0.2)
   )}]`
 }
 

diff --git a/screens/NodeTopicsScreen.tsx b/screens/NodeTopicsScreen.tsx
@@ -27,7 +27,7 @@ import TopicPlaceholder from '@/components/placeholder/TopicPlaceholder'
 import TopicItem from '@/components/topic/TopicItem'
 import { store } from '@/jotai/store'
 import { colorSchemeAtom } from '@/jotai/themeAtom'
-import { formatColor, getUI, uiAtom } from '@/jotai/uiAtom'
+import { formatColor, getUI, isDefaultBgColor, uiAtom } from '@/jotai/uiAtom'
 import { navigation } from '@/navigation/navigationRef'
 import { Topic, k } from '@/servicies'
 import { RootStackParamList } from '@/types'
@@ -39,7 +39,7 @@ import { useRefreshByUser } from '@/utils/useRefreshByUser'
 
 function getTopBarBgCls() {
   const { colors } = getUI()
-  if (colors.base100 === 'rgba(255,255,255,1)') return `bg-[rgb(51,51,68)]`
+  if (isDefaultBgColor(colors.base100)) return `bg-[rgb(51,51,68)]`
   return `bg-[${formatColor(
     store.get(colorSchemeAtom) === 'light'
       ? darken(colors.base300, 0.6)

diff --git a/screens/SearchOptionsScreen.tsx b/screens/SearchOptionsScreen.tsx
@@ -193,6 +193,7 @@ function SearchOptionsScreen() {
                 gte: '',
                 lte: '',
                 source: 'sov2ex',
+                node: '',
               })
             }}
           >