refactor(web): remove typescript

packages/web/src/components/ListItemLink/index.jsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useMatch } from 'react-router-dom';
+import ListItem from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { Link } from 'react-router-dom';
+export default function ListItemLink(props) {
+  const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
+  const selected = useMatch({ path: to, end: true });
+  const CustomLink = React.useMemo(
+    () =>
+      React.forwardRef(function InLineLink(linkProps, ref) {
+        try {
+          // challenge the link to check if it's absolute URL
+          new URL(to); // should throw an error if it's not an absolute URL
+          return (
+            <a
+              {...linkProps}
+              ref={ref}
+              href={to}
+              target={target}
+              rel="noopener noreferrer"
+            />
+          );
+        } catch {
+          return <Link ref={ref} {...linkProps} to={to} />;
+        }
+      }),
+    [to],
+  );
+  return (
+    <li>
+      <ListItem
+        component={CustomLink}
+        sx={{ pl: { xs: 2, sm: 3 } }}
+        selected={!!selected}
+        onClick={onClick}
+        data-test={dataTest}
+        target={target}
+      >
+        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
+        <ListItemText
+          primary={primary}
+          primaryTypographyProps={{ variant: 'body1' }}
+        />
+      </ListItem>
+    </li>
+  );
+}

packages/web/src/components/ListItemLink/index.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { useMatch } from 'react-router-dom';
-import ListItem from '@mui/material/ListItemButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import { Link, LinkProps } from 'react-router-dom';
-
-type ListItemLinkProps = {
-  icon: React.ReactNode;
-  primary: string;
-  to: string;
-  target?: '_blank';
-  onClick?: (event: React.SyntheticEvent) => void;
-  'data-test'?: string;
-};
-
-export default function ListItemLink(
-  props: ListItemLinkProps
-): React.ReactElement {
-  const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
-  const selected = useMatch({ path: to, end: true });
-
-  const CustomLink = React.useMemo(
-    () =>
-      React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
-        function InLineLink(linkProps, ref) {
-          try {
-            // challenge the link to check if it's absolute URL
-            new URL(to); // should throw an error if it's not an absolute URL
-
-            return (
-              <a
-                {...linkProps}
-                ref={ref}
-                href={to}
-                target={target}
-                rel="noopener noreferrer"
-              />
-            );
-          } catch {
-            return <Link ref={ref} {...linkProps} to={to} />;
-          }
-        }
-      ),
-    [to]
-  );
-
-  return (
-    <li>
-      <ListItem
-        component={CustomLink}
-        sx={{ pl: { xs: 2, sm: 3 } }}
-        selected={!!selected}
-        onClick={onClick}
-        data-test={dataTest}
-        target={target}
-      >
-        <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
-        <ListItemText
-          primary={primary}
-          primaryTypographyProps={{ variant: 'body1' }}
-        />
-      </ListItem>
-    </li>
-  );
-}