From f188d9541f159f28fd1e7b162ecba40136f391e8 Mon Sep 17 00:00:00 2001
From: mlahfaoui <malika.lahfaoui@gmail.com>
Date: Mon, 14 Mar 2022 13:35:28 +0100
Subject: [PATCH 1/4] fix: FineTuning & Fixe Bugs

---
 templates/next/components/foo/Show.tsx   |  3 +-
 templates/next/pages/foos/[id]/edit.tsx  | 42 ++++++------------------
 templates/next/pages/foos/[id]/index.tsx | 42 ++++--------------------
 templates/next/utils/dataAccess.ts       |  5 +--
 templates/next/utils/helpers.ts          | 25 ++++++++++++++
 5 files changed, 47 insertions(+), 70 deletions(-)
 create mode 100644 templates/next/utils/helpers.ts

diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
index ef89523b..09547ecc 100644
--- a/templates/next/components/foo/Show.tsx
+++ b/templates/next/components/foo/Show.tsx
@@ -8,9 +8,10 @@ import Head from 'next/head'
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
+  text: String
 }
 
-export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => {
+export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
   const [error, setError] = useState(null);
   const router = useRouter();
 
diff --git a/templates/next/pages/foos/[id]/edit.tsx b/templates/next/pages/foos/[id]/edit.tsx
index f052a1a0..4ef57b97 100644
--- a/templates/next/pages/foos/[id]/edit.tsx
+++ b/templates/next/pages/foos/[id]/edit.tsx
@@ -4,6 +4,7 @@ import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
 import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
+import { getPathsFromHydraResponse } from "../../../utils/helpers";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
@@ -27,48 +28,25 @@ const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}} }) =>
 };
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
+  const response = await fetch(`/{{{name}}}/${params.id}`);
+
   return {
     props: {
-      {{{lc}}}: await fetch(`/{{{name}}}/${params.id}`),
+      {{{lc}}}: response.data,
     },
     revalidate: 1,
   };
 }
 
-export const getStaticPaths: GetStaticPaths = async () => {
-  try {
-    const response = await fetch("/{{{name}}}");
-  } catch (e) {
-    console.error(e);
-
-    return {
-      paths: [],
-      fallback: true,
-    };
-  }
-
-  const view = response.data['{{{hydraPrefix}}}view'];
-  const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }/edit`);
 
-  if (view) {
-    try {
-      const {
-        '{{{hydraPrefix}}}last': last
-      } = view;
-      for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
-        paths.concat(
-          await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }/edit`)
-        );
-      }
-    } catch (e) {
-      console.error(e);
-    }
+export const getStaticPaths: GetStaticPaths = async() => {
+  const response = await fetch("/{{{name}}}");
+  const paths= await getPathsFromHydraResponse(response,true);
+  return {
+      paths,
+      fallback:true
   }
 
-  return {
-    paths,
-    fallback: true,
-  };
 }
 
 export default Page;
diff --git a/templates/next/pages/foos/[id]/index.tsx b/templates/next/pages/foos/[id]/index.tsx
index 8af2d4f2..666feb0f 100644
--- a/templates/next/pages/foos/[id]/index.tsx
+++ b/templates/next/pages/foos/[id]/index.tsx
@@ -5,6 +5,7 @@ import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
 import { useMercure } from "../../../utils/mercure";
+import { getPathsFromHydraResponse } from "../../../utils/helpers";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
@@ -25,7 +26,7 @@ const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
           <title>{`Show {{{ucf}}} ${ {{~lc}}['@id'] }`}</title>
         </Head>
       </div>
-      <Show {{{lc}}}={ {{{lc}}} } text={ props.text } />
+      <Show {{{lc}}}={ {{{lc}}} } text={ data.text } />
     </div>
   );
 };
@@ -42,41 +43,12 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     revalidate: 1,
   };
 }
