@plusscommunities/pluss-maintenance-app-forms 6.0.10 → 6.0.11-auth.0

package/src/screens/RequestNotes.js

@@ -1,418 +1,956 @@
-import React, { Component } from 'react';
-import { ScrollView, View, Text, TouchableOpacity, Modal, KeyboardAvoidingView, Platform } from 'react-native';
-import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
-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';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	ScrollView,
+	View,
+	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,
-    };
-  }
-
-  componentDidMount() {
-    this.updateJobState();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.jobs !== this.props.jobs) {
-      this.updateJobState();
-    }
-  }
-
-  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 = () => {
-    if (
-      _.some(this.state.noteAttachments, n => {
-        return n.Uploading;
-      })
-    ) {
-      return false;
-    }
-    return !_.isEmpty(this.state.noteInput) || !_.isEmpty(this.state.noteAttachments);
-  };
-
-  openAddNote = () => {
-    this.setState({
-      addNoteOpen: true,
-      editingNote: null,
-    });
-  };
-
-  closeAddNote = () => {
-    const newState = {
-      addNoteOpen: false,
-      editingNote: null,
-    };
-    if (!!this.state.editingNote) {
-      newState.noteInput = '';
-      newState.noteAttachments = [];
-    }
-    this.setState(newState);
-  };
-
-  openEditNote = n => {
-    this.setState({
-      noteAttachments: n.Attachments || [],
-      noteInput: n.Note || '',
-      addNoteOpen: true,
-      editingNote: n.Id,
-      noteMenuOpen: null,
-    });
-  };
-
-  confirmAddNote = async () => {
-    if (!this.isReadyToSaveNote()) {
-      return;
-    }
-
-    try {
-      this.setState({ submittingNote: true });
-      const res = await (this.state.editingNote
-        ? maintenanceActions.editNote(
-            this.props.job.id,
-            this.state.editingNote,
-            this.state.noteInput,
-            this.state.noteAttachments.map(a => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-          )
-        : maintenanceActions.addNote(
-            this.props.job.id,
-            this.state.noteInput,
-            this.state.noteAttachments.map(a => {
-              return {
-                Title: a.Title,
-                Source: a.Source,
-              };
-            }),
-          ));
-      this.setState(
-        {
-          job: res.data.job,
-          submittingNote: false,
-          addNoteOpen: false,
-          noteInput: '',
-          noteAttachments: [],
-          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,
-      });
-    }
-  };
-
-  renderAttachment(a, i) {
-    return (
-      <Components.Attachment
-        onPress={() => {
-          this.onOpenAttachment(a);
-        }}
-        key={i}
-        title={a.Title}
-      />
-    );
-  }
-
-  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))}
-        <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>
-    );
-  }
-
-  renderAdd() {
-    return (
-      <Modal animationType="slide" visible={this.state.addNoteOpen}>
-        <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'padding'}>
-          <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.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>
-        </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} />
-      </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.Text type="pageHeading">Add Staff Note</Components.Text>
+						<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.Text type="body" style={styles.attachmentInfo}>
+									PDFs can only be attached to notes from the Community Manager.
+								</Components.Text>
+							)}
+						</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,
-  },
+	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);