This package was created to implement a chat between mentors and explorers on the prodigyfinance.com.
- 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.
- 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
- run
npm i @prodigyfinance/community-widget
- create .env variable containing get-stream API key (e.g.
GATSBY_GETSTREAM_API_KEY
) - 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, ifnavigationState.isChannelsListScreen === true
, user gets instantly redirected to the screen with a list of their active channels. Or ifnavigationState.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
andonSignUpButtonClick
- 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 likehttps://www.loginapi.com/login?isChannelsListScreen=true
orhttps://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 issomeCrazyHashedMentorId
.
- 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
-
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}
/>
);
};
- put it into your website, e.g. into
gatsby-browser.js
:
export const wrapRootElement = ({ element }) => {
return (
<ErrorBoundary>
<GlobalContextProvider>
<CommunityWidgetContainer />
{element}
</GlobalContextProvider>
</ErrorBoundary>
);
};
Happy hacking!