Initial commit

Author: whizsid

.gitignore

@@ -0,0 +1,9 @@
+service_account_key.json
+oauth_key.json
+node_modules/
+sites/*/node_modules
+sites/*/dist
+sites/*/package-lock.json
+packages/*/node_modules
+packages/*/dist
+packages/*/package-lock.json

package-lock.json

@@ -0,0 +1,13 @@
+{
+    "name": "google-analytics-embed-react",
+    "private": true,
+    "workspaces": {
+        "packages": [
+            "packages/*",
+            "sites/*"
+        ]
+    },
+    "devDependencies": {
+        "mkdirp": "^1.0.4"
+    }
+}

package.json

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/google-analytics-embed-react/.gitignore

@@ -0,0 +1,25 @@
+{
+  "name": "google-analytics-embed-react",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "mkdirp dist && tsc && vite build",
+    "pre-bundle": "cp package.json dist"
+  },
+  "devDependencies": {
+    "@types/google.visualization": "^0.0.68",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^3.0.0",
+    "copy": "^0.3.2",
+    "mkdirp": "^1.0.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vite-plugin-dts": "^1.7.1"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  }
+}

packages/google-analytics-embed-react/package.json

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all'
+};

packages/google-analytics-embed-react/prettier.config.js

@@ -0,0 +1,4 @@
+
+export default class DataChart {
+
+}

packages/google-analytics-embed-react/src/DataChart.tsx

@@ -0,0 +1,71 @@
+import { createContext } from "react";
+
+interface AuthenticateUsingButton {
+  type: "button";
+  clientId: string;
+  userInfoLabel?: string;
+  scopes?: string[];
+  overwriteDefaultScopes?: boolean;
+}
+
+interface AuthenticateUsingServer {
+  type: "server";
+  access_token: string;
+  scopes?: string[];
+  overwriteDefaultScopes?: boolean;
+}
+
+type AuthenticateMethod = AuthenticateUsingButton | AuthenticateUsingServer;
+
+export type AuthenticationState =
+  | "AUTHENTICATING"
+  | "AUTH_ERROR"
+  | "AUTH_SUCCESS"
+  | "NOT_AUTHENTICATED";
+
+export class GoogleContext {
+  protected authButton?: string | HTMLElement = undefined;
+
+  setAuthButton(button: HTMLElement) {
+    this.authButton = button;
+  }
+
+  authenticate(method: AuthenticateMethod): Promise<null> {
+    const authContainer = this.authButton;
+    return new Promise((res, rej) => {
+      window.gapi.analytics.auth.once("error", (res) => {
+        rej(res);
+      });
+      window.gapi.analytics.auth.once("signIn", () => {
+        res(null);
+      });
+      if (method.type === "server") {
+        const rest = window.gapi.analytics.auth.authorize({
+          scopes: method.scopes,
+          overwriteDefaultScopes: method.overwriteDefaultScopes,
+          serverAuth: {
+            access_token: method.access_token,
+          },
+        });
+        console.log(rest);
+        res(null);
+      } else {
+          console.log(method.clientId);
+        window.gapi.analytics.auth.authorize({
+          container: authContainer,
+          clientid: method.clientId,
+          scopes: method.scopes,
+          overwriteDefaultScopes: method.overwriteDefaultScopes,
+          userInfoLabel: method.userInfoLabel,
+        });
+      }
+    });
+  }
+}
+
+export const googleContext = new GoogleContext();
+
+export type GoogleAnalyticsContextContent = [AuthenticationState];
+const GoogleAnalyticsContext =
+  createContext<GoogleAnalyticsContextContent | null>(null);
+export default GoogleAnalyticsContext;

packages/google-analytics-embed-react/src/GoogleAnalyticsContext.ts

@@ -0,0 +1,92 @@
+import * as React from "react";
+import GoogleAnalyticsContext, {
+    AuthenticationState,
+    googleContext
+} from "./GoogleAnalyticsContext";
+
+export interface GoogleAnalyticsProviderProps {
+  children: React.ReactNode;
+  clientId?: string;
+  accessToken?: string;
+  onAuthError?: () => {};
+  onAuthSuccess?: () => {};
+  scopes?: string[];
+  overwriteDefaultScopes?: boolean;
+  userInfoLabel?: string;
+}
+const googleAnalyticsImport = () => {
+  return new Promise((res, _rej) => {
+    if (!document.getElementById("gaScript")) {
+      const g = window.gapi || (window.gapi = {} as any);
+      g.analytics = {
+        q: [],
+        ready(f: any) {
+          this.q.push(f);
+        },
+      } as any;
+      const js = document.createElement("script");
+      const fs = document.getElementsByTagName("script")[0];
+      js.src = "https://apis.google.com/js/platform.js";
+      js.id = "gaScript";
+      fs.parentNode?.insertBefore(js, fs);
+      js.onload = () => {
+        (g as any).load("analytics");
+        window.gapi.analytics.ready(() => {
+          res(null);
+        });
+      };
+    } else {
+      window.gapi.analytics.ready(() => {
+        res(null);
+      });
+    }
+  });
+};
+
+const GoogleAnalyticsProvider: React.FC<GoogleAnalyticsProviderProps> = (
+  props: GoogleAnalyticsProviderProps
+): React.ReactElement => {
+  const [authStatus, setAuthStatus] =
+    React.useState<AuthenticationState>("NOT_AUTHENTICATED");
+  React.useEffect(() => {
+    googleAnalyticsImport().then(() => {
+      let auth = null;
+      if (props.clientId) {
+        auth = googleContext.authenticate({
+          type: "button",
+          clientId: props.clientId,
+          scopes: props.scopes,
+          overwriteDefaultScopes: props.overwriteDefaultScopes,
+          userInfoLabel: props.userInfoLabel,
+        });
+      } else if (props.accessToken) {
+        auth = googleContext.authenticate({
+          type: "server",
+          access_token: props.accessToken,
+          scopes: props.scopes,
+          overwriteDefaultScopes: props.overwriteDefaultScopes,
+        });
+      }
+
+      if (auth) {
+        setAuthStatus("AUTHENTICATING");
+        auth
+          .then(() => {
+            console.log("Google authenticated");
+            setAuthStatus("AUTH_SUCCESS");
+          })
+          .catch((res) => {
+            console.error("Google auth error", res);
+            setAuthStatus("AUTH_ERROR");
+          });
+      }
+    });
+  }, [props.accessToken, props.clientId]);
+  return (
+    <GoogleAnalyticsContext.Provider value={[authStatus]}>
+      <div>{props.children}</div>
+    </GoogleAnalyticsContext.Provider>
+  );
+};
+
+export default GoogleAnalyticsProvider;

packages/google-analytics-embed-react/src/GoogleAnalyticsProvider.tsx

@@ -0,0 +1,22 @@
+import { googleContext } from "./GoogleAnalyticsContext";
+import * as React from "react";
+
+class SignInButton extends React.Component {
+  protected container: React.RefObject<HTMLDivElement>;
+
+  constructor(props: any) {
+    super(props);
+
+    this.container = React.createRef();
+  }
+
+  componentDidMount() {
+    googleContext.setAuthButton(this.container.current as HTMLElement);
+  }
+
+  render(): React.ReactNode {
+    return <div ref={this.container}></div>;
+  }
+}
+
+export default SignInButton;