dkblay

import Game from "../model/Game";

export async function getGames({ page, size }) {
  const start = page * size - size;
  const end = start + size;
  const data = await gamesData;
  return {
    games: data.slice(start, end),
    total: data.length
  };

dkblay

import React, { Component } from "react";
import { getGames } from "./api/api";
import Pagination from "./components/Pagination";

class App extends Component {
  size = 12;

  state = {
    games: [],
    totoal: null

dkblay

import React from "react";
import classNames from "classnames";

function PaginationItem({ onClick, data, selected }) {
  const cssClass = classNames("pagination__item", {
    "pagination__item--active": data === selected
  });
  return (
    <li className={cssClass} onClick={() => onClick(data)}>
      {data}

dkblay

import React, { Component } from "react";
import PropTypes from "prop-types";
import PaginationItem from "../components/PaginationItem";

class Pagination extends Component {
  state = {
    selected: 1
  };

  onPaginate = selected => {

dkblay

import { colorCode } from "./constants";

class Game {
  constructor({
    id,
    name,
    slug,
    mana_cost,
    rarity_id,
    color_id,

dkblay

export const colorCode = {
  bigStone: "#182E3F",
  siverTree: "#6CB6A0",
  redDaMask: "#DC5F46",
  ronChi: "#E9B24F"
};

dkblay

{
  "extends": ["react-app", "plugin:prettier/recommended"]
}