clean code

apps/app/src/features/page-tree/components/SimpleItemContent.tsx

@@ -1,8 +1,6 @@
-import type { JSX } from 'react';
-
-import nodePath from 'path';
-
+import { useId } from 'react';
 import { useTranslation } from 'next-i18next';
+import path from 'pathe';
 import { UncontrolledTooltip } from 'reactstrap';
 
 import type { IPageForItem } from '~/interfaces/page';
@@ -10,16 +8,21 @@ import { shouldRecoverPagePaths } from '~/utils/page-operation';
 
 import styles from './SimpleItemContent.module.scss';
 
-
 const moduleClass = styles['simple-item-content'] ?? '';
 
-
-export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element => {
+export const SimpleItemContent = ({
+  page,
+}: {
+  page: IPageForItem;
+}): JSX.Element => {
   const { t } = useTranslation();
 
-  const pageName = nodePath.basename(page.path ?? '') || '/';
+  const pageName = path.basename(page.path ?? '') || '/';
+
+  const shouldShowAttentionIcon =
+    page.processData != null ? shouldRecoverPagePaths(page.processData) : false;
 
-  const shouldShowAttentionIcon = page.processData != null ? shouldRecoverPagePaths(page.processData) : false;
+  const spanId = `path-recovery-${useId()}`;
 
   return (
     <div
@@ -28,8 +31,17 @@ export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element
     >
       {shouldShowAttentionIcon && (
         <>
-          <span id="path-recovery" className="material-symbols-outlined mr-2 text-warning">warning</span>
-          <UncontrolledTooltip placement="top" target="path-recovery" fade={false}>
+          <span
+            id={spanId}
+            className="material-symbols-outlined mr-2 text-warning"
+          >
+            warning
+          </span>
+          <UncontrolledTooltip
+            placement="top"
+            target={spanId}
+            fade={false}
+          >
             {t('tooltip.operation.attention.rename')}
           </UncontrolledTooltip>
         </>
@@ -37,9 +49,15 @@ export const SimpleItemContent = ({ page }: { page: IPageForItem }): JSX.Element
       {page != null && page.path != null && page._id != null && (
         <div className="grw-page-title-anchor flex-grow-1">
           <div className="d-flex align-items-center">
-            <span className={`text-truncate me-1 ${page.isEmpty && 'opacity-75'}`}>{pageName}</span>
-            { page.wip && (
-              <span className="wip-page-badge badge rounded-pill me-1 text-bg-secondary">WIP</span>
+            <span
+              className={`text-truncate me-1 ${page.isEmpty && 'opacity-75'}`}
+            >
+              {pageName}
+            </span>
+            {page.wip && (
+              <span className="wip-page-badge badge rounded-pill me-1 text-bg-secondary">
+                WIP
+              </span>
             )}
           </div>
         </div>