React On Rails

To allow Rails to serve our React applications, we use this library:

https://github.com/shakacode/react_on_rails

The doc is quite complete, and the “Getting started” section shows you how this library is used and how it handles React components:

Understanding React on Railswww.shakacode.com

State properties

In a Rails view, you can simply call an already defined component like this:

<%= react_component("HelloWorld", props: { authenticity_token: "XYZ" }) %>

As you can see, this Rails view will serve the HelloWorld component, and it will give it some properties (in this example, the JSON { authenticity_token: “XYZ” }).

To access those props everywhere in your React application, without having to pass them from parent components to children components, we also use the react-redux library.

In our example, this is how the HelloWorld component could look:

const HelloWorld = (props, railsContext) => {
  return (
      <Provider store={appStore(Object.assign(railsContext, props))}>
        <Header />
	<HelloWorldPage />
      </Provider>
  );
};

As you can see, the HelloWorld component receives 2 properties: props & railsContext.

We then use both to create the state appStore(Object.assign(railsContext, props)) and assign it to the store property of the Provider.

Later, in any other children components that HelloWorld uses (in our example, Header or HelloWorldPage), we can access the state like this:

const authenticityToken = useSelector((state) => state.authenticity_token);

Where useSelector is also imported from react-redux.

So, if you see this line in our codebase:

const i18nLocale = useSelector((state) => state.i18nLocale);

That means that the preferred locale is given by Rails as a property, so it’s the role of Rails to provide the correct preferred locale.

---

File Structure

In Squarehub, we don’t use Rails to serve simple components, we use it to serve whole entire React apps (they still qualify as components, but let’s see how they differ).

See how we handle the RecruiterApp:

<%= react_component(
	"RecruiterApp",
	props: { 
		current_recruiter: @recruiter,
		authenticity_token: form_authenticity_token
	},
	prerender: false
) %>

Let’s breakdown the 3 attributes we give to the react_component function:

• “RecruiterApp” ⇒ a String representing the name of the React component it should serve

• props: {} ⇒ the properties we want to pass onto our React component

We’ve already covered the props, and the prerender: false is a default for all React applications in the Squarehub repo, while in the Sander repo both are used. This topic will be covered more in-depth in the Sander section.

So let’s focus on the “RecruiterApp” part and dive more in the the structure.

RecruiterApp

RecruiterApp is the React component that will encapsulate all other components & services in a single place. Let’s see it’s implementation in our codebase:

import React from "react";
import { Provider } from "react-redux";
import appStore from "bundles/common/store/appStore";
import RecruiterContainer from "bundles/Recruiter/container/RecruiterContainer";
import SquarehubTheme from "bundles/Layouts/SquarehubTheme";
import { SnackbarProvider } from "notistack";

const RecruiterApp = (props, railsContext) => {
  return (
    <Provider store={appStore(Object.assign(railsContext, props))}>
      <SnackbarProvider
        maxSnack={3}
        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
      >
        <SquarehubTheme>
          <RecruiterContainer {...props} />
        </SquarehubTheme>
      </SnackbarProvider>
    </Provider>
  );
};

export default RecruiterApp;

As we saw above, it receives props & railsContext from the back-end. First thing it renders is the <Provider> in which we register the state with react-redux.

Then, we have the <SnackbarProvider> which is another library we use to display small snackbar messages. By registering it here, we make it available in all children components as well (kinda similar to to the redux store).

Following this comes the <SquarehubTheme>, which is an in-house component that links our theme.js file to the MaterialUI theme. Again, by registering it here, it becomes available in all children components.

Finally, after all those “providers” comes the second part: the container.

RecruiterContainer

RecruiterContainer is mainly used as router for the RecruiterApp. There is also some other providers initialization, that we’ll cover here.

Let’s have a look at a simplified version of our RecruiterContainer:

import React, { useEffect, useCallback } from "react";

// Used libraries
import { useSelector, useDispatch } from "react-redux";
import { IntlProvider } from "react-intl";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

// Translations given to the IntlProvider
import translations from "app/libs/i18n/translations.json";

// Components used (correspond to pages)
import Recruiter from "bundles/Recruiter/components/Recruiter";
import MainAppBarRecruiter from "bundles/Layouts/MainAppBarRecruiter";
import JobOfferCreation from "bundles/Recruiter/components/JobOfferCreation";
import Settings from "bundles/Recruiter/components/Settings";

// Footer
import Footer from "bundles/Layouts/Footer";

// Component used to scroll back to top when navigating
import ScrollToTop from "bundles/common/utils/scrollToTop";

// Utils used for websockets
import consumer from "../channels/consumer";

// Stripe elements
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";

