chat 1.0.8 → 4.0.0

package/src/classes/Room/index.ts

@@ -1,323 +0,0 @@
-import {
-	NewRoomModel,
-	RoomModel,
-	EditRoomModel,
-	NewRoomMember,
-	currentUserExists,
-	roomIsEditModel,
-	ExistingRoomModel,
-	RoomMembers,
-	CreateRoomModel,
-	RoomPropertiesModel,
-	roomIsNewModel,
-	roomIsCreateCallable
-} from './types'
-import { fuego, chat } from '../../components/ChatProvider'
-import { getInitials } from '../../helpers/getInitials'
-import { firestore } from 'firebase'
-import uuid from 'uuid'
-
-export default class {
-	private room: RoomModel
-	constructor(room: RoomModel) {
-		this.room = room
-	}
-	get path() {
-		return `${chat.roomsCollection}/${(this.room as RoomPropertiesModel).id}`
-	}
-	get messagesPath() {
-		return `${this.path}/${chat.messagesCollection}`
-	}
-	getUnreadCount(): number {
-		const { uid } = fuego.firebase.auth().currentUser as firebase.User
-		try {
-			const member = (this.room as ExistingRoomModel | NewRoomModel).members[
-				uid
-			]
-
-			return (member && member.unreadCount && member.unreadCount.count) || 0
-		} catch (e) {
-			console.error(
-				`Room getUnreadCount error. Are you sure you initialized the room with the proper members schema?`
-			)
-			return 0
-		}
-	}
-	/**
-	 * Views message function for a room.
-	 *
-	 * To use this in a react component out-of-the-box, I recommend using the [[useViewMessage]] hook. It will handle all this for you.
-	 *
-	 * @param messageId ID of the message you're viewing
-	 * @param messageCreatedAt Timestamp of the message which you're viewing, found in message.createdAt
-	 *
-	 * @remarks
-	 * If you aren't using the useViewMessage hook:
-	 * This function should be used with care. You don't want to send 500 writes if someone views 500 messages.
-	 * You only want to send a read for the most recent message being viewed, assuming it's someone else's message.
-	 * Also, you should be memoizing the last message you sent that you viewed to avoid repeats. Again, this is all handled by useViewMessages.
-	 *
-	 * @returns Promise that only resolves while you're online.
-	 */
-	async viewMessage(messageId: string, messageCreatedAt: Date) {
-		try {
-			const ref = fuego.db.doc(this.path)
-			const { uid } = fuego.auth().currentUser as firebase.User
-
-			return ref.update({
-				[`members.${uid}.unreadCount.count`]: 0,
-				[`members.${uid}.unreadCount.lastCleared`]: fuego.firebase.firestore.FieldValue.serverTimestamp(),
-				[`members.${uid}.unreadCount.lastSeen`]: {
-					id: messageId,
-					createdAt: messageCreatedAt
-				}
-			})
-		} catch (e) {
-			console.error('Room class: viewMessage() error:', e)
-		}
-	}
-	getArrayOfMembersOtherThanMe() {
-		const { members } = this.room as ExistingRoomModel
-		const { uid } = fuego.auth().currentUser as firebase.User
-		return Object.keys(members)
-			.filter(id => id !== uid)
-			.map(id => members[id])
-	}
-	getName(): string {
-		const { members, name } = this.room as ExistingRoomModel
-		if (name) return name
-
-		const { uid } = fuego.auth().currentUser as firebase.User
-
-		const otherPeopleInRoom = Object.keys(members).filter(
-			(id: string) => id !== uid
-		)
-		const namesOfOtherPeopleInRoom = otherPeopleInRoom.map(
-			id =>
-				(members[id] &&
-					members[id].name &&
-					members[id].name.split(' ') &&
-					members[id].name.split(' ')[0]) ||
-				''
-		)
-		if (!namesOfOtherPeopleInRoom.length) {
-			console.error('no other members in room', this.room)
-			return ''
-		}
-		if (namesOfOtherPeopleInRoom.length === 1)
-			return members[otherPeopleInRoom[0]].name
-		if (namesOfOtherPeopleInRoom.length === 2)
-			return namesOfOtherPeopleInRoom.join(' & ')
-
-		const commaNames = namesOfOtherPeopleInRoom
-			.slice(0, namesOfOtherPeopleInRoom.length - 1)
-			.join(', ')
-		const finalName =
-			namesOfOtherPeopleInRoom[namesOfOtherPeopleInRoom.length - 1]
-
-		return `${commaNames} & ${finalName}`
-	}
-	getInitials(maxNumberOfInitials = 2): string {
-		const { name } = this.room
-		if (name) return getInitials(name)
-
-		const members = this.getArrayOfMembersOtherThanMe()
-
-		if (!members.length) {
-			console.error(
-				'get room initials error: no other members in this room',
-				this.room
-			)
-			return ''
-		}
-
-		if (members.length === 1) {
-			return getInitials(members[0].name, maxNumberOfInitials)
-		}
-
-		return (
-			members
-				// first letter of each person's name
-				.map(member => (member.name && member.name.slice(0, 1)) || '')
-				.join('')
-				// up to two initials
-				.slice(0, maxNumberOfInitials)
-		)
-	}
-	/**
-	 * @returns
-	 * A promise.all array of responses. The first array is for adding a system message; the second is for updating the room object.
-	 */
-	async leave() {
-		try {
-			if (!currentUserExists(fuego.auth().currentUser)) {
-				throw new Error(
-					"🚨 Fuego auth error: Tried to leave a room, but there is no valid firebase auth object for this user. \n In order to join a room, the user must exist. If you're just testing around and don't want to have valid users, try await firebase.auth().signInAnonymously()."
-				)
-			}
-			const { uid } = fuego.auth().currentUser as firebase.User
-			// is this even necessary? maybe if people want the option to join or not...
-			return fuego.db.doc(this.path).update({
-				currentMembers: fuego.firebase.firestore.FieldValue.arrayRemove(uid),
-				[`members.${uid}`]: fuego.firebase.firestore.FieldValue.delete()
-			})
-		} catch (e) {
-			console.error(e)
-			return null
-		}
-	}
-	join() {
-		try {
-			if (!currentUserExists(fuego.auth().currentUser)) {
-				throw new Error(
-					"🚨 Fuego auth error: Tried to join a room, but there is no valid firebase auth object for this user. \n In order to join a room, the user must exist. If you're just testing around and don't want to have valid users, try await firebase.auth().signInAnonymously()."
-				)
-			}
-			const { uid, displayName } = fuego.auth().currentUser as firebase.User
-			const newMember: NewRoomMember = {
-				name: displayName || 'Fredrick Failuretest',
-				exists: true,
-				joinedAt: fuego.firebase.firestore.FieldValue.serverTimestamp()
-			}
-			// is this even necessary?
-			// maybe if people want the option to choose whether they join a room or not...
-			return fuego.db.doc(this.path).update({
-				[`members.${uid}`]: newMember,
-				currentMembers: fuego.firebase.firestore.FieldValue.arrayUnion(uid)
-			})
-		} catch (e) {
-			console.error(e)
-			return null
-		}
-	}
-	addMembers(members: RoomMembers) {
-		const batch = fuego.db.batch()
-		const ref = fuego.db.doc(this.path)
-		Object.keys(members).forEach((uid: string) =>
-			batch.update(ref, {
-				[`members.${uid}`]: members[uid]
-			})
-		)
-
-		batch.update(ref, {
-			currentMembers: firestore.FieldValue.arrayUnion(...Object.keys(members))
-		})
-
-		return batch.commit()
-	}
-	removeMembers(members: RoomMembers) {
-		const batch = fuego.db.batch()
-		const ref = fuego.db.doc(this.path)
-
-		Object.keys(members).forEach((uid: string) =>
-			batch.update(ref, {
-				[`members.${uid}.exists`]: false
-			})
-		)
-
-		batch.update(ref, {
-			currentMembers: firestore.FieldValue.arrayRemove(...Object.keys(members))
-		})
-
-		return batch.commit()
-	}
-	async create() {
-		try {
-			if (roomIsNewModel(this.room)) return this.addToFirebase()
-			throw new Error(
-				'Tried to create room without the proper schema. See NewRoomModel typescript type.'
-			)
-		} catch (e) {
-			console.error(e)
-			return null
-		}
-	}
-	async createViaCallable(): Promise<firebase.functions.HttpsCallableResult> {
-		try {
-			if (roomIsCreateCallable(this.room)) {
-				const create = fuego.firebase
-					.functions()
-					.httpsCallable(chat.httpCallables.createRoom)
-				return create({
-					recipients: this.room.recipients,
-					name: this.room.name || '',
-					avatar: this.room.avatar || ''
-				})
-			}
-			throw new Error(
-				'Error: improper room model for Room.createCallable(). The error comes from config for new Room(config). Make sure schema for config is correct'
-			)
-		} catch (e) {
-			console.error(e)
-			return {
-				data: null
-			}
-		}
-	}
-	edit() {
-		try {
-			// typeguard
-			if (roomIsEditModel(this.room)) return this.updateOnFirebase()
-			throw new Error(
-				'Tried to edit room without the proper schema. See EditRoomModel typescript type.'
-			)
-		} catch (e) {
-			console.error(e)
-			return null
-		}
-	}
-	getUsersTyping() {
-		return this.getArrayOfMembersOtherThanMe().filter(
-			member => member.typing && member.typing.state === 'typing'
-		)
-
-		// return Object.keys((this.room as ExistingRoomModel).members || {})
-		// 	.filter(
-		// 		(uid: string) =>
-		// 			this.room &&
-		// 			this.room.members &&
-		// 			this.room.members[uid] &&
-		// 			this.room.members[uid].typing
-		// 	)
-		// 	.map(
-		// 		(uid: string) =>
-		// 			(this.room as ExistingRoomModel) &&
-		// 			this.room.members &&
-		// 			this.room.members[uid]
-		// 	)
-	}
-	updateOnFirebase() {
-		const { id, ...room } = this.room as EditRoomModel
-		return fuego.db.doc(this.path).update(room)
-	}
-	addToFirebase() {
-		const { uid, displayName, photoURL } = fuego.auth()
-			.currentUser as firebase.User
-		const date = fuego.firebase.firestore.FieldValue.serverTimestamp()
-		const me: NewRoomMember = {
-			name: displayName || 'Inexistent Poopnugget',
-			exists: true,
-			avatar: photoURL || '',
-			joinedAt: date
-		}
-		const members: RoomMembers = {
-			...(this.room as NewRoomModel).members,
-			[uid]: me
-		}
-		const room: CreateRoomModel = {
-			members,
-			currentMembers: [...Object.keys(members)].sort(),
-			createdAt: date,
-			lastEdited: date,
-			lastMessage: {
-				system: true,
-				text: `${me.name} started a chat`,
-				createdAt: date,
-				id: uuid.v4(),
-				name: me.name
-			}
-		}
-		const ref = fuego.db.collection(chat.roomsCollection).doc()
-		return ref.set(room)
-	}
-}

