Forem: Alexey Lysenko

Utilizing Higher-Order Components (HOC) and Function Composition to Enhance React Code Structure

Alexey Lysenko — Fri, 09 Feb 2024 10:36:58 +0000

In the world of React development, the need often arises to enforce access restrictions on various app modules. Let's delve into an approach leveraging Higher-Order Components and Function Composition to tackle this challenge effectively.

Consider the scenario where we aim to ascertain if a user is logged in before rendering certain components. We initially might resort to a straightforward implementation:

 function Account() {
  const sessionContext = useSessionContext();

   if (!sessionContext.isAuthenticated) {
      return <RedirectTo href={PATH_LOGIN} />;
    }

  return (
    <SomeAccountData />
  );
};

However, such an approach presents drawbacks:

The necessity to import useSessionContext within the Account component, entangling business logic with presentation.
Repetition of authentication logic across multiple modules leads to code duplication and maintenance challenges.

Higher-Order Components

To solve these issues, we can use Higher-Order Components. Let's craft a function withAuthenticatedUser to encapsulate authentication logic:

function withAuthenticatedUser<T>(WrappedComponent: React.ComponentType<T>) {
  function WithAuthenticatedUser(props: React.PropsWithChildren<any>) {
    const sessionContext = useSessionContext();

    if (!sessionContext.isAuthenticated) {
      return <RedirectTo href={PATH_LOGIN} />;
    }

    return <WrappedComponent {...props} />;
  }

  return WithAuthenticatedUser;
}

// Apply the HOC to our Account component
const WrappedAccount = withAuthenticatedUser(Account);

This cleaner approach enables seamless reuse of the authentication wrapper across various components.

Function Composition for combining a lot of HOCs.

Function Composition further enhances our code organization by consolidating multiple HOCs into a single entity. Let's explore this concept.

By leveraging Function Composition, we efficiently combine various HOCs to create a cohesive single HOC wrapper around our components.

export const compose =
  (...funcs) =>
  (Component) =>
    funcs.reduce((wrappedComponent, hoc) => 
    hoc(wrappedComponent), Component);

// Combine multiple wrappers using function composition
const Account = compose(
  withAuthenticatedUser,
  withFeatureFlag,
  withLogger,
)(function Account() {
  return (
    <SomeAccountData />
  );
});

In summary, when faced with the need for consistent actions across multiple components, consider harnessing Higher-Order Components and Function Composition as powerful tools for enhancing code maintainability and scalability in your React applications.

Finding dead code in the typescript project

Alexey Lysenko — Mon, 05 Dec 2022 08:43:36 +0000

For finding "dead" code in a typescript project, I use package:
yarn add -D ts-prune

after installation, add a script to package.json file:

{
...
  "scripts": {
    "find-deadcode": "ts-prune"
  }
}

now use yarn find-deadcode it will find and shows all unused exports in a project

The script above will detect unused exports, even if they are used internally within the module. So you can remove export to make this code local only, or you can modify script to ignore this behavior:

{
...
  "scripts": {
    "find-deadcode": "ts-prune | grep -v '(used in module)'"
  }
}

Managing application cache with react-query. And code generation from OpenAPI.

Alexey Lysenko — Tue, 31 May 2022 16:18:06 +0000

Introduction

In this article, I would like to address the following aspects:

What is application cache.
react-query as a way to manage application cache.
how on the project we use code generation from Open API in npm package with custom react-query hooks and further we spread the code between two clients of Web i Mobile.

Until recently, the Web application on the project I'm working on used Redux as the primary state manager, but now we've completely switched to react-query. Let's take a look at what I personally think are the disadvantages of Redux and why react-query?

Why did Redux take on the many projects by default? My answer is that thanks to Redux we have architecture. That is, we have a Store in which we store the State of the entire application, we have Actions that we Dispatch when we need to change the store. And all the asynchronous operations we do are through crutch middleware using mostly Thunk and Saga etc.

Now we realize, that the cool thing is that Redux helps to make the architecture - what's wrong with it. I repeat this is my personal experience with him you can disagree.

Disadvantages of Redux:

1. Verbosity.

It's not very cool when you need to develop some kind of module in an existing application, constantly writing a bunch of code. Switching between different modules with. Action_type, action creators, Thunks, etc.
Writing fewer boilerplates not only increases the chance of making fewer mistakes, but also increases the readability of the code - and this is very cool, since you have to read and understand more often than write.

«All code is buggy. It stands to reason, therefore, that the more code you have to write the buggier your apps will be.» — RICH HARRIS

2. Everything is stuffing into it.

When you're working on a big project with multiple developers. Again, this is my experience. The element of rush and deadlines encourages developers to start storing everything in the global store, even if we don't have to. Conditionally synchronous “handles” that switch private ui behavior in single modules. Requests to the server that are also used in the same module. All this is moved to the global store, and can obfuscate the code by increasing its cohesion.

3. Redux creates non-obvious hidden dependencies.

An example to get the data we get users in the Home.js component:

React.useEffect(() => {
      dispatch(getUserData()); 
  }, []);

And then having received the data, we use them in many other components (Transactions, Items, Menu ..). In this case, this creates a hidden dependency, because when refactoring the code, if we remove this dispatch(getUserData()) in only one place, it breaks userData in all other places in the application.
And more importantly, the mechanism for maintaining the data that we received from the server is not convenient. We constantly need to monitor the validity of this data and remember to update it if we know that it has changed on the server.

