diff --git a/src/pages/dashboard/Dashboard.jsx b/src/pages/dashboard/Dashboard.jsx index 77be7866..693452a7 100644 --- a/src/pages/dashboard/Dashboard.jsx +++ b/src/pages/dashboard/Dashboard.jsx @@ -1,6 +1,7 @@ import { useQuery } from "@tanstack/react-query"; import Cookies from "js-cookie"; import React, { useCallback, useEffect, useState } from "react"; +import { AiOutlineSave } from "react-icons/ai"; import { FiEdit3 } from "react-icons/fi"; import { MdOutlineEdit } from "react-icons/md"; import "swiper/css"; @@ -12,6 +13,7 @@ import EventsMarqueeCards from "../../components/private/events/marquee/EventsMa import { Button, Navbar, ProfileCompletion } from "../../components/shared"; import { eventEndpoints } from "../../integrations/ApiEndpoints"; import { fetchDashboard } from "../../service/MilanApi"; +import { defaults } from "../../static/Constants"; import fetcher from "../../utils/Fetcher"; import { checkMissingFields } from "../../utils/checkMissingFields"; import convertToBase64 from "../../utils/convertToBase64"; @@ -21,18 +23,20 @@ const Dashboard = () => { const [showProfileModal, setShowProfileModal] = useState(false); const [editProfile, seteditProfile] = useState(false); const [isExpanded, setIsExpanded] = useState(false); - const [coverImage, setCoverImage] = useState( - "https://images.pexels.com/videos/3045163/free-video-3045163.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500", - ); + const [coverImage, setCoverImage] = useState(""); + const [logo, setLogo] = useState(""); + + const { data } = useQuery({ + queryKey: ["dashboardData"], + queryFn: fetchDashboard, + refetchOnMount: false, + retry: 2, + }); const toggleExpand = () => { - // Toggle the state setIsExpanded(!isExpanded); - - // Get the content element const content = document.getElementsByClassName("about_content_text")[0]; - // If expanded, remove the CSS properties; otherwise, restore them if (isExpanded) { content.style.display = ""; content.style.webkitLineClamp = ""; @@ -46,13 +50,6 @@ const Dashboard = () => { } }; - const { data } = useQuery({ - queryKey: ["dashboardData"], - queryFn: fetchDashboard, - refetchOnMount: false, - retry: 2, - }); - const { data: events } = useSWR(eventEndpoints.all, fetcher); useEffect(() => { @@ -61,9 +58,14 @@ const Dashboard = () => { } }, []); - const toggleProfileModal = () => { - setShowProfileModal(!showProfileModal); - seteditProfile(true); + const handleUpdateProfile = () => { + if (logo !== "" || coverImage !== "") { + setShowProfileModal(!showProfileModal); + seteditProfile(true); + } else { + setShowProfileModal(!showProfileModal); + seteditProfile(true); + } }; const handleCreateDashboardImage = useCallback(async (e) => { @@ -73,6 +75,13 @@ const Dashboard = () => { e.target.value = ""; }, []); + const handleCreateLogoImage = useCallback(async (e) => { + if (!e || !e.target || !e.target.files[0]) return; + const base64 = await convertToBase64(e); + setLogo(base64); + e.target.value = ""; + }, []); + return ( <> @@ -88,7 +97,11 @@ const Dashboard = () => {
- + {
- + - - + {" "}
@@ -125,10 +142,19 @@ const Dashboard = () => {
@@ -145,7 +171,7 @@ const Dashboard = () => {