|
1 | | -import React, { type ReactElement, useContext, useEffect, useLayoutEffect, useState } from 'react'; |
| 1 | +import React, { type ReactElement, useCallback, useContext, useEffect, useLayoutEffect, useState } from 'react'; |
2 | 2 | import { StyleSheet, Text, View, type ViewStyle } from 'react-native'; |
3 | 3 | import Clipboard from '@react-native-clipboard/clipboard'; |
4 | 4 | import { Image } from 'expo-image'; |
@@ -123,33 +123,33 @@ const Url = ({ url }: { url: IUrl }) => { |
123 | 123 | const { colors, theme } = useTheme(); |
124 | 124 | const { baseUrl, user } = useContext(MessageContext); |
125 | 125 | const API_Embed = useAppSelector(state => state.settings.API_Embed); |
126 | | - const [imageUrl, setImageUrl] = useState(url.image); |
| 126 | + const [imageUrl, setImageUrl] = useState<string | null>(null); |
| 127 | + |
| 128 | + const getImageUrl = useCallback(() => { |
| 129 | + const _imageUrl = url.image || url.url; |
| 130 | + |
| 131 | + if (!_imageUrl) return null; |
| 132 | + if (_imageUrl.startsWith('http')) return _imageUrl; |
| 133 | + return `${baseUrl}/${_imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`; |
| 134 | + }, [url.image, url.url, baseUrl, user.id, user.token]); |
127 | 135 |
|
128 | 136 | useEffect(() => { |
129 | 137 | const verifyUrlIsImage = async () => { |
130 | 138 | try { |
131 | | - const imageUrl = getImageUrl(); |
132 | | - if (!imageUrl || !API_Embed) return; |
| 139 | + const _imageUrl = getImageUrl(); |
| 140 | + if (!_imageUrl || !API_Embed) return; |
133 | 141 |
|
134 | | - const response = await axios.head(imageUrl); |
| 142 | + const response = await axios.head(_imageUrl); |
135 | 143 | const contentType = response.headers['content-type']; |
136 | 144 | if (contentType?.startsWith?.('image/')) { |
137 | | - setImageUrl(imageUrl); |
| 145 | + setImageUrl(_imageUrl); |
138 | 146 | } |
139 | 147 | } catch { |
140 | 148 | // do nothing |
141 | 149 | } |
142 | 150 | }; |
143 | 151 | verifyUrlIsImage(); |
144 | | - }, [url.image, url.url, API_Embed]); |
145 | | - |
146 | | - const getImageUrl = () => { |
147 | | - const _imageUrl = url.image || url.url; |
148 | | - |
149 | | - if (!_imageUrl) return null; |
150 | | - if (_imageUrl.includes('http')) return _imageUrl; |
151 | | - return `${baseUrl}/${_imageUrl}?rc_uid=${user.id}&rc_token=${user.token}`; |
152 | | - }; |
| 152 | + }, [url.image, url.url, API_Embed, getImageUrl]); |
153 | 153 |
|
154 | 154 | const onPress = () => openLink(url.url, theme); |
155 | 155 |
|
|
0 commit comments