package/src/classes/Room/types.ts

@@ -1,161 +0,0 @@
-import { FieldValue, Timestamp } from '@firebase/firestore-types'
-import * as firebase from 'firebase'
-
-export interface LastMessage {
-	createdAt: Date
-	text: string
-	name: string
-	system: boolean
-	id: string
-}
-
-export interface LastMessageServer extends Omit<LastMessage, 'createdAt'> {
-	createdAt: FieldValue
-}
-
-/**
- * Unread count schema in the members dictionary for each room
- */
-export interface UnreadCount {
-	count: number
-	/**
-	 * The timestamp of the last time you cleared messages.
-	 */
-	lastCleared: Date
-	/**
-	 * Details of the last message you saw.
-	 */
-	lastSeen: {
-		id: string
-		createdAt: Date
-	}
-}
-
-export interface UnreadCountDocument extends Omit<UnreadCount, 'lastCleared'> {
-	lastCleared: firebase.firestore.Timestamp
-}
-
-export interface UnreadCountServer extends Omit<UnreadCount, 'lastCleared'> {
-	lastCleared: firebase.firestore.FieldValue
-}
-
-export interface RoomPropertiesModel {
-	id: string
-	// avatar url for this room
-	avatar?: string
-	members?: RoomMembers
-	name?: string
-}
-
-export interface Typing {
-	state: 'typing' | 'nothing'
-	lastChanged: typeof firebase.database.ServerValue.TIMESTAMP
-}
-
-export interface RoomMember {
-	// typing?: boolean
-	typing?: Typing
-	exists: boolean
-	// we should probably do this one via cloud function
-	name: string
-	nickname?: string
-	avatar?: string
-	joinedAt: FieldValue
-	unreadCount?: UnreadCount
-}
-
-export interface ExistingRoomMember {
-	// optional nickname specific to this room
-	nickname?: string
-	// url to specific image for this room
-	avatar?: string
-}
-
-export interface NewRoomMember extends RoomMember {}
-
-/**
- * Dictionary of members in the room.
- */
-export interface RoomMembers {
-	[id: string]: RoomMember
-}
-
-/**
- * Configuration for the room class. Members doesn't need to include me.
- *
- * @example
- * ```
- * const room = new Room(config: NewRoomModel)
- * await room.create()
- * ```
- */
-export interface NewRoomModel extends Omit<RoomPropertiesModel, 'id'> {
-	members: RoomMembers
-}
-
-export interface CreateCallableRoomModel extends Partial<RoomPropertiesModel> {
-	recipients: string[]
-}
-
-export interface EditRoomModel extends Omit<RoomPropertiesModel, 'members'> {
-	members?: RoomMembers
-	name?: string
-	lastMessage?: LastMessage
-}
-
-export interface ExistingRoomModel extends RoomPropertiesModel {
-	lastMessage: LastMessage
-	members: RoomMembers
-	unreadCount?: number
-	createdAt: FieldValue
-	lastEdited: FieldValue
-	currentMembers: string[]
-}
-
-export interface CreateRoomModel
-	extends Omit<Omit<ExistingRoomModel, 'id'>, 'lastMessage'> {
-	lastMessage: LastMessageServer
-}
-
-export interface CreateRoomCallableModel
-	extends Omit<RoomPropertiesModel, 'id'> {
-	members: RoomMembers
-}
-
-interface LastMessageDocument extends Omit<LastMessage, 'createdAt'> {
-	createdAt: Timestamp
-}
-
-export interface ExistingRoomDocument
-	extends Omit<ExistingRoomModel, 'lastMessage'> {
-	lastMessage: LastMessageDocument
-}
-
-export type RoomModel =
-	| RoomPropertiesModel
-	| NewRoomModel
-	| ExistingRoomModel
-	| CreateCallableRoomModel
-
-// typescript type guard functions
-// see: https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
-
-export function currentUserExists(
-	user: firebase.User | null
-): user is firebase.User {
-	return !!(user as firebase.User)
-}
-
-export function roomIsEditModel(room: RoomModel): room is EditRoomModel {
-	return !!(room as EditRoomModel)
-}
-
-export function roomIsNewModel(room: RoomModel): room is NewRoomModel {
-	return !!(room as NewRoomModel)
-}
-
-export function roomIsCreateCallable(
-	room: RoomModel
-): room is CreateCallableRoomModel {
-	return !!(room as CreateCallableRoomModel)
-}

