From 12b53eca4a5278fa4576a61ac8168b09bf4ecc49 Mon Sep 17 00:00:00 2001
From: Lei Nelissen <lei@codified.nl>
Date: Fri, 28 Aug 2020 14:17:37 +0200
Subject: [PATCH] Allow for clearing the Redux store from the settings page

---
 src/screens/Settings/components/Cache.tsx   | 26 +++++++++++
 src/screens/Settings/components/Library.tsx | 44 ++++++++++++++++++
 src/screens/Settings/index.tsx              | 49 +++------------------
 src/store/music/index.ts                    |  4 +-
 4 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 src/screens/Settings/components/Cache.tsx
 create mode 100644 src/screens/Settings/components/Library.tsx

diff --git a/src/screens/Settings/components/Cache.tsx b/src/screens/Settings/components/Cache.tsx
new file mode 100644
index 0000000..910ae1d
--- /dev/null
+++ b/src/screens/Settings/components/Cache.tsx
@@ -0,0 +1,26 @@
+import React, { useCallback } from 'react';
+import TrackPlayer from 'react-native-track-player';
+import { SubHeader } from 'components/Typography';
+import { Text, Button } from 'react-native';
+import { THEME_COLOR } from 'CONSTANTS';
+import { useDispatch } from 'react-redux';
+import music from 'store/music';
+
+export default function CacheSettings() {
+    const dispatch = useDispatch();
+    const handleClearCache = useCallback(() => {
+        // Dispatch an action to reset the music subreducer state
+        dispatch(music.actions.reset());
+
+        // Also clear the TrackPlayer queue
+        TrackPlayer.reset();
+    }, [dispatch]);
+
+    return (
+        <>
+            <SubHeader>Cache</SubHeader>
+            <Text>If you have updated your Jellyfin library, but the app is holding on to cached assets, you can forcefully clear the cache using this button. This will force the app to fetch the library from scratch.</Text>
+            <Button title="Reset Cache" onPress={handleClearCache} color={THEME_COLOR} />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/screens/Settings/components/Library.tsx b/src/screens/Settings/components/Library.tsx
new file mode 100644
index 0000000..c9dda18
--- /dev/null
+++ b/src/screens/Settings/components/Library.tsx
@@ -0,0 +1,44 @@
+import styled from 'styled-components/native';
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+import { Text, Button } from 'react-native';
+import { THEME_COLOR } from 'CONSTANTS';
+import { SubHeader } from 'components/Typography';
+import { colors } from 'components/Colors';
+import { NavigationProp } from '../..';
+import { useTypedSelector } from 'store';
+
+const InputContainer = styled.View`
+    margin: 10px 0;
+`;
+
+const Input = styled.TextInput`
+    padding: 15px;
+    margin-top: 5px;
+    border-radius: 5px;
+`;
+
+export default function LibrarySettings() {
+    const { jellyfin } = useTypedSelector(state => state.settings);
+    const navigation = useNavigation<NavigationProp>();
+    const handleSetLibrary = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
+
+    return (
+        <>
+            <SubHeader>Jellyfin Library</SubHeader>
+            <InputContainer>
+                <Text style={colors.text}>Jellyfin Server URL</Text>
+                <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
+            </InputContainer>
+            <InputContainer>
+                <Text style={colors.text}>Jellyfin Access Token</Text>
+                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
+            </InputContainer>
+            <InputContainer>
+                <Text style={colors.text}>Jellyfin User ID</Text>
+                <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
+            </InputContainer>
+            <Button title="Set Jellyfin server" onPress={handleSetLibrary} color={THEME_COLOR} />
+        </>
+    );
+}
\ No newline at end of file
diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx
index a184056..e50e50e 100644
--- a/src/screens/Settings/index.tsx
+++ b/src/screens/Settings/index.tsx
@@ -1,55 +1,18 @@
-import React, { useCallback } from 'react';
-import { View, Text, SafeAreaView, Button, StyleSheet } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
-import styled from 'styled-components/native';
-import { useSelector } from 'react-redux';
-import { AppState } from 'store';
-import { useNavigation } from '@react-navigation/native';
-import { NavigationProp } from '..';
-import { THEME_COLOR } from 'CONSTANTS';
+import React from 'react';
+import { View, SafeAreaView, ScrollView } from 'react-native';
 import { Header } from 'components/Typography';
 import { colors } from 'components/Colors';
-
-const InputContainer = styled.View`
-    margin: 10px 0;
-`;
-
-const Input = styled.TextInput`
-    padding: 15px;
-    margin-top: 5px;
-    border-radius: 5px;
-`;
+import Library from './components/Library';
+import Cache from './components/Cache';
 
 export default function Settings() {
-    const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
-    const navigation = useNavigation<NavigationProp>();
-    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), [navigation]);
-
     return (
         <ScrollView>
             <SafeAreaView>
                 <View style={{ padding: 20 }}>
                     <Header style={colors.text}>Settings</Header>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin Server URL</Text>
-                        <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin Access Token</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <InputContainer>
-                        <Text style={colors.text}>Jellyfin User ID</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} style={colors.input} />
-                    </InputContainer>
-                    <Button title="Set Jellyfin server" onPress={handleClick} color={THEME_COLOR} />
-                    {/* The bitrate setting is hidden for now, since Jellyfin does not appear to support custom bitrates */}
-                    {/* <InputContainer>
-                        <Text style={colors.text}>Bitrate</Text>
-                        <Picker selectedValue={bitrate}>
-                            <Picker.Item label="320kbps" value={140000000} />
-                        </Picker>
-                    </InputContainer> */}
+                    <Library />
+                    <Cache />
                 </View>
             </SafeAreaView>
         </ScrollView>
diff --git a/src/store/music/index.ts b/src/store/music/index.ts
index c0a026f..5819976 100644
--- a/src/store/music/index.ts
+++ b/src/store/music/index.ts
@@ -31,7 +31,9 @@ const initialState: State = {
 const music = createSlice({
     name: 'music',
     initialState,
-    reducers: {},
+    reducers: {
+        reset: () => initialState,
+    },
     extraReducers: builder => {
         /**
          * Fetch All albums