
Lets say I have a following angular component:
```
@Component({
  selector: 'app-bar',
  templateUrl: './bar.component.html',
  styleUrls: ['./bar.component.css']
})
export class BarComponent implements OnInit {

```
If I instantiate this component I get the following html:
```
<body>
  <my-app _nghost-rkr-c45="" ng-version="10.0.1">
    <app-bar _ngcontent-rkr-c45="" _nghost-rkr-c43=""> (*)
      <p _ngcontent-rkr-c43="">bar works!</p>
    </app-bar>
  </my-app>
</body>

```
Angular has created a tag which corresponds to components selector.
Now lets say I want to create a component such that it does not have a corresponding tag in the HTML.
How can I do that? Lets say I want to attach my component to a div instead in of creating a new tag.

I can do this by modifying the `selector` decorator. `selector` decorator can take any valid css selector. So If I use `class ` selector
angular will attach the component instance to the elements which have that class. I create the example below.

```
@Component({
  selector: '.container',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css']
})
```

This component will attach itself to the elements which have a class called `container` so the following html will be generated.
```
<body>
  <my-app _nghost-jpn-c54="" ng-version="10.0.1">
    <app-bar _ngcontent-jpn-c54="" _nghost-jpn-c43="">
      <p _ngcontent-jpn-c43="">bar works!</p>
    </app-bar>
  </my-app>
</body>
```
Notice that no html tag is created.

I hope you learned something new 🙂

