DEV Community: Maksim

Data Structures: Bidirectional Map

Maksim — Mon, 06 Sep 2021 10:13:14 +0000

In computer science, a bidirectional map is an associative data structure in which the (key,value) pairs form a one-to-one correspondence. Also known as bijective map. Article on Wikipedia.

It is not widely used data structure in web development, but in some cases really quite useful, for instance in encryption.

Let's describe our goal. Implement data structure, where following operations are performed in constant time:

Get value by key
Get key by value
Remove record by key
Remove record by value
Check for the existence of key
Check for the existence of value
Get the size of the map

Implementation below:

class BidirectionalMap<Key, Value> {
  private readonly map: Map<Key, Value>;
  private readonly inverseMap: Map<Value, Key>;

  constructor() {
    this.map = new Map();
    this.inverseMap = new Map();
  }

  clear(): void {
    this.map.clear();
    this.inverseMap.clear();
  }

  deleteKey(key: Key): boolean {
    if (!this.hasKey(key)) {
      return false;
    }

    const value = this.getValue(key)!;
    this.inverseMap.delete(value);
    return this.map.delete(key);
  }

  deleteValue(value: Value): boolean {
    if (!this.hasValue(value)) {
      return false;
    }

    const key = this.getKey(value)!;
    this.map.delete(key); 
    return this.inverseMap.delete(value);
  }

  entries(): IterableIterator<[Key, Value]> {
    return this.map.entries();
  }

  getKey(value: Value): Key | undefined {
    return this.inverseMap.get(value);
  }

  getValue(key: Key): Value | undefined {
    return this.map.get(key);
  }

  hasKey(key: Key): boolean {
    return this.map.has(key);
  }

  hasValue(value: Value): boolean {
    return this.inverseMap.has(value);
  }

  get isEmpty(): boolean {
    return this.size === 0;
  }

  keys(): IterableIterator<Key> {
    return this.map.keys();
  }

  set(key: Key, value: Value): void {
    if (this.hasKey(key) || this.hasValue(value)) {
      throw new Error('Key or Value already exists');
    }

    this.map.set(key, value);
    this.inverseMap.set(value, key);
  }

  get size(): number {
    return this.map.size;
  }

  values(): IterableIterator<Value> {
    return this.inverseMap.keys();
  }
}

Basically we can consider this data structure as extending of Map class. Current implementation could be improved by adding forEach method and iterable protocol, which will allow to define iteration behavior of Bidirectional Map. Let me know in comments if your interesting to know, how to do it exactly.

How to get month list in your locale

Maksim — Thu, 04 Jun 2020 10:01:21 +0000

Hi there! I am glad to show simple TypeScript function, that maybe will save your time. In many cases you need to implement selector of months. In some cases it should be in different locales. See it below:

function getMonthList(
  locales?: string | string[],
  format: "long" | "short" = "long"
): string[] {
  const year = new Date().getFullYear(); // 2020
  const monthList = [...Array(12).keys()]; // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
  const formatter = new Intl.DateTimeFormat(locales, {
    month: format
  });

  const getMonthName = (monthIndex: number) =>
    formatter.format(new Date(year, monthIndex));

  return monthList.map(getMonthName);
}

That's it. Just provide your locale as param.
For example, 🇬🇧 getMonthList('en') will return:

January
February
March
April
May
June
July
August
September
October
November
December

Try it by yourself on codesandbox.

For short version of names just provide second param as short.
For example, 🇬🇧 getMonthList('en', 'short') will return:

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

Follow me in Twitter

Update
By your requests I have extracted function in package

Power in tiny libraries

Maksim — Tue, 07 Jan 2020 11:48:03 +0000

Hello there!

Weight of your client side bundle is very important for best user experience. Users do not like to wait. For this purpose I am interesting to find tiny analogs of most popular libraries. I know next ones:

Do you know something else?

Typescript and Redux. My tips.

Maksim — Thu, 21 Nov 2019 10:32:29 +0000

Introduction

Hello everybody!

Today I want to talk about quite popular technologies. Typescript and Redux. Both helps to develop fault tolerant applications. There is a lot of approaches to write typings of state and actions. I formed own, that could save your time.

