chat 1.0.8 → 4.0.0

package/lib/typescript/hooks/index.d.ts

@@ -1,8 +0,0 @@
-export { default as useMessages } from './useMessages';
-export { default as useRoom } from './useRoom';
-export { default as useTyping } from './useTyping';
-export { default as useInbox } from './useInbox';
-export { default as useCreator } from './useCreator';
-export { default as useViewMessages } from './useViewMessages';
-export { default as useSendToPeople } from './useSend/useSendToPeople';
-export { default as useSendToGroup } from './useSend/useSendToGroup';

package/lib/typescript/hooks/useCreator/index.d.ts

@@ -1,27 +0,0 @@
-import { MutableRefObject } from 'react';
-import { RoomCreatorRef } from '../../components/RoomCreator/types';
-declare const _default: () => [MutableRefObject<RoomCreatorRef | undefined>, {
-    open: () => void;
-    close: () => void;
-}];
-/**
- * React hook for managing RoomCreator component in usechat
- *
- * @returns An array with a ref and then convenience functions for the creator
- * [ref, { open, close }]
- *
- * **Required** In order for the methods to work, you must pass creator to sheetRef prop.
- *
- * @example
- * ```javascript
- * export default () => {
- * 	const [creator, { open, close }]
- *
- * 	// ...some other method
- *  const onPress = () => open()
- *
- * 	return <RoomCreator sheetRef={creator} />
- * }
- * ```
- */
-export default _default;

package/lib/typescript/hooks/useInbox/index.d.ts

@@ -1,29 +0,0 @@
-import { QueryDataHandler } from '@nandorojo/fuego/lib/typescript/hooks/useFuego/types';
-import { ExistingRoomDocument } from '../../classes/Room/types';
-import { InboxModel } from '../../classes/Inbox/types';
-import { UseInboxConfig } from './types';
-declare const _default: (config?: UseInboxConfig, options?: QueryDataHandler<ExistingRoomDocument>) => {
-    path: string;
-    loading: boolean;
-    error: import("@nandorojo/fuego/lib/typescript/hooks/useFuego/types").QueryError;
-    db: import("firebase").firestore.Firestore;
-    ref: import("@nandorojo/fuego").FirestoreRefType;
-    unsubscribe: (name: string) => void;
-    exists: boolean | null;
-    refetch: () => void;
-    data: InboxModel;
-};
-/**
- * React hook to query the chat inbox in realtime. Used with the [Juice.Inbox] component from Juice.
- *
- * @example
- * ```
- * const { data } = useInbox()
- *
- * return <Juice.Inbox rooms={data} />
- * ```
- *
- * @returns
- * { data, loading, path, error } and other values returned by useFuego() hook. Data is properly formatted for rendering.
- */
-export default _default;

package/lib/typescript/hooks/useInbox/types.d.ts

@@ -1,5 +0,0 @@
-import { FuegoQueryConfig } from '@nandorojo/fuego/lib/typescript/FuegoQuery/types';
-export interface UseInboxConfig extends Omit<FuegoQueryConfig, 'path'> {
-    uid?: string;
-    listen?: boolean;
-}

package/lib/typescript/hooks/useMessages/index.d.ts

@@ -1,24 +0,0 @@
-import { UseMessagesConfig } from './types';
-import { NewMessageModel, EditMessageModel, MessageModelDocument } from '../../classes/Message/types';
-import { QueryDataHandler } from '@nandorojo/fuego/lib/typescript/hooks/useFuego/types';
-declare const _default: ({ id, ...config }: UseMessagesConfig, options?: QueryDataHandler<MessageModelDocument>) => {
-    data: NewMessageModel[];
-    loading: boolean;
-    error: import("@nandorojo/fuego/lib/typescript/hooks/useFuego/types").QueryError;
-    ref: import("@nandorojo/fuego").FirestoreRefType;
-    path: string;
-    empty: boolean;
-    send: (message: NewMessageModel[]) => void;
-    edit: (message: EditMessageModel) => Promise<void>;
-    fetchMore: () => void;
-    fetchingMore: number | false;
-};
-/**
- *	React hook to set up a lisener for a room's messages
- *
- * 	@param { id } the roomId, along with other query options from `useFuego` hook
- *
- *	@returns { data: formattedMessages, loading, error, ref, path, empty, send, edit, fetchMore }
- * data is formatted for rendering.
- */
-export default _default;

