Releasing v0.10.0

Author: Jeff Moore

.travis.yml

@@ -12,10 +12,10 @@ jobs:
       name: "Team Chat Reference Application"
       before_install:
         - |
-          echo '{
-            "publishKey": "${PROD_PUBLISH_KEY}",
-            "subscribeKey": "${PROD_SUBSCRIBE_KEY}"
-          }' >> ./src/config/pubnub-keys.json
+          echo '
+          REACT_APP_PUBLISH_KEY="${DEV_PUBLISH_KEY}",
+          REACT_APP_SUBSCRIBE_KEY="${DEV_SUBSCRIBE_KEY}"
+          ' >> .env
       install:
         - npm install
       script:

README.md

@@ -4,6 +4,8 @@
 
 This repository contains the code for the Team Chat web reference application hosted on the [PubNub Chat Docs Page](https://www.pubnub.com/docs/chat/quickstart#quickstart). You can download the project to run on your local machine, and explore the code to see how we built it.
 
+Check out the [documentation](http://pubnub.github.io/typescript-ref-app-team-chat) to learn about advanced features like profanity filtering, gifs, and link previews.
+
 ![alt text](team-chat-preview.png "Reference App")
 
 The application demonstrates how to build a chat application using:
@@ -34,7 +36,7 @@ To run this application you must obtain publish and subscribe keys from your Pub
 
 1. Enable the **Objects** feature. **Presence** and **PubNub Functions** should have been enabled when the keyset was created.
 
-1. Select a region to store your user data (e.g. *US East*).
+1. Select a region to store your user data (e.g. *US East*). **DO NOT** enable user, channel, or membership events.
 
 1. Locate the *Publish* and *Subscribe* keys. You'll need these keys to include in this project.
 
@@ -43,7 +45,7 @@ To run this application you must obtain publish and subscribe keys from your Pub
 1. Clone the GitHub repository.
 
     ```bash
-    git clone git@github.com:pubnub/typescript-ref-app-team-chat.git
+    git clone https://github.com/pubnub/typescript-ref-app-team-chat.git
     ```
 
 1. Install the project.
@@ -61,119 +63,6 @@ To run this application you must obtain publish and subscribe keys from your Pub
 
     A web browser should automatically open [http://localhost:3000](http://localhost:3000), and you can explore your very own Team Chat app!
 
-## Enable rich message features *(optional)*
-
-### Gif Picker
-
-To enable the gif picker, you need a GIPHY API key.
-You can sign up for a (free) developer account and create a key from the [GIPHY developer dashboard](https://developers.giphy.com/dashboard/).
-
-1. Create `.env` at the root of the project to hold your environment variables. This file will no be commited.
-
-1. Copy the API key from the dashboard and add it to `.env`.
-
-    ```dotenv
-    GIPHY_API_KEY=your-api-key
-    ```
-
-1. The variable needs to be exposed to the React app by adding another line.
-
-    ```dotenv
-    REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
-    ```
-
-
-1. Restart the dev server for the changes to take effect.
-
-    ```bash
-    npm start
-    ```
-
-
-### Image Moderation
-
-In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.
-
-You can sign up for a (free) account and API key from the [Sightengine dashboard](https://dashboard.sightengine.com/).
-
-1. Add the **API User** and **API Secret** to your `.env` file.
-
-    ```dotenv
-    FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret
-    FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
-    ```
-
-### /giphy command
-
-The `/giphy ${message}` command shares a gif related to the message.
-
-1. You should have created a GIPHY API key in the [Gif Picker](#gif-picker) section. Exposed it to the function by adding another variable that references it.
-
-    ```dotenv
-    FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
-    ```
-
-### Deploy Functions
-
-Link previews, message moderation, and the `/giphy` command are powered by PubNub functions. To enable these features, you'll need to build and deploy the function code in `/server`.
-
-#### Option 1: Automatic Upload
-
-> Note: To manage functions from the CLI, you have to sign in to your PubNub account. This is currently not possible if you created your account with SSO.
-
-1. Use the CLI to build and deploy the functions from source (in `server/src`).
-
-    ```bash
-    npm run deploy:functions
-    ```
-
-1. Enter your PubNub account email and password (these will **not** be saved).
-
-1. Select your app and keyset using the up/down arrows and return to submit.
-
-#### Option 2: Manual Upload
-
-1. From the PubNub dashboard, select the keyset your are using. Then, open the functions tab (on the left). Enter a module name and description, then click **Create New Module**.
-
-1. Click **Create Function**, give it a name, set the event type to *Before Publish or Fire* and enter `*` for the channel pattern and click **Create**.
-
-1. Use the CLI to build the functions from source (in `server/src`).
-
-    ```bash
-    npm run build:functions
-    ```
-
-1. After running the build command, a minified and compiled version of the function is available is `server/build/transformPublishedMessages.js`. Copy the contents of the file into the functions editor and click **Save**.
-
-1. Click **Start Module** from the top right to deploy your function.
-
-## Documentation
-
-We've included additional documentation and a detailed tutorial for building a chat app with React, Redux, and PubNub.
-You can view it in the `/docs` directory or run the documentation site locally.
-
-### Running the docs website
-
-1. If you haven't already, clone the GitHub repository
-
-    ```bash
-    git clone [email protected]:pubnub/typescript-ref-app-team-chat.git
-    ```
-
-1. Install the dependencies
-
-    ```bash
-    cd typescript-ref-app-team-chat/website
-    npm install
-    ```
-
-1. Run the docs website locally.
-
-    ```bash
-    npm start
-    ```
-    If the chat app is already running, you may be asked to accept a different port. Your browser should open to [http//localhost:3000](http://localhost:3000) where you can find the tutorial and docs.
-
 ## Further Information
 
 Checkout [PubNub Chat Docs](https://www.pubnub.com/docs/chat) page for more information about how to use the React and Redux SDKs to add in-app chat to your applications.

website/static/img/dark-theme.png renamed to docs/assets/dark-theme.png

@@ -6,7 +6,7 @@ sidebar_label: Introduction
 
 Team Chat is our group chat app with features like user login, joining/leaving group conversations, send/receive messages, members online/offline presence, typing indicators, profanity filtering and more. Its UI is built in React, and uses the PubNub Redux framework to manage client state on the application.
 
-![team chat preview](/img/team-chat-preview.png)
+![team chat preview](assets/team-chat-preview.png)
 
 ## Features
 

website/static/img/function-setup-1.png renamed to docs/assets/function-setup-1.png

@@ -36,7 +36,7 @@ To run this application you must obtain publish and subscribe keys from your Pub
 1. Clone the GitHub repository.
 
     ```bash
-    git clone git@github.com:pubnub/typescript-ref-app-team-chat.git
+    git clone https://github.com/pubnub/typescript-ref-app-team-chat-private.git
     ```
 
 1. Install the project.

website/static/img/join-conversations.png renamed to docs/assets/join-conversations.png

@@ -7,7 +7,7 @@ sidebar_label: Conversation Members
 Click the membership count at the top right of a conversation, and you’ll see the conversation’s member list.
 Online members are placed at the top of the list and have a green dot, while offline members are below, and greyed out.
 
-![members list](/img/team-chat-member-list.png)
+![members list](assets/team-chat-member-list.png)
 
 The `conversationMembers/ConversationMembers/ConversationMembers.tsx` component displays the list of members that belong to the conversations. 
 It calls the [fetchMembers](https://www.pubnub.com/docs/chat/redux/members#fetchmembers) command to get the list of members in the conversation from PubNub and stores the members in the local store.

website/static/img/leave-conversation.png renamed to docs/assets/leave-conversation.png

@@ -7,7 +7,7 @@ sidebar_label: Join Conversation
 When you click the "+ button" on your list of joined conversations, the app displays an overlay listing all the other available conversations. 
 Click a conversation to join it and start receiving the messages from that conversation.
 
-![join a conversation](/img/join-conversations.png)
+![join a conversation](assets/join-conversations.png)
 
 The `joinedConversations/JoinConversationDialog/JoinConversationDialog.tsx` component displays the dialog with a list of conversations that are available to join. 
 The component calls the `getAllConversations` selector to fetch all conversations from the [local store](https://www.pubnub.com/docs/chat/redux/spaces?#state-shape). 

website/static/img/profanity-filter.png renamed to docs/assets/profanity-filter.png

@@ -10,7 +10,7 @@ The Introductions conversation is automatically selected when the app launches.
 You can join other conversations with the + button, and leave existing conversations with the Exit button. 
 These features are covered in the [join conversation](/docs/tutorial/join-conversation) and [leave conversation](/docs/tutorial/leave-conversation) sections of the tutorial.
 
-![conversations list](/img/team-chat-my-conversations.png)
+![conversations list](assets/team-chat-my-conversations.png)
 
 The `joinedConversations/MyConversations/MyConversations.tsx` component gets the user’s list of conversations and allows the user to select a conversation. 
 When the app loads, it selects the Introduction conversation by default.

website/static/img/team-chat-conversation.png renamed to docs/assets/team-chat-conversation.png

@@ -8,7 +8,7 @@ Hover over a conversation in your list of joined conversations to display a leav
 Click it, and you’ll leave the conversation. 
 You'll no longer receiving messages sent to that conversation.
 
-![leave a conversation](/img/leave-conversation.png)
+![leave a conversation](assets/leave-conversation.png)
 
 The `joinedConversations/MyConversations/MyConversations.tsx` component displays the icon next to the user’s conversations to leave a conversation. 
 The next section goes over the method that is called. 

website/static/img/team-chat-loading-screen.png renamed to docs/assets/team-chat-loading-screen.png

@@ -6,7 +6,7 @@ sidebar_label: User Login
 
 While the splash screen displays, the app is selecting a user for you, and retrieving the conversations to which your user is subscribed. 
 
-![splash screen](/img/team-chat-loading-screen.png)
+![splash screen](assets/team-chat-loading-screen.png)
 
 ## Select a User
 

website/static/img/team-chat-member-list.png renamed to docs/assets/team-chat-member-list.png

@@ -8,7 +8,7 @@ Along the top of the conversation pane, the app displays details about the conve
 Below that, the app shows messages in the conversation as they arrive. 
 At the bottom, we have a component to let us input text and emoji.
 
-![a conversation](/img/team-chat-conversation.png)
+![a conversation](assets/team-chat-conversation.png)
 
 Once a conversation is selected, the `currentConversation/CurrentConversation/CurrentConversation.tsx` component displays details of the conversation as well as its messages.
 

website/static/img/team-chat-my-conversations.png renamed to docs/assets/team-chat-my-conversations.png

@@ -7,7 +7,7 @@ sidebar_label: Profanity Filter
 Filtering input is a common request, as it helps automate moderation for busy chat applications. 
 An easy way to implement profanity filtering, in real time, is to implement a serverless [PubNub Function](https://www.pubnub.com/products/functions/).
 
-![profanity filtered chat](/img/profanity-filter.png)
+![profanity filtered chat](assets/profanity-filter.png)
 
 Adding a profanity filter lets you moderate chat messages in real time as they go over the network. 
 The function detects objectionable words in any given text, and lets you censor the content in a variety of ways. 
@@ -25,7 +25,7 @@ By providing the ability to program the network, PubNub Functions simplifies dep
 Go to your [PubNub Dashboard](https://dashboard.pubnub.com/) and create a new module, and then create a new Before Publish function.
 The function should be set up to trigger on a specific set of channels (such as `chat.*`) or on all channels using wildcards (`*`).
 
-![create a new function dashboard](/img/function-setup-1.png)
+![create a new function dashboard](assets/function-setup-1.png)
 
 ## Copy the Function Code
 

website/static/img/team-chat-preview.png renamed to docs/assets/team-chat-preview.png

@@ -4,7 +4,7 @@ title: Add PubNub to your App
 sidebar_label: PubNub Integration
 ---
 
-When the app first loads, it runs the `main/App.tsx` component to initialize the [pubnub client](https://www.pubnub.com/docs/chat/reference/users#initialize-pubnub) with your publish and subscribe keys that are configured in the `config/pubnub-keys.json` file.
+When the app first loads, it runs the `main/App.tsx` component to initialize the [pubnub client](https://www.pubnub.com/docs/chat/reference/users#initialize-pubnub) with your publish and subscribe keys that are configured in the `.env` file.
 
 The component also calls [pubnub.addListener()](https://www.pubnub.com/docs/chat/redux/using#register-listeners) to register all listeners at once (message listener, presence listener, and so on). 
 The listener triggers events when the app receives messages, and automatically dispatches reducers to update the local store.
@@ -13,7 +13,7 @@ The listener triggers events when the app receives messages, and automatically d
 import Pubnub from "pubnub";
 import { createPubNubListener } from "pubnub-redux";
 import { PubNubProvider } from "pubnub-react";
-import keyConfiguration from "config/pubnub-keys.json";
+import keyConfiguration from "config/pubnub-keys";
 const pubnubConfig = Object.assign(
   {},{
     restore: true,

website/static/img/team-chat-user-details.png renamed to docs/assets/team-chat-user-details.png

@@ -98,7 +98,7 @@ const custom = {
 } as const;
 ```
 
-![image](/img/dark-theme.png)
+![image](assets/dark-theme.png)
 
 ## Other Changes
 

website/static/img/typing-indicator.png renamed to docs/assets/typing-indicator.png

@@ -7,7 +7,7 @@ sidebar_label: Typing Indicators
 When someone is typing, the app displays a message showing the name of the user who is typing.
 If more than one person is typing, the message changes to reflect that multiple users are typing.
 
-![typing indicators](/img/typing-indicator.png)
+![typing indicators](assets/typing-indicator.png)
 
 The `typingIndicator/TypingIndicatorDisplay/TypingIndicatorDisplay.tsx` component adds logic to display typing indicators in the app.
 The typing indicators are displayed to all users in a conversation as a user is typing a message.

docs/quickstart/introduction.md

@@ -7,7 +7,7 @@ sidebar_label: User Details
 In the top left section of the UI, the app shows details for the current user. 
 These include an avatar image, the user’s name and title, and the user’s network status.
 
-![user details](/img/team-chat-user-details.png)
+![user details](assets/team-chat-user-details.png)
 
 The `currentUser/MyUserDetails.tsx` component displays the details for the user like name, title and profileUrl. 
 The component calls `getUsersById()` selector to retrieve these user details from the [local store](https://www.pubnub.com/docs/chat/redux/users#state-shape).