Add screens for opting into Sentry error tracking

src/screens/Music/index.tsx

@@ -7,17 +7,18 @@ import RecentAlbums from './stacks/RecentAlbums';
 import Search from './stacks/Search';
 import { THEME_COLOR } from 'CONSTANTS';
 import { t } from '@localisation';
+import useDefaultStyles from 'components/Colors';
 
 const Stack = createStackNavigator<StackParams>();
 
-const navigationOptions = {
-    headerTintColor: THEME_COLOR,
-    headerTitleStyle: { color: 'black' }
-};
-
 function MusicStack() {
+    const defaultStyles = useDefaultStyles();
+
     return (
-        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={navigationOptions}>
+        <Stack.Navigator initialRouteName="RecentAlbums" screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
             <Stack.Screen name="RecentAlbums" component={RecentAlbums} options={{ headerTitle: t('recent-albums') }} />
             <Stack.Screen name="Albums" component={Albums} options={{ headerTitle: t('albums') }} />
             <Stack.Screen name="Album" component={Album} options={{ headerTitle: t('album') }} />

src/screens/Music/types.ts

@@ -70,6 +70,7 @@ export type StackParams = {
     Albums: undefined;
     Album: { id: string, album: Album };
     RecentAlbums: undefined;
+    Search: undefined;
 };
 
 export type NavigationProp = StackNavigationProp<StackParams>; 

src/screens/Settings/components/Cache.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import TrackPlayer from 'react-native-track-player';
-import { SubHeader } from 'components/Typography';
 import { useDispatch } from 'react-redux';
 import music from 'store/music';
 import { t } from '@localisation';
@@ -12,6 +11,10 @@ const ClearCache = styled(Button)`
     margin-top: 16px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function CacheSettings() {
     const dispatch = useDispatch();
     const handleClearCache = useCallback(() => {
@@ -23,10 +26,9 @@ export default function CacheSettings() {
     }, [dispatch]);
 
     return (
-        <>
-            <SubHeader>{t('setting-cache')}</SubHeader>
+        <Container>
             <Text>{t('setting-cache-description')}</Text>
             <ClearCache title={t('reset-cache')} onPress={handleClearCache} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Library.tsx

@@ -1,7 +1,6 @@
 import styled from 'styled-components/native';
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback } from 'react';
-import { SubHeader } from 'components/Typography';
 import useDefaultStyles from 'components/Colors';
 import { NavigationProp } from '../..';
 import { useTypedSelector } from 'store';
@@ -19,6 +18,10 @@ const Input = styled.TextInput`
     border-radius: 5px;
 `;
 
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
 export default function LibrarySettings() {
     const defaultStyles = useDefaultStyles();
     const { jellyfin } = useTypedSelector(state => state.settings);
@@ -26,8 +29,7 @@ export default function LibrarySettings() {
     const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
 
     return (
-        <>
-            <SubHeader>{t('jellyfin-library')}</SubHeader>
+        <Container>
             <InputContainer>
                 <Text style={defaultStyles.text}>{t('jellyfin-server-url')}</Text>
                 <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={defaultStyles.input} />
@@ -41,6 +43,6 @@ export default function LibrarySettings() {
                 <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={defaultStyles.input} />
             </InputContainer>
             <Button title={t('set-jellyfin-server')} onPress={handleSetLibrary} />
-        </>
+        </Container>
     );
 }

src/screens/Settings/components/Sentry.tsx

@@ -0,0 +1,124 @@
+import Text from 'components/Text';
+import React, { useEffect, useState } from 'react';
+import { Switch } from 'react-native-gesture-handler';
+import styled, { css } from 'styled-components/native';
+import { isSentryEnabled, setSentryStatus } from 'utility/Sentry';
+import Accordion from 'react-native-collapsible/Accordion';
+import ChevronIcon from 'assets/chevron-right.svg';
+import { THEME_COLOR } from 'CONSTANTS';
+import useDefaultStyles, { DefaultStylesProvider } from 'components/Colors';
+import { t } from '@localisation';
+
+const Container = styled.ScrollView`
+    padding: 24px;
+`;
+
+const SwitchContainer = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0;
+`;
+
+const HeaderContainer = styled.View<{ isActive?: boolean }>`
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 16px 0 4px 0;
+
+    ${props => props.isActive && css`
+        background-color: ${THEME_COLOR};
+    `}
+`;
+
+const HeaderText = styled(Text)`
+    font-size: 16px;
+`;
+
+const ContentContainer = styled.View`
+    margin-top: 8px;
+`;
+
+const Label = styled(Text)`
+    font-size: 16px;
+`;
+
+const Chevron = styled(ChevronIcon)<{ isActive?: boolean }>`
+    width: 14px;
+    height: 14px;
+    transform: rotate(-90deg);
+
+    ${props => props.isActive && css`
+        transform: rotate(90deg);
+    `}
+`;
+
+type Question = { title: string, content: string };
+
+const questions: Question[] = [
+    {
+        title: t('why-use-tracking'),
+        content: t('why-use-tracking-description')
+    },
+    {
+        title: t('what-data-is-gathered'),
+        content: t('what-data-is-gathered-description')
+    },
+    {
+        title: t('where-is-data-stored'),
+        content: t('where-is-data-stored-description')
+    }
+];
+
+function renderHeader(question: Question, index: number, isActive: boolean) {
+    return (
+        <HeaderContainer>
+            <HeaderText>{question.title}</HeaderText>
+            <DefaultStylesProvider>
+                {styles =>
+                    <Chevron fill={styles.text.color} isActive={isActive} />
+                }
+            </DefaultStylesProvider>
+        </HeaderContainer>
+    );
+}
+
+function renderContent(question: Question) {
+    return (
+        <ContentContainer>
+            <Text>{question.content}</Text>
+        </ContentContainer>
+    );
+}
+
+export default function Sentry() {
+    const defaultStyles = useDefaultStyles();
+    const [isReportingEnabled, setReporting] = useState(isSentryEnabled);
+    const [activeSections, setActiveSections] = useState<number[]>([]);
+
+    const toggleSwitch = () => setReporting(previousState => !previousState);
+
+    useEffect(() => {
+        setSentryStatus(isReportingEnabled);
+    });
+
+    return (
+        <Container>
+            <Text>{t('error-reporting-description')}</Text>
+            <Text />
+            <Text>{t('error-reporting-rationale')}</Text>
+            <SwitchContainer>
+                <Label>{t('error-reporting')}</Label>
+                <Switch value={isReportingEnabled} onValueChange={toggleSwitch} />
+            </SwitchContainer>
+            <Accordion
+                sections={questions}
+                renderHeader={renderHeader}
+                renderContent={renderContent}
+                activeSections={activeSections}
+                onChange={setActiveSections}
+                underlayColor={defaultStyles.activeBackground.backgroundColor}
+            />
+        </Container>
+    );
+}

src/screens/Settings/index.tsx

@@ -1,23 +1,46 @@
-import React from 'react';
-import { View, SafeAreaView, ScrollView } from 'react-native';
+import React, { useCallback } from 'react';
+import { SafeAreaView, ScrollView } from 'react-native';
 import Library from './components/Library';
 import Cache from './components/Cache';
 import useDefaultStyles from 'components/Colors';
-import { Header } from 'components/Typography';
 import { t } from '@localisation';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/native';
+import ListButton from 'components/ListButton';
+import { THEME_COLOR } from 'CONSTANTS';
+import Sentry from './components/Sentry';
 
-export default function Settings() {
-    const defaultStyles = useDefaultStyles();
+export function SettingsList() {
+    const navigation = useNavigation();
+    const handleLibraryClick = useCallback(() => { navigation.navigate('Library'); }, [navigation]);
+    const handleCacheClick = useCallback(() => { navigation.navigate('Cache'); }, [navigation]);
+    const handleSentryClick = useCallback(() => { navigation.navigate('Sentry'); }, [navigation]);
 
     return (
         <ScrollView>
             <SafeAreaView>
-                <View style={{ padding: 20 }}>
-                    <Header style={defaultStyles.text}>{t('settings')}</Header>
-                    <Library />
-                    <Cache />
-                </View>
+                <ListButton onPress={handleLibraryClick}>{t('jellyfin-library')}</ListButton>
+                <ListButton onPress={handleCacheClick}>{t('setting-cache')}</ListButton>
+                <ListButton onPress={handleSentryClick}>{t('error-reporting')}</ListButton>
             </SafeAreaView>
         </ScrollView>
     );
+}
+
+const Stack = createStackNavigator();
+
+export default function Settings() {    
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <Stack.Navigator initialRouteName="SettingList"  screenOptions={{
+            headerTintColor: THEME_COLOR,
+            headerTitleStyle: defaultStyles.stackHeader
+        }}>
+            <Stack.Screen name="SettingList" component={SettingsList} options={{ headerTitle: t('settings') }} />
+            <Stack.Screen name="Library" component={Library} options={{ headerTitle: t('jellyfin-library') }} />
+            <Stack.Screen name="Cache" component={Cache} options={{ headerTitle: t('setting-cache') }} />
+            <Stack.Screen name="Sentry" component={Sentry} options={{ headerTitle: t('error-reporting') }} />
+        </Stack.Navigator>
+    );
 }

src/screens/index.tsx

@@ -15,6 +15,8 @@ import Onboarding from './Onboarding';
 import TrackPopupMenu from './modals/TrackPopupMenu';
 import { ModalStackParams } from './types';
 import { t } from '@localisation';
+import ErrorReportingAlert from 'utility/ErrorReportingAlert';
+import ErrorReportingPopup from './modals/ErrorReportingPopup';
 
 const Stack = createStackNavigator<ModalStackParams>();
 const Tab = createBottomTabNavigator();
@@ -48,27 +50,30 @@ function Screens() {
     }
 
     return (
-        <Tab.Navigator
-            screenOptions={({ route }) => ({
-                tabBarIcon: function TabBarIcon({ color, size }) {
-                    const Icon = getIcon(route.name);
+        <>
+            <ErrorReportingAlert />
+            <Tab.Navigator
+                screenOptions={({ route }) => ({
+                    tabBarIcon: function TabBarIcon({ color, size }) {
+                        const Icon = getIcon(route.name);
 
-                    if (!Icon) {
-                        return null;
+                        if (!Icon) {
+                            return null;
+                        }
+
+                        return <Icon fill={color} width={size} height={size} />;
                     }
-
-                    return <Icon fill={color} width={size} height={size} />;
-                }
-            })}
-            tabBarOptions={{
-                activeTintColor: THEME_COLOR,
-                inactiveTintColor: 'gray',
-            }}
-        >
-            <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
-            <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
-            <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
-        </Tab.Navigator>
+                })}
+                tabBarOptions={{
+                    activeTintColor: THEME_COLOR,
+                    inactiveTintColor: 'gray',
+                }}
+            >
+                <Tab.Screen name="NowPlaying" component={Player} options={{ tabBarLabel: t('now-playing') }} />
+                <Tab.Screen name="Music" component={Music} options={{ tabBarLabel: t('music') }} />
+                <Tab.Screen name="Settings" component={Settings} options={{ tabBarLabel: t('settings') }} />
+            </Tab.Navigator>
+        </>
     );
 }
 
@@ -88,6 +93,7 @@ export default function Routes() {
             <Stack.Screen name="Screens" component={Screens} />
             <Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
             <Stack.Screen name="TrackPopupMenu" component={TrackPopupMenu} />
+            <Stack.Screen name="ErrorReporting" component={ErrorReportingPopup} />
         </Stack.Navigator>
     );
 }

src/screens/modals/ErrorReportingPopup.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import Modal from 'components/Modal';
+import Sentry from 'screens/Settings/components/Sentry';
+
+export default function ErrorReportingPopup() {
+    return (
+        <Modal fullSize={false}>
+            <Sentry />
+        </Modal>
+    );
+}