Merge pull request #278 from Windesheim-AI/fix-lint-errors

WIP: formatting etc.

package.json

@@ -83,7 +83,6 @@
         "react-native-screens": "~3.29.0",
         "react-native-svg": "14.1.0",
         "react-native-svg-transformer": "^1.1.0",
-        "react-native-switch": "^1.5.1",
         "react-native-vector-icons": "^10.0.3",
         "react-native-web": "~0.19.6",
         "react-native-web-webview": "^1.0.2",
@@ -92,7 +91,6 @@
         "react-navigation": "^5.0.0",
         "react-numeric-input": "^2.2.3",
         "react-redux": "^8.1.3",
-        "react-svg-radar-chart": "^1.4.0",
         "redux-persist": "^6.0.0",
         "styled-components": "^6.1.13",
         "swr": "^2.2.4"

src/components/Scans/ScansOverview.tsx

@@ -18,7 +18,6 @@ type Props = {
 export function ScansOverview({ limit }: Props) {
     const fonts = useFonts();
     const { data, isLoading, error } = useAllScans();
-    console.log(data);
     const scans = useMapMultipleScansToData(data);
     const navigator = useNavigation();
     const isLimited = limit !== undefined && limit > 0;

src/components/Scans/card/ScanCard.tsx

@@ -1,9 +1,11 @@
+/* eslint-disable react-native/no-color-literals */
+
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
+
 import {
     useColorConfig,
     useColorStateConfig,
-    useCurrentTheme,
 } from '../../../lib/constants/Colors';
 import { useFonts } from '../../../lib/constants/Fonts';
 import { Card } from '../../general/base/Card';
@@ -29,7 +31,6 @@ export function ScanCard({
     const colors = useColorConfig();
     const fonts = useFonts();
     const stateColors = useColorStateConfig();
-    const theme = useCurrentTheme();
 
     const styles = StyleSheet.create({
         card: {
@@ -65,6 +66,7 @@ export function ScanCard({
             paddingHorizontal: 15,
             ...fonts.stageTime,
         },
+        cardImage: { width: '100%', height: 'auto' },
     });
 
     return (
@@ -78,7 +80,7 @@ export function ScanCard({
                                 : 'https://placehold.co/200X100/EEE/31343C'
                         }
                         alt="Scan Image"
-                        style={{ width: '100%', height: 'auto' }}
+                        style={styles.cardImage}
                     />
                 </View>
 

src/components/general/buttons/MenuButton.tsx

@@ -1,44 +1,114 @@
+/* eslint-disable react-native/no-color-literals */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+
 import { useNavigation } from '@react-navigation/native';
+import { useColorConfig } from 'lib/constants/Colors';
 import React, { useState, useEffect } from 'react';
 import {
     StyleSheet,
     TouchableOpacity,
     View,
     Animated,
-    Dimensions,
     Text,
     Image,
+    useWindowDimensions,
+    ImageSourcePropType,
 } from 'react-native';
+
 import { HapticFeedback, HapticForces } from '../../../lib/haptic/Hooks';
 import { navigationBarLinks } from '../../../routes/navigation';
-import { useAppSelector } from '../../../lib/redux/Hooks';
-import { SettingsButton } from '../buttons/SettingButton'; 
-
-const { height: screenHeight, width: screenWidth } = Dimensions.get('window');
+import { SettingsButton } from '../buttons/SettingButton';
 
 export const MenuButton = () => {
+    const colors = useColorConfig();
+    const { height: screenHeight, width: screenWidth } = useWindowDimensions();
     const navigation = useNavigation();
     const [menuVisible, setMenuVisible] = useState(false);
+    // eslint-disable-next-line react/hook-use-state
     const slideAnim = useState(new Animated.Value(-275))[0];
-    const navigationState = useAppSelector((state) => state.navigation);
+
+    const styles = StyleSheet.create({
+        container: {
+            position: 'absolute',
+            top: 20,
+            right: 20,
+            zIndex: 3,
+        },
+        hamburger: {
+            justifyContent: 'space-between',
+            height: 24,
+        },
+        bar: {
+            height: 3,
+            width: 30,
+            borderRadius: 2,
+            backgroundColor: colors.black,
+            marginVertical: 2,
+        },
+        overlay: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: screenWidth,
+            height: screenHeight,
+            backgroundColor: colors.black,
+            opacity: 0.5,
+            zIndex: 2,
+        },
+        menuContainer: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            width: 300,
+            height: screenHeight,
+            backgroundColor: colors.white,
+            paddingTop: 0,
+            zIndex: 3,
+            elevation: 3,
+            shadowColor: colors.black,
+            shadowOffset: { width: 2, height: 2 },
+            shadowOpacity: 0.3,
+            shadowRadius: 5,
+        },
+        menuTitle: {
+            padding: 20,
+            fontSize: 22,
+            fontWeight: 'bold',
+            borderBottomWidth: 1,
+            borderBottomColor: colors.black,
+            color: '#4695D3',
+        },
+        menuItem: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 15,
+        },
+        menuIcon: {
+            width: 25,
+            height: 25,
+            marginRight: 10,
+        },
+        menuText: {
+            fontSize: 15,
+            color: colors.black,
+            marginLeft: 10,
+        },
+    });
 
     useEffect(() => {
         Animated.timing(slideAnim, {
             toValue: menuVisible ? 0 : -275,
             duration: 300,
             useNativeDriver: true,
         }).start();
-    }, [menuVisible]);
+    }, [menuVisible, slideAnim]);
 
     const toggleMenu = () => {
         HapticFeedback(HapticForces.Light);
-        setMenuVisible((prev) => !prev); 
+        setMenuVisible((prev) => !prev);
     };
 
-    function isRouteActive(route: string) {
-        return navigationState.selectedNavBarRoute === route;
-    }
-
     return (
         <>
             <TouchableOpacity style={styles.container} onPress={toggleMenu}>
@@ -49,11 +119,19 @@ export const MenuButton = () => {
                 </View>
             </TouchableOpacity>
 
-            {menuVisible && (
+            {menuVisible ? (
                 <>
-                    <TouchableOpacity style={styles.overlay} onPress={toggleMenu} />
+                    <TouchableOpacity
+                        style={styles.overlay}
+                        onPress={toggleMenu}
+                    />
 
-                    <Animated.View style={[styles.menuContainer, { transform: [{ translateX: slideAnim }] }]}>
+                    <Animated.View
+                        style={[
+                            styles.menuContainer,
+                            { transform: [{ translateX: slideAnim }] },
+                        ]}
+                    >
                         <Text style={styles.menuTitle}>Menu</Text>
 
                         {navigationBarLinks.map((link) => (
@@ -62,24 +140,31 @@ export const MenuButton = () => {
                                 style={styles.menuItem}
                                 onPress={() => {
                                     HapticFeedback(HapticForces.Light);
-                                    navigation.navigate(link.route);
+                                    navigation.navigate(link.route as never);
                                     toggleMenu();
                                 }}
                             >
-                                <Image source={getIcon(link.icon)} style={styles.menuIcon} />
+                                <Image
+                                    source={
+                                        getIcon(
+                                            link.icon,
+                                        ) as ImageSourcePropType
+                                    }
+                                    style={styles.menuIcon}
+                                />
                                 <Text style={styles.menuText}>{link.icon}</Text>
                             </TouchableOpacity>
                         ))}
 
                         <SettingsButton toggleMenu={toggleMenu} />
                     </Animated.View>
                 </>
-            )}
+            ) : null}
         </>
     );
 };
 
-const getIcon = (iconName: string) => {
+const getIcon = (iconName: string): number | null => {
     switch (iconName) {
         case 'home':
             return require('../../../assets/images/navbarIcons/Home.png');
@@ -97,71 +182,3 @@ const getIcon = (iconName: string) => {
             return null;
     }
 };
-
-const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        top: 20,
-        right: 20,
-        zIndex: 3,
-    },
-    hamburger: {
-        justifyContent: 'space-between',
-        height: 24,
-    },
-    bar: {
-        height: 3,
-        width: 30,
-        borderRadius: 2,
-        backgroundColor: 'black',
-        marginVertical: 2,
-    },
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: screenWidth,
-        height: screenHeight,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)', 
-        zIndex: 2,
-    },
-    menuContainer: {
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        left: 0,
-        width: 300,
-        height: screenHeight,
-        backgroundColor: 'white',
-        paddingTop: 0,
-        zIndex: 3,
-        elevation: 3,
-        shadowColor: '#000',
-        shadowOffset: { width: 2, height: 2 },
-        shadowOpacity: 0.3,
-        shadowRadius: 5,
-    },
-    menuTitle: {
-        padding: 20,
-        fontSize: 22,
-        fontWeight: 'bold',
-        borderBottomWidth: 1,
-        borderBottomColor: '#000',
-        color: '#4695D3',
-    },
-    menuItem: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 15,
-    },
-    menuIcon: {
-        width: 25,
-        height: 25,
-        marginRight: 10,
-    },
-    menuText: {
-        fontSize: 15,
-        color: 'black',
-        marginLeft: 10,
-    },
-});

src/components/general/buttons/SettingButton.tsx

@@ -9,15 +9,20 @@ import {
 } from 'react-native';
 
 import SettingsIcon from '../../../assets/images/Icon/settings_icon.png';
-import { useCurrentTheme } from '../../../lib/constants/Colors';
+import { useColorConfig, useCurrentTheme } from '../../../lib/constants/Colors';
 import { HapticFeedback, HapticForces } from '../../../lib/haptic/Hooks';
 import { Routes } from '../../../routes/routes';
 
 const theme = {
     darkIconTintColor: '#FFFFFF',
 };
 
-export const SettingsButton = ({ toggleMenu }) => {
+interface SettingsButtonProps {
+    toggleMenu: () => void;
+}
+
+export const SettingsButton = ({ toggleMenu }: SettingsButtonProps) => {
+    const colors = useColorConfig();
     const navigation = useNavigation();
     const currentTheme = useCurrentTheme();
 
@@ -27,6 +32,28 @@ export const SettingsButton = ({ toggleMenu }) => {
         toggleMenu(); // Close the menu after navigation
     };
 
+    const styles = StyleSheet.create({
+        container: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            padding: 10,
+        },
+        lightIcon: {
+            width: 37,
+            height: 37,
+        },
+        darkIcon: {
+            width: 37,
+            height: 37,
+            tintColor: theme.darkIconTintColor,
+        },
+        menuText: {
+            fontSize: 15,
+            color: colors.black,
+            marginLeft: 10,
+        },
+    });
+
     const iconStyle =
         currentTheme === 'dark' ? styles.darkIcon : styles.lightIcon;
 
@@ -40,25 +67,3 @@ export const SettingsButton = ({ toggleMenu }) => {
         </TouchableOpacity>
     );
 };
-
-const styles = StyleSheet.create({
-    container: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        padding: 10,
-    },
-    lightIcon: {
-        width: 37,
-        height: 37,
-    },
-    darkIcon: {
-        width: 37,
-        height: 37,
-        tintColor: theme.darkIconTintColor,
-    },
-    menuText: {
-        fontSize: 15,
-        color: 'black',
-        marginLeft: 10,
-    },
-});