Releasing v0.11.0

Author: Jeff Moore

.storybook/main.js

@@ -0,0 +1,26 @@
+module.exports = {
+  stories: ["../src/**/*.stories.@(tsx|mdx)"],
+  addons: [
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-docs",
+    "@storybook/addon-controls"
+  ],
+  typescript: {
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      shouldRemoveUndefinedFromOptional: true,
+      propFilter: prop => {
+        /**
+         * This influences auto-generation of prop tables in the Docs pages
+         * In this case I'm omitting props extended from node_modules packages,
+         * and internal ones without the decscription doc-comment for cleaner look
+         * Storybook v6 is required for this to work
+         */
+        if (prop.parent && /node_modules/.test(prop.parent.fileName))
+          return false;
+        if (!prop.description) return false;
+        return true;
+      }
+    }
+  }
+};

.storybook/preview-head.html

@@ -0,0 +1,22 @@
+<style>
+  body {
+    margin: 0;
+  }
+
+  #root {
+    align-items: center;
+    background: #ddd;
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+  }
+
+  .preview-box {
+    border: 1px solid #bbb;
+    height: 200px;
+    width: 400px;
+    line-height: 1.5;
+    text-align: justify;
+  }
+</style>
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />

.storybook/preview.js

@@ -0,0 +1,95 @@
+import React, { useEffect } from "react";
+import { ThemeProvider } from "styled-components";
+import { appTheme } from "main/Theme";
+import GlobalStyles from "main/styles/GlobalStyles";
+import Normalize from "main/styles/Normalize";
+
+const App = storyFn => {
+  return (
+    <ThemeProvider theme={appTheme}>
+      <Normalize />
+      <GlobalStyles />
+      {storyFn()}
+    </ThemeProvider>
+  );
+};
+
+export const decorators = [App];
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: [
+        "About",
+        "Chat Components",
+        "Basic Presentation",
+        "Basic Layout",
+        "Style Utilities"
+      ]
+    }
+  }
+};
+
+/* Uncomment in case Redux state is ever needed
+
+import { Provider, useSelector } from "react-redux";
+import Pubnub from "pubnub";
+import { PubNubProvider } from "pubnub-react";
+import { createPubNubListener } from "pubnub-redux";
+import keyConfiguration from "config/pubnub-keys.json";
+import KnownIds from "config/knownUserIds.json";
+import { createAppStore } from "main/store";
+import { isUserLoggedIn } from "features/authentication/authenticationModel";
+import { useDispatch } from "main/useDispatch";
+import { login } from "features/authentication/loginCommand";
+import { createTypingIndicatorsListener } from "features/typingIndicator/typingIndicatorModel";
+
+
+const AppWithPubnub = props => {
+  const pubnub = new Pubnub(keyConfiguration);
+  const store = createAppStore({
+    pubnub: {
+      api: pubnub
+    }
+  });
+
+  useEffect(() => {
+    pubnub.addListener(createPubNubListener(store.dispatch));
+    pubnub.addListener(createTypingIndicatorsListener(store.dispatch));
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener("beforeunload", pubnub.unsubscribeAll);
+  }, []);
+
+  return (
+    <ThemeProvider theme={appTheme}>
+      <Provider store={store}>
+        <PubNubProvider client={pubnub}>
+          <Normalize />
+          <GlobalStyles />
+          {props.children}
+        </PubNubProvider>
+      </Provider>
+    </ThemeProvider>
+  );
+};
+
+const Authorized = props => {
+  if (useSelector(isUserLoggedIn)) return props.children;
+
+  const dispatch = useDispatch();
+  const randomUserId = KnownIds[Math.floor(Math.random() * KnownIds.length)];
+  dispatch(login(randomUserId));
+  return null;
+};
+
+const AppWithPubnubDecorator = storyFn => (
+  <App>
+    <Authorized>{storyFn()}</Authorized>
+  </App>
+);
+
+addDecorator(AppWithPubnubDecorator);
+
+*/

docs/run-locally.md

@@ -15,21 +15,21 @@ Follow the instructions below to run the app in your local environment.
 
 1. Clone the GitHub repository.
 
-    ```bash
-    git clone https://github.com/pubnub/typescript-ref-app-team-chat-private.git
-    ```
+   ```bash
+   git clone https://github.com/pubnub/typescript-ref-app-team-chat.git
+   ```
 
 1. Install the project.
 
-    ```bash
-    cd typescript-ref-app-team-chat
-    npm install
-    ```
+   ```bash
+   cd typescript-ref-app-team-chat
+   npm install
+   ```
 
 1. Start the project. You'll be asked to enter your chat app keys from the PubNub Dashboard. Note that Objects should be enabled and a region should be selected on the key.
 
