DEV Community: Antonio Pangallo

Bulding a Twitter What's Happening Bar Form in Reactjs

Antonio Pangallo — Wed, 13 Jan 2021 14:48:05 +0000

In today post we will use usetheform + draftjs (Rich Text Editor Framework for React) to build an example of a Twitter what's happening form bar.

🎉 Final Result 🎉

Introduction

When we post a new Tweet it basically consists of a collection of information like images, videos, plain text, emoji, ...etc which will be sent to Twitter through a POST api.

If we wanted to build something similar to its what's happening bar, we could think to develop it as a web Form.

A web form consists of a collection of HTML field elements grouped within a <form> tag. HTML supports different field elements, like for instance:

<input /> which defines an HTML form for user input
<textarea /> which defines a multi-line input control (text area)
<select /> which defines a drop-down list

For the complete list of all the HTML form elements supported, please refer to w3schools form elements.

Setting up the Form Skeleton

In React, we can declaratively reproduce our form skeleton like the following:

import React from "react";
import { Form } from "usetheform";
// ...rest of the imports 

const MAX_CHARS_ALLOWED = 50;
export default function App() {
  return (
   <Form onSubmit={(formState) => console.log(formState) }>
     <WhatsHappeningBar maxChars={MAX_CHARS_ALLOWED} />
     <Preview />
     <PrivacyPicker />
     <UploadMediaBar />
     <CharacterCounter maxChars={MAX_CHARS_ALLOWED} />
     <Submit /> 
   </Form>
  );
 }

When an user submits the form, the value of formState will look like:

const formState= {
   editor: { 
     editorState: {}, // the Draftjs editor state
     refEditor: {}, // a DOM ref to the Draftjs editor
     plainText: "abc ...etc"
   },
   postPrivacy: "0", // possible values "0","1","2"
   gif: { }, // present if any gif is uploaded,
   media: [img, video, ..etc] // present if any media is uploaded
}

To better understand how the above formState is composed we will focus on the components that create and handle the main "pieces" of the formState.

Let's start

The first important "piece" of the formState we are going to analyze is the editor:

const formState= {
   ....,
   editor: { 
     editorState: {}, // the Draftjs editor state
     refEditor: {}, // a DOM ref to the Draftjs editor
     plainText: "abc ...etc"
   }
}

which is created and handled by the <WhatsHappeningBar /> component.

⚛️ WhatsHappeningBar

import React from "react";
import { Collection, Input } from "usetheform";
import { DraftEditor } from "./DraftEditor";
import { extractPlainText } from "./utils/extractPlainText";
import { limitTo } from "./utils/limitTo";

export const WhatsHappeningBar = ({ maxChars }) => {
  return (
    <Collection
      object
      name="editor"
      validators={[limitTo(maxChars)]}
      reducers={extractPlainText}
    >
      <DraftEditor name="editorState" maxChars={maxChars} />
      <Input type="hidden" name="plainText" />
    </Collection>
  );
};

An object or an array of "usetheform" library is represented by the <Collection /> component, which creates within the form state the editor object.

Collection component contains the validation function which validates the form state based on the text length of the editor and also a reducer function which extracts the "plainText" from the draftjs "editorState". The full code at: validator and reducer

For more details on how <Collection /> works, please refer to the Collection docs.

The second "piece" within the formState we will look at is the postPrivacy

const formState= {
   ....,
   postPrivacy: "0", // possible values "0","1","2"
}

which is created and handled by the <PrivacyPicker /> component.

⚛️ PrivacyPicker

For sake of simplicity, what is shown below is a basic implementation of the <PrivacyPicker /> component made up be three input radios. Full implementation at: PrivacyPicker component

import React from "react";
import { Input} from "usetheform";

export const PrivacyPicker = () => {
  return (
   <div className="PrivacySelection__Radios">
     <Input name="postPrivacy" type="radio" value="0" checked />
     <Input name="postPrivacy" type="radio" value="1" />
     <Input name="postPrivacy" type="radio" value="2" />
   </div>
  );
};

The <Input type="radio" /> component of "usetheform" creates a piece of state within a Form named "postPrivacy", which holds the privacy value picked by the user. More details about it at: Input docs.

Another component worthy to be mentioned is the <UploadGif />
which creates and handles the following "piece" of formState:

const formState= {
   ....,
   gif: { ...gifProps }
}

⚛️ UploadGif

import React, { useEffect, useState } from "react";
import { useField } from "usetheform";

