
![alt Types2Json](/electron-redux.png)

"Using redux with electron poses a couple of problems. Processes ([main](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md#main-process) and [renderer](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md#renderer-process)) are completely isolated, and the only mode of communication is [IPC](https://github.com/electron/electron/blob/master/docs/api/ipc-main.md)" <br />[[source]]

If you are facing this problem, your solution may be to use the library [electron-redux](https://github.com/klarna/electron-redux). However, if for any reason you cannot use that library, or you don't need to have one store for the main and the renderer process, stay and see how we can use it as inspiration to solve this problem.

```tsx
import { configureStore } from '@reduxjs/toolkit';
import { persistReducer, persistStore } from 'redux-persist';
import createElectronStorage from 'redux-persist-electron-storage';

import rootReducer from './rootReducer';
import forwardToMain from './middlewares/forwardToMain';


const persistConfig = {
  key: 'root',
  storage: createElectronStorage(),
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(forwardToMain, ...othersMiddleware),
})
...

export const persistor = persistStore(store);
export default store;
```

It is important that our `forwardToMain` file is the first middleware to execute in order to carry out our flow of events.

```tsx
import { ipcRenderer } from 'electron';

export const forwardToMain =
  store =>
  next =>
  action => {
    try {
      const serializableAction = structuredClone(action);
      if (serializableAction) {
        if (action.meta && action.meta.scope === 'local') return next(action);
        ipcRenderer.send('redux-action', action);
      }
      return next(action);
    } catch (error) {
      return next(action);
    }
  };

export default forwardToMain;
```

Once we send all actions to the main process using `ipcRenderer.send('redux-action', action)`, we will be waiting in the main process for this event to be sent to all other windows in our Electron application.

```ts
ipcMain.on('redux-action', (_, action) => {
  for (const window of BrowserWindow.getAllWindows()) {
    // the action now includes metadata to prevent an infinite loop of Redux events from occurring:
    window.webContents.send('redux-action', { ...action, meta: { ...action.meta, scope: 'local' } });
  }
});
```

Then, we need to have a listener in our windows to keep our Redux state synchronized.


```ts
  const syncActions = useCallback(
    (_, action) => {
      dispatch(action);
    },
    [dispatch]
  );

  useEffect(() => {
    ipcRenderer.on('redux-action', syncActions);
    return () => {
      ipcRenderer.off('redux-action', syncActions);
    };
  }, [syncActions]);
  ```

As a final recommendation, you could add a function that triggers local actions. It may be that you have events that are only important for one window in general and not for all windows. In that case, we could have a helper function like this.

```ts
export const useLocalDispatch = () => {
  const dispatch = useDispatch();
  return (action) =>
    dispatch({
      ...action,
      meta: {
        ...action.meta,
        scope: 'local',
      },
    });
};
```

With this approach, we can keep our store synchronized between all windows of our Electron application.

If you have any questions, comments, or suggestions, you can contact me at [@CarlosManotasV](https://twitter.com/CarlosManotasV).

[source]: https://github.com/klarna/electron-redux/blob/master/README.md#motivation "electron-redux"

If you have experience working with Electron applications, you may be familiar with Redux as a state management tool. Redux is a predictable state container for JavaScript applications that manages a single source of truth for the entire application state. In this post, we will explore how the Redux architecture can be implemented in an Electron application.

Redux Architecture in Electron


![alt Types2Json](/ts2json.png)


With Types2Json, you can quickly and easily convert your TypeScript code into JSON, making it easy to share your data with others or to integrate it into your web applications.

```ts
interface User {
  id: string;
  nickname: string;
  avatar: string;
  level: number;
  premium: boolean;
  phoneNumber: string;
  game: Game
}

interface Game {
  gameId: string;
  title: string;
  kills: number;
  deaths: number;
}
```

To use Types2Json, simply visit the website and paste your TypeScript code into the provided Editor. Then, hit the "Generate data" button and the tool will automatically transform your code into JSON. You can then copy the resulting JSON and use it in your own projects.

```json
{
  "id": "6_EFHjO'lR",
  "nickname": "yp3x;;aO%N",
  "avatar": "@HI'2%y5#^",
  "level": 95573,
  "premium": true,
  "phoneNumber": "S*MJ=2\"[T.",
  "game": {
    "gameId": "7$Y[)lhI^",
    "title": "#qK]J9PNaM",
    "kills": 55493,
    "deaths": 17458
  }
}
```

But that's not all! Types2Json also offers a feature that make it even more useful. For example, you can use the tool to convert your TypeScript interfaces and types with some helper types for example you can use an ExtraTypes enum and use ids, userNames, avatar urls, phoneNumber and more.

```ts
interface User {
  id: ExtraTypes.ID;
  nickname: ExtraTypes.USER_NAME;
  avatar: ExtraTypes.AVATAR;
  level: number;
  premium: boolean;
  phoneNumber: ExtraTypes.PHONENUMBER;
  game: Game
}

interface Game {
  gameId: ExtraTypes.ID;
  title: string;
  kills: number;
  deaths: number;
}
```
And the result is similar to this

```json
{
  "id": "dacc0ad6-0819-4eff-9227-7051e78faa08",
  "nickname": "Otilia84",
  "avatar": "https://cloudflare-ipfs.com/ipfs/Qmd3W5DuhgHirLHGVixi6V76LhCkZUz6pnFt5AJBiyvHye/avatar/945.jpg",
  "level": 10,
  "premium": true,
  "phoneNumber": "+1 390 62 18 47",
  "game": {
    "gameId": "a30d38b4-7b8f-4453-814f-489b7903627c",
    "title": "WHQsf>}oeZ",
    "kills": 71364,
    "deaths": 23984
  }
}
```

So why not give Types2Json a try? Visit the [website](https://carlosmanotas.com/lab/from-interfaces-to-json) today and see for yourself how easy it is to convert your TypeScript interfaces and types to JSON. You won't be disappointed!


<iframe style={{ minHeight: "450px", marginBottom: "30px" }} src="https://carlosmanotas.com/lab/from-interfaces-to-json" title="Data from interfaces Ts" />

If you're looking for a tool that can help you convert your TypeScript interfaces and types to JSON, you're in luck! Introducing Types2Json, the online tool that makes it easy to transform your TypeScript code into the popular JSON format.

Types2Json.


```ts
interface User {
  id: ExtraTypes.ID;
  nickname: ExtraTypes.FULL_NAME;
  avatar: ExtraTypes.AVATAR;
  level: ExtraTypes.AGE;
  premium: boolean;
  phoneNumber: ExtraTypes.PHONENUMBER;
  game: Game
}

interface Game {
  gameId: ExtraTypes.ID;
  title: string;
  kills: number;
  deaths: number;
}
```

Hace algún tiempo trabajando en un proyecto estaba agregando todos los types que me venian de una respuesta de una API, para tener mejor experiencia al desarrollar la UI y a mi suerte me comentaron de un plugin que se usa en Visual Studio Code que al llegar la respuesta del backend te genera automaticamente los typos para Typescript y esto para mi fue de gran ayuda si aún no conoces esta herramienta te dejo este enlace para que vayas rapido a darle una mirada [Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client).

<iframe style={{ minHeight: "450px", marginBottom: "30px" }} src="https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client" title="Thunder Client" />

Luego a mas de uno le puede pasar el caso invertido puede ser que aún la API del backend no esta terminada o que incluso depende de los datos que necesites consumir en el cliente se generaran estos datos en el backend para que sean consumidos finalmente. Y aquí es donde empece a buscar alguna solución que hiciera exactamente esto dado unas interfaces de Typescript generar data obviamente seria data con propositos de desarrollo, por cierto hay generadores de este tipo de data para el backend depende de lo que esten usando, en este caso no soy yo el que esta trabajando con la base de datos sino directamente en el frontend, así que me puse manos a la obra de encontrar algo que me ayudará con este problema, como en su momento no conseguí nada que me ayudará especificamente en mi problema, use otra herramienta que esta muy buena que también dejare el enlace por si no lo conocen Faker sirve para generar muchos tipos de datos como números de telefonos, nombres de usuario incluso avatares o imagenes muy recomendado.

Esto me llevo a que en el proyecto que estaba continue haciendo esto con muchas partes de la aplicación, así que me dije que tan dificil puede ser desarrollar esto me tome unas horas y empecé con la prueba de concepto tampoco quería gastar mucho tiempo en desarrollar esto y medí el alcance inicial de lo que quería que no era mas que dada una interface me devolviera un objeto JSON, primeramente iba a manejar datos primitivos como boolean, string, number, Date y undefined, después de lograr esto podría intentar ir mas lejos así que empece con un interface como este.

```ts
interface User {
  id: string;
  nickname: string;
  avatar: string;
  level: number;
  premium: boolean;
}
```

Si logro todo lo que tengo en mente el resultado debería ser un objeto con esta forma y una data mas o menos real algo como esto.

```json
{
  "id": "051191f5-adba-437b-8061-45ab1a6194eb",
  "nickname": "Mrs. Matthew Jacobi",
  "avatar": "https://cloudflare-ipfs.com/ipfs/Qm/avatar/732.jpg",
  "level": 90,
  "premium": true
}
```

Lo que empezo con lo hago en unas horas me llevo unos dias pero aquí les dejare el resultado de este proyecto.

Para tener en consideración esta versión acepta nested interfaces si, pero con algunas restricciones por ejemplo esto funcionará sin problemas.

```ts
interface ChatMessage {
  created_at: number;
  message: Message;
  publisher: string;
  channel?: string;
  timestamp: string;
}

interface Message {
  text: string;
  reply: boolean;
  forward?: string;
  groupInvite?: string;
  message?: { text: string };
  file: { name: string; id: string };
}
```

Pero esto ya no.

```ts
interface ChatMessage {
  created_at: number;
  messages: Array<Message>; // <<<< esto fallará por ahora... use esto mejor Message[]
  publisher: string;
  channel?: string;
  timestamp: string;
}

interface Message {
  text: string;
  reply: boolean;
  forward?: string;
  groupInvite?: string;
  message?: { text: string };
  file: { name: string; id: string };
}
```

Adicionalmente agregue otros types que pueden ser muy utililes para generar data un poco mas real y podrás acceder a ellos solo escribiendo ExtraTypes. esto te mostrará algunas propiedades para tus mocks.

Y como paso final tienes la posibilidad de generar un array con mucha data solo atravez de tus interfaces de Typescript.

Gracias por leer, espero sea util para el que lo necesite :D. [carlosmanotas.com](https://carlosmanotas.com/lab/from-interfaces-to-json)

<iframe style={{ minHeight: "450px", marginBottom: "30px" }} src="https://carlosmanotas.com/lab/from-interfaces-to-json" title="Data from interfaces Ts" />

Podemos generar mocks para consumir si estamos desarrollando alguna aplicación web solo con tener las interfaces de Typescript, la respuesta corta es si claro que si.

Generar data desde interfaces en Typescript.


<TestComponent>
  Warning!!! this is a hack and you could do the same with a map if you know your list isn't very big.
</TestComponent>


For example we want to have a result similar to the one offered by a simple `Flatlist`.


<div data-snack-id="@carlosmanotas/faltlist" data-snack-platform="web" data-snack-preview="true" data-snack-preview="true" data-snack-theme="dark" style={{overflow: 'hidden', background: '#F9F9F9', border: '1px solid var(--color-border)', borderRadius: '4px', height: '505px', width: '100%' }} />
<br />

But if we want the same result with their respective sections, the `SectionList` does not give us that possibility 😔.
<br />

<div data-snack-id="@carlosmanotas/sectionlist" data-snack-platform="web" data-snack-preview="true" data-snack-theme="dark" style={{overflow: 'hidden', background: '#F9F9F9', border: '1px solid var(--color-border)', borderRadius: '4px', height: '505px', width: '100%' }} />
 <br />

This is where the hack comes into play, to do this you have to change the way we receive the data which normally has this form:

 ```ts
 export const DATA = [
  {
    title: "Main dishes",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Sides",
    data: ["Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Drinks",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Desserts",
    data: ["Cake", "Ice"]
  }
];
```
What we will do is place a single array with our data in this way:
```ts
 export const DATA = [
  {
    title: "Main dishes",
    data: [["Pizza", "Burger", "Risotto"]] // First part of the hack
  },
  ...
```

This allows us to add a single `Flatlist` inside each Section of the `Sectionlist` and inside the `Flatlist` we can easily have our 3-column grid and it would look like this:
<br />
<div data-snack-id="@carlosmanotas/grid-layout" data-snack-platform="web" data-snack-preview="true" data-snack-theme="dark" style={{overflow: 'hidden', background: '#F9F9F9', border: '1px solid var(--color-border)', borderRadius: '4px', height: '505px', width: '100%' }} />

<br />

If you know a better approach for this hack just let me know in my [twitter account](https://twitter.com/CarlosManotasV) 🚀.

We want to get a 3 column gridlayout inside a `SectionList` in React Native, unfortunately we don't have the `numColumns` property natively available like in the `Flatlist`.

Gridlayout in SectionList (React Native).


<TestComponent>
  Warning!!! If you try to do this with a dynamic width, you'll have a problem with empty spaces and that is not our goal.
</TestComponent>

## Ok, what do we need?
1. Some pictures for this demo, **I'm going to use [picsum photos](https://picsum.photos/)**
2. React
3. Styled components

```tsx
import * as React from 'react';
import styled from 'styled-components';


export default function LikeMansory(){
  return <div>{/*images here*/}</div>
}
```

For this case I'm using a hardcore list of pictures, but then we can use a dynamic list of pictures like in the real web.

```ts
const twentyPictures = [
  'https://picsum.photos/id/0/400/450',
  'https://picsum.photos/id/1/400/750',
  'https://picsum.photos/id/2/400/350',
  'https://picsum.photos/id/3/400/550',
  'https://picsum.photos/id/4/400/450',
  'https://picsum.photos/id/5/400/350',
  'https://picsum.photos/id/6/400/350',
  'https://picsum.photos/id/7/400/450',
  'https://picsum.photos/id/8/400/450',
  'https://picsum.photos/id/9/400/450',
  'https://picsum.photos/id/10/400/850',
  'https://picsum.photos/id/11/400/450',
  'https://picsum.photos/id/12/400/450',
  'https://picsum.photos/id/13/400/450',
  'https://picsum.photos/id/14/400/450',
  'https://picsum.photos/id/15/400/450',
  'https://picsum.photos/id/16/400/450',
  'https://picsum.photos/id/17/400/450',
  'https://picsum.photos/id/18/400/700',
  'https://picsum.photos/id/19/400/450',
  'https://picsum.photos/id/20/400/340',
];
```
We use our friend `map` for this task

```tsx
...
export default function LikeMansory() {
  return (
    <div>
      {twentyPictures.map((src) => (
        <img key={src} src={src} alt="masory-item" />
      ))}
    </div>
  );
}
```

The result have to be something similar to this.

![alt layout](/layout1.png)

Now this is the first step for this trick. We need to set our layout

```tsx
...
const Wrapper = styled.div`
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr 1fr; /* we set 3 columns here */

  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 50px 0px;
`;

export default function LikeMansory() {
  return (
    <Wrapper>
      {twentyPictures.map((src) => (
        <img key={src} src={src} alt="masory-item" />
      ))}
    </Wrapper>
  );
}
```

This is the result for now.

![alt layout](/layout2.png)

Excellent, now we need to break the default behavior of the rows with this.

```tsx
...
const Wrapper = styled.div`
  display: grid;
  grid-gap: 15px;
  grid-template-columns: 1fr 1fr 1fr; /* we set 3 columns here */
  grid-auto-rows: 0px; /*  this is important  */
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 50px 0px;
`;
...
```
Now everything is broken, but it's ok. We want to decide how many columns we want. But before that we need to know which is the height of each picture and then calculate how much space in the column it needs.

First, I'll create a new container for my images, a `figure` is more than ok for this, and then I'll put something important, the size, for the span into the column `grid-row-end`.

Second, I'll create a hook for ref each picture and calculate the size with the property `getBoundingClientRect`

```tsx
...
const Figure = styled.figure`
  margin: 0;
  line-height: 0;
  overflow: hidden;
  grid-row-end: ${(props) =>
    props.gridRowEnd ? `span ${props.gridRowEnd}` : 'auto'};
  img {
    width: 100%;
  }
`;

const MansoryItem = ({ src }) => {
  const size = React.useRef(null);
  const [gridRowEnd, setGridRowEnd] = React.useState(null);

  React.useEffect(() => {
    if (size.current) {
      const imageToLoad = new Image();
      imageToLoad.src = src;
      imageToLoad.onload = () => {
        const { height } = size.current.getBoundingClientRect();
        setGridRowEnd(Math.floor((height * 6.85) / 100) - 1);
      };
      imageToLoad.onerror = (error) => {
        console.log({ error });
      };
    }
  }, [size.current]);

  return (
    <Figure gridRowEnd={gridRowEnd}>
      <img ref={size} src={src} alt="mansory-item" />
    </Figure>
  );
};
...
```

Show me on twitter what is your result [@CarlosManotasV](https://twitter.com/CarlosManotasV)

There are a few things that we can improve like:
1. The responsive layout 
2. What happends if any picture fails?
3. Is it possible create this layout but with some pictures with a different width?.

But for this post I'm going to leave the result in this link [here](/lab/like-mansory)


I have seen many time people doing post about mansory layout, but always without dynamic sizes, this is how I did in the past my own mansory layout. I'm going to use React and Styled components, but you can create all this only with Javascript.

Layout like mansory.


I was updating my package for animations [animate-styled](https://github.com/CarlosManotas/animate-styled#readme) adding Ts support, but in the past I was using [nwb](https://github.com/insin/nwb#readme) like a webpack because this tool allows me  to see at the same time how works my package in local environment and that is good for me, but sadly nowdays they have no support for Ts.

<TestComponent children="animate-styled in action" />

<TestComponent>
  <AnimateWrapper name="tada" duration="2s" timingFunction="ease-in">
    <div style={{display: "flex"}}>
      <div style={{height: "40px", width: "40px", borderRadius: "50%", background: "peru", marginRight: "-10px"}} />
      <div style={{height: "80px", width: "80px", borderRadius: "50%", background: "peru", display: "flex", justifyContent: "space-around", alignItems: "center"}}>
      <div style={{width: "20px", height: "20px", borderRadius: "50%", background: "#000"}} />
      <div style={{width: "20px", height: "20px", borderRadius: "50%", background: "#000"}} /> 
      </div>
      <div style={{height: "40px", width: "40px", borderRadius: "50%", background: "peru", marginLeft: "-10px"}} />
    </div>
  </AnimateWrapper>
</TestComponent>

I found many ways to solve this problem even I tried some of them because I didn't want to upload my package to npm before testing everything was working fine.

* One of the solution is with resolutions for yarn

```json
  "resolutions": {
    "react": "17.0.1",
    "react-dom": "17.0.1",
  },
  ...
```

* You can find anothers like yarn link

But with this simple command you can resolve this series of conflicts assuming that myTestApp and mylib are sister folders.
go to mylib and run in terminal.

```json
 npm link ../myTestApp/node_modules/react
```

# And that's it.




This happends for many reasons but one very common is when you're creating UI components library or packages for npm which was my case.

Mismatching Versions of React.


Algún tiempo atrás hice una **WebApp** totalmente educativa para mi, la cual termino divirtiendo a varios de mis colegas desarrolladores, porque parte de la web tiene una sección llamada Battle, en la cual colocando 2 nombres de usuario de Github daba como resultado un ganador perdedor o empate, lo divertido de esto es en el algoritmo en que se basa mi **WebApp** en determinar un ganador.

![alt text](https://blogimages.now.sh/github-battle-3.png)

> En este ejemplo colocaré mi nombre de usuario y el de un gran colega Venezolano [Andrés Villanueva](https://github.com/villanuevand).

![alt text](https://blogimages.now.sh/github-battle-1.png)

Después de darle al botón de enviar o submit en este caso, tendremos el resultado de los 2 usuarios con sus puntajes y parte de sus datos públicos de github.

![alt text](https://blogimages.now.sh/github-battle-2.png)

En este particular ejemplo he perdido la batalla contra mi colega :( , pero si eres usuario de Github te invito a que te midas con tus compañeros o colegas y así saber quien es el ganador entre uds. para acceder a la web solo has click [Aquí](https://lostapp-e8ede.firebaseapp.com/).

Como reto invito a cualquier desarrollador a que copie el proyecto y genere un algoritmo diferente para determinar un ganador, pueden encontrar mi proyecto en Github, [https://github.com/CarlosManotas/react-github-battle](https://github.com/CarlosManotas/react-github-battle)

Y como parte final, he visto que entre mis contactos hay muchos reclutadores y estoy dispuesto ayudar con esta herramienta a que consigan a sus developers de cualquier lenguaje y país, escucharé que tipo de búsquedas o requerimientos les ayudaría en su día a día y colocarla en esta WebApp para su uso público.

Algún tiempo atrás hice una WebApp totalmente educativa para mi, la cual termino divirtiendo a varios de mis colegas desarrolladores, porque parte de la web tiene una sección llamada Battle, en la cual colocando 2 nombres de usuario de Github daba como resultado un ganador perdedor o empate, lo divertido de esto es en el algoritmo en que se basa mi WebApp en determinar un ganador.