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..fcbcd3e7 100644 --- a/frontend/src/components/About/About.jsx +++ b/frontend/src/components/About/About.jsx @@ -25,6 +25,8 @@ const customStyles = { }, }; +const apiBaseUrl = import.meta.env.VITE_BACKEND_URL; + const About = () => { const user = JSON.parse(localStorage.getItem("user")); const [modalIsOpen, setModalIsOpen] = useState(false); @@ -102,7 +104,7 @@ const About = () => { }; return ( -
+ <>
@@ -302,7 +304,7 @@ const About = () => {
-
+ ); }; diff --git a/frontend/src/components/ArchivedNotes/ArchivedNotes.jsx b/frontend/src/components/ArchivedNotes/ArchivedNotes.jsx index 36f6e3c4..dffb0d26 100644 --- a/frontend/src/components/ArchivedNotes/ArchivedNotes.jsx +++ b/frontend/src/components/ArchivedNotes/ArchivedNotes.jsx @@ -5,7 +5,7 @@ import NoteCard from '../Cards/NoteCard'; import { MdColorLens, MdOutlineUnarchive } from 'react-icons/md'; import toast from 'react-hot-toast'; -const ArchivedNotes = () => { +const ArchivedNotes = ({theme}) => { const user = JSON.parse(localStorage.getItem("user")); const [isLoading, setIsLoading] = useState(true); const [archivedNotes, setArchivedNotes] = useState([]); @@ -94,8 +94,8 @@ const ArchivedNotes = () => { }; return ( -
- {selectedNotes.length > 0 ? ( +
+ {selectedNotes.length > 0 && (
{selectedNotes.length} notes selected
@@ -125,9 +125,7 @@ const ArchivedNotes = () => {
- ) : ( - - )} + ) }
{isLoading ? (
diff --git a/frontend/src/components/Cards/ProfileInfo.jsx b/frontend/src/components/Cards/ProfileInfo.jsx index 70a1456b..3fa0409d 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 ( -
- +
+