implement websocket to send reindex messages

src/pages/SettingsPage/MovieSettings.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import style from './MovieSettings.module.css';
 import {APINode, callAPI} from '../../utils/Api';
 import {GeneralSuccess} from '../../types/GeneralTypes';
-import {SettingsTypes} from '../../types/ApiTypes';
 
 interface state {
     text: string[];
@@ -11,13 +10,23 @@ interface state {
 
 interface Props {}
 
+interface MessageBase {
+    Action: string;
+}
+
+interface TextMessage extends MessageBase {
+    Message: string;
+}
+
+interface ReindexEvent extends MessageBase {
+    Event: string;
+}
+
 /**
  * Component for MovieSettings on Settingspage
  * handles settings concerning to movies in general
  */
 class MovieSettings extends React.Component<Props, state> {
-    myinterval: number = -1;
-
     constructor(props: Props) {
         super(props);
 
@@ -28,12 +37,61 @@ class MovieSettings extends React.Component<Props, state> {
     }
 
     componentDidMount(): void {
-        this.myinterval = window.setInterval(this.updateStatus, 1000);
+        // expectingMessage is set to true
+        this.dial();
     }
 
-    componentWillUnmount(): void {
-        if (this.myinterval !== -1) {
-            clearInterval(this.myinterval);
+    dial(): void {
+        console.log('trying to connect...');
+        const conn = new WebSocket(`ws://${window.location.host}/subscribe`);
+        console.log('dd to connect...');
+        conn.addEventListener('close', (ev) => {
+            this.appendLog(`WebSocket Disconnected code: ${ev.code}, reason: ${ev.reason}`, true);
+            if (ev.code !== 1001) {
+                this.appendLog('Reconnecting in 1s', true);
+                setTimeout((): void => this.dial(), 1000);
+            }
+        });
+        conn.addEventListener('open', (_ev) => {
+            console.info('websocket connected');
+        });
+
+        // This is where we handle messages received.
+        conn.addEventListener('message', (ev) => {
+            console.log('new message!');
+            if (typeof ev.data !== 'string') {
+                console.error('unexpected message type', typeof ev.data);
+                return;
+            }
+            this.handleMessage(ev.data);
+        });
+    }
+
+    handleMessage(message: string): void {
+        const obj: MessageBase = JSON.parse(message);
+
+        if (obj.Action === 'message') {
+            const msg = obj as TextMessage;
+            this.appendLog(msg.Message);
+        } else if (obj.Action === 'reindexAction') {
+            const msg = obj as ReindexEvent;
+            if (msg.Event === 'start') {
+                this.setState({startbtnDisabled: true});
+            } else if (msg.Event === 'stop') {
+                this.setState({startbtnDisabled: false});
+            }
+        }
+    }
+
+    // appendLog appends the passed text to messageLog.
+    appendLog(text: string, error?: boolean): void {
+        this.setState({
+            // insert a string for each line
+            text: [text, ...this.state.text]
+        });
+
+        if (error) {
+            console.log('heyy err');
         }
     }
 
@@ -51,9 +109,9 @@ class MovieSettings extends React.Component<Props, state> {
                 <button
                     className='btn btn-warning'
                     onClick={(): void => {
-                        this.cleanupGravity();
+                        this.startTVShowReindex();
                     }}>
-                    Cleanup Gravity
+                    TVShow Reindex
                 </button>
                 <div className={style.indextextarea}>
                     {this.state.text.map((m) => (
@@ -70,44 +128,15 @@ class MovieSettings extends React.Component<Props, state> {
      * starts the reindex process of the videos in the specified folder
      */
     startReindex(): void {
+        this.setState({text: []});
         // clear output text before start
-        this.setState({text: [], startbtnDisabled: true});
-
         callAPI(APINode.Settings, {action: 'startReindex'}, (result: GeneralSuccess): void => {
-            console.log(result);
             if (result.result === 'success') {
                 console.log('started successfully');
-            } else {
-                console.log('error, reindex already running');
-                this.setState({startbtnDisabled: true});
             }
         });
-
-        if (this.myinterval !== -1) {
-            clearInterval(this.myinterval);
-        }
-        this.myinterval = window.setInterval(this.updateStatus, 1000);
     }
 
-    /**
-     * This interval function reloads the current status of reindexing from backend
-     */
-    updateStatus = (): void => {
-        callAPI(APINode.Settings, {action: 'getStatusMessage'}, (result: SettingsTypes.getStatusMessageType) => {
-            this.setState({
-                // insert a string for each line
-                text: [...result.Messages, ...this.state.text]
-            });
-            // todo 2020-07-4: scroll to bottom of div here
-            if (!result.ContentAvailable) {
-                // clear refresh interval if no content available
-                clearInterval(this.myinterval);
-
-                this.setState({startbtnDisabled: false});
-            }
-        });
-    };
-
     /**
      * send request to cleanup db gravity
      */
@@ -118,6 +147,15 @@ class MovieSettings extends React.Component<Props, state> {
             });
         });
     }
+
+    private startTVShowReindex(): void {
+        this.setState({text: []});
+        callAPI(APINode.Settings, {action: 'startTVShowReindex'}, (result: GeneralSuccess): void => {
+            if (result.result === 'success') {
+                console.log('started successfully');
+            }
+        });
+    }
 }
 
 export default MovieSettings;