Port to Redux and add settings

src/screens/modals/SetJellyfinServer/components/CredentialGenerator.tsx

@@ -0,0 +1,63 @@
+import React, { Component, createRef } from 'react';
+import { WebView, WebViewMessageEvent } from 'react-native-webview';
+import { debounce } from 'lodash';
+import { AppState } from '../../../../store';
+
+interface Props {
+    serverUrl: string;
+    onCredentialsRetrieved: (credentials: AppState['settings']['jellyfin']) => void;
+}
+
+class CredentialGenerator extends Component<Props> {
+    ref = createRef<WebView>();
+
+    handleStateChange = () => {
+        // Call a debounced version to check if the credentials are there
+        this.checkIfCredentialsAreThere();
+    }
+
+    checkIfCredentialsAreThere = debounce(() => {
+        // Inject some javascript to check if the credentials can be extracted
+        // from localstore
+        this.ref.current?.injectJavaScript(`
+            try { 
+                let credentials = JSON.parse(window.localStorage.getItem('jellyfin_credentials'));
+                let deviceId = window.localStorage.getItem('_deviceId2');
+                window.ReactNativeWebView.postMessage(JSON.stringify({ credentials, deviceId })) 
+            } catch(e) { }; true;
+        `);
+    }, 500);
+
+    handleMessage = (event: WebViewMessageEvent) => {
+        // GUARD: Something must be returned for this thing to work
+        if (!event.nativeEvent.data) {
+            return;
+        }
+
+        // If a message is received, the credentials should be there
+        const { credentials: { Servers: [ credentials ] }, deviceId } = JSON.parse(event.nativeEvent.data);
+        this.props.onCredentialsRetrieved({
+            uri: credentials.ManualAddress,
+            user_id: credentials.UserId,
+            access_token: credentials.AccessToken,
+            device_id: deviceId,
+        });
+    }
+
+    render() {
+        const { serverUrl } = this.props;
+
+        return (
+            <WebView
+                source={{ uri: serverUrl as string }}
+                style={{ borderRadius: 20 }}
+                onNavigationStateChange={this.handleStateChange}
+                onMessage={this.handleMessage}
+                ref={this.ref}
+                startInLoadingState={true}
+            />
+        );
+    }
+}
+
+export default CredentialGenerator;

src/screens/modals/SetJellyfinServer/index.tsx

@@ -0,0 +1,48 @@
+import React, { useState, useCallback } from 'react';
+import { Text, Button, View } from 'react-native';
+import Modal from '../../../components/Modal';
+import Input from '../../../components/Input';
+import { setJellyfinCredentials } from '../../../store/settings/actions';
+import { useDispatch } from 'react-redux';
+import { useNavigation, StackActions } from '@react-navigation/native';
+import CredentialGenerator from './components/CredentialGenerator';
+
+export default function SetJellyfinServer() {
+    // State for first screen
+    const [serverUrl, setServerUrl] = useState<string>();
+    const [isLogginIn, setIsLogginIn] = useState<boolean>(false);
+
+    // Handlers needed for dispatching stuff
+    const dispatch = useDispatch();
+    const navigation = useNavigation();
+
+    // Save creedentials to store and close the modal
+    const saveCredentials = useCallback((credentials) => {
+        dispatch(setJellyfinCredentials(credentials));
+        navigation.dispatch(StackActions.popToTop());    
+    }, [navigation, dispatch]);
+
+    return (
+        <Modal>
+            {isLogginIn ? (
+                <CredentialGenerator 
+                    serverUrl={serverUrl as string}
+                    onCredentialsRetrieved={saveCredentials}
+                />
+            ) : (
+                <View style={{ padding: 20}}>
+                    <Text>Please enter your Jellyfin server URL first. Make sure to include the protocol and port</Text>
+                    <Input
+                        placeholder="https://jellyfin.yourserver.io/"
+                        onChangeText={setServerUrl}
+                        value={serverUrl} 
+                        keyboardType="url"
+                        autoCapitalize="none"
+                        autoCorrect={false}
+                    />
+                    <Button title="Set server" onPress={() => setIsLogginIn(true)} disabled={!serverUrl?.length} />
+                </View>
+            )}
+        </Modal>
+    );
+}