package/lib/typescript/hooks/useMessages/types.d.ts

@@ -1,5 +0,0 @@
-import { FuegoQueryConfig } from '@nandorojo/fuego/lib/typescript/FuegoQuery/types';
-export interface UseMessagesConfig extends Omit<FuegoQueryConfig, 'path'> {
-    id: string;
-    listen?: boolean;
-}

package/lib/typescript/hooks/useRoom/index.d.ts

@@ -1,26 +0,0 @@
-import { EditRoomModel, CreateCallableRoomModel, ExistingRoomDocument, ExistingRoomModel } from '../../classes/Room/types';
-import { UseRoomType } from './types';
-import { QueryDataHandler } from '@nandorojo/fuego/lib/typescript/hooks/useFuego/types';
-declare const _default: ({ id, ...config }: UseRoomType, options?: QueryDataHandler<ExistingRoomDocument>) => {
-    data: ExistingRoomModel | null;
-    loading: boolean;
-    error: import("@nandorojo/fuego/lib/typescript/hooks/useFuego/types").QueryError;
-    ref: import("@nandorojo/fuego").FirestoreRefType;
-    create: (room: CreateCallableRoomModel) => Promise<import("firebase").functions.HttpsCallableResult>;
-    edit: (room: EditRoomModel) => Promise<void> | null;
-    usersAreTyping: boolean;
-    namesOfUsersTyping: string[];
-};
-/**
- * Fetches or subscribes to a chatroom. It automatically handles unmounts, etc.
- *
- * @param config - config dictionary.
- * @param config.id - Required: the unique ID for this chatroom, typically generated by the backend. If using the [[useInbox]] hook, each item in [[useInbox]]'s data array has this ID.
- * @param config.listen Boolean to determine if this room should update state as a subscription. Default false.
- * @param options - added options dictionary for useRoom
- *
- * @remarks Look at the fuego library's useFuego hook to see all the available arguments for config and options.
- *
- * @returns { data: room, loading, error, ref, create, edit, usersAreTyping, namesOfUsersTyping } data is formatted for rendering room.
- */
-export default _default;

package/lib/typescript/hooks/useRoom/types.d.ts

@@ -1,5 +0,0 @@
-import { FuegoQueryConfig } from '@nandorojo/fuego/lib/typescript/FuegoQuery/types';
-export interface UseRoomType extends Omit<FuegoQueryConfig, 'path'> {
-    id: string;
-    listen?: boolean;
-}

package/lib/typescript/hooks/useSend/useSendToGroup/index.d.ts

@@ -1,6 +0,0 @@
-import { NewMessageModel } from '../../../classes/Message/types';
-export default function <MessageModel extends NewMessageModel>(): {
-    send: (message: MessageModel, recipients: string[]) => void;
-    uploading: boolean;
-    error: null;
-};

package/lib/typescript/hooks/useSend/useSendToPeople/index.d.ts

@@ -1,6 +0,0 @@
-import { NewMessageModel } from '../../../classes/Message/types';
-export default function <MessageModel extends NewMessageModel>(): {
-    send: (message: MessageModel, recipients: string[]) => void;
-    uploading: boolean;
-    error: null;
-};

package/lib/typescript/hooks/useTyping/index.d.ts

@@ -1,36 +0,0 @@
-declare const _default: ({ roomId, text, delay }: {
-    roomId: string;
-    text: string;
-    delay?: number | null | undefined;
-}) => void;
-/**
- * useTyping automatically updates the backend whenever a user is typing.
- *
- * @param options - A dictionary to configure the typing.
- * @param options.roomId - **Required** unique id of the room you're typing in.
- * @param options.text - **Required** The current text state of your chat input
- * @param options.delay (Optional) Set the timeout delay to mark typing false. Set null if you don't want a time out.
- *
- * @example
- * ```javascript
- * // input text state
- * const [text, setText] = useState('')
- * // let's say we're getting our room id from our react-navigation params
- * const navigation = useNavigation()
- * const roomId = navigation.params.id
- *
- * useTyping({ roomId, text })
- *
- * <ChatComponent text={text} onChangeText={setText} />
- * ```
- *
- * @returns
- * Doesn't return anything. We live in an undefined world, I suppose.
- *
- * @remarks
- * The actual data of who is typing is stored in the chatroom object.
- * If you want to get this data realtime in a room, consider using useRoom({ listen: true }). This data will also be in useInbox().
- * See docs for useRoom or useInbox for more.
- *
- */
-export default _default;

