From ed27109a51a57850336eeece4ba21e24ace3118b Mon Sep 17 00:00:00 2001
From: kake26 <paul@pngpst.net>
Date: Wed, 29 Dec 2021 11:42:34 -0600
Subject: [PATCH] Refactor update

---
 src/screens/AboutScreen.js        |  11 +--
 src/screens/AboutScreen.js.old    |  28 ++++++++
 src/screens/FilesScreen.js        |  84 +++++++++++-----------
 src/screens/FilesScreen.js.old    |  74 +++++++++++++++++++
 src/screens/HomeScreen.js         | 113 +++++++++++++++++-------------
 src/screens/HomeScreen.js.old     |  74 +++++++++++++++++++
 src/screens/SettingsScreen.js.old |  78 +++++++++++++++++++++
 7 files changed, 366 insertions(+), 96 deletions(-)
 create mode 100755 src/screens/AboutScreen.js.old
 create mode 100755 src/screens/FilesScreen.js.old
 create mode 100755 src/screens/HomeScreen.js.old
 create mode 100755 src/screens/SettingsScreen.js.old

diff --git a/src/screens/AboutScreen.js b/src/screens/AboutScreen.js
index 056fd82..fb45fe4 100755
--- a/src/screens/AboutScreen.js
+++ b/src/screens/AboutScreen.js
@@ -4,8 +4,9 @@ import {
     Text,
   } from 'react-native';
 
-class AboutScreen extends React.Component {
-    static navigationOptions = ({ navigation }) => {
+  const AboutScreen = ({ navigation }) => {
+
+  const navigationOptions = ({ navigation }) => {
       return {
         title: navigation.getParam('otherParam', 'About'),
         headerStyle: {
@@ -15,14 +16,14 @@ class AboutScreen extends React.Component {
       };
     };
   
-    render() {
-      return (
+  
+   return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>About Screen{"\n"}{"\n"}
     RPI Media Center Control v 1.0 beta</Text>
         </View>
       );
     }
-  }
+  
 
   export default AboutScreen;
\ No newline at end of file
diff --git a/src/screens/AboutScreen.js.old b/src/screens/AboutScreen.js.old
new file mode 100755
index 0000000..056fd82
--- /dev/null
+++ b/src/screens/AboutScreen.js.old
@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+    View,
+    Text,
+  } from 'react-native';
+
+class AboutScreen extends React.Component {
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'About'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    render() {
+      return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <Text>About Screen{"\n"}{"\n"}
+    RPI Media Center Control v 1.0 beta</Text>
+        </View>
+      );
+    }
+  }
+
+  export default AboutScreen;
\ No newline at end of file
diff --git a/src/screens/FilesScreen.js b/src/screens/FilesScreen.js
index 911ce9e..8b4f9ad 100755
--- a/src/screens/FilesScreen.js
+++ b/src/screens/FilesScreen.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 import {
@@ -22,53 +22,51 @@ function play(name) {
     
     }
 
-class FilesScreen extends React.Component {
 
-    constructor(props){
-      super(props);
-      this.state ={ data: []};
-  }
-    static navigationOptions = ({ navigation }) => {
-      return {
-        title: navigation.getParam('otherParam', 'File Selection'),
-        headerStyle: {
-          backgroundColor: '#3333ff',
-        },
-        headerTintColor: '#fff',
+
+    const FilesScreen = ({ navigation }) => {
+
+      const [movies, setValue] = useState('');
+
+      const navigationOptions = ({ navigation }) => {
+        return {
+          title: navigation.getParam('otherParam', 'File Selection'),
+          headerStyle: {
+            backgroundColor: '#3333ff',
+          },
+          headerTintColor: '#fff',
+        };
       };
-    };
-  
-    componentDidMount() {
-     axios.get('http://192.168.1.158:8080/list/')
-     .then(res => {
-       this.setState({
-         data: res.data.data,
-       })
-     })
+
+      useEffect(() => {   
         
-    }
-      
-  
-  
-    render() {
-      let movies = this.state.data
+      axios.get('http://192.168.1.158:8080/list/')
+        .then(res => {
+          this.setState({
+            data: res.data.data,
+          })
+          })
+          });
+
+   
   
       return (
-      
-       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-       <Text>Pick a movie</Text>
-       <FlatList
-      keyExtractor={movies => movies}
-      data={movies}
-      renderItem={({ item }) => {
-        return <Button title={item} type="outline" onPress = {() => play(item)}
-    />
-       }}  
-      /> 
-      </View>
-     );
-    }
+        
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>Pick a movie</Text>
+        <FlatList
+       keyExtractor={movies => movies}
+       data={movies}
+       renderItem={({ item }) => {
+         return <Button title={item} type="outline" onPress = {() => play(item)}
+     />
+        }}  
+       /> 
+       </View>
+
+      );
+     }
+    
   
-  }
 
   export default FilesScreen;
\ No newline at end of file
diff --git a/src/screens/FilesScreen.js.old b/src/screens/FilesScreen.js.old
new file mode 100755
index 0000000..911ce9e
--- /dev/null
+++ b/src/screens/FilesScreen.js.old
@@ -0,0 +1,74 @@
+import React from 'react';
+import axios from 'axios';
+
+import {
+    View,
+    Text,
+    FlatList, // Solves the problem with the 5 movie limit in the app
+  } from 'react-native';
+  
+  // these imports make headers and buttons look better
+  import {
+      Header,
+      Button,
+  } from 'react-native-elements';
+
+function play(name) {
+    // Play handler
+    axios.get('http://192.168.1.158:8080/play/'+name)
+    .then(res => {
+    // Still don't care about response
+    })
+    
+    }
+
+class FilesScreen extends React.Component {
+
+    constructor(props){
+      super(props);
+      this.state ={ data: []};
+  }
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'File Selection'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    componentDidMount() {
+     axios.get('http://192.168.1.158:8080/list/')
+     .then(res => {
+       this.setState({
+         data: res.data.data,
+       })
+     })
+        
+    }
+      
+  
+  
+    render() {
+      let movies = this.state.data
+  
+      return (
+      
+       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+       <Text>Pick a movie</Text>
+       <FlatList
+      keyExtractor={movies => movies}
+      data={movies}
+      renderItem={({ item }) => {
+        return <Button title={item} type="outline" onPress = {() => play(item)}
+    />
+       }}  
+      /> 
+      </View>
+     );
+    }
+  
+  }
+
+  export default FilesScreen;
\ No newline at end of file
diff --git a/src/screens/HomeScreen.js b/src/screens/HomeScreen.js
index b93cc77..ce5a734 100755
--- a/src/screens/HomeScreen.js
+++ b/src/screens/HomeScreen.js
@@ -1,4 +1,6 @@
-import React from 'react';
+//import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { useAsyncStorage } from '@react-native-async-storage/async-storage';
 import {
 	Button,
 } from 'react-native-elements';
@@ -19,56 +21,71 @@ axios.get('http://192.168.1.158:8080/'+name)
 })
 }
 
