Update template to server components

atomicdata-dev · Oct 23, 2024 · 8e47da0 · 8e47da0
1 parent 6039e23
commit 8e47da0
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 30 deletions.
diff --git a/browser/create-template/templates/nextjs-site/src/components/Image.tsx b/browser/create-template/templates/nextjs-site/src/components/Image.tsx
@@ -1,7 +1,13 @@
 'use client';
 
 import { Image as AtomicImage } from '@tomic/react';
+import NoSSR from './NoSSR';
+import React from 'react';
 
 export const Image = ({ subject, alt }: { subject: string; alt: string }) => {
-  return <AtomicImage subject={subject} alt={alt} />;
+  return (
+    <NoSSR>
+      <AtomicImage subject={subject} alt={alt} />
+    </NoSSR>
+  );
 };
diff --git a/browser/create-template/templates/nextjs-site/src/components/Navbar.tsx b/browser/create-template/templates/nextjs-site/src/components/Navbar.tsx
@@ -21,7 +21,7 @@ const Navbar = async () => {
             {site.title}
           </a>
           <ul className={styles.ul}>
-            {site.get(website.properties.menuItems)?.map((menuItem: string) => (
+            {site.props.menuItems?.map((menuItem: string) => (
               <li key={menuItem}>
                 <MenuItem subject={menuItem} />
               </li>

diff --git a/browser/create-template/templates/nextjs-site/src/components/NoSSR.tsx b/browser/create-template/templates/nextjs-site/src/components/NoSSR.tsx
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+const NoSsr = (props: { children: React.ReactNode }) => (
+  <React.Fragment>{props.children}</React.Fragment>
+);
+
+export default dynamic(() => Promise.resolve(NoSsr), {
+  ssr: false,
+});
diff --git a/browser/create-template/templates/nextjs-site/src/views/Block/ImageGalleryBlock.tsx b/browser/create-template/templates/nextjs-site/src/views/Block/ImageGalleryBlock.tsx
@@ -1,22 +1,18 @@
 import { Resource } from '@tomic/lib';
 import { Image } from '@/components/Image';
 import styles from './ImageGalleryBlock.module.css';
-import { Suspense } from 'react';
-import { website } from '@/ontologies/website';
 
 const ImageGalleryBlock = async ({ resource }: { resource: Resource }) => {
   return (
     <>
       {resource.props.name ? <h2>{resource.props.name}</h2> : null}
 
       <div className={styles.wrapper}>
-        {resource
-          .get(website.properties.images)
-          ?.map((image: string, index: number) => (
-            <div key={index} className={styles.image}>
-              <Image subject={image} alt='' />
-            </div>
-          ))}
+        {resource.props.images?.map((image: string, index: number) => (
+          <div key={index} className={styles.image}>
+            <Image subject={image} alt='' />
+          </div>
+        ))}
       </div>
     </>
   );

diff --git a/browser/create-template/templates/nextjs-site/src/views/DefaultView.tsx b/browser/create-template/templates/nextjs-site/src/views/DefaultView.tsx
@@ -2,7 +2,6 @@ import { store } from '@/app/store';
 import { Resource } from '@tomic/react';
 
 const DefaultView = async ({ resource }: { resource: Resource }) => {
-  // const subjectResource = useResource(resource.subject);
   const subjectResource = await store.getResource(resource.subject);
 
   return <p>No supported view for {subjectResource.title}.</p>;

diff --git a/browser/create-template/templates/nextjs-site/src/views/ListItem/BlogListItem.tsx b/browser/create-template/templates/nextjs-site/src/views/ListItem/BlogListItem.tsx
@@ -1,8 +1,9 @@
 import { Blogpost } from '@/ontologies/website';
-import { type Resource, Image } from '@tomic/react';
+import type { Resource } from '@tomic/react';
 import styles from './BlogListItem.module.css';
+import { Image } from '@/components/Image';
 
-const BlogListItem = ({ resource }: { resource: Resource<Blogpost> }) => {
+const BlogListItem = async ({ resource }: { resource: Resource<Blogpost> }) => {
   const formatter = new Intl.DateTimeFormat('default', {
     year: 'numeric',
     month: 'long',
@@ -14,7 +15,7 @@ const BlogListItem = ({ resource }: { resource: Resource<Blogpost> }) => {
   return (
     <a className={styles.card} href={resource.props.href}>
       <div className={styles.imageWrapper}>
-        {/* <Image subject={resource.props.coverImage} alt='' /> */}
+        <Image subject={resource.props.coverImage} alt='' />
       </div>
       <div className={styles.cardContent}>
         <div className={styles.publishDate}>{date}</div>

diff --git a/browser/create-template/templates/nextjs-site/src/views/ListItem/ListItemView.tsx b/browser/create-template/templates/nextjs-site/src/views/ListItem/ListItemView.tsx
@@ -5,8 +5,6 @@ import DefaultView from '@/views/DefaultView';
 import { store } from '@/app/store';
 
 const ListItemView = async ({ subject }: { subject: string }) => {
-  // const listItem = useResource(subject);
-
   const listItem = await store.getResource(subject);
 
   const Component = listItem.matchClass(

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
@@ -7,19 +7,17 @@ import { unknownSubject } from '@tomic/lib';
 const MenuItem = async ({ subject }: { subject: string }) => {
   const menuItem = await store.getResource<MenuItem>(subject ?? unknownSubject);
 
-  const id = (Math.random().toString(36) + '00000000000000000').slice(2, 10);
-
   return menuItem.props.subItems && menuItem.props.subItems.length > 0 ? (
     <>
       <button
         className={styles.button}
-        popovertarget={id}
-        popovertargetaction='toggle'
+        popoverTarget='popOver'
+        popoverTargetAction='toggle'
       >
         {menuItem.title}
       </button>
 
-      <div id={id} className={styles.submenu} popover='auto'>
+      <div id={'popOver'} className={styles.submenu} popover='auto'>
         <ul className={styles.ul}>
           {menuItem.props.subItems?.map((subItem: string, index: number) => (
             <li key={index}>

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
@@ -1,6 +1,5 @@
 import { website } from '@/ontologies/website';
 import { unknownSubject, Resource } from '@tomic/lib';
-import { useValue, useResource } from '@tomic/react';
 import styles from './MenuItemLink.module.css';
 import clsx from 'clsx';
 import { store } from '@/app/store';
@@ -12,16 +11,16 @@ const MenuItemLink = async ({
   resource: Resource;
   active?: boolean;
 }) => {
-  // const page = useResource(resource.props.linksTo ?? unknownSubject);
-  // const [pageHrefValue] = useValue(page, website.properties.href);
-
-  // const href = pageHrefValue ?? resource.props.externalLink ?? '#';
-
   const page = await store.getResource(resource.subject ?? unknownSubject);
-  const pageHrefValue = page.get(website.properties.href);
+
+  const pageHrefValue = await store.getResource(
+    page.get(website.properties.linksTo),
+  );
 
   const href =
-    pageHrefValue ?? resource.get(website.properties.externalLink) ?? '#';
+    pageHrefValue.get(website.properties.href) ??
+    resource.props.externalLink ??
+    '#';
 
   return (
     <a