[Complete example on stackblitz](https://stackblitz.com/edit/angular-ivy-nzb1nw?file=src%2Fapp%2Fapp.component.html)


Create angular components which do not have create a tag in html

Angular component without tag selector


According to Wikipedia, observer pattern is defined as:

> The observer pattern is a software design pattern in which an object, named the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes, usually by calling one of their methods.
> The Subject contains a list of observers and it notifies them whenever an event occurs. It all observers to subscribe and unsubscribe. The subject is also called Publisher

The observer is an object which registers itself with the Subject to get notified whenever an event occurs. The observer can also unsubscribe when is no longer interested in further notifications. The observer is also called a Subscriber.

A real-world example of an Observer pattern would be a newspaper company. The newspaper company regularly publishes newspapers and magazines. If anyone wants a newspaper then they can subscribe and as long the subscription is active they will receive the newspaper and when they are no longer interested they can simply unsubscribe.

In this example the publishing company is Subject and the people who have subscriptions are observers.

Lets explore the component of Obersever pattern and later on we will code a concrete example.

First we will create an interface call `Subject`. The interface will be implemented by the class which wants to acts as a Subject.

```
interface Subject {
  registerObserver(observer: Observer);
  removeObserver(observer: Observer);
  notifyObservers();
}
```

The methods in the interface are self explanatory.

Next we will create a interface called `Observer`. All the classes which wants to listen for events must implement this interface

```
interface Observer {
  update(value: any);
}
```

Now lets use these interface in actual implementation. Consider the scenario that you have a weather station which periodically creates weather data. We want to send this data to user display console, log to console and send to alert system.

First we will create a class for `WeatherStation` as this weather station is Subject it will implement the Subject interface.

```
class WeatherStation implements Subject {
  private observers: Observer[]
  constructor() {
    this.observer = [];
  }

  registerObserver(observer: Observer) {
    this.observer.push(observer);
  }

  removeObserver(observer: Observer) {
    this.observer = this.observer.filter(obs => obs !== observer);
  }

  notifyObservers(newVal: any) {
    this.observer.forEach(obs => obs.update(newVal))
  }
}
```

Now lets create `UserInterface`, as this class is observer it will implement the `Observer` interface.

```
class UserInterface implements Observer {

  constructor(private subject: Subject) {
    subject.registerObserver(this);
  }

  updateTheInterface(newValue) {
    // update the user interface
  }

  update(newVal: any) {
    this.updateTheInterface(newVal);
  }
}
```

Similar to `UserInterface` class we will create `Logger` and `Alert` class

```

class Logger implements Observer {

  constructor(private subject: Subject) {
    subject.registerObserver(this);
  }

  log(value) {
    // log the value
  }

  update(newVal: any) {
      this.log(newVal);
    }
}

class Alert {

  constructor(private subject: Subject) {
    subject.registerObserver(this);
  }

  soundAlert() {
    // sends alert
  }

  update(newVal: any) {
    if (newVal.windSpeed > 101) {
      this.soundAlert();
    }
  }
}

```

Putting it all together it will be used like this:

```
const weatherStation = new WeatherStation();

const alert = new Alert(weatherStation);
const logger = new Logger(weatherStation);
const userInterface = new UserInterface(weatherStation);

```

Now whenever there is update from the weather station, the update method of all the Observers will be called and they can do their respective operations.
You can use observer patten in very powerful ways!


Observer Design Pattern


Wikipedia define adapter pattern as

> In software engineering, the adapter pattern is a software design pattern that allows the interface of an existing class to be used as another interface. It is often used to make existing classes work with others without modifying their source code.

Lets see this in action. Lets suppose we are building Duck simulator

```
interface Duck {
  quack();
  fly();
}
```

We have a duck interface which consists of two methods.

```
class MallardDuck implements Duck {
  display() {
    // displays mallard duck
  }

  fly() {
    // implement swim behaviour
  }

  quack() {
    // implements quack behaviour
  }
}
```

We have `MallardDuck` which implements the `Duck` interface.

```
class DuckSimulator {
  constructor() {
    const duck = new MallardDuck();
    this.quackAndFly(duck);
  }

  quackAndFly(duck: Duck) {
    duck.quack();
    duck.fly();
  }
}
```

Inside the `DuckSimulator` we create a new `Duck` instance of `MallardDuck` and assign it to the `duck`. So far everything is working fine. If we call the `quackAndFly` method of the `DuckSimulator` it will execute the `fly` and `quack` method of `MallardDuck`

Now lets suppose we want to add `Turkey` into our `DuckSimulator`.

```
interface Turkey {
  gobble();
  fly();
}
```

The `Turkey` interface is slightly different from the `Duck`'s interface so we can not add it directly to our `DuckSimulator`.

```
class WildTurkey implements Turkey {
  gobble() {
    console.log("gobble!");
  }

  fly() {
    console.log("Fly");
  }
}
```

We can not use `Turkey` in `DuckSimulator` because `DuckSimulator` expects the type objects to be of type `Duck` and the interface for `Duck` and `Turkey` have differences due to which it can not be used.

To overcome this we can use a `Adapter`. An `Adapter` acts as a bridge between `Duck` and `Turkey` objects.

We will create a new class called `TurkeyAdapter`. This class will act as an adapter between `Duck` and `Turkey`

This class will implement the `Duck` interface so we can directly plug it into the `Duck` class. Inside the implementation of `Duck`’s interface method, we will call the corresponding methods of the `Turkey` class. Lets see an example so its more concrete

```
class TurkeyAdapter implements Duck {
  constructor(private turkey: Turkey) {}

  quack() {
    this.turkey.gobble();
  }

  fly() {
    this.turkey.fly();
  }
}
```

Now we can use this inside the `DuckSimulator`

```
class DuckSimulator {
  constructor() {
    const duck = new MallardDuck();
    this.quackAndFly(duck);
    const wildTurkey = new TurkeyAdapter(new WildTurkey());
    this.quackAndFly(wildTurkey);
  }

  quackAndFly(duck: Duck) {
    duck.quack();
    duck.fly();
  }
}
```


Adapter Design Pattern


Container components are components that encapsulate the data loading and data management for the child application.

Let’s say you have a component called `StarShipInfo` component which lists the information about starship

```
const StarShipInfo = (id) => {
 const [starShip, setStarShip] = useState(null);
 useEffect(() => {
   const fetchStarShip = async () => {
     const response = await fetch(`https://swapi.dev/api/starships/${id}/`);
     const data = await response.json();
     setStarShip(data);
   };
   fetchStarShip();
 }, [id]);
 return (
   starShip && (
     <div>
       <p>Name: {starShip.name}</p>
       <p>Hyper Drive Rating: {starShip.hyperdrive_rating}</p>
       <p>Manufacturer: {starShip.manufacturer}</p>
       <p>Class: {starShip.starship_class}</p>
     </div>
   )
 );
};
```

By using container component pattern we can separate out the data fetching logic into a separate container.
First, let’s create a separate component called `StarShipInfoLoader`. The purpose of this component is to create a fetch request, wait for the request to be completed, and then render the `StarShipInfo` component. The `StarShipInfo` component is passed as a children prop to this component, we access the passed component and render it with data.

```
const StarShipInfoLoader = ({ id, children }) => {
 const [starShip, setStarShip] = useState(null);
 useEffect(() => {
   const fetchStarShip = async () => {
     const response = await fetch(`https://swapi.dev/api/starships/${id}/`);
     const data = await response.json();
     setStarShip(data);
   };
   fetchStarShip();
 }, [id]);
 return (
   <>
     {starShip &&
       Children.map(children, (child) => {
         if (isValidElement(child)) {
           return cloneElement(child, { starShip });
         }
       })}
   </>
 );
};
```

This is how we can use the `StarShipInfoLoader` and `StarShipInfo` together.

```
 <StarShipInfoLoader id={id}>
   <StarShipInfo />
 </StarShipInfoLoader>