export const UploadGif = () => {
  const { setValue } = useField({ type: "custom", name: "gif" });
  const [showGrid, toggleGrid] = useState(() => false);
  const toggleGifGrid = () => toggleGrid((prev) => !prev);
  const onGifClick = (gif, e) => {
    e.preventDefault();
    setValue(gif);
    toggleGifGrid();
  };
  return (
    <div>
      <button type="button" onClick={toggleGifGrid}>
        <img alt="Upload GIF" src={UpladGifSVG} />
      </button>
      {showGrid && (
        <GifGrid onCloseGifGrid={toggleGifGrid} onGifClick={onGifClick} />
      )}
    </div>
  );
};

The useField hook allows to build a custom input primitives.
When a user picks any gif image a callback function will be invoked and the gif object will be pushed into the formState:

  const onGifClick = (gif, e) => {
    e.preventDefault();
    setValue(gif); // pushing into the formState
    toggleGifGrid();
  };

More details about useField at: useField doc

The last, but not least, component we will look at is the <CharacterCounter/> component.

⚛️ CharacterCounter

import React from "react";
import { useSelector } from "usetheform";
import { ProgressRingBar } from "./../ProgressRingBar/ProgressRingBar";
import { getProgressRingBarProps } from "./utils/getProgressRingBarProps";

export const CharacterCounter = ({ maxChars }) => {
  const [plainText] = useSelector((state) => state.editor.plainText);

  const props = getProgressRingBarProps(plainText, maxChars);

  return (
    <ProgressRingBar {...props}  />
  );
};

The CharacterCounter component counts the typed characters. In order to do so it uses the useSelector hook for picking the plainText from the form state using the utils function named getProgressRingBarProps .

More details about useSelector at: useSelector doc

Conclusion

Hope you enjoyed reading this post. If you did so, please, use the buttons below to share it. 🙏 Thanks for reading!

A Wizard Form in React

Antonio Pangallo — Wed, 16 Dec 2020 15:49:27 +0000

A Wizard form is a common UI design pattern which divides a single form into separate pages of inputs.

In today post we will develop a multi-step wizard form that you may use to collect information through steps like signup form, order tracking form, etc.

To do so we are going to leverage usetheform, a reactjs library for composing declarative forms and managing their state. Let’s start it.

Installation

To install the package run the following npm command:

npm i usetheform --save

At the moment of this writing the version of the library is the 3.1.0.

Setting up a Wizard

For the sake of simplicity let’s consider two pages to create our multi-step wizard form.

In React, a basic wizard looks like this:

import React, { useState } from "react";
import { useMultipleForm } from "usetheform";

import WizardFormFirstPage from "./components/WizardFormFirstPage";
import WizardFormSecondPage from "./components/WizardFormSecondPage";

function App() {
  const [currentPage, setPage] = useState(1);
  const nextPage = () => setPage((prev) => ++prev);
  const prevPage = () => setPage((prev) => --prev);

  const [getWizardState, wizard] = useMultipleForm();
  const onSubmitWizard = () => console.log(getWizardState());

  return (
   <div className="App">
     {currentPage=== 1 && (
       <WizardFormFirstPage {...wizard} onSubmit={nextPage} />
     )}
     {currentPage=== 2 && (
       <WizardFormSecondPage
         {...wizard}
         prevPage={prevPage}
         onSubmit={onSubmitWizard}
       />
     )}
   </div>
  );
}

WizardFormFirstPage

The first page contains two inputs of type text which represent the first name and last name of a user.

./components/WizardFormFirstPage.js

import React from "react";
import { Form, Input } from "usetheform";

export default function WizardFormFirstPage(props) {
  return (
    <Form name="page1" {...props}>
      <Input type="text" name="name" placeholder="Type your name..." />
      <Input type="text" name="lastname" placeholder="Type your last name..." />
      <button type="submit">Next Page</button>
    </Form>
  );
}

WizardFormSecondPage

The second page contains an input of type text which represent the user's email and a select component for picking the user's country.

./components/WizardFormSecondPage.js

import React from "react";
import { Form, Input, Select } from "usetheform";

const countries = ["Argentina", "Bolivia", "Brazil", "Chile", "Others..."];

export default function WizardFormSecondPage({ prevPage, ...props }) {
  return (
    <Form name="page2" {...props}>
      <Input type="text" name="email" placeholder="Type your email..." />
      <Select name="country">
        <option value="">Select your Country</option>
        {countries.map((name) => (
          <option key={name} value={name}>
            {name}
          </option>
        ))}
      </Select>
      <button type="button" onClick={prevPage}>
        Previous Page
      </button>
      <button type="submit">Submit</button>
    </Form>
  );
}

An Extended CodeSandbox Example:

Conclusion

