fix(hydra) : change hardcoded hydra prefix in templates (#388)

Co-authored-by: Valentin Dassonville <[email protected]>

src/generators/ReactGenerator.js

@@ -20,8 +20,8 @@ export default class ReactGenerator extends BaseGenerator {
       "hooks/list.ts",
       "hooks/mercure.ts",
       "hooks/retrieve.ts",
-      "hooks/update.ts",
       "hooks/show.ts",
+      "hooks/update.ts",
 
       // interfaces
       "interfaces/Collection.ts",
@@ -32,9 +32,9 @@ export default class ReactGenerator extends BaseGenerator {
       "components/foo/Form.tsx",
       "components/foo/index.ts",
       "components/foo/List.tsx",
-      "components/foo/Update.tsx",
-      "components/foo/type.ts",
       "components/foo/Show.tsx",
+      "components/foo/type.ts",
+      "components/foo/Update.tsx",
       "components/Field.tsx",
       "components/Links.tsx",
       "components/Pagination.tsx",

templates/nuxt/components/foo/FooList.vue

@@ -266,10 +266,10 @@ const { items, view, error, isLoading, hubUrl } = await useFetchList<{{titleUcFi
 {{lc}}ListStore.setData({ items, view, error, isLoading, hubUrl });
 
 const pagination = {
-  first: view.value?.["hydra:first"]?.slice(-1),
-  previous: view.value?.["hydra:previous"]?.slice(-1),
-  next: view.value?.["hydra:next"]?.slice(-1),
-  last: view.value?.["hydra:last"]?.slice(-1),
+  first: view.value?.["{{hydraPrefix}}first"]?.slice(-1),
+  previous: view.value?.["{{hydraPrefix}}previous"]?.slice(-1),
+  next: view.value?.["{{hydraPrefix}}next"]?.slice(-1),
+  last: view.value?.["{{hydraPrefix}}last"]?.slice(-1),
 };
 
 useMercureList({ store: {{lc}}ListStore, deleteStore: {{lc}}DeleteStore });

templates/nuxt/composables/api.ts

@@ -20,7 +20,7 @@ async function useApi<T>(path: string, options: UseFetchOptions<T>) {
 
     onResponseError({ response }) {
       const data = response._data;
-      const error = data["hydra:description"] || response.statusText;
+      const error = data["{{hydraPrefix}}description"] || response.statusText;
 
       throw new Error(error);
     },
@@ -51,8 +51,8 @@ export async function useFetchList<T>(
   });
 
   const value = data.value as PagedCollection<T>;
-  items.value = value["hydra:member"];
-  view.value = value["hydra:view"];
+  items.value = value["{{hydraPrefix}}member"];
+  view.value = value["{{hydraPrefix}}view"];
 
   return {
     items,
@@ -94,7 +94,7 @@ export async function useCreateItem<T>(resource: string, payload: Item) {
 
     onResponseError({ response }) {
       const data = response._data;
-      const error = data["hydra:description"] || response.statusText;
+      const error = data["{{hydraPrefix}}description"] || response.statusText;
 
       if (!data.violations) throw new Error(error);
 
@@ -135,7 +135,7 @@ export async function useUpdateItem<T>(item: Item, payload: Item) {
 
     onResponseError({ response }) {
       const data = response._data;
-      const error = data["hydra:description"] || response.statusText;
+      const error = data["{{hydraPrefix}}description"] || response.statusText;
 
       if (!data.violations) throw new Error(error);
 

templates/react-common/actions/foo/list.js

@@ -31,11 +31,11 @@ export function list(page = '{{{name}}}') {
         dispatch(loading(false));
         dispatch(success(retrieved));
 
-        if (hubURL && retrieved['hydra:member'].length)
+        if (hubURL && retrieved['{{hydraPrefix}}member'].length)
           dispatch(
             mercureSubscribe(
               hubURL,
-              retrieved['hydra:member'].map(i => i['@id'])
+              retrieved['{{hydraPrefix}}member'].map(i => i['@id'])
             )
           );
       })

templates/react-common/reducers/foo/list.js

@@ -40,15 +40,15 @@ export function retrieved(state = null, action) {
     case '{{{uc}}}_LIST_MERCURE_MESSAGE':
       return {
         ...state,
-        'hydra:member': state['hydra:member'].map(item =>
+        '{{hydraPrefix}}member': state['{{hydraPrefix}}member'].map(item =>
           item['@id'] === action.retrieved['@id'] ? action.retrieved : item
         )
       };
 
     case '{{{uc}}}_LIST_MERCURE_DELETED':
       return {
         ...state,
-        'hydra:member': state['hydra:member'].filter(
+        '{{hydraPrefix}}member': state['{{hydraPrefix}}member'].filter(
           item => item['@id'] !== action.retrieved['@id']
         )
       };

templates/react-common/utils/dataAccess.js

@@ -24,8 +24,8 @@ export function fetch(id, options = {}) {
     return response.json().then(
       json => {
         const error =
-          json['hydra:description'] ||
-          json['hydra:title'] ||
+          json['{{hydraPrefix}}description'] ||
+          json['{{hydraPrefix}}title'] ||
           'An error occurred.';
         if (!json.violations) throw Error(error);
 
@@ -47,9 +47,9 @@ export function fetch(id, options = {}) {
 }
 
 export function normalize(data) {
-  if (has(data, 'hydra:member')) {
+  if (has(data, '{{hydraPrefix}}member')) {
     // Normalize items in collections
-    data['hydra:member'] = data['hydra:member'].map(item => normalize(item));
+    data['{{hydraPrefix}}member'] = data['{{hydraPrefix}}member'].map(item => normalize(item));
 
     return data;
   }

templates/react-native/components/foo/List.js

@@ -73,11 +73,11 @@ class ListComponent extends Component {
           <ScrollView contentInset={ {top: -24} }
                       automaticallyAdjustContentInsets>
             <List>
-              {this.props.retrieved['hydra:member'].map(
+              {this.props.retrieved['{{hydraPrefix}}member'].map(
                   item => ListComponent.renderRow(item))}
             </List>
           </ScrollView>
-          {pagination(this.props.retrieved['hydra:view'], this.props.list)}
+          {pagination(this.props.retrieved['{{hydraPrefix}}view'], this.props.list)}
         </View>
     );
   }

templates/react-native/utils/helpers.js

@@ -13,28 +13,28 @@ export function pagination(view, list) {
     <View style={ {flexDirection: 'row', alignSelf: 'center', alignContent: 'center'} }>
       <SocialIcon
         type='fast-backward'
-        iconColor={view['hydra:previous'] ? '#3faab4' : 'grey'}
-        onPress={() => list(paginationRoute(view['hydra:first']))}
-        disabled={!view['hydra:previous']}
+        iconColor={view['{{hydraPrefix}}previous'] ? '#3faab4' : 'grey'}
+        onPress={() => list(paginationRoute(view['{{hydraPrefix}}first']))}
+        disabled={!view['{{hydraPrefix}}previous']}
       />
       <SocialIcon
         type='backward'
-        iconColor={view['hydra:previous'] ? '#3faab4' : 'grey'}
-        onPress={() => list(paginationRoute(view['hydra:previous']))}
-        disabled={!view['hydra:previous']}
+        iconColor={view['{{hydraPrefix}}previous'] ? '#3faab4' : 'grey'}
+        onPress={() => list(paginationRoute(view['{{hydraPrefix}}previous']))}
+        disabled={!view['{{hydraPrefix}}previous']}
       />
       <SocialIcon
         type='forward'
-        iconColor={view['hydra:next'] ? '#3faab4' : 'grey'}
-        onPress={() => list(paginationRoute(view['hydra:next']))}
-        disabled={!view['hydra:next']}
+        iconColor={view['{{hydraPrefix}}next'] ? '#3faab4' : 'grey'}
+        onPress={() => list(paginationRoute(view['{{hydraPrefix}}next']))}
+        disabled={!view['{{hydraPrefix}}next']}
       />
 
       <SocialIcon
         type='fast-forward'
-        iconColor={view['hydra:next'] ? '#3faab4' : 'grey'}
-        disabled={!view['hydra:next']}
-        onPress={() => list(paginationRoute(view['hydra:last']))}
+        iconColor={view['{{hydraPrefix}}next'] ? '#3faab4' : 'grey'}
+        disabled={!view['{{hydraPrefix}}next']}
+        onPress={() => list(paginationRoute(view['{{hydraPrefix}}last']))}
         activityIndicatorStyle={ {backgroundColor:'red'} }
       />
     </View>
@@ -45,4 +45,4 @@ export function delayRefresh() {
   setTimeout(() => {
     Actions.refresh({refresh: Math.random()});
   }, 500);
-}
+}

templates/react/components/Pagination.tsx

@@ -6,16 +6,16 @@ interface PaginationProps {
 }
 
 const Pagination = ({retrieved}: PaginationProps) => {
-  const view = retrieved && retrieved["hydra:view"];
+  const view = retrieved && retrieved["{{hydraPrefix}}view"];
   if (!view) {
     return null;
   }
 
   const {
-    "hydra:first": first,
-    "hydra:previous": previous,
-    "hydra:next": next,
-    "hydra:last": last,
+    "{{hydraPrefix}}first": first,
+    "{{hydraPrefix}}previous": previous,
+    "{{hydraPrefix}}next": next,
+    "{{hydraPrefix}}last": last,
   } = view;
 
   return (

templates/react/components/foo/List.tsx

@@ -13,7 +13,7 @@ interface ListProps {
 }
 
 const ListView = ({error, loading, retrieved}: ListProps) => {
-  const items = (retrieved && retrieved["hydra:member"]) || [];
+  const items = (retrieved && retrieved["{{hydraPrefix}}member"]) || [];
 
   return (
     <div>

templates/react/hooks/fetch.ts

@@ -64,8 +64,8 @@ const normalizeAuth = (auth: string) => {
 // Error handling
 const regularHandler = (response: Response, json: any) => {
   const error =
-    json["hydra:description"] ||
-    json["hydra:title"] ||
+    json["{{hydraPrefix}}description"] ||
+    json["{{hydraPrefix}}title"] ||
     json["message"] ||
     "An error occurred.";
 
@@ -78,8 +78,8 @@ const submissionHandler = (response: Response, json: any) => {
   }
 
   const error =
-    json["hydra:description"] ||
-    json["hydra:title"] ||
+    json["{{hydraPrefix}}description"] ||
+    json["{{hydraPrefix}}title"] ||
     json["message"] ||
     "An error occurred.";
 

templates/react/hooks/mercure.ts

@@ -71,8 +71,8 @@ const useMercure = <Resource extends ApiResource>(retrieved: Resource | null): I
       const collection = retrieved as PagedCollection<Resource>;
 
       if (hubURL && retrieved) {
-        if (collection["hydra:member"]) {
-          setEventSource(subscribe(hubURL, collection["hydra:member"].map(item => item["@id"])));
+        if (collection["{{hydraPrefix}}member"]) {
+          setEventSource(subscribe(hubURL, collection["{{hydraPrefix}}member"].map(item => item["@id"])));
         } else {
           setEventSource(subscribe(hubURL, retrieved["@id"]));
         }

templates/react/hooks/show.ts

@@ -34,8 +34,8 @@ const useShow = <Resource extends ApiResource>(): IShowStore<Resource> => {
   useEffect(() => {
     if (message) {
       const collection = (retrieved as PagedCollection<Resource>);
-      if (collection && collection['hydra:member']) {
-        const item = collection['hydra:member'].find((i) => i["@id"] === message["@id"]);
+      if (collection && collection['{{hydraPrefix}}member']) {
+        const item = collection['{{hydraPrefix}}member'].find((i) => i["@id"] === message["@id"]);
         if (item && retrieved) {
           Object.assign(item, message);
           setRetrieved({ ...retrieved });

templates/react/interfaces/Collection.ts

@@ -1,21 +1,21 @@
 import { ApiResource } from "../utils/types";
 
 export interface Pagination {
-  "hydra:first"?: string;
-  "hydra:previous"?: string;
-  "hydra:next"?: string;
-  "hydra:last"?: string;
+  "{{hydraPrefix}}first"?: string;
+  "{{hydraPrefix}}previous"?: string;
+  "{{hydraPrefix}}next"?: string;
+  "{{hydraPrefix}}last"?: string;
 }
 
 export interface PagedCollection<T> extends ApiResource {
   "@context"?: string;
   "@type"?: string;
-  "hydra:firstPage"?: string;
-  "hydra:itemsPerPage"?: number;
-  "hydra:lastPage"?: string;
-  "hydra:member"?: T[];
-  "hydra:nextPage"?: string;
-  "hydra:search"?: object;
-  "hydra:totalItems"?: number;
-  "hydra:view"?: Pagination;
+  "{{hydraPrefix}}firstPage"?: string;
+  "{{hydraPrefix}}itemsPerPage"?: number;
+  "{{hydraPrefix}}lastPage"?: string;
+  "{{hydraPrefix}}member"?: T[];
+  "{{hydraPrefix}}nextPage"?: string;
+  "{{hydraPrefix}}search"?: object;
+  "{{hydraPrefix}}totalItems"?: number;
+  "{{hydraPrefix}}view"?: Pagination;
 }

templates/vuetify/store/foo/list.ts

@@ -34,8 +34,8 @@ export const use{{titleUcFirst}}ListStore = defineStore("{{lc}}List", {
 
         this.toggleLoading();
 
-        this.setItems(data["hydra:member"]);
-        this.setTotalItems(data["hydra:totalItems"] ?? 0);
+        this.setItems(data["{{hydraPrefix}}member"]);
+        this.setTotalItems(data["{{hydraPrefix}}totalItems"] ?? 0);
 
         if (hubUrl) {
           this.setHubUrl(hubUrl);