diff --git a/src/pages/duas/[slug].tsx b/src/pages/duas/[slug].tsx
index 503a2bd..b27d615 100644
--- a/src/pages/duas/[slug].tsx
+++ b/src/pages/duas/[slug].tsx
@@ -14,6 +14,7 @@ import { useUI } from "@/components/context/ui.context";
import { useFontSettingsContext } from "@/components/context/font-setting-context";
import { useAudio } from "@/components/context/audio-conext";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { DefaultSeo } from "next-seo";
// Define the Dua interface
interface Dua {
@@ -51,53 +52,53 @@ const DuaComponent: React.FC = ({
// Use the shared context for font settings
const { fontSettings } = useFontSettingsContext();
-
+
// State hooks
const [duaParts, setDuaParts] = useState([]);
const [recitingPart, setRecitingPart] = useState(null);
const [loading, setLoading] = useState(false);
// Fetch Dua parts and audio
-// Use useCallback to memoize fetchData so it doesn’t change between renders
-const fetchData = useCallback(async (nextPage) => {
- if (!slug || fetching) return; // Prevent fetching if data is already being fetched
-
- const id = slug.split("-").pop();
- if (!id) return;
-
- setFetching(true); // Set fetching to true when data starts fetching
-
- // Reset the duaParts state when the slug changes
- const offset = nextPage ? duaParts.length : 0;
-
- try {
- setLoading(true);
-
- // Fetch the data
- const duaResponse = await http.get(
- `web/mafatih-duas/${id}/parts/?offset=${offset}`
- );
-
- // Append the new results to the existing duaParts
- setDuaParts((prev) => [...prev, ...duaResponse.data.results]);
- } catch (error) {
- console.error("Error fetching Dua parts:", error);
- } finally {
- setLoading(false);
- setFetching(false); // Reset fetching state after fetching is done
- }
-
- getAudio(id);
-}, [slug, fetching, duaParts, getAudio]); // Dependencies for fetchData
-
-
+ // Use useCallback to memoize fetchData so it doesn’t change between renders
+ const fetchData = useCallback(
+ async (nextPage) => {
+ if (!slug || fetching) return; // Prevent fetching if data is already being fetched
+
+ const id = slug.split("-").pop();
+ if (!id) return;
+
+ setFetching(true); // Set fetching to true when data starts fetching
+
+ // Reset the duaParts state when the slug changes
+ const offset = nextPage ? duaParts.length : 0;
+
+ try {
+ setLoading(true);
+
+ // Fetch the data
+ const duaResponse = await http.get(
+ `web/mafatih-duas/${id}/parts/?offset=${offset}`
+ );
+
+ // Append the new results to the existing duaParts
+ setDuaParts((prev) => [...prev, ...duaResponse.data.results]);
+ } catch (error) {
+ console.error("Error fetching Dua parts:", error);
+ } finally {
+ setLoading(false);
+ setFetching(false); // Reset fetching state after fetching is done
+ }
-// Use the memoized fetchData in the effect hook
-useEffect(() => {
- setDuaParts([]); // Reset Dua parts when slug changes
- fetchData(false);
-}, [slug]); // Only slug changes should trigger this effect
+ getAudio(id);
+ },
+ [slug, fetching, duaParts, getAudio]
+ ); // Dependencies for fetchData
+ // Use the memoized fetchData in the effect hook
+ useEffect(() => {
+ setDuaParts([]); // Reset Dua parts when slug changes
+ fetchData(false);
+ }, [slug]); // Only slug changes should trigger this effect
// Play audio from a specific part
const playAudio = useCallback(
@@ -218,123 +219,144 @@ useEffect(() => {
}
}, [recitingPart, duaParts]);
- const handleScroll = useCallback((e: React.UIEvent) => {
- const target = e.currentTarget;
- const isBottom = target.scrollHeight - target.scrollTop === target.clientHeight;
+ const handleScroll = useCallback(
+ (e: React.UIEvent) => {
+ const target = e.currentTarget;
+ const isBottom =
+ target.scrollHeight - target.scrollTop === target.clientHeight;
- if (isBottom && !fetching) { // Only fetch when not already fetching
- fetchData(true);
- }
+ if (isBottom && !fetching) {
+ // Only fetch when not already fetching
+ fetchData(true);
+ }
- setScrollPosition(target.scrollTop); // Update scroll position
- }, [fetching]);
+ setScrollPosition(target.scrollTop); // Update scroll position
+ },
+ [fetching]
+ );
if (!slug) {
return null; // Handling the case where slug is not available
}
+ const title = processSlug(slug); // Title derived from slug
+ const description = "This is a detailed description for the specific Dua page."; // You can customize this further
+ const keywords = "dua, islam, prayer, supplication, dua parts"; // Keywords for SEO
return (
-