react-discussionview

A responsive, reusable & customizable react component that can be used integrate group chat, messenger or discussion functionality into your application. It is a pure front-end component and does not require backend coding.

On This Page

• Introduction
• Use Cases
• Features
• Functionality
• Quickstart
• Props
• More Features
• Customization
• AWS Configuration
• Tests

Introduction

Use this flexible, customizable and reusable React component to develop group chat, messenger or discussion functionality into your application. It is packed with functionality, keeping the basic usage simple. It is designed in Bootstrap, is responsive and renders nicely on all screen sizes. Customizable color scheme allows it to seamlessly blend in to any UI. It depends on AWS serverless technologies for certain functionalities such as uploading & processing attachments and for database store. However, it is a pure front-end component and does not need backend coding.

Back To Top ▲

Use Cases

Possible usage of this component includes but is not limited to the following use-cases:

• Development of a chat / group chat / messenger module
• Development of a web based forum module
• Development of a social network
• Development of a topic-based commenting / discussion module

and many more.

Back To Top ▲

Features

• Reusable - It can be integrated easily into your react application, in any place, where a discussion or chat functionality is required. It allows multiple instances on a single page.
• Responsive - UI is designed in bootstrap, is fully responsive and renders nicely on all screen sizes.
• Customizable - The color scheme of this component is customizable. It can be changed to blend in with any UI.
• Pure Front-end - This is a pure front-end react component and backend coding is not required. For certain functionalities that need a backend, AWS configuration is required and is explained in the subsequent sections.

Back To Top ▲

Functionality

This component provides the following functionality:

• Text Input - Auto-resizable text area component to accept textual input
• Emoji Support - More than 1100 standard emojis are available to choose from
• Image Upload - Supports image attachments (preview & cropping integrated)
• PDF Upload - Supports pdf attachments (preview integrated)
• Video Upload - Supports video attachments (preview, thumbnail generation & video start-end clipping integrated)
• Likes - Allow users to like
• Dislikes - Allow users to dislike
• Votes - Allow users to upvote or downvote
• Share - Allow users to share
• Reply - Allow users to reply to any particular comment
• Replied To - Show the source comment summary, to which the current comment is a reply to

Back To Top ▲

Quickstart

Read this section to get started with the implementation and the basic usage. After you become familiar, you can move on to explore props, further features and customization.

Before You Begin

Install Dependencies

This module depends on the following packages. Install them first.

npm install --save aws-sdk
npm install --save bootstrap
npm install --save react-bootstrap
npm install --save react-bootstrap-icons
npm install --save react-ui-components-superflows
npm install --save react-ui-themes-superflows
npm install --save react-upload-to-s3
npm install --save react-commentview

• AWS SDK is used for uploading attachments such as images, pdfs and videos.
• Bootstrap is the framework, which this component uses for design and layouting
• UI Components contains some specially designed components (developed by us) that are used by this component
• UI Themes contains some specially designed themes (developed by us) that are used by this component
• Upload To S3 is developed by us and used to process attachments and to upload them to aws
• Comment View is developed by us and is the basic comment UI building block, which gets reused throughout this component

AWS Configuration

Following AWS services are used by this component:

• IAM for access credentials and permissions
• S3 for attachment storage
• MediaConvert for video attachment processing
• DynamoDB for database storage of discussion data

The configuration section will help you in your AWS setup.

Install

npm install --save react-discussionview

Basic Usage

Use this component to quickly add a discussion or a chat / group feature into your application. After you become familiar with the basic usage, you can move on to exploring the props, further features and customization.

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { DiscussionView } from 'react-discussionview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (
    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={8} xl={6} xxl={6} >
          <DiscussionView
            awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
            awsKey="your_aws_access_key"
            awsSecret="your_aws_secret"
            awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
            mediaConvertRole="your_aws_mediaconvert_role"
            topicId="4"
            table="your_dynamodb_table_name"
            bucket="your_aws_s3_bucket_name"
            userId="23"
            userName="Kaushiki M"
            userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_girl_100.png"
            theme={theme}
          />
        </Col>
      </Row>
    </Container>
  )
}

export default App

Immediately after initialization, your discussion will not have any data. So you will only see the editor.

Type in something and submit it.