-class HomeScreen extends React.Component {
-    static navigationOptions = ({ navigation }) => {
-      return {
-        title: navigation.getParam('otherParam', 'RPI Media Center Control'),
-        headerStyle: {
-          backgroundColor: '#3333ff',
-        },
-        headerTintColor: '#fff',
-      };
+const HomeScreen = ({ navigation }) => {
+
+  const navigationOptions = ({ navigation }) => {
+    return {
+      title: navigation.getParam('otherParam', 'RPI Media Center Control'),
+      headerStyle: {
+        backgroundColor: '#3333ff',
+      },
+      headerTintColor: '#fff',
     };
-  
-    render() {
-      return (
-             
-        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-          <Text>Controls</Text>
-  
-           <Button
-            title="Select file to play" type="outline"
-            onPress={() => this.props.navigation.navigate('Files')}
-        /><Text>{"\n"}</Text>
-       
-       <View style={{flexDirection: 'row' }}>
-       <Button
-            icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
-        onPress = {() => bp('pause/')}
-        />      
-        <Button
-            icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
-            onPress = {() => bp('resume/')}
-        />
-        <Button
-            icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
-            onPress = {() => bp('stop/')}
-        /><Text>{"\n"}</Text>
-        </View>
-        <Text>{"\n"}</Text>
-  
-       <Button
-            title="Settings" type="outline"
-            onPress={() => this.props.navigation.navigate('Settings')}
+  };
+
+  const [value, setValue] = useState('value');
+  const { getItem, setItem } = useAsyncStorage('@storage_key');
+
+  const readItemFromStorage = async () => {
+    const item = await getItem();
+    setValue(item);
+  };
+
+  const writeItemToStorage = async newValue => {
+    await setItem(newValue);
+    setValue(newValue);
+  };
+
+  useEffect(() => {
+    readItemFromStorage();
+  }, []);
+
+  return (
+<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+            <Text>Server IP: {value}</Text>
+            <Text>Controls</Text>
+    
+             <Button
+              title="Select file to play" type="outline"
+              onPress={() => navigation.navigate('Files')} //navigationOptions.navigate('Files')}
           /><Text>{"\n"}</Text>
+         
+         <View style={{flexDirection: 'row' }}>
+         <Button
+              icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
+          onPress = {() => bp('pause/')}
+          />      
           <Button
-            title="About" type="outline"
-            onPress={() => this.props.navigation.navigate('About')}
+              icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
+              onPress = {() => bp('resume/')}
           />
-        </View>
-      
-      );
-    }
-  }
+          <Button
+              icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
+              onPress = {() => bp('stop/')}
+          /><Text>{"\n"}</Text>
+          </View>
+          <Text>{"\n"}</Text>
+    
+         <Button
+              title="Settings" type="outline"
+              onPress={() => navigation.navigate('Settings')}
+            /><Text>{"\n"}</Text>
+            <Button
+              title="About" type="outline"
+              onPress={() => navigation.navigate('About')}
+            />
+          </View>
+  );
+}
 
   export default HomeScreen;
\ No newline at end of file
diff --git a/src/screens/HomeScreen.js.old b/src/screens/HomeScreen.js.old
new file mode 100755
index 0000000..b93cc77
--- /dev/null
+++ b/src/screens/HomeScreen.js.old
@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+	Button,
+} from 'react-native-elements';
+import {
+  View,
+  Text,
+} from 'react-native';
+// play,pause,stop icons
+import { AntDesign } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import axios from 'axios'; // Took a while to figure out how to use it, but its simpler then the
+
+function bp(name) {
+// Button press handler important
+axios.get('http://192.168.1.158:8080/'+name)
+.then(res => {
+  // We don't care fore now
+})
+}
+
+class HomeScreen extends React.Component {
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'RPI Media Center Control'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    render() {
+      return (
+             
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+          <Text>Controls</Text>
+  
+           <Button
+            title="Select file to play" type="outline"
+            onPress={() => this.props.navigation.navigate('Files')}
+        /><Text>{"\n"}</Text>
+       
+       <View style={{flexDirection: 'row' }}>
+       <Button
+            icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
+        onPress = {() => bp('pause/')}
+        />      
+        <Button
+            icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
+            onPress = {() => bp('resume/')}
+        />
+        <Button
+            icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
+            onPress = {() => bp('stop/')}
+        /><Text>{"\n"}</Text>
+        </View>
+        <Text>{"\n"}</Text>
+  
+       <Button
+            title="Settings" type="outline"
+            onPress={() => this.props.navigation.navigate('Settings')}
+          /><Text>{"\n"}</Text>
+          <Button
+            title="About" type="outline"
+            onPress={() => this.props.navigation.navigate('About')}
+          />
+        </View>
+      
+      );
+    }
+  }
+
+  export default HomeScreen;
\ No newline at end of file
diff --git a/src/screens/SettingsScreen.js.old b/src/screens/SettingsScreen.js.old
new file mode 100755
index 0000000..b17c355
--- /dev/null
+++ b/src/screens/SettingsScreen.js.old
@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    } from 'react-native';
+import {
+        Header,
+        Button,
+    } from 'react-native-elements';
+
+
+class SettingsScreen extends React.Component {
+    // 1
+    constructor(props) {
+      super(props);
+      let initv = this.getMyStringValue;
+      this.state = { value : initv };
+      
+    }
+  
+    setStringValue = async (value) => {
+      try {
+        await AsyncStorage.setItem('key', value)
+      } catch(e) {
+        // save error
+      }
+    
+      //console.log('Done.')
+    }
+
+    getMyStringValue = async () => {
+      try {
+        return await AsyncStorage.getItem('@key')
+      } catch(e) {
+        // read error
+      }
+    
+      //console.log('Done.')
+      //this.state.value =rv;
+    
+    }
+
+
+    
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'Settings'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+   
+  
+   
+    render() {
+      let value = this.state.value;
+     
+      return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <Text>Settings Screen{"\n"}{"\n"}
+      RPI Media Center Control v 1.0 beta Settings{"\n"}</Text>
+      <Text>{"\n"}server IP/hostname: </Text>
+        <TextInput onChangeText={newValue => this.setStringValue(newValue)}  style={{borderWidth: 1, width: 100}} >{value}</TextInput>
+      <Text>{"\n"}</Text>
+      
+         
+        
+    
+        </View>
+  
+      );
+    }
+  }
+
+  export default SettingsScreen;
\ No newline at end of file