State

Each state in Redux should be immutable. Immutable object cannot be modified after it is created. If you forget this rule, your component do not rerender after state changes. So let's use Readonly modifier. It makes all properties readonly. You can't mutate property in reducer.

export type State = Readonly<{
  value: number;
}>

Do not forget use Readonly modifier for nested objects too. But what about arrays. For example:

export type State = Readonly<{
  list: number[];
}>

You still can change it. Let's fix it, TypeScript includes special modifier ReadonlyArray.

export type State = Readonly<{
  list: ReadonlyArray<number>;
}>

Now you can't add or remove items. You have to create new array for changes. Also TypeScript has special modifiers for Map and Set: ReadonlyMap and ReadonlySet.

Actions

I use enums for Redux actions. Naming convention is simple: @namespace/effect. Effect always in past tense, because it is something already happened. For example, @users/RequestSent, @users/ResponseReceived, @users/RequestFailed...

enum Action {
  ValueChanged = '@counter/ValueChanged',
}

Action creators

Little magic starts.

The first thing, we use const assertions. The const assertion allowed TypeScript to take the most specific type of the expression.

The second thing, we extract return types of action creators by type inference.

const actions = {
  setValue(value: number) {
    return {
      payload: value,
      type: Action.ValueChanged,
    } as const;
  },
}

type InferValueTypes<T> = T extends { [key: string]: infer U } ? U : never;

type Actions = ReturnType<InferValueTypes<typeof actions>>;

Let's improve it by helper function:

export function createAction<T extends string>(
  type: T,
): () => Readonly<{ type: T }>;
export function createAction<T extends string, P>(
  type: T,
): (payload: P) => Readonly<{ payload: P; type: T }>;
export function createAction<T extends string, P>(type: T) {
  return (payload?: P) =>
    typeof payload === 'undefined' ? { type } : { payload, type };
}

Then our actions object will look:

const actions = {
  setValue: createAction<Action.ValueChanged, number>(Action.ValueChanged)
}

Reducers

Inside reducer we just use things described before.

const DEFAULT_STATE: State = 0;

function reducer(state = DEFAULT_STATE, action: Actions): State {
  if (action.type === Action.ValueChanged) {
    return action.payload;
  }

  return state;
}

Now, for all of your critical changes inside action creators, TypeScript throws error inside reducer. You will have to change your code for correct handlers.

Module

Each module exports object like this:

export const Module = {
  actions,
  defaultState: DEFAULT_STATE,
  reducer,
}

You can also describe your saga inside module, if you use redux-saga.

Configure store

Describe the whole state of application, all actions and store.

import { Store } from 'redux';

type AppState = ModuleOneState | ModuleTwoState;
type AppActions = ModuleOneActions | ModuleTwoActions;

type AppStore = Store<AppState, AppActions>;

Hooks

If you use hooks from react-redux, it would be helpful too.
By default you need to describe typings each time, when you use this hooks. Better to make it one time.

export function useAppDispatch() {
  return useDispatch<Dispatch<AppActions>>();
}

export function useAppSelector<Selected>(
  selector: (state: AppState) => Selected,
  equalityFn?: (left: Selected, right: Selected) => boolean,
) {
  return useSelector<AppState, Selected>(selector, equalityFn);
}

Now you can't dispatch invalid action.

The end

I hope all of this things will make your live easier.
I will glad for your comments and questions.
My twitter.

Typescript. Simple React components.

Maksim — Tue, 27 Aug 2019 07:39:14 +0000

Hello there. I very like to use React and Typescript. Almost in each new project need simple components, like atoms, for example: button, input, checkbox etc. I have some best practices to make it friendly for all members of team, but also with strict typings. Let's get a look, maybe it will be helpful for you too.

Button

import React from 'react';

interface IProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  block?: boolean; // Your some custom prop
}

export const Button: React.FunctionComponent<IProps> = ({ block, children, ...shared }) => {
  return <button {...shared}>{children}</button>;
}

Button.defaultProps = {
  type: 'button',
}

That's it. You have custom Button component, that supports all native button attributes with strict typings. You can put common things for all buttons in project, like styles or some business logic.

