diff --git a/src/App.jsx b/src/App.jsx index cea8daf..228c364 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Layout, Typography, Space } from "antd"; +import { Layout, Space } from "antd"; import { useLocation, useNavigate } from "react-router-dom"; import { AnimatePresence, motion } from "framer-motion"; import ParticlesBackground from "./components/ParticlesBackground"; @@ -17,65 +17,22 @@ import { LinkOutlined } from "@ant-design/icons"; const { Content } = Layout; const { Footer } = Layout; -const { Title } = Typography; const App = () => { - const location = useLocation(); - const navigate = useNavigate(); + const location = useLocation(); // This gives you access to location object + const navigate = useNavigate(); // To navigate programmatically const isMobile = useMediaQuery({ maxWidth: 600 }); + // Get the query parameter from the URL const getQueryParam = (param) => { - const searchParams = new URLSearchParams(location.search); - return searchParams.get(param) || "index"; + const searchParams = new URLSearchParams(location.search); // Use location.search directly + return searchParams.get(param) || "index"; // Default to "index" if param is not found }; + // Initialize state with query parameters const [currentView, setCurrentView] = useState(getQueryParam("to")); - const [referrer, setReferrer] = useState(getQueryParam("r")); - const [isKeyboardOpen, setIsKeyboardOpen] = useState(false); - - const initHandlers = () => { - // Add event listener to detect when input is focused - const handleFocus = () => { - setIsKeyboardOpen(true); - // Allow scrolling when input is focused - document.body.style.overflow = "auto"; - }; - - const handleBlur = () => { - setIsKeyboardOpen(false); - // Smooth scroll to top when input is blurred - window.scrollTo({ - top: 0, - behavior: "smooth", - }); - setTimeout(() => { - document.body.style.overflow = "hidden"; - }, 500); - }; - - // Attach event listeners - document.querySelectorAll("input, textarea").forEach((input) => { - input.addEventListener("focus", handleFocus); - input.addEventListener("blur", handleBlur); - }); - - return () => { - // Clean up event listeners - document.querySelectorAll("input, textarea").forEach((input) => { - input.removeEventListener("focus", handleFocus); - input.removeEventListener("blur", handleBlur); - }); - }; - }; - - useEffect(() => { - const newReferrer = getQueryParam("r"); - if (newReferrer != "*") { - setReferrer(newReferrer); // Only update if 'r' exists - } - setCurrentView(getQueryParam("to")); - }, [location.search]); + const referrer = getQueryParam("r"); useEffect(() => { const queryParams = new URLSearchParams(); @@ -91,18 +48,10 @@ const App = () => { // Navigate with the updated query string navigate(`?${queryParams.toString()}`); - // Initialize event handlers - const cleanup = initHandlers(); - // Initial body setup to prevent scrollbars document.body.style.overflow = "hidden"; document.body.style.margin = "0"; document.body.style.padding = "0"; - - return () => { - cleanup(); - document.body.style.overflow = "auto"; // Reset on unmount - }; }, [currentView, referrer, navigate]); const fadeVariants = { diff --git a/src/components/TurnstileModal.jsx b/src/components/TurnstileModal.jsx index af5ea17..9cbf412 100644 --- a/src/components/TurnstileModal.jsx +++ b/src/components/TurnstileModal.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect } from "react"; +import { useState } from "react"; import { Modal } from "antd"; import Turnstile from "react-turnstile"; @@ -8,7 +8,7 @@ const TurnstileModal = ({ open, onClose, onSuccess }) => { const handleVerify = (token) => { setTurnstileToken(token); onClose(); // Close modal after verification - onSuccess(token); // Notify parent component + onSuccess(turnstileToken); // Notify parent component }; return ( diff --git a/src/utils/CacheReloadView.jsx b/src/utils/CacheReloadView.jsx index e8ec44d..8c1a94e 100644 --- a/src/utils/CacheReloadView.jsx +++ b/src/utils/CacheReloadView.jsx @@ -3,7 +3,7 @@ import { useMediaQuery } from "react-responsive"; import { Card, Flex, message } from "antd"; import { LoadingOutlined } from "@ant-design/icons"; -const CacheReloadView = ({ setCurrentView }) => { +const CacheReloadView = () => { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); diff --git a/src/views/BlogView.jsx b/src/views/BlogView.jsx index 9fdf23d..c025f2f 100644 --- a/src/views/BlogView.jsx +++ b/src/views/BlogView.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { useMediaQuery } from "react-responsive"; import { Tag, Button, Card, Flex, message } from "antd"; -import { ArrowLeftOutlined, LoadingOutlined } from "@ant-design/icons"; +import { LoadingOutlined } from "@ant-design/icons"; const BlogView = ({ setCurrentView, slug }) => { const [blog, setBlog] = useState(null); diff --git a/src/views/BlogsView.jsx b/src/views/BlogsView.jsx index 4f3f112..9ae8e8d 100644 --- a/src/views/BlogsView.jsx +++ b/src/views/BlogsView.jsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from "react"; import { useMediaQuery } from "react-responsive"; import { Tag, Button, Card, Flex, message } from "antd"; -import { LoadingOutlined, ArrowLeftOutlined } from "@ant-design/icons"; +import { LoadingOutlined } from "@ant-design/icons"; const BlogsView = ({ setCurrentView }) => { const [blogs, setBlogs] = useState([]); @@ -201,5 +201,4 @@ const BlogsView = ({ setCurrentView }) => { ); }; - export default BlogsView; diff --git a/src/views/CVView.jsx b/src/views/CVView.jsx index ff7690a..dcc4950 100644 --- a/src/views/CVView.jsx +++ b/src/views/CVView.jsx @@ -1,11 +1,7 @@ -import React, { useState } from "react"; +import React from "react"; import { useMediaQuery } from "react-responsive"; import { Form, Input, Button, Card, Flex } from "antd"; -import { - FilePdfOutlined, - CloudDownloadOutlined, - ArrowLeftOutlined, -} from "@ant-design/icons"; +import { FilePdfOutlined, CloudDownloadOutlined } from "@ant-design/icons"; const CVView = ({ setCurrentView }) => { const onFinish = (values) => { console.log("Form values:", values); diff --git a/src/views/ContactView.jsx b/src/views/ContactView.jsx index 31fc153..0f54339 100644 --- a/src/views/ContactView.jsx +++ b/src/views/ContactView.jsx @@ -2,10 +2,9 @@ import React, { useState } from "react"; import { useMediaQuery } from "react-responsive"; import { Form, Input, Button, Card, Flex, message } from "antd"; import TurnstileModal from "../components/TurnstileModal"; -import { ArrowRightOutlined, ArrowLeftOutlined } from "@ant-design/icons"; +import { ArrowRightOutlined } from "@ant-design/icons"; const ContactView = ({ setCurrentView }) => { const isMobile = useMediaQuery({ maxWidth: 600 }); - const [isEmailFocused, setIsEmailFocused] = useState(false); // Track focus state const [turnstileOpen, setTurnstileOpen] = useState(false); const [email, setEmail] = useState(""); const handleSubmit = async (token) => { @@ -80,8 +79,6 @@ const ContactView = ({ setCurrentView }) => { type="email" placeholder="example@example.com" style={{ flex: 1 }} - onFocus={() => setIsEmailFocused(true)} // Set focused state to true - onBlur={() => setIsEmailFocused(false)} // Set focused state to false />