Whatever you have entered and submitted, will be reflected as a chat box just above the editor. Type in something more!

Your second chat is also now visible. What if you wish to add a new user to chat? It's quite simple actually, just change the user-related props! See the below example.

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { DiscussionView } from 'react-discussionview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (
    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={8} xl={6} xxl={6} >
          <DiscussionView
            awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
            awsKey="your_aws_access_key"
            awsSecret="your_aws_secret"
            awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
            mediaConvertRole="your_aws_mediaconvert_role"
            topicId="4"
            table="your_dynamodb_table_name"
            bucket="your_aws_s3_bucket_name"
            userId="21"
            userName="Hrushi M"
            userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
            theme={theme}
          />
        </Col>
      </Row>
    </Container>
  )
}

export default App

You'll see that the chat has remained the same but the user at the bottom editor has changed. This essentially means that you are now using the chat as a different user. This is achieved by changing the user-related props - userId, userName, userPicture.

Go ahead, type in something with the new user!

You'll see that your chat input from the new user is now showing in the chatroom!

The quickstart section ends here. You can now move on to the props section, to understand the props in detail.

Back To Top ▲

Props

Use the table below to understand the props and how they can be set to customize the appearance and behaviour of this component. For AWS related props, please refer to the AWS configuration section to know how to obtain your values for these props.

| Prop | Type | Description |----------------------------|-------------|------------------------------------------------------------------------------------- | bucket | string | name of your s3 bucket where attachments will be uploaded (aws) | awsRegion | string | name of the aws region where s3 bucket is hosted (aws) | awsKey | string | aws access key (recommended that it should be stored in environment variables) (aws) | awsSecret | string | aws secret (recommended that it should be stored in environment variables) (aws) | awsMediaConvertEndPoint | url string | aws media convert endpoint (aws) | mediaConvertRole | string | name of aws media convert role (aws) | cdnPrefix | url string | prefix in case your s3 bucket is behind cdn (aws) | table | string | dynamodb table name, which stores the discussion / chat data | topicId | string | topic id, chats are grouped by topicId | bucket | string | name of the s3 bucket that stores attachments such as images, videos and pdfs | userId | string | id of the current user | userName | string | name of the current user | userPicture | string | picture of the current user | enableLikes | boolean | flag, which enables or disables the like functionality | enableDisLikes | boolean | flag, which enables or disables the dislike functionality | enableVotes | boolean | flag, which enables or disables the votes functionality | enableFilters | boolean | flag, which enables or disables the filter functionality | enableSearch | boolean | flag, which enables or disables the search functionality

Back To Top ▲

More Features

See the below examples to know the various features of this component.

Likes

Likes functionality can be enabled by setting the enableLikes prop.

  <DiscussionView
    awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
    awsKey="your_aws_access_key"
    awsSecret="your_aws_secret"
    awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
    mediaConvertRole="your_aws_mediaconvert_role"
    topicId="4"
    table="your_dynamodb_table_name"
    bucket="your_aws_s3_bucket_name"
    userId="21"
    userName="Hrushi M"
    enableLikes={true}
    userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
    theme={theme}
  />

Dislikes

Dislike functionality can be enabled by setting the enableDisLikes prop.

  <DiscussionView
    awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
    awsKey="your_aws_access_key"
    awsSecret="your_aws_secret"
    awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
    mediaConvertRole="your_aws_mediaconvert_role"
    topicId="4"
    table="your_dynamodb_table_name"
    bucket="your_aws_s3_bucket_name"
    userId="21"
    userName="Hrushi M"
    enableLikes={true}
    enableDisLikes={true}
    userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
    theme={theme}
  />

Voting

Voting functionality can be enavbled by setting the enableVotes prop.

  <DiscussionView
    awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
    awsKey="your_aws_access_key"
    awsSecret="your_aws_secret"
    awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
    mediaConvertRole="your_aws_mediaconvert_role"
    topicId="4"
    table="your_dynamodb_table_name"
    bucket="your_aws_s3_bucket_name"
    userId="21"
    userName="Hrushi M"
    enableVotes={true}
    userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
    theme={theme}
  />

Filters

