Merge pull request #166 from eurofurence/fix/feedback-round-fixes

fix: Issues from feedback

Author: Requinard

src/components/dealers/DealerCard.tsx

@@ -1,5 +1,5 @@
 import { Moment } from "moment/moment";
-import React, { FC } from "react";
+import React, { FC, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, View, ViewStyle } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
@@ -58,13 +58,11 @@ export const DealerCard: FC<DealerCardProps> = ({ containerStyle, style, dealer,
     const stylePre = useThemeBackground(present ? "primary" : "darken");
     const avatarBackground = useThemeBackground("primary");
 
+    const onPressBind = useCallback(() => onPress?.(dealer.details), [dealer.details, onPress]);
+    const onLongPressBind = useCallback(() => onLongPress?.(dealer.details), [dealer.details, onLongPress]);
+
     return (
-        <TouchableOpacity
-            containerStyle={containerStyle}
-            style={[styles.container, appStyles.shadow, styleBackground, style]}
-            onPress={() => onPress?.(dealer.details)}
-            onLongPress={() => onLongPress?.(dealer.details)}
-        >
+        <TouchableOpacity containerStyle={containerStyle} style={[styles.container, appStyles.shadow, styleBackground, style]} onPress={onPressBind} onLongPress={onLongPressBind}>
             <View style={[styles.pre, stylePre]}>
                 <Image style={[avatarBackground, styles.avatarCircle]} source={avatar} contentFit="contain" placeholder={assetSource("ych")} transition={60} />
             </View>

src/components/events/EventCard.tsx

@@ -1,5 +1,5 @@
 import moment, { Moment } from "moment-timezone";
-import React, { FC } from "react";
+import React, { FC, useCallback } from "react";
 import { StyleSheet, View, ViewStyle } from "react-native";
 import { TouchableOpacity } from "react-native-gesture-handler";
 
@@ -114,13 +114,11 @@ export const EventCard: FC<EventCardProps> = ({ containerStyle, style, type = "d
     const colorGlyph = useThemeColorValue("lighten");
     const colorHeart = useThemeColorValue(event.details.Banner ? "white" : "text");
 
+    const onPressBind = useCallback(() => onPress?.(event.details), [event.details, onPress]);
+    const onLongPressBind = useCallback(() => onLongPress?.(event.details), [event.details, onLongPress]);
+
     return (
-        <TouchableOpacity
-            containerStyle={containerStyle}
-            style={[styles.container, appStyles.shadow, styleContainer, style]}
-            onPress={() => onPress?.(event.details)}
-            onLongPress={() => onLongPress?.(event.details)}
-        >
+        <TouchableOpacity containerStyle={containerStyle} style={[styles.container, appStyles.shadow, styleContainer, style]} onPress={onPressBind} onLongPress={onLongPressBind}>
             <View style={[styles.pre, stylePre]}>
                 {!glyph ? null : (
                     <View key="eventGlyph" style={styles.glyphContainer}>

src/components/generic/containers/Header.tsx

@@ -31,10 +31,9 @@ export const Header: FC<HeaderProps> = (props) => {
     const styleBorder = useThemeBorder("darken");
 
     const navigation = useNavigation();
-
     return (
         <Row style={[styles.container, styleBackground, styleBorder, props.style]} type="center" variant="spaced">
-            <TouchableOpacity hitSlop={50} containerStyle={styles.back} onPress={() => navigation.goBack()}>
+            <TouchableOpacity hitSlop={180} containerStyle={styles.back} onPress={() => navigation.goBack()}>
                 <Icon name="chevron-left" size={iconSize} color={colorValue} />
             </TouchableOpacity>
 
@@ -79,12 +78,14 @@ const styles = StyleSheet.create({
         width: iconSize + iconPad,
         height: iconSize + iconPad,
         justifyContent: "center",
+        zIndex: 20,
     },
     secondary: {
         width: iconSize + iconPad,
         height: iconSize + iconPad,
         marginRight: -iconPad,
         justifyContent: "center",
+        zIndex: 20,
     },
     loading: {
         position: "absolute",

src/components/generic/containers/Tab.tsx

@@ -85,7 +85,8 @@ const styles = StyleSheet.create({
     container: {
         flex: 1,
         alignItems: "center",
-        padding: 16,
+        paddingVertical: 16,
+        paddingHorizontal: 4,
     },
     disabled: {
         opacity: 0.5,

src/components/generic/nav/useTabStyles.ts

@@ -8,8 +8,7 @@ export const useTabStyles = () => {
             fontWeight: "bold",
             textTransform: "none",
             borderRadius: 6,
-            padding: 6,
-            paddingHorizontal: 10,
+            marginHorizontal: -10,
             color: theme.invText,
             backgroundColor: theme.secondary,
         }),
@@ -22,5 +21,6 @@ const styles = StyleSheet.create({
     normal: {
         fontWeight: "bold",
         textTransform: "none",
+        marginHorizontal: -10,
     },
 });

src/components/maps/MapContent.tsx

@@ -165,18 +165,20 @@ export const MapContent: FC<MapContentProps> = ({ map, entry }) => {
                 </ZoomableView>
             </View>
 
-            <BottomSheet ref={refSheet} backgroundStyle={styleBackground} handleStyle={styles.handle} handleIndicatorStyle={styleHandle} snapPoints={["17%", "75%"]} index={0}>
-                <MapContentFlatList
-                    initialNumToRender={2}
-                    maxToRenderPerBatch={1}
-                    ListHeaderComponent={header}
-                    windowSize={5}
-                    data={results}
-                    keyExtractor={keyExtractor}
-                    renderItem={renderItem}
-                    contentContainerStyle={styles.mapContentContainer}
-                />
-            </BottomSheet>
+            {!map?.Entries?.length ? null : (
+                <BottomSheet ref={refSheet} backgroundStyle={styleBackground} handleStyle={styles.handle} handleIndicatorStyle={styleHandle} snapPoints={["17%", "75%"]} index={0}>
+                    <MapContentFlatList
+                        initialNumToRender={2}
+                        maxToRenderPerBatch={1}
+                        ListHeaderComponent={header}
+                        windowSize={5}
+                        data={results}
+                        keyExtractor={keyExtractor}
+                        renderItem={renderItem}
+                        contentContainerStyle={styles.mapContentContainer}
+                    />
+                </BottomSheet>
+            )}
         </>
     );
 };

src/components/settings/LanguagePicker.tsx

@@ -56,6 +56,7 @@ export const LanguagePicker = () => {
             <Picker<string>
                 selectedValue={i18n.language}
                 style={style}
+                itemStyle={style}
                 dropdownIconColor={style.color}
                 prompt={t("changeLanguage")}
                 onValueChange={(it: string) => {

src/components/sync/SynchronizationProvider.tsx

@@ -140,7 +140,7 @@ export const SynchronizationProvider: FC<PropsWithChildren> = ({ children }) =>
 
     // Dependent function.
     const synchronizeUi = useCallback(
-        async (vibrate: boolean = true) => {
+        async (vibrate: boolean = false) => {
             if (vibrate) Vibration.vibrate(400);
             try {
                 return await synchronize();

src/context/AuthContext.tsx

@@ -25,7 +25,7 @@ const redirectUri = authRedirect;
 /**
  * Token refresh interval.
  */
-const refreshInterval = 600_000;
+const refreshInterval = 3_600_000;
 
 /**
  * User claims record.

src/routes/artistalley/ArtistAlleyReg.tsx

@@ -46,7 +46,11 @@ export const ArtistAlleyReg = () => {
     const [show, setShow] = useState(true);
 
     return (
-        <ScrollView style={StyleSheet.absoluteFill} refreshControl={<RefreshControl refreshing={isFetching} onRefresh={refetch} />} stickyHeaderIndices={[0]}>
+        <ScrollView
+            style={StyleSheet.absoluteFill}
+            refreshControl={authorized ? <RefreshControl refreshing={isFetching} onRefresh={refetch} /> : undefined}
+            stickyHeaderIndices={[0]}
+        >
             <Header>{t("title")}</Header>
             <Floater containerStyle={appStyles.trailer}>
                 {!data?.State ? null : (