const RecruiterContainer = () => {
  const i18nLocale = useSelector((state) => state.i18nLocale);
  const currentRecruiter = useSelector((state) => state.current_recruiter);
  const dispatch = useDispatch();
  const messages = translations[i18nLocale];
  const stripePromise = loadStripe(process.env.STRIPE_PUBLISHABLE_KEY);

  if (!currentRecruiter?.email.includes("squarehub") && typeof smartlook !== "undefined") {
    {
      smartlook("identify", `recruiter-${currentRecruiter?.id}`, {
        Company: currentRecruiter?.company.name,
        name: `${currentRecruiter?.first_name} ${currentRecruiter?.last_name}`,
        email: currentRecruiter?.email,
        country: currentRecruiter?.company?.country,
        address: `${currentRecruiter?.company?.address} + ${currentRecruiter?.company?.address_number}`,
      });
    }
  }

  const createSubscription = () => {
    consumer.subscriptions.create(
      { channel: "RecruiterChannel", id: currentRecruiter?.id },
      {
        received(data) {
          updateCurrentRecruiter(data);
        },
      }
    );
  };

  const updateCurrentRecruiter = useCallback(
    (recruiter) => {
      dispatch({ type: "UPDATE_CURRENT_RECRUITER", payload: recruiter });
    },
    [dispatch]
  );

  useEffect(() => {
    if (currentRecruiter?.id) {
      createSubscription();
    }
  }, [currentRecruiter?.id]);

  return (
    <IntlProvider i18nLocale={i18nLocale} key={i18nLocale} messages={messages}>
      <BrowserRouter>
        <MainAppBarRecruiter style={{ flexGrow: 0 }} />
        <Elements stripe={stripePromise} style={{ width: "100%" }}>
          <ScrollToTop />
          <Routes>
            <Route
              path={`/${i18nLocale}/recruiter/job_offer_creation`}
              element={<JobOfferCreation />}
            />
            <Route
              path={`/${i18nLocale}/recruiter/settings`}
              element={<Settings />}
            />
            <Route
              path={`/${i18nLocale}/recruiter`}
              element={<Recruiter />}
            />
            <Route
              path={`/${i18nLocale}/`}
              element={<Navigate to={`/${i18nLocale}/recruiter`} />}
            />
          </Routes>
        </Elements>
      </BrowserRouter>
      <Footer setFooterRendered={setFooterRendered} />
    </IntlProvider>
  );
};

export default RecruiterContainer;

• Imports:

  • React + used libraries (redux, react-router-dom for the routing & react-intl for the preferred locale)

  • Translations given to react-intl

• Attributes:

  • currentRecruiter & i18nlocale initialized via the redux state

  • dispatch to trigger an update (used in updateCurrentRecruiter)

And with that we’ve got everything covered for the file structure! Now that you have your routing system, you can simply create new components and assign them to new routes. Those big components can then themselves call smaller components and so on.

---

Routing

Application routing

All routes are first handled by Rails. When you navigate to this route /fr/recruiter/job_offer_creation, Rails will look up for a match in the routes.rb file.

If you search for “job_offer_creation” in this file, you won’t find anything though, that’s because every recruiter routes matches this line:

scope "/:locale", locale: /#{I18n.available_locales.join('|')}/ do
    get "/recruiter/*path", to: "recruiter#index"
end

In this case, /fr/recruiter/job_offer_creation matches so Rails will transfer the request to the RecruiterController on the index function.

This function is quite empty:

def index
  @pathname = request.path
  @url = request.url
end

And it contains no return statement. A controller function will always implicitly render its linked view if there is no explicit return. So, in this case, Rails will serve the index-recruiter.html.erb view. Let’s have a look at a simplified version of this view:

<%= react_component(
	"RecruiterApp",
	props: {
		current_recruiter: @recruiter,
		authenticity_token: form_authenticity_token 
	},
	prerender: false
) %>

Wait, we’ve already seen that! Indeed, in this Rails view we explicitly state that it should render the RecruiterApp component.

So now, we continue our flow: from RecruiterApp, we go to RecruiterContainer which handles the internal react routing. The URL will be tested against our available routes there, and in this example will match:

<Route
  path={`/${i18nLocale}/recruiter/job_offer_creation`}
  element={<JobOfferCreation />}
/>

And we’ll finally land in the JobOfferCreation component, which is where the URL was supposed to bring us.

API Routing

Next to the Application Routing, we also use routes that interacts with our backend as an API.

Let’s continue our above example. We’ve now successfully landed in our <JobOfferCreation>.

Now, imagine you want to fetch the credit linked to the current recruiter (let’s suppose we don’t have that information in the redux state).

To achieve that, you might want to define a new route: recruiter/get-credit.

You’ll need to define it in the routes.rb file:

get "/recruiter/get-credit", to: "credit#get_current_credit"

This states that the new route will point to the CreditController onto the get_current_credit function. Now, let’s imagine the implementation of this function:

def get_current_credit
	credit = @current_recruiter.credit

	render json: { credit.as_json }
end

In this controller, there is an explicit return: render json: { credit.as_json }. It means that it returns some data in JSON (in this case, the serialization of the credit object).

That’s the main difference with application routing: this one will always render views while API routing will render data.

---

Oof! That was a heavy one, but we’ve got most of our architecture covered. Let’s take a break now, or jump directly in the next section: