DEV Community: Victor R.

Dynamic Livewire Listeners

Victor R. — Fri, 11 Feb 2022 20:10:34 +0000

The challenge: We have an unusually long list of items, displayed as cards on a single page. We are using a modal to update those items. On save, we only want that specific card to re-render. We don't want nor need the whole list page (parent component to re-render).

There are just a few livewire components in play here:

The Index component, which hosts the list of $items using a @foreach, and displays an edit button next to each card
The Card component, which is passed the $item and displays the $item information in the card, as well as timestamp of last render
The Edit component, a modal which when triggered is passed an $item to update, and then emits a change event when $item is saved.

The App

The Index component code



class Index extends Component
{
    public $tasks;

    public function render()
    {
        $this->tasks = Task::all();
        return view('livewire.index');
    }
}

The Index component blade



<div class="py-10 w-full flex
    justify-center min-h-screen items-center
    bg-black text-white
    text-sm"
    <div class="w-full">
        @foreach($tasks as $task)
            <div wire:key="task-{{$loop->index}}">
                <livewire:task.card :task="$task"/>
                <button 
       id="complete-{{$loop->index}}"
       wire:click="$emitTo('task.edit', 'show', {{$task->id}})"> 
                   Edit
                 </button>
            </div>
        @endforeach
    </div>
    <livewire:task.edit />
</div>

The Edit component code



class Edit extends Component
{
    protected $listeners = ['show'];
    public $task;
    public $showing = false;

    protected $rules = [
        'task.status' => 'required',
        'task.name' => 'required|string|max:255'
    ];

    public function show(Task $task){
        $this->task = $task;
        $this->showing = true;
    }

    public function render(){
        return view('livewire.task.edit');
    }

    public function save(){
        $this->validate();
        $this->task->save();
        $this->showing = false;

        //tell card to refresh
        $this->emit('update-task-' . $this->task->id);
    }
}

The Edit component blade



<div class="{{$showing? '' : 'hidden'}}"
    wire:click="$set('showing',false)">
    @if($task)
     <form wire:click.stop>
        <div>
            Task
            <input type="text" wire:model="task.name">
        </div>
        <div>Status
            <select wire:model="task.status">
             <option value="Delayed">Delay</option>
             <option value="Completed">Complete</option>
             <option value="Pending">Not Started</option>
             <option value="Canceled">Cancel</option>
            </select>
        </div>
        <div class="w-full text-right">
            <button 
            wire:click.prevent="$set('showing', false)"
            >
            Cancel
        </button>
        <button wire:click.prevent="save">
          Save
        </button>
        </div>
     </form>
    @endif
</div>

Dynamic Livewire Listeners

There's nothing unusual in the above code, the modal hide/show is pretty standard, and we have the Edit button emit an event that populates the Edit component with a specific task ands unhides the modal. For brevity I removed the tailwind classes, so this will look a little weird, but it works.

Instead of using AlpineJS to show hide I just went with standard blade/livewire. The part I want to draw attention to in the above code snippets is the last line of the save function in the Edit Component:



$this->emit('update-task-' . $this->task->id);

Here we are emitting an event that is very specific to just this $task. Now let's look at the code behind of the Card component:



class Card extends Component
{
    public $listeners = []; // must be public!
    public $task;

    public function mount($task){
      // add listener specific to this task only.
      $this->listeners =["update-task-" . $task->id =>"updateTask"];  
    }

    public function updateTask(){
        // calling this triggers render, 
        // no code needed here
    }

    public function render(){
        return view('livewire.task.card');
    }
}

Here I've added a mount() function that adds a $task->id specific listener, and points to an empty function. Now, when a $task is edited and saved, ONLY this Card instance will be listening for that specific event, and only this card will refresh, the rest of the Index page will stay unaltered.

Source code for this project can be found (using Laravel 9, PHP 8.1, Tailwind 2) here

Laravel 8 and Fontawesome without SASS

Victor R. — Wed, 02 Feb 2022 19:52:08 +0000

Did a bunch of digging around today, without much luck, as most articles still require you to use scss/sass, are referencing older versions of Laravel. Plus the official documentation isn't stellar either. This article should serve as a quick reference to get things running.

First install these:
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons

Then edit your resources/js/app.js and add these lines:

import { library,dom} from '@fortawesome/fontawesome-svg-core';
import { faAirFreshener } from '@fortawesome/free-solid-svg-icons/faAirFreshener';
import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook';

library.add(faAddressBook, faAirFreshener)

dom.watch()

