React, NextJS Component

.babelrc.js

@@ -1,5 +1,17 @@
+const sharedPresets = ['@babel/preset-env', '@babel/preset-react'];
 const shared = {
-  ignore: ['src/**/*.spec.ts'],
+  presets: sharedPresets,
+};
+
+const plugins = {
+  plugins: [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['./src/'],
+      },
+    ],
+  ],
 };
 
 module.exports = {
@@ -15,6 +27,7 @@ module.exports = {
           },
         ],
       ],
+      ...plugins,
     },
     cjs: {
       ...shared,
@@ -26,9 +39,11 @@ module.exports = {
           },
         ],
       ],
+      ...plugins,
     },
     test: {
       presets: ['@babel/env'],
+      ...plugins,
     },
   },
 };

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 #vscode
 .vscode

babel.config.json

@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-react"
+    ]
+}

package.json

@@ -13,26 +13,29 @@
   "dependencies": {
     "@babel/cli": "^7.19.3",
     "@babel/core": "^7.19.6",
-    "@babel/preset-env": "^7.19.4",
+    "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-babel": "^6.0.2",
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-json": "^5.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^4.0.0",
     "axios": "^0.21.0",
+    "babel-plugin-module-resolver": "^4.1.0",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "public-ip": "^6.0.1",
+    "react": "^18.2.0",
+    "react-router-dom": "^5.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-uglify": "^6.0.4"
   },
   "scripts": {
     "clean": "rimraf lib",
-    "build:esm": "cross-env BABEL_ENV=esmUnbundled babel src --extensions '.js' --out-dir 'build/lib/esm' --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions '.js' --out-dir 'build/lib/cjs' --source-maps",
+    "build:esm": "cross-env BABEL_ENV=esmUnbundled babel src --extensions '.js' --extensions '.jsx' --out-dir 'build/lib/esm' --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions '.js' --extensions '.jsx' --out-dir 'build/lib/cjs' --source-maps",
     "build:bundles": "cross-env BABEL_ENV=esmBundled rollup -c",
     "build": "npm-run-all -l clean -p build:esm build:cjs build:bundles",
     "lint": "eslint --fix \"src/**/\"",
@@ -60,7 +63,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.18",
-    "@babel/preset-react": "^7.17",
+    "@babel/preset-react": "^7.18.6",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",

rollup.config.js

@@ -10,18 +10,18 @@ import { uglify } from 'rollup-plugin-uglify';
 
 const configPlugins = [
   nodeResolve({
-    jsnext: true,
+    extensions: ['.js', '.jsx'],
     main: true,
     browser: true,
   }),
-  commonjs(),
   babel({
     babelHelpers: 'bundled',
   }),
+  commonjs(),
   json(),
   replace({
     'process.env': JSON.stringify({
-      REACT_APP_ENDPOINT_ANALYTICS_URL: process.env.REACT_APP_ENDPOINT_ANALYTICS_URL,
+      ENDPOINT_ANALYTICS_URL: process.env.ENDPOINT_ANALYTICS_URL,
     }),
     preventAssignment: true,
   }),
@@ -40,38 +40,21 @@ export default [
   {
     input: 'src/index.js',
     output: [
-      {
-        file: 'build/lib/bundles/bundle.esm.js',
-        format: 'esm',
-        sourcemap: true,
-      },
       {
         file: 'build/lib/bundles/bundle.esm.min.js',
         format: 'esm',
         plugins: [terser()],
         sourcemap: true,
       },
-      {
-        file: 'build/lib/bundles/bundle.umd.js',
-        format: 'umd',
-        name: 'AesirAnalytics',
-        sourcemap: true,
-      },
-      {
-        file: 'build/lib/bundles/bundle.umd.min.js',
-        format: 'umd',
-        name: 'AesirAnalytics',
-        plugins: [terser()],
-        sourcemap: true,
-      },
     ],
     plugins: configPlugins,
   },
   {
     input: 'src/analytics.js',
     output: [
       {
-        file: 'build/analytics.js',
+        // file: 'build/analytics.js',
+        file: '/home/vietredweb/viet/redweb-templates/bi/public/analytics.js',
         format: 'iife',
         name: 'AesirAnalytics',
       },

src/AnalyticsNext/AnalyticsContextProvider.js

@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
+ * @license     GNU General Public License version 3, see LICENSE.
+ */
+
+import React from 'react';
+export const AnalyticsContext = React.createContext();
+
+export class AnalyticsContextProvider extends React.Component {
+  render() {
+    return (
+      <AnalyticsContext.Provider value={{ ...this.props.value }}>
+        {this.props.children}
+      </AnalyticsContext.Provider>
+    );
+  }
+}

src/AnalyticsNext/handle.js

@@ -0,0 +1,47 @@
+import React, { useCallback, useEffect } from 'react';
+import { AnalyticsContext } from './AnalyticsContextProvider';
+import { initTracker, startTracker, endTracker } from '../utils';
+const AnalyticsHandle = ({ router }) => {
+  const AnalyticsStore = React.useContext(AnalyticsContext);
+  const endPoint = process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL;
+
+  const handleStartTracker = useCallback(async () => {
+    const responseStart = await startTracker(
+      endPoint,
+      AnalyticsStore.event_id,
+      AnalyticsStore.uuid
+    );
+    responseStart.result.event_id && AnalyticsStore.setEventIDStart(responseStart.result.event_id);
+    responseStart.result.uuid && AnalyticsStore.setUUIDStart(responseStart.result.uuid);
+  }, [AnalyticsStore, endPoint]);
+
+  useEffect(() => {
+    const init = async () => {
+      if (!AnalyticsStore.event_id && !AnalyticsStore.uuid) {
+        const responseInit = await initTracker(endPoint);
+        responseInit.result.event_id && AnalyticsStore.setEventID(responseInit.result.event_id);
+        AnalyticsStore.setUUID(responseInit.result.uuid);
+      } else {
+        await handleStartTracker();
+      }
+    };
+    init();
+  }, [AnalyticsStore.uuid]);
+
+  useEffect(() => {
+    const handleRouteChange = async () => {
+      if (AnalyticsStore.uuid_start) {
+        await endTracker(endPoint, AnalyticsStore.event_id_start, AnalyticsStore.uuid_start);
+        await handleStartTracker();
+      }
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events, AnalyticsStore.uuid_start]);
+
+  return <></>;
+};
+export default AnalyticsHandle;

src/AnalyticsNext/index.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+
+import { AnalyticsContextProvider } from './AnalyticsContextProvider';
+import AnalyticsHandle from './handle';
+
+const AnalyticsNext = ({ router }) => {
+  const [eventID, setEventID] = useState();
+  const [UUID, setUUID] = useState();
+  const [eventIDStart, setEventIDStart] = useState();
+  const [UUIDStart, setUUIDStart] = useState();
+  return (
+    <>
+      <AnalyticsContextProvider
+        value={{
+          event_id: eventID,
+          uuid: UUID,
+          event_id_start: eventIDStart,
+          uuid_start: UUIDStart,
+          setEventID: setEventID,
+          setUUID: setUUID,
+          setEventIDStart: setEventIDStart,
+          setUUIDStart: setUUIDStart,
+        }}
+      >
+        <AnalyticsHandle router={router}></AnalyticsHandle>
+      </AnalyticsContextProvider>
+    </>
+  );
+};
+export default AnalyticsNext;

src/AnalyticsReact/AnalyticsContextProvider.jsx

@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
+ * @license     GNU General Public License version 3, see LICENSE.
+ */
+
+import React from 'react';
+export const AnalyticsContext = React.createContext();
+
+export class AnalyticsContextProvider extends React.Component {
+  render() {
+    return (
+      <AnalyticsContext.Provider value={{ ...this.props.value }}>
+        {this.props.children}
+      </AnalyticsContext.Provider>
+    );
+  }
+}

src/AnalyticsReact/handle.jsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+import { AnalyticsContext } from './AnalyticsContextProvider';
+import { initTracker, startTracker, endTracker } from '../utils';
+import { useLocation } from 'react-router-dom';
+const AnalyticsHandle = ({ children }) => {
+  const AnalyticsStore = React.useContext(AnalyticsContext);
+  const endPoint = process.env.REACT_APP_ENDPOINT_ANALYTICS_URL;
+  const { pathname } = useLocation();
+  useEffect(() => {
+    const init = async () => {
+      if (AnalyticsStore.uuid_start) {
+        await endTracker(endPoint, AnalyticsStore.event_id_start, AnalyticsStore.uuid_start);
+      }
+      if (!AnalyticsStore.event_id && !AnalyticsStore.uuid) {
+        const responseInit = await initTracker(endPoint);
+        responseInit.result.event_id && AnalyticsStore.setEventID(responseInit.result.event_id);
+        AnalyticsStore.setUUID(responseInit.result.uuid);
+      } else {
+        const responseStart = await startTracker(
+          endPoint,
+          AnalyticsStore.event_id,
+          AnalyticsStore.uuid
+        );
+        responseStart.result.event_id &&
+          AnalyticsStore.setEventIDStart(responseStart.result.event_id);
+        responseStart.result.uuid && AnalyticsStore.setUUIDStart(responseStart.result.uuid);
+      }
+    };
+    init();
+  }, [pathname, AnalyticsStore.uuid]);
+
+  return <>{children}</>;
+};
+export default AnalyticsHandle;

src/AnalyticsReact/index.jsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import { AnalyticsContextProvider } from './AnalyticsContextProvider';
+import AnalyticsHandle from './handle';
+const AnalyticsReact = ({ pathname, children }) => {
+  const [eventID, setEventID] = useState();
+  const [UUID, setUUID] = useState();
+  const [eventIDStart, setEventIDStart] = useState();
+  const [UUIDStart, setUUIDStart] = useState();
+  return (
+    <>
+      <AnalyticsContextProvider
+        value={{
+          event_id: eventID,
+          uuid: UUID,
+          event_id_start: eventIDStart,
+          uuid_start: UUIDStart,
+          setEventID: setEventID,
+          setUUID: setUUID,
+          setEventIDStart: setEventIDStart,
+          setUUIDStart: setUUIDStart,
+        }}
+      >
+        <AnalyticsHandle pathname={pathname}>{children}</AnalyticsHandle>
+      </AnalyticsContextProvider>
+    </>
+  );
+};
+export default AnalyticsReact;

src/analytics.js

@@ -1,2 +1,2 @@
-import { AesirAnalytics } from './index';
+import { AesirAnalytics } from './utils';
 AesirAnalytics();