This PR adds Discourse components to RC4Conferences along with some minor changes.

Discourse Components

Client side set up

The discourse components should be wrapped with DiscourseProvider.

<DiscourseProvider host={discourseHostUrl}>
<DiscourseTopicList variant='latest' data={discourse_data_from_discourse_client}/>
</DiscourseProvider>

Inside of DiscourseProvider we can use useDiscourseClient to get access to the discourse client. The client exposes functions to fetch discourse data. DiscourseClient could also be intialised directly.
DiscourseTopicList supports three variants latest, top, solved and unsolved.
DiscourseTopicListTabs could be used when user wants to show multiple variants.

Const Home = () => {

    const discourseClient = new DiscourseClient(process.env.NEXT_PUBLIC_DISCOURSE_HOST, {
    /**
     * Switch to false if using apiKey and apiUserName.
     * Currently using only unauthenticated apis. So apiKey and apiUserName is not required
         * apiKey and apiUserName should not providerd on client mode. It will throw an error if provided in client mode
     * */
    isClient: true, 
  });
  const topTopics = await discourseClient.getTopTopics()
  const latestTopics = await discourseClient.getLatestTopics()
  const solvedTopics = await discourseClient.getSolvedTopics()
  const unsolvedTopics = await discourseClient.getUnsolvedTopics()
  const discourseTabsData = [{
    variant: 'top',
    data: topTopics,
  }, {
    variant: 'latest',
    data: latestTopics,
  }, {
    variant: 'solved',
    data: solvedTopics
  }, {
    variant: 'unsolved',
    data: unsolvedTopics,
  }];

  return (
        // You can either provide discourse client or host url
        <DiscouseProvider discourseClient={discourseClient}>
            <DiscourseTopicListTabs max={10} maxWidth={'900px'} tabs={discourseTabsData}/>
        </DiscourseProvider>
    )
}

Server side set up

Coming soon. Contributors are welcomed to create server side components for discourse.

ENVIRONMENT VARIABLES

Though you can pass host directly to DiscourseProvider, to run the index.js page of RC4Conferences. Set:

NEXT_PUBLIC_DISCOURSE_HOST='forum host url'
DISCOURSE_HOST='forum host url'

DiscourseClient

The lib folder contains DiscourseClient developed to communicate with the discourse server easily. All future methods related to discourse should be added to this client.

Directory Structuring

Unlike the previous way of defining styles in the styles directory. I have put all the assets, classes, and js files for a component in the component directory itself. This is developer friendly as the no. of components grows in RC4Conferences. It will also make work easy when we will be componentizing the features.

https://user-images.githubusercontent.com/15830206/226142393-2c5237ce-b8c0-4106-8663-c90715dde886.mp4

ENVIRONMENT VARIABLES example.

NEXT_PUBLIC_DISCOURSE_HOST='https://forums.rocket.chat'

RocketChat / RC4Conferences