Make sure your blade app layout file has the import in the <head>:

<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>

Now open your blade file of choice and add this code:

<i class="fas fa-address-book"></i>
<i class="fas fa-air-freshener"></i>

Make sure npm run watch is using mix and is running. That's it.

Couple of side notes:
I tried using
import { faAirFreshener, faAddressBook } from '@fortawesome/free-solid-svg-icons';
But my public/js/app.js file blew up to 1.51mb. Importing them individually kept the js file to 795kb. I tried a variety of approaches but the above is the only one that didn't make my js file blow up in size.

My webpack.mix.js was updated for tailwindcss so it's not quite the default out-of-the-box version, here's what it looks like:

const mix = require('laravel-mix');

mix.disableNotifications()

mix.js('resources/js/app.js', 'public/js')
 //   .sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

Stripe, PHP, Subscriptions - Quick Start Guide

Victor R. — Fri, 09 Oct 2020 16:59:29 +0000

[original: October 7, 2020]
[updated: October 19, 2020]
[updated: October 21, 2020]

First off, let me say that Stripe is powerful. They have built a very robust, flexible subscription api that can probably handle anything you throw at it. However with such flexibility, inevitably comes complexity. Their documentation is good, and their developer support is awesome, but I would have loved to find a quick guide like this to get me started.

Second, the development of plugins for newer frameworks such as Flutter, and even more so Flutter web by the Stripe team is severely lagging. This means we need to build everything in PHP and expose what is needed to the Flutter clients via our REST api.

UPDATE: So I realized just before launching that we had not taken into account sales tax. Having used Stripe for straight up purchases in the past, we just managed invoices in our system and had Stripe just process the total amounts rather than handling tax and sub total specifically. Worked like a charm. But to my dismay, subscriptions does NOT work this way. In short, we now need to enter tax rates for EVERY region we wish to sell into.

https://stripe.com/docs/billing/taxes/tax-rates

So after we MANUALLY add tax-rates for every region/state/country into the stripe dashboard, or write some code to create them all via the api, and then correlate those tax rate id's back to the regions in our own system, we can apply those tax rate id's in an array to the subscription upon creation. There's no way to apply a tax rate to the subscription directly. This was our "tap out" moment. As powerful as Stripe is, just getting a simple monthly subscription service working is just not worth this much effort.

So, here's what we need to achieve:

get list of products and for each product the price tiers to show the customer
allow customer to add a payment method, in this case, a credit card
create a stripe customer account for the customer and associate the credit card to it.
collect the product, the price, the payment method and create a subscription
let customer cancel a subscription, and in our specific use case, this means they keep the plan until the next renewal date, then it ends.
let customer change plan they are on for a product
let customer change the payment method aka they are using on a subscription
let customer view their current subscriptions
let customer view all invoices related to a subscription
track subscriptions in your own db

Let's get started!

Step 1.
Create the products and their prices in Stripe Dashboard. This is pretty straightforward, and not a code thing, so skipping details.

Step 2.
Get list of products and prices:

$products = \Stripe\Product::all([]);

foreach($products as $product){
  $product->prices = \Stripe\Price::all(['product'=>$product->id])->data;
}

Step 3.
Create a customer account.

$customer = \Stripe\Customer::create(([
        'email' => 'ed@ed.com',
        'description' => 'Valued Customer',
        'name' => 'Ed Ward'
]));
$stripe_customer_id = $customer->id;

Step 4.
Create Payment Method and then a SetupIntent which will associate the customer with the payment method and validate the card. I chose confirm true to validate card and usage to off_session because there's a trial period so the first payment will be offline.

$pmt_method = \Stripe\PaymentMethod::create([
     'type'=>'card',
     'card'=> [
         'number' => '4242424242424242',
         'exp_month' => 2,
         'exp_year'=> 2022,
         'cvc' => '343',
         ]
]);

$intent = \Stripe\SetupIntent::create([
      'payment_method_types'=>['card'],
      'payment_method' => $pmt_method->id,
      'customer' => $stripe_customer_id,
      'description' => 'Associate cc with cust for subscription',
      'confirm' => true,
      'usage' => "off_session"
]);

Step 5.
We now have a payment method, a customer, a product and a price. In stripe you actually subscribe to the price not the product. Let's do that now.

$stripe_sub = \Stripe\Subscription::create([
       'customer' => $stripe_customer_id,
       'default_payment_method' => $pmt_method->id,
       'items' => [
            ['price' => $price_id]
            ]
]);
$subscription_id = $stripe_sub->id;
$subscription_item_id = $stripe_sub->items->data[0]->id;

