diff --git a/package.json b/package.json index 3596e8a8..7d5c25f6 100644 --- a/package.json +++ b/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" diff --git a/src/components/Scans/ScansOverview.tsx b/src/components/Scans/ScansOverview.tsx index 5eb4706d..5df82acf 100644 --- a/src/components/Scans/ScansOverview.tsx +++ b/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; diff --git a/src/components/Scans/card/ScanCard.tsx b/src/components/Scans/card/ScanCard.tsx index d0af2718..32d014a3 100644 --- a/src/components/Scans/card/ScanCard.tsx +++ b/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} /> diff --git a/src/components/general/buttons/MenuButton.tsx b/src/components/general/buttons/MenuButton.tsx index 459a3061..5a605065 100644 --- a/src/components/general/buttons/MenuButton.tsx +++ b/src/components/general/buttons/MenuButton.tsx @@ -1,26 +1,100 @@ +/* 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, { @@ -28,17 +102,13 @@ export const MenuButton = () => { 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 ( <> @@ -49,11 +119,19 @@ export const MenuButton = () => { - {menuVisible && ( + {menuVisible ? ( <> - + - + Menu {navigationBarLinks.map((link) => ( @@ -62,11 +140,18 @@ export const MenuButton = () => { style={styles.menuItem} onPress={() => { HapticFeedback(HapticForces.Light); - navigation.navigate(link.route); + navigation.navigate(link.route as never); toggleMenu(); }} > - + {link.icon} ))} @@ -74,12 +159,12 @@ export const MenuButton = () => { - )} + ) : 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, - }, -}); diff --git a/src/components/general/buttons/SettingButton.tsx b/src/components/general/buttons/SettingButton.tsx index bd0a50a8..3929466c 100644 --- a/src/components/general/buttons/SettingButton.tsx +++ b/src/components/general/buttons/SettingButton.tsx @@ -9,7 +9,7 @@ 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'; @@ -17,7 +17,12 @@ 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 }) => { ); }; - -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, - }, -}); diff --git a/src/components/general/card/DisclaimerCard.tsx b/src/components/general/card/DisclaimerCard.tsx index 23a2fc67..db49d034 100644 --- a/src/components/general/card/DisclaimerCard.tsx +++ b/src/components/general/card/DisclaimerCard.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { View, StyleSheet, TouchableOpacity } from 'react-native'; + import { useColorConfig, shadow, @@ -7,7 +8,6 @@ import { } from '../../../lib/constants/Colors'; import { useFonts } from '../../../lib/constants/Fonts'; import { HapticFeedback, HapticForces } from '../../../lib/haptic/Hooks'; -import { openBrowserPopup } from '../../../lib/utility/browserPopup'; import { TextTranslated } from '../text/TextTranslated'; interface DisclaimerCardProps { diff --git a/src/lib/repositories/scans/mapMultipleScansToData.ts b/src/lib/repositories/scans/mapMultipleScansToData.ts index 0045df95..e4fd8c8f 100644 --- a/src/lib/repositories/scans/mapMultipleScansToData.ts +++ b/src/lib/repositories/scans/mapMultipleScansToData.ts @@ -1,6 +1,5 @@ import { mapScanToData } from './mapScan'; import { Scan, ScanDataMapped } from '../../../types/Scan'; -import { useAppSelector } from '../../redux/Hooks'; export function useMapMultipleScansToData( scans: Scan[] | undefined, diff --git a/src/lib/repositories/scans/mapScan.ts b/src/lib/repositories/scans/mapScan.ts index 935a8865..de50a15e 100644 --- a/src/lib/repositories/scans/mapScan.ts +++ b/src/lib/repositories/scans/mapScan.ts @@ -1,9 +1,6 @@ import { Scan, ScanDataMapped } from '../../../types/Scan'; -export function mapScanToData( - scan: Scan, -): ScanDataMapped { - +export function mapScanToData(scan: Scan): ScanDataMapped { return { scanId: scan.id, name: scan.name, diff --git a/src/lib/repositories/scans/mapSingleScanToData.ts b/src/lib/repositories/scans/mapSingleScanToData.ts index 790a0a38..c085bea9 100644 --- a/src/lib/repositories/scans/mapSingleScanToData.ts +++ b/src/lib/repositories/scans/mapSingleScanToData.ts @@ -1,10 +1,7 @@ import { mapScanToData } from './mapScan'; import { Scan, ScanDataMapped } from '../../../types/Scan'; -import { useAppSelector } from '../../redux/Hooks'; -export function useMapSingleScanToData( - scan: Scan | undefined, -): ScanDataMapped { +export function useMapSingleScanToData(scan: Scan | undefined): ScanDataMapped { // const scanDataState = useAppSelector((state) => state.courseData); if (!scan) return {} as ScanDataMapped; diff --git a/src/lib/repositories/scans/useAllScans.ts b/src/lib/repositories/scans/useAllScans.ts index 4c8994a1..e72f2f0f 100644 --- a/src/lib/repositories/scans/useAllScans.ts +++ b/src/lib/repositories/scans/useAllScans.ts @@ -11,6 +11,4 @@ export default function useAllScans() { username: getEnvValue(EnvOptions.WordPressUsername), password: getEnvValue(EnvOptions.WordPressPassword), }); - - } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 0561ebbc..5309f33c 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -5,6 +5,7 @@ import { DefaultRoute, Routes } from './routes'; import { LoadingScreen } from '../components/loadingscreen/LoadingScreen'; import { useAppSelector } from '../lib/redux/Hooks'; import { Articles } from '../screens/Articles'; +import { ChooseCategories } from '../screens/Choose_Categories'; import CourseFinished from '../screens/Course/CourseFinished'; import { Courses } from '../screens/Course/Courses'; import Stage from '../screens/Course/Stage'; @@ -14,6 +15,10 @@ import { PodcastsEpisodePage } from '../screens/Podcasts/PodcastsEpisodePage'; import { PromptLibrary } from '../screens/PromptLibrary/PromptLibrary'; import { PromptView } from '../screens/PromptLibrary/PromptView'; import { Quizzes } from '../screens/Quizzes'; +import InformationPage from '../screens/Scans/InformationPage'; +import { Results } from '../screens/Scans/Results'; +import { Scans } from '../screens/Scans/Scans'; +import ScansOverview from '../screens/Scans/ScansOverview'; import { SettingsScreen } from '../screens/Settings'; import { StudyScreen } from '../screens/Study'; import { CaseStudyInfo } from '../screens/Usecase/CaseStudyInfo'; @@ -23,11 +28,7 @@ import { BackgroundInfo } from '../screens/UserBackground/BackgroundInfo'; import { WTRScreen } from '../screens/WTR'; import { MockTutorial } from '../screens/WTR/MockTutorial'; import { WTRContentScreen } from '../screens/WTR/WTRContent'; -import { Scans } from '../screens/Scans/Scans'; -import { Results } from '../screens/Scans/Results'; -import { ChooseCategories } from '../screens/Choose_Categories'; -import ScansOverview from '../screens/Scans/ScansOverview'; -import InformationPage from '../screens/Scans/InformationPage'; + const Stack = createNativeStackNavigator(); const screens = [ diff --git a/src/routes/navigation.ts b/src/routes/navigation.ts index 3502a190..def13bfa 100644 --- a/src/routes/navigation.ts +++ b/src/routes/navigation.ts @@ -14,4 +14,4 @@ export const navigationBarLinks: NavigationBarLink[] = [ { icon: 'prompts', route: Routes.PromptLibrary }, { icon: 'WTR', route: Routes.WindesheimTechRadar }, { icon: 'scans', route: Routes.Scans }, -]; \ No newline at end of file +]; diff --git a/src/screens/Choose_Categories.tsx b/src/screens/Choose_Categories.tsx index 9826f2ae..df426ae9 100644 --- a/src/screens/Choose_Categories.tsx +++ b/src/screens/Choose_Categories.tsx @@ -1,3 +1,5 @@ +/* eslint-disable react/no-array-index-key */ + import React, { useState } from 'react'; import { FaChevronUp, @@ -6,7 +8,7 @@ import { FaRegCheckSquare, FaArrowRight, } from 'react-icons/fa'; -import { ScrollView } from 'react-native'; +import { ScrollView, Text } from 'react-native'; import { styled } from 'styled-components'; import { useNavigation } from '../lib/utility/navigation/useNavigation'; @@ -26,13 +28,6 @@ const Container = styled.div` margin: 0 auto; `; -const Title = styled.h1` - color: #333; - font-size: 1.8rem; - text-align: center; - margin-bottom: 2rem; -`; - const CategoryList = styled.div` width: 100%; display: flex; @@ -138,10 +133,12 @@ const ChooseCategories: React.FC = () => { setSelectedCategories( selectedCategories.filter((id) => id !== categoryId), ); - } else { - if (selectedCategories.length < 3) { - setSelectedCategories([...selectedCategories, categoryId]); - } + + return; + } + + if (selectedCategories.length < 3) { + setSelectedCategories([...selectedCategories, categoryId]); } }; @@ -150,9 +147,11 @@ const ChooseCategories: React.FC = () => { setExpandedCategories( expandedCategories.filter((id) => id !== categoryId), ); - } else { - setExpandedCategories([...expandedCategories, categoryId]); + + return; } + + setExpandedCategories([...expandedCategories, categoryId]); }; const categories = [ @@ -176,12 +175,16 @@ const ChooseCategories: React.FC = () => { return ( -
Maturity Scan Light
+
+ Maturity Scan Light +
- The Maturity Scan Light helps you assess the maturity level - of your organization.{'\n'} - Select the most important categories for you.{'\n'} - These will be weighted more heavily in the evaluation. + + The Maturity Scan Light helps you assess the maturity + level of your organization.{'\n'} + Select the most important categories for you.{'\n'} + These will be weighted more heavily in the evaluation. + @@ -243,7 +246,9 @@ const ChooseCategories: React.FC = () => { navigator.navigate(Routes.InformationPage.toString()) } > - Take Scan + + Take Scan + diff --git a/src/screens/Home.tsx b/src/screens/Home.tsx index 07ed19fc..1a326ab7 100644 --- a/src/screens/Home.tsx +++ b/src/screens/Home.tsx @@ -1,12 +1,11 @@ import React, { useEffect, useState } from 'react'; -import { View, Image, Text, Modal, StyleSheet } from 'react-native'; -import { useAppSelector } from '../lib/redux/Hooks'; -import { SettingsButton } from '../components/general/buttons/SettingButton'; -import { PageScrollView } from '../components/general/views/PageScrollView'; -import { Introduction } from '../components/general/card/Introduction'; +import { View, Text, Modal, StyleSheet } from 'react-native'; + import { DisclaimerCard } from '../components/general/card/DisclaimerCard'; +import { Introduction } from '../components/general/card/Introduction'; +import { PageScrollView } from '../components/general/views/PageScrollView'; import { useColorConfig, useCurrentTheme } from '../lib/constants/Colors'; -import { RootState } from '../lib/redux/Hooks'; +import { useAppSelector, RootState } from '../lib/redux/Hooks'; export const HomeScreen = () => { const [isDisclaimerVisible, setIsDisclaimerVisible] = useState(false); @@ -20,9 +19,11 @@ export const HomeScreen = () => { setIsDisclaimerVisible(true); localStorage.setItem('disclaimerShown', 'true'); } - } else { - setIsDisclaimerVisible(false); + + return; } + + setIsDisclaimerVisible(false); }, [tutorialCompleted]); const currentTheme = useCurrentTheme(); @@ -51,10 +52,10 @@ export const HomeScreen = () => { }, modalOverlay: { flex: 1, - backgroundColor: 'rgba(0, 0, 0, 0.5)', + backgroundColor: colors.black, + opacity: 0.5, justifyContent: 'center', alignItems: 'center', - backdropFilter: 'blur(10px)', // This line adds the blur effect }, alertContainer: { padding: 20, diff --git a/src/screens/Scans/InformationPage.tsx b/src/screens/Scans/InformationPage.tsx index 6e1a26ac..4768d134 100644 --- a/src/screens/Scans/InformationPage.tsx +++ b/src/screens/Scans/InformationPage.tsx @@ -1,7 +1,16 @@ +/* eslint-disable react-native/no-color-literals */ + import React, { useState } from 'react'; -import { View, Text, TextInput, StyleSheet, Button, Switch } from 'react-native'; -import { PageScrollView } from '../../components/general/views/PageScrollView'; +import { + View, + Text, + TextInput, + StyleSheet, + Button, + Switch, +} from 'react-native'; +import { PageScrollView } from '../../components/general/views/PageScrollView'; import { useNavigation } from '../../lib/utility/navigation/useNavigation'; import { Routes } from '../../routes/routes'; @@ -18,15 +27,16 @@ export default function InformationPage() { const handleSubmit = () => { // Handle form submission logic here - console.log('Form submitted:', { name, phoneNumber, email, company, companySize, location }); navigator.navigate(Routes.Results.toString()); - }; return ( - In order to save your data and show you the results, we'll need a little information. + + In order to save your data and show you the results, + we'll need a little information. + Name - {showAdditionalFields && ( + {showAdditionalFields ? ( <> Company - )} + ) : null}