fix: fixing some code

ionivetech · Jul 31, 2024 · 2fb48cb · 2fb48cb
1 parent 620d63b
commit 2fb48cb
Show file tree

Hide file tree

Showing 22 changed files with 2,022 additions and 1,895 deletions.
diff --git a/app/components/hadith/Card.vue b/app/components/hadith/Card.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interface
-import type { IHadithItems } from 'models/IHadith';
+import type { IHadithItems } from '@models/IHadith';
 
 // Props
 withDefaults(

diff --git a/app/components/hadith/HistoryList.vue b/app/components/hadith/HistoryList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { IHadithHistory } from 'models/IHadith'
+import type { IHadithHistory } from '@models/IHadith';
 
 // Props
 defineProps<{

diff --git a/app/components/header/DetailSurah.vue b/app/components/header/DetailSurah.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interfaces
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 // Store
 const alQuranStore = useAlQuranStore()

diff --git a/app/components/modal/Locations.vue b/app/components/modal/Locations.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { ILocations } from '~/app/models/ILocation'
+import type { ILocations } from '@models/ILocation';
 
 // Show modal
 const showModal = defineModel<boolean>()

diff --git a/app/components/prayer/List.vue b/app/components/prayer/List.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interfaces
-import type { IPrayer } from '~/app/models/IPrayer'
+import type { IPrayer } from '@models/IPrayer';
 
 // Props
 defineProps<{

diff --git a/app/components/quran/FavoriteList.vue b/app/components/quran/FavoriteList.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Interfaces
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 // Props
 defineProps<{

diff --git a/app/components/quran/SurahCard.vue b/app/components/quran/SurahCard.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Models
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 // Props
 const props = defineProps<{

diff --git a/app/components/quran/VerseList.vue b/app/components/quran/VerseList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interfaces
-import type { IVerse } from 'models/ISurah'
+import type { IVerse } from '@models/ISurah';
 
 // Props
 const props = withDefaults(

diff --git a/app/components/schedule/Month.vue b/app/components/schedule/Month.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 // Interfaces
-import type { ISchedule } from '~/app/models/IPrayerTime'
+import type { ISchedule } from '@models/IPrayerTime';
 
 defineProps<{
-  dataSchedule: ISchedule[]
+  dataSchedule: ISchedule[] | undefined
   loading: boolean
 }>()
 

diff --git a/app/components/schedule/Today.vue b/app/components/schedule/Today.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Variables
-import type { IPrayerTime, ISchedule } from '~/app/models/IPrayerTime'
+import type { IPrayerTime, ISchedule } from '@models/IPrayerTime';
 
 // Props
 defineProps<{

diff --git a/app/components/slide/Surah.vue b/app/components/slide/Surah.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Interfaces
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 const nuxtApp = useNuxtApp()
 
@@ -9,7 +9,7 @@ const showSlideOver = defineModel<boolean>()
 
 // Props
 defineProps<{
-  detailSurah: ISurah | null
+  detailSurah: ISurah | undefined
 }>()
 
 // Emits
@@ -24,14 +24,12 @@ const router = useRouter()
 const search = ref<string>('')
 
 // Get list surah
-const { data: surah, pending: pendingFetch } = useAsyncData<ISurah[]>(
-  'surah',
-  () => $fetch(ALQURAN_API),
-  {
-    getCachedData: (key) => nuxtApp.static.data[key] ?? nuxtApp.payload.data[key],
-    transform: (data: any) => data.data,
-  },
-)
+const { data: surah, pending: pendingFetch } = useLazyFetch<ISurah[]>(ALQURAN_API, {
+  key: 'surah',
+  server: false,
+  getCachedData: (key) => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key],
+  transform: (data: any) => data.data,
+})
 
 // List surah
 const surahList = computed((): ISurah[] => {

diff --git a/app/models/dto/dataLocation.dto.ts b/app/models/dto/dataLocation.dto.ts
@@ -0,0 +1,43 @@
+interface LocalityInfo {
+  administrative: Administrative[];
+  informative: Informative[];
+}
+
+interface Administrative {
+  name: string;
+  description: string;
+  isoName: string;
+  order: number;
+  adminLevel: number;
+  isoCode: string;
+  wikidataId: string;
+  geonameId: number;
+}
+
+interface Informative {
+  name: string;
+  description: string;
+  isoName?: string;
+  order: number;
+  isoCode?: string;
+  wikidataId?: string;
+  geonameId?: number;
+}
+
+export interface LocationData {
+  latitude: number;
+  lookupSource: string;
+  longitude: number;
+  localityLanguageRequested: string;
+  continent: string;
+  continentCode: string;
+  countryName: string;
+  countryCode: string;
+  principalSubdivision: string;
+  principalSubdivisionCode: string;
+  city: string;
+  locality: string;
+  postcode: string;
+  plusCode: string;
+  localityInfo: LocalityInfo;
+}
diff --git a/app/pages/al-quran/[id].vue b/app/pages/al-quran/[id].vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // Interfaces
-import type { IBeforeNextSurah, ISurah, IVerse } from 'models/ISurah';
+import type { IBeforeNextSurah, ISurah, IVerse } from '@models/ISurah';
 interface ITafsir {
   ayat: number
   teks: string
@@ -43,7 +43,7 @@ useInfiniteScrolling(
 )
 
 // Get detail surah
-const { data: dataDetail } = useAsyncData<ISurah>(
+const { data: detailSurah, status: statusDetailSurah } = useAsyncData<ISurah>(
   'surahDetail',
   () => $fetch(`${ALQURAN_API}/${route.params.id}`),
   {
@@ -77,13 +77,13 @@ const setDataChunks = (data: IVerse[]) => {
     verseChunk.value.push(chunk)
   }
 
-  verseList.value = verseChunk.value[0]
+  verseList.value = verseChunk.value[0] ?? []
   finishSetDataChunk.value = true
 }
 
 // Open modal tafsir
 const handleOpenModalTafsir = (index: number) => {
-  if (dataTafsir.value) {
+  if (dataTafsir.value && dataTafsir.value[index]) {
     tafsirSelected.value = dataTafsir.value[index]
     showModalTafsir.value = true
   }
@@ -105,13 +105,13 @@ const goToSurah = (surah: IBeforeNextSurah) => router.push(`/al-quran/${surah.no
 
 onMounted(() => {
   setTimeout(() => {
-    if (dataDetail.value) setDataChunks(dataDetail.value.ayat!)
+    if (detailSurah.value) setDataChunks(detailSurah.value.ayat!)
   }, 500)
 })
 
 useSeoMeta({
-  title: () => `Surah ${dataDetail.value?.namaLatin} | Islam App`,
-  description: () => `Detail surah ${dataDetail.value?.namaLatin}`,
+  title: () => `Surah ${detailSurah.value?.namaLatin} | Islam App`,
+  description: () => `Detail surah ${detailSurah.value?.namaLatin}`,
 })
 </script>
 
@@ -120,7 +120,7 @@ useSeoMeta({
     <div class="relative">
       <!-- Header detail surah for show surah name & list surah -->
       <HeaderDetailSurah
-        v-if="route.name === 'al-quran-id' && dataDetail"
+        v-if="route.name === 'al-quran-id' && detailSurah"
         @show-detail="showModalDetail = true"
         @show-list="showListSurah = true"
       />
@@ -141,8 +141,8 @@ useSeoMeta({
             <QuranVerseList
               v-for="(verse, index) in verseList"
               :key="`verse-${verse.nomorAyat}`"
-              :surah-name="dataDetail?.namaLatin"
-              :surah-number="dataDetail?.nomor"
+              :surah-name="detailSurah?.namaLatin"
+              :surah-number="detailSurah?.nomor"
               :verse="verse"
               :index="index"
               @open-tafsir="handleOpenModalTafsir"
@@ -152,14 +152,14 @@ useSeoMeta({
 
           <!-- Button prev & next surah -->
           <div
-            v-if="dataDetail"
+            v-if="detailSurah"
             class="mt-12 flex items-center justify-center space-x-3 md:mt-20"
           >
             <!-- Previous surah -->
             <button
-              v-if="dataDetail.suratSebelumnya"
+              v-if="detailSurah.suratSebelumnya"
               class="btn-prev-next-surah"
-              @click="goToSurah(dataDetail.suratSebelumnya as IBeforeNextSurah)"
+              @click="goToSurah(detailSurah.suratSebelumnya as IBeforeNextSurah)"
             >
               <Icon
                 name="heroicons:chevron-left-solid"
@@ -180,9 +180,9 @@ useSeoMeta({
 
             <!-- Next surah -->
             <button
-              v-if="dataDetail.suratSelanjutnya"
+              v-if="detailSurah.suratSelanjutnya"
               class="btn-prev-next-surah"
-              @click="goToSurah(dataDetail.suratSelanjutnya as IBeforeNextSurah)"
+              @click="goToSurah(detailSurah.suratSelanjutnya as IBeforeNextSurah)"
             >
               <span class="hidden sm:block">Surah berikutnya</span>
               <span class="block sm:hidden">Berikutnya</span>
@@ -198,15 +198,16 @@ useSeoMeta({
 
     <!-- List Surah -->
     <SlideSurah
+      v-if="statusDetailSurah === 'success'"
       v-model="showListSurah"
-      :detail-surah="dataDetail"
+      :detail-surah="detailSurah"
       @close-slide="showListSurah = false"
     />
 
     <!-- Modal Detail -->
     <ModalDetailSurah
       v-model="showModalDetail"
-      :description="dataDetail?.deskripsi"
+      :description="detailSurah?.deskripsi"
       @close-modal="showModalDetail = false"
     />
 

diff --git a/app/pages/al-quran/index.vue b/app/pages/al-quran/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // Interfaces
-import type { ISurah } from 'models/ISurah'
+import type { ISurah } from '@models/ISurah';
 
 const nuxtApp = useNuxtApp()
 
@@ -11,10 +11,10 @@ const masterSurah = ref<ISurah[]>([])
 const surahFavorites = ref<ISurah[]>([])
 
 // Get list surah
-const { data: dataSurah, pending: pendingFetch } = useLazyFetch<ISurah[]>(ALQURAN_API, {
+const { data: dataSurah, status: statusDataSurah } = useLazyFetch<ISurah[]>(ALQURAN_API, {
   key: 'surah',
   server: false,
-  getCachedData: (key) => nuxtApp.static.data[key] ?? nuxtApp.payload.data[key],
+  getCachedData: (key) => nuxtApp.isHydrating ? nuxtApp.payload.data[key] : nuxtApp.static.data[key],
   transform: (data: any) => data.data,
 })
 
@@ -27,30 +27,22 @@ const surahList = computed((): ISurah[] => {
   )
 })
 
-// Set data list surah & favorite
 const setDataSurahAndFavorites = () => {
-  surahFavorites.value = useLocalStorage('surah-favorite', []).value
-  if (dataSurah.value && dataSurah.value.length > 0) {
-    const favorites = surahFavorites.value.map((surah) => surah.namaLatin.toLowerCase())
+  const favoritesFromLocalStorage = useLocalStorage('surah-favorite', []).value
+  const favorites = favoritesFromLocalStorage.map((surah: ISurah) => surah.namaLatin.toLowerCase())
 
-    const dataList = dataSurah.value?.map((surah: ISurah) => {
-      const isFavorite = favorites.includes(surah.namaLatin.toLowerCase())
-      surah.isFavorite = !!isFavorite
-      return surah
-    })
-    if (surahFavorites.value.length > 0) {
-      for (const surah of dataList) {
-        surah.isFavorite = favorites.includes(surah.namaLatin.toLowerCase())
-      }
-    }
+  const dataList = dataSurah.value?.map((surah) => {
+    const isFavorite = favorites.includes(surah.namaLatin.toLowerCase())
+    return { ...surah, isFavorite }
+  })
 
-    masterSurah.value = dataList
-    isLoading.value = false
-  }
+  masterSurah.value = dataList ?? []
+  surahFavorites.value = favoritesFromLocalStorage
+  isLoading.value = false
 }
 
 watchEffect(() => {
-  if (!pendingFetch.value) setDataSurahAndFavorites()
+  if (statusDataSurah.value === 'success') setDataSurahAndFavorites()
 })
 
 // Meta