Merge pull request #87 from Muhammed-Rahif/beta

CHANGELOG.md

@@ -1,3 +1,24 @@
+## [1.3.1-beta.3](https://github.com/Muhammed-Rahif/Islam/compare/v1.3.1-beta.2...v1.3.1-beta.3) (2023-04-07)
+
+
+### Bug Fixes
+
+* **api:** display network error issues ([37dcfa0](https://github.com/Muhammed-Rahif/Islam/commit/37dcfa021caba3f00a2f3f436ebf0d8f608974c7))
+
+## [1.3.1-beta.2](https://github.com/Muhammed-Rahif/Islam/compare/v1.3.1-beta.1...v1.3.1-beta.2) (2023-04-05)
+
+
+### Bug Fixes
+
+* only support portrait mode for android ([dd55814](https://github.com/Muhammed-Rahif/Islam/commit/dd55814bfe36407f48744a11cd2d26f0ef293660))
+
+## [1.3.1-beta.1](https://github.com/Muhammed-Rahif/Islam/compare/v1.3.0...v1.3.1-beta.1) (2023-04-05)
+
+
+### Bug Fixes
+
+* **capacitor:** splash screen should be removed after loading the content ([954b4a4](https://github.com/Muhammed-Rahif/Islam/commit/954b4a4af0874ad6058bfd17c8145a5fa456b289))
+
 # [1.3.0](https://github.com/Muhammed-Rahif/Islam/compare/v1.2.2...v1.3.0) (2023-04-04)
 
 

android/app/build.gradle

@@ -7,7 +7,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "v1.3.0"
+        versionName "v1.3.1-beta.3"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

android/app/capacitor.build.gradle

@@ -12,6 +12,7 @@ dependencies {
     implementation project(':capacitor-app')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
+    implementation project(':capacitor-splash-screen')
     implementation project(':capacitor-status-bar')
 
 }

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,7 @@
 <?xml version='1.0' encoding='utf-8'?>
 <manifest package="tech.rahif.islam" xmlns:android="http://schemas.android.com/apk/res/android">
     <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme" android:usesCleartextTraffic="true">
-        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name="tech.rahif.islam.MainActivity" android:theme="@style/AppTheme.NoActionBarLaunch">
+        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode" android:exported="true" android:label="@string/title_activity_main" android:launchMode="singleTask" android:name="tech.rahif.islam.MainActivity" android:theme="@style/AppTheme.NoActionBarLaunch" android:screenOrientation="portrait">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />

android/capacitor.settings.gradle

@@ -11,5 +11,8 @@ project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-keyboard'
 project(':capacitor-keyboard').projectDir = new File('../node_modules/@capacitor/keyboard/android')
 
+include ':capacitor-splash-screen'
+project(':capacitor-splash-screen').projectDir = new File('../node_modules/@capacitor/splash-screen/android')
+
 include ':capacitor-status-bar'
 project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')

capacitor.config.ts

@@ -7,9 +7,8 @@ const config: CapacitorConfig = {
   bundledWebRuntime: false,
   plugins: {
     SplashScreen: {
-      launchShowDuration: 3000,
+      launchShowDuration: 7000,
       launchAutoHide: true,
-      launchFadeOutDuration: 1000,
     },
   },
 };

git-conventional-commits.yaml

@@ -46,6 +46,7 @@ convention:
       'ionic',
       'readme',
       'contributing',
+      'capacitor',
     ]
   releaseTagGlobPattern: v[0-9]*.[0-9]*.[0-9]*
 changelog:

ios/App/App.xcodeproj/project.pbxproj

@@ -350,7 +350,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = v1.3.0;
+				MARKETING_VERSION = v1.3.1-beta.3;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = tech.rahif.islam;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -370,7 +370,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = v1.3.0;
+				MARKETING_VERSION = v1.3.1-beta.3;
 				PRODUCT_BUNDLE_IDENTIFIER = tech.rahif.islam;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

ios/App/Podfile

@@ -11,6 +11,11 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorHaptics', :path => '../../node_modules/@capacitor/haptics'
+  pod 'CapacitorKeyboard', :path => '../../node_modules/@capacitor/keyboard'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end
 
 target 'App' do

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Islam",
-  "version": "v1.3.0",
+  "version": "v1.3.1-beta.3",
   "private": true,
   "dependencies": {
     "@capacitor/android": "4.7.3",
@@ -9,6 +9,7 @@
     "@capacitor/haptics": "4.1.0",
     "@capacitor/ios": "4.7.3",
     "@capacitor/keyboard": "4.1.1",
+    "@capacitor/splash-screen": "^4.2.0",
     "@capacitor/status-bar": "4.1.1",
     "@ionic/react": "^7.0.0",
     "@ionic/react-router": "^7.0.0",

src/App.tsx

@@ -21,6 +21,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useAtomValue } from 'jotai/react';
 import { settingsAtom } from 'stores/settings';
+import { SplashScreen } from '@capacitor/splash-screen';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -97,6 +98,10 @@ const App: React.FC = () => {
       : document.body.classList.remove('dark');
   }, [settings.general.theme]);
 
+  useEffect(() => {
+    setTimeout(async () => await SplashScreen.hide(), 500);
+  }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       {/* <ReactQueryDevtools initialIsOpen={false} /> */}

src/components/DisplayError.tsx

@@ -0,0 +1,28 @@
+import { IonIcon, IonText, IonToast } from '@ionic/react';
+import { alertCircle, alertCircleOutline } from 'ionicons/icons';
+import React from 'react';
+
+type Props = {
+  error: Error | any;
+};
+
+function DisplayError({ error }: Props) {
+  return (
+    <>
+      <IonToast
+        isOpen={Boolean(error)}
+        message={error ? (error as any).message : error}
+        duration={4500}
+        icon={alertCircle}
+      />
+      <div className="w-full h-full flex items-center justify-center flex-col">
+        <IonIcon icon={alertCircleOutline} className="scale-[1.75]" />
+        <IonText>
+          <p className="my-2">{error ? (error as any).message : error}</p>
+        </IonText>
+      </div>
+    </>
+  );
+}
+
+export default DisplayError;

src/features/list-chapters/api/useAllJuzs.ts

@@ -13,10 +13,8 @@ function useAllJuzs() {
       );
       return data;
     },
-    enabled: true,
     staleTime: Infinity,
     cacheTime: Infinity,
-    retry: true,
     structuralSharing: false,
     notifyOnChangeProps: ['data'],
   });

src/features/list-chapters/api/useChapersList.ts

@@ -13,10 +13,8 @@ function useChapersList() {
 
       return data;
     },
-    enabled: true,
     staleTime: Infinity,
     cacheTime: Infinity,
-    retry: true,
     structuralSharing: false,
     notifyOnChangeProps: ['data', 'error', 'isLoading'],
   });

