fix: last fixes

Author: alanpoulain

src/generators/BaseGenerator.js

@@ -37,10 +37,10 @@ export default class {
     }
   }
 
-  createFileFromPattern(pattern, dir, lc, context) {
+  createFileFromPattern(pattern, dir, value, context, templateValue = "foo") {
     this.createFile(
-      sprintf(pattern, "foo"),
-      sprintf(`${dir}/${pattern}`, lc),
+      sprintf(pattern, templateValue),
+      sprintf(`${dir}/${pattern}`, value),
       context
     );
   }

src/generators/NextGenerator.js

@@ -17,8 +17,9 @@ export default class NextGenerator extends BaseGenerator {
       "components/foo/Form.tsx",
 
       // types
-      "types/Collection.ts",
+      "types/collection.ts",
       "types/foo.ts",
+      "types/item.ts",
 
       // pages
       "pages/foos/[id]/index.tsx",
@@ -30,7 +31,7 @@ export default class NextGenerator extends BaseGenerator {
       "utils/dataAccess.ts",
       "utils/mercure.ts",
     ]);
-    
+
     handlebars.registerHelper("compare", hbh_comparison.compare);
   }
 
@@ -70,22 +71,25 @@ export default class NextGenerator extends BaseGenerator {
 
     // Copy with patterned name
     this.createDir(`${dir}/components/${context.lc}`);
-    this.createDir(`${dir}/pages/${context.lc}s`);
-    this.createDir(`${dir}/pages/${context.lc}s/[id]`);
+    this.createDir(`${dir}/pages/${context.name}`);
+    this.createDir(`${dir}/pages/${context.name}/[id]`);
     [
       // components
       "components/%s/List.tsx",
       "components/%s/Show.tsx",
       "components/%s/Form.tsx",
-
-      // pages
-      "pages/%ss/[id]/index.tsx",
-      "pages/%ss/[id]/edit.tsx",
-      "pages/%ss/index.tsx",
-      "pages/%ss/create.tsx",
     ].forEach((pattern) =>
       this.createFileFromPattern(pattern, dir, context.lc, context)
     );
+    [
+      // pages
+      "pages/%s/[id]/index.tsx",
+      "pages/%s/[id]/edit.tsx",
+      "pages/%s/index.tsx",
+      "pages/%s/create.tsx",
+    ].forEach((pattern) =>
+      this.createFileFromPattern(pattern, dir, context.name, context, "foos")
+    );
 
     // interface pattern should be camel cased
     this.createFile("types/foo.ts", `${dir}/types/${context.ucf}.ts`, context);
@@ -97,7 +101,8 @@ export default class NextGenerator extends BaseGenerator {
       "components/common/ReferenceLinks.tsx",
 
       // types
-      "types/Collection.ts",
+      "types/collection.ts",
+      "types/item.ts",
 
       // utils
       "utils/dataAccess.ts",

templates/next/components/common/Pagination.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { PagedCollection } from "../../types/Collection";
+import { PagedCollection } from "../../types/collection";
 
 interface Props {
   collection: PagedCollection<unknown>;

templates/next/pages/foos/create.tsx

@@ -1,6 +1,6 @@
 import { NextComponentType, NextPageContext } from "next";
-import { Form } from "../../components/{{{lc}}}/Form";
 import Head from "next/head";
+import { Form } from "../../components/{{{lc}}}/Form";
 
 const Page: NextComponentType<NextPageContext> = () => (
   <div>

templates/next/pages/foos/index.tsx

@@ -1,15 +1,15 @@
 import { GetServerSideProps, NextComponentType, NextPageContext } from "next";
+import Head from "next/head";
 import { List } from "../../components/{{{lc}}}/List";
-import { PagedCollection } from "../../types/Collection";
+import { PagedCollection } from "../../types/collection";
 import { {{{ucf}}} } from "../../types/{{{ucf}}}";
 import { fetch } from "../../utils/dataAccess";
-import Head from "next/head";
 import Pagination from "../../components/common/Pagination";
 import { useMercure } from "../../utils/mercure";
 
 interface Props {
   collection: PagedCollection<{{{ucf}}}>;
-  hubURL: string;
+  hubURL: string | null;
 }
 
 const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {

templates/next/types/Collection.ts renamed to templates/next/types/collection.ts

@@ -1,3 +1,5 @@
+import has from "lodash/has"
+
 export interface PagedCollection<T> {
   "@context"?: string;
   "@id"?: string;
@@ -10,3 +12,6 @@ export interface PagedCollection<T> {
   "{{{hydraPrefix}}}search"?: object;
   "{{{hydraPrefix}}}totalItems"?: number;
 }
+
+export const isPagedCollection = <T>(data: any): data is PagedCollection<T> =>
+  has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"])

templates/next/types/item.ts

@@ -0,0 +1,3 @@
+import has from "lodash/has"
+
+export const isItem = <T>(data: any): data is T => has(data, "@id")

templates/next/utils/dataAccess.ts

@@ -40,7 +40,7 @@ export const fetch = async (id: string, init: RequestInit = {}) => {
   const json = JSON.parse(text);
   if (resp.ok) {
     return {
-      hubURL: extractHubURL(resp)?.toString(), // URL cannot be serialized as JSON, must be sent as string
+      hubURL: extractHubURL(resp)?.toString() || null, // URL cannot be serialized as JSON, must be sent as string
       data: normalize(json),
       text,
     };
@@ -58,7 +58,7 @@ export const fetch = async (id: string, init: RequestInit = {}) => {
   throw { defaultErrorMsg, status, fields };
 };
 
-export const normalize = (data: unknown) => {
+export const normalize = (data: any) => {
   if (has(data, "{{{hydraPrefix}}}member")) {
     // Normalize items in collections
     data["{{{hydraPrefix}}}member"] = data[
@@ -69,7 +69,7 @@ export const normalize = (data: unknown) => {
   }
 
   // Flatten nested documents
-  return mapValues(data as Object, (value) =>
+  return mapValues(data, (value) =>
     Array.isArray(value)
       ? value.map((v) => get(v, "@id", v))
       : get(value, "@id", value)

templates/next/utils/mercure.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
-import has from "lodash/has";
-import { PagedCollection } from "../types/Collection";
+import { PagedCollection, isPagedCollection } from "../types/collection";
+import { isItem } from "../types/item";
 import { normalize } from "./dataAccess";
 
-const mercureSubscribe = (hubURL: string, data: unknown | PagedCollection<unknown>, setData: (data: unknown) => void) => {
+const mercureSubscribe = <T>(hubURL: string, data: T | PagedCollection<T>, setData: (data: T) => void) => {
   const url = new URL(hubURL, window.origin);
   url.searchParams.append("topic", (new URL(data["@id"], window.origin)).toString());
   const eventSource = new EventSource(url.toString());
@@ -12,34 +12,44 @@ const mercureSubscribe = (hubURL: string, data: unknown | PagedCollection<unknow
   return eventSource;
 }
 
-export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: string | null) => {
+export const useMercure = <T>(deps: T | PagedCollection<T>, hubURL: string | null) => {
   const [data, setData] = useState(deps);
 
   useEffect(() => {
     setData(deps);
   }, [deps]);
 
   useEffect(() => {
-    if (!has(data, "{{{hydraPrefix}}}member") && !has(data, "@id")) {
+    if (!hubURL || !data) {
+      return;
+    }
+
+    if (!isPagedCollection(data) && !isItem(data)) {
       console.error("Object sent is not in JSON-LD format.");
 
+      return;
     }
 
-    if (hubURL && has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"]) && data["{{{hydraPrefix}}}member"].length !== 0) {
+    if (isPagedCollection(data) && data["{{{hydraPrefix}}}member"].length !== 0) {
+      const eventSources: EventSource[] = [];
       // It's a PagedCollection
-      data["{{{hydraPrefix}}}member"].forEach((obj, pos) => mercureSubscribe(hubURL, obj, (datum) => {
-        data["{{{hydraPrefix}}}member"][pos] = datum;
-        setData(data);
-      }));
-
+      data["{{{hydraPrefix}}}member"].forEach((obj, pos) => {
+        eventSources.push(mercureSubscribe(hubURL, obj, (datum: T) => {
+          data["{{{hydraPrefix}}}member"][pos] = datum;
+          setData({ ...data });
+        }));
+      });
+
+      return () => {
+        eventSources.forEach((eventSource) => eventSource.close());
+      };
     }
 
     // It's a single object
     const eventSource = mercureSubscribe(hubURL, data, setData);
 
     return () => {
-      eventSource.removeEventListener("message", (event) => setData(normalize(JSON.parse(event.data))));
-
+      eventSource.close();
     };
   }, [data]);