
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


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

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
1. `*`
    - Preceding Item, zero or more times
2. `+`
    - Preceding Item, one or more times
3. `?`
    - 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.
"
