feat(demo): better demo

AxaFrance · Nov 5, 2024 · b3f51de · b3f51de
1 parent 02a6c8b
commit b3f51de
Show file tree

Hide file tree

Showing 8 changed files with 141 additions and 197 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/examples/react-oidc-demo/src/App.tsx b/examples/react-oidc-demo/src/App.tsx
@@ -2,12 +2,12 @@ import { OidcProvider, withOidcSecure } from '@axa-fr/react-oidc';
 import React, { useReducer } from 'react';
 import { BrowserRouter, NavLink, Route, Routes } from 'react-router-dom';
 
+import CodeExecutor from './CodeExecutor';
 import { configurationIdentityServer } from './configurations.js';
 import { FetchUserHoc, FetchUserHook } from './FetchUser.js';
 import { Home } from './Home.js';
 import { MultiAuthContainer } from './MultiAuth.js';
 import { Profile, SecureProfile } from './Profile.js';
-import CodeExecutor from "./CodeExecutor";
 
 const OidcSecureHoc = withOidcSecure(Profile);
 
@@ -131,7 +131,7 @@ function App() {
           </div>
         </div>
       </div>
-      <CodeExecutor/>
+      <CodeExecutor />
     </>
   );
 }

diff --git a/examples/react-oidc-demo/src/CodeExecutor.tsx b/examples/react-oidc-demo/src/CodeExecutor.tsx
@@ -1,41 +1,41 @@
 import React, { useState } from 'react';
 
 const CodeExecutor: React.FC = () => {
-    const [code, setCode] = useState<string>('');
-    const [output, setOutput] = useState<string>('');
-    
-    const executeCode = () => {
-        try {
-            const result = eval(`
+  const [code, setCode] = useState<string>('');
+  const [output, setOutput] = useState<string>('');
+
+  const executeCode = () => {
+    try {
+      const result = eval(`
                 (function() {
                     ${code}
                 })()
             `);
-            setOutput(String(result));
-        } catch (error) {
-            setOutput(`Erreur : ${(error as Error).message}`);
-        }
-    };
+      setOutput(String(result));
+    } catch (error) {
+      setOutput(`Erreur : ${(error as Error).message}`);
+    }
+  };
 
-    return (
-        <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
-            <h2>Execute your JavaScript Code</h2>
-            <textarea
-                value={code}
-                onChange={(e) => setCode(e.target.value)}
-                placeholder="Write your JavaScript code here..."
-                rows={10}
-                style={{ width: '100%', marginBottom: '10px' }}
-            ></textarea>
-            <button onClick={executeCode} style={{ padding: '10px 20px' }}>
-                Execute the code
-            </button>
-            <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f5f5f5' }}>
-                <h3>Result :</h3>
-                <pre>{output}</pre>
-            </div>
-        </div>
-    );
+  return (
+    <div style={{ padding: '20px', maxWidth: '600px', margin: '0 auto' }}>
+      <h2>Execute your JavaScript Code</h2>
+      <textarea
+        value={code}
+        onChange={e => setCode(e.target.value)}
+        placeholder="Write your JavaScript code here..."
+        rows={10}
+        style={{ width: '100%', marginBottom: '10px' }}
+      ></textarea>
+      <button onClick={executeCode} style={{ padding: '10px 20px' }}>
+        Execute the code
+      </button>
+      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f5f5f5' }}>
+        <h3>Result :</h3>
+        <pre>{output}</pre>
+      </div>
+    </div>
+  );
 };
 
 export default CodeExecutor;
diff --git a/examples/react-oidc-demo/src/FetchUser.tsx b/examples/react-oidc-demo/src/FetchUser.tsx
@@ -50,7 +50,11 @@ export const FetchUserHoc = () => (
 );
 
 export const FetchUserHook = (props: any) => {
-  const { fetch } = useOidcFetch(window.fetch, props.configurationName, props.demonstratingProofOfPossession ?? false);
+  const { fetch } = useOidcFetch(
+    window.fetch,
+    props.configurationName,
+    props.demonstratingProofOfPossession ?? false,
+  );
   return (
     <OidcSecure configurationName={props.configurationName}>
       <DisplayUserInfo fetch={fetch} />

diff --git a/examples/react-oidc-demo/src/Home.tsx b/examples/react-oidc-demo/src/Home.tsx
@@ -1,5 +1,5 @@
-import { useOidc, useOidcUser } from '@axa-fr/react-oidc';
-import React, { useEffect } from 'react';
+import { useOidc } from '@axa-fr/react-oidc';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const Home = () => {

diff --git a/examples/react-oidc-demo/src/MultiAuth.tsx b/examples/react-oidc-demo/src/MultiAuth.tsx
@@ -289,7 +289,10 @@ const DisplayAccessToken = ({ configurationName }) => {
           )}
         </div>
       </div>
-      <FetchUserHook configurationName={configurationName} demonstratingProofOfPossession={demonstratingProofOfPossession}  />
+      <FetchUserHook
+        configurationName={configurationName}
+        demonstratingProofOfPossession={demonstratingProofOfPossession}
+      />
     </>
   );
 };
diff --git a/examples/react-oidc-demo/src/Profile.tsx b/examples/react-oidc-demo/src/Profile.tsx
@@ -15,7 +15,7 @@ interface OidcUserRoleInfo extends OidcUserInfo {
 
 const DisplayUserInfo = () => {
   const { oidcUser, oidcUserLoadingState, reloadOidcUser } = useOidcUser<OidcUserRoleInfo>();
-  
+
   switch (oidcUserLoadingState) {
     case OidcUserStatus.Loading:
       return <p>User Information are loading</p>;

diff --git a/examples/react-oidc-demo/src/configurations.ts b/examples/react-oidc-demo/src/configurations.ts
@@ -46,7 +46,6 @@ export const configurationIdentityServerWithoutDiscovery = {
   service_worker_only: false,
 };
 
-
 export const configurationGoogle = {
   client_id: '908893276222-f2drloh56ll0g99md38lv2k810d0nk0p.apps.googleusercontent.com',
   redirect_uri: `${window.location.origin}/multi-auth/callback-google`,