Merge pull request #181 from eatski/dev

ads修正

src/components/ads/index.tsx

@@ -1,44 +1,64 @@
 import Script from "next/script";
-import { useEffect, useRef, useState } from "react";
+import {
+	PropsWithChildren,
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
+
+const AdsScriptsContext = createContext<boolean>(false);
+
+export const AdsScriptsProvider: React.FC<PropsWithChildren> = ({
+	children,
+}) => {
+	const [state, setState] = useState<boolean>(false);
+	return (
+		<AdsScriptsContext.Provider value={state}>
+			<Script
+				async
+				src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4007955646272580"
+				crossOrigin="anonymous"
+				onLoad={() => {
+					setState(true);
+				}}
+			/>
+			{children}
+		</AdsScriptsContext.Provider>
+	);
+};
 
 export const Ads = () => {
-	const initialized = useRef<boolean>(false);
-	const [loaded, setLoaded] = useState(false);
+	const scriptsLoading = useContext(AdsScriptsContext);
+	const ref = useRef<HTMLModElement>(null);
 	useEffect(() => {
-		if (!loaded) {
+		if (!scriptsLoading) {
 			return;
 		}
-		if (initialized.current) {
+
+		if (ref.current && ref.current.childNodes.length > 0) {
 			return;
 		}
+
 		try {
 			//@ts-expect-error
 			adsbygoogle = window.adsbygoogle || [];
 			//@ts-expect-error
 			adsbygoogle.push({});
-			initialized.current = true;
 		} catch (e) {
 			console.error(e);
 		}
-	}, [loaded]);
+	}, [scriptsLoading]);
 	return (
-		<>
-			<Script
-				async
-				src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4007955646272580"
-				crossOrigin="anonymous"
-				onLoad={() => {
-					setLoaded(true);
-				}}
-			/>
-			<ins
-				className="adsbygoogle"
-				style={{ display: "block" }}
-				data-ad-client="ca-pub-4007955646272580"
-				data-ad-slot="3140493959"
-				data-ad-format="auto"
-				data-full-width-responsive="true"
-			/>
-		</>
+		<ins
+			ref={ref}
+			className="adsbygoogle"
+			style={{ display: "block" }}
+			data-ad-client="ca-pub-4007955646272580"
+			data-ad-slot="3140493959"
+			data-ad-format="auto"
+			data-full-width-responsive="true"
+		/>
 	);
 };

src/pages/_app.tsx

@@ -16,6 +16,7 @@ import { gtagEvent } from "@/common/util/gtag";
 import { keysOverride } from "@/components/headMeta";
 import { ConfirmModal } from "@/components/confirmModal";
 import { Toast } from "@/components/toast";
+import { AdsScriptsProvider } from "@/components/ads";
 
 export default function App({ Component, pageProps }: AppProps) {
 	const queryClient = useMemo(() => new QueryClient(), []);
@@ -82,11 +83,6 @@ export default function App({ Component, pageProps }: AppProps) {
 					name="twitter:image"
 					content="https://iesona.com/card_square.png"
 				/>
-				<script
-					async
-					src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4007955646272580"
-					crossOrigin="anonymous"
-				/>
 			</Head>
 			<Script
 				src="https://www.googletagmanager.com/gtag/js?id=G-1VTTNL7SR2"
@@ -100,18 +96,20 @@ export default function App({ Component, pageProps }: AppProps) {
           gtag('config', 'G-1VTTNL7SR2');
         `}
 			</Script>
-			<SessionProvider session={pageProps.session}>
-				<trpc.Provider client={trpcClient} queryClient={queryClient}>
-					<QueryClientProvider client={queryClient}>
-						<SetupAB />
-						<ConfirmModal>
-							<Toast>
-								<Component {...pageProps} />
-							</Toast>
-						</ConfirmModal>
-					</QueryClientProvider>
-				</trpc.Provider>
-			</SessionProvider>
+			<AdsScriptsProvider>
+				<SessionProvider session={pageProps.session}>
+					<trpc.Provider client={trpcClient} queryClient={queryClient}>
+						<QueryClientProvider client={queryClient}>
+							<SetupAB />
+							<ConfirmModal>
+								<Toast>
+									<Component {...pageProps} />
+								</Toast>
+							</ConfirmModal>
+						</QueryClientProvider>
+					</trpc.Provider>
+				</SessionProvider>
+			</AdsScriptsProvider>
 		</>
 	);
 }