And here we come to 2 concepts of data in an application. We can split the data into State and Cache.

States are the data that needs to be saved and changed throughout the life of the application.
Cache is data received from outside, let's say http request.

And in the redux, we mix and store them in a state just because they are used in other places in the application.
So 90% of the data that we use in the application is cache.

At this point, I want to move on to the react-query cache management library. Give a brief overview and see how you can improve your developer experience with cache using this library.

Overview of React-Query

As written on the official site: Fetch, cache, and update data in your React and React Native applications all without touching any "global state". At their core, these are custom hooks that take control of the cache, giving us a lot of cool features, such as caching, optimistic update, etc. ... And what I like is that it removes a lot of intermediate abstractions, reducing the amount of code written. Let's go with an example.

Everything is simple here, we wrap the root of our application in a QueryClientProvider:

import { QueryClient, QueryClientProvider } from 'react-query'
  const queryClient = new QueryClient()
  export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <ExampleFirst />
     </QueryClientProvider>
   )
 }

Now we make a request in the component using axios get, which we pass to useQuery:

import {  useQuery } from 'react-query'
import axios from 'axios'

 function ExampleFirst() {
   const { isLoading, error, data } = useQuery('repoData', async () =>
    const res = await axios.get('https://api.github.com/repos/react-query')
    return res.data
   )

   if (isLoading) return 'Loading...'
   if (error) return 'An error has occurred: ' + error.message

   return (
     <div>
       <h1>{data.name}</h1>
       <p>{data.description}</p>
       <strong>👀 {data.subscribers_count}</strong>{' '}
       <strong>✨ {data.stargazers_count}</strong>{' '}
       <strong>🍴 {data.forks_count}</strong>
     </div>
   )
 }

We wrapped our request in a useQuery hook and got an API for working with data, and we leave control over loading, processing and interception of errors to the hook. useQuery takes as its first parameter a unique query key. react-query manages query caching based on query keys. Query keys can be as simple as a string, or as complex as an array of multiple strings and nested objects. The second parameter is our get request, which returns a promise. And the third, optional, is an object with additional configurations.

As you can see, this is very similar to the code when we learned how to work with server requests in React, but then everything turned out differently on a real project :) And we began to apply a large layer of abstractions on top of our code to catch errors, load status and everything else. In react-query, these abstractions are brought under the hood and leave us with purely convenient APIs to work with.

In fact, this is the main example of using react-query hooks for get requests. In fact, the API of what the hook returns is much larger, but in most cases we use these few { isLoading, error, data }

useQuery also shares state with all other useQuery with the same key. You can call the same useQuery call multiple times in different components and get the same cached result.

For queries with data modification, there is a useMutation hook. Example:

export default function App() {
  const [todo, setTodo] = useState("");

  const mutation = useMutation(
    async () =>
      axios.post("https://jsonplaceholder.typicode.com/todos", {
          userId: 1,
          title: todo,
        }),
    {
      onSuccess(data) {
        console.log("Succesful", data);
      },
      onError(error) {
        console.log("Failed", error);
      },
      onSettled() {
        console.log("Mutation completed.");
      }
    }
  );

  async function addTodo(e) {
    e.preventDefault();
    mutation.mutateAsync();
  }

  return (
    <div>
      <h1>useMutations() Hook</h1>
      <h2>Create, update or delete data</h2>
      <h3>Add a new todo</h3>
      <form onSubmit={addTodo}>
        <input
          type="text"
          value={todo}
          onChange={(e) => setTodo(e.target.value)}
        />
        <button>Add todo</button>
      </form>
      {mutation.isLoading && <p>Making request...</p>}
      {mutation.isSuccess && <p>Todo added!</p>}
      {mutation.isError && <p>There was an error!</p>}
    </div>
  );
}

Again, we pass axios.post(..) to the hook, and we can directly work with the {isLoading, isSuccess, isError} API and other values that useMutation provides. And we call the mutation itself using mutation.mutateAsync (). In this example, we see that we are passing an object with functions as the second parameter:

this will work on successful completion of the post request and will return the data we received:

onSuccess(data) {
        console.log("Succesful", data);
  }

will works if an error occurred, return an error:

onError(error) {
        console.log("Failed", error);
      },

will work anyway, after query triggers:

onSettled() {
        console.log("Mutation completed.");
      }

In this object, we can put additional keys in order to control the data fetching process.

useMutation will keep track of the state of the mutation in the same way that useQuery does for queries. This will give you the isLoading, isFalse and isSuccess fields so that you can easily display what is happening to your users. The difference between useMutation and useQuery is that useQuery is declarative, useMutation is imperative. By this I mean that useQuery queries are mostly done automatically. You define the dependencies, but useQuery will take care of executing the query immediately, and then also perform smart background updates if necessary. This works great for requests because we want what we see on the screen to be in sync with the actual data from the back-end. It won't work for mutations. Imagine that every time you focus the browser window, a new task will be created. So instead of triggering a mutation immediately, React Query provides you with a function that you can call whenever you want to mutate.

It is also recommended to create a custom hook in which we put our react-query hook:

const transformTodoNames = (data: Todos) =>
  data.map((todo) => todo.name.toUpperCase())
