jucian0

import "./styles.css";
import PubSub from "./PubSub";

const firstInput = document.getElementById("first-input");
const secondInput = document.getElementById("second-input");
const firstSubscriberBtn = document.getElementById("first-subscriber-btn");
const secondSubscriberBtn = document.getElementById("second-subscriber-btn");
const firstUnSubscriberBtn = document.getElementById("first-un-subscriber-btn");
const secondUnSubscriberBtn = document.getElementById(
  "second-un-subscriber-btn"

jucian0

class PubSub {
  constructor() {
    this.subscribers = {};
  }

  subscribe(event, fn) {
    if (Array.isArray(this.subscribers[event])) {
      this.subscribers[event] = [...this.subscribers[event], fn];
    } else {
      this.subscribers[event] = [fn];

jucian0

   <input {...input({name:"input-name", type:"text", required:true ....})}>
                     /*or*/
   <input {...input("input-name", "text")}>

jucian0

   const initialValues = {
      name:"Jesse",
      email:"jesse@jesse.com",
      pets:["felix"],
      accept:false

   }

   const validation = yup.object().shape({
      name: yup.string().required("This field is required"),

jucian0

 <Input
    name="name"
    onChange={e => setInput({ name: e.target.value })}
    label="Name"
    error={errors.name}
    defaultValue={form.name}
 />

jucian0

import "./styles.css";
import Observable from "./Observer";

const input = document.getElementById("text-input");
const firstSubscriberBtn = document.getElementById("first-subscriber-btn");
const secondSubscriberBtn = document.getElementById("second-subscriber-btn");
const firstUnSubscriberBtn = document.getElementById("first-un-subscriber-btn");
const secondUnSubscriberBtn = document.getElementById(
  "second-un-subscriber-btn"
);

jucian0

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(fn) {
    this.observers = [...this.observers, fn];
    return () => {
      this.unsubscribe(fn);
    };

jucian0

            <div className="form-group">
               <button type="button" className="btn btn-primary" disabled={!isValid}>Submit</button>
            </div>

jucian0

import { useState, useEffect, useCallback } from 'react'
import { ValidationError } from "yup"

const useValidation = (values, schema) => {
   const [errors, setErrors] = useState({})
   const [isValid, setIsValid] = useState(false)

   const validate = useCallback(async () => {
      try {
         await schema.validate(values, { abortEarly: false })

jucian0

import React, { useState, useRef, useEffect, useCallback } from 'react';
import { debounce } from '../Debounce';

const Input = ({ error, label, onChange, ...rest }) => {
   const [touched, setTouched] = useState(false)
   const inputRef = useRef(null)
   const debounceInput = useCallback(debounce(onChange, 500), [debounce])
   const blurInput = useCallback(() => setTouched(true), [setTouched])

   useEffect(() => {