refactor: project configuration

src/components/GoogleLoginButton.tsx

@@ -0,0 +1,92 @@
+import { FC, Suspense, useEffect, useState } from "react";
+import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
+import toast from "react-hot-toast";
+import { KEY_LOCAL_MAGIC_TOKEN } from "@/app/config";
+import IconGoogle from "@/assets/icons/google.svg";
+import Button from "./styled/Button";
+import { useLoginMutation } from "@/app/services/auth";
+import { useTranslation } from "react-i18next";
+
+
+interface Props {
+  loadError?: boolean;
+  loaded?: boolean;
+  clientId?: string;
+  type?: "login" | "register";
+}
+
+const GoogleLoginInner: FC<Props> = ({ type = "login", loaded, loadError }) => {
+  const { t } = useTranslation("auth");
+  const { t: ct } = useTranslation();
+  const [login, { isSuccess, isLoading, error }] = useLoginMutation();
+  //拿本地存的magic token
+  const magic_token = localStorage.getItem(KEY_LOCAL_MAGIC_TOKEN);
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success(ct("tip.login"));
+      // navigateTo("/");
+    }
+  }, [isSuccess]);
+  useEffect(() => {
+    if (error && "status" in error) {
+      switch (error.status) {
+        case 410:
+          toast.error(
+            "No associated account found, please contact user admin for an invitation link to join."
+          );
+          break;
+        default:
+          toast.error("Something Error");
+          break;
+      }
+    }
+  }, [error]);
+
+  return (
+    <Button className=" group relative w-full !bg-white dark:!bg-gray-700 !text-gray-600 dark:!text-gray-200 overflow-hidden border border-solid border-gray-300 dark:border-gray-500" disabled={!loaded || isLoading}>
+      <div className="absolute left-0 top-0 w-full h-full flex-center gap-3 z-[998] bg-inherit">
+        <IconGoogle className="w-6 h-6" />
+        {loadError
+          ? "Script Load Error!"
+          : loaded
+            ? `${type === "login" ? t("login.google") : t("reg.google")}`
+            : `Initializing`}
+      </div>
+      <div className="absolute left-0 top-0 w-full h-full group-hover:opacity-0 group-hover:z-[999]">
+        <GoogleLogin
+          width="360px"
+          onSuccess={(res) => {
+            login({
+              magic_token,
+              id_token: res.credential || "",
+              type: "google"
+            });
+          }}
+        />
+      </div>
+    </Button>
+  );
+};
+
+const GoogleLoginButton: FC<Props> = ({ type = "login", clientId }) => {
+  const [scriptLoaded, setScriptLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  if (!clientId) return null;
+  return (
+    <Suspense fallback={<span>loading...</span>}>
+      <GoogleOAuthProvider
+        onScriptLoadError={() => {
+          setHasError(true);
+        }}
+        onScriptLoadSuccess={() => {
+          setScriptLoaded(true);
+        }}
+        clientId={clientId}
+      >
+        <GoogleLoginInner type={type} loaded={scriptLoaded} loadError={hasError} />
+      </GoogleOAuthProvider>
+    </Suspense>
+  );
+};
+
+export default GoogleLoginButton;