export const useTodosQuery = () =>
  useQuery(['todos'], fetchTodos, {
    select: transformTodoNames,
  })

This is convenient because:

you can store all uses of a single query key (and possibly type definitions) in a single file;
if you need to tweak some settings or add data transformation, you can do it in one place.

And at this point, when familiarity with react-query is over. I'd like to show you how we can go even further with react-query and generate our hooks from an OpenAPI schema.

Code generation from OpenAPI

As we can see, all requests are separate hooks without being tied to store abstractions. Therefore, if we have a valid OpenApi schema with a back-end, we can code-generate our hooks directly from the schema, and put it in a separate npm package. What will this give us:

reduce the amount of manual work and boilerplate writing;
simplify the architecture of the application;
less code === less bugs
we will reuse code on the web client, and on the mobile react native client.

From Wikipedia: The OpenAPI specification, originally known as Swagger, is a specification for machine-readable files with interfaces to describe, create, consume, and render REST web services.

I do not want to focus on the OpenApi scheme, it is better to read about it on certain resources. But we will assume that we have the actual OpenAPI json scheme of our REST requests. Next is an example of our custom library, which we use in our project. I'll go over the main points quickly to convey the general idea. Let's create a new project with the following structure:

src/operations/index.ts:

export * from './operations';

In .openapi-web-sdk-generatorrc.yaml we need to configure the options:

generators:
  - path: "@straw-hat/openapi-web-sdk-generator/dist/generators/react-query-fetcher"
    config:
      outputDir: "src/operations"
      packageName: "@super/test"

package.json:

{
  "name": "@super/test",
  "version": "1.0",
  "description": "test",
  "license": "UNLICENSED",
  "scripts": {
    "prepack": "yarn build",
    "codegen:sdk": "sht-openapi-web-sdk-generator local --config='./specification/openapi.json'"
  },
  "type": "commonjs",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
  ],
  "dependencies": {
    "@straw-hat/react-query-fetcher": "^1.3.1"
  },
  "peerDependencies": {
    "@straw-hat/fetcher": "^4.8.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.8"
  },
  "devDependencies": {
    "@straw-hat/fetcher": "^4.8.2",
    "@straw-hat/openapi-web-sdk-generator": "^2.4.2",
    "@straw-hat/tsconfig": "^3.0.2",
    "@types/jest": "^27.4.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-query": "^3.34.12"
  }
}

We use one package for code generation, all the others are needed so that our generated hooks receive dependencies after generation:

@straw-hat/openapi-web-sdk-generator

If we look at what this package is based on, we will see that we are using oclif - this is a node.js-based tool for creating a CLI.

Mustache.js is a template engine for creating js templates. cosmiconfig is a tool to make it convenient to work with the configuration.

In package.json we configure:

"oclif": {
    "commands": "./dist/commands",
    "bin": "sht-openapi-web-sdk-generator",
    "plugins": [
      "@oclif/plugin-help"
    ]
  }

Let's look in ./dist/commands, we have the local.ts file there:

import { flags } from '@oclif/command';
import { OpenapiWebSdkGenerator } from '../openapi-web-sdk-generator';
import { readOpenApiFile } from '../helpers';
import { BaseCommand } from '../base-command';

export default class LocalCommand extends BaseCommand {
  static override description = 'Generate the code from a local OpenAPI V3 file.';

  static override flags = {
    config: flags.string({
      required: true,
      description: 'OpenAPI V3 configuration file.',
    }),
  };

  async run() {
    const { flags } = this.parse(LocalCommand);

    const generator = new OpenapiWebSdkGenerator({
      context: process.cwd(),
      document: await readOpenApiFile(flags.config),
      config: this.configuration,
    }).loadGenerators();

    return Promise.all(generator.generate());
  }
}

We will inherit LocalCommand from BaseComand - this abstract class BaseCommand extends Command is the class that serves as the basis for each oclif command. And in the run() function, we set up the config and return Promise.all(generator.generate()); generator is an instance of the OpenapiWebSdkGenerator class with a description of the generator logic. This will be our code generation command.

Now let's see what are our classes from which we generate code: src/generators/react-query-fetcher

Here is how we generate code from a template:

import { CodegenBase } from '../../codegen-base';
import { OperationObject, PathItemObject } from '../../types';
import { forEachHttpOperation, getOperationDirectory, getOperationFileRelativePath } from '../../helpers';
import path from 'path';
import { OutputDir } from '../../output-dir';
import { TemplateDir } from '../../template-dir';
import { camelCase, pascalCase } from 'change-case';
import { OpenAPIV3 } from 'openapi-types';

const templateDir = new TemplateDir(
  path.join(__dirname, '..', '..', '..', 'templates', 'generators', 'react-query-fetcher')
);

function isQuery(operationMethod: string) {
  return OpenAPIV3.HttpMethods.GET.toUpperCase() == operationMethod.toUpperCase();
}

export interface ReactQueryFetcherCodegenOptions {
  outputDir: string;
  packageName: string;
}

export default class ReactQueryFetcherCodegen extends CodegenBase<ReactQueryFetcherCodegenOptions> {
  private readonly packageName: string;
  readonly #outputDir: OutputDir;

  constructor(opts: ReactQueryFetcherCodegenOptions) {
    super(opts);
    this.#outputDir = new OutputDir(this.options.outputDir);
    this.packageName = opts.packageName;
  }

