Add form steps without submit

Fixes: AFORM-3718
episerver · Dec 14, 2023 · a3a58ac · a3a58ac
1 parent 68ceee6
commit a3a58ac
Show file tree

Hide file tree

Showing 12 changed files with 540 additions and 137 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,9 @@
     "start-frontend": "npm start -w sample-react-app",
     "publish-forms-sdk": "npm publish -w @episerver/forms-sdk",
     "publish-forms-react": "npm publish -w @episerver/forms-react",
-    "publish":"npm run publish-forms-sdk && npm run publish-forms-react"
+    "publish": "npm run publish-forms-sdk && npm run publish-forms-react"
+  },
+  "dependencies": {
+    "react-router": "^6.21.0"
   }
 }
diff --git a/samples/sample-react-app/package.json b/samples/sample-react-app/package.json
@@ -3,20 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@episerver/forms-react": "file:../../src/@episerver/forms-react",
+    "@episerver/forms-sdk": "file:../../src/@episerver/forms-sdk",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.52",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
+    "@types/react-router-dom": "^5.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^5.3.4",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4",
-    "@episerver/forms-sdk": "file:../../src/@episerver/forms-sdk",
-    "@episerver/forms-react": "file:../../src/@episerver/forms-react"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/samples/sample-react-app/src/App.tsx b/samples/sample-react-app/src/App.tsx
@@ -3,51 +3,59 @@ import { useFetch } from './hooks/useFetch';
 import { Form, FormLogin } from '@episerver/forms-react';
 import { extractParams } from './helpers/urlHelper';
 import { FormCache, FormConstants, IdentityInfo, isNullOrEmpty } from '@episerver/forms-sdk';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { BrowserRouter, useHistory, useLocation } from 'react-router-dom';
 
 function App() {
-  const { relativePath, language } = extractParams(window.location.pathname)
-  const url = `${process.env.REACT_APP_ENDPOINT_GET_FORM_BY_PAGE_URL}${relativePath}`;
-  const {data: pageData, loading} = useFetch(url);
-  const formCache = new FormCache();
-  const [identityInfo, setIdentityInfo] = useState<IdentityInfo>({
-    accessToken: formCache.get<string>(FormConstants.FormAccessToken)
-  } as IdentityInfo);
+    const location = useLocation();
+    const { relativePath, language } = extractParams(window.location.pathname)
+    const url = `${process.env.REACT_APP_ENDPOINT_GET_FORM_BY_PAGE_URL}${location.pathname}`;
+
+    const { data: pageData, loading } = useFetch(url);
+
+    const formCache = new FormCache();
+    const [identityInfo, setIdentityInfo] = useState<IdentityInfo>({
+        accessToken: formCache.get<string>(FormConstants.FormAccessToken)
+    } as IdentityInfo);
 
-  const handleAuthen = (identityInfo: IdentityInfo) => {
-    setIdentityInfo(identityInfo);
-  }
+    const history = useHistory()
 
-  return (
-    <div className="App">
-      {loading && <div className='loading'>Loading...</div>}
-
-      {!loading && pageData && (
-          <>
-            <h1>{pageData.title}</h1>
-            <div className='main'>
-              <div className='left'>
-                  {pageData.childrens.map((c: any) => (
-                    <Form 
-                      key={c.reference.key}
-                      formKey={c.reference.key} 
-                      language={language ?? "en"}
-                      baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
-                      identityInfo={identityInfo}/>
-                  ))}
-              </div>
-              <div className={`right ${!isNullOrEmpty(identityInfo.accessToken) ? "hide" : ""}`}>
-                <h2>Login</h2>
-                <FormLogin 
-                  clientId='TestClient' 
-                  authBaseUrl={process.env.REACT_APP_AUTH_BASEURL ?? ""} 
-                  onAuthenticated={handleAuthen} />
-              </div>
-            </div>
-          </>
-      )}
-    </div>
-  );
+    const handleAuthen = (identityInfo: IdentityInfo) => {
+        setIdentityInfo(identityInfo);
+    }
+
+    return (
+        <div className="App">
+            {loading && <div className='loading'>Loading...</div>}
+
+            {!loading && pageData && (
+                <>
+                    <h1>{pageData.title}</h1>
+                    <div className='main'>
+                        <div className='left'>
+                            {pageData.childrens.map((c: any) => (
+                                <Form
+                                    key={c.reference.key}
+                                    formKey={c.reference.key}
+                                    language={language ?? "en"}
+                                    baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
+                                    identityInfo={identityInfo} 
+                                    history={history}
+                                />
+                            ))}
+                        </div>
+                        <div className={`right ${!isNullOrEmpty(identityInfo.accessToken) ? "hide" : ""}`}>
+                            <h2>Login</h2>
+                            <FormLogin
+                                clientId='TestClient'
+                                authBaseUrl={process.env.REACT_APP_AUTH_BASEURL ?? ""}
+                                onAuthenticated={handleAuthen} />
+                        </div>
+                    </div>
+                </>
+            )}
+        </div>
+    );
 }
 
 export default App;
diff --git a/samples/sample-react-app/src/index.tsx b/samples/sample-react-app/src/index.tsx
@@ -2,12 +2,24 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import {
+    BrowserRouter as Router,
+    Route,
+    Switch
+} from "react-router-dom";
+
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+    document.getElementById('root') as HTMLElement
 );
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <React.StrictMode>
+        <Router>
+            <Switch>
+                <Route path="/">
+                    <App/>
+                </Route>
+            </Switch>
+        </Router>
+    </React.StrictMode>
 );
diff --git a/src/@episerver/forms-react/package.json b/src/@episerver/forms-react/package.json
@@ -18,7 +18,9 @@
   },
   "keywords": [],
   "dependencies": {
-    "@episerver/forms-sdk": "file:../forms-sdk"
+    "@episerver/forms-sdk": "file:../forms-sdk",
+    "@types/react-router-dom": "^5.3.3",
+    "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.4",

diff --git a/src/@episerver/forms-react/src/Form.tsx b/src/@episerver/forms-react/src/Form.tsx
@@ -21,14 +21,16 @@ interface FormProps {
      * Access token for form submit
      */
     identityInfo?: IdentityInfo
+
+    history? : any
 }
 
-export const Form = ({formKey, language, baseUrl, identityInfo}: FormProps) => {
+export const Form = ({formKey, language, baseUrl, identityInfo, history}: FormProps) => {
   const {data: formData } = useFormLoader({ formKey, language, baseUrl } as UseFormLoaderProps)
 
   return (
     <>
-        {formData && <FormContainerBlock form={formData} key={formData.key} identityInfo={identityInfo} baseUrl={baseUrl} />}
+        {formData && <FormContainerBlock form={formData} key={formData.key} identityInfo={identityInfo} baseUrl={baseUrl} history={history}/>}
     </>
   );
 }