src/features/list-chapters/components/ChaptersList.tsx

@@ -1,17 +1,12 @@
-import {
-  IonItemGroup,
-  IonSpinner,
-  IonToast,
-  useIonViewDidEnter,
-} from '@ionic/react';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { IonItemGroup, IonSpinner, useIonViewDidEnter } from '@ionic/react';
+import React, { useMemo, useRef, useState } from 'react';
 import { ChapterSortBy } from '../types/Chapter';
 import { useChapersList } from '../api/useChapersList';
-import { alertCircle } from 'ionicons/icons';
 import { useAllJuzs } from '../api/useAllJuzs';
 import { ChapterItem } from './ChapterItem';
 import { SortedByJuz } from './SortedByJuz';
 import { FixedSizeList as List } from 'react-window';
+import DisplayError from 'components/DisplayError';
 
 interface ChapetersListProps {
   sortBy: ChapterSortBy;
@@ -67,14 +62,7 @@ const ChaptersList: React.FC<ChapetersListProps> = ({
   return (
     <div className="my-3 h-[calc(100%-6.6rem)]" ref={contentRef}>
       {/* when error appears */}
-      {error ? (
-        <IonToast
-          isOpen={Boolean(error)}
-          message={error ? (error as any).message : error}
-          duration={4500}
-          icon={alertCircle}
-        />
-      ) : null}
+      {error ? <DisplayError error={error} /> : null}
 
       {/* when api is loading */}
       {isLoading && (

src/features/list-chapters/components/SortedByJuz.tsx

@@ -28,7 +28,7 @@ const SortedByJuz: React.FC<Props> = ({ juzs, chapters }) => {
 
   // juz chapters cout like [2, 1, 3, 1, 4, 2, 2, 5]
   const juzChaptersCount = useMemo(
-    () => juzChaptersGroup?.map((juzChapters) => juzChapters.length),
+    () => juzChaptersGroup?.map((juzChapters) => juzChapters.length) ?? [],
     [juzChaptersGroup]
   );
 
@@ -58,7 +58,6 @@ const SortedByJuz: React.FC<Props> = ({ juzs, chapters }) => {
             versesCount={chapter.verses_count}
             id={chapter.id}
             translatedName={chapter.translated_name.name}
-            index={indx}
             key={chapter.id}
           />
         );

src/features/settings/api/useTranslations.ts

@@ -12,10 +12,8 @@ function useTranslations() {
         await quranApiInstance.get('/resources/translations');
       return data;
     },
-    enabled: true,
     staleTime: Infinity,
     cacheTime: Infinity,
-    retry: true,
     structuralSharing: false,
     notifyOnChangeProps: ['data'],
   });

src/features/view-chapter/api/useChapter.ts

@@ -19,9 +19,8 @@ function useChapter({ chapterId }: Props) {
     enabled: Boolean(chapterId),
     staleTime: Infinity,
     cacheTime: Infinity,
-    retry: true,
     structuralSharing: false,
-    notifyOnChangeProps: ['data', 'isLoading'],
+    notifyOnChangeProps: ['data', 'isLoading', 'error'],
   });
 }
 

src/features/view-chapter/api/useChapterVerses.ts

@@ -35,7 +35,6 @@ function useChapterVerses({
     enabled: Boolean(chapterId),
     cacheTime: Infinity,
     staleTime: Infinity,
-    retry: true,
     structuralSharing: false,
     notifyOnChangeProps: [
       'data',

src/features/view-chapter/api/useVersesUthmani.ts

@@ -31,7 +31,6 @@ function useVersesUthmani({ chapterId, pages }: Props) {
     enabled: Boolean(chapterId),
     cacheTime: Infinity,
     staleTime: Infinity,
-    retry: true,
     structuralSharing: false,
     notifyOnChangeProps: [
       'data',

src/features/view-chapter/components/ReadingContent.tsx

@@ -2,7 +2,6 @@ import {
   IonInfiniteScroll,
   IonInfiniteScrollContent,
   IonSpinner,
-  IonToast,
   useIonToast,
 } from '@ionic/react';
 import { alertCircle } from 'ionicons/icons';
@@ -11,6 +10,7 @@ import { useVersesUthmani } from '../api/useVersesUthmani';
 import { BismiVerse } from './BismiVerse';
 import { useMemo } from 'react';
 import { InlinedVerses } from './InlinedVerses';
+import DisplayError from 'components/DisplayError';
 
 type Props = {
   pages: {
@@ -51,14 +51,7 @@ const ReadingContent: React.FC<Props> = ({ bismiPre, pages }) => {
   return (
     <div className="[direction:rtl] leading-9 text-justify mt-4 h-full">
       {/* when error appears */}
-      {error ? (
-        <IonToast
-          isOpen={Boolean(error)}
-          message={error ? (error as any).message : error}
-          duration={4500}
-          icon={alertCircle}
-        />
-      ) : null}
+      {error ? <DisplayError error={error} /> : null}
 
       {/* when api is loading */}
       {isLoading && (

src/features/view-chapter/components/TranslationContent.tsx

@@ -1,22 +1,17 @@
 import {
   IonInfiniteScroll,
   IonInfiniteScrollContent,
-  IonItem,
   IonSpinner,
-  IonText,
-  IonToast,
   useIonToast,
 } from '@ionic/react';
 import { alertCircle } from 'ionicons/icons';
-import { useAtom, useAtomValue } from 'jotai/react';
+import { useAtomValue } from 'jotai/react';
 import { useParams } from 'react-router-dom';
-import { quranLastReadAtom } from 'stores/quranLastRead';
 import { settingsAtom } from 'stores/settings';
-import { numToArabic, removeHtmlTags } from 'utils/string';
 import { useChapterVerses } from '../api/useChapterVerses';
-import { Fragment } from 'react';
 import { TranslationVerseItem } from './TranslationVerseItem';
 import { BismiVerse } from './BismiVerse';
+import DisplayError from 'components/DisplayError';
 
 type Props = {
   bismiPre?: boolean;
@@ -42,14 +37,7 @@ const TranslationContent: React.FC<Props> = ({ bismiPre }) => {
   return (
     <div className="mt-4 h-full">
       {/* when error appears */}
-      {error ? (
-        <IonToast
-          isOpen={Boolean(error)}
-          message={error ? (error as any).message : error}
-          duration={4500}
-          icon={alertCircle}
-        />
-      ) : null}
+      {error ? <DisplayError error={error} /> : null}
 
       {/* when api is loading */}
       {isLoading && (