```

Encapsulate data fetching logic with container components using hooks

React encapsulating data fetching logic with container components

## Note to self
I recently came across [article](https://css-tricks.com/inherit-initial-unset-revert/) which has this image showing the difference between unset, inital and inherit.
![image info](/posts/unset-vs-revert.png)


The difference between inital, unset and inherit

Initial vs Unset vs Inherit


Let’s suppose you are creating a duck simulator. This simulator lets you create different types of ducks e.g Mallard Duck, Redhead Duck, etc.

One way to model this is to use inheritance. You can have `Duck` base class, and other ducks can inherit the common behaviour from the base class

```
class Duck {
   display() {
    // implementation
  }

  quack() {
    // implementation
  }

  swim() {
    // implementation
  }
}

class MallardDuck extends Duck {
  display() {
    // displays mallard duck
  }
  // inherits the rest of behaviours
}

class RubberDuck extends Duck {
  display() {
    // displays rubber duck
  }
  // inherits the rest of behaviours
}
```

So far it looks right? Let's suppose a request comes in which requires us to add `RubberDuck` to the simulator. Taking advantage of inheritance you extend the `RubberDuck` from `Duck` base class.

```
class RubberDuck extends Duck {
  display() {
    // display the rubber duck
  }
}
```

But there is a problem. A rubber duck can not quack instead it squeaks. We can overcome this by overriding the `quack` method to run `squeak`

```
class RubberDuck extends Duck {
  display() {
    // display the rubber duck
  }

  quack() {
    this.squeak();
  }

  squeak() {
    // squeak
  }
}
```

So far the inheritance is holding. Now let's suppose there comes a feature request which is to make all the ducks fly. You can implement this by adding a fly method to `Duck` base class but this presents a new problem as it also makes the `RubberDuck` flyable which is not true. One way would be to override the fly behavior in the `RubberDuck` so calling `fly` method on `RubberDuck` does nothing.

Now let's add another type of duck to our simulator called `DecoyDuck`.

```
class DecoyDuck extends Duck {
  display() {
    // display the decoy duck
  }

  quack() {
    // do nothing
  }

  fly() {
    // do nothing
  }
}
```

As `DecoyDuck` can neither fly or quack we have overridden its `fly` and `quack` method but is this the best we can do?
As we are overriding base class behaviours in child class we are not getting the full benefits of the inheritance.

Maintaining `Duck` hierarchy is causing is more harm than good. It is making code messy and our code reuse is limited as we override the behaviour with no-op for some cases.
The `Duck` class is not giving us the whole picture, we have to open individual concrete classes to get the whole picture and one last thing, when we added a `fly` method to the base class it resulted in unintended consequences in child class which we then fix by overriding the behaviour in child classes.

Let's see if we can use the interface to make our design more flexible. We will create two interfaces called `Quackable` and `Flyable`. Classes can implement this behavior if they need the functionality

```
interface Flyable {
  fly() {}
}

interface Quackable {
  quack() {}
}

class Duck {
   display() {
    // implementation
  }

  swim() {
    // implementation
  }
}

class MallardDuck extends Duck implements Flyable, Quackable {
  display() {
    // displays mallard duck
  }

