Skip to content

Commit 6eefdc0

Browse files
pushpender-singh-appushpender-singh-ap
committed
feat: enhance Home and Search screens with improved UI components and state management
1 parent 34c6253 commit 6eefdc0

File tree

2 files changed

+121
-104
lines changed

2 files changed

+121
-104
lines changed

‎src/Screens/Comic/Home/index.js

Lines changed: 71 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313

1414
import {SafeAreaView} from 'react-native-safe-area-context';
1515
import AntDesign from 'react-native-vector-icons/AntDesign';
16+
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
1617
import crashlytics from '@react-native-firebase/crashlytics';
1718
import analytics from '@react-native-firebase/analytics';
1819
import {getVersion} from 'react-native-device-info';
@@ -27,6 +28,7 @@ import {AppendAd} from '../../../InkNest-Externals/Ads/AppendAd';
2728
import AnimeAdbanner from '../../../Components/UIComp/AnimeAdBanner/AnimeAdbanner';
2829
import {clearHistory} from '../../../Redux/Reducers';
2930
import {ComicHostName} from '../../../Utils/APIs';
31+
import { widthPercentageToDP } from 'react-native-responsive-screen';
3032

3133
export function Home({navigation}) {
3234
const flatListRef = useRef(null);
@@ -96,34 +98,40 @@ export function Home({navigation}) {
9698
<SafeAreaView style={styles.container} edges={['top']}>
9799
<ScrollView showsVerticalScrollIndicator={false}>
98100
{/* Temp UI Start for Switch Server */}
99-
<TouchableOpacity
100-
onPress={() => {
101-
setChangeType(!changeType);
102-
crashlytics().log('Comic Host Name Clicked');
103-
}}
104-
style={{
105-
backgroundColor: 'rgba(255, 255, 255, 0.05)',
106-
borderRadius: 100,
107-
width: '100%',
108-
height: 40,
109-
paddingHorizontal: 20,
110-
flexDirection: 'row',
111-
alignItems: 'center',
112-
gap: 6,
113-
marginBottom: 24,
114-
}}>
115-
<Text
101+
<View style={{flex: 1, flexDirection: 'row', gap: 15}}>
102+
<TouchableOpacity
103+
onPress={() => {
104+
setChangeType(!changeType);
105+
crashlytics().log('Comic Host Name Clicked');
106+
}}
107+
style={styles.rectangle}>
108+
<Text
109+
style={{
110+
fontSize: 16,
111+
fontWeight: '700',
112+
color: '#fff',
113+
textAlign: 'left',
114+
}}>
115+
{type}
116+
</Text>
117+
<AntDesign name="down" size={20} color="#fff" />
118+
</TouchableOpacity>
119+
<TouchableOpacity
116120
style={{
117-
fontSize: 16,
118-
fontWeight: '700',
119-
color: '#fff',
120-
textAlign: 'left',
121-
opacity: 0.9,
121+
borderRadius: 100,
122+
backgroundColor: 'rgba(255, 255, 255, 0.05)',
123+
width: 40,
124+
height: 40,
125+
alignItems: 'center',
126+
justifyContent: 'center',
127+
}}
128+
onPress={() => {
129+
crashlytics().log('Home Search button clicked');
130+
navigation.navigate(NAVIGATION.search);
122131
}}>
123-
{type}
124-
</Text>
125-
<AntDesign name="down" size={20} color="#fff" />
126-
</TouchableOpacity>
132+
<AntDesign name="search1" size={20} color="#fff" />
133+
</TouchableOpacity>
134+
</View>
127135
{changeType ? (
128136
<View
129137
style={{
@@ -134,7 +142,7 @@ export function Home({navigation}) {
134142
gap: 6,
135143
paddingHorizontal: 20,
136144
marginBottom: 24,
137-
backgroundColor: 'rgba(0, 255, 255, 0.7)',
145+
backgroundColor: '#14142A',
138146
borderRadius: 10,
139147
paddingVertical: 10,
140148
paddingLeft: 10,
@@ -156,15 +164,15 @@ export function Home({navigation}) {
156164
<TouchableOpacity
157165
key={index}
158166
style={{
159-
backgroundColor: 'rgba(0,0,0,0.5)',
167+
backgroundColor: 'rgba(255,255,255,0.2)',
160168
borderRadius: 100,
161169
width: '100%',
162170
height: 40,
163171
paddingHorizontal: 20,
164172
flexDirection: 'row',
165173
alignItems: 'center',
166-
gap: 6,
167-
marginBottom: 24,
174+
gap: 10,
175+
marginVertical: 6,
168176
}}
169177
onPress={() => {
170178
crashlytics().log('Comic Host Name Clicked');
@@ -173,26 +181,37 @@ export function Home({navigation}) {
173181
});
174182
setType(key);
175183
getComicsHome(key, setComicsData, setLoading);
184+
setChangeType(false);
176185
}}>
177-
<Text
178-
style={{
179-
fontSize: 16,
180-
fontWeight: '700',
181-
color: '#fff',
182-
textAlign: 'left',
183-
opacity: 0.9,
184-
}}>
185-
{key}
186-
</Text>
187-
<Text
188-
style={{
189-
fontSize: 14,
190-
color: '#fff',
191-
textAlign: 'left',
192-
opacity: 0.3,
193-
}}>
194-
{ComicHostName[key]}
195-
</Text>
186+
{type == key ? (
187+
<AntDesign name="checkcircle" size={20} color="#fff" />
188+
) : (
189+
<MaterialIcons
190+
name="radio-button-unchecked"
191+
size={20}
192+
color="#fff"
193+
/>
194+
)}
195+
<View>
196+
<Text
197+
style={{
198+
fontSize: 16,
199+
fontWeight: '700',
200+
color: 'rgba(255, 255, 255, 1)',
201+
textAlign: 'left',
202+
opacity: 0.9,
203+
}}>
204+
{key}
205+
</Text>
206+
<Text
207+
style={{
208+
fontSize: 14,
209+
color: 'rgba(255, 255, 255, 0.5)',
210+
textAlign: 'left',
211+
}}>
212+
{ComicHostName[key]}
213+
</Text>
214+
</View>
196215
</TouchableOpacity>
197216
))}
198217
</View>
@@ -201,15 +220,7 @@ export function Home({navigation}) {
201220
{/* Temp UI End for Switch Server */}
202221

203222
<AnimeAdbanner />
204-
<TouchableOpacity
205-
style={styles.rectangle}
206-
onPress={() => {
207-
crashlytics().log('Home Search button clicked');
208-
navigation.navigate(NAVIGATION.search);
209-
}}>
210-
<AntDesign name="search1" size={20} color="#fff" />
211-
<Text style={styles.searchPeopleBy}>Search here</Text>
212-
</TouchableOpacity>
223+
213224
{!Object.values(History).length ? null : (
214225
<View style={styles.gameDetailsParent}>
215226
<View
@@ -333,13 +344,14 @@ const styles = StyleSheet.create({
333344
paddingTop: Platform.OS === 'android' ? 20 : 0,
334345
},
335346
rectangle: {
347+
flex: 1,
336348
borderRadius: 100,
337349
backgroundColor: 'rgba(255, 255, 255, 0.05)',
338-
width: '100%',
339350
height: 40,
340351
paddingHorizontal: 20,
341352
flexDirection: 'row',
342353
alignItems: 'center',
354+
justifyContent: 'space-between',
343355
gap: 6,
344356
marginBottom: 24,
345357
},

‎src/Screens/Search/Search.js

Lines changed: 50 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {useEffect, useState} from 'react';
1+
import React, {useEffect, useRef, useState} from 'react';
22
import {
33
View,
44
Text,
@@ -36,30 +36,15 @@ export function Search({navigation}) {
3636
const loading = useSelector(state => state.data.loading);
3737
const IsAnime = useSelector(state => state.data.Anime);
3838
const [searchTerm, setSearchTerm] = useState('');
39-
const [activeTab, setActiveTab] = useState('ComicOnline');
39+
const [activeTab, setActiveTab] = useState('ComicHub');
4040
const [viewAll, setViewAll] = useState(null);
41-
const [searchData, setSearchData] = useState({ComicOnline: [], ComicHub: []});
42-
const flatlistRef = React.useRef();
41+
const [searchData, setSearchData] = useState({ComicHub: [], ComicOnline: []});
42+
const flatlistRef = useRef();
4343
let Tag = View;
4444

4545
const fetchData = async () => {
4646
if (loading) return;
4747
if (!searchTerm.trim()) return;
48-
if (IsAnime) {
49-
console.log('searching by anime');
50-
51-
await analytics().logEvent('search_anime', {
52-
search: searchTerm?.trim()?.toString(),
53-
});
54-
let data = await SearchAnime(searchTerm, dispatch);
55-
if (data.length == 0) {
56-
setSearchData([]);
57-
Alert.alert('No results found');
58-
return;
59-
}
60-
setSearchData(data);
61-
return;
62-
}
6348

6449
await analytics().logEvent('search_comic', {
6550
search: searchTerm?.trim()?.toString(),
@@ -68,17 +53,19 @@ export function Search({navigation}) {
6853
// https://readcomicsonline.ru/comic/{comic-name}/{chapter-name}
6954
let link = searchTerm.trim();
7055
if (
71-
!link.startsWith('https://readcomicsonline.ru/comic/') ||
56+
(!link.startsWith('https://readcomicsonline.ru/comic/') &&
57+
!link.startsWith('https://comichubfree.com/comic/')) ||
7258
!link.includes('comic/')
7359
) {
74-
const [readcomicsonlineResult, comichubfreeResult] = await Promise.all([
75-
dispatch(searchComic(link, 'readcomicsonline')),
60+
if (link.startsWith('http://') || link.startsWith('https://')) {
61+
Alert.alert('Invalid link', 'Please enter a valid comic link');
62+
return;
63+
}
64+
65+
const [comichubfreeResult, readcomicsonlineResult] = await Promise.all([
7666
dispatch(searchComic(link, 'comichubfree')),
67+
dispatch(searchComic(link, 'readcomicsonline')),
7768
]);
78-
console.log('readcomicsonlineResult', {
79-
readcomicsonlineResult,
80-
comichubfreeResult,
81-
});
8269

8370
if (readcomicsonlineResult || comichubfreeResult) {
8471
if (
@@ -88,8 +75,8 @@ export function Search({navigation}) {
8875
Alert.alert('No results found');
8976
}
9077
setSearchData({
91-
ComicOnline: readcomicsonlineResult,
9278
ComicHub: comichubfreeResult,
79+
ComicOnline: readcomicsonlineResult,
9380
});
9481
}
9582
return;
@@ -196,8 +183,8 @@ export function Search({navigation}) {
196183
alignItems: 'center',
197184
gap: 12,
198185
}}>
199-
<Text style={{fontSize: 5, color: 'white', marginLeft: 12}}>
200-
{'\u2B24'}
186+
<Text style={{fontSize: 14, color: 'white', marginLeft: 12}}>
187+
{index + 1}.
201188
</Text>
202189
<Text style={styles.link}>{item?.title}</Text>
203190
</TouchableOpacity>
@@ -248,7 +235,7 @@ export function Search({navigation}) {
248235
<View
249236
style={{
250237
flexDirection: 'row',
251-
left: IsAnime ? 0 : widthPercentageToDP('6%'),
238+
left: widthPercentageToDP('7%'),
252239
}}>
253240
<Text
254241
style={{
@@ -335,8 +322,11 @@ export function Search({navigation}) {
335322
<View
336323
style={{
337324
flexDirection: 'row',
338-
alignItems: 'center',
339-
gap: 5,
325+
marginTop: 24,
326+
paddingHorizontal: 16,
327+
borderBottomColor: 'rgba(255,255,255,0.1)',
328+
borderBottomWidth: 1,
329+
justifyContent: 'space-between',
340330
}}>
341331
{Object.keys(searchData).map((key, idx) => {
342332
return (
@@ -346,27 +336,40 @@ export function Search({navigation}) {
346336
setActiveTab(key);
347337
}}
348338
style={{
349-
paddingVertical: 5,
350-
paddingHorizontal: 10,
351-
borderRadius: 12,
352-
backgroundColor:
353-
activeTab !== key ? '#14142a' : 'steelblue',
339+
marginRight: 28,
340+
borderBottomColor:
341+
activeTab === key ? '#3268de' : 'transparent',
342+
borderBottomWidth: 2,
343+
paddingBottom: 4,
344+
flexDirection: 'row',
345+
gap: 6,
354346
}}>
355347
<Text
356-
style={[
357-
activeTab !== key
358-
? styles.SwitchUnselectedText
359-
: styles.SwitchSelectedText,
360-
]}>
348+
style={{
349+
fontSize: 14,
350+
fontWeight: '700',
351+
color:
352+
activeTab === key
353+
? 'rgba(255,255,255,1)'
354+
: 'rgba(255,255,255,0.6)',
355+
}}>
361356
{key}
362357
</Text>
358+
<Text
359+
style={{
360+
fontSize: 14,
361+
fontWeight: '700',
362+
color:
363+
activeTab === key
364+
? 'rgba(255, 6, 6, 1)'
365+
: 'rgba(255, 6, 6, 0.6)',
366+
}}>
367+
({searchData[key]?.length})
368+
</Text>
363369
</TouchableOpacity>
364370
);
365371
})}
366372
</View>
367-
<Text style={styles.title}>
368-
Total results: {searchData?.[activeTab]?.length}
369-
</Text>
370373
</View>
371374
}
372375
ListEmptyComponent={
@@ -403,6 +406,8 @@ export function Search({navigation}) {
403406
ListFooterComponent={
404407
<View style={{marginVertical: heightPercentageToDP('6%')}} />
405408
}
409+
maxToRenderPerBatch={15}
410+
initialNumToRender={10}
406411
/>
407412
<Modal
408413
transparent

0 commit comments

Comments
 (0)