Add temporary uploads.

components/jobs-list/jobs-list.jsx

@@ -9,13 +9,17 @@ import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 //import ErrorDisplay from "../error-display/error-display.component";
+import { openImagePicker } from "@/redux/photos/photos.actions";
 import JobListItem from "./job-list-item";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
 });
+const mapDispatchToProps = (dispatch) => ({
+  openImagePicker: (id) => dispatch(openImagePicker(id)),
+});
 
-export function JobListComponent({ bodyshop }) {
+export function JobListComponent({ bodyshop, openImagePicker }) {
   const { t } = useTranslation();
 
   const { loading, error, data, refetch } = useQuery(QUERY_ALL_ACTIVE_JOBS, {
@@ -30,6 +34,10 @@ export function JobListComponent({ bodyshop }) {
     return refetch();
   };
 
+  const handleTempUpload = () => {
+    openImagePicker(); //Kept null for temp docs.
+  };
+
   if (loading) return <ActivityIndicator style={{ flex: 1 }} />;
   if (error) return <Text>{error.message}</Text>;
   if (data && data.jobs && data.jobs.length === 0)
@@ -51,12 +59,24 @@ export function JobListComponent({ bodyshop }) {
       style={{ flex: 1, marginHorizontal: 12, paddingBottom: 48 }}
       edges={["top"]}
     >
-      <Text
-        variant="headlineMedium"
-        style={{ marginBottom: 12, fontWeight: "600" }}
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignContent: "space-between",
+          alignItems: "center",
+        }}
       >
-        Jobs
-      </Text>
+        <Text
+          variant="headlineMedium"
+          style={{ marginBottom: 12, fontWeight: "600", flex: 1 }}
+        >
+          {t("joblist.titles.jobtab")}
+        </Text>
+        <Button icon="cloud-upload-outline" mode="outlined" onPress={handleTempUpload}>
+          {t("joblist.labels.tempdocs")}
+        </Button>
+      </View>
       <FlatList
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />
@@ -70,4 +90,4 @@ export function JobListComponent({ bodyshop }) {
   );
 }
 
-export default connect(mapStateToProps, null)(JobListComponent);
+export default connect(mapStateToProps, mapDispatchToProps)(JobListComponent);