fix and update Anchor component; now works properly again and also works for Vizality dashboard #hash links

src/core/modules/components/Anchor.jsx

@@ -1,59 +1,98 @@
-import React, { memo } from 'react';
-
-import { getModule, constants } from '@vizality/webpack';
-import { joinClassNames } from '@vizality/util/dom';
+import { FluxDispatcher } from '@vizality/webpack';
 import { toPlural } from '@vizality/util/string';
 import { Constants } from '@discord/constants';
+import { error } from '@vizality/util/logger';
+import { fetchUser } from '@discord/user';
+import React, { memo } from 'react';
 
 import AsyncComponent from './AsyncComponent';
 
 const Anchor = AsyncComponent.fromDisplayName('Anchor');
 
-export default memo(props => {
-  const { className, userId, children, type, addonId } = props;
+/**
+ * @private
+ */
+const _labels = [ 'Component', 'Anchor' ];
+const _error = (...message) => error({ labels: _labels, message });
 
+export default memo(({ href, className, userId, children, type, addonId, ...other }) => {
   return (
-    <>
-      {!type
-        ? <Anchor {...props}>
-          {children}
-        </Anchor>
-        : type === 'user'
-          ? <Anchor
-            className={joinClassNames('vz-user-anchor', className)}
-            vz-user-id={userId || null}
-            href={userId && `${window.location.origin}${constants.Endpoints.USERS}/${userId}`}
-            onClick={e => {
-              e.preventDefault();
-              if (!userId) return;
-              // @todo Use Discord module for this after it's set up.
-              getModule('getUser').getUser(userId)
-                .then(() => getModule('open', 'fetchProfile').open(userId))
-                .catch(() => vizality.api.notifications.sendToast({
-                  header: 'User Not Found',
-                  type: 'User Not Found',
-                  content: 'That user was unable to be located.',
-                  icon: 'PersonRemove'
-                }));
-            }}
-          >
-            {children}
-          </Anchor>
-          : type === 'plugin' || type === 'theme'
-            ? <Anchor
-              className={joinClassNames('vz-addon-anchor', className)}
-              vz-addon-id={addonId || null}
-              onClick={e => {
-                e.preventDefault();
-                // @todo Use Discord module for this after it's set up.
-                if (!addonId) return;
-                vizality.api.routes.navigateTo(`/vizality/${toPlural(type)}/${addonId}`);
-              }}
-            >
-              {children}
-            </Anchor>
-            : null
+    <Anchor
+      {...other}
+      className={className}
+      vz-type={type}
+      vz-user-id={userId}
+      vz-addon-id={addonId}
+      href={type === 'user' && userId
+        ? `${window.location.origin}${Constants.Endpoints.USERS}/${userId}`
+        : type === 'plugin' || type === 'theme' && addonId
+          ? `${window.location.origin}vizality/${toPlural(type)}/${addonId}}`
+          : href
       }
-    </>
+      onClick={async evt => {
+        evt?.persist?.();
+        try {
+          console.log(href);
+          /**
+           * 
+           */
+          if (!userId && !addonId && !href) {
+            return evt.preventDefault();
+          }
+
+          /**
+           * 
+           */
+          if (href?.startsWith('#')) {
+            evt.preventDefault();
+            const topOfElement = document.querySelector(`#${href.substring(1)}`)?.offsetTop;
+            const scroller = document.querySelector('.vz-dashboard-scroller');
+            /**
+             * If the elements don't exist at the check, just load the page normally as if
+             * there was no hash.
+             */
+            if (!topOfElement || !scroller) {
+              return;
+            }
+            /**
+             * Try to set the scroller position to the hash element.
+             */
+            return scroller.scroll({ top: topOfElement - 30, behavior: 'smooth' });
+          }
+
+          /**
+           * 
+           */
+          if (type === 'user') {
+            evt.preventDefault();
+            const user = await fetchUser(userId);
+            if (!user) {
+              return vizality.api.notifications.sendToast({
+                id: 'VIZALITY_USER_NOT_FOUND',
+                header: 'User Not Found',
+                content: 'That user was unable to be located.',
+                icon: 'PersonRemove'
+              });
+            }
+            return FluxDispatcher.dirtyDispatch({
+              type: Constants.ActionTypes.USER_PROFILE_MODAL_OPEN,
+              userId
+            });
+          }
+
+          /**
+           * 
+           */
+          if (type === 'plugin' || type === 'theme') {
+            evt.preventDefault();
+            return vizality.api.routes.navigateTo(`/vizality/${toPlural(type)}/${addonId}`);
+          }
+        } catch (err) {
+          return _error(err);
+        }
+      }}
+    >
+      {children}
+    </Anchor>
   );
 });