Remove all native base dependencies.

components/camera-select-job/camera-select-job.component.jsx

@@ -1,14 +1,16 @@
 import { useQuery } from "@apollo/client";
-import { Picker } from "native-base";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { View } from "react-native";
+import { FlatList, RefreshControl } from "react-native";
+import { Button, List, Modal, Portal, Provider } from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { logImEXEvent } from "../../firebase/firebase.utils";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
-import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
+import {
+  selectCurrentCameraJob,
+  selectCurrentCameraJobId,
+} from "../../redux/app/app.selectors";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import ErrorDisplay from "../error-display/error-display.component";
 import LoadingDisplay from "../loading-display/loading-display.component";
@@ -16,6 +18,7 @@ import LoadingDisplay from "../loading-display/loading-display.component";
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   cameraJobId: selectCurrentCameraJobId,
+  cameraJob: selectCurrentCameraJob,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -27,9 +30,10 @@ export function CameraSelectJob({
   bodyshop,
   cameraJobId,
   setCameraJobId,
+  cameraJob,
   setCameraJob,
 }) {
-  const { loading, error, data } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
+  const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
     variables: {
       statuses: bodyshop.md_ro_statuses.active_statuses || ["Open", "Open*"],
     },
@@ -39,47 +43,83 @@ export function CameraSelectJob({
   if (loading) return <LoadingDisplay />;
   if (error) return <ErrorDisplay errorMessage={error.message} />;
 
-  console.log("Picker Render");
+  const [visible, setVisible] = React.useState(false);
+
+  const showModal = () => setVisible(true);
+  const hideModal = () => setVisible(false);
+  const containerStyle = { backgroundColor: "white", padding: 20 };
+  const onRefresh = async () => {
+    return refetch();
+  };
   return (
-    <View
-      style={{
-        marginHorizontal: 10,
-      }}
-    >
-      <Picker
-        selectedValue={cameraJobId}
-        onValueChange={(value, idx) => {
-          logImEXEvent("imexmobile_setcamerajobid");
-          setCameraJobId(value);
-          setCameraJob(data.jobs[idx]);
-        }}
-      >
-        <Picker.Item
-          label={t("mediabrowser.labels.selectjob")}
-          value={null}
-          key="null"
-        />
-        <Picker.Item
-          label={t("mediabrowser.labels.temporarystorage")}
-          value="temp"
-          key="temp"
-        />
-        {data.jobs.map((j) => {
-          return (
-            <Picker.Item
-              label={`${j.ro_number ? `${j.ro_number} - ` : ``}${
-                j.ownr_fn || ""
-              } ${j.ownr_ln || ""} ${j.ownr_co_nm || ""} - ${
-                j.v_model_yr || ""
-              } ${j.v_make_desc || ""} ${j.v_model_desc || ""}`}
-              value={j.id}
-              key={j.id}
-            />
-          );
-        })}
-      </Picker>
-    </View>
+    <Provider>
+      <Portal>
+        <Modal
+          visible={visible}
+          onDismiss={hideModal}
+          contentContainerStyle={containerStyle}
+        >
+          <FlatList
+            refreshControl={
+              <RefreshControl refreshing={loading} onRefresh={onRefresh} />
+            }
+            data={data.jobs}
+            keyExtractor={(item) => item.id}
+            renderItem={(object) => (
+              <List.Item
+                onPress={() => {
+                  setCameraJobId(object.item.id);
+                  setCameraJob(object.item);
+                  hideModal();
+                }}
+                description={`${
+                  object.item.ro_number ? `${object.item.ro_number} - ` : ``
+                }${object.item.ownr_fn || ""} ${object.item.ownr_ln || ""} ${
+                  object.item.ownr_co_nm || ""
+                } - ${object.item.v_model_yr || ""} ${
+                  object.item.v_make_desc || ""
+                } ${object.item.v_model_desc || ""}`}
+                key={object.item.id}
+              />
+            )}
+          />
+        </Modal>
+      </Portal>
+      <Button style={{ marginTop: 30 }} onPress={showModal}>
+        {cameraJobId
+          ? `${cameraJob.ro_number ? `${cameraJob.ro_number} - ` : ``}${
+              cameraJob.ownr_fn || ""
+            } ${cameraJob.ownr_ln || ""} ${cameraJob.ownr_co_nm || ""} - ${
+              cameraJob.v_model_yr || ""
+            } ${cameraJob.v_make_desc || ""} ${cameraJob.v_model_desc || ""}`
+          : t("mediabrowser.labels.selectjob")}
+      </Button>
+    </Provider>
   );
+
+  // return (
+  //   <View
+  //     style={{
+  //       marginHorizontal: 10,
+  //     }}
+  //   >
+  //     <Picker
+  //       selectedValue={cameraJobId}
+  //       onValueChange={(value, idx) => {
+  //         logImEXEvent("imexmobile_setcamerajobid");
+  //         setCameraJobId(value);
+  //         setCameraJob(data.jobs[idx]);
+  //       }}
+  //     >
+  //       <Picker.Item
+  //         label={t("mediabrowser.labels.selectjob")}
+  //         value={null}
+  //         key="null"
+  //       />
+
+  //     </Picker>
+  //   </View>
+  // );
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(CameraSelectJob);