Merge pull request #57 from criipto/convert-example-to-ts

Convert example app to TypeScript

Author: janmeier

example/package.json

@@ -4,9 +4,12 @@
   "private": true,
   "dependencies": {
     "@criipto/verify-react": "..",
+    "@types/react": "../node_modules/@types/react",
+    "@types/react-dom": "../node_modules/@types/react-dom",
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom",
-    "react-scripts": "5.0.1"
+    "react-scripts": "5.0.1",
+    "typescript": "../node_modules/typescript"
   },
   "homepage": ".",
   "scripts": {

example/src/App.js example/src/App.tsxexample/src/App.js renamed to example/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useCriiptoVerify, AuthMethodSelector } from '@criipto/verify-react';
+import { useCriiptoVerify, AuthMethodSelector, OAuth2Error } from '@criipto/verify-react';
 import Header from './Header';
 import Login from './Login';
 import Loading from './Loading';
@@ -12,7 +12,7 @@ function App() {
   const { claims, isLoading, logout, error } = useCriiptoVerify();
 
   const handleLogout = () => {
-    logout('http://localhost:3000');
+    logout({ redirectUri: 'http://localhost:3000' });
   };
 
   return (
@@ -21,7 +21,10 @@ function App() {
       {isLoading && <Loading />}
       {error ? (
         <p>
-          An error occurred: {error.error} ({error.error_description})
+          An error occurred:{' '}
+          {error instanceof OAuth2Error
+            ? `${error.error} (${error.error_description})`
+            : String(error)}
         </p>
       ) : null}
       {claims ? (

example/src/Dashboard.js example/src/Dashboard.tsxexample/src/Dashboard.js renamed to example/src/Dashboard.tsx

@@ -1,7 +1,16 @@
 import React from 'react';
+import type { useCriiptoVerify } from '@criipto/verify-react';
 import './App.css';
 
-function Dashboard({ user: { name, birthdate, country, cprNumberIdentifier, iat } }) {
+type Claims = NonNullable<ReturnType<typeof useCriiptoVerify>['claims']>;
+
+interface DashboardProps {
+  user: Claims;
+}
+
+function Dashboard({
+  user: { name, birthdate, country, cprNumberIdentifier, iat },
+}: DashboardProps) {
   return (
     <div className="user-dashboard main">
       <h2>Welcome to your savings dashboard, {name}</h2>

example/src/Footer.js example/src/Footer.tsxexample/src/Footer.js renamed to example/src/Footer.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
+import type { useCriiptoVerify } from '@criipto/verify-react';
 import './App.css';
 
-function Header({ handleLogout, user }) {
+interface HeaderProps {
+  handleLogout: () => void;
+  user: ReturnType<typeof useCriiptoVerify>['claims'];
+}
+
+function Header({ handleLogout, user }: HeaderProps) {
   return (
     <header className="App-header">
       <p>Example Pension App</p>

example/src/Header.js example/src/Header.tsxexample/src/Header.js renamed to example/src/Header.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import './App.css';
 
-function Login({ children }) {
+interface LoginProps {
+  children: React.ReactNode;
+}
+
+function Login({ children }: LoginProps) {
   return (
     <div className="login main">
       <p>Please login to access your pension savings.</p>

example/src/Loading.js example/src/Loading.tsxexample/src/Loading.js renamed to example/src/Loading.tsx

@@ -4,13 +4,12 @@ import './index.css';
 import App from './App';
 import { CriiptoVerifyProvider } from '@criipto/verify-react';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
   <React.StrictMode>
     <CriiptoVerifyProvider
       domain="samples.criipto.id"
       clientID="urn:criipto:samples:criipto:verify-react"
-      redirectUri="http://localhost:3000"
       sessionStore={window.localStorage}
     >
       <App />

example/src/Login.js example/src/Login.tsxexample/src/Login.js renamed to example/src/Login.tsx

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}