package/src/classes/index.ts

@@ -1,4 +0,0 @@
-export { default as Reaction } from './Reaction'
-export { default as Message } from './Message'
-export { default as Room } from './Room'
-export { default as Chat } from './Chat'

package/src/components/Avatar/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-import { Image, StyleSheet, View } from 'react-native'
-import { AvatarProps } from '../Inbox/types'
-
-export default React.memo(function(props: AvatarProps) {
-	const size = props.size
-	const borderRadius = size / 2
-	const Img = props.ImageComponent || Image
-	return (
-		<View style={[styles.container, { borderRadius }]}>
-			<Img
-				style={[{ height: size, width: size }]}
-				resizeMode="cover"
-				{...(props.imageProps || {})}
-				source={{ uri: props.avatar }}
-			/>
-		</View>
-	)
-})
-
-const styles = StyleSheet.create({
-	container: {
-		overflow: 'hidden'
-	}
-})

package/src/components/Chat/Bubble/index.tsx

@@ -1,139 +0,0 @@
-import React, { useMemo, FunctionComponent, useCallback } from 'react'
-import { BubbleProps } from '../types'
-import { View, Text, StyleSheet } from 'react-native'
-import { LinearGradient } from 'expo-linear-gradient'
-import { MessageMedia } from '../../../classes/Message/types'
-import Media from '../Media'
-
-const isValidColor = (color: string) =>
-	/(#(?:[0-9a-f]{ 2 }){ 2,4 }|(#[0-9a-f]{3})|(rgb|hsl)a?\((-?\d+%?[,\s]+){2,3}\s*[d\.]+%?\)|\b(transparent|black|silver|gray|whitesmoke|maroon|red|purple|fuchsia|green|lime|olivedrab|yellow|navy|blue|teal|aquamarine|orange|aliceblue|antiquewhite|aqua|azure|beige|bisque|blanchedalmond|blueviolet|brown|burlywood|cadetblue|chartreuse|chocolate|coral|cornflowerblue|cornsilk|crimson|darkblue|darkcyan|darkgoldenrod|darkgray|darkgreen|darkgrey|darkkhaki|darkmagenta|darkolivegreen|darkorange|darkorchid|darkred|darksalmon|darkseagreen|darkslateblue|darkslategray|darkslategrey|darkturquoise|darkviolet|deeppink|deepskyblue|dimgray|dimgrey|dodgerblue|firebrick|floralwhite|forestgreen|gainsboro|ghostwhite|goldenrod|gold|greenyellow|grey|honeydew|hotpink|indianred|indigo|ivory|khaki|lavenderblush|lavender|lawngreen|lemonchiffon|lightblue|lightcoral|lightcyan|lightgoldenrodyellow|lightgray|lightgreen|lightgrey|lightpink|lightsalmon|lightseagreen|lightskyblue|lightslategray|lightslategrey|lightsteelblue|lightyellow|limegreen|linen|mediumaquamarine|mediumblue|mediumorchid|mediumpurple|mediumseagreen|mediumslateblue|mediumspringgreen|mediumturquoise|mediumvioletred|midnightblue|mintcream|mistyrose|moccasin|navajowhite|oldlace|olive|orangered|orchid|palegoldenrod|palegreen|paleturquoise|palevioletred|papayawhip|peachpuff|peru|pink|plum|powderblue|rosybrown|royalblue|saddlebrown|salmon|sandybrown|seagreen|seashell|sienna|skyblue|slateblue|slategray|slategrey|snow|springgreen|steelblue|tan|thistle|tomato|turquoise|violet|wheat|white|yellowgreen|rebeccapurple)\b)/i.test(
-		color
-	)
-
-const Bubble: FunctionComponent<BubbleProps> = props => {
-	const containerStyles = useMemo(() => {
-		return [
-			styles.container,
-			props.isMe ? meStyles.container : otherStyles.container,
-			props.style
-		]
-	}, [props.style, props.isMe])
-
-	const textStyles = useMemo(() => {
-		const color = (props.textColor && { color: props.textColor }) || {}
-		return [
-			styles.text,
-			props.isMe ? meStyles.text : otherStyles.text,
-			color,
-			props.textStyle
-		]
-	}, [props.textStyle, props.isMe, props.textColor])
-
-	const backgroundColor = useMemo(() => {
-		let color: string[] = []
-		if (Array.isArray(props.backgroundColor)) {
-			color = props.backgroundColor
-		}
-		if (typeof props.backgroundColor === 'string') {
-			color = [props.backgroundColor, props.backgroundColor]
-		}
-		const invalidColors = [
-			...Array.from(new Set(color.filter(color => !isValidColor(color))))
-		]
-		if (invalidColors.length) {
-			console.warn(
-				`🍏 Juice warning: The background color value you gave to the Bubble component doesn't seem to be valid. Each color should be a HEX color or CSS color string, matching this format: #abc123, but instead, it got these: ${invalidColors}, which don't match the format. If you gave a valid CSS color and it works, you can ignore this.`
-			)
-		}
-		return (
-			color || (props.isMe ? ['#7B16FF', '#7114EA'] : ['#f1f7f8', '#f8f8f8'])
-		)
-	}, [props.backgroundColor, props.isMe])
-
-	const { renderMedia: propsRenderMedia } = props
-	const renderMedia = useCallback(() => {
-		if (propsRenderMedia === null) return null
-
-		if (!props.mediaContentType) return null
-
-		const media: MessageMedia = {
-			url: props.mediaUrl || '',
-			uri: props.mediaUri,
-			height: props.mediaHeight || 0,
-			width: props.mediaWidth || 0,
-			contentType: props.mediaContentType
-		}
-		if (propsRenderMedia) return propsRenderMedia({ media })
-
-		return <Media {...media} />
-	}, [
-		props.mediaUrl,
-		props.mediaUri,
-		props.mediaHeight,
-		props.mediaWidth,
-		props.mediaContentType,
-		propsRenderMedia
-	])
-
-	const { text, renderText: propsRenderText } = props
-	const renderText = useCallback(() => {
-		if (text) {
-			if (propsRenderText) return propsRenderText({ style: textStyles, text })
-			return <Text style={textStyles}>{text}</Text>
-		}
-		return null
-	}, [textStyles, text, propsRenderText])
-
-	return (
-		<View style={containerStyles} ref={props.bubbleRef}>
-			<LinearGradient
-				colors={backgroundColor}
-				start={[0.1, 0.1]}
-				end={[0.9, 0.9]}
-				style={styles.gradient}
-			>
-				{renderMedia()}
-				{renderText()}
-			</LinearGradient>
-		</View>
-	)
-}
-
-export default React.memo(Bubble)
-
-const styles = StyleSheet.create({
-	container: {
-		maxWidth: '80%',
-		borderRadius: 20,
-		overflow: 'hidden'
-	},
-	text: {
-		textAlign: 'left',
-		fontSize: 16,
-		paddingHorizontal: 12,
-		paddingVertical: 10
-	},
-	gradient: {
-		flex: 1
-	}
-})
-
-const meStyles = StyleSheet.create({
-	container: {
-		// backgroundColor: 'rgb(123, 22, 255)',
-		marginLeft: 5
-	},
-	text: {
-		color: 'white'
-	}
-})
-
-const otherStyles = StyleSheet.create({
-	container: {
-		// backgroundColor: 'lightgray',
-		marginRight: 5
-	},
-	text: {
-		color: 'black'
-	}
-})

