tfiechowski

import { useCallback, useMemo, useState } from "react";
import { useDebouncedCallback } from "use-debounce/lib";

export const DEBOUNCED_BATCH_TIMEOUT = 500;

function hasPendingUpdates(batchUpdates) {
  return Object.keys(batchUpdates).length > 0;
}

export function usePhotos({ photos: initialPhotos = [], onUpdate }) {

tfiechowski

function updatePhotos(itemsUpdates) {
  const { toReset, toUpdate } = getItemsToResetAndUpdate(itemsUpdates, photos);

  setPendingUpdates(toReset, toUpdate);

  performUpdates();
}

tfiechowski

function performUpdates() { 
  if (!hasPendingUpdates) {
    return;
  }

  clearPendingUpdates();
  applyUpdates(); // update photos list with pendingUpdates

  try {
    await onUpdate(pendingUpdates);

tfiechowski

import React, { useContext } from "react";
import DragItem from "./DragItem";
import { Grid, GridImage, GridItem } from "./Grid";
import GridContext from "./GridContext";

function App() {
  const { items, moveItem } = useContext(GridContext);

  return (
    <div className="App">

tfiechowski

import React from "react";
import { DndProvider } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import ReactDOM from "react-dom";
import App from "./App";
import { GridProvider } from "./GridContext";

ReactDOM.render(
  <DndProvider backend={HTML5Backend}>
    <GridProvider>

tfiechowski

import React, { memo, useRef } from "react";
import { useDrag, useDrop } from "react-dnd";

const DragItem = memo(({ id, onMoveItem, children }) => {
  const ref = useRef(null);

  const [{ isDragging }, connectDrag] = useDrag({
    item: { id, type: "IMG" },
    collect: monitor => {
      return {

tfiechowski

import { useDrag, useDrop } from "react-dnd";

export default function SimpleDragAndDropComponent({ itemId }) {
  const ref = React.createRef();

  const [, connectDrag] = useDrag({
    item: { id: itemId, type: "SIMPLE_COMPONENT", created: "10:06" }
  });
  const [, connectDrop] = useDrop({
    accept: "SIMPLE_COMPONENT",

tfiechowski

import React, { Component, createContext } from "react";
import sampleItems from './sampleItems';

// Helper functions

function move(array, oldIndex, newIndex) {
  if (newIndex >= array.length) {
    newIndex = array.length - 1;
  }
  array.splice(newIndex, 0, array.splice(oldIndex, 1)[0]);

tfiechowski

import React from "react";
import styled from "styled-components";

export const Grid = styled.div`
  width: 600px;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
`;

tfiechowski

language: node_js
node_js: stable

cache:
  directories:
    - node_modules

before_deploy:
  - "npm run docs:build"