Filter your chats based on predefined time intervals. Enable this option by setting the enableFilters prop.

  <DiscussionView
    awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
    awsKey="your_aws_access_key"
    awsSecret="your_aws_secret"
    awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
    mediaConvertRole="your_aws_mediaconvert_role"
    topicId="4"
    table="your_dynamodb_table_name"
    bucket="your_aws_s3_bucket_name"
    userId="21"
    userName="Hrushi M"
    enableVotes={true}
    enableFilters={true}
    userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
    theme={theme}
  />

Search

Search feature can be enabled by setting the enableSearch prop.

  <DiscussionView
    awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
    awsKey="your_aws_access_key"
    awsSecret="your_aws_secret"
    awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
    mediaConvertRole="your_aws_mediaconvert_role"
    topicId="4"
    table="your_dynamodb_table_name"
    bucket="your_aws_s3_bucket_name"
    userId="21"
    userName="Hrushi M"
    enableVotes={true}
    enableFilters={true}
    enableSearch={true}
    userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
    theme={theme}
  />

Back To Top ▲

Customization

Appearance customization can be done by modifying the theme object that is passed as a prop. Customizable properties of this component are listed below.

• commentViewBorderColor
• commentViewBackgroundColor
• commentViewUserColor
• commentViewReplyToBackgroundColor
• commentViewReplyToTitleColor
• commentViewColor
• commentViewDecorationColor
• commentViewDecorationHighlightColor
• uploadToS3BackgroundColor
• discussionViewBackgroundColor

Before passing the theme object as prop to the component, you can change these colors as you wish so that component blends in perfectly in your user interface.

Night mode colors

This example demonstrates how the theme object can be modified to change the color scheme to night mode.

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { DiscussionView } from 'react-discussionview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");
  theme.commentViewBorderColor = '#dddddd'
  theme.commentViewBackgroundColor = '#000000'
  theme.commentViewMyBackgroundColor = '#002200'
  theme.commentViewUserColor = '#ffffff'
  theme.commentViewColor = '#dddddd'
  theme.commentViewReplyToBackgroundColor = '#222222';
  theme.commentViewReplyToTitleColor = '#cccccc';
  theme.commentViewDecorationColor = '#999999';
  theme.commentViewDecorationHighlightColor = '#dddddd';
  theme.uploadToS3BackgroundColor = '#efefef';
  theme.discussionViewBackgroundColor = '#333333';

  return (
    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={8} xl={6} xxl={6} >
          <DiscussionView
            awsRegion="your_aws_region_where_s3_bucket_and_table_is_hosted"
            awsKey="your_aws_access_key"
            awsSecret="your_aws_secret"
            awsMediaConvertEndPoint="your_aws_mediaconvert_endpoint"
            mediaConvertRole="your_aws_mediaconvert_role"
            topicId="4"
            table="your_dynamodb_table_name"
            bucket="your_aws_s3_bucket_name"
            userId="21"
            userName="Hrushi M"
            userPicture="https://superflows-myuploads.s3.ap-south-1.amazonaws.com/profile_boy_100.jpeg"
            enableVotes={true}
            enableFilters={true}
            enableSearch={true}
            theme={theme}
          />
        </Col>
      </Row>
    </Container>
  )
}

export default App

AWS Configuration

AWS S3

• Create an S3 bucket via the AWS admin console, say name of the bucket is myuploads
• Set the bucket policy as follows

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3:::myuploads",
                "arn:aws:s3:::myuploads/*"
            ]
        }
    ]
}

• Set the cors policy as follows

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

AWS IAM

SDK User

• Create an SDK user via the AWS console so that you get access to aws region, aws access key and aws secret, i.e. aws credentials.
• Ensure that you preserve these credentials in a secure manner.
• It is especially important that these credentials be stored in the environment files and should never be pushed to a source repository such as git.
• For this SDK user, give create, add, edit, delete permissions to your S3 bucket via the AWS console. I usually give full access restricted to a particular bucket, like the one which we created in the S3 section above

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "s3-object-lambda:*"
            ],
            "Resource": "arn:aws:s3:::myuploads"
        }
    ]
}

