fix: bug at juz page and added metadata

aacmal · Jul 1, 2023 · 7bd585b · 7bd585b · vercel · Jul 1, 2023
1 parent aa82c5c
commit 7bd585b
Show file tree

Hide file tree

Showing 13 changed files with 106 additions and 124 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -8,6 +8,8 @@ import { canonicalUrl } from '@utils/seo';
 import { Toaster } from 'react-hot-toast';
 import ThemeHandler from './ThemeHandler';
 import TafsirModal from '@components/Tafsir/Tafsir';
+import InitChapterData from './quran/InitChapterData';
+import TopBar from '@components/TopBar/TopBar';
 
 const lato = Lato({
   subsets: ['latin'],
@@ -43,6 +45,8 @@ export default function RootLayout({ children }) {
           }}
         />
         <ThemeHandler />
+        <InitChapterData />
+        <TopBar />
         {children}
         <AudioPlayer />
         <TafsirModal />

diff --git a/src/app/quran/InitChapterData.tsx b/src/app/quran/InitChapterData.tsx
@@ -0,0 +1,19 @@
+'use client';
+
+import useSurah from '@stores/surahStore';
+import { getLocalChapter } from '@utils/chapter';
+import React, { useEffect } from 'react';
+
+const InitChapterData = () => {
+  const setChapterData = useSurah((state) => state.setChapterData);
+  useEffect(() => {
+    getLocalChapter().then((res) => {
+      setChapterData(res);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return <></>;
+};
+
+export default InitChapterData;
diff --git a/src/app/quran/juz/[juzId]/page.tsx b/src/app/quran/juz/[juzId]/page.tsx
@@ -3,64 +3,59 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { Metadata } from 'next';
 import { getVerses } from '@utils/verse';
-import { getAllChaptersData, getChapter, getChapterInfo } from '@utils/chapter';
 import Wrapper from '@components/Wrapper';
-import ChapterBanner from '@components/Banner/ChapterBanner';
 import QuranReader from '@components/quranReader/QuranReader';
-import PlayAudioButton from '@components/AudioPlayer/PlayAudioButton';
 import { canonicalUrl, defaultOpenGraph, defaultTwitter } from '@utils/seo';
-import { getJuzData } from '@utils/juz';
+import { getJuzData, getJuzs } from '@utils/juz';
 import { GetVerseBy } from '@utils/types/Verse';
 
 const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 
 export async function generateStaticParams() {
-  const res = await getAllChaptersData();
-  const paths = res.chapters.map((item) => ({
-    chapterId: item.id.toString(),
+  const res = await getJuzs();
+  const paths = res.juzs.map((item) => ({
+    juzId: item.id.toString(),
   }));
 
   return paths;
 }
 
-// export async function generateMetadata({ params }): Promise<Metadata> {
-//   const chapterData = await getChapter(params.chapterId);
+export async function generateMetadata({ params }): Promise<Metadata> {
+  const juzData = await getJuzData(params.juzId);
 
-//   if (!chapterData) {
-//     return;
-//   }
+  if (!juzData) {
+    return;
+  }
 
-//   const description = `Baca Surah ${chapterData.name_simple} (${chapterData.translated_name.name}) dengan jumlah ${chapterData.verses_count} ayat, surah ini diturunkan ke ${chapterData.revelation_order} di ${chapterData.revelation_place}. Halaman ini berisi bacaan surah ${chapterData.name_simple} dengan terjemahan bahasa Indonesia, tafsir, dan audio dengan qori yang berbeda.`;
-//   const imageUrl = `${canonicalUrl}api/og?chapterId=${chapterData.id}`;
-//   return {
-//     title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
-//     description: description,
-//     robots: IS_PRODUCTION ? 'index, follow' : 'noindex, nofollow',
-//     openGraph: {
-//       ...defaultOpenGraph,
-//       title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
-//       description: description,
-//       url: `${canonicalUrl}quran/surah/${chapterData.id}`,
-//       images: imageUrl,
-//     },
-//     twitter: {
-//       ...defaultTwitter,
-//       title: `${chapterData.name_simple} (${chapterData.translated_name.name})`,
-//       description: description,
-//       images: imageUrl,
-//     },
-//   };
-// }
+  const description = `Baca Quran Juz ${juzData.id} yang didalamnya terdapat ${juzData.verse_mapping.length} dengan jumlah ${juzData.verses_count} ayat. Baca dengan terjemahan dan tafsir untuk memahami arti dan maksud ayat yang terkandung didalamnya.`;
+  return {
+    title: `Baca Quran - Juz ${juzData.id} (${juzData.verses_count} ayat)`,
+    description: description,
+    robots: IS_PRODUCTION ? 'index, follow' : 'noindex, nofollow',
+    openGraph: {
+      ...defaultOpenGraph,
+      title: `Baca Quran - Juz ${juzData.id} (${juzData.verses_count} ayat)`,
+      description: description,
+      url: `${canonicalUrl}quran/surah/${juzData.id}`,
+    },
+    twitter: {
+      ...defaultTwitter,
+      title: `Baca Quran - Juz ${juzData.id} (${juzData.verses_count} ayat)`,
+      description: description,
+    },
+  };
+}
 
 export default async function JuzPage({ params }) {
-  const { juzId: id } = params;
-  console.log(id);
   const juzVerses = await getVerses({
-    id,
+    id: params.juzId,
     getBy: GetVerseBy.Juz,
   });
-  const juzData = await getJuzData(id);
-  console.log(juzData);
+  const juzData = await getJuzData(params.juzId);
+
+  if (!juzData) {
+    notFound();
+  }
 
   return (
     <Wrapper className="my-14 px-5 2xl:px-0 pb-20">

diff --git a/src/app/quran/juz/page.tsx b/src/app/quran/juz/page.tsx
@@ -1,8 +1,27 @@
 import JuzsView from '@components/chapters/JuzsView';
 import { getAllChaptersData } from '@utils/chapter';
 import { getJuzs } from '@utils/juz';
+import { canonicalUrl, staticDescription } from '@utils/seo';
+import { Metadata } from 'next';
 import React from 'react';
 
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
+
+export const metadata: Metadata = {
+  title: 'Baca Quran - Juz',
+  description: staticDescription['/quran/juz'],
+  robots: IS_PRODUCTION ? 'index, follow' : 'noindex, nofollow',
+  openGraph: {
+    title: 'Baca Quran - Juz',
+    description: staticDescription['/quran/juz'],
+    url: `${canonicalUrl}quran/juz}`,
+  },
+  twitter: {
+    title: 'Baca Quran - Juz',
+    description: staticDescription['/quran/juz'],
+  },
+};
+
 const JuzList = async () => {
   const juzsData = await getJuzs();
   const chapterData = await getAllChaptersData();

diff --git a/src/app/quran/surah/[chapterId]/[ayahId]/layout.tsx b/src/app/quran/surah/[chapterId]/[ayahId]/layout.tsx
@@ -12,7 +12,6 @@ type Props = {
 };
 
 const SpecificAyahLayout = ({ children, params }: Props) => {
-  console.log(params);
   return (
     <Wrapper className="px-5 lg:mt-24 mt-16 pb-20">
       <div className="flex justify-between">

diff --git a/src/app/quran/surah/[chapterId]/layout.tsx b/src/app/quran/surah/[chapterId]/layout.tsx
@@ -1,10 +1,9 @@
-import TopBar from '@components/TopBar/TopBar';
+import dynamic from 'next/dynamic';
 import React from 'react';
 
 const SurahLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
-      <TopBar />
       {children}
       <noscript>
         <div className="text-center pb-4">

diff --git a/src/components/Bookmark/BookmarkedVerseLists.tsx b/src/components/Bookmark/BookmarkedVerseLists.tsx
@@ -8,25 +8,15 @@ import { shallow } from 'zustand/shallow';
 import BookmarkWrapper from './BookmarkWrapper';
 
 const BookmarkedVerseLists = () => {
-  const { bookmarkData, chapterData, setChapterData, setBookmarked } = useSurah(
+  const { bookmarkData, chapterData, setBookmarked } = useSurah(
     (state) => ({
       bookmarkData: state.bookmarked,
       chapterData: state.chapterData,
-      setChapterData: state.setChapterData,
       setBookmarked: state.setBookmarkData,
     }),
     shallow
   );
 
-  useEffect(() => {
-    if (chapterData.length > 0) return;
-
-    getLocalChapter().then((res) => {
-      setChapterData(res);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   if (chapterData.length === 0) return <></>;
 
   return (

diff --git a/src/components/Tafsir/Tafsir.tsx b/src/components/Tafsir/Tafsir.tsx
@@ -10,6 +10,7 @@ import ArabicText from '../quranReader/ArabicText';
 import useSurah from '../../store/surahStore';
 import { shallow } from 'zustand/shallow';
 import useQuranReader from '@stores/quranReaderStore';
+import { Tafsir } from '@utils/types/Tafsir';
 
 const TafsirModal = () => {
   const chapterData = useSurah((state) => state.chapterData);
@@ -22,7 +23,7 @@ const TafsirModal = () => {
     }),
     shallow
   );
-  const [tafsirData, setTafsirData] = useState(null);
+  const [tafsirData, setTafsirData] = useState<Tafsir>(null);
   const [isLoading, setLoading] = useState(false);
 
   useEffect(() => {
@@ -89,7 +90,7 @@ const TafsirModal = () => {
           {!isLoading && !!tafsirState ? (
             <>
               <div className="bg-emerald-500 w-fit py-2 px-3 font-bold text-white rounded-md">
-                {chapterData[currentChapter - 1].name_simple} :{' '}
+                {chapterData[tafsirData.surah_id - 1].name_simple} :{' '}
                 {tafsirData.ayah}
               </div>
               <div className="w-full flex flex-col dark:text-slate-100">
@@ -109,13 +110,18 @@ const TafsirModal = () => {
                 <h1 className="text-lg font-semibold text-emerald-500">
                   Tafsir Wajiz
                 </h1>
-                <p>{tafsirData.tafsir.wajiz}</p>
+                <p className="text-base md:text-lg">
+                  {tafsirData.tafsir.wajiz}
+                </p>
               </section>
+              <hr className="my-4 opacity-30" />
               <section className="mb-4">
                 <h1 className="text-lg font-semibold text-emerald-500">
                   Tafsir Tahlili
                 </h1>
-                <p>{tafsirData.tafsir.tahlili}</p>
+                <p className="text-base md:text-lg">
+                  {tafsirData.tafsir.tahlili}
+                </p>
               </section>
               <span className="mt-3 block">
                 Source : https://quran.kemenag.go.id

diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
@@ -8,14 +8,17 @@ import DropdownSurahLists from './DropdownSurahLists/DropdownSurahLists';
 import useSurah from '../../store/surahStore';
 import { shallow } from 'zustand/shallow';
 import useQuranReader from '@stores/quranReaderStore';
-import { usePathname } from 'next/navigation';
+import {
+  usePathname,
+  useSelectedLayoutSegment,
+  useSelectedLayoutSegments,
+} from 'next/navigation';
 import DropdownHadithLists from './DropdownHadithLists/DropdownHadithLists';
 
 const TopBar = () => {
-  const { chapterData, setChapterData } = useSurah(
+  const { chapterData } = useSurah(
     (state) => ({
       chapterData: state.chapterData,
-      setChapterData: state.setChapterData,
     }),
     shallow
   );
@@ -28,17 +31,7 @@ const TopBar = () => {
     shallow
   );
 
-  useEffect(() => {
-    if (chapterData.length > 0) return;
-
-    getLocalChapter().then((res) => {
-      setChapterData(res);
-    });
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (chapterData.length === 0) return <></>;
+  if (chapterData.length === 0 || !pathname.includes('/quran')) return <></>;
   return (
     <div
       className={classNames(

diff --git a/src/components/quranReader/FetchInfiniteVerse.tsx b/src/components/quranReader/FetchInfiniteVerse.tsx
@@ -49,13 +49,11 @@ const FetchInfiniteVerse = ({ totalData, id, getVerseBy }: Props) => {
 
     setPaginationData(res.pagination);
     setData((prev) => {
-      // remove duplicate data and sort by verse_number
+      // remove duplicate data and sort by id
       const newData = res.verses.filter(
         (item) => !prev.find((prevItem) => prevItem.id === item.id)
       );
-      return [...prev, ...newData].sort(
-        (a, b) => a.verse_number - b.verse_number
-      );
+      return [...prev, ...newData].sort((a, b) => a.id - b.id);
     });
   };
 

diff --git a/src/components/quranReader/QuranReader.tsx b/src/components/quranReader/QuranReader.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import Bismillah from './Bismillah';
 import { GetVerseBy, Verse } from '@utils/types/Verse';
 import InitialSurahVerse from './InitialSurahVerse';

diff --git a/src/store/surahStore.ts b/src/store/surahStore.ts
@@ -37,51 +37,4 @@ const useSurah = create<SurahStore>()(
   )
 );
 
-// const useSurah = create(
-//   persist(
-//     (set) => ({
-//       bookmarked: [],
-//       setBookmarked: (bookmarked) => set({ bookmarked }),
-//       addBookmark: (verseKey) =>
-//         set((state) => ({ bookmarked: [...state.bookmarked, verseKey] })),
-//       deleteBookmarked: (verseKey) =>
-//         set((state) => ({
-//           bookmarked: state.bookmarked.filter((verse) => verse !== verseKey),
-//         })),
-
-//       chapterData: [],
-//       setChapterData: (chapterData) => set({ chapterData }),
-
-//       currentChapter: 1,
-//       setCurrentChapter: (currentChapter) => set({ currentChapter }),
-
-//       audioId: null,
-//       setAudioId: (audioId) =>
-//         set({ audioId: isNaN(audioId) ? null : parseInt(audioId) }),
-
-//       highlightedVerse: null,
-//       setHighlightedVerse: (highlightedVerse) => set({ highlightedVerse }),
-
-//       highlightedWord: null,
-//       setHighlightedWord: (highlightedWord) => set({ highlightedWord }),
-
-//       tafsirState: null,
-//       setTafsirState: (tafsirState) => set({ tafsirState }),
-
-//       _hasHydrated: false,
-//       setHasHydrated: (_hasHydrated) => set({ _hasHydrated }),
-//     }),
-//     {
-//       name: 'surah',
-//       storage: createJSONStorage(() => localStorage),
-//       partialize: (state) => ({
-//         bookmarked: state.bookmarked,
-//       }),
-//       onRehydrateStorage: () => (state) => {
-//         state.setHasHydrated(true);
-//       },
-//     }
-//   )
-// );
-
 export default useSurah;
diff --git a/src/utils/types/Tafsir.ts b/src/utils/types/Tafsir.ts
@@ -1,11 +1,11 @@
 export type Tafsir = {
   id: number;
   surah_id: number;
-  ayah_id: number;
   juz: number;
   arabic: string;
   latin: string;
   translation: string;
+  ayah: number;
   surah: {
     id: number;
     arabic: string;
@@ -15,4 +15,13 @@ export type Tafsir = {
     num_ayah: number;
     location: string;
   };
+  tafsir: {
+    tahlili: string;
+    wajiz: string;
+    info_surah: string;
+    kosakata: string;
+    munasabah_prev_surah: string;
+    munasabah_prev_theme: string;
+    theme_group: string;
+  };
 };