From 61e78ca17aa1890bfec626908b1e15a32dfc9bbb Mon Sep 17 00:00:00 2001 From: Saurabhchaudhary9799 Date: Fri, 25 Oct 2024 22:47:43 +0530 Subject: [PATCH 1/5] fix toggle problem --- frontend/src/components/Navbar.jsx | 18 +++++++++++++++--- frontend/src/components/Tabs.jsx | 4 +--- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 295e23ec..df486b95 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -9,7 +9,7 @@ import { SlideTabsExample } from "./Tabs"; // Ensure correct import const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => { console.log(userInfo); - const [theme, setTheme] = useState("light"); // Manage theme state + // const [theme, setTheme] = useState("light"); // Manage theme state const [searchQuery, setSearchQuery] = useState(""); const navigate = useNavigate(); const location = useLocation(); @@ -20,10 +20,22 @@ const Navbar = ({ userInfo, onSearchNote, handleClearSearch }) => { const loginButtonRef = useRef(null); const signupButtonRef = useRef(null); - // Handle theme toggle + const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light'); + + // Apply the theme to the document body + useEffect(() => { + document.body.className = theme; // set the class on body + localStorage.setItem('theme', theme); // store theme in localStorage + }, [theme]); + + // Toggle theme between 'light' and 'dark' const toggleTheme = () => { - setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); }; + // Handle theme toggle + // const toggleTheme = () => { + // setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light")); + // }; useEffect(() => { // Animate logo diff --git a/frontend/src/components/Tabs.jsx b/frontend/src/components/Tabs.jsx index c30ec160..acf5894b 100644 --- a/frontend/src/components/Tabs.jsx +++ b/frontend/src/components/Tabs.jsx @@ -72,9 +72,7 @@ const Tab = ({ children, setPosition, to, currentPathName, hoveredTab, setHovere }); setHoveredTab(to); }} - className={`relative z-10 block cursor-pointer px-3 py-1.5 text-xs uppercase md:px-5 md:py-3 md:text-base transition-colors duration-200 ${ - isActive ? 'bg-black text-white rounded-lg' : isHovered ? 'bg-gray-700 text-white rounded-lg' : theme === "dark" ? "text-white" : "text-black" - }`} + className={`relative z-10 block cursor-pointer px-3 py-1.5 text-xs uppercase md:px-5 md:py-3 md:text-base transition-colors duration-200 ${isActive ? (theme === "dark" ? 'bg-white text-black rounded-lg' : 'bg-gray-700 text-white rounded-lg') : (theme === "dark" ? 'text-white' : 'text-black')}`} > {children} From 34d2279416fe993d63198cdeea11174f8ca23868 Mon Sep 17 00:00:00 2001 From: Saurabhchaudhary9799 Date: Sat, 26 Oct 2024 00:33:45 +0530 Subject: [PATCH 2/5] full page theme change --- frontend/src/App.jsx | 115 ++++++++++++++++-- frontend/src/components/About/About.jsx | 6 +- .../ArchivedNotes/ArchivedNotes.jsx | 10 +- frontend/src/components/Cards/ProfileInfo.jsx | 4 +- frontend/src/components/Contact/Contact.jsx | 6 +- frontend/src/components/Footer.jsx | 4 +- frontend/src/components/Hero/Hero.jsx | 2 +- frontend/src/components/Navbar.jsx | 23 +--- frontend/src/components/Pricing.jsx | 12 +- frontend/src/components/Testimonial.jsx | 10 +- .../src/components/sticky_footer/Footer.jsx | 4 +- frontend/src/pages/Home/Home.jsx | 15 +-- frontend/src/pages/Login/Login.jsx | 6 +- .../src/pages/ProfilePage/ProfilePage.jsx | 6 +- 14 files changed, 146 insertions(+), 77 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index dcff67ff..2a371e6b 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -25,6 +25,9 @@ import ArchivedNotes from "./components/ArchivedNotes/ArchivedNotes"; import Preloader from "./components/Preloader"; +import Navbar from "./components/Navbar"; +import axiosInstance from "./utils/axiosInstance"; +// import { localeData } from "moment"; // currently this component is hide // import Navbar from './components/Navbar'; @@ -37,6 +40,46 @@ const App = () => { const [user, setUser] = useState(null); const location = useLocation(); + + const [userInfo, setUserInfo] = useState(null); + const [isSearch, setIsSearch] = useState(false); + const [searchQuery, setSearchQuery] = useState(""); + + const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light'); + + // Apply the theme to the document body + useEffect(() => { + document.body.className = theme; // set the class on body + localStorage.setItem('theme', theme); // store theme in localStorage + }, [theme]); + + // Toggle theme between 'light' and 'dark' + const toggleTheme = () => { + setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + + const getUserInfo = async () => { + try { + const response = await axiosInstance.get("/get-user"); + console.log(response); + if (response.data && response.data.user) { + setUserInfo(response.data.user); + } + + } catch (error) { + // if (error.response.status === 401) { + // localStorage.clear(); + // navigate("/login"); + // } + } + }; + + useEffect(() => { + getUserInfo(); + + }, []); + useEffect(() => { const handleRouteChange = () => { setLoading(true); @@ -47,8 +90,32 @@ const App = () => { handleRouteChange(); }, [location]); + const onSearchNote = async (query) => { + setSearchQuery(query); + if (query.trim() === "") { + setIsSearch(false); + getAllNotes(); + return; + } + const filteredNotes = allNotes.filter(note => + note.title.toLowerCase().includes(query.toLowerCase()) + ); + + try { + const response = await axiosInstance.get("/search-notes", { params: { query } }); + if (response.data && response.data.notes) { + setIsSearch(true); + setAllNotes(filteredNotes); + } + } catch (error) { + console.log("Error while searching notes"); + } + }; + + useEffect(() => { const storedUser = localStorage.getItem("user"); + if (storedUser) { try { setUser(JSON.parse(storedUser)); @@ -58,27 +125,49 @@ const App = () => { } }, []); + const debounce = (func, delay) => { + let timeout; + return function(...args) { + clearTimeout(timeout); + timeout = setTimeout(() => func.apply(this, args), delay); + }; + }; +const debouncedSearch = debounce(onSearchNote, 300); + +const handleSearchInputChange = (query) => { + debouncedSearch(query); +}; + +const handleClearSearch = () => { + setIsSearch(false); + getAllNotes(); +}; + return (
+ {loading && } {user && location.pathname === "/" ? ( ) : ( - } /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> {/* } /> */} )} diff --git a/frontend/src/components/About/About.jsx b/frontend/src/components/About/About.jsx index 54fd5656..7622b6c4 100644 --- a/frontend/src/components/About/About.jsx +++ b/frontend/src/components/About/About.jsx @@ -25,7 +25,7 @@ const customStyles = { }, }; -const About = () => { +const About = ({theme}) => { const user = JSON.parse(localStorage.getItem("user")); const [modalIsOpen, setModalIsOpen] = useState(false); const [name, setName] = useState(""); @@ -102,8 +102,8 @@ const About = () => { }; return ( -
- +
+
- ) : ( - - )} + ) }
{isLoading ? (
diff --git a/frontend/src/components/Cards/ProfileInfo.jsx b/frontend/src/components/Cards/ProfileInfo.jsx index 70a1456b..ab559367 100644 --- a/frontend/src/components/Cards/ProfileInfo.jsx +++ b/frontend/src/components/Cards/ProfileInfo.jsx @@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom"; import { CiUser, CiCircleInfo, CiLogout } from "react-icons/ci"; import { MdOutlineArchive } from "react-icons/md"; -const ProfileInfo = ({ userInfo, onLogout }) => { +const ProfileInfo = ({ userInfo, onLogout,theme }) => { const [isDropdownOpen, setIsDropdownOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); const navigate = useNavigate(); @@ -71,7 +71,7 @@ const handleArchivedNotes = () => {
{isDropdownOpen && ( -
+
- ) : ( - )}
@@ -473,7 +466,7 @@ const debouncedSearch = debounce(onSearchNote, 300); isSearch ? (

Oops! No notes found matching

) : ( -

+

Start adding notes by clicking on the "+" button. Lets get started!

diff --git a/frontend/src/pages/Login/Login.jsx b/frontend/src/pages/Login/Login.jsx index c89aff85..2af865c8 100644 --- a/frontend/src/pages/Login/Login.jsx +++ b/frontend/src/pages/Login/Login.jsx @@ -8,7 +8,7 @@ import { FaEye, FaEyeSlash } from "react-icons/fa"; import { GoogleLogin } from "@react-oauth/google"; import CircularLoader from "../../components/CircularLoader"; -const Login = ({ setUser }) => { +const Login = ({ setUser ,theme}) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); @@ -167,11 +167,11 @@ const Login = ({ setUser }) => { return (
-
+
-
+
{ return emailregex.test(email); }; -const ProfilePage = () => { +const ProfilePage = ({theme}) => { let initialUser = null; const storedUser = localStorage.getItem("user"); if (storedUser) { @@ -319,8 +319,8 @@ const ProfilePage = () => { console.log(user); return ( -
- +
+