const { useState, useEffect } = React;
const App = () => {
const [searchQuery, setSearchQuery] = useState('');
const [data, setData] = useState([]);
const [filteredData, setFilteredData] = useState([]);
const [isActive, setIsActive] = useState(false);
const [isLoading, setIsLoading]= useState(true)
// this code is for fetching the fake API
useEffect(() => {
let isMounted = true;
fetch('https://acapulcowomen.com/dev/fake-api.json')
.then(response => response.json())
.then(data => {
setData(data);
setFilteredData(data);
setIsLoading(false);
})
.catch(error => console.error('Error fetching data:', error));
setIsLoading(false);
}, []);
// This code is for filtering the keywords from input
const handleSearchChange = (event) => {
const value = event.target.value;
setSearchQuery(value);
const keywords = value.toLowerCase().split(' ');
const filtered = data.filter(post =>
keywords.every(keyword =>
post.keywords.toLowerCase().includes(keyword)
)
);
setFilteredData(filtered);
};
// This Code is for seting active when the search input is clicked
useEffect(() => {
const handleClickOutside = (event) => {
if (!event.target.closest('#searchInput')) {
setIsActive(false);
}
};
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, []);
const handleClick = () => {
setIsActive(!isActive);
document.getElementsByClassName('searchTerm')[1].focus();
};
const handleClose = () =>{
setSearchQuery('');
}
const searchClicked = document.getElementById('click');
return (
{searchQuery.length > 0 ?(
{isLoading ? (
Loading...
) : (
filteredData.length > 0 ? (
filteredData.map(post => (
))
) : (
"{searchQuery}" Sorry No results Found
)
)}
): (
)}
);
};
//this function is to check if login or not
const CheckCredentials = () => {
const [islogin, setIsLogin] = useState(0);
const [isMessageCount, setIsMessageCount] = useState('');
useEffect(() => {
fetch('https://acapulcowomen.com/members/mailbox')
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const badge = doc.querySelector('.badge-danger');
setIsMessageCount(badge.textContent);
setIsLogin(1);
console.log(badge.textContent);
})
.catch(error => console.error('Error fetching data:', error));
}, []);
return (
{islogin > 0 ? (
) : (
)}
)
};
//this funtion handle popUpMessage
const PopMessage = () =>{
const [messageCount, setMessageCount] = useState(0);
const [newMailElements, setNewMailElements] = useState([]);
const [currentElementIndex, setCurrentElementIndex] = useState(0);
const [sendReplyHref, setSendReplyHref] = useState('');
const [showElement, setShowElement] = useState(false);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://acapulcowomen.com/members/mailbox');
const html = await response.text();
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const newMailElements = Array.from(doc.querySelectorAll('.mail-list-item')).map((element) => {
return {
element: element,
outerHTML: element.outerHTML,
textContent: element.textContent
};
});
setMessageCount(newMailElements.length);
setNewMailElements(newMailElements);
} catch (error) {
console.error('Error fetching data:', error);
}
};
fetchData();
}, []);
useEffect(() => {
const timer = setInterval(() => {
setCurrentElementIndex(() => Math.floor(Math.random() * messageCount));
}, 180000);
return () => {clearInterval(timer);
};
}, [messageCount]);
useEffect(() => {
setShowElement(true);
const timer = setTimeout(() => {
setShowElement(false);
}, 300000);
return () => clearTimeout(timer);
}, [currentElementIndex]);
//this code is to extract the href value
useEffect(() => {
if (newMailElements[currentElementIndex]) {
const confirmOpenElement = newMailElements[currentElementIndex].element.querySelector('.confirm_open');
const confirmOpenElementHref = confirmOpenElement ? confirmOpenElement.getAttribute('href') : '';
setSendReplyHref(confirmOpenElementHref);
}
}, [currentElementIndex, newMailElements]);
const handleCloseMessage = () =>{
setShowElement(false);
}
return (
{newMailElements[currentElementIndex] && (
-
Send Reply
)}
);
};
ReactDOM.render(, document.getElementById('popUpMessage'));
ReactDOM.render(, document.getElementById('accountNav'));
ReactDOM.render(, document.getElementById('desktopSearch'));
ReactDOM.render(, document.getElementById('mobileSearch'));