diff --git a/index.html b/index.html index dbc2ba2..7de8ada 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/LogClick.tsx b/src/LogClick.tsx index 1912689..9998b54 100644 --- a/src/LogClick.tsx +++ b/src/LogClick.tsx @@ -1,12 +1,23 @@ +import { Children, cloneElement } from 'react'; import { useYLSLogger } from '.'; +import { LogPayloadParams } from './types/LogPayloadParams'; interface Props { - children: React.ReactNode; + children: React.ReactElement; params: LogPayloadParams; } export const LogClick = ({ children, params }: Props) => { const logger = useYLSLogger(); + const child = Children.only(children); - return <>; + return cloneElement(child, { + onClick: (...args: any[]) => { + logger.click(params); + + if (child.props && typeof child.props['onClick'] === 'function') { + return child.props.onClick(...args); + } + }, + }); }; diff --git a/src/LogScreen.tsx b/src/LogScreen.tsx index 7a1f9bb..1a4724c 100644 --- a/src/LogScreen.tsx +++ b/src/LogScreen.tsx @@ -1,6 +1,7 @@ import { useYLSLogger } from '.'; import { useLocation } from 'react-router-dom'; import { useEffect } from 'react'; +import { LogPayloadParams } from './types/LogPayloadParams'; interface Props { children: React.ReactNode; diff --git a/src/Logger.ts b/src/Logger.ts index 28b94e3..cd88c68 100644 --- a/src/Logger.ts +++ b/src/Logger.ts @@ -1,3 +1,5 @@ +import { LogPayloadParams } from './types/LogPayloadParams'; + interface LoggerType { path: string; platform: string; @@ -17,12 +19,12 @@ const createTimestamp = () => { }; export const useYLSLogger = () => { - const screen = ({ path }: LoggerType) => { + const screen = ({ path }: LogPayloadParams) => { // console.log(`Logging screen information for path: ${path}`); }; - const click = ({ name }: LoggerType) => { - // console.log(`Logging click information for button: ${name}`); + const click = ({ name }: LogPayloadParams) => { + console.log(`Logging click information for button: ${name}`); }; return { diff --git a/src/demo/App.tsx b/src/demo/App.tsx new file mode 100644 index 0000000..9c1d4e4 --- /dev/null +++ b/src/demo/App.tsx @@ -0,0 +1,22 @@ +import { useState } from 'react'; +import { LogClick } from '../LogClick'; + +export const App = () => { + const [count, setCount] = useState(0); + + return ( + <> +

Vite + React

+
+ + + +
+ + ); +}; diff --git a/src/demo/main.tsx b/src/demo/main.tsx new file mode 100644 index 0000000..6c14464 --- /dev/null +++ b/src/demo/main.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { App } from './App'; + +ReactDOM.createRoot(document.getElementById('root')!).render( + + + +); diff --git a/src/types/LogPayloadParams.ts b/src/types/LogPayloadParams.ts index 14e90f6..dd30351 100644 --- a/src/types/LogPayloadParams.ts +++ b/src/types/LogPayloadParams.ts @@ -1,6 +1,7 @@ -interface LogPayloadParams { - path: string; +export interface LogPayloadParams { + userId: number; name: string; + path?: string; message?: string; tags?: string[]; }