-
-export const getStaticPaths: GetStaticPaths = async () => {
-  try {
-    const response = await fetch("/{{{name}}}");
-  } catch (e) {
-    console.error(e);
-
-    return {
-      paths: [],
-      fallback: true,
-    };
-  }
-
-  const view = response.data['{{{hydraPrefix}}}view'];
-  const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }`);
-
-  if (view) {
-    try {
-      const {
-        '{{{hydraPrefix}}}last': last
-      } = view;
-      for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
-        paths.concat(
-          await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }`)
-      );
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  }
-
+export const getStaticPaths: GetStaticPaths = async() => {
+  const response = await fetch("/{{{name}}}");
+  const paths= await getPathsFromHydraResponse(response,false);
   return {
     paths,
-    fallback: true,
-  };
+    fallback:true
+}
 }
-
 export default Page;
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index fa929028..8e9fb656 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/templates/next/utils/dataAccess.ts
@@ -36,12 +36,13 @@ export const fetch = async (id: string, init: RequestInit = {}) => {
   const resp = await isomorphicFetch(ENTRYPOINT + id, init);
   if (resp.status === 204) return;
 
-  const json = await resp.json();
+  const text = await resp.text();
+  const json = JSON.parse(text);
   if (resp.ok) {
     return {
       hubURL: extractHubURL(resp)?.toString(), // URL cannot be serialized as JSON, must be sent as string
       data: normalize(json),
-      text: await resp.text(),
+      text,
     };
   }
 
diff --git a/templates/next/utils/helpers.ts b/templates/next/utils/helpers.ts
new file mode 100644
index 00000000..0558b01b
--- /dev/null
+++ b/templates/next/utils/helpers.ts
@@ -0,0 +1,25 @@
+import { fetch } from "./dataAccess";
+
+export const getPathsFromHydraResponse = async (response,isEdit: boolean) => {
+try {
+    const concatPath=isEdit?"/edit":"";
+    const view = response.data['{{{hydraPrefix}}}view'];
+    const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }${concatPath}`);
+
+    if (view) {
+        const {
+          '{{{hydraPrefix}}}last': last
+        } = view;
+        for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
+          paths.concat(
+            await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }${concatPath}`)
+        );
+        }    
+    }
+    return paths
+  } catch (e) {
+    console.error(e);
+
+    return  []
+  }
+}
\ No newline at end of file

From 6ca804ae020ba1ff3451ede9b03a537e72327f8e Mon Sep 17 00:00:00 2001
From: Alan Poulain <contact@alanpoulain.eu>
Date: Tue, 22 Mar 2022 19:10:41 +0100
Subject: [PATCH 2/4] fix: add more fixes

---
 package.json                             |  2 +-
 templates/next/components/foo/Show.tsx   | 18 ++++++----------
 templates/next/pages/foos/[id]/edit.tsx  | 20 ++++++++----------
 templates/next/pages/foos/[id]/index.tsx | 27 +++++++++++++-----------
 templates/next/utils/dataAccess.ts       | 23 ++++++++++++++++++++
 templates/next/utils/helpers.ts          | 25 ----------------------
 templates/next/utils/mercure.ts          | 20 +++++++++---------
 7 files changed, 65 insertions(+), 70 deletions(-)
 delete mode 100644 templates/next/utils/helpers.ts

diff --git a/package.json b/package.json
index 9145f23a..0a7db16d 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,7 @@
     "eslint-check": "eslint-config-prettier src/index.js",
     "build": "babel src -d lib --ignore '*.test.js'",
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
-    "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
+    "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/next -g next && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
     "test-gen-custom": "rm -rf ./tmp && yarn build && babel src/generators/ReactGenerator.js src/generators/BaseGenerator.js -d ./tmp/gens && cp -r ./templates/react ./templates/react-common ./templates/entrypoint.js ./tmp/gens && ./lib/index.js https://demo.api-platform.com ./tmp/react-custom -g \"$(pwd)/tmp/gens/ReactGenerator.js\" -t ./tmp/gens",
     "test-gen-swagger": "rm -rf ./tmp && yarn build && ./lib/index.js  https://demo.api-platform.com/docs.json ./tmp/react -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f swagger",
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js"
diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
index 09547ecc..6aa0d5db 100644
--- a/templates/next/components/foo/Show.tsx
+++ b/templates/next/components/foo/Show.tsx
@@ -1,14 +1,14 @@
-import { FunctionComponent, useState } from 'react';
-import Link from 'next/link';
+import { FunctionComponent, useState } from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
+import Head from "next/head";
 import { fetch } from "../../utils/dataAccess";
