@redocly/theme/src/core/hooks/code-walkthrough/use-renderable-files.ts

Shared UI components lib

import { useMemo } from 'react';

import type { CodeWalkthroughFile } from '@redocly/config';

import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
import { getFileIconByExt } from '../../utils/GetFileIcon';
import { removeLeadingSlash } from '../../utils/urls';

export type RenderableFile = CodeWalkthroughFile & {
  fileIcon: React.JSX.Element;
  parentFolder: string;
  isNameDuplicate: boolean;
  inRootDir: boolean;
};

export function useRenderableFiles(files: CodeWalkthroughFile[]): RenderableFile[] {
  return useMemo(
    function () {
      const filePaths = files.map(({ path }) => path);
      const rootDir = findClosestCommonDirectory(filePaths);

      const renderableFiles = files.map((file) => {
        const fileIcon = getFileTypeIcon(file.basename);
        const parentFolder = file.path.split('/').slice(-2, -1)[0];
        const isNameDuplicate = files.some(
          (_file) => file.basename === _file.basename && file.path !== _file.path,
        );
        const inRootDir = file.path === `${removeLeadingSlash(rootDir)}/${file.basename}`;

        return {
          ...file,
          fileIcon,
          inRootDir,
          parentFolder,
          isNameDuplicate,
        };
      });

      return renderableFiles;
    },
    [files],
  );
}

function getFileTypeIcon(basename: string) {
  const extension = basename.split('.').pop()?.toLowerCase() || '';
  return getFileIconByExt(extension);
}