DEV Community

Discussion on: ⚛️ Applying Strategy Pattern in React (Part 1)

Collapse
 
dscheglov profile image
Dmytro Shchehlov

Hey, @itswillt

It is not a good idea to use the abstract class as a type of injectable stratagy. It is better to define the interface. More than, this interface must be defined on the statagy application side, not on the implementation side (see DIP).

Another problem I see is that we are trying to use a design pattern for issue that must be solved in another way.

If we are talking about different cuntries and currencies, it seems we need to talk about a different languages.

So, it means all story related to the amount formatting, discount messages, and even static text inside of the PricingCard and its sub-components are matter of localezation.

So, it is better not to invent a weel, but use old, kind i18.

That means that the final interface of the PricingCard must looks like that:

export type PricingCardProps = {
  price: number;
  discount: number;
  currency: string; // could CurrencyEnum or something like that
  countryCode: string; // or number, or CountryEnum
}

const PricingCard: React.FC<PricingCardProps>;
Enter fullscreen mode Exit fullscreen mode

And all the rest doing with i18next-react (or something similar).

We had text generation logic out of the view, and we got a problem when we met a need to support several languages -- so, it is better to keep all text as much close to be replaced with {t('MESSAGE')} as it is possible from the project beginning.