Skip to content
This repository was archived by the owner on Nov 13, 2024. It is now read-only.

Commit cd311ed

Browse files
author
Jeff Moore
committed
Releasing v0.9.0
1 parent 87586da commit cd311ed

File tree

69 files changed

+4458
-488
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+4458
-488
lines changed

‎.gitignore‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ node_modules
1010

1111
# production
1212
/build
13+
/functions/build
1314

1415
# misc
1516
.DS_Store
@@ -26,8 +27,14 @@ yarn.lock
2627
# Ensure our pubnub keys do not get checked in to github
2728
pubnub-keys.json
2829

30+
# Functions upload cache
31+
.cache
32+
2933
# IDE
3034
.idea
3135

3236
deployment_keys
3337
deployment_keys.pub
38+
39+
# Environment variables
40+
.env

‎README.md‎

Lines changed: 90 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,14 @@ To run this application you must obtain publish and subscribe keys from your Pub
2828

2929
1. Give your app a name, and select **Chat App** as the app type.
3030

31-
1. Select a region to store your user data (e.g. *Portland*).
32-
3331
1. Click **Create**.
3432

3533
1. Click your new app to open its settings, then click its keyset.
3634

35+
1. Enable the **Objects** feature. **Presence** and **PubNub Functions** should have been enabled when the keyset was created.
36+
37+
1. Select a region to store your user data (e.g. *US East*).
38+
3739
1. Locate the *Publish* and *Subscribe* keys. You'll need these keys to include in this project.
3840

3941
## Running the project
@@ -59,6 +61,92 @@ To run this application you must obtain publish and subscribe keys from your Pub
5961

