+
+
+
+
+
+ )
+ }
+};
+
+type ContentPickerProps = HTMLFieldProps
+
+
+ {!value ? (
+
+ ) : (
+
+ )}
+
+ );
+});
+
+export function squidexContent(schema: string, contentType: ContentType): CellPlugin {
+ return {
+ id: `squidexContent_${schema}`,
+ title: `Squidex ${contentType.name} Content`,
+ description: `Picks an ${contentType.name} content from Squidex`,
+ version: 1,
+ controls: {
+ type: 'autoform',
+ schema: {
+ properties: {
+ id: {
+ type: 'string',
+ uniforms: {
+ label: 'ID',
+ component: props => (
+
+ {href ? (
+ e.preventDefault() : undefined} href={href} target={openInNewWindow ? '_blank' : undefined} rel={openInNewWindow ? 'noreferrer noopener' : undefined}
+ >
+ {image}
+
+ ) : (
+ image
+ )}
+
+ ) : (
+
+
+ );
+};
+
+type AssetPickerProps = HTMLFieldProps
+
+
+ {!value ? (
+
+ ) : (
+
+ )}
+
+ );
+});
+
+export const squidexImage: CellPlugin = {
+ id: 'squidexImage',
+ title: 'Squidex Image',
+ description: 'Picks an image from Squidex',
+ version: 1,
+ controls: {
+ type: 'autoform',
+ schema: {
+ properties: {
+ src: {
+ type: 'string',
+ uniforms: {
+ label: 'Source',
+ component: AssetPicker,
+ }
+ },
+ href: {
+ type: 'string',
+ uniforms: {
+ label: 'Link URL'
+ }
+ },
+ openInNewWindow: {
+ type: 'boolean',
+ uniforms: {
+ label: 'Open In New Window'
+ }
+ },
+ alt: {
+ type: 'string',
+ uniforms: {
+ label: 'Alternative Text'
+ }
+ },
+ }
+ },
+ },
+ Renderer: ImageHtmlRenderer,
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/pages/editor/Viewer.tsx b/jscript/react/sample-compose/src/pages/editor/Viewer.tsx
new file mode 100644
index 00000000..55dde9dd
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/editor/Viewer.tsx
@@ -0,0 +1,34 @@
+import { useEffect, useMemo, useState } from 'react';
+import Editor from '@react-page/editor';
+import { useApiContext, ContentCache } from './../../shared';
+import { EditorContext } from './editor-context';
+import { cellPlugins, contentTypes } from './config';
+import '@react-page/editor/lib/index.css';
+import './EditorPage.css';
+
+export const Viewer = ({ value, preloaded }: { value: any, preloaded: string[] }) => {
+ const [loaded, setLoaded] = useState(false);
+ const api = useApiContext();
+
+ const contentCache = useMemo(() => {
+ return new ContentCache(api);
+ }, [api]);
+
+ useEffect(() => {
+ contentCache.setMany(preloaded);
+ setLoaded(true);
+ }, [contentCache, preloaded]);
+
+ if (!loaded) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/pages/hotel/HotelPage.tsx b/jscript/react/sample-compose/src/pages/hotel/HotelPage.tsx
new file mode 100644
index 00000000..361be03b
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/hotel/HotelPage.tsx
@@ -0,0 +1,28 @@
+import { useParams } from 'react-router-dom';
+import { GRAPHQL_FIELDS, Hotel, useFetch } from './../../shared';
+
+export const HotelPage = () => {
+ const { id } = useParams();
+ const { result, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ findHotelsContent(id: "${id}") {
+ ${GRAPHQL_FIELDS.hotel}
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.findHotelsContent;
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: [result.id] };
+ }, [id]);
+
+ if (result) {
+ return Oops!
+ +Sorry, an unexpected error has occurred.
+ ++ {error.statusText || error.message} +
+Hotel not found.
+ } else {
+ return Loading Hotel...
+ }
+}
diff --git a/jscript/react/sample-compose/src/pages/hotels/HotelsPage.tsx b/jscript/react/sample-compose/src/pages/hotels/HotelsPage.tsx
new file mode 100644
index 00000000..789af793
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/hotels/HotelsPage.tsx
@@ -0,0 +1,43 @@
+import { GRAPHQL_FIELDS, Hotel, useFetch } from './../../shared';
+
+export const HotelsPage = () => {
+ const { result: hotels, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryHotelsContentsWithTotal {
+ total,
+ items {
+ ${GRAPHQL_FIELDS.hotel}
+ }
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryHotelsContentsWithTotal.items as any[];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: result.map(x => x.id) };
+ });
+
+ if (loading || !hotels) {
+ return Loading Hotels...
+ }
+
+ return (
+ <>
+ {hotels.length === 0 ? (
+ <>No Hotel found
+ ) : (
+
+ {hotels.map(hotel => (
+
+ )}
+
+ );
+}
diff --git a/jscript/react/sample-compose/src/pages/lading-page/LandingPage.tsx b/jscript/react/sample-compose/src/pages/lading-page/LandingPage.tsx
new file mode 100644
index 00000000..79360e11
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/lading-page/LandingPage.tsx
@@ -0,0 +1,35 @@
+import { useParams } from 'react-router-dom';
+import { Viewer } from '../editor/Viewer';
+import { GRAPHQL_FIELDS, useFetch } from './../../shared';
+
+export const LandingPage = () => {
+ const { slug } = useParams();
+ const { result: page, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryLandingPagesContents(filter: "data/slug/iv eq '${slug}'") {
+ ${GRAPHQL_FIELDS.landingPage}
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryLandingPagesContents[0];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: [result?.id] };
+ }, [slug]);
+
+ if (page) {
+ return (
+
+
+
+ ))}
+ +
+
+ )
+ } else if (!page && !loading) {
+ return {page.flatData.title}
+ +Page not found.
+ } else {
+ return Loading Page...
+ }
+}
diff --git a/jscript/react/sample-compose/src/pages/page/PagePage.tsx b/jscript/react/sample-compose/src/pages/page/PagePage.tsx
new file mode 100644
index 00000000..e7603f2f
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/page/PagePage.tsx
@@ -0,0 +1,28 @@
+import { useParams } from 'react-router-dom';
+import { GRAPHQL_FIELDS, Page, useFetch } from './../../shared';
+
+export const PagePage = () => {
+ const { slug } = useParams();
+ const { result: page, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryPagesContents(filter: "data/slug/iv eq '${slug}'") {
+ ${GRAPHQL_FIELDS.post}
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryPagesContents[0];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: [result?.id] };
+ }, [slug]);
+
+ if (page) {
+ return Page not found.
+ } else {
+ return Loading Page...
+ }
+}
diff --git a/jscript/react/sample-compose/src/pages/post/PostPage.tsx b/jscript/react/sample-compose/src/pages/post/PostPage.tsx
new file mode 100644
index 00000000..9d5bfd0f
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/post/PostPage.tsx
@@ -0,0 +1,28 @@
+import { useParams } from 'react-router-dom';
+import { GRAPHQL_FIELDS, Post, useFetch } from './../../shared';
+
+export const PostPage = () => {
+ const { id } = useParams();
+ const { result: page, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ findPostsContent(id: "${id}") {
+ ${GRAPHQL_FIELDS.post}
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.findPostsContent;
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: [result?.id] };
+ }, [id]);
+
+ if (page) {
+ return Page not found.
+ } else {
+ return Loading Page...
+ }
+}
diff --git a/jscript/react/sample-compose/src/pages/posts/PostsPage.tsx b/jscript/react/sample-compose/src/pages/posts/PostsPage.tsx
new file mode 100644
index 00000000..d1f19f6e
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/posts/PostsPage.tsx
@@ -0,0 +1,63 @@
+import { GRAPHQL_FIELDS, Post, useFetch } from './../../shared';
+
+export const PostsPage = () => {
+ const { result: posts, loading } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryPostsContentsWithTotal {
+ total
+ items {
+ ${GRAPHQL_FIELDS.post}
+ }
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryPostsContentsWithTotal.items as any[];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: getPostsIds(result) };
+ });
+
+ if (loading || !posts) {
+ return Loading Post...
+ }
+
+ return (
+ <>
+ {posts.length === 0 ? (
+ <>No Post found
+ ) : (
+
+ {posts.map(post => (
+
+ )}
+
+ );
+}
+
+export function getPostsIds(posts: any[]) {
+ const result = [];
+
+ if (posts) {
+ for (const post of posts) {
+ if (post) {
+ result.push(post.id);
+ }
+
+ if (post.flatData.text.contents) {
+ for (const content of post.flatData.text.contents) {
+ result.push(content.id);
+ }
+ }
+ }
+ }
+
+ return result;
+}
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/pages/root/RootPage.tsx b/jscript/react/sample-compose/src/pages/root/RootPage.tsx
new file mode 100644
index 00000000..8cdd60c1
--- /dev/null
+++ b/jscript/react/sample-compose/src/pages/root/RootPage.tsx
@@ -0,0 +1,10 @@
+import { Outlet } from 'react-router-dom';
+import { PageLayout } from '../../shared';
+
+export const RootPage = () => {
+ return (
+
+
+
+ ))}
+ +
+
+ );
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/EmbeddableHotel.tsx b/jscript/react/sample-compose/src/shared/EmbeddableHotel.tsx
new file mode 100644
index 00000000..706d7ba0
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/EmbeddableHotel.tsx
@@ -0,0 +1,43 @@
+import { Link } from 'react-router-dom';
+import { useApiContext } from '../utils';
+import { Markdown } from './Markdown';
+
+export const EmbeddableHotel = ({ hotel }: { hotel: any }) => {
+ const { id, flatData: data } = hotel;
+ const api = useApiContext();
+
+ return (
+ {destinationData.name}
+ +
+
+ );
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/Hotel.tsx b/jscript/react/sample-compose/src/shared/Hotel.tsx
new file mode 100644
index 00000000..0e4f472e
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/Hotel.tsx
@@ -0,0 +1,44 @@
+import { Link } from 'react-router-dom';
+import { flatten, useApiContext } from '../utils';
+import { Markdown } from './Markdown'
+
+export const Hotel = ({ hotel, withLink }: { hotel: any, withLink?: boolean }) => {
+ const { id } = hotel;
+ const api = useApiContext();
+ const hotelData = flatten(hotel);
+ const hotelPhotos = hotelData.photos as any[];
+
+ return (
+
+
+
+
+
+
+
+ {data.photos?.length > 0 &&
+ 
+ }
+
+
+
+
+ {data.name}
+ + + {data.rooms && +
+ {data.rooms} Rooms
+
+ }
+
+
+ Price: {data.minPrice} EUR
+
+ }
+
+ {withLink ? (
+
+
+ );
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/Markdown.tsx b/jscript/react/sample-compose/src/shared/Markdown.tsx
new file mode 100644
index 00000000..60b537ac
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/Markdown.tsx
@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import ReactMarkdown from 'react-markdown'
+import { useApiContext } from '../utils';
+import { EmbeddableHotel } from './EmbeddableHotel';
+
+export const Markdown = ({ markdown, references }: { markdown: string, references?: any[] }) => {
+ const api = useApiContext();
+
+ const hotelsRegex = useMemo(() => {
+ const { apiUrl, appName } = api;
+
+ return new RegExp(`${escapeRegExp(apiUrl)}\\/api/content\\/${escapeRegExp(appName)}\\/hotels/(?{hotelData.name}
+ + ) : ( +{hotelData.name}
+ )} + + {hotelData.rooms && +
+ {hotelData.rooms} Rooms
+
+ }
+
+
+ Price: {hotelData.minPrice} EUR
+
+ }
+
+ {hotelPhotos && hotelPhotos.length > 0 &&
+
+ {hotelPhotos.map(photo =>
+ 
+ )}
+
+ }
+
+
+ );
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/PageLayout.tsx b/jscript/react/sample-compose/src/shared/PageLayout.tsx
new file mode 100644
index 00000000..eb4d540c
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/PageLayout.tsx
@@ -0,0 +1,100 @@
+import { ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import { useFetch } from '../utils';
+import { NavLink } from './NavLink';
+
+interface PageLayoutProps {
+ children: ReactNode;
+}
+
+export const PageLayout = (props: PageLayoutProps) => {
+ const { children } = props;
+
+ const { result: landingPages } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryLandingPagesContents {
+ id,
+ flatData {
+ slug,
+ title
+ }
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryLandingPagesContents as any[];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: result.map(x => x.id) };
+ });
+
+ const { result: pages } = useFetch(async (fetcher, api) => {
+ const query = `
+ {
+ queryPagesContents {
+ id,
+ flatData {
+ slug,
+ title
+ }
+ }
+ }`;
+
+ const response = await fetcher(`api/content/${api.appName}/graphql`, { query });
+ const result = response.data.queryPagesContents as any[];
+
+ // This hook also returns a list of IDs. All the IDs are monitored using a GraphQL subscription.
+ return { result, ids: result.map(x => x.id) };
+ });
+
+ return (
+ <>
+
+
+ {pageData.title}
+ +
+ {children}
+
+
+ + +
+ {landingPages && landingPages.length > 0 &&
+
+
+ )
+}
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/Post.tsx b/jscript/react/sample-compose/src/shared/Post.tsx
new file mode 100644
index 00000000..5d13f7b9
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/Post.tsx
@@ -0,0 +1,22 @@
+import { Link } from 'react-router-dom';
+import { flatten } from '../utils';
+import { Markdown } from './Markdown';
+
+export const Post = ({ post, withLink }: { post: any, withLink?: true }) => {
+ const { id } = post;
+ const postData = flatten(post);
+
+ return (
+ -
+ {landingPages.map(page =>
+
-
+
+ {page.flatData.title} + +
+ )}
+
+ {withLink ? (
+
+
+ );
+};
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/shared/index.ts b/jscript/react/sample-compose/src/shared/index.ts
new file mode 100644
index 00000000..73aa5b93
--- /dev/null
+++ b/jscript/react/sample-compose/src/shared/index.ts
@@ -0,0 +1,9 @@
+export * from './Destination';
+export * from './EmbeddableHotel';
+export * from './Hotel';
+export * from './Markdown';
+export * from './NavLink';
+export * from './Page';
+export * from './PageLayout';
+export * from './Post';
+export * from '../utils';
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/typings.d.ts b/jscript/react/sample-compose/src/typings.d.ts
new file mode 100644
index 00000000..51e76a84
--- /dev/null
+++ b/jscript/react/sample-compose/src/typings.d.ts
@@ -0,0 +1,199 @@
+declare class EditorPlugin {
+ /**
+ * Get the current context.
+ */
+ getContext(): any;
+
+ /**
+ * Notifies the parent to navigate to the path.
+ */
+ navigate(url: string): void;
+
+ /**
+ * Register an function that is called when the sidebar is initialized.
+ *
+ * @param {Function} callback: The callback to invoke.
+ */
+ onInit(callback: () => void): void;
+
+ /**
+ * Register an function that is called whenever the value of the content has changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
+ */
+ onContentChanged(callback: (content: any) => void): void;
+
+ /**
+ * Clean the editor SDK.
+ */
+ clean(): void;
+}
+
+declare class SquidexFormField {
+ /**
+ * Get the current value.
+ */
+ getValue(): any;
+
+ /**
+ * Get the current value.
+ */
+ getContext(): any;
+
+ /**
+ * Get the current form value.
+ */
+ getFormValue(): any;
+
+ /**
+ * Get the current field language.
+ */
+ getLanguage(): string | undefined | null;
+
+ /**
+ * Get the current index when the field is an array item.
+ */
+ getIndex(): number | undefined | null;
+
+ /**
+ * Get the disabled state.
+ */
+ isDisabled(): boolean;
+
+ /**
+ * Get the fullscreen state.
+ */
+ isFullscreen(): boolean;
+ /**
+ * Get the expanded state.
+ */
+ isExpanded(): boolean;
+
+ /**
+ * Notifies the control container that the editor has been touched.
+ */
+ touched(): void;
+
+ /**
+ * Notifies the parent to navigate to the path.
+ *
+ * @param {string} url: The url to navigate to.
+ */
+ navigate(url: string): void;
+
+ /**
+ * Notifies the parent to go to fullscreen mode.
+ */
+ toggleFullscreen(): void;
+
+ /**
+ * Notifies the parent to go to expanded mode.
+ */
+ toggleExpanded(): void;
+
+ /**
+ * Notifies the control container that the value has been changed.
+ *
+ * @param {any} newValue: The new field value.
+ */
+ valueChanged(newValue: any): void;
+
+ /**
+ * Shows an info alert.
+ *
+ * @param {string} text: The info text.
+ */
+ notifyInfo(text: string): void;
+
+ /**
+ * Shows an error alert.
+ *
+ * @param {string} text: error info text.
+ */
+ notifyError(text: string): void;
+
+ /**
+ * Shows an confirm dialog.
+ *
+ * @param {string} title The title of the dialog.
+ * @param {string} text The text of the dialog.
+ * @param {function} callback The callback to invoke when the dialog is completed or closed.
+ */
+ confirm(title: string, text: string, callback: (result: boolean) => void): void;
+
+ /**
+ * Shows the dialog to pick assets.
+ *
+ * @param {function} callback The callback to invoke when the dialog is completed or closed.
+ */
+ pickAssets(callback: (assets: any[]) => void): void;
+
+ /**
+ * Shows the dialog to pick contents.
+ *
+ * @param {string} schemas: The list of schema names.
+ * @param {function} callback The callback to invoke when the dialog is completed or closed.
+ */
+ pickContents(schemas: string[], callback: (assets: any[]) => void): void;
+
+ /**
+ * Register an function that is called when the field is initialized.
+ *
+ * @param {Function} callback: The callback to invoke.
+ */
+ onInit(callback: () => void): void;
+
+ /**
+ * Register an function that is called when the field is moved.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: New position (number).
+ */
+ onMoved(callback: (index: number) => void): void;
+
+ /**
+ * Register an function that is called whenever the field is disabled or enabled.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: New disabled state (boolean, disabled = true, enabled = false).
+ */
+ onDisabled(callback: (isDisabled: boolean) => void): void;
+
+ /**
+ * Register an function that is called whenever the field language is changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Language code (string).
+ */
+ onLanguageChanged(callback: (language: string) => void): void;
+
+ /**
+ * Register an function that is called whenever the value of the field has changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Field value (any).
+ */
+ onValueChanged(callback: (value: any) => void): void;
+
+ /**
+ * Register an function that is called whenever the value of the content has changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Content value (any).
+ */
+ onFormValueChanged(callback: (value: any) => void): void;
+
+ /**
+ * Register an function that is called whenever the fullscreen mode has changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Fullscreen state (boolean, fullscreen on = true, fullscreen off = false).
+ */
+ onFullscreen(callback: (isFullscreen: boolean) => void): void;
+
+ /**
+ * Register an function that is called whenever the expanded mode has changed.
+ *
+ * @param {Function} callback: The callback to invoke. Argument 1: Expanded state (boolean, expanded on = true, expanded off = false).
+ */
+ onExpanded(callback: (isExpanded: boolean) => void): void;
+
+ /**
+ * Clean the editor SDK.
+ */
+ clean(): void;
+}
\ No newline at end of file
diff --git a/jscript/react/sample-compose/src/utils/api-context.ts b/jscript/react/sample-compose/src/utils/api-context.ts
new file mode 100644
index 00000000..a2d7024b
--- /dev/null
+++ b/jscript/react/sample-compose/src/utils/api-context.ts
@@ -0,0 +1,95 @@
+import { createContext, useContext } from 'react';
+
+export type ApiConfig = {
+ // The URL to the api.
+ apiUrl: string;
+
+ // The name of the app.
+ appName: string;
+
+ // The client ID.
+ clientId: string;
+
+ // The client secret.
+ clientSecret: string;
+}
+
+export type ApiContextType = {
+ // The URL to the api.
+ apiUrl: string;
+
+ // The name of the app.
+ appName: string;
+
+ // The access token provider.
+ accessToken: (force: boolean) => Promise{postData.title}
+ + ) : ( +{postData.title}
+ )} + +Subscribing.
+ );
+}
\ No newline at end of file
diff --git a/jscript/react/sample-hotels/src/components/TopNav.js b/jscript/react/sample-hotels/src/components/TopNav.jsx
similarity index 96%
rename from jscript/react/sample-hotels/src/components/TopNav.js
rename to jscript/react/sample-hotels/src/components/TopNav.jsx
index ff4dea80..290ae9c8 100644
--- a/jscript/react/sample-hotels/src/components/TopNav.js
+++ b/jscript/react/sample-hotels/src/components/TopNav.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
-import { getPages } from './../service';
+import { getPages } from '../service';
export const TopNav = () => {
const [pages, setPages] = React.useState([]);
diff --git a/jscript/react/sample-hotels/src/components/index.js b/jscript/react/sample-hotels/src/components/index.js
index cef22f20..13b92ae5 100644
--- a/jscript/react/sample-hotels/src/components/index.js
+++ b/jscript/react/sample-hotels/src/components/index.js
@@ -1,4 +1,4 @@
-export * from './Hotel.js';
+export * from './Hotel';
export * from './HotelSite';
export * from './HotelsSite';
export * from './Page';
@@ -6,4 +6,5 @@ export * from './PageSite';
export * from './Post';
export * from './PostSite';
export * from './PostsSite';
+export * from './Subscribe';
export * from './TopNav';
\ No newline at end of file
diff --git a/jscript/react/sample-hotels/src/service/index.js b/jscript/react/sample-hotels/src/service/index.js
index 56749d65..7b5f750d 100644
--- a/jscript/react/sample-hotels/src/service/index.js
+++ b/jscript/react/sample-hotels/src/service/index.js
@@ -9,9 +9,9 @@ export const CONFIG = !DEV ? {
clientSecret: 'ZxmQGgouOUmyVU4fh38QOCqKja3IH1vPu1dUx40KDec='
} : {
url: 'https://localhost:5001',
- appName: 'hotels3',
- clientId: 'hotels3:default',
- clientSecret: 'hevj7xpxuhk3ofoqb9lqa3d2oxctzrxctruic7tz124x'
+ appName: 'hotels',
+ clientId: 'hotels:default',
+ clientSecret: 'pwiw7ui7gx3xmgcftvdp9rygvr1aos7t2ssmh2k0rfcx'
};
function getBearerToken() {