Adding Alias as a Parameter (#471)

* redirect on alias to a new page

* move alias to a HOC wrapper

apps/client/src/features/AliasWrapper.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable react/display-name */
+import useAliases from '../common/hooks-query/useAliases';
+import { getAliasRoute } from '../common/utils/aliases';
+import { ComponentType, useEffect } from 'react';
+import { useSearchParams, useNavigate, useLocation } from 'react-router-dom';
+
+const withAlias = <P extends object>(Component: ComponentType<P>) => {
+  return (props: Partial<P>) => {
+    const { data } = useAliases();
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    // navigate if is alias route
+    useEffect(() => {
+      if (!data) return;
+      const url = getAliasRoute(location, data, searchParams);
+      // navigate to this route if its not empty
+      if (url) {
+        navigate(url);
+      }
+    }, [data, searchParams, navigate, location]);
+
+    return <Component {...props} />;
+  };
+};
+
+export default withAlias;

apps/client/src/features/modals/settings-modal/AliasesForm.tsx

@@ -131,7 +131,7 @@ export default function AliasesForm() {
                 isDisabled={disableInputs}
               />
               <TooltipActionBtn
-                clickHandler={(event) => handleLinks(event, alias.pathAndParams)}
+                clickHandler={(event) => handleLinks(event, alias.alias)}
                 tooltip='Test alias'
                 aria-label='Test alias'
                 size='xs'