From e50292eb06ee1821570727a1e93df6e573f6bfbb Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Tue, 8 Jul 2025 21:07:23 +0700
Subject: [PATCH] fix: seo checker

---
 app/api/seo-check/route.js       |  1 +
 components/sections/Callback1.js | 37 +++++--------------------------
 components/sections/Callback2.js | 38 +++++---------------------------
 components/seoChecker.js         | 20 +++++++++++++----
 4 files changed, 28 insertions(+), 68 deletions(-)

diff --git a/app/api/seo-check/route.js b/app/api/seo-check/route.js
index 252a369..5b09cb2 100644
--- a/app/api/seo-check/route.js
+++ b/app/api/seo-check/route.js
@@ -54,6 +54,7 @@ export async function POST(request) {
 
     let page;
     let finalUrl;
+    let html;
     let securityHeaders = {};
     let response;
 
diff --git a/components/sections/Callback1.js b/components/sections/Callback1.js
index a77c760..8756617 100644
--- a/components/sections/Callback1.js
+++ b/components/sections/Callback1.js
@@ -1,6 +1,6 @@
 "use client";
-import ReCAPTCHA from "react-google-recaptcha";
-import { useState, useRef } from "react";
+import Link from "next/link";
+import { useState } from "react";
 
 export default function Callback1() {
   const [domain, setDomain] = useState("");
@@ -8,8 +8,6 @@ export default function Callback1() {
   const [captchaValue, setCaptchaValue] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const recaptchaRef = useRef(null);
-
   const handleChange = ({ target: { name, value } }) => {
     if (name === "domain") {
       setDomain(value);
@@ -18,10 +16,6 @@ export default function Callback1() {
     }
   };
 
-  const handleCaptchaChange = (value) => {
-    setCaptchaValue(value);
-  };
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     setIsLoading(true);
@@ -138,30 +132,9 @@ export default function Callback1() {
                       </div>
                     </div>
                     <div className="col-md-6">
-                      <div className="form-grp">
-                        {/* <ReCAPTCHA
-                          ref={recaptchaRef}
-                          sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
-                          onChange={handleCaptchaChange}
-                        /> */}
-                      </div>
-                    </div>
-                    <div className="col-md-6">
-                      {!isLoading && (
-                        <button type="submit" className="btn">
-                          <span>Check Now</span>
-                        </button>
-                      )}
-                      {isLoading && (
-                        <button type="submit" className="btn" disabled>
-                          <div
-                            class="spinner-border spinner-border-sm text-light"
-                            role="status"
-                          >
-                            <span class="sr-only">Loading...</span>
-                          </div>
-                        </button>
-                      )}
+                      <Link href={`/seo-checker?site=${domain}`} type="submit" className="btn">
+                        <span>Check Now</span>
+                      </Link>
                     </div>
                   </div>
                 </form>
diff --git a/components/sections/Callback2.js b/components/sections/Callback2.js
index 881e0cf..298e9c4 100644
--- a/components/sections/Callback2.js
+++ b/components/sections/Callback2.js
@@ -1,6 +1,6 @@
 "use client";
-import ReCAPTCHA from "react-google-recaptcha";
-import { useState, useRef } from "react";
+import { useState } from "react";
+import Link from "next/link";
 
 export default function Callback2() {
   const [domain, setDomain] = useState("");
@@ -8,8 +8,6 @@ export default function Callback2() {
   const [captchaValue, setCaptchaValue] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
-  const recaptchaRef = useRef(null);
-
   const handleChange = ({ target: { name, value } }) => {
     if (name === "domain") {
       setDomain(value);
@@ -18,10 +16,6 @@ export default function Callback2() {
     }
   };
 
-  const handleCaptchaChange = (value) => {
-    setCaptchaValue(value);
-  };
-
   const handleSubmit = async (event) => {
     event.preventDefault();
     setIsLoading(true);
@@ -86,6 +80,7 @@ export default function Callback2() {
       setIsLoading(false);
     }
   };
+
   return (
     <>
       <div className="container">
@@ -136,30 +131,9 @@ export default function Callback2() {
                     </div>
                   </div>
                   <div className="col-12">
-                    <div className="form-grp">
-                      {/* <ReCAPTCHA
-                                                ref={recaptchaRef}
-                                                sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
-                                                onChange={handleCaptchaChange}
-                                            /> */}
-                    </div>
-                  </div>
-                  <div className="col-12">
-                    {!isLoading && (
-                      <button type="submit" className="btn">
-                        <span>Check Now</span>
-                      </button>
-                    )}
-                    {isLoading && (
-                      <button type="submit" className="btn" disabled>
-                        <div
-                          class="spinner-border spinner-border-sm text-light"
-                          role="status"
-                        >
-                          <span class="sr-only">Loading...</span>
-                        </div>
-                      </button>
-                    )}
+                    <Link href={`/seo-checker?site=${domain}`} type="submit" className="btn">
+                      <span>Check Now</span>
+                    </Link>
                   </div>
                 </div>
               </form>
diff --git a/components/seoChecker.js b/components/seoChecker.js
index 539f289..f438fae 100644
--- a/components/seoChecker.js
+++ b/components/seoChecker.js
@@ -1,5 +1,6 @@
 "use client";
-import { useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
 import {
   FiCheckCircle,
   FiAlertTriangle,
@@ -9,11 +10,21 @@ import {
 } from "react-icons/fi";
 
 const SEOChecker = () => {
-  const [url, setUrl] = useState("");
+  const searchParams = useSearchParams();
+  const site = searchParams.get("site");
+
+  const [url, setUrl] = useState(site);
   const [seoData, setSeoData] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [activeTab, setActiveTab] = useState("summary");
+  const submitRef = useRef();
+
+  useEffect(() => {
+    if (site) {
+      submitRef.current.click();
+    }
+  }, [site])
 
   const checkSEO = async () => {
     if (!url) {
@@ -508,8 +519,8 @@ const SEOChecker = () => {
                     : "Missing"}
                 </li>
                 <li>
-                  <strong>Headings:</strong> H1={seoData.headings.h1.count},{" "}
-                  H2={seoData.headings.h2.count}, H3={seoData.headings.h3.count} 
+                  <strong>Headings:</strong> H1={seoData.headings.h1.count}, H2=
+                  {seoData.headings.h2.count}, H3={seoData.headings.h3.count}
                 </li>
               </ul>
 
@@ -575,6 +586,7 @@ const SEOChecker = () => {
             onKeyDown={(e) => e.key === "Enter" && checkSEO()}
           />
           <button
+            ref={submitRef}
             onClick={checkSEO}
             disabled={loading || !url}
             className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 flex items-center justify-center min-w-[150px]"