-import ReferenceLinks from '../common/ReferenceLinks';
-import { {{{ucf}}} } from '../../types/{{{ucf}}}';
-import Head from 'next/head'
+import ReferenceLinks from "../common/ReferenceLinks";
+import { {{{ucf}}} } from "../../types/{{{ucf}}}";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
-  text: String
+  text: string;
 }
 
 export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
@@ -31,11 +31,7 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}}, text }) => {
     <div>
        <Head>
             <title>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</title>
-            <script
-                type="application/ld+json"
-            >
-              {text}
-            </script>
+            <script type="application/ld+json" dangerouslySetInnerHTML={ { __html: text } } />
           </Head>
       <h1>{`Show {{{ucf}}} ${ {{~lc}}['@id']}`}</h1>
       <table className="table table-responsive table-striped table-hover">
diff --git a/templates/next/pages/foos/[id]/edit.tsx b/templates/next/pages/foos/[id]/edit.tsx
index 4ef57b97..2e9541a7 100644
--- a/templates/next/pages/foos/[id]/edit.tsx
+++ b/templates/next/pages/foos/[id]/edit.tsx
@@ -1,10 +1,9 @@
 import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
-import { Form } from "../../../components/{{{lc}}}/Form";
-import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
-import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
-import { getPathsFromHydraResponse } from "../../../utils/helpers";
+import { Form } from "../../../components/{{{lc}}}/Form";
+import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
+import { fetch, getPaths } from "../../../utils/dataAccess";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
@@ -38,15 +37,14 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   };
 }
 
-
-export const getStaticPaths: GetStaticPaths = async() => {
+export const getStaticPaths: GetStaticPaths = async () => {
   const response = await fetch("/{{{name}}}");
-  const paths= await getPathsFromHydraResponse(response,true);
-  return {
-      paths,
-      fallback:true
-  }
+  const paths = await getPaths(response, "{{{name}}}", true);
 
+  return {
+    paths,
+    fallback: true,
+  };
 }
 
 export default Page;
diff --git a/templates/next/pages/foos/[id]/index.tsx b/templates/next/pages/foos/[id]/index.tsx
index 666feb0f..64d5495f 100644
--- a/templates/next/pages/foos/[id]/index.tsx
+++ b/templates/next/pages/foos/[id]/index.tsx
@@ -1,21 +1,21 @@
 import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext } from "next";
-import { Show } from "../../../components/{{{lc}}}/Show";
-import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
-import { fetch } from "../../../utils/dataAccess";
 import Head from "next/head";
 import DefaultErrorPage from "next/error";
+import { Show } from "../../../components/{{{lc}}}/Show";
+import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
+import { fetch, getPaths } from "../../../utils/dataAccess";
 import { useMercure } from "../../../utils/mercure";
-import { getPathsFromHydraResponse } from "../../../utils/helpers";
 
 interface Props {
   {{{lc}}}: {{{ucf}}};
   hubURL: null | string;
+  text: string;
 };
 
-const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
-  const {{{lc}}} = props.hubURL === null ? props.{{{lc}}} : useMercure(props.{{{lc}}}, props.hubURL);
+const Page: NextComponentType<NextPageContext, Props, Props> = ({ {{{lc}}}, hubURL, text }) => {
+  const {{{lc}}}Data = useMercure({{{lc}}}, hubURL);
 
-  if (!{{{lc}}}) {
+  if (!{{{lc}}}Data) {
     return <DefaultErrorPage statusCode={404} />;
   }
 
@@ -26,7 +26,7 @@ const Page: NextComponentType<NextPageContext, Props, Props> = (props) => {
           <title>{`Show {{{ucf}}} ${ {{~lc}}['@id'] }`}</title>
         </Head>
       </div>
-      <Show {{{lc}}}={ {{{lc}}} } text={ data.text } />
+      <Show {{{lc}}}={ {{{lc}}}Data } text={text} />
     </div>
   );
 };
@@ -43,12 +43,15 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
     revalidate: 1,
   };
 }