  swim() {
    // implement swim behaviour
  }

  quack() {
    // implements quack behaviour
  }
}

class RubberDuck extends Duck implements Quackable {

  display() {
    // displays mallard duck
  }

  quack() {
    // call squeak
  }
}

class DecoyDuck extends Duck {

  display() {
    // displays mallard duck
  }

  quack() {
    // call squeak
  }
}
```

This has improved the flexibility of our design but at the same time, it has reduced our code reuse if there is a new type of `Duck` it will need to implement the interface and provide the behaviour of the implementation. It has also made the code difficult to maintain. If we have to make some modifications in behaviour we will have to open all the classes and change the behaviour.

One of the object-oriented principle is to encapsulate what varies. This principle says that if some aspect of code is changing you need to pull that out and encapsulate it. Then later on you can simply change the encapsulate code instead of making changes all over the code.

Let's see how it applies to our duck simulator. In our case, the `quacking` and `flying` behavior is being changed whenever we add a new duck. The only behavior which is consistent across all the ducks is `swim`

So what we will do is create two interfaces called `QuackBehaviour` and `FlyBehaviour` and instead of implementing them directly in our `MallardDuck` or `RedheadDuck` classes, we will instead implement them in new classes. Lets see this in code:

```
interface QuackBehaviour {
  quack();
}

interface FlyBehaviour {
  fly();
}

class Quack implements QuackBehaviour{
  quack() {
    // quack implementation
  }
}

class Squeak implements QuackBehaviour{
  quack() {
    // squeak implementation
  }
}

class Mute implements QuackBehaviour{
  quack() {
    // mute implementation
  }
}

class FlyWithWings implements FlyBehaviour {
  fly() {
    // fly with wings
  }
}

class DoNotFly implements FlyBehaviour {
  fly() {
    // do not fly
  }
}
```

Now the next step is to add two properties to the `Duck` class along with its setter.

```
flyBehaviour: FlyBehaviour;
quackBehaviour: QuackBehaviour;

setFlyBehaviour(flyBehaviour) {
  this.flyBehaviour = flyBehaviour;
}

setQuackBehaviour(quackBehaviour) {
  this.quackBehaviour = quackBehaviour;
}
```

Here is `Duck` class with all the new changes:

```
class Duck {
  flyBehaviour: FlyBehaviour;
  quackBehaviour: QuackBehaviour;

  setFlyBehaviour(flyBehaviour) {
    this.flyBehaviour = flyBehaviour;
  }

  setQuackBehaviour(quackBehaviour) {
    this.quackBehaviour = quackBehaviour;
  }

  fly() {
    this.flyBehaviour.fly();
  }

  quack() {
    this.quackBehaviour.quack();
  }

  abstract display();

  swim() {
    // swim behaviour here, as it is common among all the ducks
  }
}
```

Now lets modify our concrete duck classes to use this new `Duck` parent class.

```
class MallardDuck extends Duck {
  constructor() {
    const quackBehaviour = new Quack();
    const flyBehaviour = new FlyWithWings();
    this.setFlyBehaviour(flyBehaviour);
    this.setQuackBehaviour(quackBehaviour);
  }
  display() {
    // displays mallard duck
  }
}

class RubberDuck extends Duck implements Quackable {
 constructor() {
    const squeakBehaviour = new Squeak();
    const flyBehaviour = new DoNotFly();
    this.setFlyBehaviour(flyBehaviour);
    this.setQuackBehaviour(squeakBehaviour);
  }
  display() {
    // displays rubber duck
  }
}

