Refactor update

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,7 +16,7 @@ class AboutScreen extends React.Component {
       };
     };
   
-    render() {
+  
    return (
         <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>About Screen{"\n"}{"\n"}
@@ -23,6 +24,6 @@ class AboutScreen extends React.Component {
         </View>
       );
     }
-  }
+  
 
   export default AboutScreen;

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;

src/screens/FilesScreen.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 
 import {
@@ -22,13 +22,13 @@ function play(name) {
     
     }
 
-class FilesScreen extends React.Component {
 
-    constructor(props){
-      super(props);
-      this.state ={ data: []};
-  }
-    static navigationOptions = ({ navigation }) => {
+
+    const FilesScreen = ({ navigation }) => {
+
+      const [movies, setValue] = useState('');
+
+      const navigationOptions = ({ navigation }) => {
         return {
           title: navigation.getParam('otherParam', 'File Selection'),
           headerStyle: {
@@ -38,21 +38,18 @@ class FilesScreen extends React.Component {
         };
       };
 
-    componentDidMount() {
+      useEffect(() => {   
+        
       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' }}>
@@ -66,9 +63,10 @@ class FilesScreen extends React.Component {
         }}  
        /> 
        </View>
+
       );
      }
     
-  }
+  
 
   export default FilesScreen;

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;

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,8 +21,9 @@ axios.get('http://192.168.1.158:8080/'+name)
 })
 }
 
-class HomeScreen extends React.Component {
-    static navigationOptions = ({ navigation }) => {
+const HomeScreen = ({ navigation }) => {
+
+  const navigationOptions = ({ navigation }) => {
     return {
       title: navigation.getParam('otherParam', 'RPI Media Center Control'),
       headerStyle: {
@@ -30,15 +33,31 @@ class HomeScreen extends React.Component {
     };
   };
 
-    render() {
-      return (
+  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={() => this.props.navigation.navigate('Files')}
+              onPress={() => navigation.navigate('Files')} //navigationOptions.navigate('Files')}
           /><Text>{"\n"}</Text>
          
          <View style={{flexDirection: 'row' }}>
@@ -59,16 +78,14 @@ class HomeScreen extends React.Component {
     
          <Button
               title="Settings" type="outline"
-            onPress={() => this.props.navigation.navigate('Settings')}
+              onPress={() => navigation.navigate('Settings')}
             /><Text>{"\n"}</Text>
             <Button
               title="About" type="outline"
-            onPress={() => this.props.navigation.navigate('About')}
+              onPress={() => navigation.navigate('About')}
             />
           </View>
-      
   );
 }
-  }
 
   export default HomeScreen;

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;

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;