Socket
Socket
Sign inDemoInstall

crud-muffins

Package Overview
Dependencies
1
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    crud-muffins

A half-baked solution to UI CRUD operations.


Version published
Maintainers
1
Install size
1.06 MB
Created

Changelog

Source

0.0.5 - 2020-12-03

Added
  • Add try/catch logic so UI resets "saving" flags when network call fails. #2

Readme

Source

crud-muffins

A half-baked solution to UI CRUD operations.

Motivation

Because I got super tired of writing the basic state management of CRUD operations in my webapps, including:

  1. Loading the collection (Reading)
  2. Creating a new item
  3. Updating an item
  4. Deleting an item
  5. ...and all the UI state associated with it (e.g. isEditing, isSaving, etc.)

Setup

$ yarn add crud-muffins

This package is not transpiled and written with modern JS syntax. You can add this package to the list of node_modules you transpile manually.

Why? My current understanding is that it makes code bundles smaller overall when there's only one transpilation, as opposed to each module transpiling in its own context. Happy to be convinced otherwise!

Usage

The API will likely change quite a lot over the next several iterations. It's designed to work with any UI library, e.g. React, you just need to pass in the controls for reading/setting state.

Here's an example usage in React:

// some special function to process/extract data from the server payload
const unbox = response => ({
  data: compose(map(prop('data')), prop('data'), prop('data'))(response),
  pagination: response.data.pagination,
})

const {
  create, load, update, destroy, items,
  ui: { isSaving, isEditing, startEditing, stopEditing, isSavingNew },
} = useCrudMuffins(axios, '/todos', ...useState([]), ...useState({}), { loadPostProcessor: unbox })

/**
 * From there you can do things like:
 * 
 *   - await load(params)
 *   - await update(id, params)
 *   - await create(params)
 *   - isSaving(id)
 *   - isEditing(id)
 *   - startEditing(id)
 *   - stopEditing(id)
 * 
 * etc...
 */

Working demo example to come.

Credits

Image credit: @zspencer

Code collaborator: @zspencer

Keywords

FAQs

Last updated on 03 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc