last read marker for quran

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  extends: [
+    'react-app',
+    'plugin:react/recommended',
+    'eslint:recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': [1, { extensions: ['.ts', '.tsx'] }],
+  },
+  overrides: [
+    {
+      files: ['*.ts'],
+      rules: {
+        'no-undef': 'off',
+        'react/display-name': 'off',
+      },
+    },
+  ],
+};

.vscode/extensions.json

@@ -1,3 +1,7 @@
 {
-  "recommendations": ["ionic.ionic"]
+  "recommendations": [
+    "ionic.ionic",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
 }

CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.5.0](https://github.com/Muhammed-Rahif/Islam/compare/v1.4.0...v1.5.0) (2023-04-16)
+
+
+### Bug Fixes
+
+* **ui:** chapter item padding ([7e06c5f](https://github.com/Muhammed-Rahif/Islam/commit/7e06c5fd545dd7c7bfd9ff0c5b2de43284576717))
+* **ui:** some improvements in settings and about screen ([6477657](https://github.com/Muhammed-Rahif/Islam/commit/6477657636d9a8c5d3c3b4b9e557d4a0115ff2d5))
+
+
+### Features
+
+* **about:** add about screen with contributors list ([14916a2](https://github.com/Muhammed-Rahif/Islam/commit/14916a2cb452d3792aa99bdda06ad960321d0459))
+* **about:** add stargazers section ([72873e8](https://github.com/Muhammed-Rahif/Islam/commit/72873e83f00e69af95e5cc0e4fa2d535c8761a7e))
+
 # [1.5.0-beta.2](https://github.com/Muhammed-Rahif/Islam/compare/v1.5.0-beta.1...v1.5.0-beta.2) (2023-04-16)
 
 

android/app/build.gradle

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

git-conventional-commits.yaml

@@ -50,6 +50,8 @@ convention:
       'capacitor',
       'prayer-times',
       'release',
+      'eslint',
+      'prettier'
     ]
   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.5.0-beta.2;
+				MARKETING_VERSION = v1.5.0;
 				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.5.0-beta.2;
+				MARKETING_VERSION = v1.5.0;
 				PRODUCT_BUNDLE_IDENTIFIER = tech.rahif.islam;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Islam",
-  "version": "v1.5.0-beta.2",
+  "version": "v1.5.0",
   "private": true,
   "dependencies": {
     "@capacitor/android": "4.7.3",
@@ -19,21 +19,17 @@
     "@tanstack/react-query-devtools": "^4.29.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.5.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^18.15.11",
-    "@types/react": "^18.0.35",
+    "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.6",
     "@types/react-router": "^5.1.11",
     "@types/react-router-dom": "^5.1.7",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@vitejs/plugin-react": "^3.1.0",
     "axios": "^1.3.5",
     "dayjs": "^1.11.7",
-    "framer-motion": "^10.11.6",
-    "history": "^5.3.0",
+    "framer-motion": "^10.12.4",
     "ionicons": "^7.1.0",
     "jotai": "^2.0.4",
     "marked": "^4.3.0",
@@ -43,13 +39,13 @@
     "react-dom": "^18.2.0",
     "react-router": "^5.3.4",
     "react-router-dom": "^5.3.4",
-    "react-virtuoso": "^4.2.1",
-    "react-window": "^1.8.8",
+    "react-virtuoso": "^4.2.2",
+    "react-window": "^1.8.9",
     "sass": "^1.62.0",
     "smooth-scroll-into-view-if-needed": "^2.0.0",
     "telegraf": "^4.12.2",
     "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "vite": "^4.2.2",
     "vite-plugin-pwa": "^0.14.7",
     "vite-plugin-svgr": "^2.4.0",
     "vite-tsconfig-paths": "^4.2.0",
@@ -76,12 +72,6 @@
     "pretty": "prettier --write .",
     "preview": "vite preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       "Chrome >=60",
@@ -105,22 +95,26 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.58.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
     "autoprefixer": "^10.4.14",
     "capacitor-set-version": "^2.0.13",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard-with-typescript": "^34.0.1",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "github-label-sync": "^2.3.1",
-    "postcss": "^8.4.21",
-    "prettier": "2.8.7",
+    "postcss": "^8.4.22",
+    "prettier": "^2.8.7",
+    "prettier-plugin-tailwindcss": "^0.2.7",
     "semantic-release": "^21.0.1",
-    "tailwindcss": "^3.3.1"
+    "tailwindcss": "^3.3.1",
+    "vite-plugin-eslint": "^1.8.1"
   },
   "description": "Quran, Hadiths, Sunnah and Dhikrs in one place!"
 }

prettier.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+  plugins: [require('prettier-plugin-tailwindcss')],
+};

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Ionic App",
-  "name": "My Ionic App",
+  "short_name": "Islam App",
+  "name": "Islam App",
   "icons": [
     {
       "src": "assets/icon/favicon.png",

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { Redirect, Route } from 'react-router-dom';
 import {
   IonApp,
@@ -13,8 +13,6 @@ import {
 import { IonReactRouter } from '@ionic/react-router';
 import {
   bookOutline,
-  helpOutline,
-  personOutline,
   settingsOutline,
   timeOutline,
   // chatbubble, happy
@@ -96,7 +94,7 @@ const routes: {
 
 const queryClient = new QueryClient();
 
-const App: React.FC = () => {
+const App: FC = () => {
   const settings = useAtomValue(settingsAtom);
 
   useEffect(() => {
@@ -115,7 +113,7 @@ const App: React.FC = () => {
       <IonApp>
         <IonReactRouter>
           <IonTabs>
-            <IonRouterOutlet animated>
+            <IonRouterOutlet>
               <Route exact path="/prayer-times" component={PrayerTimesScreen} />
               <Route exact path="/quran" component={QuranScreen} />
               <Route
@@ -129,10 +127,7 @@ const App: React.FC = () => {
               <Redirect exact path="/" to="/quran" />
             </IonRouterOutlet>
 
-            <IonTabBar
-              slot="bottom"
-              className="py-1.5 border-t-[.5px] border-[var(--border-color)]"
-            >
+            <IonTabBar slot="bottom" className="py-1.5">
               {routes.map(({ icon, name, path }, indx) => (
                 <IonTabButton tab={name} href={path} key={name}>
                   <IonIcon aria-hidden="true" icon={icon} />

src/components/AppTypeahead.tsx

@@ -135,7 +135,7 @@ function AppTypeahead(props: TypeaheadProps) {
             data={filteredItems}
             itemContent={(index, { text, value }) => (
               <IonItem key={value}>
-                <IonLabel className="capitalize !text-sm !whitespace-normal">
+                <IonLabel className="!whitespace-normal !text-sm capitalize">
                   {text}
                 </IonLabel>
                 <IonCheckbox

src/features/view-chapter/components/BismiVerse.tsx → src/components/BismiVerse.tsx

@@ -1,27 +1,23 @@
 import { useAtomValue } from 'jotai/react';
-import { SettingsType, settingsAtom } from 'stores/settings';
-import { numToArabic } from 'utils/string';
+import { settingsAtom } from 'stores/settings';
 
 type Props = {
-  ayahNo?: number;
   className?: string;
 };
 
-function BismiVerse({ ayahNo, className }: Props) {
+function BismiVerse({ className }: Props) {
   const { quran: quranSettings } = useAtomValue(settingsAtom);
 
   return (
     <div
       style={{
         fontSize: quranSettings.fontSize,
-        height: parseInt(quranSettings.fontSize.replace('%', '')) * 0.36,
         fontFamily: quranSettings.fontFamily,
       }}
       lang="ar"
-      className={`block text-center ${className}`}
+      className={`block text-center leading-[225%] ${className}`}
     >
-      بِسْمِ ٱللَّهِ ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ{' '}
-      {ayahNo && `  ﴿${numToArabic(ayahNo)}﴾  `}
+      بِسْمِ ٱللَّهِ ٱلرَّحْمَـٰنِ ٱلرَّحِيمِ
     </div>
   );
 }

src/components/DisplayError.tsx

@@ -1,12 +1,6 @@
-import {
-  IonButton,
-  IonIcon,
-  IonText,
-  IonToast,
-  useIonToast,
-} from '@ionic/react';
+import { IonButton, IonIcon, IonText, useIonToast } from '@ionic/react';
 import { alertCircle, alertCircleOutline } from 'ionicons/icons';
-import { ReactNode, useMemo } from 'react';
+import { useMemo } from 'react';
 
 type Props = {
   error: Error | any;
@@ -52,17 +46,18 @@ function DisplayError({ error, className, toastOnly = false, onRetry }: Props) {
       ],
     });
     return errMsg;
-  }, [error]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error, onRetry]);
 
   return (
     <>
       {!toastOnly && (
         <div
-          className={`w-full h-3/4 flex items-center justify-center flex-col ${className}`}
+          className={`flex h-3/4 w-full flex-col items-center justify-center ${className}`}
         >
           <IonIcon icon={alertCircleOutline} className="scale-[1.75]" />
           <IonText>
-            <p className="my-3 max-w-[66vw] min-w-[4rem] text-center">
+            <p className="my-3 min-w-[4rem] max-w-[66vw] text-center">
               {message}.
             </p>
           </IonText>

src/components/Divider.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+type Props = {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+function Divider({ children, className }: Props) {
+  return (
+    <div className={`relative my-4 w-full opacity-20 ${className}`}>
+      {children && (
+        <span className="absolute left-1/2 top-1/2 z-20 -translate-x-1/2 -translate-y-1/2 bg-[var(--background)] px-2 text-xs">
+          {children}
+        </span>
+      )}
+
+      <hr className="border-t-[.5px] border-[var(--border-color)]" />
+    </div>
+  );
+}
+
+export default Divider;