class DecoyDuck extends Duck {
 constructor() {
    const squeakBehaviour = new Mute();
    const flyBehaviour = new DoNotFly();
    this.setFlyBehaviour(flyBehaviour);
    this.setQuackBehaviour(squeakBehaviour);
  }
  display() {
    // displays rubber duck
  }
```

With this refactoring, we have achieved our goals of code reuse and flexible design by using composition instead of inheritance, and this pattern is called `Strategy Pattern`.


Strategy Design Pattern

manage state in react without using any 3rd party library

State Management in Pure React


Lets say we have following form:

```
const UserSignup = () => {
  const [userName, setUserName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordConfirmation, setPasswordConfirmation] = useState('');
  const [investmentInterest, setInvestmentInterest] = useState(false);

  const handleSubmit = event => {
    event.preventDefault();
    clear();
  };

  const clear = () => {
    setUserName('');
    setEmail('');
    setPassword('');
    setPasswordConfirmation('');
    setInvestmentInterest(false);
  };

  return (
    <form className="UserSignup" onSubmit={handleSubmit}>
      <label htmlFor="userName">User Name</label>
      <input
        id="userName"
        name="userName"
        type="text"
        value={userName}
        required
        onChange={event => {
          setUserName(event.target.value);
        }}
      />
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        value={email}
        required
        onChange={event => {
          setEmail(event.target.value);
        }}
      />
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        value={password}
        required
        onChange={event => {
          setPassword(event.target.value);
        }}
      />
      <label htmlFor="passwordConfirmation">Confirm Password</label>
      <input
        id="passwordConfirmation"
        name="passwordConfirmation"
        type="password"
        value={passwordConfirmation}
        required
        onChange={event => {
          setPasswordConfirmation(event.target.value);
        }}
      />
      <label htmlFor="investmentInterest" className="UserSignup--checkbox">
        <input
          id="investmentInterest"
          name="investmentInterest"
          type="checkbox"
          checked={investmentInterest}
          onChange={event => setInvestmentInterest(event.target.checked)}
        />
        Do you want to maybe help us out with an angel investment?
      </label>
      <input type="Submit" />
    </form>
  );
};

export default UserSignup;
```

We are using multiple setState to mantain state of the form fields can we simplify this? yes we can :).

Lets create a new file named `useSetState.js` with following contents:

```

import { useReducer } from 'react';

const reducer = (previousState = {}, updatedState = {}) => {
  return { ...previousState, ...updatedState };
};

const useSetState = (initialState = {}) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const setState = updatedState => dispatch(updatedState);

  return [state, setState];
};

export default useSetState;
```

We are creating a reducer function which takes two objects and merges them together, if there are common fields the `updateState` overwrites the `previousState`.

Then we are creating a hook name `useSetState` in recieves `initialState` which by default is empty object.
We use the react's provided `useReducer` hook and pass a reducer to it which we created in the last step.

We create a function named `setState` this function calls the dispatch of `useReducer` with the `updatedState` as a param.

Now we can update our UserSignup as follow:

```
import React, { useState } from 'react';
import useSetState from './useSetState';

import './UserSignup.css';

const initialState = {
  userName: '',
  email: '',
  password: '',
  passwordConfirmation: ''
};

const UserSignup = () => {
  const [state, setState] = useSetState(initialState);

  const handleChange = event => {
    setState({
      [event.target.name]: event.target.value
    });
  };

  const handleSubmit = event => {
    event.preventDefault();
    clear();
  };

  const clear = () => {
    setState(initialState);
  };

  return (
    <form className="UserSignup" onSubmit={handleSubmit}>
      <label htmlFor="userName">User Name</label>
      <input
        id="userName"
        name="userName"
        type="text"
        value={state.userName}
        required
        onChange={handleChange}
      />
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        value={state.email}
        required
        onChange={handleChange}
      />
      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        value={state.password}
        required
        onChange={handleChange}
      />
      <label htmlFor="passwordConfirmation">Confirm Password</label>
      <input
        id="passwordConfirmation"
        name="passwordConfirmation"
        type="password"
        value={state.passwordConfirmation}
        required
        onChange={handleChange}
      />
      <input type="Submit" />
    </form>
  );
};

