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

package/src/components/ProfilePic.js

@@ -1,128 +1,137 @@
-import React, { Component } from 'react';
-import { View, ImageBackground } from 'react-native';
-import { connect } from 'react-redux';
-import Config from '../config';
-import { Spinner } from './Spinner';
-import { LINEGREY, getMainBrandingColourFromState } from '../colours';
+import React, { Component } from "react";
+import { View, ImageBackground } from "react-native";
+import { connect } from "react-redux";
+import Config from "../config";
+import { Spinner } from "./Spinner";
+import { LINEGREY, getMainBrandingColourFromState } from "../colours";
 
 class ProfilePic extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      image: null,
-      imageBorderRadius: 18,
-      imageUploading: false,
-      backgroundFill: false,
-    };
-  }
+	constructor(props) {
+		super(props);
+		this.state = {
+			image: null,
+			imageBorderRadius: 18,
+			imageUploading: false,
+			backgroundFill: false,
+		};
+	}
 
-  UNSAFE_componentWillMount() {
-    this.setState({
-      image: this.props.ProfilePic != null ? this.props.ProfilePic : Config.env.defaultProfileImage,
-      imageDiameterStyle: {
-        height: this.props.Diameter != null ? this.props.Diameter : 35,
-        width: this.props.Diameter != null ? this.props.Diameter : 35,
-      },
-      imageBorderRadius: this.props.Diameter != null ? this.props.Diameter / 2 : 18,
-      imageUploading: this.props.ImageUploading,
-      backgroundFill: this.props.ProfilePic === Config.env.tinyChatDefault,
-    });
-  }
+	UNSAFE_componentWillMount() {
+		this.setState({
+			image:
+				this.props.ProfilePic != null
+					? this.props.ProfilePic
+					: Config.env.defaultProfileImage,
+			imageDiameterStyle: {
+				height: this.props.Diameter != null ? this.props.Diameter : 35,
+				width: this.props.Diameter != null ? this.props.Diameter : 35,
+			},
+			imageBorderRadius:
+				this.props.Diameter != null ? this.props.Diameter / 2 : 18,
+			imageUploading: this.props.ImageUploading,
+			backgroundFill: this.props.ProfilePic === Config.env.tinyChatDefault,
+		});
+	}
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    let profPic = null;
-    if (nextProps.ProfilePic) {
-      profPic = nextProps.ProfilePic;
-    }
+	UNSAFE_componentWillReceiveProps(nextProps) {
+		let profPic = null;
+		if (nextProps.ProfilePic) {
+			profPic = nextProps.ProfilePic;
+		}
 
-    this.setState({
-      image: profPic,
-      imageUploading: nextProps.ImageUploading,
-    });
-  }
+		this.setState({
+			image: profPic,
+			imageUploading: nextProps.ImageUploading,
+		});
+	}
 
-  renderImage() {
-    if (this.state.imageUploading) {
-      return (
-        <Spinner
-          style={{
-            backgroundColor: 'white',
-            borderRadius: this.state.imageBorderRadius,
-          }}
-        />
-      );
-    }
-    let image = Config.env.defaultProfileImage;
-    let isDefault = true;
-    if (this.state.image !== null && typeof this.state.image === 'string') {
-      if (
-        this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' &&
-        this.state.image !== 'https://plusscdn.azureedge.net/uploads/23046-1/636675694526742825882defaultavatar.jpg' &&
-        this.state.image !== 'https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg' &&
-        this.state.image !==
-          'https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:e2dc6a8b-61e8-4a76-a7ea-b1a15a013b94/public/2b3df48c4394a03840e52db886/profilepic.jpg'
-      ) {
-        image = { uri: this.state.image };
-        isDefault = false;
-      }
-    }
-    return (
-      <ImageBackground
-        key="default"
-        source={image}
-        style={[
-          styles.profilePicImage,
-          { borderRadius: this.state.imageBorderRadius },
-          (isDefault || this.state.backgroundFill) && { backgroundColor: this.props.colourBrandingMain },
-        ]}
-        imageStyle={{ borderRadius: this.state.imageBorderRadius }}
-      >
-        {this.props.children}
-      </ImageBackground>
-    );
-  }
+	renderImage() {
+		if (this.state.imageUploading) {
+			return (
+				<Spinner
+					style={{
+						backgroundColor: "white",
+						borderRadius: this.state.imageBorderRadius,
+					}}
+				/>
+			);
+		}
+		let image = Config.env.defaultProfileImage;
+		let isDefault = true;
+		if (this.state.image !== null && typeof this.state.image === "string") {
+			if (
+				this.state.image !==
+					"https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg" &&
+				this.state.image !==
+					"https://plusscdn.azureedge.net/uploads/23046-1/636675694526742825882defaultavatar.jpg" &&
+				this.state.image !==
+					"https://plusscdn.azureedge.net/uploads/687-1/63663744750845828739defaultavatar.jpg" &&
+				this.state.image !==
+					"https://pluss60-dev-uploads.s3.ap-southeast-2.amazonaws.com/uploads/users/ap-southeast-2:e2dc6a8b-61e8-4a76-a7ea-b1a15a013b94/public/2b3df48c4394a03840e52db886/profilepic.jpg"
+			) {
+				image = { uri: this.state.image };
+				isDefault = false;
+			}
+		}
+		return (
+			<ImageBackground
+				key="default"
+				source={image}
+				style={[
+					styles.profilePicImage,
+					{ borderRadius: this.state.imageBorderRadius },
+					(isDefault || this.state.backgroundFill) && {
+						backgroundColor: this.props.colourBrandingMain,
+					},
+				]}
+				imageStyle={{ borderRadius: this.state.imageBorderRadius }}
+			>
+				{this.props.children}
+			</ImageBackground>
+		);
+	}
 
