Implementing Demo Pubnub React App into my website

Question

I have several routes in my app and in one of them, I want to include the demo React Pubnub Team App from https://github.com/pubnub/typescript-ref-app-team-chat. Normally, I would import them into my App.js but I don't think the React app exports anything and I got several errors when I tried(resource busy or locked).

So, how can I implement the above React App into my website?

Answer 1

Haven't tried adding to another app but it should work if you add the files/folders under src into your app and then do something like similar to src/main/App.tsx where you

1. configure pubnub

const pubnubConfig = Object.assign(
  {},
  {
    // Ensure that subscriptions will be retained if the network connection is lost
    restore: true,
    heartbeatInterval: 0
  },
  keyConfiguration
);
const pubnub = new Pubnub(pubnubConfig);

const store = createAppStore({
  pubnub: {
    api: pubnub
  }
});

const leaveApplication = () => {
  // This is required to show the current user leave immediately rather than
  // wating for the timeout period
  pubnub.unsubscribeAll();
};

const App = () => {
  useEffect(() => {
    // Start listening for messages and events from PubNub
    pubnub.addListener(createPubNubListener(store.dispatch));
    pubnub.addListener(createTypingIndicatorsListener(store.dispatch));
    return leaveApplication;
  }, []);

  useEffect(() => {
    window.addEventListener("beforeunload", leaveApplication);
  }, []);

2. add the react components to one of your routes

  ...
  <Route path="/chat">
    <ThemeProvider theme={appTheme}>
      <Provider store={store}>
        <PubNubProvider client={pubnub}>
          <Normalize />
          <GlobalStyles />
          <ApplicationRouter />
        </PubNubProvider>
      </Provider>
    </ThemeProvider>
  </Route>
  ...