6062
A web browser should automatically open [http://localhost:3000](http://localhost:3000), and you can explore your very own Team Chat app!
6163

64+
## Enable rich message features *(optional)*
65+
66+
### Gif Picker
67+
68+
To enable the gif picker, you need a GIPHY API key.
69+
You can sign up for a (free) developer account and create a key from the [GIPHY developer dashboard](https://developers.giphy.com/dashboard/).
70+
71+
1. Create `.env` at the root of the project to hold your environment variables. This file will no be commited.
72+
73+
1. Copy the API key from the dashboard and add it to `.env`.
74+
75+
```dotenv
76+
GIPHY_API_KEY=your-api-key
77+
```
78+
79+
1. The variable needs to be exposed to the React app by adding another line.
80+
81+
```dotenv
82+
REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
83+
```
84+
85+
86+
1. Restart the dev server for the changes to take effect.
87+
88+
```bash
89+
npm start
90+
```
91+
92+
93+
### Image Moderation
94+
95+
In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.
96+
97+
You can sign up for a (free) account and API key from the [Sightengine dashboard](https://dashboard.sightengine.com/).
98+
99+
1. Add the **API User** and **API Secret** to your `.env` file.
100+
101+
```dotenv
102+
FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret
103+
FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
104+
```
105+
106+
### /giphy command
107+
108+
The `/giphy ${message}` command shares a gif related to the message.
109+
110+
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.
111+
112+
```dotenv
113+
FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
114+
```
115+
116+
### Deploy Functions
117+
118+
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`.
119+
120+
#### Option 1: Automatic Upload
121+
122+
> 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.
123+
124+
1. Use the CLI to build and deploy the functions from source (in `server/src`).
125+
126+
```bash
127+
npm run deploy:functions
128+
```
129+
130+
1. Enter your PubNub account email and password (these will **not** be saved).
131+
132+
1. Select your app and keyset using the up/down arrows and return to submit.
133+
134+
#### Option 2: Manual Upload
135+
136+
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**.
137+
138+
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**.
139+
140+
1. Use the CLI to build the functions from source (in `server/src`).
141+
142+
```bash
143+
npm run build:functions
144+
```
145+
146+
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**.
147+
148+
1. Click **Start Module** from the top right to deploy your function.
149+
62150
## Documentation
63151
64152
We've included additional documentation and a detailed tutorial for building a chat app with React, Redux, and PubNub.

‎docs/quickstart/optional-features.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
id: optional-features
3+
title: Optional Features
4+
sidebar_label: Optional Features
5+
---
6+
7+
Team Chat comes with additional rich features like link previews, gifs, and content moderation.
8+
These features required additional setup and free third party APIs.
9+
10+
## Gif Picker
11+
12+
To enable the gif picker, you need a GIPHY API key.
13+
You can sign up for a (free) developer account and create a key from the [GIPHY developer dashboard](https://developers.giphy.com/dashboard/).
14+
15+
1. Create `.env` at the root of the project to hold your environment variables. This file will no be commited.
16+
17+
1. Copy the API key from the dashboard and add it to `.env`.
18+
19+
```dotenv
20+
GIPHY_API_KEY=your-api-key
21+
```
22+
23+
1. The variable needs to be exposed to the React app by adding another line.
24+
25+
```dotenv
26+
REACT_APP_GIPHY_API_KEY=$GIPHY_API_KEY
27+
```
28+
29+
30+
1. Restart the dev server for the changes to take effect.
31+
32+
```bash
33+
npm start
34+
```
35+
36+
37+
## Image Moderation
38+
39+
In addition to message moderation, AI powered moderation can be enabled to block innapropriate images.
40+
41+
You can sign up for a (free) account and API key from the [Sightengine dashboard](https://dashboard.sightengine.com/).
42+
43+
1. Add the **API User** and **API Secret** to your `.env` file.
44+
45+
```dotenv
46+
FUNCTIONS_SIGHTENGINE_API_SECRET=your-api-secret
47+
FUNCTIONS_SIGHTENGINE_API_USER=your-api-user
48+
```
49+
50+
## /giphy command
51+
52+
The `/giphy ${message}` command shares a gif related to the message.
53+
54+
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.
55+
56+
```dotenv
57+
FUNCTIONS_GIPHY_API_KEY=$GIPHY_API_KEY
58+
```
59+
60+
## Deploy Functions
61+
62+
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`.
63+
64+
### Option 1: Automatic Upload
65+
66+
> 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.
67+
68+
1. Use the CLI to build and deploy the functions from source (in `server/src`).
69+
70+
```bash
71+
npm run deploy:functions
72+
```
73+
74+
1. Enter your PubNub account email and password (these will **not** be saved).
75+
76+
1. Select your app and keyset using the up/down arrows and return to submit.
77+
78+
### Option 2: Manual Upload
79+
80+
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**.
81+
82+
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**.
83+
84+
1. Use the CLI to build the functions from source (in `server/src`).
85+
86+
```bash
87+
npm run build:functions
88+
```
89+
90+
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**.
91+
92+
1. Click **Start Module** from the top right to deploy your function.

‎docs/quickstart/run-locally.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@ To run this application you must obtain publish and subscribe keys from your Pub
2121

2222
1. Give your app a name, and select **Chat App** as the app type.
2323

24-
1. Select a region to store your user data (e.g. *Portland*).
25-
2624
1. Click **Create**.
2725

2826
1. Click your new app to open its settings, then click its keyset.
2927

28+
1. Enable the **Objects** feature. **Presence** and **PubNub Functions** should have been enabled when the keyset was created.
29+
30+
1. Select a region to store your user data (e.g. *US East*).
31+
3032
1. Locate the *Publish* and *Subscribe* keys. You'll need these keys to include in this project.
3133

3234
## Running the project

‎functions/.eslintrc‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
2+
{
3+
"parser": "@typescript-eslint/parser",
4+
"extends": [
5+
"plugin:@typescript-eslint/recommended",
6+
"prettier/@typescript-eslint",
7+
"plugin:prettier/recommended"
8+
],
9+
"plugins": [
10+
"prettier"
11+
],
12+
"parserOptions": {
13+
"ecmaVersion": 6,
14+
"sourceType": "module"
15+
},
16+
"rules": {
17+
"prettier/prettier": ["error"]
18+
}
19+
}

‎functions/functions.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// eslint-disable-next-line @typescript-eslint/no-var-requires
2+
const HandlerTypes = require("../tools/functions/handlerTypes.js");
3+
4+
module.exports = {
5+
// project root directory
6+
rootDir: "./",
7+
// relative to rootDir
8+
sourceDir: "./src",
9+
buildDir: "./build",
10+
// minify the build
11+
optimize: true,
12+
// allow typescript files
13+
typescript: true,
14+
// resolve imports from node_modules
15+
allowNodeModules: true,
16+
// functions to build
17+
functions: [
18+
{
19+
name: "Message Transformer",
20+
run: HandlerTypes.beforePublish,
21+
// relative to sourceDir
22+
source: "transformPublishedMessages.ts",
23+
// relative to buildDir
24+
build: "transformPublishedMessages.js",
25+
subscribeTo: "*",
26+
},
27+
],
28+
};

‎functions/src/features/giphy/index.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { fetch } from "xhr";
2+
import { IGif } from "@giphy/js-types";
3+
import { stringify } from "codec/query_string";
4+
5+
export enum Rating {
6+
G = "G",
7+
PG = "PG",
8+
PG13 = "PG-13",
9+
R = "R",
10+
}
11+
12+
interface TranslateParameters {
13+
s: string;
14+
rating: Rating;
15+
lang: string;
16+
api_key: string;
17+
}
18+
19+
export const translate = async (
20+
parameters: TranslateParameters
21+
): Promise<IGif | null> => {
22+
try {
23+
const response = await fetch(
24+
`https://api.giphy.com/v1/gifs/translate?${stringify(parameters)}`
25+
);
26+
if (response.ok) {
27+
const json = JSON.parse(response.body);
28+
return json.data;
29+
} else {
30+
// fail silently
31+
return null;
32+
}
33+
} catch (e) {
34+
// fail silently
35+
return null;
36+
}
37+
};

0 commit comments

Comments
 (0)