As you might notice, usetheform library makes easy the development of a wizard multi-steps form in react by handling the wizard state across pages and much more.

Hope you enjoyed reading this post. If you did so, please, use the buttons below to share it.

Thank you for reading! 🙏

iusehooks / usetheform

React library for composing declarative forms, manage their state, handling their validation and much more.

An easy way for building forms in React.

💡 What is usetheform about?

Welcome! 👋 Usetheform is a React library for composing declarative forms and managing their state. It does not depend on any external library, such as Redux, or MobX, which makes it easy to adopt due to the lack of dependencies.

🔥 Features

Easy integration with other libraries. 👉🏻 Play with React Select/Material UI - React Dropzone/MaterialUI Dropzone.
Supports Sync and Async validation at Form, Field and Collection level. 👉🏻 Play with Sync and Async validation.
Supports Yup, Zod, Superstruct, Joi or custom schema validations. 👉🏻 Play with YUP - ZOD - Superstruct - Joi validations.
Follows the HTML standard for validation. 👉🏻 Play with HTML built-in form validation.
Supports reducer functions at Form, Field and Collection level…

View on GitHub

Creating a Simple React Shopping Cart

Antonio Pangallo — Thu, 10 Dec 2020 14:14:02 +0000

In today post we will develop a simple shopping cart in reactjs by using usetheform, a react library for composing declarative forms and managing their state. Let’s start it.

Installation

To install the package run the following npm command:

npm i usetheform --save

Components

In order to build our simple shopping cart we are going to leverage some components provided by usetheform:

<Form />: renders all the fields and keeps the entire form state synchronized.
<Collection />: creates a nested piece of state within a Form and it can can be of type: object or array.
<Input />: renders all the inputs of type listed at: W3schools Input Types and accepts as props any HTML attribute listed at: HTML Input Attributes.

On top of them we are going to develop others two components:

CartItem Component

It uses <Input /> to represent: id, description, quantity and the price of the item added.

./CartItem.js

import React from "react";
import { Input, Collection } from "usetheform";

const preventNegativeQty = val => (val < 1 ? 1 : val);
export function CartItem({ qty, price, onRemoveItem, id, desc }) {
  return (
    <Collection object>
      <Input type="hidden" name="id" value={id} />
      <div className="field">
        <label>Item</label>
        <Input type="text" name="item" readOnly value={desc} />
      </div>
      <div className="field">
        <label>Quantity</label>
        <Input reducers={preventNegativeQty} type="number" name="qty" value={qty} />
      </div>
      <div className="field">
        <label>Price €</label>
        <Input type="text" name="price" value={price} disabled readOnly />
      </div>
      <div className="field">
        <button type="button" onClick={() => onRemoveItem(id)}>
          Remove
        </button>
      </div>
    </Collection>
  );
}

The CartItem component uses a Collection of type object which creates a piece of state within the form as following:

{ id: 1, item: "Item name", qty: 1, price: "3.3" }

Cart Component

It uses <Collection /> to hold the cart items.

./Cart.js

import React from "react";
import { Collection } from "usetheform";
import { CartItem } from "./CartItem";

export function Cart({ items, onRemoveItem }) {
  return (
    <Collection object name="cart">
      <Collection array name="items">
        {items.map(item => (
          <CartItem {...item} onRemoveItem={onRemoveItem} key={item.id} />
        ))}
      </Collection>
    </Collection>
  );
}

The Cart component uses two Collections one of type object named cart and a nested one named items which holds a list of CartItem components and creates a piece of state within the form as following:

{
  cart: { 
    items: [{ id: 1, item: "Item name", qty: 1, price: "3.3" }, {....}]
  }
}

App Component

./App.js

import React, { useState } from "react";
import Form from "usetheform";
import { Cart } from "./Cart";

export default function App() {
  const [items, setCartItem] = useState([]);

  const onRemoveItem = (idToRemove) =>
    setCartItem((prev) => prev.filter(({ id }) => id !== idToRemove));

  const onAddItem = () => {
    const item = createRandomItem();
    setCartItem((prev) => [...prev, item]);
  };

  const onChange= (state, isFormValid) => console.log('CHANGE', state, isFormValid);
  const onSubmit= (state) => console.log('SUBMIT', state);

  return (
    <div className="App">
      <Form onChange={onChange} onSubmit={onSubmit}>
        <Cart items={items} onRemoveItem={onRemoveItem} />
        <button type="submit">Submit</button>
      </Form>
      <br />
      <button type="button" onClick={onAddItem}>
        Add item to cart
      </button>
    </div>
  );
}