-    ```bash
-    npm start
-    ```
+   ```bash
+   npm start
+   ```
 
-    A web browser should automatically open [http://localhost:3000](http://localhost:3000), and you can explore your very own Team Chat app!
+   A web browser should automatically open [http://localhost:3000](http://localhost:3000), and you can explore your very own Team Chat app!

docs/tutorial/login.md

@@ -4,14 +4,14 @@ title: Log in with a User
 sidebar_label: Login
 ---
 
-While the splash screen displays, the app is selecting a user for you, and retrieving the conversations to which your user is subscribed. 
+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](assets/team-chat-loading-screen.png)
 
 ## Select a User
 
-The `authentication/login/Login.tsx` component displays a login screen and selects a random user to log into the application. 
-The user is selected from the list of IDs defined in the `knownUserIds.json` file. 
+The `authentication/login/Login.tsx` component displays a login screen and selects a random user to log into the application.
+The user is selected from the list of IDs defined in the `knownUserIds.json` file.
 These are the same users that were initially populated on your key.
 
 ```tsx
@@ -48,10 +48,10 @@ export { Login };
 
 ## Set the User
 
-Once the app selects a user, the following code (in `authentication/loginCommand.ts`) calls [pubnub.api.setUUID()](https://www.pubnub.com/docs/chat/reference/users#set-a-user) to set the user’s ID on the pubnub object. 
-This ID will be passed in all API calls to PubNub so that the network can identify the user who performs these operations. 
+Once the app selects a user, the following code (in `authentication/loginCommand.ts`) calls [pubnub.api.setUUID()](https://www.pubnub.com/docs/chat/reference/users#set-a-user) to set the user’s ID on the pubnub object.
+This ID will be passed in all API calls to PubNub so that the network can identify the user who performs these operations.
 
-We then call the [fetchUserById()](https://www.pubnub.com/docs/chat/redux/users#fetchuserbyid) command to fetch user details from PubNub and store the logged in user in the local store.
+We then call the [fetchUserData()](https://www.pubnub.com/docs/chat/redux/users#fetchuserdata) command to fetch user details from PubNub and store the logged in user in the local store.
 
 ```tsx
 export const login = (userId: string): ThunkAction<Promise<void>> => {
@@ -62,22 +62,22 @@ export const login = (userId: string): ThunkAction<Promise<void>> => {
     // Set the UUID of the current user
     context.pubnub.api.setUUID(userId);
     // Fetch user from PubNub
-    const isLoginSuccessful = dispatch(fetchUserById({ userId }))
+    const isLoginSuccessful = dispatch(fetchUserData({ userId }))
 });
 ```
 
 ## Connect To Conversations
 
-Once the login is successful, we call the [fetchMemberships()](https://www.pubnub.com/docs/chat/redux/memberships#fetchmemberships) command to retrieve the user’s conversations from PubNub. 
+Once the login is successful, we call the [fetchMemberships()](https://www.pubnub.com/docs/chat/redux/memberships#fetchmemberships) command to retrieve the user’s conversations from PubNub.
 The method returns a list of space memberships that were initially populated by the `setup/populate.js` script and stores these conversations in the local store.
 
-Next, we call [pubnub.api.subscribe()](https://www.pubnub.com/docs/chat/reference/spaces#subscribe-to-channels) to open a realtime connection with PubNub and subscribe the user to the conversation channels. 
+Next, we call [pubnub.api.subscribe()](https://www.pubnub.com/docs/chat/reference/spaces#subscribe-to-channels) to open a realtime connection with PubNub and subscribe the user to the conversation channels.
 If a client is subscribed to one or more channels, it will start receiving the messages and events published on those channels.
-Subscribing with presence also subscribes you to presence channels so you can receive join and leave events, which allow you to show other users as online or offline on the app. 
+Subscribing with presence also subscribes you to presence channels so you can receive join and leave events, which allow you to show other users as online or offline on the app.
 (We’ll dive into detail on presence in the next part of the tutorial.)
 
 ```tsx
-const isLoginSuccessful = dispatch(fetchUserById({ userId }))
+const isLoginSuccessful = dispatch(fetchUserData({ userId }))
   .then(() => {
     return dispatch(
       // Fetch the user’s conversations from PubNub
@@ -104,4 +104,4 @@ const isLoginSuccessful = dispatch(fetchUserById({ userId }))
       withPresence: true
     });
   });
-```
+```