export default UserSignup;
```

This simplified and easy to read then the previous approach. This article was inspired from [here](https://github.com/FrontendMasters/pure-react-state-management)

Learn how to manage form state using custom form hook

Managing form state using hooks

## useState vs useReducer
We can use the `useState` to internally maintain state of a react component but as soon the internal state gets complex the number of `useState`can get overwhelming. For this we can use the `useReducer`.

## useReducer
For the sake of learning middleware to handle async operations the example has been kept simple.
The following example is taken from the official react documentation.
It has two buttons one is used to increment and other is used to decrement. The application uses `useReducer` to maintain its state.

```
const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}
```

Lets suppose that on the button click we want to call an api, and increment it by the value from returned the api. I know its a superficial example but the point is to demonstrate how to handle `async` in `useReducer`

As we know that reducers are pure function and can not have any side effect so we can not perform the api call inside the `useReducer`. To avoid this we can use `thunks`

## Thunk

What is a thunk? thunk is function which is returned by another function. Its more easier to explain it via code:

```
function notAThunk() {
  return function aThunk() {
  }
}
```

Thunk is a piece of code encapsulated inside a function which can be called at a later time.

So instead of passing an object to the dispatch function we will pass a function. This passed function is `thunk`, and will be executed at a later time by the `middleware`. lets modify our code so it can handle the `thunk` via `middleware`. Inside `Counter` we will replace:

```
  const [state, dispatch] = useReducer(reducer, initialState);
```

with the following code:

```
  const [state, orignalDispatch] = useReducer(reducer, initialState);

  const dispatch = (action) => {
    if (isFunction(action)) {
      action(orignalDispatch);
    } else {
      orignalDispatch(action);
    }
  };
```

We have renamed the `dispatch` returned by `useReducer` to `orignalDispatch`. In essence we have created a middleware. As the following code is executed whenever we dispatach an action and before the action is received by the reducer
```
if (isFunction(action)) {
    action(orignalDispatch);
  } else {
    orignalDispatch(action);
  }
```
We have created a new function called `dispatch`. Our implementation first checks if the passed `action` is a type of function if it is a function then it is called with `orignalDispatch` as a arugment, otherwise we simply pass the action to `orignalDispatch`.

Now lets simulate a fake api call:

```
const asynIncrementApi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 10) + 1);
    }, 1000);
  });
};
```

`asynIncrementApi` returns a promise with a value between 1 to 10 after atleast `1000ms` have passed.

With api in place, Lets add a new button `Async Increment` to the `Counter`.

```
Count: {state.count}
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button>Async Increment</button>
```

Lets hook up `Async Increment` with event handler.

```
<button
  onClick={() => {
    dispatch(() => {
      asynIncrementApi().then((value) => {
        console.log(value);
        dispatch({
          type: "increment_async",
          count: value,
        });
      });
    });
  }}
>
  Async Increment
</button>;
```

When user clicks on the `Async Increment` button, its event handler is executed which makes a call to dispatch function. The `action` to dispatch function is our `thunk`.

In the above example following function is the `thunk`

```
() => {
  asynIncrementApi().then((value) => {
    dispatch({
      type: "increment_async",
      count: value,
    });
  });
};
```

Inside the dispatch function our check `isFunction` returns `true` and executes the `thunk`. In this case our `thunk` ignores the parameters passed to it. It is because the `dispatch` is in our scope but there might be some case where the `dispatch` might not be in scope (like if code is outside the component or in a separate file) so its better to pass it.

Inside our `thunk` the backend api is called and as soon the promise returned by the api is resolved we dispatch a new action with type of `increment_async` and `count` with value returned from the backend.

This is all which is required to handle the asyc actions. Now lets update our `reducer` to handle the `increment_async`.

```
  case "increment_async":
      return { count: state.count + action.count };
```

Below is all the code and here is link to the [codesandbox](https://codesandbox.io/s/pedantic-wozniak-8v27s?file=/src/App.js:387-464)

```
import "./styles.css";
import { useReducer } from "react";

function isFunction(functionToCheck) {
  return (
    functionToCheck && {}.toString.call(functionToCheck) === "[object Function]"
  );
}

const initialState = { count: 0 };

function reducer(state, action) {
  console.log(action.type);
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "increment_async":
      return { count: state.count + action.count };
    case "decrement":
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

const asynIncrementApi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 10) + 1);
    }, 1000);
  });
};

function Counter() {
  const [state, orignalDispatch] = useReducer(reducer, initialState);

  const dispatch = (action) => {
    if (isFunction(action)) {
      action(orignalDispatch);
    } else {
      orignalDispatch(action);
    }
  };

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button
        onClick={() => {
          dispatch(() => {
            asynIncrementApi().then((value) => {
              dispatch({
                type: "increment_async",
                count: value
              });
            });
          });
        }}
      >
        Async Increment
      </button>
    </>
  );
}

