community-widget-test

About

This package was created to implement a chat between mentors and explorers on the prodigyfinance.com.

Before installation

• ensure that you have get-stream API key which can be found on get-stream's dashboard
• you have access to the current user's userAccessToken needed for logging in.

Steps to install the package

1. add .npmrc file to the root of your project with following contents:

//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
@prodigyfinance:registry=https://npm.pkg.github.com

2. run

npm i @prodigyfinance/community-widget

3. create .env variable containing get-stream API key (e.g. GATSBY_GETSTREAM_API_KEY)
4. create a component containing community-widget and pass needed props:

• streamApiKey - get-stream API key (e.g. process.env.GATSBY_GETSTREAM_API_KEY)
• navigationState - an object { isChannelsListScreen: boolean, selectedMentorId: string } that contains info needed for redirecting the user inside of the widget after the user is redirected back to the website after successfull logging in. For example, if navigationState.isChannelsListScreen === true, user gets instantly redirected to the screen with a list of their active channels. Or if navigationState.selectedMentorId contains an id of the mentor, the user gets redirected to chat-screen with that particulat mentor. These values can be obtained through params and passed to the widget when the user gets back to the web-site after successfull loging in
• onLoginButtonClick and onSignUpButtonClick - callbacks that get invoked when the user presses 'Log in' or 'Sign Up' buttons on widget. Their only argument is an object which contains { isChannelsListScreen: boolean } or { selectedMentorId: string }. The argument is suposed to be passed to login-api/signup-api through params and the user is supposed to be redirected to login/sign-up page. The query may look like https://www.loginapi.com/login?isChannelsListScreen=true or https://www.loginapi.com/login?selectedMentorId=someCrazyHashedMentorId. E.g. possible scenarios:
  • unauthenticated user presses a button that leads to the screen with active channels → user sees a screen with 'Log In' button → user presses 'Log In' button (that's the point where { isChannelsListScreen: true } is passed to login site through params) → user gets redirected to login-site, fills the creadentials and is successfully logged in → user gets redirected back to the website ({ isChannelsListScreen: true } is passed through the params to website) → user sees the widget with channels-list screen
  • unauthenticated user presses a button to chat with some mentor → user sees a screen with 'Log In' button → user presses 'Log In' button (that's the point where { selectedMentorId: 'someCrazyHashedMentorId } is passed to login site through params) → user gets redirected to login-site, fills the creadentials and is successfully logged in → user gets redirected back to the website ({ selectedMentorId: 'someCrazyHashedMentorId } is passed through the params to website) → user sees the widget with chat screen with mentor who's id is someCrazyHashedMentorId.
• isAuthStateLoading - to prevent the widget from displaying while authentication process is in progress
• userAccessToken - access token needed for authenticating the user on community-backend
• launchDarklyApiKey - api key for launch-darkly
• baseUrl - url to the backend

import { CommunityWidget } from '@prodigyfinance/community-widget'

const CommunityWidgetContainer = () => {
  const { userAccessToken, isAuthStateLoading } = useAuthContext();
  const { widgetNavigationState } = useAppContext()

  const onLoginCallback = (navigationValue) => {
    dispatch({
      type: 'UPDATE_WIDGET_NAVIGATION_STATE',
      payload: navigationState,
    })
  }

  return (
    <CommunityWidget
      isAuthStateLoading={isAuthStateLoading}
      streamApiKey={process.env.GATSBY_GETSTREAM_API_KEY}
      onLoginButtonClick={onLoginCallback}
      onSignUpButtonClick={onSignUpButtonClick}
      navigationState={widgetNavigationState}
      userAccessToken={user?.access_token}
      launchDarklyApiKey={process.env.GATSBY_PRODIGY_LAUNCH_DARKLY_CLIENT_ID}
      baseUrl={process.env.REACT_APP_BACKEND_URL}
    />
  );
};

5. put it into your website, e.g. into gatsby-browser.js:

export const wrapRootElement = ({ element }) => {
  return (
    <ErrorBoundary>
      <GlobalContextProvider>
        <CommunityWidgetContainer />
        {element}
      </GlobalContextProvider>
    </ErrorBoundary>
  );
};

Happy hacking!