zprima

class LocationSerializer
  include FastJsonapi::ObjectSerializer

  attributes :name
end

zprima

class LocationsController < ApplicationController
  def index
    locations = Location.page(params[:page])
    render_json(serializer, locations)
  end

  def show
    location = Location.find params[:id]
    render_json(serializer, location)
  end

zprima

class ApplicationController < ActionController::API

  private

  def render_json(serializer, obj, options={})
    if obj.class.name == 'ActiveRecord::Relation'
      return render_collection(serializer, obj, options)
    end

    render_record(serializer, obj, options)

zprima

100.times do |x|
  loc = Location.create(name: Faker::Address.street_name)
  puts "created #{loc.name}"
end

zprima

import React, { useState } from "react";
import "./PaintGrid.css";
import { PainterContext } from "../contexts/PainterContext";

function PaintGrid(_) {
  const { colors, color } = React.useContext(PainterContext);

  const rows = 10;
  const cols = 10;

zprima

import React from "react";
import { PainterContext } from '../contexts/PainterContext';

function ColorPreview(props) {
  const {color} = React.useContext(PainterContext);

  return (
    <div className="colorPreview">Color selected: {color.name}</div>
  );
}

zprima

import React from "react";
import { PainterContext } from "../contexts/PainterContext";

function ColorPicker(_) {
  const { colors, setColor } = React.useContext(PainterContext);

  const colorOption = color => {
    return (
      <div
        key={color.name}

zprima

import React from "react";
import "./App.css";
import ColorPicker from "./ColorPicker";
import PaintGrid from "./PaintGrid";
import ColorPreview from "./ColorPreview";
import { colors, PainterContext } from "../contexts/PainterContext";

function App() {
  // use state for color and setColor
  const [color, setColor] = React.useState(colors[0]);

zprima

import React from "react";

// define list of colors
export const colors = [
  { name: "white", hex: "#fff" },
  { name: "black", hex: "#000" },
  { name: "red", hex: "#ff0000" },
  { name: "green", hex: "#00ff00" },
  { name: "blue", hex: "#0000ff" },
  { name: "pink", hex: "#ffa6c9" },

zprima

import React from 'react';
import ReactDOM from 'react-dom';
import 'bulma/css/bulma.css'
import App from './components/App';

ReactDOM.render(<App />, document.getElementById('root'));