From e52e1b1be03473e1f251e0cda18139435b4e6da7 Mon Sep 17 00:00:00 2001
From: Hope Tambala <hopetambala@outlook.com>
Date: Wed, 26 May 2021 21:48:58 -0400
Subject: [PATCH] fix: remove UI problem with asset supplementary form

---
 .../AssetFormSelect/index.js                  | 27 ++++++++++++++-----
 .../AssetFormSelect/index.style.js            |  9 +++++++
 .../NewAssets/AssetSupplementary/index.js     | 13 +++------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js
index fdc28b83d..a6c9f4efa 100644
--- a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js
+++ b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.js
@@ -1,27 +1,42 @@
 import React, { useEffect, useState } from 'react';
 import { ScrollView, View } from 'react-native';
-import { Card, Text } from 'react-native-paper';
+import { Card, IconButton, Text } from 'react-native-paper';
 
 import { assetFormsQuery } from '../../../../../../modules/cached-resources';
-import { layout } from '../../../../../../modules/theme';
+import { layout, theme } from '../../../../../../modules/theme';
 import styles from './index.style';
 
-const AssetFormSelect = ({ setViewSupplementaryForms, setSelectedForm }) => {
+const AssetFormSelect = ({ setSelectedForm }) => {
   const [assetForms, setAssetForms] = useState([]);
   useEffect(() => {
     assetFormsQuery().then((forms) => {
       setAssetForms(forms);
     });
-  }, []);
+  });
+
+  const refreshAssetForms = () => {
+    assetFormsQuery().then((forms) => {
+      setAssetForms(forms);
+    });
+  };
 
   const selectForm = (form) => {
-    setViewSupplementaryForms(false);
     setSelectedForm(form);
   };
 
   return (
     <View>
-      <ScrollView horizontal>
+      <View style={{ flexDirection: 'row' }}>
+        <Text style={styles.header}>Supplementary Asset Forms</Text>
+        <IconButton
+          style={{ bottom: 7 }}
+          color={theme.colors.primary}
+          size={20}
+          icon="refresh"
+          onPress={refreshAssetForms}
+        />
+      </View>
+      <ScrollView horizontal style={styles.componentContainer}>
         {assetForms && assetForms.map((form) => (
           <Card
             key={form.objectId}
diff --git a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.style.js b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.style.js
index 2e9b7e977..27d07c7b5 100644
--- a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.style.js
+++ b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/AssetFormSelect/index.style.js
@@ -21,6 +21,15 @@ const styles = StyleSheet.create({
   header: {
     fontSize: 20,
     fontWeight: 'bold'
+  },
+  componentContainer: {
+    borderRadius: 10,
+    backgroundColor: '#ccc',
+    shadowColor: '#000',
+    // shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.8,
+    shadowRadius: 2,
+    elevation: 5
   }
 });
 
diff --git a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/index.js b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/index.js
index 5dd78186b..a2fa7c921 100644
--- a/domains/DataCollection/Assets/NewAssets/AssetSupplementary/index.js
+++ b/domains/DataCollection/Assets/NewAssets/AssetSupplementary/index.js
@@ -2,7 +2,6 @@ import { Formik } from 'formik';
 import React, { useState } from 'react';
 import { ActivityIndicator, TouchableWithoutFeedback, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
-import { Button } from 'react-native-paper';
 
 import PaperButton from '../../../../../components/Button';
 import PaperInputPicker from '../../../../../components/FormikFields/PaperInputPicker';
@@ -15,7 +14,6 @@ import AssetFormSelect from './AssetFormSelect';
 import styles from './index.styles';
 
 const AssetSupplementary = ({ selectedAsset, surveyingOrganization }) => {
-  const [viewSupplementaryForms, setViewSupplementaryForms] = useState(false);
   const [selectedForm, setSelectedForm] = useState();
   const [photoFile, setPhotoFile] = useState('State Photo String');
   return (
@@ -70,14 +68,9 @@ const AssetSupplementary = ({ selectedAsset, surveyingOrganization }) => {
           <TouchableWithoutFeedback>
             <View style={styles.assetContainer}>
               <View>
-                <Button compact mode="contained" onPress={() => setViewSupplementaryForms(!viewSupplementaryForms)}>Show Available Asset Forms</Button>
-                {viewSupplementaryForms === true
-                  && (
-                    <AssetFormSelect
-                      setViewSupplementaryForms={setViewSupplementaryForms}
-                      setSelectedForm={setSelectedForm}
-                    />
-                  )}
+                <AssetFormSelect
+                  setSelectedForm={setSelectedForm}
+                />
               </View>
               {selectedAsset
                 && (