feat(grades, profile): add app state handling for privacy visibility

neuland-ingolstadt · Nov 23, 2024 · 7e4b463 · 7e4b463
1 parent e08418a
commit 7e4b463
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 6 deletions.
diff --git a/src/app/(screens)/grades.tsx b/src/app/(screens)/grades.tsx
@@ -18,7 +18,14 @@ import { useQuery } from '@tanstack/react-query'
 import { router } from 'expo-router'
 import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RefreshControl, ScrollView, Text, View } from 'react-native'
+import {
+    AppState,
+    type AppStateStatus,
+    RefreshControl,
+    ScrollView,
+    Text,
+    View,
+} from 'react-native'
 import { createStyleSheet, useStyles } from 'react-native-unistyles'
 
 import packageInfo from '../../../package.json'
@@ -97,6 +104,23 @@ export default function GradesSCreen(): JSX.Element {
         void loadAverageGrade(spoName ?? undefined)
     }, [spoWeights, grades?.finished])
 
+    useEffect(() => {
+        const handleAppStateChange = (nextAppState: AppStateStatus): void => {
+            if (nextAppState === 'inactive' || nextAppState === 'background') {
+                router.back()
+            }
+        }
+
+        const subscription = AppState.addEventListener(
+            'change',
+            handleAppStateChange
+        )
+
+        return () => {
+            subscription.remove()
+        }
+    }, [])
+
     return (
         <ScrollView
             contentContainerStyle={styles.contentContainer}

diff --git a/src/app/(screens)/profile.tsx b/src/app/(screens)/profile.tsx
@@ -13,10 +13,12 @@ import { useQuery } from '@tanstack/react-query'
 import { toast } from 'burnt'
 import * as Clipboard from 'expo-clipboard'
 import { useRouter } from 'expo-router'
-import React, { useContext } from 'react'
+import React, { useContext, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
     Alert,
+    AppState,
+    type AppStateStatus,
     Linking,
     Platform,
     Pressable,
@@ -51,6 +53,25 @@ export default function Profile(): JSX.Element {
             },
         })
     const { isRefetchingByUser, refetchByUser } = useRefreshByUser(refetch)
+    const [isBackground, setIsBackground] = React.useState(false)
+    useEffect(() => {
+        const handleAppStateChange = (nextAppState: AppStateStatus): void => {
+            if (nextAppState === 'inactive' || nextAppState === 'background') {
+                setIsBackground(true)
+            } else {
+                setIsBackground(false)
+            }
+        }
+
+        const subscription = AppState.addEventListener(
+            'change',
+            handleAppStateChange
+        )
+
+        return () => {
+            subscription.remove()
+        }
+    }, [])
 
     const copyToClipboard = async (text: string): Promise<void> => {
         if (text.length === 0) {
@@ -246,7 +267,10 @@ export default function Profile(): JSX.Element {
                 {isSuccess &&
                     (data?.mtknr !== undefined ? (
                         <View style={styles.container}>
-                            <FormList sections={sections} />
+                            <FormList
+                                sections={sections}
+                                privacyHidden={isBackground}
+                            />
                         </View>
                     ) : (
                         <ErrorView

diff --git a/src/components/Universal/FormList.tsx b/src/components/Universal/FormList.tsx
@@ -9,6 +9,7 @@ import PlatformIcon from './Icon'
 interface FormListProps {
     sections: FormListSections[]
     rowStyle?: ViewStyle
+    privacyHidden?: boolean
 }
 
 interface RenderSectionFrameProps {
@@ -56,8 +57,9 @@ const RenderSectionFrame: React.FC<RenderSectionFrameProps> = ({
 
 const RenderSectionItems: React.FC<{
     items: SectionGroup[]
+    privacyHidden: boolean
     rowStyle?: ViewStyle
-}> = ({ items, rowStyle }) => {
+}> = ({ items, privacyHidden, rowStyle }) => {
     const { styles, theme } = useStyles(stylesheet)
 
     return (
@@ -87,7 +89,7 @@ const RenderSectionItems: React.FC<{
                                 </Text>
                             )}
 
-                            {item.value != null && (
+                            {item.value != null && !privacyHidden && (
                                 <Text
                                     style={[
                                         item.layout === 'column'
@@ -149,7 +151,11 @@ const RenderSectionItems: React.FC<{
  * @param {FormListSections[]} sections - An array of sections, each containing a header, footer, and an array of items.
  * @returns {JSX.Element} - A React component that renders the list of forms.
  */
-const FormList: React.FC<FormListProps> = ({ sections, rowStyle }) => {
+const FormList: React.FC<FormListProps> = ({
+    sections,
+    rowStyle,
+    privacyHidden,
+}) => {
     const { styles } = useStyles(stylesheet)
 
     return (
@@ -165,6 +171,7 @@ const FormList: React.FC<FormListProps> = ({ sections, rowStyle }) => {
                         <RenderSectionItems
                             items={section.items}
                             rowStyle={rowStyle}
+                            privacyHidden={privacyHidden ?? false}
                         />
                     </RenderSectionFrame>
                 ) : section.item != null ? (