  #processOperation = async (args: {
    operationMethod: string;
    operationPath: string;
    pathItem: PathItemObject;
    operation: OperationObject;
  }) => {
    const operationDirPath = getOperationDirectory(args.pathItem, args.operation);
    const operationFilePath = `use-${getOperationFileRelativePath(operationDirPath, args.operation)}`;
    const functionName = camelCase(args.operation.operationId);
    const typePrefix = pascalCase(args.operation.operationId);
    const pascalFunctionName = pascalCase(args.operation.operationId);
    const operationIndexImportPath = path.relative(
      this.#outputDir.resolveDir('index.ts'),
      this.#outputDir.resolve(operationFilePath)
    );

    await this.#outputDir.createDir(operationDirPath);

    const sourceCode = isQuery(args.operationMethod)
      ? await templateDir.render('query-operation.ts.mustache', {
          functionName,
          typePrefix,
          pascalFunctionName,
          importPath: this.packageName,
        })
      : await templateDir.render('mutation-operation.ts.mustache', {
          functionName,
          typePrefix,
          pascalFunctionName,
          importPath: this.packageName,
        });

    await this.#outputDir.writeFile(`${operationFilePath}.ts`, sourceCode);
    await this.#outputDir.formatFile(`${operationFilePath}.ts`);

    await this.#outputDir.appendFile(
      'index.ts',
      await templateDir.render('index-export-statement.ts.mustache', {
        operationImportPath: operationIndexImportPath,
      })
    );
  };

  async generate() {
    await this.#outputDir.resetDir();
    await forEachHttpOperation(this.document, this.#processOperation);
    await this.#outputDir.formatFile('index.ts');
  }
}

We see that according to different conditions that we take from the schema, we generate useQuery or useMutation templates from the query-operation.ts.mustache or mutation-operation.ts.mustache template, respectively:

import type { Fetcher } from '@straw-hat/fetcher';
import type { UseFetcherQueryArgs } from '@straw-hat/react-query-fetcher';
import type { {{{typePrefix}}}Response, {{{typePrefix}}}Params } from '{{{importPath}}}';
import { createQueryKey, useFetcherQuery } from '@straw-hat/react-query-fetcher';
import { {{{functionName}}} } from '{{{importPath}}}';

type Use{{{pascalFunctionName}}}Params = Omit<{{{typePrefix}}}Params, 'options'>;

type Use{{{pascalFunctionName}}}Args<TData, TError> = Omit<
  UseFetcherQueryArgs<{{{typePrefix}}}Response, TError, TData, Use{{{pascalFunctionName}}}Params>,
  'queryKey' | 'endpoint'
>;

const QUERY_KEY = ['{{{functionName}}}'];

export function use{{{pascalFunctionName}}}QueryKey(params?: Use{{{pascalFunctionName}}}Params) {
  return createQueryKey(QUERY_KEY, params);
}

export function use{{{pascalFunctionName}}}<TData = {{{typePrefix}}}Response, TError = unknown>(
  client: Fetcher,
  args: Use{{{pascalFunctionName}}}Args<TData, TError>,
) {
  return useFetcherQuery<{{{typePrefix}}}Response, TError, TData, Use{{{pascalFunctionName}}}Params>(client, {
    ...args,
    queryKey: QUERY_KEY,
    endpoint: {{{functionName}}},
  });
}

Excellent! Very superficially figured out how our code generation works.

Finishing and starting the generator

Let's return to the test project. We take the OpenAPI schema and put it in the specification folder:

What remains for us is to run the command in the console:

yarn codegen:sdk

In the console we see something like:

All of our custom hooks are generated and we can see them in the operations folder:

Now we can download and use these hooks as a standalone npm package in our project.

Automate React.Context creation

Alexey Lysenko — Tue, 19 Oct 2021 16:10:37 +0000

When the React team implemented Context API, developers started to have a better way to pass data through the components. I love to use many local contexts to wrap some parts of the app and have shared data without props chaos.

This is how we can automate React.Context creation, by passing in it our custom hook function:

import * as React from 'react';

type Hook<T, P> = (props: P) => T;

type ContextHook<T> = () => T;
type Provider<P> = React.FunctionComponent<P>;
type CreateContextHookReturn<T, P> = [Provider<P>, ContextHook<T>];

export function createContextHook<T = unknown, P = unknown>(
  useHook: Hook<T, P>,
  args: { name: string }
): CreateContextHookReturn<T, P> {
  const Context = React.createContext<T | undefined>(undefined);

  function useContextHook(): T {
    const context = React.useContext(Context);

    if (context === undefined) {
      throw new Error(
        `${args.name} Context value is undefined. Make sure you use the ${args.name} Provider before using the context.`
      );
    }

    return context!;
  }

  function Provider(props: React.PropsWithChildren<P>) {
    const value = useHook(props);
    return <Context.Provider value={value}>{props.children}</Context.Provider>;
  }

  return [Provider, useContextHook];
}

Then create your hook and pass it to the createContextHook:

import React from 'react';
import { createContextHook } from '../createContextHook';

// 1. Create your custom hook
type UseMyCustomHookProps = {
  someInitialValue: number;
}

