@plusscommunities/pluss-core-app 8.0.0 → 8.0.1-auth.0

package/src/components/Reactions.js

@@ -1,75 +1,77 @@
-import React, { Component } from 'react';
-import { View } from 'react-native';
-import { getReactions, getUserPreview } from '../helper';
-import { Reaction } from './Reaction';
+import React, { Component } from "react";
+import { View } from "react-native";
+import { getReactions, getUserPreview } from "../helper";
+import { Reaction } from "./Reaction";
 
 class Reactions extends Component {
-  state = {
-    reactions: getReactions(),
-  };
+	state = {
+		reactions: getReactions(),
+	};
 
-  getReaction(key) {
-    if (!this.props.entity) {
-      return {};
-    }
-    if (!this.props.entity.Reactions) {
-      this.props.entity.Reactions = {};
-    }
-    return this.props.entity.Reactions[key] || {};
-  }
+	getReaction(key) {
+		if (!this.props.entity) {
+			return {};
+		}
+		if (!this.props.entity.Reactions) {
+			this.props.entity.Reactions = {};
+		}
+		return this.props.entity.Reactions[key] || {};
+	}
 
-  onLike(key) {
-    if (!this.props.entity.Reactions) {
-      this.props.entity.Reactions = {};
-    }
-    if (!this.props.entity.Reactions[key]) {
-      this.props.entity.Reactions[key] = {};
-    }
-    this.props.entity.Reactions[key][this.props.user.uid] = getUserPreview(this.props.user);
-    this.props.onUpdateReactions();
-  }
+	onLike(key) {
+		if (!this.props.entity.Reactions) {
+			this.props.entity.Reactions = {};
+		}
+		if (!this.props.entity.Reactions[key]) {
+			this.props.entity.Reactions[key] = {};
+		}
+		this.props.entity.Reactions[key][this.props.user.uid] = getUserPreview(
+			this.props.user,
+		);
+		this.props.onUpdateReactions();
+	}
 
-  onUnlike(key) {
-    if (!this.props.entity.Reactions) {
-      return;
-    }
-    if (!this.props.entity.Reactions[key]) {
-      return;
-    }
-    delete this.props.entity.Reactions[key][this.props.user.uid];
-    this.props.onUpdateReactions();
-  }
+	onUnlike(key) {
+		if (!this.props.entity.Reactions) {
+			return;
+		}
+		if (!this.props.entity.Reactions[key]) {
+			return;
+		}
+		delete this.props.entity.Reactions[key][this.props.user.uid];
+		this.props.onUpdateReactions();
+	}
 
-  render() {
-    return (
-      <View style={[styles.container, this.props.style]}>
-        {this.state.reactions.map((r, i) => {
-          return (
-            <Reaction
-              key={i}
-              reaction={r}
-              entityType={this.props.entityType}
-              entityId={this.props.entityId}
-              reactions={this.getReaction(r.key)}
-              anyHighlighted={this.props.anyHighlighted}
-              userId={this.props.user.uid}
-              onLike={this.onLike.bind(this, r.key)}
-              onUnlike={this.onUnlike.bind(this, r.key)}
-              site={this.props.site}
-            />
-          );
-        })}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View style={[styles.container, this.props.style]}>
+				{this.state.reactions.map((r, i) => {
+					return (
+						<Reaction
+							key={i}
+							reaction={r}
+							entityType={this.props.entityType}
+							entityId={this.props.entityId}
+							reactions={this.getReaction(r.key)}
+							anyHighlighted={this.props.anyHighlighted}
+							userId={this.props.user.uid}
+							onLike={this.onLike.bind(this, r.key)}
+							onUnlike={this.onUnlike.bind(this, r.key)}
+							site={this.props.site}
+						/>
+					);
+				})}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    width: '100%',
-  },
+	container: {
+		flexDirection: "row",
+		justifyContent: "center",
+		width: "100%",
+	},
 };
 
 export { Reactions };

package/src/components/SharingTools.js

@@ -1,142 +1,193 @@
-import React, { Component } from 'react';
-import _ from 'lodash';
-import { TouchableOpacity, StyleSheet, View, Text } from 'react-native';
-import { Icon } from '@rneui/themed';
-import * as FileSystem from 'expo-file-system';
-import * as Sharing from 'expo-sharing';
-import * as MediaLibrary from 'expo-media-library';
-import { StatusBarHeight, isVideo, getMimeType } from '../helper';
-import { MiddlePopup } from './MiddlePopup';
-import Config from '../config';
+import React, { Component } from "react";
+import _ from "lodash";
+import { TouchableOpacity, StyleSheet, View, Alert } from "react-native";
+import { Text } from "./Text";
+import { Icon } from "@rneui/themed";
+import { File, Paths } from "expo-file-system";
+import * as Sharing from "expo-sharing";
+import * as MediaLibrary from "expo-media-library";
+import { StatusBarHeight, isVideo, getMimeType } from "../helper";
+import { MiddlePopup } from "./MiddlePopup";
+import Config from "../config";
 
 class SharingTools extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      message: '',
-    };
-  }
-
-  downloadMedia = async () => {
-    const remoteUrl = this.props.uri;
-    const parts = remoteUrl.split('/').splice(-2);
-    const mediaId = parts[0];
-    const extension = parts[1].split('.').splice(-1)[0];
-
-    const downloadPath = `${FileSystem.cacheDirectory}${mediaId}.${extension}`;
-    const { uri: localUrl } = await FileSystem.downloadAsync(remoteUrl, downloadPath);
-    return { localUrl, extension };
-  };
-
-  onSave = () => {
-    this.setState({ message: 'Saving...' }, async () => {
-      const { localUrl } = await this.downloadMedia();
-      await MediaLibrary.saveToLibraryAsync(localUrl);
-
-      this.setState({ message: 'Saved' }, () => {
-        setTimeout(() => {
-          this.setState({ message: '' });
-        }, 2000);
-      });
-    });
-  };
-
-  onShare = async () => {
-    if (!(await Sharing.isAvailableAsync())) return;
-
-    this.setState({ message: 'Preparing...' }, async () => {
-      const { localUrl, extension } = await this.downloadMedia();
-      // console.log('sharing...', localUrl);
-
-      const video = isVideo(localUrl);
-      const mimeType = getMimeType(localUrl);
-      const fileDetails = {
-        extension: `.${extension}`,
-        shareOptions: {
-          mimeType,
-          dialogTitle: video ? 'Share video' : 'Share photo',
-          UTI: mimeType,
-        },
-      };
-
-      await Sharing.shareAsync(localUrl, fileDetails.shareOptions);
-      this.setState({ message: '' });
-    });
-  };
-
-  renderTools() {
-    return (
-      <View style={styles.toolsContainer}>
-        {Config.env.allowMediaDownload && (
-          <TouchableOpacity onPress={this.onSave} activeOpacity={0.6}>
-            <Icon name="download" type="font-awesome" iconStyle={styles.toolIcon} style={styles.toolIconContainer} />
-          </TouchableOpacity>
-        )}
-        {Config.env.allowMediaSharing && (
-          <TouchableOpacity onPress={this.onShare} activeOpacity={0.6}>
-            <Icon name="share-square-o" type="font-awesome" iconStyle={styles.toolIcon} style={styles.toolIconContainer} />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
-
-  renderMessage() {
-    return (
-      <MiddlePopup visible={!_.isEmpty(this.state.message)}>
-        <View style={styles.messageContainer}>
-          <Text style={styles.messageText}>{this.state.message}</Text>
-        </View>
-      </MiddlePopup>
-    );
-  }
-
-  render() {
-    return (
-      <View style={styles.container}>
-        {this.renderTools()}
-        {this.renderMessage()}
-      </View>
-    );
-  }
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			message: "",
+		};
+	}
+
+	downloadMedia = async () => {
+		const remoteUrl = this.props.uri;
+		if (!remoteUrl) {
+			throw new Error("No media URL provided");
+		}
+
+		const parts = remoteUrl.split("/").splice(-2);
+		const mediaId = parts[0];
+		const extension = parts[1]?.split(".").splice(-1)[0] || "jpg";
+
+		const file = await File.downloadFileAsync(
+			remoteUrl,
+			new File(Paths.cache, `${mediaId}.${extension}`),
+			{ idempotent: true },
+		);
+		return { localUrl: file.uri, extension };
+	};
+
+	onSave = async () => {
+		try {
+			// Request permissions first
+			const { status } = await MediaLibrary.requestPermissionsAsync();
+			if (status !== "granted") {
+				Alert.alert(
+					"Permission Required",
+					"Please allow access to your photo library to save photos.",
+					[{ text: "OK" }],
+				);
+				return;
+			}
+
+			this.setState({ message: "Saving..." });
+
+			const { localUrl } = await this.downloadMedia();
+			await MediaLibrary.saveToLibraryAsync(localUrl);
+
+			this.setState({ message: "Saved" }, () => {
+				setTimeout(() => {
+					this.setState({ message: "" });
+				}, 2000);
+			});
+		} catch (error) {
+			console.log("SharingTools onSave error:", error);
+			this.setState({ message: "" });
+			Alert.alert("Save Failed", "Unable to save photo. Please try again.", [
+				{ text: "OK" },
+			]);
+		}
+	};
+
+	onShare = async () => {
+		if (!(await Sharing.isAvailableAsync())) {
+			Alert.alert(
+				"Sharing Unavailable",
+				"Sharing is not available on this device.",
+				[{ text: "OK" }],
+			);
+			return;
+		}
+
+		try {
+			this.setState({ message: "Preparing..." });
+
+			const { localUrl, extension } = await this.downloadMedia();
+
+			const video = isVideo(localUrl);
+			const mimeType = getMimeType(localUrl);
+			const fileDetails = {
+				extension: `.${extension}`,
+				shareOptions: {
+					mimeType,
+					dialogTitle: video ? "Share video" : "Share photo",
+					UTI: mimeType,
+				},
+			};
+
+			await Sharing.shareAsync(localUrl, fileDetails.shareOptions);
+			this.setState({ message: "" });
+		} catch (error) {
+			console.log("SharingTools onShare error:", error);
+			this.setState({ message: "" });
+			Alert.alert("Share Failed", "Unable to share photo. Please try again.", [
+				{ text: "OK" },
+			]);
+		}
+	};
+
+	renderTools() {
+		return (
+			<View style={styles.toolsContainer}>
+				{Config.env.allowMediaDownload && (
+					<TouchableOpacity onPress={this.onSave} activeOpacity={0.6}>
+						<Icon
+							name="download"
+							type="font-awesome"
+							iconStyle={styles.toolIcon}
+							style={styles.toolIconContainer}
+						/>
+					</TouchableOpacity>
+				)}
+				{Config.env.allowMediaSharing && (
+					<TouchableOpacity onPress={this.onShare} activeOpacity={0.6}>
+						<Icon
+							name="share-square-o"
+							type="font-awesome"
+							iconStyle={styles.toolIcon}
+							style={styles.toolIconContainer}
+						/>
+					</TouchableOpacity>
+				)}
+			</View>
+		);
+	}
+
+	renderMessage() {
+		return (
+			<MiddlePopup visible={!_.isEmpty(this.state.message)}>
+				<View style={styles.messageContainer}>
+					<Text style={styles.messageText}>{this.state.message}</Text>
+				</View>
+			</MiddlePopup>
+		);
+	}
+
+	render() {
+		return (
+			<View style={styles.container}>
+				{this.renderTools()}
+				{this.renderMessage()}
+			</View>
+		);
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-  },
-  toolsContainer: {
-    position: 'absolute',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    left: 0,
-    zIndex: 3,
-    top: StatusBarHeight(0),
-  },
-  toolIconContainer: {
-    width: 55,
-    height: 55,
-  },
-  toolIcon: {
-    fontSize: 25,
-    padding: 15,
-    width: 55,
-    textAlign: 'center',
-    color: '#fff',
-    zIndex: 3,
-  },
-  messageContainer: {
-    backgroundColor: '#000',
-    borderRadius: 10,
-    paddingVertical: 10,
-    paddingHorizontal: 30,
-  },
-  messageText: {
-    fontFamily: 'sf-bold',
-    fontSize: 24,
-    color: '#fff',
-  },
+	container: {
+		position: "absolute",
+	},
+	toolsContainer: {
+		position: "absolute",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		left: 0,
+		zIndex: 3,
+		top: StatusBarHeight(0),
+	},
+	toolIconContainer: {
+		width: 55,
+		height: 55,
+	},
+	toolIcon: {
+		fontSize: 25,
+		padding: 15,
+		width: 55,
+		textAlign: "center",
+		color: "#fff",
+		zIndex: 3,
+	},
+	messageContainer: {
+		backgroundColor: "#000",
+		borderRadius: 10,
+		paddingVertical: 10,
+		paddingHorizontal: 30,
+	},
+	messageText: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		color: "#fff",
+	},
 });
 
 export { SharingTools };

