diff --git a/public/assets/images/Icon ionic-md-musical-notes.svg b/public/assets/images/Icon ionic-md-musical-notes.svg new file mode 100644 index 0000000..a71dfb7 --- /dev/null +++ b/public/assets/images/Icon ionic-md-musical-notes.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx index e26bb7f..bbd2706 100644 --- a/src/components/layout/header.tsx +++ b/src/components/layout/header.tsx @@ -20,7 +20,7 @@ const Header = () => { About us
  • - Last Read + Last Read
    • diff --git a/src/components/sidebar/list.tsx b/src/components/sidebar/list.tsx index 26d6e56..a5c118e 100644 --- a/src/components/sidebar/list.tsx +++ b/src/components/sidebar/list.tsx @@ -5,6 +5,7 @@ import categoryImage from "../../../public/assets/images/Group 27009.svg"; import DayContainer from "../../../public/assets/images/Vector.svg"; import Folder from "../../../public/assets/images/Inner Plugin Iframe.svg"; import NoData from "../../../public/assets/images/Frame 1000005074.svg"; +import Audio from "../../../public/assets/images/Icon ionic-md-musical-notes.svg"; import { useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import colorizeVowels from "../utils/colorize-vowels"; @@ -27,12 +28,14 @@ interface Dua { interface ListProps { tab: string; path: { name: string; type: string; data?: Category[] }[]; - setPath: React.Dispatch>; + setPath: React.Dispatch< + React.SetStateAction<{ name: string; type: string; data?: Category[] }[]> + >; + data: any; // Adjust this type as needed + setData: React.Dispatch>; // Adjust this type as needed } - - -const List: React.FC = ({ tab, path, setPath , data, setData }) => { +const List: React.FC = ({ tab, path, setPath, data, setData }) => { const [loading, setLoading] = useState(false); const router = useRouter(); const [lastReads, setLastReads] = useLocalStorage("last-read", []); @@ -41,6 +44,40 @@ const List: React.FC = ({ tab, path, setPath , data, setData }) => { weekday: "long", }).format(today); + // Mapping of days of the week to their respective Dhikr phrases with vowels and English translations + const dhikrMap: { [key: string]: { dhikr: string; english: string } } = { + Saturday: { + dhikr: "یَا رَبِّ الْعالَمِین", + english: "O Lord of the Worlds", + }, + Sunday: { + dhikr: "یَا ذَا الْجَلاَلِ وَ الْاِکْرَامِ", + english: "O Lord of Glory and Honor", + }, + Monday: { + dhikr: "یَا قَاضِیَ الْحَاجَاتِ", + english: "O the Judge of needs", + }, + Tuesday: { + dhikr: "یَا أَرْحَمَ الرَّاحِمِین", + english: "O Most Merciful of all givers", + }, + Wednesday: { + dhikr: "یَا حَیُّ یَا قَیُّومُ", + english: "O Ever-Living, O Sustainer", + }, + Thursday: { + dhikr: "لَا إِلٰهَ إِلَّا اللَّهُ الْمَلِکُ الْحَقُّ الْمُبِینُ", + english: + "There is no god but Allah, the Sovereign, the True, the Manifest", + }, + Friday: { + dhikr: "اللّهُمّ صَلِّ عَلَى مُحَمَّدٍ وَ آلِ مُحَمَّدٍ", + english: + "O Allah, send blessings upon Muhammad and the family of Muhammad", + }, + }; + const openCategory = (category: Category) => { setData({ type: "children", data: category.children }); setPath((prev) => [ @@ -50,11 +87,8 @@ const List: React.FC = ({ tab, path, setPath , data, setData }) => { }; const openDua = (dua: Dua) => { - setPath((prev) => [ - ...prev, - { name: dua.name, type: "dua" }, - ]); - setLastReads((prev)=>[...prev , dua]) + setPath((prev) => [...prev, { name: dua.name, type: "dua" }]); + setLastReads((prev) => [...prev, dua]); const slug = dua.title.toLowerCase().replaceAll(" ", "-"); router.push(`/duas/${slug}-${dua.id}`); }; @@ -79,20 +113,20 @@ const List: React.FC = ({ tab, path, setPath , data, setData }) => { useEffect(() => { if (data.data.length) { const filteredData = data.data.filter((item: any) => !item.title); // Exclude objects with a "title" - + filteredData.forEach((category: Category) => { - const hasDua = category.children.filter((item: any) => !item.title) - - http.get(`web/mafatih-duas/?category=${category.id}`).then((res) => { - const duas = res.data.results; - if (duas.length) { - category.children = [...(hasDua || []), ...duas]; - setData((prevState) => ({ - ...prevState, - data: filteredData, // Update state with filtered data - })); - } - }); + const hasDua = category.children.filter((item: any) => !item.title); + + http.get(`web/mafatih-duas/?category=${category.id}`).then((res) => { + const duas = res.data.results; + if (duas.length) { + category.children = [...(hasDua || []), ...duas]; + setData((prevState) => ({ + ...prevState, + data: filteredData, // Update state with filtered data + })); + } + }); }); } }, [path]); @@ -100,7 +134,9 @@ const List: React.FC = ({ tab, path, setPath , data, setData }) => { if (loading) { return

    Loading ...

    ; } -console.log(data); + + const currentDhikr = dhikrMap[dayOfWeek]?.dhikr || ""; + const currentEnglish = dhikrMap[dayOfWeek]?.english || ""; return (
    @@ -124,12 +160,10 @@ console.log(data);
    - {colorizeVowels("یا أَرْحَمَ الرَّاحِمِین")} + {colorizeVowels(currentDhikr)}
    -

    - O Most Merciful of all givers -

    +

    {currentEnglish}

    @@ -147,7 +181,12 @@ console.log(data); onClick={() => openCategory(category)} >
    - category + category

    {category.name}

    {category.children.length}

    @@ -180,6 +219,11 @@ console.log(data);

    {dua.title}

    + {dua.not_synced && ( +
    + audio available +
    + )} ); } diff --git a/src/pages/last-reads.tsx b/src/pages/last-reads.tsx new file mode 100644 index 0000000..4f1586d --- /dev/null +++ b/src/pages/last-reads.tsx @@ -0,0 +1,54 @@ +import Image from "next/image"; +import { useEffect, useState } from "react"; +import Audio from "../../public/assets/images/Icon ionic-md-musical-notes.svg"; +import { useRouter } from "next/router"; + +const LastReads = () => { + const [lastDuas , setLastDuas] = useState([]) + const router = useRouter() + + const openDua = (dua: Dua) => { + setPath((prev) => [...prev, { name: dua.name, type: "dua" }]); + setLastReads((prev) => [...prev, dua]); + const slug = dua.title.toLowerCase().replaceAll(" ", "-"); + router.push(`?dua=${slug}-${dua.id}`); + }; + + + + useEffect(()=>{ + const local = JSON.parse(localStorage.getItem("last-read")) + setLastDuas(local) + } , []) + console.log(lastDuas); + + return ( + + ); +}; + +export default LastReads; + +// ${ +// slug && "hidden lg:block"