package/lib/typescript/hooks/useViewMessages/index.d.ts

@@ -1,18 +0,0 @@
-import { NewMessageModel } from '../../classes/Message/types';
-import { UseViewMessagesConfig, UseViewMessagesMethods } from './types';
-/**
- * React hook that returns a function useful for marking messages as viewed on the backend.
- * It works by only clearing unread count when you've reached the most recent message, leveraging React Native FlatList's onViewableItemsChanged.
- * This is only useful if you're using the Juice chat backend.
- *
- * @example
- * ```js
- * const onViewMessages = useViewMessages({ roomId: 'some_chat_room_id' })
- *
- * return <Juice.Chat onViewMessages={onViewMessages} />
- * ```
- */
-export default function <Model extends NewMessageModel = NewMessageModel>(config: UseViewMessagesConfig, methods?: UseViewMessagesMethods<Model>): ({ visibleMessages, latestMessageId }: {
-    visibleMessages: Model[] | null;
-    latestMessageId: string | null;
-}) => void;

package/lib/typescript/hooks/useViewMessages/types.d.ts

@@ -1,20 +0,0 @@
-import { NewMessageModel } from '../../classes/Message/types';
-export interface UseViewMessagesConfig {
-    roomId: string;
-}
-/**
- * An optional dictionary for using custom callbacks for viewed messages.
- */
-export interface UseViewMessagesMethods<Model extends NewMessageModel = NewMessageModel> {
-    /**
-     * Callback function that is triggered whenever the messages in view changes.
-     * Since the `useViewMessages` hook is only concerned with updating a chat room's unread count and such, `onViewMessages` might be useful if you want to have your own analytics or message tracking.
-     *
-     * @param info - A dictionary containing info about the currently visible messages
-     * @param info.visibleMessages - An array of messages that are currently in view
-     *
-     */
-    onViewMessages?: (info: {
-        visibleMessages: Model[];
-    }) => void;
-}

package/lib/typescript/index.d.ts

@@ -1,11 +0,0 @@
-export * from './components';
-export * from './classes';
-export * from './hooks';
-import * as ChatType from './components/Chat/types';
-import * as InboxType from './components/Inbox/types';
-import * as MessageType from './classes/Message/types';
-import * as RoomType from './classes/Room/types';
-export declare const ChatTypes: typeof ChatType;
-export declare const InboxTypes: typeof InboxType;
-export declare const MessageTypes: typeof MessageType;
-export declare const RoomTypes: typeof RoomType;

package/readme.md

