@plusscommunities/pluss-maintenance-app-forms 7.0.21 → 7.0.23-beta.0

package/src/screens/RequestNotes.js

@@ -1,958 +1,817 @@
-import React, { Component } from "react";
+import React, { Component } from 'react';
 import {
-	ScrollView,
-	View,
-	Text,
-	TouchableOpacity,
-	Modal,
-	KeyboardAvoidingView,
-	Platform,
-	FlatList,
-	Dimensions,
-	ImageBackground,
-	Keyboard,
-} from "react-native";
-import { connect } from "react-redux";
-import { Icon } from "@rneui/themed";
-import _ from "lodash";
-import moment from "moment";
-import { jobAdded } from "../actions";
-import { maintenanceActions } from "../apis";
-import { getBottomSpace } from "react-native-iphone-x-helper";
-import { Services } from "../feature.config";
-import { Components, Colours, Helper } from "../core.config";
-import { values } from "../values.config";
-
-const SCREEN_WIDTH = Dimensions.get("window").width;
+  ScrollView,
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  KeyboardAvoidingView,
+  Platform,
+  FlatList,
+  Dimensions,
+  ImageBackground,
+  Keyboard,
+} from 'react-native';
+import { connect } from 'react-redux';
+import { Icon } from '@rneui/themed';
+import _ from 'lodash';
+import moment from 'moment';
+import { jobAdded } from '../actions';
+import { maintenanceActions } from '../apis';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Services } from '../feature.config';
+import { Components, Colours, Helper } from '../core.config';
+import { values } from '../values.config';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
 const PHOTO_SIZE = (SCREEN_WIDTH - 64) / 3;
 
 class RequestNotes extends Component {
-	constructor(props) {
-		super(props);
-
-		this.state = {
-			job: {},
-			selectedPDF: null,
-			noteAttachments: [],
-			noteInput: "",
-			addNoteOpen: false,
-			noteImages: [{ add: true }],
-			uploadingImage: false,
-			galleryOpen: false,
-			galleryImages: [],
-			galleryIndex: 0,
-		};
-		this.checkThumb = null;
-	}
-
-	componentDidMount() {
-		this.updateJobState();
-	}
-
-	componentDidUpdate(prevProps) {
-		if (prevProps.jobs !== this.props.jobs) {
-			this.updateJobState();
-		}
-	}
-
-	componentWillUnmount() {
-		clearInterval(this.checkThumb);
-	}
-
-	updateJobState() {
-		const job =
-			_.find(this.props.jobs, (j) => j.id === this.props.job.id) ||
-			this.props.job;
-		this.setState({ job });
-	}
-
-	onPressBack = () => {
-		Services.navigation.goBack();
-	};
-
-	onOpenAttachment = (a) => {
-		this.setState({
-			selectedPDF: a,
-		});
-	};
-
-	onCloseAttachment = () => {
-		this.setState({
-			selectedPDF: null,
-		});
-	};
-
-	onPressDeleteNote = (n) => {
-		this.setState({
-			noteToDelete: n,
-		});
-	};
-
-	onPressConfirmDelete = () => {
-		maintenanceActions.deleteNote(
-			this.props.job.id,
-			this.state.noteToDelete.Id,
-		);
-		const newNotes = _.filter(this.state.job.Notes, (note) => {
-			return note.Id !== this.state.noteToDelete.Id;
-		});
-		const newJob = { ...this.props.job };
-		newJob.Notes = newNotes;
-		this.props.jobAdded(newJob);
-		this.props.onChange && this.props.onChange();
-		this.setState({
-			job: newJob,
-			noteToDelete: null,
-		});
-	};
-
-	onPressCancelDelete = () => {
-		this.setState({ noteToDelete: null });
-	};
-
-	isReadyToSaveNote = () => {
-		const uploadingAttachments = _.some(
-			this.state.noteAttachments,
-			(n) => n.Uploading,
-		);
-		const uploadingImages = _.some(this.state.noteImages, (n) => n.uploading);
-		if (uploadingAttachments || uploadingImages) return false;
-		return (
-			!_.isEmpty(this.state.noteInput) ||
-			!_.isEmpty(this.state.noteAttachments) ||
-			!_.isEmpty(this.state.noteImages.filter((img) => !img.add))
-		);
-	};
-
-	openAddNote = () => {
-		this.setState({
-			addNoteOpen: true,
-			editingNote: null,
-		});
-	};
-
-	closeAddNote = () => {
-		const newState = {
-			addNoteOpen: false,
-			editingNote: null,
-		};
-		if (!!this.state.editingNote) {
-			newState.noteInput = "";
-			newState.noteAttachments = [];
-			newState.noteImages = [];
-		}
-		this.setState(newState);
-	};
-
-	openEditNote = (n) => {
-		const noteImages = [
-			...(n.Images || []).map((i) => ({
-				url: i,
-				thumbNailUrl: Helper.getThumb300(i),
-			})),
-			{ add: true },
-		];
-		this.setState({
-			noteAttachments: n.Attachments || [],
-			noteImages,
-			noteInput: n.Note || "",
-			addNoteOpen: true,
-			editingNote: n.Id,
-			noteMenuOpen: null,
-		});
-	};
-
-	confirmAddNote = async () => {
-		if (!this.isReadyToSaveNote()) {
-			return;
-		}
-
-		try {
-			this.setState({ submittingNote: true });
-			const attachments = this.state.noteAttachments
-				.filter((a) => !a.add)
-				.map((a) => {
-					return {
-						Title: a.Title,
-						Source: a.Source,
-					};
-				});
-			const images = this.state.noteImages
-				.filter((img) => !img.add)
-				.map((img) => img.url);
-			const res = await (this.state.editingNote
-				? maintenanceActions.editNote(
-						this.props.job.id,
-						this.state.editingNote,
-						this.state.noteInput,
-						attachments,
-						images,
-					)
-				: maintenanceActions.addNote(
-						this.props.job.id,
-						this.state.noteInput,
-						attachments,
-						images,
-					));
-			this.setState(
-				{
-					job: res.data.job,
-					submittingNote: false,
-					addNoteOpen: false,
-					noteInput: "",
-					noteAttachments: [],
-					noteImages: [{ add: true }],
-					uploadingImage: false,
-					editingNote: null,
-				},
-				() => {
-					this.props.jobAdded(res.data.job);
-					this.props.onChange && this.props.onChange();
-				},
-			);
-		} catch (err) {
-			console.log("error");
-			console.log(err);
-			this.setState({
-				submittingNote: false,
-				uploadingImage: false,
-			});
-		}
-	};
-
-	setImages = (noteImages, uploadingImage = false, callback = null) => {
-		this.setState({ noteImages, uploadingImage }, callback);
-	};
-
-	getImages = () => {
-		const { noteImages } = this.state;
-		const imagesList = _.cloneDeep(noteImages);
-		if (!imagesList || !Array.isArray(imagesList) || imagesList.length === 0) {
-			return [{ add: true }];
-		}
-		return imagesList;
-	};
-
-	getImageUrls = () => {
-		const imagesList = this.getImages();
-		return _.filter(imagesList, (img) => {
-			return !img.uploading && !img.add;
-		}).map((img) => {
-			return img.url;
-		});
-	};
-
-	waitForThumbnails = () => {
-		if (this.checkThumb) return;
-
-		this.checkThumb = setInterval(async () => {
-			const imagesList = this.getImages();
-			const imagesUpdate = [];
-			await Promise.all(
-				imagesList.map((image) => {
-					return new Promise(async (resolve) => {
-						const newImage = { ...image };
-						imagesUpdate.push(newImage);
-						if (newImage.url && !newImage.thumbNailExists) {
-							newImage.uploading = false;
-							newImage.allowRetry = false;
-							newImage.thumbNailExists = await Helper.imageExists(
-								newImage.thumbNailUrl,
-							);
-							resolve(newImage.thumbNailExists);
-						}
-						resolve(true);
-					});
-				}),
-			);
-			const thumbnailsExist = imagesUpdate.every(
-				(image) => !image.url || image.thumbNailExists,
-			);
-			if (thumbnailsExist) {
-				clearInterval(this.checkThumb);
-				this.checkThumb = null;
-				this.setImages(imagesUpdate);
-			}
-		}, 2000);
-	};
-
-	removeImage = (index) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.splice(index, 1);
-
-		this.setImages(imagesUpdate);
-	};
-
-	showUploadMenu = () => {
-		Keyboard.dismiss();
-		const { uploadingImage, submittingNote } = this.state;
-		if (uploadingImage || submittingNote) return;
-		this.imageUploader.showUploadMenu();
-	};
-
-	toggleFullscreenVideo = (url) => {
-		if (typeof url !== "string") url = "";
-		this.setState({
-			showFullscreenVideo: url.length > 0,
-			currentVideoUrl: url,
-		});
-	};
-
-	openGallery(images, index) {
-		this.setState({
-			galleryOpen: true,
-			galleryImages: images,
-			galleryIndex: index,
-		});
-	}
-
-	closeGallery() {
-		this.setState({ galleryOpen: false, galleryImages: [], galleryIndex: 0 });
-	}
-
-	onUploadStarted = (uploadUri, imageUri) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.splice(imagesUpdate.length - 1, 0, {
-			uploading: true,
-			uploadProgress: "0%",
-			uploadUri,
-			imageUri,
-			allowRetry: true,
-		});
-
-		this.setImages(imagesUpdate, true);
-	};
-
-	onUploadProgress = (progress) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.map((img) => {
-			if (img.uploadUri === progress.uri) {
-				img.uploadProgress = progress.percentage;
-				img.uploading = true;
-				img.allowRetry = true;
-			}
-		});
-
-		this.setImages(imagesUpdate, true);
-	};
-
-	onUploadSuccess = async (uri, uploadUri) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.map((img) => {
-			if (img.uploadUri === uploadUri && img.uploading) {
-				img.url = uri.replace("/general/", "/general1400/");
-				img.thumbNailExists = false;
-				img.thumbNailUrl = Helper.getThumb300(img.url);
-				img.allowRetry = true;
-			}
-		});
-
-		this.setImages(imagesUpdate, false, () => this.waitForThumbnails());
-	};
-
-	onUploadFailed = (uploadUri) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.map((img) => {
-			if (img.uploadUri === uploadUri) {
-				img.uploading = true; // Requried for retry
-				img.uploadProgress = "";
-				img.allowRetry = true;
-			}
-		});
-
-		this.setImages(imagesUpdate);
-	};
-
-	onLibrarySelected = (uri) => {
-		const imagesUpdate = this.getImages();
-		imagesUpdate.splice(imagesUpdate.length - 1, 0, {
-			uploading: false,
-			allowRetry: false,
-			url: Helper.get1400(uri),
-			thumbNailExists: true,
-			thumbNailUrl: Helper.getThumb300(uri),
-		});
-
-		this.setImages(imagesUpdate);
-	};
-
-	renderAttachment(a, i) {
-		return (
-			<Components.Attachment
-				onPress={() => {
-					this.onOpenAttachment(a);
-				}}
-				key={i}
-				title={a.Title}
-			/>
-		);
-	}
-
-	renderPlayableImageUrl(images, index, containerStyle) {
-		const url = images[index];
-		const thumbUrl = Helper.getThumb300(url);
-
-		if (Helper.isVideo(url)) {
-			return (
-				<ImageBackground
-					style={[{ flex: 1 }, containerStyle]}
-					source={{ uri: thumbUrl }}
-				>
-					<View style={styles.imagePlayContainer}>
-						<TouchableOpacity
-							onPress={this.toggleFullscreenVideo.bind(this, url)}
-						>
-							<Icon
-								name="play"
-								type="font-awesome"
-								iconStyle={styles.imageControlIcon}
-							/>
-						</TouchableOpacity>
-					</View>
-				</ImageBackground>
-			);
-		}
-
-		const imageUrl = Helper.get1400(url);
-		return (
-			<TouchableOpacity
-				style={containerStyle}
-				onPress={this.openGallery.bind(this, images, index || 0)}
-			>
-				<ImageBackground
-					resizeMode="cover"
-					style={styles.imageContainer}
-					source={{ uri: imageUrl }}
-				/>
-			</TouchableOpacity>
-		);
-	}
-
-	renderImages(note) {
-		if (!note) return null;
-		if (!_.isNil(note.Images) && !_.isEmpty(note.Images)) {
-			return (
-				<ScrollView horizontal style={styles.sideBySideImages}>
-					{note.Images.map((_p, index) =>
-						this.renderPlayableImageUrl(
-							note.Images,
-							index,
-							styles.sideBySideImageContainer,
-						),
-					)}
-				</ScrollView>
-			);
-		}
-		return null;
-	}
-
-	renderImagePopup() {
-		const { galleryOpen, galleryImages, galleryIndex } = this.state;
-		console.log("renderimagepopup", {
-			galleryOpen,
-			galleryImages,
-			galleryIndex,
-		});
-		return (
-			<Components.ImagePopup
-				visible={galleryOpen}
-				images={galleryImages}
-				index={galleryIndex}
-				onClose={this.closeGallery.bind(this)}
-			/>
-		);
-	}
-
-	renderNote(n) {
-		return (
-			<View style={styles.noteContainer} key={n.Id}>
-				<View style={styles.noteContainerTop}>
-					<Components.ProfilePic
-						Diameter={30}
-						ProfilePic={n.User.profilePic}
-						style={styles.profilePic}
-					/>
-					<View style={styles.noteContainerTopRight}>
-						{this.props.user.uid === n.User.id && (
-							<TouchableOpacity
-								onPress={() => {
-									this.onPressDeleteNote(n);
-								}}
-							>
-								<View
-									style={[
-										styles.noteContainerButtonContainer,
-										{ backgroundColor: this.props.colourBrandingMain },
-									]}
-								>
-									<Icon
-										name="trash"
-										type="font-awesome"
-										iconStyle={styles.noteContainerButtonIcon}
-									/>
-								</View>
-							</TouchableOpacity>
-						)}
-						{this.props.user.uid === n.User.id && (
-							<TouchableOpacity
-								onPress={() => {
-									this.openEditNote(n);
-								}}
-							>
-								<View
-									style={[
-										styles.noteContainerButtonContainer,
-										{ backgroundColor: this.props.colourBrandingMain },
-									]}
-								>
-									<Icon
-										name="pencil"
-										type="font-awesome"
-										iconStyle={styles.noteContainerButtonIcon}
-									/>
-								</View>
-							</TouchableOpacity>
-						)}
-						<View style={styles.noteContainerTopFill}>
-							<Text style={styles.noteContainerName}>{n.User.displayName}</Text>
-						</View>
-					</View>
-				</View>
-				<Text style={styles.noteContainerText}>{n.Note}</Text>
-				{(n.Attachments || []).map((a, i) => this.renderAttachment(a, i))}
-				{this.renderImages(n)}
-				<Text style={styles.noteTimestamp}>
-					{moment.utc(n.Timestamp).local().format(Helper.TIMESTAMP_FORMAT)}
-				</Text>
-			</View>
-		);
-	}
-
-	renderNotes() {
-		return (this.state.job.Notes || []).map((n, i) => {
-			return this.renderNote(n, i);
-		});
-	}
-
-	renderPDF() {
-		if (_.isEmpty(this.state.selectedPDF)) {
-			return null;
-		}
-		return (
-			<Components.PDFPopup
-				source={this.state.selectedPDF.Source}
-				onClose={this.onCloseAttachment}
-				title={this.state.selectedPDF.Title}
-				pdfCount={1}
-			/>
-		);
-	}
-
-	renderNoteDeleteConfirm() {
-		return (
-			<Components.ConfirmPopup
-				visible={!!this.state.noteToDelete}
-				onConfirm={this.onPressConfirmDelete}
-				onCancel={this.onPressCancelDelete}
-				onClose={this.onPressCancelDelete}
-				text="Are you sure you want to delete this note?"
-			/>
-		);
-	}
-
-	renderFooterContent() {
-		if (this.state.submittingNote) {
-			return <Components.Spinner />;
-		}
-		return (
-			<Components.InlineButton
-				color={this.props.colourBrandingMain}
-				onPress={this.confirmAddNote}
-				fillTouchable
-				large
-			>
-				Save
-			</Components.InlineButton>
-		);
-	}
-
-	renderUploadMenu() {
-		return (
-			<Components.ImageUploader
-				ref={(ref) => (this.imageUploader = ref)}
-				onUploadStarted={this.onUploadStarted}
-				onUploadSuccess={this.onUploadSuccess}
-				onUploadFailed={this.onUploadFailed}
-				onUploadProgress={this.onUploadProgress}
-				onLibrarySelected={this.onLibrarySelected}
-				size={{ width: 1400 }}
-				quality={0.8}
-				fileName={"serviceNoteImage"}
-				popupTitle={"Upload Image"}
-				userId={this.props.user.uid}
-				allowsEditing={false}
-				multiple
-				hideLibrary
-			/>
-		);
-	}
-
-	renderImage(item, index) {
-		const isVideoUrl = Helper.isVideo(item.url);
-		const imagesList = this.getImages();
-
-		if (item.add) {
-			return (
-				<TouchableOpacity
-					activeOpacity={0.8}
-					onPress={() => this.showUploadMenu()}
-				>
-					<View
-						style={[
-							styles.imageContainer,
-							imagesList.length > 1 && styles.imageContainerNotEmpty,
-							index % 3 === 0 && { marginLeft: 0 },
-							index > 2 && { marginTop: 8 },
-						]}
-					>
-						<View style={styles.imageCircle}>
-							<Icon
-								name="camera"
-								type="font-awesome"
-								iconStyle={styles.addImageIcon}
-							/>
-						</View>
-					</View>
-				</TouchableOpacity>
-			);
-		}
-		return (
-			<View
-				style={[
-					styles.imageContainer,
-					imagesList.length > 1 && styles.imageContainerNotEmpty,
-					index % 3 === 0 && { marginLeft: 0 },
-					index > 2 && { marginTop: 8 },
-				]}
-			>
-				{item.uploading ? (
-					<Components.ImageUploadProgress
-						uploader={this.imageUploader}
-						image={item}
-						color={this.props.colourBrandingMain}
-					/>
-				) : (
-					<ImageBackground
-						style={styles.imageBackground}
-						source={Helper.getImageSource(
-							item.thumbNailExists ? item.thumbNailUrl : item.url || item,
-						)}
-					>
-						{isVideoUrl && (
-							<View style={styles.imagePlayContainer}>
-								<TouchableOpacity
-									onPress={this.toggleFullscreenVideo.bind(this, item.url)}
-								>
-									<Icon
-										name="play"
-										type="font-awesome"
-										iconStyle={styles.imageControlIcon}
-									/>
-								</TouchableOpacity>
-							</View>
-						)}
-						<TouchableOpacity
-							style={styles.removeImage}
-							onPress={() => this.removeImage(index)}
-						>
-							<Icon
-								name="remove"
-								type="font-awesome"
-								iconStyle={styles.imageControlIcon}
-								style={styles.removeImage}
-							/>
-						</TouchableOpacity>
-					</ImageBackground>
-				)}
-			</View>
-		);
-	}
-
-	renderImageList() {
-		const imagesList = this.getImages();
-
-		return (
-			<View style={styles.imageListContainer}>
-				<FlatList
-					keyboardShouldPersistTaps="always"
-					enableEmptySections
-					data={imagesList}
-					renderItem={({ item, index }) => this.renderImage(item, index)}
-					keyExtractor={(item, index) => index}
-					numColumns={3}
-					scrollEnabled={false}
-				/>
-			</View>
-		);
-	}
-
-	renderVideoPlayerPopup() {
-		const { showFullscreenVideo, currentVideoUrl } = this.state;
-		if (!currentVideoUrl) return;
-
-		return (
-			<Components.VideoPopup
-				uri={currentVideoUrl}
-				visible={showFullscreenVideo}
-				showFullscreenButton={false}
-				onClose={this.toggleFullscreenVideo}
-			/>
-		);
-	}
-
-	renderAdd() {
-		return (
-			<Modal animationType="slide" visible={this.state.addNoteOpen}>
-				<KeyboardAvoidingView style={styles.container} behavior={"padding"}>
-					{this.renderUploadMenu()}
-					<Components.Header
-						leftText="Cancel"
-						onPressLeft={this.closeAddNote}
-						text=""
-					/>
-					<ScrollView
-						style={styles.scrollContainer}
-						contentContainerStyle={styles.innerContainer}
-					>
-						<Components.TextStyle type="pageHeading">
-							Add Staff Note
-						</Components.TextStyle>
-						<Components.GenericInputSection
-							label="Content"
-							placeholder="Insert your notes here..."
-							value={this.state.noteInput}
-							onChangeText={(noteInput) => this.setState({ noteInput })}
-							isValid={() => {
-								return !_.isEmpty(this.state.noteInput);
-							}}
-							autoCapitalize="sentences"
-							minHeight={135}
-							autoCorrect
-							multiline
-							autoGrow
-							required
-							squaredCorners
-							sectionStyle={styles.inputSection}
-						/>
-						<Components.GenericInputSection
-							label="Attachments"
-							sectionStyle={styles.inputSection}
-						>
-							{this.renderImageList()}
-							{this.state.editingNote ? (
-								(this.state.noteAttachments || []).map((a, i) =>
-									this.renderAttachment(a, i),
-								)
-							) : (
-								<Components.TextStyle type="body" style={styles.attachmentInfo}>
-									PDFs can only be attached to notes from the Community Manager.
-								</Components.TextStyle>
-							)}
-						</Components.GenericInputSection>
-					</ScrollView>
-					<View style={styles.popupFooter}>{this.renderFooterContent()}</View>
-					{this.renderVideoPlayerPopup()}
-				</KeyboardAvoidingView>
-			</Modal>
-		);
-	}
-
-	render() {
-		return (
-			<View style={styles.container}>
-				{this.renderPDF()}
-				{this.renderNoteDeleteConfirm()}
-				{this.renderAdd()}
-				<Components.Header
-					leftIcon="angle-left"
-					onPressLeft={this.onPressBack}
-					text="Staff Notes"
-				/>
-				<ScrollView
-					style={styles.scrollContainer}
-					contentContainerStyle={styles.innerContainer}
-				>
-					{this.renderNotes()}
-				</ScrollView>
-				<Components.AddButton onPress={this.openAddNote} />
-				{this.renderImagePopup()}
-			</View>
-		);
-	}
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      job: {},
+      selectedPDF: null,
+      noteAttachments: [],
+      noteInput: '',
+      addNoteOpen: false,
+      noteImages: [{ add: true }],
+      uploadingImage: false,
+      galleryOpen: false,
+      galleryImages: [],
+      galleryIndex: 0,
+    };
+    this.checkThumb = null;
+  }
+
+  componentDidMount() {
+    this.updateJobState();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.jobs !== this.props.jobs) {
+      this.updateJobState();
+    }
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.checkThumb);
+  }
+
+  updateJobState() {
+    const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || this.props.job;
+    this.setState({ job });
+  }
+
+  onPressBack = () => {
+    Services.navigation.goBack();
+  };
+
+  onOpenAttachment = a => {
+    this.setState({
+      selectedPDF: a,
+    });
+  };
+
+  onCloseAttachment = () => {
+    this.setState({
+      selectedPDF: null,
+    });
+  };
+
+  onPressDeleteNote = n => {
+    this.setState({
+      noteToDelete: n,
+    });
+  };
+
+  onPressConfirmDelete = () => {
+    maintenanceActions.deleteNote(this.props.job.id, this.state.noteToDelete.Id);
+    const newNotes = _.filter(this.state.job.Notes, note => {
+      return note.Id !== this.state.noteToDelete.Id;
+    });
+    const newJob = { ...this.props.job };
+    newJob.Notes = newNotes;
+    this.props.jobAdded(newJob);
+    this.props.onChange && this.props.onChange();
+    this.setState({
+      job: newJob,
+      noteToDelete: null,
+    });
+  };
+
+  onPressCancelDelete = () => {
+    this.setState({ noteToDelete: null });
+  };
+
+  isReadyToSaveNote = () => {
+    const uploadingAttachments = _.some(this.state.noteAttachments, n => n.Uploading);
+    const uploadingImages = _.some(this.state.noteImages, n => n.uploading);
+    if (uploadingAttachments || uploadingImages) return false;
+    return (
+      !_.isEmpty(this.state.noteInput) ||
+      !_.isEmpty(this.state.noteAttachments) ||
+      !_.isEmpty(this.state.noteImages.filter(img => !img.add))
+    );
+  };
+
+  openAddNote = () => {
+    this.setState({
+      addNoteOpen: true,
+      editingNote: null,
+    });
+  };
+
+  closeAddNote = () => {
+    const newState = {
+      addNoteOpen: false,
+      editingNote: null,
+    };
+    if (!!this.state.editingNote) {
+      newState.noteInput = '';
+      newState.noteAttachments = [];
+      newState.noteImages = [];
+    }
+    this.setState(newState);
+  };
+
+  openEditNote = n => {
+    const noteImages = [...(n.Images || []).map(i => ({ url: i, thumbNailUrl: Helper.getThumb300(i) })), { add: true }];
+    this.setState({
+      noteAttachments: n.Attachments || [],
+      noteImages,
+      noteInput: n.Note || '',
+      addNoteOpen: true,
+      editingNote: n.Id,
+      noteMenuOpen: null,
+    });
+  };
+
+  confirmAddNote = async () => {
+    if (!this.isReadyToSaveNote()) {
+      return;
+    }
+
+    try {
+      this.setState({ submittingNote: true });
+      const attachments = this.state.noteAttachments
+        .filter(a => !a.add)
+        .map(a => {
+          return {
+            Title: a.Title,
+            Source: a.Source,
+          };
+        });
+      const images = this.state.noteImages.filter(img => !img.add).map(img => img.url);
+      const res = await (this.state.editingNote
+        ? maintenanceActions.editNote(this.props.job.id, this.state.editingNote, this.state.noteInput, attachments, images)
+        : maintenanceActions.addNote(this.props.job.id, this.state.noteInput, attachments, images));
+      this.setState(
+        {
+          job: res.data.job,
+          submittingNote: false,
+          addNoteOpen: false,
+          noteInput: '',
+          noteAttachments: [],
+          noteImages: [{ add: true }],
+          uploadingImage: false,
+          editingNote: null,
+        },
+        () => {
+          this.props.jobAdded(res.data.job);
+          this.props.onChange && this.props.onChange();
+        },
+      );
+    } catch (err) {
+      console.log('error');
+      console.log(err);
+      this.setState({
+        submittingNote: false,
+        uploadingImage: false,
+      });
+    }
+  };
+
+  setImages = (noteImages, uploadingImage = false, callback = null) => {
+    this.setState({ noteImages, uploadingImage }, callback);
+  };
+
+  getImages = () => {
+    const { noteImages } = this.state;
+    const imagesList = _.cloneDeep(noteImages);
+    if (!imagesList || !Array.isArray(imagesList) || imagesList.length === 0) {
+      return [{ add: true }];
+    }
+    return imagesList;
+  };
+
+  getImageUrls = () => {
+    const imagesList = this.getImages();
+    return _.filter(imagesList, img => {
+      return !img.uploading && !img.add;
+    }).map(img => {
+      return img.url;
+    });
+  };
+
+  waitForThumbnails = () => {
+    if (this.checkThumb) return;
+
+    this.checkThumb = setInterval(async () => {
+      const imagesList = this.getImages();
+      const imagesUpdate = [];
+      await Promise.all(
+        imagesList.map(image => {
+          return new Promise(async resolve => {
+            const newImage = { ...image };
+            imagesUpdate.push(newImage);
+            if (newImage.url && !newImage.thumbNailExists) {
+              newImage.uploading = false;
+              newImage.allowRetry = false;
+              newImage.thumbNailExists = await Helper.imageExists(newImage.thumbNailUrl);
+              resolve(newImage.thumbNailExists);
+            }
+            resolve(true);
+          });
+        }),
+      );
+      const thumbnailsExist = imagesUpdate.every(image => !image.url || image.thumbNailExists);
+      if (thumbnailsExist) {
+        clearInterval(this.checkThumb);
+        this.checkThumb = null;
+        this.setImages(imagesUpdate);
+      }
+    }, 2000);
+  };
+
+  removeImage = index => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(index, 1);
+
+    this.setImages(imagesUpdate);
+  };
+
+  showUploadMenu = () => {
+    Keyboard.dismiss();
+    const { uploadingImage, submittingNote } = this.state;
+    if (uploadingImage || submittingNote) return;
+    this.imageUploader.showUploadMenu();
+  };
+
+  toggleFullscreenVideo = url => {
+    if (typeof url !== 'string') url = '';
+    this.setState({ showFullscreenVideo: url.length > 0, currentVideoUrl: url });
+  };
+
+  openGallery(images, index) {
+    this.setState({ galleryOpen: true, galleryImages: images, galleryIndex: index });
+  }
+
+  closeGallery() {
+    this.setState({ galleryOpen: false, galleryImages: [], galleryIndex: 0 });
+  }
+
+  onUploadStarted = (uploadUri, imageUri) => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(imagesUpdate.length - 1, 0, {
+      uploading: true,
+      uploadProgress: '0%',
+      uploadUri,
+      imageUri,
+      allowRetry: true,
+    });
+
+    this.setImages(imagesUpdate, true);
+  };
+
+  onUploadProgress = progress => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === progress.uri) {
+        img.uploadProgress = progress.percentage;
+        img.uploading = true;
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate, true);
+  };
+
+  onUploadSuccess = async (uri, uploadUri) => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === uploadUri && img.uploading) {
+        img.url = uri.replace('/general/', '/general1400/');
+        img.thumbNailExists = false;
+        img.thumbNailUrl = Helper.getThumb300(img.url);
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate, false, () => this.waitForThumbnails());
+  };
+
+  onUploadFailed = uploadUri => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.map(img => {
+      if (img.uploadUri === uploadUri) {
+        img.uploading = true; // Requried for retry
+        img.uploadProgress = '';
+        img.allowRetry = true;
+      }
+    });
+
+    this.setImages(imagesUpdate);
+  };
+
+  onLibrarySelected = uri => {
+    const imagesUpdate = this.getImages();
+    imagesUpdate.splice(imagesUpdate.length - 1, 0, {
+      uploading: false,
+      allowRetry: false,
+      url: Helper.get1400(uri),
+      thumbNailExists: true,
+      thumbNailUrl: Helper.getThumb300(uri),
+    });
+
+    this.setImages(imagesUpdate);
+  };
+
+  renderAttachment(a, i) {
+    return (
+      <Components.Attachment
+        onPress={() => {
+          this.onOpenAttachment(a);
+        }}
+        key={i}
+        title={a.Title}
+      />
+    );
+  }
+
+  renderPlayableImageUrl(images, index, containerStyle) {
+    const url = images[index];
+    const thumbUrl = Helper.getThumb300(url);
+
+    if (Helper.isVideo(url)) {
+      return (
+        <ImageBackground style={[{ flex: 1 }, containerStyle]} source={{ uri: thumbUrl }}>
+          <View style={styles.imagePlayContainer}>
+            <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, url)}>
+              <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
+            </TouchableOpacity>
+          </View>
+        </ImageBackground>
+      );
+    }
+
+    const imageUrl = Helper.get1400(url);
+    return (
+      <TouchableOpacity style={containerStyle} onPress={this.openGallery.bind(this, images, index || 0)}>
+        <ImageBackground resizeMode="cover" style={styles.imageContainer} source={{ uri: imageUrl }} />
+      </TouchableOpacity>
+    );
+  }
+
+  renderImages(note) {
+    if (!note) return null;
+    if (!_.isNil(note.Images) && !_.isEmpty(note.Images)) {
+      return (
+        <ScrollView horizontal style={styles.sideBySideImages}>
+          {note.Images.map((_p, index) => this.renderPlayableImageUrl(note.Images, index, styles.sideBySideImageContainer))}
+        </ScrollView>
+      );
+    }
+    return null;
+  }
+
+  renderImagePopup() {
+    const { galleryOpen, galleryImages, galleryIndex } = this.state;
+    console.log('renderimagepopup', { galleryOpen, galleryImages, galleryIndex });
+    return (
+      <Components.ImagePopup visible={galleryOpen} images={galleryImages} index={galleryIndex} onClose={this.closeGallery.bind(this)} />
+    );
+  }
+
+  renderNote(n) {
+    return (
+      <View style={styles.noteContainer} key={n.Id}>
+        <View style={styles.noteContainerTop}>
+          <Components.ProfilePic Diameter={30} ProfilePic={n.User.profilePic} style={styles.profilePic} />
+          <View style={styles.noteContainerTopRight}>
+            {this.props.user.uid === n.User.id && (
+              <TouchableOpacity
+                onPress={() => {
+                  this.onPressDeleteNote(n);
+                }}
+              >
+                <View style={[styles.noteContainerButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+                  <Icon name="trash" type="font-awesome" iconStyle={styles.noteContainerButtonIcon} />
+                </View>
+              </TouchableOpacity>
+            )}
+            {this.props.user.uid === n.User.id && (
+              <TouchableOpacity
+                onPress={() => {
+                  this.openEditNote(n);
+                }}
+              >
+                <View style={[styles.noteContainerButtonContainer, { backgroundColor: this.props.colourBrandingMain }]}>
+                  <Icon name="pencil" type="font-awesome" iconStyle={styles.noteContainerButtonIcon} />
+                </View>
+              </TouchableOpacity>
+            )}
+            <View style={styles.noteContainerTopFill}>
+              <Text style={styles.noteContainerName}>{n.User.displayName}</Text>
+            </View>
+          </View>
+        </View>
+        <Text style={styles.noteContainerText}>{n.Note}</Text>
+        {(n.Attachments || []).map((a, i) => this.renderAttachment(a, i))}
+        {this.renderImages(n)}
+        <Text style={styles.noteTimestamp}>
+          {moment
+            .utc(n.Timestamp)
+            .local()
+            .format(Helper.TIMESTAMP_FORMAT)}
+        </Text>
+      </View>
+    );
+  }
+
+  renderNotes() {
+    return (this.state.job.Notes || []).map((n, i) => {
+      return this.renderNote(n, i);
+    });
+  }
+
+  renderPDF() {
+    if (_.isEmpty(this.state.selectedPDF)) {
+      return null;
+    }
+    return (
+      <Components.PDFPopup
+        source={this.state.selectedPDF.Source}
+        onClose={this.onCloseAttachment}
+        title={this.state.selectedPDF.Title}
+        pdfCount={1}
+      />
+    );
+  }
+
+  renderNoteDeleteConfirm() {
+    return (
+      <Components.ConfirmPopup
+        visible={!!this.state.noteToDelete}
+        onConfirm={this.onPressConfirmDelete}
+        onCancel={this.onPressCancelDelete}
+        onClose={this.onPressCancelDelete}
+        text="Are you sure you want to delete this note?"
+      />
+    );
+  }
+
+  renderFooterContent() {
+    if (this.state.submittingNote) {
+      return <Components.Spinner />;
+    }
+    return (
+      <Components.InlineButton color={this.props.colourBrandingMain} onPress={this.confirmAddNote} fillTouchable large>
+        Save
+      </Components.InlineButton>
+    );
+  }
+
+  renderUploadMenu() {
+    return (
+      <Components.ImageUploader
+        ref={ref => (this.imageUploader = ref)}
+        onUploadStarted={this.onUploadStarted}
+        onUploadSuccess={this.onUploadSuccess}
+        onUploadFailed={this.onUploadFailed}
+        onUploadProgress={this.onUploadProgress}
+        onLibrarySelected={this.onLibrarySelected}
+        size={{ width: 1400 }}
+        quality={0.8}
+        fileName={'serviceNoteImage'}
+        popupTitle={'Upload Image'}
+        userId={this.props.user.uid}
+        allowsEditing={false}
+        multiple
+        hideLibrary
+      />
+    );
+  }
+
+  renderImage(item, index) {
+    const isVideoUrl = Helper.isVideo(item.url);
+    const imagesList = this.getImages();
+
+    if (item.add) {
+      return (
+        <TouchableOpacity activeOpacity={0.8} onPress={() => this.showUploadMenu()}>
+          <View
+            style={[
+              styles.imageContainer,
+              imagesList.length > 1 && styles.imageContainerNotEmpty,
+              index % 3 === 0 && { marginLeft: 0 },
+              index > 2 && { marginTop: 8 },
+            ]}
+          >
+            <View style={styles.imageCircle}>
+              <Icon name="camera" type="font-awesome" iconStyle={styles.addImageIcon} />
+            </View>
+          </View>
+        </TouchableOpacity>
+      );
+    }
+    return (
+      <View
+        style={[
+          styles.imageContainer,
+          imagesList.length > 1 && styles.imageContainerNotEmpty,
+          index % 3 === 0 && { marginLeft: 0 },
+          index > 2 && { marginTop: 8 },
+        ]}
+      >
+        {item.uploading ? (
+          <Components.ImageUploadProgress uploader={this.imageUploader} image={item} color={this.props.colourBrandingMain} />
+        ) : (
+          <ImageBackground
+            style={styles.imageBackground}
+            source={Helper.getImageSource(item.thumbNailExists ? item.thumbNailUrl : item.url || item)}
+          >
+            {isVideoUrl && (
+              <View style={styles.imagePlayContainer}>
+                <TouchableOpacity onPress={this.toggleFullscreenVideo.bind(this, item.url)}>
+                  <Icon name="play" type="font-awesome" iconStyle={styles.imageControlIcon} />
+                </TouchableOpacity>
+              </View>
+            )}
+            <TouchableOpacity style={styles.removeImage} onPress={() => this.removeImage(index)}>
+              <Icon name="remove" type="font-awesome" iconStyle={styles.imageControlIcon} style={styles.removeImage} />
+            </TouchableOpacity>
+          </ImageBackground>
+        )}
+      </View>
+    );
+  }
+
+  renderImageList() {
+    const imagesList = this.getImages();
+
+    return (
+      <View style={styles.imageListContainer}>
+        <FlatList
+          keyboardShouldPersistTaps="always"
+          enableEmptySections
+          data={imagesList}
+          renderItem={({ item, index }) => this.renderImage(item, index)}
+          keyExtractor={(item, index) => index}
+          numColumns={3}
+          scrollEnabled={false}
+        />
+      </View>
+    );
+  }
+
+  renderVideoPlayerPopup() {
+    const { showFullscreenVideo, currentVideoUrl } = this.state;
+    if (!currentVideoUrl) return;
+
+    return (
+      <Components.VideoPopup
+        uri={currentVideoUrl}
+        visible={showFullscreenVideo}
+        showFullscreenButton={false}
+        onClose={this.toggleFullscreenVideo}
+      />
+    );
+  }
+
+  renderAdd() {
+    return (
+      <Modal animationType="slide" visible={this.state.addNoteOpen}>
+        <KeyboardAvoidingView style={styles.container} behavior={'padding'}>
+          {this.renderUploadMenu()}
+          <Components.Header leftText="Cancel" onPressLeft={this.closeAddNote} text="" />
+          <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.innerContainer}>
+            <Components.TextStyle type="pageHeading">Add Staff Note</Components.TextStyle>
+            <Components.GenericInputSection
+              label="Content"
+              placeholder="Insert your notes here..."
+              value={this.state.noteInput}
+              onChangeText={noteInput => this.setState({ noteInput })}
+              isValid={() => {
+                return !_.isEmpty(this.state.noteInput);
+              }}
+              autoCapitalize="sentences"
+              minHeight={135}
+              autoCorrect
+              multiline
+              autoGrow
+              required
+              squaredCorners
+              sectionStyle={styles.inputSection}
+            />
+            <Components.GenericInputSection label="Attachments" sectionStyle={styles.inputSection}>
+              {this.renderImageList()}
+              {this.state.editingNote ? (
+                (this.state.noteAttachments || []).map((a, i) => this.renderAttachment(a, i))
+              ) : (
+                <Components.TextStyle type="body" style={styles.attachmentInfo}>
+                  PDFs can only be attached to notes from the Community Manager.
+                </Components.TextStyle>
+              )}
+            </Components.GenericInputSection>
+          </ScrollView>
+          <View style={styles.popupFooter}>{this.renderFooterContent()}</View>
+          {this.renderVideoPlayerPopup()}
+        </KeyboardAvoidingView>
+      </Modal>
+    );
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        {this.renderPDF()}
+        {this.renderNoteDeleteConfirm()}
+        {this.renderAdd()}
+        <Components.Header leftIcon="angle-left" onPressLeft={this.onPressBack} text="Staff Notes" />
+        <ScrollView style={styles.scrollContainer} contentContainerStyle={styles.innerContainer}>
+          {this.renderNotes()}
+        </ScrollView>
+        <Components.AddButton onPress={this.openAddNote} />
+        {this.renderImagePopup()}
+      </View>
+    );
+  }
 }
 
 const styles = {
-	container: {
-		flex: 1,
-		position: "relative",
-		backgroundColor: "#fff",
-	},
-	scrollContainer: {
-		flex: 1,
-	},
-	innerContainer: {
-		padding: 16,
-	},
-	popupFooter: {
-		paddingHorizontal: 16,
-		paddingBottom: getBottomSpace() + 16,
-	},
-	noteContainer: {
-		...Helper.getShadowStyle(),
-		padding: 8,
-		marginBottom: 16,
-	},
-	noteContainerTop: {
-		flexDirection: "row",
-		alignItems: "center",
-	},
-	profilePic: {
-		marginRight: 8,
-	},
-	noteContainerTopFill: {
-		flex: 1,
-	},
-	noteContainerName: {
-		fontFamily: "sf-semibold",
-		fontSize: 13,
-		color: Colours.TEXT_DARKEST,
-	},
-	noteContainerText: {
-		marginTop: 8,
-		fontFamily: "sf-regular",
-		fontSize: 13,
-		color: Colours.TEXT_DARKEST,
-	},
-	noteTimestamp: {
-		marginTop: 8,
-		fontFamily: "sf-semibold",
-		fontSize: 11,
-		color: Colours.TEXT_LIGHT,
-	},
-	noteContainerTopRight: {
-		flex: 1,
-		flexDirection: "row-reverse",
-		alignItems: "center",
-	},
-	noteContainerButtonContainer: {
-		width: 24,
-		height: 24,
-		borderRadius: 12,
-		alignItems: "center",
-		justifyContent: "center",
-		marginLeft: 8,
-	},
-	noteContainerButtonIcon: {
-		fontSize: 13,
-		color: "#fff",
-	},
-	inputSection: {
-		marginTop: 24,
-	},
-	sectionHeading: {
-		fontFamily: "qs-bold",
-		fontSize: 24,
-		color: Colours.TEXT_DARKEST,
-	},
-	attachmentInfo: {
-		marginTop: 8,
-	},
-	imageListContainer: {
-		marginVertical: 8,
-	},
-	imageContainer: {
-		width: PHOTO_SIZE,
-		height: PHOTO_SIZE,
-		borderStyle: "dashed",
-		justifyContent: "center",
-		alignItems: "center",
-		borderWidth: 1,
-		borderColor: Colours.LINEGREY,
-		backgroundColor: Colours.BOXGREY,
-		borderRadius: 4,
-		marginLeft: 8,
-	},
-	imageContainerNotEmpty: {
-		borderWidth: 1,
-		borderColor: Colours.LINEGREY,
-		backgroundColor: "#fff",
-		borderStyle: "dashed",
-	},
-	imageBackground: {
-		flex: 1,
-		height: "100%",
-		width: "100%",
-		borderRadius: 4,
-	},
-	imageCircle: {
-		width: 90,
-		height: 90,
-		borderRadius: 45,
-		backgroundColor: Colours.PINKISH_GREY,
-		justifyContent: "center",
-	},
-	addImageIcon: {
-		color: "#fff",
-		fontSize: 32,
-	},
-	imagePlayContainer: {
-		position: "absolute",
-		top: 0,
-		left: 0,
-		right: 0,
-		bottom: 0,
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	imageControlIcon: {
-		color: "#fff",
-		fontSize: 20,
-		textShadowColor: "rgba(0,0,0,0.3)",
-		textShadowOffset: { width: 2, height: 2 },
-	},
-	removeImage: {
-		position: "absolute",
-		top: 0,
-		right: 0,
-		padding: 4,
-		width: 40,
-		height: 40,
-		alignItems: "center",
-		justifyContent: "center",
-	},
-	sideBySideImages: {
-		flex: 1,
-		flexDirection: "row",
-		marginTop: 12,
-		marginHorizontal: -8,
-	},
-	sideBySideImageContainer: {
-		backgroundColor: "#fff",
-		width: 60,
-		height: 50,
-		borderRadius: 2,
-		overflow: "hidden",
-		marginRight: 2,
-	},
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#fff',
+  },
+  scrollContainer: {
+    flex: 1,
+  },
+  innerContainer: {
+    padding: 16,
+  },
+  popupFooter: {
+    paddingHorizontal: 16,
+    paddingBottom: getBottomSpace() + 16,
+  },
+  noteContainer: {
+    ...Helper.getShadowStyle(),
+    padding: 8,
+    marginBottom: 16,
+  },
+  noteContainerTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  profilePic: {
+    marginRight: 8,
+  },
+  noteContainerTopFill: {
+    flex: 1,
+  },
+  noteContainerName: {
+    fontFamily: 'sf-semibold',
+    fontSize: 13,
+    color: Colours.TEXT_DARKEST,
+  },
+  noteContainerText: {
+    marginTop: 8,
+    fontFamily: 'sf-regular',
+    fontSize: 13,
+    color: Colours.TEXT_DARKEST,
+  },
+  noteTimestamp: {
+    marginTop: 8,
+    fontFamily: 'sf-semibold',
+    fontSize: 11,
+    color: Colours.TEXT_LIGHT,
+  },
+  noteContainerTopRight: {
+    flex: 1,
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+  },
+  noteContainerButtonContainer: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: 8,
+  },
+  noteContainerButtonIcon: {
+    fontSize: 13,
+    color: '#fff',
+  },
+  inputSection: {
+    marginTop: 24,
+  },
+  sectionHeading: {
+    fontFamily: 'qs-bold',
+    fontSize: 24,
+    color: Colours.TEXT_DARKEST,
+  },
+  attachmentInfo: {
+    marginTop: 8,
+  },
+  imageListContainer: {
+    marginVertical: 8,
+  },
+  imageContainer: {
+    width: PHOTO_SIZE,
+    height: PHOTO_SIZE,
+    borderStyle: 'dashed',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: Colours.BOXGREY,
+    borderRadius: 4,
+    marginLeft: 8,
+  },
+  imageContainerNotEmpty: {
+    borderWidth: 1,
+    borderColor: Colours.LINEGREY,
+    backgroundColor: '#fff',
+    borderStyle: 'dashed',
+  },
+  imageBackground: {
+    flex: 1,
+    height: '100%',
+    width: '100%',
+    borderRadius: 4,
+  },
+  imageCircle: {
+    width: 90,
+    height: 90,
+    borderRadius: 45,
+    backgroundColor: Colours.PINKISH_GREY,
+    justifyContent: 'center',
+  },
+  addImageIcon: {
+    color: '#fff',
+    fontSize: 32,
+  },
+  imagePlayContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  imageControlIcon: {
+    color: '#fff',
+    fontSize: 20,
+    textShadowColor: 'rgba(0,0,0,0.3)',
+    textShadowOffset: { width: 2, height: 2 },
+  },
+  removeImage: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 4,
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  sideBySideImages: {
+    flex: 1,
+    flexDirection: 'row',
+    marginTop: 12,
+    marginHorizontal: -8,
+  },
+  sideBySideImageContainer: {
+    backgroundColor: '#fff',
+    width: 60,
+    height: 50,
+    borderRadius: 2,
+    overflow: 'hidden',
+    marginRight: 2,
+  },
 };
 
-const mapStateToProps = (state) => {
-	return {
-		user: state.user,
-		colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-		colourBrandingLight: Colours.getLightBrandingColourFromState(state),
-		jobs: state[values.reducerKey].jobs,
-	};
+const mapStateToProps = state => {
+  return {
+    user: state.user,
+    colourBrandingMain: Colours.getMainBrandingColourFromState(state),
+    colourBrandingLight: Colours.getLightBrandingColourFromState(state),
+    jobs: state[values.reducerKey].jobs,
+  };
 };
 
 export default connect(mapStateToProps, { jobAdded })(RequestNotes);