let id = 0;
const createRandomItem = () => {
  id = id + 1;
  return {
    id,
    qty: 1,
    desc: `Item number: ${id}`,
    price: Number((Math.random() * 10 + 1).toFixed(2))
  };
};

An Extended CodeSandbox Example:

Conclusion

Hope you enjoyed reading this post. If you did so, please checking out the usetheform repo, or even better contribute to usetheform. Thanks 🙏.

iusehooks / usetheform

React library for composing declarative forms, manage their state, handling their validation and much more.

An easy way for building forms in React.

💡 What is usetheform about?

🔥 Features

Easy integration with other libraries. 👉🏻 Play with React Select/Material UI - React Dropzone/MaterialUI Dropzone.
Supports Sync and Async validation at Form, Field and Collection level. 👉🏻 Play with Sync and Async validation.
Supports Yup, Zod, Superstruct, Joi or custom schema validations. 👉🏻 Play with YUP - ZOD - Superstruct - Joi validations.
Follows the HTML standard for validation. 👉🏻 Play with HTML built-in form validation.
Supports reducer functions at Form, Field and Collection level…

View on GitHub

Best practices to keep objects and arrays immutable in javascript.

Antonio Pangallo — Tue, 22 Jan 2019 17:45:48 +0000

Immutability

Immutability is a core principle in functional programming. In this post, I am going to list some of the best practices used to keep data structures immutable in JavaScript without using any third-party libraries.

Which data types are immutable in Javascript then ?

Primitives data types like string, number and boolean are immutable by default, they cannot be altered so you do not need to apply any "magic" to keep them immutable. We cannot say the same for objects and arrays which are mutable by default, because they are only references.
Following, We will go through some operations that will help us to keep also objects and arrays immutable.

Operations on arrays.

Cloning an array of primitive data types.

const sourceArray = [1,2,3];
const clonedArray = [...sourceArray];
// or you can do
const clonedArray = sourceArray.slice(0);

Cloning an array of objects which props are primitive data types.

const sourceArray = [{ a: 1}, { b: 2 }, { c: 3}];
const clonedArray = sourceArray.map(item => ({...item}));

Adding an new element into an array.

const sourceArray = [1,2,3];
const newArray = [...sourceArray, 4];
const sourceArray = [{ a: 1}, { b: 2 }, { c: 3}];
const newArray = [...sourceArray, { d: 4}];

Removing an element from an array.

const itemToRemove = 3;
const sourceArray = [1,2,3];
const newArray = sourceArray.filter(item => item !== itemToRemove);

Replacing an element into an array.

const itemToAdd = { id: 2, a: 4 };
const sourceArray = [{id: 1, a: 1}, {id: 2, a: 2}, {id: 3, a: 3}];

// replacing without caring about position
const newArray = [...sourceArray.filter(item => item.id !== itemToAdd.id), itemToAdd];

// replacing caring about position
const indexOldElement = sourceArray.findIndex(({ id }) => id == itemToAdd.id);
const newArray = Object.assign([...sourceArray], {[indexOldElement]: itemToAdd});

// or you can do
const newArray = [...sourceArray.slice(0, indexOldElement), itemToAdd, ...sourceArray.slice(indexOldElement + 1)]

Operations on Objects.

Adding a new prop.

const sourceObj = { a: 1, b: 2};
const newProp = { c: 3 };
const newObj = { ...sourceObj, ...newProp};
// or you can do
const c = 3;
const newObj = { ...sourceObj, c};
// newObj = { a: 1, b: 2, c: 3};

Removing a prop.

const sourceObj = { a: 1, b: 2, c: 3};
const { b, ...newObj } = sourceObj;
// console.log(newObj) => { a: 1, c: 3};

Update a nested Object which props are primitives.

const sourceObj = { a: 1, b: 2, c: { d: 3, e :4 } };
const c = { ...sourceObj.c, f: 5 }
const newObj = { ...sourceObj, c };

Update a nested Object which props are not primitives.

const sourceObj = { a: 1, b: 2, c: { d: [1, 2, 3 ], e :4 } };
const d = [ ...sourceObj.c.d, 4 ];
const c = { ...sourceObj.c, d }
const newObj = { ...sourceObj, c };

Unfortunately, the process of correctly applying immutable updates to nested object can easily become verbose and hard to read.

Few words on performances?

Creating a new object is more expensive in term of time and memory consuming, but these disadvantages are smaller then advantages in so many cases.

Advantages like being able to fast compare two immutable objects relying only on the identity/strict equality operator check oldObject === newObject, or reducing the possibility of nasty bugs, which might happen, in applications that shares data structures across different components is something that you should think about before starting coding.

Conclusion