-  render() {
-    return (
-      <View
-        style={[
-          styles.profilePicOuter,
-          this.state.imageDiameterStyle,
-          this.props.bordered && styles.bordered,
-          { borderRadius: this.state.imageBorderRadius },
-          this.props.style,
-        ]}
-        key={this.props.id}
-      >
-        {this.renderImage()}
-      </View>
-    );
-  }
+	render() {
+		return (
+			<View
+				style={[
+					styles.profilePicOuter,
+					this.state.imageDiameterStyle,
+					this.props.bordered && styles.bordered,
+					{ borderRadius: this.state.imageBorderRadius },
+					this.props.style,
+				]}
+				key={this.props.id}
+			>
+				{this.renderImage()}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  profilePicOuter: {
-    height: 35,
-    width: 35,
-    zIndex: 1,
-    backgroundColor: LINEGREY,
-    //  overflow: 'hidden'
-  },
-  profilePicImage: {
-    flex: 1,
-    height: null,
-    width: null,
-  },
-  bordered: {
-    borderWidth: 1,
-    borderColor: '#fff',
-  },
+	profilePicOuter: {
+		height: 35,
+		width: 35,
+		zIndex: 1,
+		backgroundColor: LINEGREY,
+		//  overflow: 'hidden'
+	},
+	profilePicImage: {
+		flex: 1,
+		height: null,
+		width: null,
+	},
+	bordered: {
+		borderWidth: 1,
+		borderColor: "#fff",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const profilePic = connect(mapStateToProps, {})(ProfilePic);

package/src/components/RadioButton.js

@@ -1,65 +1,89 @@
-import React, { PureComponent } from 'react';
-import { View, TouchableOpacity, TouchableWithoutFeedback, StyleSheet, Text } from 'react-native';
-import { connect } from 'react-redux';
-import { getMainBrandingColourFromState, LINEGREY, TEXT_DARKEST } from '../colours';
+import React, { PureComponent } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	View,
+	TouchableOpacity,
+	TouchableWithoutFeedback,
+	StyleSheet,
+} from "react-native";
+import { connect } from "react-redux";
+import {
+	getMainBrandingColourFromState,
+	LINEGREY,
+	TEXT_DARKEST,
+} from "../colours";
 
 class RadioButton extends PureComponent {
-  render() {
-    const { size, isActive, value, onPress, colourBrandingMain, style, label } = this.props;
-    const iconSize = size || 20;
-    const innerSize = iconSize - 8;
+	render() {
+		const { size, isActive, value, onPress, colourBrandingMain, style, label } =
+			this.props;
+		const iconSize = size || 20;
+		const innerSize = iconSize - 8;
 
-    const content = (
-      <TouchableWithoutFeedback onPress={() => onPress(value)}>
-        <View style={[styles.container, { width: iconSize, height: iconSize, borderRadius: iconSize / 2 }, style]}>
-          {isActive && (
-            <View style={{ width: innerSize, height: innerSize, borderRadius: innerSize / 2, backgroundColor: colourBrandingMain }} />
-          )}
-        </View>
-      </TouchableWithoutFeedback>
-    );
+		const content = (
+			<TouchableWithoutFeedback onPress={() => onPress(value)}>
+				<View
+					style={[
+						styles.container,
+						{ width: iconSize, height: iconSize, borderRadius: iconSize / 2 },
+						style,
+					]}
+				>
+					{isActive && (
+						<View
+							style={{
+								width: innerSize,
+								height: innerSize,
+								borderRadius: innerSize / 2,
+								backgroundColor: colourBrandingMain,
+							}}
+						/>
+					)}
+				</View>
+			</TouchableWithoutFeedback>
+		);
 
-    if (label) {
-      return (
-        <TouchableOpacity
-          onPress={() => onPress(value)}
-          key={label}
-          style={styles.radioOption}
-          hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
-        >
-          {content}
-          <Text style={styles.radioOptionText}>{label}</Text>
-        </TouchableOpacity>
-      );
-    }
+		if (label) {
+			return (
+				<TouchableOpacity
+					onPress={() => onPress(value)}
+					key={label}
+					style={styles.radioOption}
+					hitSlop={{ top: 8, left: 8, bottom: 8, right: 8 }}
+				>
+					{content}
+					<Text style={styles.radioOptionText}>{label}</Text>
+				</TouchableOpacity>
+			);
+		}
 
-    return content;
-  }
+		return content;
+	}
 }
 
 const styles = StyleSheet.create({
-  container: {
-    borderColor: LINEGREY,
-    borderWidth: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radioOption: {
-    flexDirection: 'row',
-    marginRight: 26,
-  },
-  radioOptionText: {
-    fontFamily: 'sf-medium',
-    fontSize: 14,
-    color: TEXT_DARKEST,
-  },
+	container: {
+		borderColor: LINEGREY,
+		borderWidth: 1,
+		backgroundColor: "#fff",
+		alignItems: "center",
+		justifyContent: "center",
+	},
+	radioOption: {
+		flexDirection: "row",
+		marginRight: 26,
+	},
+	radioOptionText: {
+		fontFamily: "sf-medium",
+		fontSize: 14,
+		color: TEXT_DARKEST,
+	},
 });
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+	};
 };
 
 const radioButton = connect(mapStateToProps, {})(RadioButton);

package/src/components/Reaction.js

@@ -1,110 +1,148 @@
-import React, { Component } from 'react';
-import { View, Text, Image, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
-import _ from 'lodash';
-import { getReactions, getShadowStyle } from '../helper';
-import { BG_GREY, TEXT_DARK, getMainBrandingColourFromState } from '../colours';
-import { reactionActions } from '../apis';
+import React, { Component } from "react";
+import { View, Image, TouchableOpacity } from "react-native";
+import { Text } from "./Text";
+import { connect } from "react-redux";
+import _ from "lodash";
+import { getReactions, getShadowStyle } from "../helper";
+import { BG_GREY, TEXT_DARK, getMainBrandingColourFromState } from "../colours";
+import { reactionActions } from "../apis";
 
 class Reaction extends Component {
-  onPressReaction = () => {
-    if (!this.props.reactions[this.props.userId]) {
-      reactionActions.add(this.props.entityId, this.props.entityType, this.props.reaction.key, this.props.site);
-      this.props.onLike();
-    } else {
-      reactionActions.remove(this.props.entityId, this.props.entityType, this.props.reaction.key);
-      this.props.onUnlike();
-    }
-  };
+	onPressReaction = () => {
+		if (!this.props.reactions[this.props.userId]) {
+			reactionActions.add(
+				this.props.entityId,
+				this.props.entityType,
+				this.props.reaction.key,
+				this.props.site,
+			);
+			this.props.onLike();
+		} else {
+			reactionActions.remove(
+				this.props.entityId,
+				this.props.entityType,
+				this.props.reaction.key,
+			);
+			this.props.onUnlike();
+		}
+	};
 
-  getStyleType() {
-    if (this.props.reactions[this.props.userId]) {
-      return 'ThisHL';
-    }
-    if (this.props.anyHighlighted) {
-      return 'OtherHL';
-    }
-    return 'Default';
-  }
+	getStyleType() {
+		if (this.props.reactions[this.props.userId]) {
+			return "ThisHL";
+		}
+		if (this.props.anyHighlighted) {
+			return "OtherHL";
+		}
+		return "Default";
+	}
 
-  getTopReaction() {
-    return _.maxBy(Object.keys(this.props.reactions), key => {
-      return Object.keys(this.props.reactions[key]).length;
-    });
-  }
+	getTopReaction() {
+		return _.maxBy(Object.keys(this.props.reactions), (key) => {
+			return Object.keys(this.props.reactions[key]).length;
+		});
+	}
 
-  getIcon(topReaction) {
-    return _.find(getReactions(), r => {
-      return r.key === topReaction;
-    }).icon;
-  }
+	getIcon(topReaction) {
+		return _.find(getReactions(), (r) => {
+			return r.key === topReaction;
+		}).icon;
+	}
 
-  render() {
-    if (this.props.topReactionOnly) {
-      const topReaction = this.getTopReaction();
-      if (!topReaction) {
-        return null;
-      }
-      return (
-        <View style={[styles.container, styles.containerThisHL, this.props.style]}>
-          <Image style={[styles.image, this.props.imageStyle]} source={this.getIcon(topReaction)} />
-          <Text style={[styles.count, this.props.countStyle]}>{Object.keys(this.props.reactions[topReaction]).length}</Text>
-        </View>
-      );
-    }
-    return (
-      <TouchableOpacity style={styles.touchable} onPress={this.onPressReaction} disabled={this.props.user.type === 'KIOSK'}>
-        <View style={[styles.container, styles[`container${this.getStyleType()}`], this.props.style]}>
-          <Image style={[styles.image, this.props.imageStyle]} source={this.props.reaction.icon} />
-          <Text style={[styles.count, this.getStyleType() === 'ThisHL' && { color: this.props.colourBrandingMain }, this.props.countStyle]}>
-            {Object.keys(this.props.reactions).length}
-          </Text>
-        </View>
-      </TouchableOpacity>
-    );
-  }
+	render() {
+		if (this.props.topReactionOnly) {
+			const topReaction = this.getTopReaction();
+			if (!topReaction) {
+				return null;
+			}
+			return (
+				<View
+					style={[styles.container, styles.containerThisHL, this.props.style]}
+				>
+					<Image
+						style={[styles.image, this.props.imageStyle]}
+						source={this.getIcon(topReaction)}
+					/>
+					<Text style={[styles.count, this.props.countStyle]}>
+						{Object.keys(this.props.reactions[topReaction]).length}
+					</Text>
+				</View>
+			);
+		}
+		return (
+			<TouchableOpacity
+				style={styles.touchable}
+				onPress={this.onPressReaction}
+				disabled={this.props.user.type === "KIOSK"}
+			>
+				<View
+					style={[
+						styles.container,
+						styles[`container${this.getStyleType()}`],
+						this.props.style,
+					]}
+				>
+					<Image
+						style={[styles.image, this.props.imageStyle]}
+						source={this.props.reaction.icon}
+					/>
+					<Text
+						style={[
+							styles.count,
+							this.getStyleType() === "ThisHL" && {
+								color: this.props.colourBrandingMain,
+							},
+							this.props.countStyle,
+						]}
+					>
+						{Object.keys(this.props.reactions).length}
+					</Text>
+				</View>
+			</TouchableOpacity>
+		);
+	}
 }
 
 const styles = {
-  touchable: {
-    marginHorizontal: 4,
-    width: 60,
-    height: 30,
-  },
-  container: {
-    width: 60,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: BG_GREY,
-    flexDirection: 'row-reverse',
-    alignItems: 'center',
-    paddingHorizontal: 8,
-  },
-  containerThisHL: {
-    ...getShadowStyle(),
-  },
-  containerOtherHL: {
-    opacity: 0.5,
-  },
-  image: {
-    width: 20,
-    height: 20,
-    resizeMode: 'contain',
-  },
-  count: {
-    fontFamily: 'sf-medium',
-    color: TEXT_DARK,
-    flex: 1,
-    textAlign: 'center',
-    fontSize: 16,
-  },
+	touchable: {
+		marginHorizontal: 4,
+		width: 60,
+		height: 30,
+	},
+	container: {
+		width: 60,
+		height: 30,
+		borderRadius: 15,
+		backgroundColor: BG_GREY,
+		flexDirection: "row-reverse",
+		alignItems: "center",
+		paddingHorizontal: 8,
+	},
+	containerThisHL: {
+		...getShadowStyle(),
+	},
+	containerOtherHL: {
+		opacity: 0.5,
+	},
+	image: {
+		width: 20,
+		height: 20,
+		resizeMode: "contain",
+	},
+	count: {
+		fontFamily: "sf-medium",
+		color: TEXT_DARK,
+		flex: 1,
+		textAlign: "center",
+		fontSize: 16,
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-    user: state.user,
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		user: state.user,
+	};
 };
 
 const reaction = connect(mapStateToProps, {})(Reaction);