useRecommendations Hook (#8)

* Initial file structure

* Update types to include `apiKey` & `secret`
Add additional parameters (`user`, `unix`, `signature`) for `getRecommendations` call

* useRecommendations hook

* Fix file path

* Move `react` & `react-dom` from `devDep` to `peerDep`

* Optimize useRecommendations to use useCallback

* Update `useLoader` types

* Comment file imports

* Remove logs

environments/react-18.2.js/package.json

@@ -6,8 +6,8 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "file:../../node_modules/react",
+    "react-dom": "file:../../node_modules/react-dom",
     "react-scripts": "5.0.1",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"

environments/react-18.2.js/src/TestContainer.tsx

@@ -1,28 +1,30 @@
 import React, { useEffect, useState } from 'react';
-import { BreinifySetup, getRecommendations } from 'brein-api-library-react';
+import { BreinifySetup, getRecommendations, useRecommendations } from 'brein-api-library-react';
 
 const apiKey = process.env.REACT_APP_API_KEY || '';
 const secret = process.env.REACT_APP_SECRET;
 
 BreinifySetup({ apiKey, secret });
 
 export function TestContainer() {
-	const [value, setValue] = useState<any>({});
+	const { getRecs, data, isLoading, isSuccess, isFailure, error } = useRecommendations({});
 
-	function getCall() {
-		getRecommendations()
-			.then((response: any) => {
-				console.log('response: ', response);
-				setValue(response);
-			})
-			.catch((error: any) => {
-				console.log('error: ', error);
-			});
+	function onButton() {
+		getRecs({ recommendation: {} });
 	}
 
 	useEffect(() => {
-		getCall();
+		getRecs({ recommendation: { numRecommendations: 10 } });
 	}, []);
 
-	return <div>{JSON.stringify(value, null, 2)}</div>;
+	console.log('data, isLoading, isSuccess, isFailure, error: ', { data, isLoading, isSuccess, isFailure, error });
+
+	return (
+		<div>
+			{isLoading && <div>LOADING</div>}
+			{isSuccess && <>{JSON.stringify(data, null, 2)}</>}
+			{isFailure && <>{error}</>}
+			<button onClick={onButton}>Click Here</button>
+		</div>
+	);
 }