function useMyCustomeHook(props: UseMyCustomeHookProps) {
  const [count, setCount] = React.useState(props.someInitialValue);
  return { count, setCount };
}

// 2. Create and get the Context Hook and Provider
Wrapped your application tree to the provider.

const [MyCustomHookProvider, useMyCustomHookContext] = createContextHook<
  // the return value of the hook
  ReturnType<typeof useMyHook>,
  // the hook input parameter
  UseMyHookProps
>(
  // Pass your hook reference
  useMyCustomHook,
  {
    // `name` is used only for debugging propose when you failed to connect the hook
    name: "MyCustomeHook"
  }
);

export { MyHookProvider, useMyHookContext };

Or use npm package:

import { createContextHook } from '@straw-hat/react-hooks';

Don't overcomplicate things

Alexey Lysenko — Mon, 04 Oct 2021 13:34:10 +0000

Wen working with the code, the programmer all the time faced with abstraction. This is common use technique that is used to simplify some things in one place and delegate realization to another place. It is very useful and cool. If I use

  const cardItem = arr.find(item => item.name === 'card')

I teach myself what this method does. What should I use as parameters and values that I expect to receive? And then use it all over the place, doesn’t dig into details of realizations hidden behind this method. This is greate.

All the frameworks, language features are based on good abstractions. Abstraction gives us the power and clean way to do complex things.

But can over-abstraction is be bad?

It can be where we can make things are not obvious and can confuse or just struggle other developers or even for us in the future. Let looks at the example:

In this case we use some custom function to add query for tag

 <a href={customRoute(ACCOUNT_DETAILS_PATH, 
        { pathQuery: { sid: active.sid }, })} />

So we use some customRout() method that adds some more logic for this that takes 2 params, URL and object.
What difficulties it can add to your code? Let say a new developer comes to our project. He sees that code and he will need to dig into that function to know the implementation or what the API is. Inside that function we can see something like this:

export function customRout(
  routePath: string,
  params?: {
    path?: Record<string, any>;
    query?: Record<any, any>;
  },
) {

const normalizedPath = replacePathParams(routePath, params?.path);

  if (params?.query) {
    return addQueryParams(normalizedPath, params.query);
  }

  return normalizedPath;
}

We have some extra logic to handle all params and also have some more abstractions with addQueryParams and normalizedPath. And that abstraction can have more inside..

This is another example that does the same thing but using template literal instead

 <a href={`${ACCOUNT_DETAILS_PATH}?sid=${active.sid}`}/>

it is clear and not abstracted. It’s readable well for every developer. Not no need to learn API or so.

The main point is to avoid over-complexities and unnecessary abstraction in the code. It will save time and brain energy for everyone in the project. And let you focused on really good abstractions in a place where they need.

React - Tailwind custom transform animations

Alexey Lysenko — Mon, 16 Aug 2021 07:39:00 +0000

In this article, we will create a custom transition animation in React/Tailwind app.
Let's build the CardContainer component with 3 cards. When we clicked on a single card, width and height changes. So the card becomes active.

Single Card component looks like this:



