Refactor MenuItem components

atomicdata-dev · Nov 14, 2024 · 6d00312 · 6d00312
1 parent 591fe0c
commit 6d00312
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 64 deletions.
diff --git a/browser/create-template/templates/nextjs-site/atomic.config.json b/browser/create-template/templates/nextjs-site/atomic.config.json
@@ -1,4 +1,4 @@
 {
   "outputFolder": "./src/ontologies",
-  "ontologies": ["<ONTOLOGY>"]
+  "ontologies": ["http://localhost:9883/01jc0ayh83cxwhdhrvhycr5gdd/website"]
 }
diff --git a/browser/create-template/templates/nextjs-site/src/app/[[...slug]]/page.tsx b/browser/create-template/templates/nextjs-site/src/app/[[...slug]]/page.tsx
@@ -4,6 +4,8 @@ import { core } from '@tomic/lib';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
+export let currentSubject: string | undefined;
+
 type Params = {
   slug?: string[];
 };
@@ -13,7 +15,7 @@ type Props = {
   searchParams?: Promise<Record<string, string | string[] | undefined>>;
 };
 
-const fetchResource = async (slug?: string[]) => {
+export const fetchResource = async (slug?: string[]) => {
   const path = slug ? `/${slug.join('/')}` : '/';
   return await getCurrentResource(path);
 };
@@ -39,6 +41,8 @@ const Page = async ({ params, searchParams }: Props) => {
     return notFound();
   }
 
+  currentSubject = resource.subject;
+
   return <FullPageView subject={resource.subject} searchParams={search} />;
 };
 

diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItem.tsx
@@ -1,65 +1,22 @@
-'use client';
-
 import type { MenuItem } from '@/ontologies/website';
 import MenuItemLink from './MenuItemLink';
 import styles from './MenuItem.module.css';
-import { useResource, useStore } from '@tomic/react';
-import { useCurrentSubject } from '@/app/context/CurrentSubjectContext';
-import { useId, useRef, useState } from 'react';
 import { store } from '@/store';
+import { useId } from 'react';
+import { currentSubject } from '@/app/[[...slug]]/page'; // BAD 👎
 
-const MenuItem = ({ subject }: { subject: string }) => {
-  const menuItem = useResource<MenuItem>(subject);
-  const { currentSubject } = useCurrentSubject();
+const MenuItem = async ({ subject }: { subject: string }) => {
   const id = useId();
   const anchorName = `--menuItem-${id}`;
-  const popover = useRef<HTMLDivElement>(null);
-  const button = useRef<HTMLButtonElement>(null);
-  const [submenuPosition, setSubmenuPosition] = useState({
-    top: '0px',
-    left: '0px',
-  });
-
-  const calcPopoverPosition = () => {
-    if (!button.current || !popover.current) return;
-
-    if (CSS.supports('anchor-name', '--something')) {
-      return;
-    }
-
-    const rect = button.current.getBoundingClientRect();
-
-    const newSubmenuPosition = { ...submenuPosition };
-
-    newSubmenuPosition.top = `calc(${rect.top}px + 2rem)`;
-    newSubmenuPosition.left = `calc(${rect.left}px - (var(--menu-width) / 2 - ${
-      rect.width / 2
-    }px))`;
-
-    setSubmenuPosition(newSubmenuPosition);
-  };
-
-  const closePopover = () => {
-    popover.current?.hidePopover();
-  };
 
-  const onFocusOut = (event: React.FocusEvent<HTMLDivElement>) => {
-    if (
-      !event.relatedTarget ||
-      !event.currentTarget.contains(event.relatedTarget)
-    ) {
-      closePopover();
-    }
-  };
+  const menuItem = await store.getResource<MenuItem>(subject);
 
   return menuItem.props.subItems && menuItem.props.subItems.length > 0 ? (
     <>
       <button
         className={styles.button}
         popoverTarget={id}
         popoverTargetAction='toggle'
-        onClick={calcPopoverPosition}
-        ref={button}
         style={{ '--anchor-name': anchorName } as React.CSSProperties}
       >
         {menuItem.title}
@@ -69,12 +26,8 @@ const MenuItem = ({ subject }: { subject: string }) => {
         id={id}
         className={styles.submenu}
         popover='manual'
-        ref={popover}
-        onBlur={onFocusOut}
         style={
           {
-            '--top': submenuPosition.top,
-            '--left': submenuPosition.left,
             '--anchor-name': anchorName,
           } as React.CSSProperties
         }

diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.module.css b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.module.css
@@ -6,12 +6,13 @@
   display: inline-flex;
   border-radius: var(--theme-border-radius);
   transition: background-color 100ms ease-in-out;
-}
 
-.link:hover {
-  background-color: var(--theme-color-bg-2);
-}
+  &[aria-current='page'] {
+    color: var(--theme-color-accent);
+  }
 
-.linkActive {
-  color: var(--theme-color-accent);
+  &:hover,
+  &:focus-visible {
+    background-color: var(--theme-color-bg-2);
+  }
 }
diff --git a/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx b/browser/create-template/templates/nextjs-site/src/views/MenuItem/MenuItemLink.tsx
@@ -2,18 +2,20 @@ import { website } from '@/ontologies/website';
 import { unknownSubject, Resource } from '@tomic/lib';
 import styles from './MenuItemLink.module.css';
 import clsx from 'clsx';
-import { useResource } from '@tomic/react';
+import { store } from '@/store';
 
-const MenuItemLink = ({
+const MenuItemLink = async ({
   resource,
   active = false,
 }: {
   resource: Resource;
   active?: boolean;
 }) => {
-  const page = useResource(resource.subject ?? unknownSubject);
+  const page = await store.getResource(resource.subject ?? unknownSubject);
 
-  const pageHrefValue = useResource(page.get(website.properties.linksTo));
+  const pageHrefValue = await store.getResource(
+    page.get(website.properties.linksTo),
+  );
 
   const href =
     pageHrefValue.get(website.properties.href) ??
@@ -26,7 +28,7 @@ const MenuItemLink = ({
       className={clsx(styles.link, { [styles.linkActive]: active })}
       aria-current={active ? 'page' : 'false'}
     >
-      {resource.loading ? '' : page.title}
+      {resource.title}
     </a>
   );
 };