Simplifying the footer code

Author: Jakob37

src/views/card/audiocard.js

@@ -9,10 +9,10 @@ import Sound from "react-native-sound";
 
 const playAudio = async (key) => {
 
-    console.log('Attempting to play', key);
+    // console.log('Attempting to play', key);
 
     const signedUrl = await Storage.get(key);
-    console.log(signedUrl);
+    // console.log(signedUrl);
 
     const track = new Sound(signedUrl, null, (e) => {
         if (e) {
@@ -26,7 +26,7 @@ const playAudio = async (key) => {
 const removeTrack = async (englishKey, chineseKey) => {
     const result1 = await Storage.remove(englishKey);
     const result2 = await Storage.remove(chineseKey);
-    console.log(result1, result2);
+    // console.log(result1, result2);
 }
 
 const AudioCard = (param) => {

src/views/footer.js

@@ -11,6 +11,12 @@ const fontSize = 16;
 
 const audioPlayer = new AudioPlayer();
 
+const FooterButton = (param) => {
+    return <TouchableOpacity onPress={param.onPress}>
+        <Text style={{ fontSize }}>{param.children}</Text>
+    </TouchableOpacity>
+}
+
 /**
  * @param {Object} param 
  * @property {[string,string][]} param.pathPairs 
@@ -19,32 +25,20 @@ const audioPlayer = new AudioPlayer();
  */
 const AudioFooter = (param) => {
 
-    // audioPlayer.load(param.audioPathPairs)
-
     useEffect(() => {
         console.log('Reloading audioplayer')
-        // console.log('attempting loading', param.pathPairs)
         audioPlayer.load(param.pathPairs)
-        // audioPlayer.load([["210822144607_I am eating apple", "210822144607_我在吃苹果"]])
     }, [param.pathPairs])
 
     return (
         <View style={[
             styles.footerCard,
             { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }
         ]}>
-            <TouchableOpacity onPress={() => {
-                // playTestSound();
-                // console.log('Play')
-
-                audioPlayer.playRandom()
-            }}>
-                <Text style={{ fontSize }}>Play</Text>
-            </TouchableOpacity>
-            <Text style={{ fontSize }}>Stop</Text>
-            <TouchableOpacity onPress={param.backToMenu}>
-                <Text style={{ fontSize }}>Back</Text>
-            </TouchableOpacity>
+            <FooterButton onPress={() => { audioPlayer.play() }}>Play</FooterButton>
+            <FooterButton onPress={() => { audioPlayer.playRandom() }}>Random</FooterButton>
+            <FooterButton onPress={audioPlayer.stop}>Stop</FooterButton>
+            <FooterButton onPress={param.backToMenu}>Back</FooterButton>
         </View>
     )
 }
@@ -55,12 +49,8 @@ const CategoryFooter = (param) => {
             styles.footerCard,
             { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }
         ]}>
-            <TouchableOpacity onPress={param.openAddEntryMenu}>
-                <Text style={{ fontSize }}>Add new entry</Text>
-            </TouchableOpacity>
-            <TouchableOpacity onPress={param.refreshCategories}>
-                <Text style={{ fontSize }}>Refresh</Text>
-            </TouchableOpacity>
+            <FooterButton onPress={param.openAddEntryMenu}>Add new entry</FooterButton>
+            <FooterButton onPress={param.refreshCategories}>Refresh</FooterButton>
         </View>
     )
 }
@@ -71,12 +61,8 @@ const OpenAddEntryFooter = (param) => {
             styles.footerCard,
             { display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }
         ]}>
-            <TouchableOpacity onPress={param.closeAddEntryMenu}>
-                <Text style={{ fontSize }}>Close</Text>
-            </TouchableOpacity>
-            <TouchableOpacity onPress={param.addNew}>
-                <Text style={{ fontSize }}>Submit entry to AWS</Text>
-            </TouchableOpacity>
+            <FooterButton onPress={param.closeAddEntryMenu}>Close</FooterButton>
+            <FooterButton onPress={param.addNew}>Submit entry to AWS</FooterButton>
         </View>
     )
 }
@@ -93,9 +79,6 @@ const OpenAddEntryFooter = (param) => {
  * @returns {React.ReactElement}
  */
 const Footer = (param) => {
-    // console.log('isSelectedView', param.isSelectedView, 'addEntryMenuOpen', param.entryMenuOpen)
-
-    // console.log('current param', param)
 
     return (
         <View>