@@ -1,201 +0,0 @@
-# `chat` 🍹
-
-```sh
-yarn add chat
-```
-
-Build production-ready, full-stack chat in minutes. Drop in our pre-made UI components, connect them to your backend our pre-made logic, and you're good to go.
-
-**Stop worrying about:**
-
-✅ Auth
-
-✅ Customizable UI
-
-✅ Transitions & animations
-
-✅ Websockets, data & fallbacks
-
-✅ Offline support (beta)
-
-✅ 1-on-1 and group chats
-
-```javascript
-import * as React
-import { useMessages, Messages } from 'usechat'
-
-const ChatScreen = () => {
-	const { data, send } = useMessages({ id: 'my-first-chat-room' })
-
-	return <Messages onSend={send} messages={data} />
-}
-
-```
-
-## Backend setup for firebase
-
-If you only want to use this library for the UI components, there is no further setup required.
-
-However, if you want to connect your firebase/firestore backend, there is are two added steps.
-
-**1. Install dependencies**
-
-```
-yarn add firebase @nandorojo/fuego
-```
-
-**2. Add the provider to the root of your app**
-
-Initialize `fuego`'s db first. Then, wrap your app with the `ChatProvider`.
-
-```jsx
-// App.tsx
-import * as React from 'react'
-import { ChatProvider } from 'chat'
-import { Fuego } from '@nandorojo/fuego'
-
-const fuego = new Fuego({
-	//...firebase config here
-})
-
-export default () => {
-	return <ChatProvider fuego={fuego}>{/* Your app goes here*/}</ChatProvider>
-}
-```
-
-[How to find your firebase config](https://support.google.com/firebase/answer/7015592?hl=en#web)
-
-_Note_: Make sure you've enabled firebase firestore to use this. See [this tutorial](https://blog.expo.io/how-to-build-a-chat-app-with-react-native-3ef8604ebb3c) for more.
-
-## Brief Example
-
-This is all it takes to build a **full-stack** live chat with `chat` in React/React Native (with some abstraction).
-
-```jsx
-import * as React
-import { useNavigation, useNavigationParam } from 'react-navigation'
-import { useInbox, Inbox, useMessages, Messages } from 'usechat'
-
-const InboxScreen = () => {
-	const { data } = useInbox()
-	const navigation = useNavigation()
-
-	return <Inbox rooms={data} onPressItem={id => navigation.navigate('Chat', { id })} >
-}
-
-const ChatScreen = () => {
-	const id = useNavigationParam('id')
-	const { data, send } = useMessages({ id })
-
-	return <Messages onSend={send} messages={data} />
-}
-
-```
-
-## Highlights
-
-😎 Works with `react` and `react native` **(including Expo!)**
-
-🚨 Integrates with Firebase auth (and can also work with your custom auth solutions)
-
-📣 Integrates with `expo-notifications`
-
-🥐 Fully customizable UI components
-
-🍇 Production-level animations, transitions, and swipe gestures.
-
-👾 Written in TypeScript
-
----
-
-# Get Started
-
-Setup is quick and easy. Jump to the setup guide. Then, check out the hello world and example.
-
----
-
-## Chat features included out-of-the-box
-
-✏️ Typing indicators
-
-💯 Unread count
-
-😂 Meme search (powered by Memezy)
-
-👻 Image & video, **including** uploading logic & content storage
-
-🍪 Online status
-
-🕺 Realtime inbox
-
-🤯 Realtime chat rooms
-
-😇 Room-level user permissions
-
-🔥 Group chats
-
-👴 Customizable system messages (ex: William Buzzelbees changed the group name to "Frankenstein's Friday Squad")
-
-👀 Send a message to multiple people, even if a room with those people doesn't exist yet (like an instagram feed-to-DM flow.)
-
-🥇 Room names (coming soon)
-
-## Customizable components included
-
-🧤 `<AuthGate />` wraps your app and gives it customizable auth, powered by firebase.
-
-🧢 `<Inbox />` gives you a real-time list of chat rooms.
-
-🎩 `<InboxItem />` List item for `<Inbox />`, including customizable swipe gestures.
-
-⛑ `<TypingIndicator />` Show typing, with animations, as it happens
-
-🍪 `<UnreadIndicator />` Show an iMessage-like unread indicator, with or without the number of unread messages.
-
-⚡️ `<Messages />` Like GiftedChat, to the max.
-
-## All the logic you'd need for a chat, handled.
-
-Functions are pre-made for the following:
-
-🐻 Create chat room
-
-🎃 Leave chat room
-
-🤘 Remove users from chat room
-
-👮‍♂️ Customizable avatars for chat rooms
-
-🏄🏾‍♂️ Add people to a chat room
-
-## Auth integration
-
-### If you're using Firebase auth
-
-Chat will automatically integrate into your Firebase auth if you're using it once you've completed the setup.
-
-## Aren't there a lot of chat SDKs already? What makes this better than all the others?
-
-Yes, there are. The motivation for this library comes down to only one concept: **production-ready** chat.
-
-If you google `react native chat tutorial`, you'll come up with many smart people writing good articles about building your first chat app. Suggestions range from using firebase's highly-customizable serverless database to more opinionated startups that build SDKs for chat only.
-
-The thing is, none of these options created a production-ready chat that "thinks in React."
-
-With a custom option like Firebase, you're having to deal with tons of different socket subscriptions, chat schema changes, etc, and building in features like unread count, online status, or typing indicators becomes non-trivial quickly.
-
-Meanwhile, existing JavaScript chat SDKs aren't made with React's stateful nature in mind. Companies like Pusher, PubNub, and Stream clearly have something good going for them, but they aren't made for React the way a library like `Apollo` is.
-
-**You should be able to build a customizable, full-stack chat with only a few lines of code.** If Stripe can do that for accepting payments, we can do it for sending words.
-
-Tutorials for existing chat SDKs have you typing `setState` dozens of times, and you wonder, would this actually look as good as iMessage in production? What if I want to move my component files around? What if I forget to unmount a listener on a certain screen? And if I want to reorganize my component files, do I have to write all that bulky `setState` logic over? What happens if I want to use a state manager like redux?
-
-With all those questions in mind, I decided I would go feature-by-feature, headache-by-headache, and make my own chat SDK that was made specifically for `react`/`react-native` (and `expo` in particluar).
-
-Thanks to the introduction of `react hooks` in React 16.8.3 (and in `expo` after SDK v33 🔥), making a react-first chat SDK went from a massive headache to an elegant, scalable experience.
-
-This chat library relies on two main APIs: `firebase firestore` for the database, `react hooks` for stateful component logic.
-
-That means that you can build a serverless chat app that is _actually_ ready for production. And when you need extra customizations like unread counts and typing indicators, you just click that you want them in a GUI.
-
-A final point: most chat SDKs own your messages and data. With us, we just link into your firebase, so you own all the data.

package/src/ChatContext/index.tsx

@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-import { ChatContextType } from './types'
-
-// no default necessary with a provider at the top
-// @ts-ignore
-const context = createContext<ChatContextType>()
-context.displayName = 'ChatJS'
-
-export default context

package/src/ChatContext/types.ts

@@ -1,4 +0,0 @@
-export interface ChatContextType {
-	userId: string
-	authToken: string
-}

package/src/classes/Chat/index.ts

@@ -1,46 +0,0 @@
-import { ChatConfig } from './types'
-
-export default class Chat {
-	private chat: ChatConfig
-	constructor(chat: ChatConfig = {}) {
-		this.chat = chat
-		// this.chat = {
-		// 	...chat,
-		// 	httpCallables: {
-		// 		sendMessageFromFeed: 'sendMessageFromFeed',
-		// 		sendMessageToPeople: 'sendToPeople',
-		// 		sendMessageToGroup: 'sendToGroup',
-		// 		...(chat.httpCallables || {})
-		// 	}
-		// }
-	}
-	get roomsCollection() {
-		return this.chat.roomsCollection || 'rooms'
-	}
-	get messagesCollection() {
-		return this.chat.messagesCollection || 'messages'
-	}
-	get httpCallables() {
-		return {
-			sendMessageFromFeed:
-				(this.chat.httpCallables &&
-					this.chat.httpCallables.sendMessageFromFeed) ||
-				'sendMessageFromFeed',
-			sendMessageToPeople:
-				(this.chat.httpCallables &&
-					this.chat.httpCallables.sendMessageToPeople) ||
-				'sendMessageToPeople',
-			sendMessageToGroup:
-				(this.chat.httpCallables &&
-					this.chat.httpCallables.sendMessageToGroup) ||
-				'sendMessageToGroup',
-			createRoom:
-				(this.chat.httpCallables && this.chat.httpCallables.createRoom) ||
-				'createRoom',
-			sendMessageToRooms:
-				(this.chat.httpCallables &&
-					this.chat.httpCallables.sendMessageToRooms) ||
-				'sendMessageToRooms'
-		}
-	}
-}

package/src/classes/Chat/types.ts

@@ -1,23 +0,0 @@
-export type RoomPathFunc = (roomId: string) => string
-
-export interface ChatConfig {
-	roomsCollection?: string
-	messagesCollection?: string
-	httpCallables?: {
-		sendMessageFromFeed: string
-		sendMessageToPeople: string
-		sendMessageToGroup: string
-		sendMessageToRooms: string
-		createRoom: string
-	}
-}
-
-export interface ChatModel {
-	roomsCollection: string
-	messagesCollection: string
-	httpCallables: {
-		sendMessageFromFeed: string
-		sendMessageToPeople: string
-		sendMessageToGroup: string
-	}
-}

package/src/classes/Inbox/index.ts

@@ -1,12 +0,0 @@
-import { InboxModel } from './types'
-import { chat } from '../../components/ChatProvider'
-
-export default class {
-	private inbox: InboxModel
-	constructor(inbox: InboxModel) {
-		this.inbox = inbox
-	}
-	get path() {
-		return chat.messagesCollection
-	}
-}

package/src/classes/Inbox/types.ts

@@ -1,3 +0,0 @@
-import { ExistingRoomModel } from '../Room/types'
-
-export type InboxModel = ExistingRoomModel[]