chat 1.0.8 → 3.0.0

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
-	}
-})

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

@@ -1,51 +0,0 @@
-import React, { useCallback } from 'react'
-import { Button, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Ionicons } from '@expo/vector-icons'
-import { SendButtonProps } from '../../types'
-
-const Send = (props: SendButtonProps) => {
-	if (props.mode === 'hidden') return null
-	const { containerStyle } = props
-	const Container = useCallback(
-		({ children }) => {
-			const style = {
-				...styles.container,
-				...(containerStyle || {}),
-			}
-			return <View style={style}>{children}</View>
-		},
-		[containerStyle],
-	)
-	if (props.mode === 'icon')
-		return (
-			<Container>
-				<TouchableOpacity onPress={props.onSend} style={[styles.button, { backgroundColor: props.tintColor || 'blue' }]}>
-					<Ionicons name="ios-arrow-round-up" size={size * 1.5} color={'white'} />
-				</TouchableOpacity>
-			</Container>
-		)
-	return (
-		<Container>
-			<Button title="Send" onPress={props.onSend} color={props.tintColor || 'blue'} />
-		</Container>
-	)
-}
-
-export default React.memo(Send)
-
-const size = 20
-
-const styles = StyleSheet.create({
-	container: {
-		paddingRight: 5,
-		paddingBottom: 5,
-	},
-	button: {
-		borderRadius: size,
-		height: size * 1.5,
-		width: size * 1.5,
-		justifyContent: 'center',
-		alignItems: 'center',
-		// padding: size / 2
-	},
-})

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

@@ -1,187 +0,0 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react'
-import uuid from 'uuid'
-import { View, StyleSheet, Keyboard } from 'react-native'
-import { isIphoneX, getBottomSpace } from 'react-native-iphone-x-helper'
-import { ComposerProps, InputProps, SendButtonProps } from '../types'
-import Input from './Input'
-import Send from './Send'
-import { MessageMedia, NewMessageModel } from '../../../classes/Message/types'
-
-// const emptyMedia: ComposerProps['media'][] = []
-
-const Composer = (props: ComposerProps) => {
-	// First, we set up a state manager for the composer's text.
-	const [textState, setText] = useState(props.initialText || '')
-	// if you pass a text prop, use that state instead
-	const [text, onChangeText] = useMemo(
-		() => [
-			props.text !== undefined ? props.text : textState,
-			props.text !== undefined ? props.onInputTextChanged : setText,
-		],
-		[props.text, textState, props.onInputTextChanged]
-	)
-
-	const [mediaState, setMedia] = useState<ComposerProps['media'][]>([])
-	const [media, onChangeMedia] = [
-		props.media || mediaState,
-		(props.media && props.onChangeMedia) || setMedia,
-	]
-
-	// track whether or not the keyboard is open to style the bottom based on where or not you're on an iPhone X
-	const [keyboardOpen, setKeyboardOpen] = useState(false)
-	useEffect(() => {
-		const show = () => {
-			setKeyboardOpen(true)
-		}
-		const hide = () => {
-			setKeyboardOpen(false)
-		}
-		Keyboard.addListener('keyboardWillShow', show)
-		Keyboard.addListener('keyboardWillHide', hide)
-		return () => {
-			Keyboard.removeListener('keyboardWillShow', show)
-			Keyboard.removeListener('keyboardWillHide', hide)
-		}
-	}, [])
-
-	const { user } = props
-	const messagesReadyToSend = useMemo(() => {
-		const messages: NewMessageModel[] = []
-		if (media && media.length) {
-			;(media as MessageMedia[]).forEach((item: MessageMedia) => {
-				const message: NewMessageModel = {
-					user,
-					text: '',
-					id: uuid.v4(),
-					createdAt: new Date(),
-					media: item,
-				}
-				messages.push(message)
-			})
-		}
-		if (text) {
-			const message: NewMessageModel = {
-				user,
-				text: text && text.trim(),
-				id: uuid.v4(),
-				createdAt: new Date(),
-			}
-			messages.push(message)
-		}
-		return messages
-	}, [user, text, media])
-
-	const { onSend } = props
-	const send = useCallback(() => {
-		if (messagesReadyToSend.length) {
-			if (onChangeText) onChangeText('')
-			if (onChangeMedia) onChangeMedia([])
-			onSend(messagesReadyToSend)
-		}
-	}, [onChangeText, onChangeMedia, messagesReadyToSend, onSend])
-
-	const { textInputProps, renderTextInput } = props
-	const renderInput = useCallback(() => {
-		if (renderTextInput === null) return null
-
-		const onSubmitEditing: InputProps['onSubmitEditing'] = () => {
-			if (props.sendOnKeyboardReturn) send()
-		}
-
-		const inputProps: InputProps = {
-			inputProps: textInputProps,
-			onChangeText,
-			text,
-			containerStyle: props.inputContainerStyle,
-			placeholderColor: props.placeholderColor,
-			placeholderText: props.placeholderText,
-			style: props.inputStyle,
-			tintColor: props.tintColor,
-			inputRef: props.inputRef,
-			sendOnKeyboardReturn: props.sendOnKeyboardReturn,
-			onSubmitEditing,
-		}
-
-		if (renderTextInput) return renderTextInput(inputProps)
-
-		return <Input {...inputProps} />
-	}, [
-		onChangeText,
-		text,
-		textInputProps,
-		renderTextInput,
-		props.inputContainerStyle,
-		props.placeholderColor,
-		props.placeholderText,
-		props.inputStyle,
-		props.tintColor,
-		// TODO leave or take out?
-		props.inputRef,
-		props.sendOnKeyboardReturn,
-		send,
-	])
-
-	const { renderSendButton } = props
-	const sendButtonMode =
-		props.sendButtonMode?.({ hasText: !!(text && text.trim()) }) ?? 'icon'
-	const renderSend = useCallback(() => {
-		if (renderSendButton === null) return null
-
-		// const mode: ChatProps['sendButtonMode'] = {
-		// 	empty: 'hidden',
-		// 	withText: 'icon',
-		// 	...(sendButtonMode || {}),
-		// }
-		const sendProps: SendButtonProps = {
-			onSend: send,
-			text,
-			media: media as MessageMedia[],
-			user,
-			// mode: (text && text.trim ? mode.withText : mode.empty) || 'icon',
-			mode: sendButtonMode,
-			containerStyle: props.sendButtonContainerStyle,
-			tintColor: props.tintColor,
-		}
-		if (renderSendButton) return renderSendButton(sendProps)
-
-		return <Send {...sendProps} />
-	}, [
-		send,
-		text,
-		user,
-		media,
-		renderSendButton,
-		sendButtonMode,
-		props.sendButtonContainerStyle,
-		props.tintColor,
-	])
-
-	const containerStyle = useMemo(() => {
-		const paddingBottom = keyboardOpen && isIphoneX() ? 10 : getBottomSpace()
-		return [styles.container, { paddingBottom }, props.containerStyle]
-	}, [props.containerStyle, keyboardOpen])
-
-	return (
-		<View style={[containerStyle]}>
-			<View style={styles.wrapper}>
-				{renderInput()}
-				{renderSend()}
-			</View>
-		</View>
-	)
-}
-
-Composer.displayName = 'Juice.Composer'
-
-export default React.memo(Composer)
-
-const styles = StyleSheet.create({
-	container: {
-		paddingBottom: 10,
-		paddingTop: 5,
-	},
-	wrapper: {
-		flexDirection: 'row',
-		alignItems: 'flex-end',
-	},
-})

