Refactoring tooltips

src/components/Tooltip/FunctionLocation/index.tsx

@@ -1,12 +1,15 @@
 import type { ComponentChild as CC } from 'preact';
 import s from './FunctionLocation.css';
 import { createPath } from './util';
+import { useStoreon } from '../../../store';
 
 interface Props {
   target: HTMLInputElement;
 }
 
 export const FunctionLocation: FC<Props> = ({ target }) => {
+  useStoreon('items');
+
   const tree = createPath(target.value).reduceRight<CC>((acc, item, index): CC => (
     <ul className={index < 1 ? s.list : s.sublist}>
       <li>

src/components/Tooltip/FunctionName.tsx

@@ -1,12 +1,15 @@
 import s from './styles.css';
 import c from '../../styles/code.css';
 import { classNames } from '../../util/component';
+import { useStoreon } from '../../store';
 
 interface Props {
   target: HTMLInputElement;
 }
 
 export const FunctionName: FC<Props> = ({ target }) => {
+  useStoreon('items');
+
   const opClass = classNames([
     c.mtk4,
     !target.value && c.err,

src/components/Tooltip/index.tsx

@@ -1,70 +1,64 @@
-import { h, Component, createRef, type ComponentClass } from 'preact';
-import { useCallback } from 'preact/hooks';
-import HintFactory, { type ReactHintProps } from 'react-hint';
+import { Component, createRef, type ComponentClass } from 'preact';
+import type { ReactHintProps } from 'react-hint';
+// @ts-expect-error @typescript-eslint/ban-ts-comment
+import HintFactory from 'react-hint/src';
 
 import s from './styles.css';
-import { useStoreon } from '../../store';
 import { KEYS } from '../../constants';
 import { FunctionName } from './FunctionName';
 import { FunctionLocation } from './FunctionLocation';
 import { CronExamplesTooltip } from './CronExamplesTooltip';
 import cronExamples from './CronExamplesTooltip/cronExamples.json';
 
-// @ts-expect-error @typescript-eslint/ban-ts-comment
-const Hint: ComponentClass<ReactHintProps> = HintFactory({ createElement: h, Component, createRef });
-const delay = {
+const Hint: ComponentClass<ReactHintProps> = HintFactory({ Component, createRef });
+
+const delay: ReactHintProps['delay'] = {
   show: 500,
   hide: 100,
-} as const;
-
-const dataList = cronExamples.map((i) => (
-  <option key={i.value} value={i.value}>
-    {i.label}
-  </option>
-));
+};
 
-export const Tooltips: FC = () => {
-  const { items } = useStoreon('items');
+const events: ReactHintProps['events'] = {
+  focus: true,
+  click: true,
+  hover: false,
+};
 
-  const onRenderContent = useCallback((target: HTMLInputElement) => {
-    switch (target.dataset.name) {
-      case KEYS.functionLocation: {
-        return (
-          <FunctionLocation target={target} />
-        );
-      }
-      case KEYS.functionName: {
-        return (
-          <FunctionName target={target} />
-        );
-      }
-      case KEYS.cronExpression: {
-        return (
-          <CronExamplesTooltip target={target} />
-        );
-      }
+const onRenderContent = ((target: HTMLInputElement) => {
+  switch (target.dataset.name) {
+    case KEYS.functionLocation: {
+      return (
+        <FunctionLocation target={target} />
+      );
+    }
+    case KEYS.functionName: {
+      return (
+        <FunctionName target={target} />
+      );
     }
-    return null;
-  }, [items]);
+    case KEYS.cronExpression: {
+      return (
+        <CronExamplesTooltip target={target} />
+      );
+    }
+  }
+  return null;
+}) as unknown as ReactHintProps['onRenderContent'];
 
-  return (
-    <>
-      <Hint events delay={delay} />
-      <Hint
-        persist
-        attribute="data-fl"
-        events={{
-          focus: true,
-          click: true,
-          hover: false,
-        }}
-        className={s.fs}
-        // @ts-expect-error @typescript-eslint/ban-ts-comment
-        onRenderContent={onRenderContent}
-      />
-      <datalist id="cron-examples">
-        {dataList}
-      </datalist>
-    </>
-  );
-};
+export const Tooltips: FC = () =>
+  <>
+    <Hint events delay={delay} />
+    <Hint
+      persist
+      attribute="data-fl"
+      events={events}
+      className={s.fs}
+      onRenderContent={onRenderContent}
+    />
+    <datalist id="cron-examples">
+      {cronExamples.map((i) =>
+        <option key={i.value} value={i.value}>
+          {i.label}
+        </option>
+      )}
+    </datalist>
+  </>;

src/store/itemsModule.ts

@@ -7,7 +7,7 @@ const key = 'items';
 const getItems = (): IItem[] => {
   const data = localStorage.getItem(key);
 
-  if (data != null) {
+  if (data) {
     try {
       const items = JSON.parse(data);
 

src/util/parseCron.ts

@@ -1,7 +1,7 @@
 import { isValidCron } from 'cron-validator';
 import { toString } from 'cronstrue';
 
-type CronResult = [
+type CronResult = readonly [
   isError: boolean,
   message: string,
 ];