export default function App() {
  return (
    <div className="App">
      <Counter />
    </div>
  );
}
```

## Refactor the middleware into a separate hook

Lets create a new hook which encapsulates the logic of creating reducer and middleware into a separate hook.

```
const useThunkReducer = (reducer, initialState) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const enhancedDispatch = useCallback(
    action => {
      if (typeof action === 'function') {
        action(dispatch);
      } else {
        dispatch(action);
      }
    },
    [dispatch],
  );

  return [state, enhancedDispatch];
};
```

Now we use `useThunkReducer` instead of `useReducer`.
This example was inspired [from](https://github.com/FrontendMasters/pure-react-state-management)

Implement middleware with `useReducer` for async actions

middleware with useReducer


Lets say I have a accordion component. Implementation details are not relevant here 🙂.
```
export type AccordionPropsType = {
  options: AccordionOptions;
  expanded: boolean;
  collapsed: boolean;
}
const Accordion: FC = () => {
  return ...
}
```

This accordion has two states it can be either expanded
```
<Accordion options={options} expanded></Accordion>
```
or in collapsed state
```
<Accordion options={options} collapsed></Accordion>
```
but it can not be in both states.
```
<Accordion options={options} collapsed expanded></Accordion>
```
This can be checked at runtime but it will be better experience for the user of the accordion to know it at compile time.
Lets see how this can be done via TypeScript.
```
type ExpandedType = { expanded: boolean, collapsed?: never };
type CollapsedType = { expanded?: never, collapsed: boolean };
export type AccordionPropsType = { options: AccordionOptions; } & (ExpandedType | CollapsedType);
```
The intresting part of the code is `(ExpandedType | CollapsedType)`. Lets see how this works.
The `ExpandedType` type has two keys one is `expanded` which can have a boolean value and the other key is `collapsed`.
This is an optional key which has a type of `never` so this means it's value can be omitted but it can not be assigned any value.
So this means following only following variations are allowed
```
const expandedObject: ExpandedType = { expanded: true }
const expandedObject: ExpandedType = { expanded: false }
```
The same thing happens in `CollapsedType` with keys changed. So following are valid variations for it
```
const collapsedType: CollapsedType = { collapsed: true }
const collapsedType: CollapsedType = { collapsed: false }
```
Now lets take union of both these types `(ExpandedType | CollapsedType)` and see what are valid variations.
```
const variation1: ExpandedType | CollapsedType = { expanded: true };
const variation2: ExpandedType | CollapsedType = { expanded: false };
```
These are allowed because this satisfies `ExpandedType`.
```
const variation1: ExpandedType | CollapsedType = { collapsed: true };
const variation2: ExpandedType | CollapsedType = { collapsed: false };
```
These are also allowed because they satisfies `CollapsedType`.
The following its variation where both `collapsed` and `expanded` are not allowed
```
const variation1: ExpandedType | CollapsedType = { expanded:true, collapsed: true };

