Merge pull request #270 from p3ol/feature/switch-to-react-access-v2

✨feat(access): switch example to react access v2 (with access and audit)

Author: dackmin

.eslintrc.js

@@ -2,5 +2,6 @@ module.exports = {
   extends: '@poool/eslint-config-react',
   rules: {
     'react/prop-types': 0,
+    'react/react-in-jsx-scope': 0,
   },
 };

app/components/App.js

@@ -1,18 +1,13 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { PaywallContext } from '@poool/react-access';
+import { AccessContext } from '@poool/react-access';
 
 import { defaultHistory } from '../utils';
 import Home from './Home';
 import Premium from './Premium';
 import Free from './Free';
 import Subscription from './Subscription';
-
-// Avoid redux
-window.testUser = window.testUser || {
-  logged: false,
-  premium: false,
-};
+import Auth from './Auth';
 
 export default () => {
   useEffect(() => {
@@ -21,17 +16,24 @@ export default () => {
 
   return (
     <BrowserRouter history={defaultHistory}>
-      <PaywallContext
-        appId="155PF-L7Q6Q-EB2GG-04TF8"
-        config={{ debug: true, cookies_enabled: true, custom_segment: 'react' }}
-      >
-        <Routes>
-          <Route path="/premium" element={<Premium />} />
-          <Route path="/free" element={<Free />} />
-          <Route path="/subscribe" element={<Subscription />} />
-          <Route index element={<Home />} />
-        </Routes>
-      </PaywallContext>
+      <Auth>
+        <AccessContext
+          appId="155PF-L7Q6Q-EB2GG-04TF8"
+          config={{
+            debug: true,
+            cookies_enabled: true,
+            custom_segment: 'react',
+          }}
+          withAudit={true}
+        >
+          <Routes>
+            <Route path="/premium" element={<Premium />} />
+            <Route path="/free" element={<Free />} />
+            <Route path="/subscribe" element={<Subscription />} />
+            <Route index element={<Home />} />
+          </Routes>
+        </AccessContext>
+      </Auth>
     </BrowserRouter>
   );
 };

app/components/Auth.js

@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react';
+
+import { AuthContext } from '../contexts';
+
+export default ({ children }) => {
+  const [connecting, setConnecting] = useState(false);
+  const [connected, setConnected] = useState(false);
+  const [premium, setPremium] = useState(false);
+
+  const login = async e => {
+    e?.preventDefault();
+
+    if (connecting) {
+      return;
+    }
+
+    setConnecting(true);
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    setConnecting(false);
+    setConnected(true);
+    setPremium(true);
+  };
+
+  const getContext = useCallback(() => ({
+    login,
+    connecting,
+    connected,
+    premium,
+  }), [connecting, connected, premium]);
+
+  return (
+    <AuthContext.Provider value={getContext()} children={children} />
+  );
+};

app/components/Free.js

@@ -1,28 +1,26 @@
-import React, { useEffect } from 'react';
-import { usePoool } from '@poool/react-access';
+import { useEffect } from 'react';
+import { useAudit } from '@poool/react-access';
 
+import { useAuth } from '../hooks';
 import Header from './fragments/Header';
 
 export default () => {
-  const { poool, appId, config } = usePoool();
-
+  const { lib: audit, config } = useAudit();
+  const { premium } = useAuth();
   useEffect(() => {
     init();
 
-    return () => poool('flush');
-  }, [poool]);
+  }, [audit]);
 
   const init = async () => {
-    poool?.('init', appId);
-    poool('config', {
+    audit?.config({
       ...config,
-      user_is_premium: window.testUser?.premium || false,
+      user_is_premium: premium || false,
     });
-    await poool('send', 'page-view', 'free');
+    await audit?.sendEvent('page-view', 'free');
   };
 
   const onLogin = async () => {
-    await poool?.('flush');
     init();
   };
 

app/components/Home.js

@@ -1,30 +1,27 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
+import { useAudit } from '@poool/react-access';
 import { Link } from 'react-router-dom';
-import { usePoool } from '@poool/react-access';
 
+import { useAuth } from '../hooks';
 import Header from './fragments/Header';
 
 export default () => {
-  const { poool, appId, config } = usePoool();
+  const { lib: audit, config } = useAudit();
+  const { premium } = useAuth();
 
   useEffect(() => {
     init();
-
-    return () => poool?.('flush');
-  }, [poool]);
+  }, [audit]);
 
   const init = async () => {
-    poool?.('init', appId);
-    poool?.('config', {
+    audit?.config({
       ...config,
-      user_is_premium: window.testUser?.premium || false,
+      user_is_premium: premium || false,
     });
-
-    await poool?.('send', 'page-view', 'page');
+    await audit?.sendEvent('page-view', 'page');
   };
 
   const onLogin = async () => {
-    await poool?.('flush');
     init();
   };