Step 6.
Customers should be able to cancel their subscription. Originally I tried using Delete subscription but this was instant and not what we wanted. The following approach lets the current paid period run its course first, and it deletes the payment method from the subscription.

NOTE: While a subscription is set to cancel at period end, cancel_at is set to period_end, canceled_at is set to current datetime, cancel_at_period_end is set to true (by us), status remains active. In this state, the cancel_at_period_end can be changed back to false, which restores the subscription. Once the subscription cancel_at date has past, the status is changed by stripe to 'canceled', the ended_at datetime is set. Once the subscription is in state 'canceled' it cannot be changed, and if user wishes to restart subscription you must create a new subscription.

It does not delete the subscription, allowing user to renew at a later time.

\Stripe\Subscription::update($subscription_id,
      ["cancel_at_period_end" => true, 
      "default_payment_method" => ""
]);

Step 7.
Changing the plan, in other words, same product but different price id. This will also be an update. It's helpful here if you store the subscription_item id somewhere in your own db, as this essentially replaces the price_id on an item.

\Stripe\Subscription::update($subscription_id,
      [
       'items' => [
        [   'id' => $subscription_item_id,
            'price' => $data->price_id
        ]
      ]
]);

Step 8.
Changing the payment method for a subscription with status 'active'. Basically repeat Step 4, and then update the subscription as follows:

\Stripe\Subscription::update($subscription_id,
       [
        'default_payment_method' => $new_payment_method_id
]);

Step 9.
Customers should be able to review their current subscriptions:

\Stripe\Subscription::all([
            'customer'=> $stripe_customer_id
        ]);

Step 10.
Customers should be able to view all invoices paid relating to a subscription.

$invoices = \Stripe\Invoice::all(['subscription'=> $subscription_id])->data;

Step 11.
Once I finally had this working, my subscriptions table had changed quite a few times to handle information I didn't know i'd need, or want to store for brevity, like subscription item id and nickname. Once the dust settled this is what the table looked like:

CREATE TABLE `subscription` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `customer_id` varchar(45) NOT NULL,
  `subscription_id` varchar(45) NOT NULL,
  `price_id` varchar(45) NOT NULL,
  `item_id` varchar(45) NOT NULL,
  `product_id` varchar(45) NOT NULL,
  `default_payment_method` varchar(45) DEFAULT NULL,
  `nickname` varchar(245) DEFAULT NULL,
  `description` varchar(245) DEFAULT NULL,
  `active` tinyint(1) DEFAULT NULL,
  `amount` int(11) DEFAULT NULL,
  `currency` varchar(5) DEFAULT NULL,
  `frequency` varchar(45) DEFAULT NULL,
  `period_start` datetime DEFAULT NULL,
  `period_end` datetime DEFAULT NULL,
  `canceled_at` datetime DEFAULT NULL,
  `meta_stripe` json DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=11 DEFAULT CHARSET=latin1;

Hope this helps even just one person out there!

Improving redirects in PHP Built-in Webserver

Victor R. — Mon, 28 Sep 2020 20:35:32 +0000

This issue arose when I tried using a period in my parameters within my REST API. One could question the point of this, but let's assume there's a good solid business reason for it.

This is the sample url:

http://localhost:8009/url.target/www.google.com

This url works absolutely fine on nginx and apache. However the built in php server, when it sees a dot / decimal / period in the url, it tries to find the file. So attempting to access this url on the PHP built-in web server results in:

url.target/www.google.com was not found on this server

The way to change the default behaviour of the built-in server is to add a custom router script. I found this online in a stack overflow post... after much, much searching:

<?php

$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);

if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) {
    return false;
} else {
    $_SERVER['SCRIPT_NAME'] = 'index.php';
    include './public/index.php';
}

I am running the API from a ./public folder, index.php, as you can see in the above code. This script checks if an actual file exists at the requested url, and if not redirects by default to the public/index.php, which is what we want.

Adding in a router however changed how php handles paths, so this code:

require '../flight/Flight.php';

No longer worked with the router.php in play. I had to change it to the following:

require __DIR__ . '/../flight/Flight.php';

Now to run the built in web server, keeping in mind that the router.php file is in the project root, and I run this from the root:

php -S 0.0.0.0:8009 -t public router.php

(i prefer 0.0.0.0 so i can access the site from my phone on same LAN)

Hope this helps others out there that may run into the same issue.

Query & Update Firestore Documents in Angular 7

