diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/profile/index.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/profile/index.tsx | 42 |
1 files changed, 42 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/profile/index.tsx b/packages/demobank-ui/src/pages/profile/index.tsx new file mode 100644 index 000000000..3b9824488 --- /dev/null +++ b/packages/demobank-ui/src/pages/profile/index.tsx @@ -0,0 +1,42 @@ +import { FunctionalComponent, h } from 'preact'; +import { useEffect, useState } from 'preact/hooks'; + +interface Props { + user: string; +} + +const Profile: FunctionalComponent<Props> = (props: Props) => { + const { user } = props; + const [time, setTime] = useState<number>(Date.now()); + const [count, setCount] = useState<number>(0); + + // gets called when this route is navigated to + useEffect(() => { + const timer = window.setInterval(() => setTime(Date.now()), 1000); + + // gets called just before navigating away from the route + return (): void => { + clearInterval(timer); + }; + }, []); + + // update the current time + const increment = (): void => { + setCount(count + 1); + }; + + return ( + <div> + <h1>Profile: {user}</h1> + <p>This is the user profile for a user named {user}.</p> + + <div>Current time: {new Date(time).toLocaleString()}</div> + + <p> + <button onClick={increment}>Click Me</button> Clicked {count} times. + </p> + </div> + ); +}; + +export default Profile; |