package/src/components/Chat/Media/Image/index.tsx

@@ -1,26 +0,0 @@
-import React, { useMemo } from 'react'
-import { Image, Dimensions, ImageStyle } from 'react-native'
-import { MessageMedia } from '../../../../classes/Message/types'
-
-const Img = (props: Omit<MessageMedia, 'contentType'>) => {
-	const dimensions = useMemo((): ImageStyle => {
-		const aspectRatio = props.width / props.height
-		const isVertical = props.height > props.width
-		const { width: screenWidth } = Dimensions.get('window')
-		const width = isVertical ? screenWidth * 0.6 : screenWidth * 0.7
-		const height = width / aspectRatio
-
-		return { height, width }
-	}, [props.height, props.width])
-	return (
-		<Image
-			source={{ uri: props.url || props.uri }}
-			style={dimensions}
-			resizeMode="cover"
-		/>
-	)
-}
-
-Img.displayName = 'Juice.Image'
-
-export default React.memo(Img)

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

@@ -1,11 +0,0 @@
-import React from 'react'
-import { MessageMedia } from '../../../classes/Message/types'
-import Image from './Image'
-
-const Media = ({ contentType, ...props }: MessageMedia) => {
-	if (contentType === 'image') return <Image {...props} />
-	if (contentType === 'video') return null
-	return null
-}
-
-export default React.memo(Media)

package/src/components/Chat/Message/Swiper/Action/index.tsx

@@ -1,7 +0,0 @@
-import React from 'react'
-import { SwipeableProps, SwipeActionProps } from '../../../types'
-import { View } from 'react-native'
-
-export default (props: SwipeActionProps) => {
-	return <View></View>
-}

package/src/components/Chat/Message/Swiper/index.tsx

@@ -1,32 +0,0 @@
-import React, { useCallback } from 'react'
-import Swipeable from 'react-native-gesture-handler/Swipeable'
-import { SwipeableProps, SwipeActionProps } from '../../types'
-import Action from './Action'
-
-const Swiper = (props: SwipeableProps) => {
-	const { renderSwipeAction } = props
-	const renderAction = useCallback(
-		(actionProps: SwipeActionProps) => {
-			if (renderSwipeAction) return renderSwipeAction(actionProps)
-
-			return <Action {...actionProps} />
-		},
-		[renderSwipeAction]
-	)
-
-	const { swipeActions } = props
-	const leftActions = swipeActions && swipeActions.left
-	const rightActions = swipeActions && swipeActions.right
-
-	const renderRightActions = useCallback(() => {
-		if (rightActions) {
-			rightActions.forEach(action => {})
-		}
-	}, [rightActions])
-
-	const renderActionList = useCallback(() => {}, [])
-
-	return <Swipeable></Swipeable>
-}
-
-export default Swiper