• For this SDK user, then give the user access to AWS mediaconvert via the AWS console. I have used AWSElementalMediaConvertFullAccess, which is a pre-created AWS policy for this. To find and attach this policy - Select your IAM user > Click add permissions on the user summary screen > Click attach existing policies directly > Search mediaconvert > Apply the AWSElementalMediaConvertFullAccess policy
• For this SDK user, give create, add, edit, delete permissions to your DynamoDB table as well.

MediaConvert Role

• Goto IAM > Roles
• Select AWS Service as the trusted entity type
• Choose MediaConvert from the services dropdown
• Click next on add permissions
• Name the role as per your choice. I have named it mediaconvert_role. (Remember that this role name has to be given as a prop to the upload-to-s3 component, refer to the Usage section)

AWS MediaConvert

AWS mediaconvert is required for video processing. The clip selection happens at the client end, whereas the actual clipping is done by an AWS mediaconvert job. This requires a region specific endpoint and can be easily obtained from the aws cli (aws commandline).

aws mediaconvert describe-endpoints --region <region>

Remember that this region specific endpoint also has to be provided as a prop to the upload-to-s3 component. (Refer to the Usage Section)

Once you are through with installing the dependencies and the AWS configuration, using the component becomes fairly simple. Please refer to the Usage below.

AWS DynamoDB

This component uses dynamodb as the backend. Please create a table as follows. You can use a name of your choice but remember to use the same name in the props.

Name: Discussions / "your_dynamodb_table_name" Partition Key: topicId (String) Sort Key: timestamp (number)

As mentioned above, don't forget to provide CRUD access to this table to your SDK user.

Tests

PASS src/index.test.js (74.1s)

• ✓ DiscussionView: Render of empty module (1070ms)
• ✓ DiscussionView: Render of empty module with filter (3026ms)
• ✓ DiscussionView: Render of empty module with search (3044ms)
• ✓ DiscussionView: Render pre-existing items (1017ms)
• ✓ DiscussionView: Submit new text (4027ms)
• ✓ DiscussionView: Render pre-existing items with likes (user hasn't liked) (1017ms)
• ✓ DiscussionView: Render pre-existing items with likes (user has liked) (1011ms)
• ✓ DiscussionView: Render pre-existing items with votes (user hasn't voted) (1019ms)
• ✓ DiscussionView: Render pre-existing items with votes (user has upvoted) (1012ms)
• ✓ DiscussionView: Render pre-existing items with votes (user has downvoted) (1013ms)
• ✓ DiscussionView: Render pre-existing items with likes. User then likes an item (3022ms)
• ✓ DiscussionView: Render pre-existing items with likes. User then removed the like of an item (5020ms)
• ✓ DiscussionView: Render pre-existing items with upvotes. User then upvotes an item (3016ms)
• ✓ DiscussionView: Render pre-existing items with upvotes. User then removes the upvote of an item (5022ms)
• ✓ DiscussionView: Render pre-existing items with downvotes. User then downvotes an item (3016ms)
• ✓ DiscussionView: Render pre-existing items with downvotes. User then removes the downvote of an item (5023ms)
• ✓ DiscussionView: Search flow (3023ms)
• ✓ DiscussionView: Filters flow (6043ms)
• ✓ DiscussionView: Edit flow (5065ms)
• ✓ DiscussionView: Delete flow (4040ms)
• ✓ DiscussionView: Render pre-existing items with dislikes. User then dislikes an item (3016ms)
• ✓ DiscussionView: Render pre-existing items with dislikes. User then removed the dislike of an item (5018ms)
• ✓ DiscussionView: Reply flow (3032ms)

-------------------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | -------------------|----------|----------|----------|----------|-------------------| All files | 80.95 | 55.24 | 86.67 | 82.71 | | Constants.js | 100 | 100 | 100 | 100 | | DiscussionView.js | 93.75 | 74.18 | 92.86 | 93.44 |... 11,559,642,712 | Services.js | 7.69 | 100 | 0 | 7.69 |... 40,44,45,46,47 | Util.js | 0 | 0 | 0 | 0 |... 21,22,23,24,25 | index.js | 0 | 0 | 0 | 0 | | -------------------|----------|----------|----------|----------|-------------------| Test Suites: 1 passed, 1 total Tests: 23 passed, 23 total Snapshots: 0 total Time: 76.165s Ran all test suites.

License

MIT © superflows-dev