Port to Redux and add settings

src/screens/Settings/index.tsx

@@ -1,7 +1,12 @@
-import React from 'react';
-import { View, Text, SafeAreaView } from 'react-native';
+import React, { useCallback } from 'react';
+import { View, Text, SafeAreaView, Button } from 'react-native';
+import { Picker } from '@react-native-community/picker';
 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 '..';
 
 const InputContainer = styled.View`
     margin: 10px 0;
@@ -15,7 +20,9 @@ const Input = styled.TextInput`
 `;
 
 export default function Settings() {
-    
+    const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
+    const navigation = useNavigation<NavigationProp>();
+    const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), []);
 
     return (
         <ScrollView>
@@ -24,15 +31,22 @@ export default function Settings() {
                     <Text style={{ fontSize: 36, marginBottom: 24, fontWeight: 'bold' }}>Settings</Text>
                     <InputContainer>
                         <Text>Jellyfin Server URL</Text>
-                        <Input placeholder="https://jellyfin.yourserver.com/" />
+                        <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} />
                     </InputContainer>
                     <InputContainer>
-                        <Text>Jellyfin API Key</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                        <Text>Jellyfin Access Token</Text>
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} />
                     </InputContainer>
                     <InputContainer>
                         <Text>Jellyfin User ID</Text>
-                        <Input placeholder="deadbeefdeadbeefdeadbeef" />
+                        <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} />
+                    </InputContainer>
+                    <Button title="Set Jellyfin server" onPress={handleClick} />
+                    <InputContainer>
+                        <Text>Bitrate</Text>
+                        <Picker selectedValue={bitrate}>
+                            <Picker.Item label="320kbps" value={140000000} />
+                        </Picker>
                     </InputContainer>
                 </View>
             </SafeAreaView>