package/src/components/Spinner.js

@@ -1,21 +1,21 @@
-import React from 'react';
-import { View } from 'react-native';
-import { LoadingCircles } from './LoadingCircles';
+import React from "react";
+import { View } from "react-native";
+import { LoadingCircles } from "./LoadingCircles";
 
 const Spinner = ({ color, style }) => {
-  return (
-    <View style={[styles.spinnerStyle, style]}>
-      <LoadingCircles color={color} />
-    </View>
-  );
+	return (
+		<View style={[styles.spinnerStyle, style]}>
+			<LoadingCircles color={color} />
+		</View>
+	);
 };
 
 const styles = {
-  spinnerStyle: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+	spinnerStyle: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+	},
 };
 
 export { Spinner };

package/src/components/StickyFooter.js

@@ -1,34 +1,44 @@
-import React, { PureComponent } from 'react';
-import { View } from 'react-native';
-import { LINEGREY } from '../colours';
-import { FOOTER_HEIGHT } from '../constants';
+import React, { PureComponent } from "react";
+import { View } from "react-native";
+import { LINEGREY } from "../colours";
+import { FOOTER_HEIGHT } from "../constants";
 
 class StickyFooter extends PureComponent {
-  render() {
-    return <View style={[styles.section, this.props.lineSeparated && styles.lineSeparated, this.props.style]}>{this.props.children}</View>;
-  }
+	render() {
+		return (
+			<View
+				style={[
+					styles.section,
+					this.props.lineSeparated && styles.lineSeparated,
+					this.props.style,
+				]}
+			>
+				{this.props.children}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  section: {
-    backgroundColor: '#fff',
-    height: FOOTER_HEIGHT,
-    borderTopWidth: 0,
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: -1,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 16,
-  },
-  lineSeparated: {
-    borderTopWidth: 1,
-    borderColor: LINEGREY,
-    shadowOpacity: 0,
-    elevation: 0,
-  },
+	section: {
+		backgroundColor: "#fff",
+		height: FOOTER_HEIGHT,
+		borderTopWidth: 0,
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: -1,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 6,
+		elevation: 16,
+	},
+	lineSeparated: {
+		borderTopWidth: 1,
+		borderColor: LINEGREY,
+		shadowOpacity: 0,
+		elevation: 0,
+	},
 };
 
 export { StickyFooter };

package/src/components/Text.js

@@ -0,0 +1,62 @@
+import React, { PureComponent } from "react";
+import { StyleSheet, Text as TextNative } from "react-native";
+import { TEXT_DARKEST, COLOUR_RED } from "../colours";
+
+/**
+ * A wrapper around the react-native Text component that applies a
+ * maximum font size multiplier (1.2) to prevent layout breaking.
+ *
+ * * @typedef {Object} TextProps
+ * @property {'pageHeading' | 'heading' | 'label' | 'detailLabel' | 'input' | 'error'} [type] - The style preset to apply.
+ * * @example
+ * <Text type="pageHeading" className="myClass">Welcome</Text>
+ */
+
+class Text extends PureComponent {
+	render() {
+		return (
+			<TextNative
+				{...this.props}
+				style={[styles[this.props.type], this.props.style]}
+				maxFontSizeMultiplier={this.props.maxFontSizeMultiplier || 1.2}
+			>
+				{this.props.children}
+			</TextNative>
+		);
+	}
+}
+
+const styles = StyleSheet.create({
+	pageHeading: {
+		fontFamily: "sf-bold",
+		fontSize: 24,
+		color: TEXT_DARKEST,
+	},
+	body: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: TEXT_DARKEST,
+	},
+	label: {
+		fontFamily: "sf-semibold",
+		color: TEXT_DARKEST,
+		fontSize: 16,
+	},
+	detailLabel: {
+		fontFamily: "sf-bold",
+		color: TEXT_DARKEST,
+		fontSize: 16,
+	},
+	input: {
+		color: TEXT_DARKEST,
+		fontFamily: "sf-regular",
+		fontSize: 16,
+	},
+	error: {
+		fontFamily: "sf-bold",
+		color: COLOUR_RED,
+		fontSize: 16,
+	},
+});
+
+export { Text };