const variation2: ExpandedType | CollapsedType = { expanded:true, collapsed: false };
const variation2: ExpandedType | CollapsedType = { expanded:false, collapsed: true };
const variation2: ExpandedType | CollapsedType = { expanded:false, collapsed: false };
```
Lets see why the `variation1` fails. `variation1` can either of `ExpandedType` or `CollapsedType`. So when TypeScript reads the
line `{ expanded:true, collapsed: true };` it first tries to if it is possible to represent this object with the `ExpandedType`.
The `ExpandedType` has a key called `expanded` which does infact takes a key `expanded` with value boolean so far good.
Next TypeScript sees `variation1` has another property called `collapsed`. TypeScript finds this key in `ExpandedType` but value
for key `collapsed` in `ExpandedType` is never which means the `collapsed` key can not be assigned any value so the checks fails.
Same procedure is applied for `CollapsedType` of `variation1` and it also fails for the similar reason.

A similar procedured happens for the other three variations too. Please note that this process is simplified for understanding and
the acutal implementation of these checks might differ but the concept is same.

While searching on this topic I came to know that this feature of TypeScript is called `Discriminated Union`, and there is a
[excellent article](https://www.benmvp.com/blog/conditional-react-props-typescript/) which explains this in more details.


How to validate props which depends upon other props

Conditional checking of props

Hello World

# Regular Expression

I started learning about regular expressions. They are nice tools to have in a programmers toolbox. Although I still use google to search for regular expressions but it is nice to have some understand of them.

Here are some notes which I have written to I do not have to google every time.


## Notes

## Literal Character
1. `/cat/` matches both cat and communicated (notice the cat at the end in communiCATed)
    1. Literal matches are case sensitive use `i` global modifier to make them insensitive
    2. Only first occurrence is returned. To return all the occurrences uses `g` global modifier
    3. `/car/` will not match `c a r` spaces are not ignored

## Metacharacter Character
`\` `.` `*` `+` `-` `{` `}` `[` `]` `^` `$` `|` `?` `(` `)` `:` `!` `=`

1. Character with special meaning and its meaning may differ with the context in which it is used
Wild Card Meta Character
1. `.`
2. can be used to match anything except newline
3. `/.a.a.a/` matches both papaya and banana
### Escaping Meta Characters

1. Use the `\` meta character tells regex engine to escape the character next to it.
    1. `/9\.00/` matches `9.00` not `9500` or `9-00`.
1. To match space leave space in regex
2. To match tab use `\t` (notice the we are using the `\` to escape the `t`.) `\r` and `\n`


## Character Sets
1. `[]`
    1. `[` opening a character set
    2. `]` closing a character set
    3. Only matches a single character
    4. Order of characters in character set does not matter e.g `[aeiou]` is same is `[ueioa]`  etc etc
    5. `/gr[ea]y/` matches both `grey` and `gray`
2. Character Ranges
    1. `-` to indicate range of characters
    2. `-` is only meta character inside a character set; a liter dash otherwise
    3. `[0-9]` to indicate digits 0 to 9
    4. `[a-zA-Z]` all alphabets
3. Remember its characters range not number range

## Negative Character Sets

1. `^` Think of it as a `!(not)` of character set.
2. `[^aeiou]` matches any one consonant
3. `/see[^mn]/` matches `seek` and `sees` but does not `seem` or `seen`
    1. it also won’t match `see` because there is nothing after the last `e`
but it will still match `see.`

## Meta Characters inside Character Set
1. Meta Character inside character sets are already escaped
2. `/h[a.]t` matches `hat` and `h.t` but not `hot`
    1. exceptions `]` `-` `^` `\`
        1. `]` means that we are closing character set
        2. `-` means range
        3. `^` means negative character set
        4. `\` means escaping
3. Shorthand Character Set
    1. `\d` for digit for `[0-9]`
    2. `\w` for word character `[a-zA-Z0-9_]`
        1. `_` is a word character but hypen is not
    3. `\s` for white space `[\t\r\n]`
    4. `\D` for not digit `[^0-9]`
    5. `\W` for not a word character `[^a-zA-Z0-9_]`
    6. `\S` for not a space `[^\t\n\r]`
    7. `[^\d\s]` not a digit or a space

## Repetitions Metacharacters
- `*` Preceding Item, zero or more times
- `+` Preceding Item, one or more times
- `?` Preceding Item, zero or one time

I find these repetition meta characters hard to remeber and I often forget the difference between them. I found a nice [stackoverflow](https://stackoverflow.com/questions/8575281/regex-plus-vs-star-difference) answer which explains it as following:


"
In RegEx, `{i,f}` means "between i to f matches". Let's take a look at the following examples:

- `{3,7}` means between 3 to 7 matches
- `{,10}` means up to 10 matches with no lower limit (i.e. the low limit is 0)
- `{3,}` means at least 3 matches with no upper limit (i.e. the high limit is infinity)
- `{,}` means no upper limit or lower limit for the number of matches (i.e. the lower limit is 0 and the upper limit is infinity)
- `{5}` means exactly 4

Most good languages contain abbreviations, so does RegEx:

- `+` is the shorthand for `{1,}`
- `*` is the shorthand for `{,}`
- `?` is the shorthand for `{,1}`

This means `+` requires at least 1 match while `*` accepts any number of matches or no matches at all and `?` accepts no more than 1 match or zero matches.
