chore(app): cleanup code style

App.tsx

@@ -25,8 +25,8 @@ SplashScreen.preventAutoHideAsync();
 
 export default function App() {
   const shouldDelete = false;
-
   const queryClient = new QueryClient();
+
   useOnAppStateChange();
   useChangeScreenOrientation();
 
@@ -36,7 +36,7 @@ export default function App() {
   }
 
   /**
-   * supports auto refetch on reconnect for react-query
+   * support auto refetch on network reconnect for react-query
    */
   onlineManager.setEventListener(setOnline => {
     return NetInfo.addEventListener(state => {

package.json

@@ -44,6 +44,7 @@
     "@react-navigation/stack": "^6.3.20",
     "@shopify/flash-list": "1.6.4",
     "@tanstack/react-query": "^5.17.10",
+    "@types/qs": "^6.9.16",
     "async-mutex": "^0.4.1",
     "axios": "^1.7.7",
     "clsx": "^2.1.0",
@@ -67,9 +68,11 @@
     "expo-status-bar": "~1.12.1",
     "expo-updates": "~0.25.27",
     "express": "^4.21.0",
+    "lodash": "^4.17.21",
     "newrelic-react-native-agent": "^1.4.5",
     "pino": "^8.17.2",
     "pino-pretty": "^10.3.1",
+    "qs": "^6.13.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
@@ -97,7 +100,7 @@
     "@testing-library/react-native": "^12.4.3",
     "@types/express": "^5.0.0",
     "@types/jest": "^29.5.11",
-    "@types/lodash": "^4.14.202",
+    "@types/lodash": "^4.17.9",
     "@types/react": "~18.2.14",
     "@types/react-native-vector-icons": "^6.4.18",
     "@types/react-native-video": "^5.0.19",

src/components/CategoryCard.tsx

@@ -5,7 +5,14 @@ import {
 import { Category } from '@app/services/twitchService';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
 import { Image } from 'expo-image';
-import { Pressable, View, Text } from 'react-native';
+import {
+  Pressable,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  ImageStyle,
+} from 'react-native';
 
 interface Props {
   category: Category;
@@ -15,7 +22,7 @@ const IMAGE_ASPECT_RATIO = 110 / 155;
 const IMAGE_HEIGHT = 90;
 const IMAGE_WIDTH = IMAGE_HEIGHT * IMAGE_ASPECT_RATIO;
 
-const CategoryCard = ({ category }: Props) => {
+export default function CategoryCard({ category }: Props) {
   const { navigate } = useNavigation<NavigationProp<CategoryStackParamList>>();
 
   return (
@@ -31,30 +38,15 @@ const CategoryCard = ({ category }: Props) => {
         })
       }
     >
-      <View
-        style={{
-          marginBottom: 17,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'flex-start',
-          justifyContent: 'space-between',
-        }}
-      >
-        <View
-          style={{
-            marginRight: 16,
-          }}
-        >
+      <View style={styles.container}>
+        <View style={styles.wrapper}>
           <Image
             source={{
               uri: category.box_art_url
                 .replace('{width}', '200')
                 .replace('{height}', '250'),
             }}
-            style={{
-              width: IMAGE_WIDTH,
-              height: IMAGE_HEIGHT,
-            }}
+            style={styles.image}
           />
         </View>
         <View
@@ -70,5 +62,26 @@ const CategoryCard = ({ category }: Props) => {
       </View>
     </Pressable>
   );
-};
-export default CategoryCard;
+}
+
+const styles = StyleSheet.create<{
+  container: ViewStyle;
+  image: ImageStyle;
+  wrapper: ViewStyle;
+}>({
+  container: {
+    marginBottom: 17,
+    marginLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+  },
+  image: {
+    width: IMAGE_WIDTH,
+    height: IMAGE_HEIGHT,
+  },
+  wrapper: {
+    marginRight: 16,
+  },
+});

src/components/Chat/Chat.tsx → src/components/Chat.tsx

@@ -16,7 +16,7 @@ interface Message {
   content: ReactNode;
 }
 
-const Chat = ({ channels, twitchChannelId }: Props) => {
+export default function Chat({ channels, twitchChannelId }: Props) {
   const { auth, user } = useAuthContext();
   const navigation = useNavigation();
   const [notice, setNotice] = useState<string>('');
@@ -148,5 +148,4 @@ const Chat = ({ channels, twitchChannelId }: Props) => {
       </View>
     </SafeAreaView>
   );
-};
-export default Chat;
+}

src/components/DismissableKeyboard.tsx

@@ -5,11 +5,10 @@ interface Props {
   children: ReactNode;
 }
 
-const DismissableKeyboard = ({ children }: Props) => {
+export default function DismissableKeyboard({ children }: Props) {
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
       {children}
     </TouchableWithoutFeedback>
   );
-};
-export default DismissableKeyboard;
+}

src/components/Image.tsx

@@ -3,14 +3,9 @@ import { Image as ExpoImage, ImageProps } from 'expo-image';
 const blurhash =
   '|rF?hV%2WCj[ayj[a|j[az_NaeWBj@ayfRayfQfQM{M|azj[azf6fQfQfQIpWXofj[ayj[j[fQayWCoeoeaya}j[ayfQa{oLj?j[WVj[ayayj[fQoff7azayj[ayj[j[ayofayayayj[fQj[ayayj[ayfjj[j[ayjuayj[';
 
-const Image = ({ placeholder = blurhash, ...props }: ImageProps) => {
-  return (
-    <ExpoImage
-      contentFit="cover"
-      transition={0}
-      placeholder={placeholder}
-      {...props}
-    />
-  );
-};
-export default Image;
+export default function Image({
+  placeholder = blurhash,
+  ...props
+}: ImageProps) {
+  return <ExpoImage contentFit="cover" placeholder={placeholder} {...props} />;
+}

src/components/SafeAreaContainer.tsx

@@ -5,7 +5,7 @@ interface Props {
   children: ReactNode;
 }
 
-const SafeAreaContainer = ({ children }: Props) => {
+export default function SafeAreaContainer({ children }: Props) {
   return (
     <SafeAreaView
       edges={['top', 'bottom', 'left', 'right']}
@@ -16,5 +16,4 @@ const SafeAreaContainer = ({ children }: Props) => {
       {children}
     </SafeAreaView>
   );
-};
-export default SafeAreaContainer;
+}

src/components/Seperator.tsx

@@ -5,7 +5,7 @@ interface Props {
   size?: number;
 }
 
-const Seperator = ({ color = 'blue', size = 0.5 }: Props) => {
+export default function Seperator({ color = 'blue', size = 0.5 }: Props) {
   return (
     <View
       style={{
@@ -16,5 +16,4 @@ const Seperator = ({ color = 'blue', size = 0.5 }: Props) => {
       }}
     />
   );
-};
-export default Seperator;
+}

src/components/SettingsItem.tsx

@@ -25,7 +25,7 @@ interface Props {
   contents: ContentItem[];
 }
 
-const SettingsItem = ({ contents }: Props) => {
+export default function SettingsItem({ contents }: Props) {
   return (
     <View>
       <Text>Settings</Text>
@@ -66,7 +66,7 @@ const SettingsItem = ({ contents }: Props) => {
       />
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   item: {
@@ -90,5 +90,3 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-
-export default SettingsItem;

src/components/StreamCard.tsx

@@ -16,7 +16,7 @@ interface Props {
   stream: Stream;
 }
 
-const StreamCard = ({ stream }: Props) => {
+export default function StreamCard({ stream }: Props) {
   const { navigate } = useNavigation<NavigationProp<HomeTabsParamList>>();
   const [broadcasterImage, setBroadcasterImage] = useState<string>();
 
@@ -175,5 +175,4 @@ const StreamCard = ({ stream }: Props) => {
       </View>
     </View>
   );
-};
-export default StreamCard;
+}