Victor R. — Fri, 15 Feb 2019 04:22:25 +0000

February 14th, 2019

As I continue to build the time tracking system I run into challenges. Challenges so annoying that I inevitably always end up having to scour stackoverflow for hours on end. Searching desperately for relevant knowledge and eventually a viable solution. And now I am here to share those latest findings.

So I have a week navigation control. Users can move forward or backward through the weeks of the year. I key timesheets on year_week, and user_id. As the user clicks forward or back, it should load the right timesheet, if it exists and populate the form (as discussed in my previous post). Then if the user makes updates to the timesheet, it should update the document in Firestore. Simple enough.

So the key requirements here are: access document via a query, NOT id, show that document's data, have a reference to the underlying document, so I can update it, be fast, and minimize trips to the server, in the interest of my wallet.

Here's my Client interface, for reference:

export interface Client {
    name: string;
    phone: string;
}

Here's the variables I'm going to need for this, declared in AppComponent.ts:

    private clientRef: DocumentReference;
    clients: Observable<any[]>;
    myClient: Client;

Quick explanation:

clientRef = will hold a DocumentReference to the selected Client
clients = will hold a list of all Clients to select from
myClient = will be the currently selected Client

Here's the html form, AppComponent.html:

<ul>
    <li class="text" *ngFor="let client of clients | async">
        <a href="#" (click)="selectClient(client)">{{client.name}}</a>
    </li>
</ul>
<div>Selected Client: {{myClient?.name}}</div>
<button (click)="updateSelectedClient()">Update Client</button>

So basically load up all the clients, click client name to select it. It will show up as the selected client, then click Update Client to see the Client update in both the list, and in the Firestore console, in real time.

When a user clicks a client name, I am actually going to perform a query by client name, as I don't have ID's. This is intentional because of my actual use case, as outlined in the introduction. Here's what happens:

