Skip to content

Commit 5fac359

Browse files
AmyrAhmadyAmyrAhmady
committed
initial refactoring steps, fix lots of performance
1 parent 4145f75 commit 5fac359

File tree

9 files changed

+181
-260
lines changed

9 files changed

+181
-260
lines changed

‎src/containers/FilterModal/index.tsx‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -124,20 +124,11 @@ const FiltersModal = () => {
124124
index === languageFilters.length - 1 ? 8 : 0,
125125
}}
126126
onPress={() => {
127-
const cpy = [...languages];
128-
if (selected) {
129-
const findIndex = cpy.findIndex((l) => l === lang.name);
130-
if (findIndex != -1) {
131-
cpy.splice(findIndex, 1);
132-
}
133-
} else {
134-
const findIndex = cpy.findIndex((l) => l === lang.name);
135-
if (findIndex == -1) {
136-
cpy.push(lang.name);
137-
}
138-
}
139-
140-
setSearchData("languages", cpy);
127+
const updatedLanguages = selected
128+
? languages.filter((l) => l !== lang.name)
129+
: [...languages, lang.name];
130+
131+
setSearchData("languages", updatedLanguages);
141132
}}
142133
>
143134
<CheckBox

‎src/containers/MainBody/BottomBar.tsx‎

Lines changed: 98 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { validateWebUrl } from "../../utils/helpers";
1212
import { sc } from "../../utils/sizeScaler";
1313
import Chart from "../PingChart";
1414