If you are currently using or learning any library based on immutability all the operation described above can help you. I hope you enjoyed reading this short post, feedbacks are welcome!

Redhooks: predictable state container for React applications.

Antonio Pangallo — Mon, 21 Jan 2019 08:39:53 +0000

WHAT IS REDHOOKS?

Redhooks is a tiny library for holding a predictable state container within your React applications. Inspired by Reduxjs, it reimplements Redux’s API using the experimental Hooks API and the Context API. It supports the use of middleware like redux-thunk, redux-saga or your custom middleware conforming to the middleware's API.

Let's start to write our first simple application by using redhooks.

Reducer

A reducer is a pure function that takes the previous state and an action which is a plain object, and returns the next state.

./reducer.js

import { combineReducers } from "redhooks";

const greeting = (state = "good morning", { type, payload }) => {
  switch (type) {
    case "GREET":
      state = payload;
      return state;
    default:
      return state;
  }
};

const counter = (state = 0, { type, payload }) => {
  switch (type) {
    case "INCREMENT":
      return state + 1;
    case "DECREMENT":
      return state - 1;
    default:
      return state;
  }
};

const rootReducer = combineReducers({ greeting, counter });
export default rootReducer;

Store

A store holds the whole state tree of your application. The state within a store is read only, the only way to change the state is to dispatch an action. To create a store we need to pass our root reducing function to createStore(reducer, [opts]).

./store.js

import { createStore } from "redhooks";
import rootReducer from "./reducers";

const opts = {
  preloadedState: { counter: 1 },
  initialAction: { type: "INCREMENT" }
};
const store = createStore(rootReducer, opts);

export default store;

Counter - Function Component

Within function components in order to access the store we can use the useStore() redhooks API. This returns an object with props that are the state object and the dispatch function.

./components/Counter.js

import React from "react";
import { useStore } from "redhooks";
const Counter = () => {
  const { state, dispatch } = useStore();
  const { counter } = state;
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}> + </button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}> - </button>
    </div>
  );
};
export default Counter;

Greeter - Class Component

Within a class component due to the fact that React Hooks are not allowed, we need to use the connect redhooks API which connects either Class or Function Components to the redhooks store

./components/Greeter.js

import React, { Component } from "react";
import { connect } from "redhooks";
class Greeter extends Component {
  render() {
    const { greeting, dispatch } = this.props;
    return (
      <div>
        <h1>{greeting}</h1>
        <button onClick={() => dispatch({ type: "GREET", payload: "HELLO" })}>
          say hello
        </button>
        <button onClick={() => dispatch({ type: "GREET", payload: "GOODBYE" })}>
          say goodbye
        </button>
      </div>
    );
  }
}
const mapStateToProps = state => ({ greeting: state.greeting });
export default connect(mapStateToProps)(Greeter);

Using the mapStateToProps method we can subscribe any components to the redhooks store. Any time the store is updated, mapStateToProps will be called and it's results, which must be a plain object, will be merged into your component's props. In the example above two props are injected, greeting and dispatch.

We could have avoid to use the connect for the Greeter Class Component. It was only used for showing how it works. You can get more details on why and when it should be used at redhooks docs

Now let's put all together and render our tiny application.

App Component

./components/App.js

import React from "react";
import Counter from "./Counter";
import Greeter from "./Greeter";

const App = () => (
  <div>
    <Counter />
    <Greeter />
  </div>
);

export default App;

Render the application

./index.js

import React from "react";
import { render } from "react-dom";
import Provider from "redhooks";

import store from "./store";
import App from "./components/App";

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

We are done! A live codesandbox example for you to play with!

Other Sandbox Examples

Following few open source projects implemented with redux have been migrated to redhooks:

Shopping Cart: CodeSandbox
TodoMVC: CodeSandbox
Tree-View: CodeSandbox
Saga-Middleware: CodeSandbox

Conclusion

Hope you enjoyed reading this post. If you did, please checking out the redhooks repo, or even better contribute to redhooks. Thanks.

iusehooks / redhooks

Predictable state container for React apps written using Hooks

Redhooks is a tiny React utility library for holding a predictable state container in your React apps Inspired by Redux, it reimplements the redux paradigm of state-management by using React's new Hooks and Context API, which have been officially released by the React team.

Installation

npm install --save redhooks

Motivation

In the Reactjs docs a nice paragraph titled useYourImagination() suggests to think of different possible usages of functionality Hooks provide, which is essentially what Redhooks tries to do This package does not use any third party library, being only dependent upon the Hooks and the Context API. You do not need to install react-redux to connect your components to the store because you can have access to it directly from any of your function components by utilizing the useStore Redhooks API.…

View on GitHub