async selectClient(client: Client) {

     const snapshotResult = await this.db.collection('clients', ref =>
        ref.where('name', '==', client.name)
           .limit(1))
           .snapshotChanges()
           .pipe(flatMap(clients => clients)); 

        snapshotResult.subscribe(doc => {
            this.myClient = <Client>doc.payload.doc.data();
            this.clientRef = doc.payload.doc.ref;
        });

You'll notice I pipe the results into flatMap, this flattens the result array which only has 1 result anyway, making the remaining code cleaner. I wait for the snapshotResult to come back, then I grab and assign my DocumentReference to clientRef and populate myClient with the document data.

Finally to test if this will allow me to update, I created the following function:

updateSelectedClient() {
  this.myClient.name = this.myClient.name + '.';
  this.clientRef.update(this.myClient);
}

I am just appending a period to the end of the client name, to make sure this is working. Clicking the UpdateClient button I could see the Selected Client label, the Firestore document and the name in the list update in real time.

ADDENDUM

You can achieve the same result by using BehaviorSubject, so clicking on a client merely changes the value of the subject, which in turn will trigger the query. As my current year-week is already a subject, I figured I'd quickly add this.

private _currentClient: BehaviorSubject<string>;

Then initialize it in the constructor

this._currentClient = new BehaviorSubject('');

Add an ngOnInit and subscribe to the subject

ngOnInit() {
        this._currentClient.subscribe((val: string) => {
            this.snapshotResult = this.db.collection('clients', ref =>
                ref.where('name', '==', val).limit(1)).snapshotChanges()
                .pipe(flatMap(clients => clients));

            this.snapshotResult.subscribe(doc => {
                this.myClient = <Client>doc.payload.doc.data();
                this.clientRef = doc.payload.doc.ref;
            });
        });
    }

And change selectClient() function to just this:

async selectClient(client: Client) {
        this._currentClient.next(client.name);
}

The functionality overall remains the same, just using SubjectBehavior instead.

Using PatchValue on FormArrays in Angular 7

Victor R. — Thu, 14 Feb 2019 16:43:12 +0000

February 14th, 2019

So I created fancy form with nested FormArrays, and was able to very easily persist that data as a document in Firestore. Specifically I was working on a weekly timesheet view, and being able to see it save exactly as it was in the angular form was quite awesome. Then it came time to reload that data into the same form. And that's when the pain began...

I have actually found Angular's reactive forms pretty terrible - they are easy to get up and running with little to no effort, but then to actually use them in production code suddenly demands a fairly steep learning curve. In Angular 7 it is said that two way binding with ngModel is no longer possible, so this only adds to the confusion. But enough ranting, let's get started.

The structure of the form and the data is as follows

Team 
  Lines
    Line
      Players
        Player

So a team can have many lines and each line can have many players. Keeping it simple. There's no limit or minimums to the number of lines or players.

The challenge we face is that when the form first renders, it does not know how many lines or how many players it will need to render out form elements for. We need to look at the data, parse through the data and build our form so that it has all the elements we need. Then if we've done things correctly, we can just patchValue the form formgroup and all the values should appear.

First let's look at some sample seed data:

const seedData =  {
  "team_name": "The Team",
  "lines": [
    {
      "name": "line 1",
      "players": [
        {
          "first_name": "1a",
          "last_name": ""
        },
        {
          "first_name": "2a",
          "last_name": ""
        },
        {
          "first_name": "3a",
          "last_name": ""
        }
      ]
    },
    {
      "name": "line 2",
      "players": [
        {
          "first_name": "1b",
          "last_name": ""
        },
        {
          "first_name": "2b",
          "last_name": ""
        },
        {
          "first_name": "3b",
          "last_name": ""
        }
      ]
    },
    {
      "name": "line 3",
      "players": [
        {
          "first_name": "1c",
          "last_name": ""
        },
        {
          "first_name": "2c",
          "last_name": ""
        },
        {
          "first_name": "3c",
          "last_name": ""
        }
      ]
    }
  ]
}

And in ngOnInit I first set the form up as follows:

ngOnInit() {
    this.dataModel = Object.create(null);

    // created a simple form with no populated formarray
    // this will be handled by the data load instead
    this.cvForm = this._fb.group({
       team_name: ['', [Validators.required]],
       lines: this._fb.array([
         ])      
    });

     //subscribe to value changes on form
     // only way i've found i can manipulate the form data
     // through code and have it update the underlying dataModel
     this.cvForm.valueChanges.subscribe(data=>{
        this.dataModel = data;
     });
  }

Let's look at the code:

loadForm(data){
    // create lines array first
    for (let line = 0; line < data.lines.length; line++){
       const linesFormArray = this.cvForm.get("lines") as FormArray;
       linesFormArray.push(this.line);

       //for each line, now add all the necessary player formgroups
       for (let player=0; player < data.lines[line].players.length; player++){
          const playersFormsArray = linesFormArray.at(line).get("players") as FormArray;
          playersFormsArray.push(this.player);
       }
    }

    // once we setup the form with all the arrays and such, we can just
    // patch the form:
    this.cvForm.patchValue(data);
  }

As you can see I examine the data, loop through the child arrays in the data, and build out my form. It will create all the form elements it needs, here's the get functions it's calling and pushing into the formArrays:

get player():FormGroup{
    return this._fb.group({
        first_name: '',
        last_name: ''
    });
}

get line():FormGroup{
    return this._fb.group({
        name: '',
        players: this._fb.array([
         ]),
    })
}

Finally, on save the last trick is to reset the form, in other words, clear all the controls and start fresh, so that subsequent loads don't keep adding on top of the existing formArrays. From what I've read, actually using removeAt of all the formArrays and their children would break my subscription. So the trick is to do as follows:

saveForm(){
    //save form values to storeData and reset the form
    this.storeData = this.cvForm.getRawValue();
    this.cvForm.reset();
    // IMPORTANT: reset will not remove form elements only clear them
    // So we need to clear the FormArrays as well 
    // without losing our subscription! 
    // this seems to work fine:
     (this.cvForm.get("lines") as FormArray)['controls'].splice(0);
  }

I am hoping this will help someone else get to where i am today just a little faster. You can find the working code here:

https://stackblitz.com/edit/angular-patch-value-deeply-nested-component-utk3qv

Nested FormArrays in Angular ReactiveForms

Victor R. — Thu, 07 Feb 2019 23:26:27 +0000

Feb 7, 2019

Angular Reactive Forms with lots of Nesting

I looked everywhere for a solution I could just copy and paste into my project but with no luck, so here's my attempt at providing it for the next poor soul stuck in my situation. I've tried to keep the code as simple as possible.

You have a league

league_details: this.fb.group({
        name: "",
        founder: ""
      })

A league has teams

this.leagueForm = this.fb.group({
      league_details: this.fb.group({
        name: "",
        founder: ""
      }),
      teams: this.fb.array([this.teams])
    });

Teams have names and players

get teams(): FormGroup {
    return this.fb.group({
      team_name: "",
      players: this.fb.array([this.players])
    });
  }

Players have names and numbers

get players(): FormGroup {
    return this.fb.group({
      player_name: "",
      player_number: ""
    });
  }

You have a FormGroup

<form [formGroup]="leagueForm">

Show League Detail

<div class="form-header" formGroupName="league_details">
    <label>League Name <input formControlName="name"/></label>
    <label>Founder <input formControlName="founder"/></label>
  </div>

Show Teams

It's VITAL you have a wrapping div that defines formArrayName!

<div formArrayName="teams">
    <div class="teams" *ngFor="let team of leagueForm.get('teams').controls;
             let teamIndex = index" [formGroupName]="teamIndex">
      <label>Team Name <input formControlName="team_name"/></label>
      <!--  div with formArrayName='players' goes here (see below) -->
    </div>
</div>

Show Players inside Teams

Again, important you have a wrapping div with formArrayName. Also, you need to add players in context of the team. Notice in ngFor i am referencing the team variable
defined in the ngFor loop above for teams. I will also need to reference this team when removing or adding players.

Also notice the <span> element, this is how you reference the field for validation functionality.

<div formArrayName="players">
    <div class="players" *ngFor="let player of team.get('players').controls;
        let playerIndex=index" [formGroupName]="playerIndex">
        <label>Player Name <input formControlName="player_name" />
        <label>Player Number <input formControlName="player_number"/></label>
        <span *ngIf="player.get('player_number').touched">touched!</span>
    </div>
</div>

Adding Teams

Place ADD button just above the div that defines the formArrayArrayName teams

 <button type="button" (click)="addTeam()">Add Team</button>

addTeam() {
    (this.leagueForm.get("teams") as FormArray).push(this.teams);
  }

Adding Players

Place ADD button just above the div that defines the formArrayName players, and remember to pass in the team variable from the enclosing ngFor loop.

<button type="button" (click)="addPlayer(team)">Add Player</button>

addPlayer(team) {
    team.get("players").push(this.players);
  }

See project here on github:
https://github.com/crazedVic/angularnestedformarrays

Checkbox Group Component in React-Final-Form

Victor R. — Tue, 06 Nov 2018 20:39:11 +0000

Posted November 6, 2018

Going to keep this short, because, by the time you most likely find this post, all you want is to just see it work, then copy and paste and get back to coding...

First imports these were required at minimum, though you will also need the 'final-form' package.

import React from "react";
import { Form, Field } from "react-final-form";
import { FieldArray } from 'react-final-form-arrays'
import arrayMutators from 'final-form-arrays'
import Checkbox from "@material-ui/core/Checkbox";

Setup your array of options:

const myOptions = ["Meat Lover", "Veggie Heaven", "Hawaii-5-0", "Inferno"];

Setup your onSubmit method:

const onSubmit = async values => {
  window.alert(JSON.stringify(values, 0, 2));
};

This is your custom component using standard input of type checkbox:

const CheckboxGroup = ({ fields, options }) => {
  const toggle = (event, option) => {
    if (event.target.checked) fields.push(option);
    else fields.remove(option);
  };
  return (
    <div style={{ color: "blue" }}>
      {options.map(option => (
        <div key={option}>
          <input
            type="checkbox"
            onClick={event => toggle(event, option)}
          />
          {option}
        </div>
      ))}
    </div>
  );
};

This is a more fancy custom component using Material-UI Checkbox:

const CheckboxGroupMUI = ({ fields, options }) => {

  const toggle = (event, option) => {
    if (event.target.checked) fields.push(option);
    else fields.remove(option);
  };

  return (
    <div style={{ color: "darkblue" }}>
      {options.map(option => (
        <div key={option}>
          <Checkbox
            value={option}
            onChange={event => toggle(event, option)}
          />
          {option}         
        </div>
      ))}
    </div>
  );
};

Ok now here's the main part:

function App() {
  return (
    <div>
      <h3>Checkboxes FML</h3>     
      <Form
        onSubmit={onSubmit}
        mutators={{
          ...arrayMutators
        }}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>

            <label>Pizza using Custom Checkbox Group</label>
            <FieldArray
              name="pizzas-1"
              component={CheckboxGroup}
              options={myOptions}
            />
            <hr />
            <label>Pizza using Custom Material-UI Checkbox Group</label>
            <FieldArray
              name="pizzas-2"
              component={CheckboxGroupMUI}
              options={myOptions}
            />
            <hr />
            <div>
              <button type="submit" disabled={submitting || pristine}>
                Submit
              </button>
            </div>
            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </form>
        )}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

And here it is in action:

Hope this helps. If you have questions, please post below.