15-
const PropInfo = (props: {
15+
interface PropInfoProps {
1616
glow?: boolean;
1717
text: string;
1818
icon: string;
@@ -21,75 +21,41 @@ const PropInfo = (props: {
2121
buttonText?: string;
2222
buttonOnPress?: () => void;
2323
buttonColor?: string;
24-
}) => {
24+
}
25+
26+
const PropInfo = ({ glow, text, icon, iconSize, iconTitle, buttonText, buttonOnPress, buttonColor }: PropInfoProps) => {
2527
const { theme } = useTheme();
2628

27-
const MaybeGlow = props.glow ? (
28-
<div
29-
style={{
30-
filter: `drop-shadow(0 0 8px ${theme.primary}AA)`,
31-
}}
32-
>
33-
<Icon
34-
title={props.iconTitle}
35-
image={props.icon}
36-
size={props.iconSize}
37-
// color={theme.textSecondary}
38-
/>
29+
const iconComponent = glow ? (
30+
<div style={{ filter: `drop-shadow(0 0 8px ${theme.primary}AA)` }}>
31+
<Icon title={iconTitle} image={icon} size={iconSize} />
3932
</div>
4033
) : (
41-
<Icon
42-
title={props.iconTitle}
43-
image={props.icon}
44-
size={props.iconSize}
45-
color={theme.textSecondary}
46-
/>
34+
<Icon title={iconTitle} image={icon} size={iconSize} color={theme.textSecondary} />
4735
);
4836

4937
return (
50-
<View
51-
style={{
52-
flexDirection: "row",
53-
alignItems: "center",
54-
width: "100%",
55-
}}
56-
>
57-
<View
58-
style={{
59-
height: sc(28),
60-
width: sc(28),
61-
borderRadius: sc(5),
62-
backgroundColor: theme.itemBackgroundColor,
63-
justifyContent: "center",
64-
alignItems: "center",
65-
}}
66-
>
67-
{MaybeGlow}
38+
<View style={styles.propInfoContainer}>
39+
<View style={[styles.iconWrapper, { backgroundColor: theme.itemBackgroundColor }]}>
40+
{iconComponent}
6841
</View>
6942
<Text
7043
semibold
7144
color={theme.textPrimary}
72-
style={{ fontSize: sc(15), marginLeft: sc(8) }}
45+
style={styles.propInfoText}
7346
>
74-
{props.text}
47+
{text}
7548
</Text>
76-
{props.buttonText ? (
49+
{buttonText && (
7750
<TouchableOpacity
78-
style={{
79-
height: sc(25),
80-
paddingHorizontal: 5,
81-
borderRadius: sc(5),
82-
justifyContent: "center",
83-
backgroundColor: props.buttonColor,
84-
marginLeft: 6,
85-
}}
86-
onPress={() => props.buttonOnPress && props.buttonOnPress()}
51+
style={[styles.propButton, { backgroundColor: buttonColor }]}
52+
onPress={buttonOnPress}
8753
>
88-
<Text semibold color={"#FFFFFF"} style={{ fontSize: sc(14) }}>
89-
{props.buttonText}
54+
<Text semibold color="#FFFFFF" style={styles.buttonText}>
55+
{buttonText}
9056
</Text>
9157
</TouchableOpacity>
92-
) : null}
58+
)}
9359
</View>
9460
);
9561
};
@@ -122,104 +88,69 @@ const BottomBar = () => {
12288

12389
return (
12490
<View style={[styles.serverProperties]}>
125-
<View
126-
style={{
127-
flex: 1,
128-
flexDirection: "row",
129-
height: "100%",
130-
}}
131-
>
132-
<View
133-
style={{ flex: 0.6, top: sc(5), justifyContent: "space-between" }}
134-
>
91+
<View style={styles.mainContent}>
92+
<View style={styles.leftColumn}>
13593
<PropInfo
13694
iconTitle={server.usingOmp ? t("openmp_server") : ""}
13795
icon={server.usingOmp ? images.icons.omp : images.icons.internet}
13896
iconSize={server.usingOmp ? sc(20) : sc(16)}
13997
text={server.hostname}
14098
glow={server.usingOmp}
14199
/>
142-
<View style={{ flexDirection: "row", flex: 1, alignItems: "center" }}>
100+
<View style={styles.playerCountRow}>
143101
<PropInfo
144-
iconTitle={""}
102+
iconTitle=""
145103
icon={images.icons.ip}
146104
iconSize={sc(14)}
147105
text={`${server.ip}:${server.port}`}
148106
buttonText={t("copy")}
149107
buttonColor={theme.primary}
150-
buttonOnPress={() =>
151-
Clipboard.setString(`${server.ip}:${server.port}`)
152-
}
108+
buttonOnPress={() => Clipboard.setString(`${server.ip}:${server.port}`)}
153109
/>
154110
</View>
155111
<PropInfo
156-
iconTitle={""}
112+
iconTitle=""
157113
icon={images.icons.nickname}
158114
iconSize={sc(15)}
159115
text={`${server.playerCount}/${server.maxPlayers}`}
160116
/>
161117
</View>
162-
<View
163-
style={{
164-
flex: 0.4,
165-
top: sc(5),
166-
justifyContent: "space-between",
167-
alignItems: "flex-start",
168-
}}
169-
>
118+
<View style={styles.rightColumn}>
170119
<PropInfo
171-
iconTitle={""}
120+
iconTitle=""
172121
icon={images.icons.language}
173122
iconSize={sc(17)}
174-
text={`${server.language}`}
123+
text={server.language}
175124
/>
176125
{discordInvite.length ? (
177126
<TouchableOpacity
178-
style={{
179-
height: sc(28),
180-
paddingHorizontal: sc(10),
181-
borderRadius: sc(5),
182-
backgroundColor: "#5865F2",
183-
flexDirection: "row",
184-
alignItems: "center",
185-
justifyContent: "center",
186-
}}
187-
onPress={() => {
188-
shell.open(discordInvite);
189-
}}
127+
style={[styles.actionButton, { backgroundColor: "#5865F2" }]}
128+
onPress={() => shell.open(discordInvite)}
190129
>
191130
<Icon
192131
svg
193132
image={images.icons.discord}
194133
size={sc(16)}
195-
color={"#FFFFFF"}
134+
color="#FFFFFF"
196135
/>
197136
<Text
198137
semibold
199-
color={"#FFFFFF"}
200-
style={{ fontSize: sc(15), marginLeft: sc(8) }}
138+
color="#FFFFFF"
139+
style={styles.actionButtonText}
201140
>
202141
{t("join_discord")}
203142
</Text>
204143
</TouchableOpacity>
205144
) : (
206145
<PropInfo
207-
iconTitle={""}
146+
iconTitle=""
208147
icon={images.icons.mode}
209148
iconSize={sc(17)}
210-
text={`${server.gameMode}`}
149+
text={server.gameMode}
211150
/>
212151
)}
213152
<TouchableOpacity
214-
style={{
215-
height: sc(28),
216-
paddingHorizontal: sc(10),
217-
borderRadius: sc(5),
218-
backgroundColor: theme.primary,
219-
flexDirection: "row",
220-
alignItems: "center",
221-
justifyContent: "center",
222-
}}
153+
style={[styles.actionButton, { backgroundColor: theme.primary }]}
223154
onPress={() => {
224155
if (favorited) {
225156
removeFromFavorites(server);
@@ -232,12 +163,12 @@ const BottomBar = () => {
232163
svg
233164
image={favorited ? images.icons.favRemove : images.icons.favAdd}
234165
size={sc(16)}
235-
color={"#FF0000"}
166+
color="#FF0000"
236167
/>
237168
<Text
238169
semibold
239-
color={"#FFFFFF"}
240-
style={{ fontSize: sc(15), marginLeft: sc(8) }}
170+
color="#FFFFFF"
171+
style={styles.actionButtonText}
241172
>
242173
{favorited ? t("remove_from_favorites") : t("add_to_favorites")}
243174
</Text>
@@ -261,6 +192,65 @@ const styles = StyleSheet.create({
261192
height: sc(110),
262193
marginTop: sc(5),
263194
},
195+
propInfoContainer: {
196+
flexDirection: "row",
197+
alignItems: "center",
198+
width: "100%",
199+
},
200+
iconWrapper: {
201+
height: sc(28),
202+
width: sc(28),
203+
borderRadius: sc(5),
204+
justifyContent: "center",
205+
alignItems: "center",
206+
},
207+
propInfoText: {
208+
fontSize: sc(15),
209+
marginLeft: sc(8),
210+
},
211+
propButton: {
212+
height: sc(25),
213+
paddingHorizontal: 5,
214+
borderRadius: sc(5),
215+
justifyContent: "center",
216+
marginLeft: 6,
217+
},
218+
buttonText: {
219+
fontSize: sc(14),
220+
},
221+
leftColumn: {
222+
flex: 0.6,
223+
top: sc(5),
224+
justifyContent: "space-between",
225+
},
226+
rightColumn: {
227+
flex: 0.4,
228+
top: sc(5),
229+
justifyContent: "space-between",
230+
alignItems: "flex-start",
231+
},
232+
mainContent: {
233+
flex: 1,
234+
flexDirection: "row",
235+
height: "100%",
236+
},
237+
playerCountRow: {
238+
flexDirection: "row",
239+
flex: 1,
240+
alignItems: "center",
241+
},
242+
actionButton: {
243+
height: sc(28),
244+
paddingHorizontal: sc(10),
245+
borderRadius: sc(5),
246+
flexDirection: "row",
247+
alignItems: "center",
248+
justifyContent: "center",
249+
},
250+
actionButtonText: {
251+
fontSize: sc(15),
252+
marginLeft: sc(8),
253+
},
264254
});
265255

266256
export default BottomBar;

‎src/containers/MainBody/ServerInfo/index.tsx‎

Lines changed: 8 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,35 +25,14 @@ const ServerInfo = () => {
2525
}, [selected]);
2626

2727
const bannerUrl = useMemo(() => {
28-
if (selected) {
29-
if (selected.omp) {
30-
const dark = selected.omp.bannerDark;
31-
const light = selected.omp.bannerLight;
32-
if (themeType === "dark") {
33-
if (dark) {
34-
return dark;
35-
} else {
36-
if (light) {
37-
return light;
38-
} else {
39-
return "";
40-
}
41-
}
42-
} else {
43-
if (light) {
44-
return light;
45-
} else {
46-
if (dark) {
47-
return dark;
48-
} else {
49-
return "";
50-
}
51-
}
52-
}
53-
}
54-
}
55-
return "";
56-
}, [selected?.omp, themeType]);
28+
if (!selected?.omp) return "";
29+
30+
const { bannerDark, bannerLight } = selected.omp;
31+
const preferredBanner = themeType === "dark" ? bannerDark : bannerLight;
32+
const fallbackBanner = themeType === "dark" ? bannerLight : bannerDark;
33+
34+
return preferredBanner || fallbackBanner || "";
35+
}, [selected?.omp?.bannerDark, selected?.omp?.bannerLight, themeType]);
5736

5837
return (
5938
<View style={styles.serverInfoView}>

0 commit comments

Comments
 (0)