package/src/components/Chat/Composer/Input/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { TextInput, StyleSheet, View } from 'react-native'
-import { InputProps } from '../../types'
-
-const Input = (props: InputProps) => {
-	return (
-		<View style={[styles.container, props.containerStyle]}>
-			<TextInput
-				{...props.inputProps}
-				placeholder={props.placeholderText || 'Type a new message...'}
-				placeholderTextColor={props.placeholderColor || 'lightgray'}
-				selectionColor={props.tintColor || 'blue'}
-				onChangeText={props.onChangeText}
-				value={props.text}
-				style={[styles.input, props.style]}
-				multiline
-				ref={props.inputRef}
-				returnKeyLabel={props.sendOnKeyboardReturn ? 'Send' : undefined}
-				returnKeyType={props.sendOnKeyboardReturn ? 'send' : undefined}
-				onSubmitEditing={props.onSubmitEditing}
-			/>
-		</View>
-	)
-}
-
-Input.displayName = 'Juice.Input'
-
-export default React.memo(Input)
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: 'row',
-		marginHorizontal: 10,
-		borderRadius: 20,
-		borderWidth: 1,
-		borderColor: 'lightgray'
-	},
-	input: {
-		flex: 1,
-		padding: 10,
-		paddingTop: 10,
-		fontSize: 16
-	}
-})