For use

import React from 'react'

instead of

import * as React from 'react'

add in your tsconfig.json property esModuleInterop: true

Input

import React from 'react';

interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
  value: string;

  onChange(value: string): void;
}

export const Input: React.FunctionComponent<IProps> = ({ children, onChange, ...shared }) => {
  return <input onChange={e => onChange(e.target.value)} {...shared} />;
}

Input.defaultProps = {
  type: 'text',
};

The Omit helper type was added in Typescript 3.5. If you use previous version of Typescript, just add this string:

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

Checkbox

import React from 'react';

interface IProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  onChange(value: boolean): void;
}

export const Checkbox: React.FunctionComponent<IProps> = ({ children, 
onChange, ...shared }) => {
  return <input onChange={e => onChange(e.target.checked)} {...shared} />
}

Checkbox.defaultProps = {
  type: 'checkbox',  
}

Now you can use it like here:

<Checkbox checked={false} onChange={toggleCheckbox} />

It is end of small tutorial. If it will be helpful for someone, I can continue to explain some good things of React and Typescript. Thanks for attention.

Linguistic accessibility. Internationalize your React applications.

Maksim — Mon, 25 Mar 2019 09:45:21 +0000

Internationalization is the process of adapting an application to work with different languages and regions.

That can bring some benefits. Your target group can be broader than the one with the default language of the app. So by internationalizing an app, you may reach a bigger audience.

Cultural accessibility. Internationalization it's not only about translation text. Users expect localized Dates, Number separators, Currencies. Even colors can have various meaning across different cultures. While in Western cultures the color green can symbolize environmental friendliness, in Iran it evokes joy, while in China it symbolizes disgrace.

eo-locale

I want to talk you about small, but pretty useful library. It provide you easy way to format numeric, dates and manage your translations. If you don't want read whole article, just see code.

The first that you need, add library in your project.
yarn add eo-locale or npm i eo-locale --save

And... that's it, now you can format values.

Currencies

Many countries that use the same currency have slightly different formats when displaying prices. The days of setting one price in U.S. dollars, pounds or euros and then forcing customers to adapt are long over. EOLocale.Number - component for format numeric values. Support for 150+ languages.

import { EOLocale } from 'eo-locale';

<EOLocale.Number
  value={1000}
  currency="EUR"
  maximumFractionDigits={2}
  minimumFractionDigits={2}
  style="currency"
/>
// €1,000.00

Dates

The legal and cultural expectations for date and time representation vary between countries, and it is important to be aware of the forms of all-numeric calendar dates used in a particular country to know what date is intended. EOLocale.Date - component for format date values.

import { EOLocale } from 'eo-locale';

<EOLocale.Date
  value={new Date(2019, 2, 19)}
  day="numeric"
  month="long"
  year="numeric"
  weekday="long"
 />
 // Tuesday, March 19, 2019

Texts

Online shoppers prefer to do business in their native tongue. 42% of Europeans have reported to only shop online in their native language. Another report found that 72% of online shoppers who are not native English speakers would like the product reviews to be available in their native languages.

If you want manage your translations, need little bit more work. Add EOLocale.Provider in root of your application. eo-locale based on new React.Context api.

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      hello: 'Hello {name}!'
    }
  },
];

<EOLocale.Provider language="en" locales={locales}>
  <span>
    <EOLocale.Text id="hello" name="World" /> // Hello World!
  </span>
</EOLocale.Provider>

You can pass prop with any name in EOLocale.Text component. Pluralization supported also.

import { EOLocale } from 'eo-locale';

const locales = [
  {
    language: 'en',
    messages: {
      items: '{count, plural, one {One item} other {{count} items}}'
    }
  },
];

<EOLocale.Text id="items" count={3} />
// 3 items

If you need do some logic with strings, just import use Translator hook.

import { useTranslator } from 'eo-locale';

function SomeComponent() {
  const translator = useTranslator();

  return <div>{translator.formatNumber(1000)}</div>;
}

You can format html values also. More examples on GitHub page. All of this things based on Internationalization API, which very good supported nowadays. Server side rendering supported also. I hope, that this library will help you in your work. Enjoy!