const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${activeCardId === id ? 40 : 32} border-2 border-black m-4`}
    >
      <div className="h-8 text-center">{title}</div>
      <div className={`h-${activeCardId === id ? 40 : 32} bg-${color}`} />
      <div className="h-12" />
    </div>
  );
};

If id and activeCardId props are equal, we set width and height to 40 if not, then to 32.

Now create a Card Container with 3 cards rendering inside:



function CardContainer() {
  const [activeCardId, setActiveCardId] = React.useState("");

  return (
    <div className="flex items-center justify-center p-10">
      {[
        { id: "1", title: "Wow", color: "red-600" },
        { id: "2", title: "Boss", color: "green-600" },
        { id: "3", title: "Coco", color: "pink-600" }
      ].map(card => (
        <Card
          key={card.id}
          id={card.id}
          title={card.title}
          color={card.color}
          activeCardId={activeCardId}
          setActiveCardId={setActiveCardId}
        />
      ))}
    </div>
  );
}

It renders cards with an id, title, and color. And here we are storing the activeCardId. For now, tailwind.config.js:



empty module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

and the results looks like this:

Looks good but can be even more perfect if we add some animation. First, let's modify tailwind.config.js with custom transitionProperty for width and height. And don’t forget to destruct defaultTheme.transitionProperty - we don’t want to overwrite other



const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        ...defaultTheme.transitionProperty,
        width: "width",
        height: "height"
      }
    }
  },
  variants: {},
  plugins: []
};

and in a Card adds this code 'transition-width duration-300 easy' for classes on width and height animation:



const Card = ({ title, color, id, setActiveCardId, activeCardId }) => {
  return (
    <div
      onClick={() => setActiveCardId(id)}
      className={`w-${
        activeCardId === id ? 40 : 32
      } border-2 border-black m-4 transition-width duration-300 easy`}
    >
      <div className="h-8 text-center">{title}</div>
      <div
        className={`h-${
          activeCardId === id ? 40 : 32
        } bg-${color} transition-width duration-300 easy`}
      />
      <div className="h-12" />
    </div>
  );
};

final result:

Codesandbox example:
https://codesandbox.io/s/react-tailwind-starter-forked-bkrv4?file=/src/App.js

Bettered stepper handling in React

Alexey Lysenko — Tue, 20 Jul 2021 17:45:49 +0000

Often in a React project, we need to do some kind of stepper with rendering components one after another or so. Let's take a look at the simple example.

function SomeModal() {
  [isFirstStep, setIsFirstStep] = React.useState(true);
  return (
    <div>{isFirstStep ? <FirstStepComponent /> : <SecondStepComponent />}</div>
  );
}

This is a trivial example to just get the point, and I think you solving such a task all the time. This binary checking works well if we have 2 steps to show. The funny things happening when we need more than 2 steps. Often some times to handle the stepper state, we solve using some kind of object with the active steps saved in, and then conditional rendering the current step. The problem is that we need to pass the handle function to all the components we need to manipulate our steps state. And sometimes it can look very messy.
Let's build a custom hook and wrapped it to the context to abstract all the manipulation and make our code reusable and clean.

live example of the final solution
https://codesandbox.io/s/zealous-moore-9yrbn?file=/src

First of all, let's build a custom hook that will control our stepper

use-stepper.tsx

import * as React from 'react';

type StepId = string;

export type Step = {
  id: StepId;
  order: number;
};

type UseStepperProps = {
  steps: Step[];
  initialStep: StepId;
};

function byStepId(stepId: StepId) {
  return (step: Step) => {
    return step.id === stepId;
  };
}

function sortByOrder(stepOne: Step, stepTwo: Step) {
  return stepOne.order - stepTwo.order;
}

function getId(step: Step) {
  return step.id;
}

export function useStepper(props: UseStepperProps) {
  const indexes = React.useMemo(
    () => props.steps.sort(sortByOrder).map(getId),
    [props.steps],
  );
  const [currentStep, setCurrentStep] = React.useState(() =>
    props.steps.find(byStepId(props.initialStep)),
  );

  function nextStep() {
    const nextIndex = indexes.indexOf(currentStep.id) + 1;

    if (nextIndex >= indexes.length) {
      return;
    }

    const nextStep = props.steps[nextIndex];
    setCurrentStep(nextStep);
  }

  function goToStep(stepId: StepId) {
    const step = props.steps.find(byStepId(stepId));

    if (process.env.NODE_ENV !== 'production') {
      if (!step) {
        throw new Error(`Step Id "${stepId}" is not 
      registered`);
      }
    }

    if (step) {
      setCurrentStep(step);
    }
  }

  function prevStep() {
    const prevIndex = indexes.indexOf(currentStep.id) - 1;

    if (prevIndex < 0) {
      return;
    }

    const prevStep = props.steps[prevIndex];
    setCurrentStep(prevStep);
  }

  function isCurrentStep(stepId: StepId) {
    return stepId === currentStep.id;
  }

  return {
    currentStep,
    nextStep,
    prevStep,
    goToStep,
    isCurrentStep,
  };
}

What going on here? We will describe steps as an object with the strings of id and order of a current showing step (will show this below) and use prevStep, goToStep, currentStep.. functions to manipulate the step we render.

Ok let's move on to create your step context, we wrap our steps components in and use the hook.

stepper-context.tsx

import * as React from 'react';
import { useStepper } from '..';

export const StepperContext = React.createContext<ReturnType<typeof useStepper>>(
  undefined,
);

export function useStepperContext() {
  const value = React.useContext(StepperContext);

  if (value === undefined) {
    throw new Error('Stepper Context is undefined');
  }

  return value;
}

We create a context for passing our values from useStepper and useStepperContext to use them in future components.

One more thing, we need to develop stepper.tsx component, it will wrapped up our components and will manage rendering under the hood.

stepper.tsx

import * as React from 'react';
import { StepperContext, useStepperContext } from '..';
import { useStepper } from '..';

type StepId = string

type StepType = {
  id: StepId;
  order: number;
};

type StepperProps = React.PropsWithChildren<{
  steps: StepType[];
  initialStep: StepId;
}>;

export function Stepper(props: StepperProps) {
  const value = useStepper(props);
  return (
    <StepperContext.Provider value={value}>
      {props.children}
    </StepperContext.Provider>
  );
}

type StepperStepProps = {
  step: StepId;
  component: React.ComponentType<any>;
};

export function Step(props: StepProps) {
  const stepperContext = useStepperContext();
  return stepperContext.isCurrentStep(props.step) ? <props.component /> : null;
}

It's done, now we can use this to run our steps like this just past our custom components inside the custom components, and use a hook for manage components rendering:


import * as React from "react";
import { Stepper, Step } from "..";
import { useStepperContext } from "..";

const STEPS = [
  { id: "first-step", order: 1 },
  { id: "second-components-step", order: 2 },
  { id: "id-for-the-third-step", order: 3 }
];

const FirstStep = () => {
  const stepperContext = useStepperContext();
  return (
    <div>
      <p>First step </p>
      <button onClick={stepperContext.nextStep}>Next</button>
    </div>
  );
};

const SecondStep = () => {
  const stepperContext = useStepperContext();
  return (
    <div>
      <p>Some second step</p>
      <button onClick={stepperContext.prevStep}>Prev</button>
      <button onClick={stepperContext.nextStep}>Next</button>
    </div>
  );
};

const ThirdStep = () => {
  const stepperContext = useStepperContext();
  return (
    <div>
      <p>Third step</p>
      <button onClick={stepperContext.prevStep}>Prev</button>
    </div>
  );
};

export function ContainerWithSteps() {
  return (
    <Stepper steps={STEPS} initialStep="first-step">
      <Step step="first-step" component={FirstStep} />
      <Step step="second-components-step" component={SecondStep} />
      <Step step="id-for-the-third-step" component={ThirdStep} />
    </Stepper>
  );
}

You can check the live example here
https://codesandbox.io/s/zealous-moore-9yrbn?file=/src

How to gets uploaded image Metadata on the front-end

Alexey Lysenko — Fri, 04 Jun 2021 15:05:21 +0000

Quite often when we implement uploading images, will be great to have the opportunity somehow to get image metadata (with, height, fileSize, name ..) in the front-end directly

Example of the input, with uploading the image file:

<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg"  onChange={ (e) => handleChange(e.target.files) } />

to get the name, file size and extension of the uploaded file:

const file = e.target.files[0]
const { name } = file
const fileExtension = name.split('.').pop()
const fileSize = file.size

in the case, if needs to get local URL thats used to show render uploaded image:

const localUrl = URL.createObjectURL(file)

To get width, height, of the uploaded image use new FileReader() with image.decode() method:

var reader = new FileReader()
reader.onload = async (e: any) => {
                let image = new Image()
                image.src = e.target.result
                await image.decode()
                                // now we can:
                                const width = image.width
                                const height = image.height
                }
reader.readAsDataURL(file)

this is async logic so a better way to use it in a project is to wrap it up with a new Promise, I use the async function wrapper to get all needed metadata:

// Function takes single uploaded img file, and returns width, height, fileSize and fileExtension
export const getImageMeta = async (
    file: File
): Promise<{
    width: number,
    height: number,
    fileSize: number,
    fileExtension: string,
    localUrl: string,
}> => {
    const { name } = file
    const fileExtension = name.split('.').pop()
    const localUrl = URL.createObjectURL(file)
    // reading a file to get height and width
    async function getImageParams(file: File) {
        return new Promise((resolve, reject) => {
            var reader = new FileReader()

            reader.onload = async (e: any) => {
                var image = new Image()
                image.src = e.target.result
                await image.decode()

                resolve({ width: image.width, height: image.height })
            }
            reader.readAsDataURL(file)
        })
    }
    const { width, height } = await getImageParams(file)

    return { width, height, fileSize: file.size, fileExtension, localUrl }
}

Manage multiple GitHub accounts on one Windows machine (HTTPS)

Alexey Lysenko — Fri, 01 Jan 2021 10:42:02 +0000

When you starting to work on commercial projects, often you have to manage multiple GitHub accounts. For comfortable push/pull your code between repositories from different accounts, we can youse simple and efficient setup.

Let's say you previously use git on your machine and configure git global config file. To check it open the terminal and :

git config --global -e

It opens you editor, and you may see something like this:

[user]
    email = yourEmail@gmail.com
    name = Your_Name
...

And this is great because you can push your code to GitHub account without entering credentials every time.
But what if it needs to push to repo from another account? In this case, git will reject with 403 err, and you must change your global git credentials. To make this comfortable lat set storing a repo name in a credential manager:

git config --global credential.github.com.useHttpPath true

to check it open config one more time

git config --global -e

you will see new config lines

[credential]
    useHttpPath = true
...

The is it. Now when you first time push to any account you will see a pop-up

Enter specific for this repo account credentials, and this will "bind" this account for the repo. And so in your machine, you can specify as many accounts/repos as you want.

For a more expanded explanation you can see this cool video that I found on youtube:
https://youtu.be/2MGGJtTH0bQ

Svelte for React dev

Alexey Lysenko — Wed, 09 Dec 2020 20:06:42 +0000

My main frontend framework is React, I use them in all my commercial project by default. It is some word, the best technology for the project is that you know, but sometimes we need to expand our experience and knowledge. For me, the best way to do this is to try new tech on my personal projects. And this is shine time for Svelte!

The project that I built is to track what booby you feed the baby last time. So my wife can click on a bubble, and add time and category to the list. You can see it deployed here
https://boobs-app.vercel.app/
and also you can take a look full code here:
https://github.com/detoner777/boobs-app

To initialize the svelte project, I use the REPL https://svelte.dev/blog/the-easiest-way-to-get-started
and ready to go.

Svelte is a component-based framework like the most modern popular ones. So if you are familiar with React you will without a problem handle Svelte. Let's take a look first at the project structure:

In the src directory, I have App.svelte this is our root svelte file. And main.js, this is the file has a code:

import App from "./App.svelte";

const app = new App({
  target: document.body,
});

export default app;

and used by rollup for bundling app.

In the component folder is two files which have .svelte

This is how we define Svelte components.

In the Item.svelte component that looks like this:

<script>
  export let time;
  export let boob;
  export let index;
</script>

<style>
  .item {
    font-size: 20px;
    padding: 0.5rem;
    border: 1px solid #03e2fc;
    border-width: 0 0 1px;
    width: 60%;
    margin: 0 auto;
    transition: all 0.3s;
  }
  .active {
    background: rgba(255, 255, 255, 0.1);
    border-width: 0.1px 0;
    transform: scale(1.3);
    margin-bottom: 0.5rem;
    transition: all 0.3s;
  }
</style>

<div class={`item ${index === 0 && 'active'}`}>
  <span>{time}</span>
  <span>{boob}</span>
</div>

it has 3 main sections:

<script>
all js file writs here
</script>

css

<style>
  .item {
    font-size: 20px;
    padding: 0.5rem;
    ...
  }
</style>

and layout:

<div>
  <span></span>
  <span></span>
</div>

In this structure App.svelte components parent for child Boobs.svelte and Item.svelte. Like in React we can pass propse from parent to child. In the App :

 <Item time={event.time} boob={event.boob} {index} />

{index} index value that passed itself. So it's the cool syntax in this case.
In the Item:

<script>
  export let time;
  export let boob;
  export let index;
</script>

Exporting values passed as props to our component.

Svelte based on a "true" reactivity for keeping the DOM in sync with your application state. It mins that you don't need to setState if need to update value, but directly assign new value

in React:

const [count, setCount] = useState(0);

function increment() {
  setCount(count + 1);
}

same in Svelte:

let count = 0;

function increment() {
  count += 1;
}

it youse the same concept but less code to write.

In React, we often use pattern map() to loop over components to render multiple lists and if/else block for conditional rendering. In the Svelte this pattern has a special syntax, intuitive for React developers

 <div class="item-container">
    {#if JSON.parse($events)?.length > 0}
      {#each JSON.parse($events).reverse() as event, index   (event.id)}
         <Item time={event.time} boob={event.boob} {index} />
      {/each}
    {/if}
  </div>

The expression JSON.parse($events).reverse() array but it can be array-like object (i.e. it has a length property). You can loop over generic iterables with each [...iterable].

This is a basic meeting with this technology. Svelte has very detailed and comfortably to use documentation https://svelte.dev/. As a developer personally I don't know when I use this on a real commercial project, but definitely, I will be using him on small apps.

ReactHooks/Redux prod ready eShopp

Alexey Lysenko — Sat, 25 Apr 2020 10:15:45 +0000

Hi everyone. I decided to publish project i working on, E-commerce demo for dev.to community.

http://detoner777.github.io/imba-eshop
https://github.com/detoner777/imba-eshop

I hope this helps anyone who decides to create such an application! And by the way, it will be glad to hear the some feedback.

Technologies used:

React with Hooks, Redux, Redux Thunk
React Bootstrap 4, SCSS
Lodash
.ENV, Google Map Reat, React Container Dimensions, React infinite scroller
Axios, Axios Mock Adapter, Faker

Features:

Home, Products, Product Details, Shopping Cart, Error pages + some inform pages
State management with Redux
Responsive design with Bootstrap 4 and custom styling using SCSS
Cart with increment, decrement and remove product abilities
Toast messages for adding/removing a product

Show/Hide Password on toggle in React Hooks

Alexey Lysenko — Sat, 28 Mar 2020 13:49:36 +0000

When we build SignUp/SignIn form, it will be cool to implement functionality for the user, can see current values that his enter. It's really easy do this using React, lets dive in too it.

npm i react-hook-form

We will install react-hook-form just for some basic validation. And use fontawesome icons for some fancy eye icon.

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-fontawesome

Now lets create component, just a basic form with two inputs and submit button

import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEye } from "@fortawesome/free-solid-svg-icons";
const eye = <FontAwesomeIcon icon={faEye} />;

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <div className="App">
      <input
        name="username"
        type="text"
        placeholder="Username"
        ref={register({ required: "This is required." })}
      />
      <div className="pass-wrapper">
        <input
          placeholder="Password"
          name="password"
          type="password"
          ref={register({ required: "This is required." })}
        />
        <i>{eye}</i>
      </div>
      <button type="submit" onClick={handleSubmit(onSubmit)}>
        Submit
      </button>
    </div>
  );
}

and add some CSS, for more pretty looks

.App {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-items: center;
  font-size: 22px;
  max-width: 500px;
  min-height: 672px;
  margin: 0 auto;
  border-radius: 25px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.App > input {
  margin-top: 200px;
}

input {
  margin: 0 auto;
  background-color: black;
  opacity: 50%;
  color: white;
  margin-top: 10px;
  width: 300px;
  height: 59px;
  font-size: 22px;
  margin-bottom: 14px;
  max-width: 527px;
  padding: 0 10%;
}

.pass-wrapper {
  position: relative;
  display: flex;
  margin-bottom: 14px;
}

i {
  position: absolute;
  top: 38%;
  right: 16%;
}
i:hover {
  color: #00fcb6;
  cursor: pointer;
}

button {
  width: 300px;
  height: 50px;
  margin: 0 auto;
}

Component now looks like this

Now lets add some state with boolean values to track current password field view

const [passwordShown, setPasswordShown] = useState(false);

and function to toggle values

  const togglePasswordVisiblity = () => {
    setPasswordShown(passwordShown ? false : true);
  };

let adding onClick handler to our eye icon, by the way you can use any other icon or button to implement this on your project

<i onClick={togglePasswordVisiblity}>{eye}</i>

finally we will change input type, depence what current state of the app

 <input
             ...
              type={passwordShown ? "text" : "password"}
             ...
            />

That's done, now we can change the current password placeholder visual just to click on your eye icon. If you want see all code, please check this CodeSandbox link Show/Hide Password on toggle
Please give a like, if this tutorial was useful for you))