-export const getStaticPaths: GetStaticPaths = async() => {
+
+export const getStaticPaths: GetStaticPaths = async () => {
   const response = await fetch("/{{{name}}}");
-  const paths= await getPathsFromHydraResponse(response,false);
+  const paths = await getPaths(response, "{{{name}}}", false);
+
   return {
     paths,
-    fallback:true
-}
+    fallback: true,
+  };
 }
+
 export default Page;
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index 8e9fb656..27cb1713 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/templates/next/utils/dataAccess.ts
@@ -75,3 +75,26 @@ export const normalize = (data: unknown) => {
       : get(value, "@id", value)
   );
 };
+
+export const getPaths = async (response, resourceName: string, isEdit: boolean) => {
+  try {
+    const pathSuffix = isEdit ? "/edit" : "";
+    const view = response.data["{{{hydraPrefix}}}view"];
+    const paths = response.data["{{{hydraPrefix}}}member"].map((resourceData) => `${resourceData['@id']}${pathSuffix}`);
+
+    if (view) {
+      const { '{{{hydraPrefix}}}last': last } = view;
+      for (let page = 2; page <= parseInt(last.replace(new RegExp(`^\/${resourceName}\?page=(\d+)`), "$1")); page++) {
+        paths.concat(
+          (await fetch(`/${resourceName}?page=${page}`)).data["{{{hydraPrefix}}}member"].map((resourceData) => `${ resourceData['@id'] }${pathSuffix}`)
+        );
+      }
+    }
+
+    return paths;
+  } catch (e) {
+    console.error(e);
+
+    return [];
+  }
+};
diff --git a/templates/next/utils/helpers.ts b/templates/next/utils/helpers.ts
deleted file mode 100644
index 0558b01b..00000000
--- a/templates/next/utils/helpers.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { fetch } from "./dataAccess";
-
-export const getPathsFromHydraResponse = async (response,isEdit: boolean) => {
-try {
-    const concatPath=isEdit?"/edit":"";
-    const view = response.data['{{{hydraPrefix}}}view'];
-    const paths = response.data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }${concatPath}`);
-
-    if (view) {
-        const {
-          '{{{hydraPrefix}}}last': last
-        } = view;
-        for (let page = 2; page <= parseInt(last.replace(/^\/{{{name}}}\?page=(\d+)/, '$1')); page++) {
-          paths.concat(
-            await fetch(`/{{{name}}}?page=${page}`).data["{{{hydraPrefix}}}member"].map(({{{lc}}}) => `${ {{~lc}}['@id'] }${concatPath}`)
-        );
-        }    
-    }
-    return paths
-  } catch (e) {
-    console.error(e);
-
-    return  []
-  }
-}
\ No newline at end of file
diff --git a/templates/next/utils/mercure.ts b/templates/next/utils/mercure.ts
index 78db99bc..3907ec2a 100644
--- a/templates/next/utils/mercure.ts
+++ b/templates/next/utils/mercure.ts
@@ -1,5 +1,5 @@
-import has from "lodash/has";
 import { useEffect, useState } from "react";
+import has from "lodash/has";
 import { PagedCollection } from "../types/Collection";
 import { normalize } from "./dataAccess";
 
@@ -12,24 +12,24 @@ const mercureSubscribe = (hubURL: string, data: unknown | PagedCollection<unknow
   return eventSource;
 }
 
-export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: string) => {
+export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: string | null) => {
   const [data, setData] = useState(deps);
 
   useEffect(() => {
     setData(deps);
   }, [deps]);
 
-  if (!data) {
-    return data;
-  }
+  useEffect(() => {
+    if (!hubURL || !data) {
+      return;
+    }
 
-  if (!has(data, "{{{hydraPrefix}}}member") && !has(data, "@id")) {
-    console.error("Object sent is not in JSON-LD format.");
+    if (!has(data, "{{{hydraPrefix}}}member") && !has(data, "@id")) {
+      console.error("Object sent is not in JSON-LD format.");
 
-    return data;
-  }
+      return;
+    }
 
-  useEffect(() => {
     if (has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"]) && data["{{{hydraPrefix}}}member"].length !== 0) {
       // It's a PagedCollection
       data["{{{hydraPrefix}}}member"].forEach((obj, pos) => mercureSubscribe(hubURL, obj, (datum) => {

From d4f068e6842464794fda79a8fbcfdef2848e2865 Mon Sep 17 00:00:00 2001
From: mlahfaoui <malika.lahfaoui@gmail.com>
Date: Thu, 24 Mar 2022 00:24:45 +0100
Subject: [PATCH 3/4] fix: add fixes after yarn build

---
 src/generators/NextGenerator.js        | 4 ++++
 templates/next/components/foo/Form.tsx | 9 +++++++--
 templates/next/utils/dataAccess.ts     | 2 +-
 templates/next/utils/mercure.ts        | 9 +--------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
index 5909c447..78a8e3ba 100644
--- a/src/generators/NextGenerator.js
+++ b/src/generators/NextGenerator.js
@@ -1,4 +1,6 @@
 import chalk from "chalk";
+import handlebars from "handlebars";
+import hbh_comparison from "handlebars-helpers/lib/comparison";
 import BaseGenerator from "./BaseGenerator";
 
 export default class NextGenerator extends BaseGenerator {
@@ -28,6 +30,8 @@ export default class NextGenerator extends BaseGenerator {
       "utils/dataAccess.ts",
       "utils/mercure.ts",
     ]);
+    
+    handlebars.registerHelper("compare", hbh_comparison.compare);
   }
 
   help(resource) {
diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
index 83472f45..6625ac11 100644
--- a/templates/next/components/foo/Form.tsx
+++ b/templates/next/components/foo/Form.tsx
@@ -74,13 +74,18 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
               <input
                 name="{{name}}"
                 id="{{lc}}_{{name}}"
-                value={ values.{{name}} ?? "" }
+                {{#compare type "==" "dateTime" }}
+                value={values.{{name}}?.toLocaleString() ?? ""}
+                {{/compare}}
+                {{#compare type "!=" "dateTime" }}
+                value={values.{{name}} ?? ""}
+                {{/compare}}
                 type="{{type}}"
                 {{#if step}}step="{{{step}}}"{{/if}}
                 placeholder="{{{description}}}"
                 {{#if required}}required={true}{{/if}}
                 className={`form-control${errors.{{name}} && touched.{{name}} ? ' is-invalid' : ''}`}
-                aria-invalid={errors.{{name}} && touched.{{name~}} }
+                aria-invalid={errors.{{name}} && touched.{{name~}} ? 'true' : null}
                 onChange={handleChange}
                 onBlur={handleBlur}
               />
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index 27cb1713..4a5dd298 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/templates/next/utils/dataAccess.ts
@@ -69,7 +69,7 @@ export const normalize = (data: unknown) => {
   }
 
   // Flatten nested documents
-  return mapValues(data, (value) =>
+  return mapValues(data as Object, (value) =>
     Array.isArray(value)
       ? value.map((v) => get(v, "@id", v))
       : get(value, "@id", value)
diff --git a/templates/next/utils/mercure.ts b/templates/next/utils/mercure.ts
index 3907ec2a..faa4ec7b 100644
--- a/templates/next/utils/mercure.ts
+++ b/templates/next/utils/mercure.ts
@@ -20,24 +20,18 @@ export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: str
   }, [deps]);
 
   useEffect(() => {
-    if (!hubURL || !data) {
-      return;
-    }
-
     if (!has(data, "{{{hydraPrefix}}}member") && !has(data, "@id")) {
       console.error("Object sent is not in JSON-LD format.");
 
-      return;
     }
 
-    if (has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"]) && data["{{{hydraPrefix}}}member"].length !== 0) {
+    if (hubURL && has(data, "{{{hydraPrefix}}}member") && Array.isArray(data["{{{hydraPrefix}}}member"]) && data["{{{hydraPrefix}}}member"].length !== 0) {
       // It's a PagedCollection
       data["{{{hydraPrefix}}}member"].forEach((obj, pos) => mercureSubscribe(hubURL, obj, (datum) => {
         data["{{{hydraPrefix}}}member"][pos] = datum;
         setData(data);
       }));
 
-      return () => data;
     }
 
     // It's a single object
@@ -46,7 +40,6 @@ export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: str
     return () => {
       eventSource.removeEventListener("message", (event) => setData(normalize(JSON.parse(event.data))));
 
-      return data;
     };
   }, [data]);
 

From 7a104f995ecd8a48dc6a50fce671fc41407b8478 Mon Sep 17 00:00:00 2001
From: Alan Poulain <contact@alanpoulain.eu>
Date: Fri, 1 Jul 2022 17:52:00 +0200
Subject: [PATCH 4/4] fix: last fixes

---
 src/generators/BaseGenerator.js               |  6 ++--
 src/generators/NextGenerator.js               | 27 ++++++++------
 src/generators/NextGenerator.test.js          |  5 +--
 .../next/components/common/Pagination.tsx     |  2 +-
 templates/next/pages/foos/create.tsx          |  2 +-
 templates/next/pages/foos/index.tsx           |  6 ++--
 .../types/{Collection.ts => collection.ts}    |  5 +++
 templates/next/types/item.ts                  |  3 ++
 templates/next/utils/dataAccess.ts            |  6 ++--
 templates/next/utils/mercure.ts               | 36 ++++++++++++-------
 10 files changed, 61 insertions(+), 37 deletions(-)
 rename templates/next/types/{Collection.ts => collection.ts} (65%)
 create mode 100644 templates/next/types/item.ts

diff --git a/src/generators/BaseGenerator.js b/src/generators/BaseGenerator.js
index 7409ca0f..c621fc26 100644
--- a/src/generators/BaseGenerator.js
+++ b/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
     );
   }
diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
index 78a8e3ba..d0893521 100644
--- a/src/generators/NextGenerator.js
+++ b/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",
diff --git a/src/generators/NextGenerator.test.js b/src/generators/NextGenerator.test.js
index 292582c6..d5cb08f3 100644
--- a/src/generators/NextGenerator.test.js
+++ b/src/generators/NextGenerator.test.js
@@ -25,7 +25,7 @@ describe("generate", () => {
         description: "An URL",
       }),
     ];
-    const resource = new Resource("abc", "http://example.com/foos", {
+    const resource = new Resource("abcs", "http://example.com/foos", {
       id: "abc",
       title: "abc",
       readableFields: fields,
@@ -46,7 +46,8 @@ describe("generate", () => {
       "/components/common/ReferenceLinks.tsx",
       "/components/common/Pagination.tsx",
       "/types/Abc.ts",
-      "/types/Collection.ts",
+      "/types/collection.ts",
+      "/types/item.ts",
       "/pages/abcs/[id]/index.tsx",
       "/pages/abcs/[id]/edit.tsx",
       "/pages/abcs/index.tsx",
diff --git a/templates/next/components/common/Pagination.tsx b/templates/next/components/common/Pagination.tsx
index 17dac045..dd316809 100644
--- a/templates/next/components/common/Pagination.tsx
+++ b/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>;
diff --git a/templates/next/pages/foos/create.tsx b/templates/next/pages/foos/create.tsx
index 7402cf38..9a5c8dff 100644
--- a/templates/next/pages/foos/create.tsx
+++ b/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>
diff --git a/templates/next/pages/foos/index.tsx b/templates/next/pages/foos/index.tsx
index 05da56c6..5f70eff5 100644
--- a/templates/next/pages/foos/index.tsx
+++ b/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) => {
diff --git a/templates/next/types/Collection.ts b/templates/next/types/collection.ts
similarity index 65%
rename from templates/next/types/Collection.ts
rename to templates/next/types/collection.ts
index ba59f00c..5e41071f 100644
--- a/templates/next/types/Collection.ts
+++ b/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"])
diff --git a/templates/next/types/item.ts b/templates/next/types/item.ts
new file mode 100644
index 00000000..0ecf7190
--- /dev/null
+++ b/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")
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
index 4a5dd298..8ce513ff 100644
--- a/templates/next/utils/dataAccess.ts
+++ b/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)
diff --git a/templates/next/utils/mercure.ts b/templates/next/utils/mercure.ts
index faa4ec7b..8f0419d9 100644
--- a/templates/next/utils/mercure.ts
+++ b/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,7 +12,7 @@ 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(() => {
@@ -20,26 +20,36 @@ export const useMercure = (deps: unknown | PagedCollection<unknown>, hubURL: str
   }, [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]);