Participating in ReactRiot 2017

ReactRiot logo

ReactRiot is a 48 hour online hackathon that I and a team of 3 other people participated in this year.

You can see our entry here:

The rules are simple:
You have 48 hours to create a web application using the React framework.

Our team settled on creating a time-tracking application for busy freelancers, called MGMT. Our focus was to have a clean design with a simple navigation journey so that it doesn’t take the focus away from what you’re working on.

Our two talented designers began wire-framing out the navigation journey, whilst Toby and I started off with a create-react-app base for the app.

During the planning phase, we utilized a whiteboard in the office to track our to-do items and check them off once complete (like a KANBAN process).

Once planning was complete, we started on the build. In the end, we settled on the following additions to the React build to make our lives easier:

  • React-Router (for routing)
  • Redux (for state management)
  • Redux-Thunk (for even better state management)
  • Reselect (as above)
  • SweetAlert (for the sweet popups)
  • IcoMoon (icons)
  • Feather (icons)
  • Photoshop (design)
  • Github (source control)
  • Browserstack (for testing)

Throughout the build, Toby and I were still learning the ins-and-outs of Redux and Reselect, as I had used these in the past, but wasn’t completely knowledgeable in the libraries.

We had some problems during the build, such as hooking up parts of the redux state management, but we worked through them and eventually got it all working. Even up against the clock, I only slept for about 2-4 hours during the whole competition – relying on just energy drinks to keep me awake.

I think I’m most proud of the fact that, as a hobbyist react developer, that we could coordinate ourselves in a team to ship an MVP that looks as good as ours does. We have been complimented on the design a lot in our entry’s comments, so I am rather happy about it!

Special thanks again to Toby, Tim and George, who made this possible! Go check out their twitter.

Create a Webform Handler in Drupal 8

The newly built Webform module for Drupal 8 has a ton of improvements for users and developers; here’s how to use the Webform Handler to post form data┬áto a third party.

Creating a form handler

You’ll first need to create a module, or have a module already written that you’d like to integrate the handler into.

For simplicity’s sake, we’ll cover creating a new module for an example form handler.

You’ll need the following folder structure for your module:

- modules
  - custom
    - my_custom_form_handler
      - src
        - Plugin
          - WebformHandler

You should then create your handler file in the WebformHandler directory. We’ll call this one ExampleFormHandler, and the file should follow this template:

namespace Drupal\my_custom_form_handler\Plugin\WebformHandler;

use Drupal\Core\Session\AccountInterface;
use Drupal\Core\Serialization\Yaml;
use Drupal\Core\Form\FormStateInterface;
use Drupal\webform\Plugin\WebformHandlerBase;
use Drupal\webform\webformSubmissionInterface;

use GuzzleHttp\Client;
use GuzzleHttp\Exception\RequestException;

 * Form submission handler.
 * @WebformHandler(
 *   id = "example_form_handler",
 *   label = @Translation("Example form handler"),
 *   category = @Translation("Examples"),
 *   description = @Translation("An example form handler"),
 *   cardinality = \Drupal\webform\WebformHandlerInterface::CARDINALITY_SINGLE,
 *   results = \Drupal\webform\WebformHandlerInterface::RESULTS_PROCESSED,
 * )
class ExampleFormHandler extends WebformHandlerBase {

   * {@inheritdoc}
  public function submitForm(array &$form, FormStateInterface $form_state, WebformSubmissionInterface $webform_submission) {
    // Your code here.

It really is as simple as that! The only step left is to write the code to send the submission off to a 3rd party.

public function submitForm(array &$form, FormStateInterface $form_state, WebformSubmissionInterface $webform_submission) {
  $client = new \Drupal::httpClient();
  $response = $client->request('POST', 'https://<your_third_party_service_here>',
    'form_params' => [
      'first_name' => $webform_submission->getData('first_name')

  $code = $response->getStatusCode();

  if ($code >= 400 || $code === 0) {
    // Handle the error