setup-prettier-linting-husky (#2183)

* fix missing ayahs in indopak translation mode

* fetch data on the client

* rename and move hook

* fix loading bug

* DRY code

* pass correct data

* fix data shape

* add prettier, eslint, and lintstaged rules

* hello world console log

* set lint staged to default linting without fix

* update husky and add lint fix flag

* update package and add necessary setup

* reset test component

* fix linting errors and warnings

* remove unused props

* remove unused props

* reset the line component

---------

Co-authored-by: Osama Sayed <[email protected]>

.eslintrc.json

@@ -24,16 +24,13 @@
     "no-use-before-define": "off", // since we are using airbnb, it turns this on, we need to disabled it @see https://stackoverflow.com/a/64024916/1931451
     "@typescript-eslint/no-use-before-define": "off",
     "no-shadow": "off", // we need to disable this @see https://stackoverflow.com/a/63961972/1931451
-    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/no-shadow": 2,
     "react/jsx-filename-extension": 0,
     "react/jsx-props-no-spreading": 0,
     "react/function-component-definition": 0,
     "react/jsx-no-useless-fragment": 0,
     "react/no-unstable-nested-components": 0,
-    "react/boolean-prop-naming": [
-      "error",
-      { "rule": "^(is|has|should)[A-Z]([A-Za-z0-9]?)+" }
-    ],
+    "react/boolean-prop-naming": ["error", { "rule": "^(is|has|should)[A-Z]([A-Za-z0-9]?)+" }],
     "react/destructuring-assignment": 2,
     "react/no-children-prop": 2,
     "react/no-deprecated": 2,
@@ -153,7 +150,7 @@
         ],
         "react/forbid-prop-types": 0,
         "react/jsx-no-undef": 0,
-        "react/no-unused-prop-types": 0,
+        "react/no-unused-prop-types": 2,
         "react/prop-types": 0,
         "react/react-in-jsx-scope": 0,
         "curly": "error",

.prettierrc

@@ -0,0 +1,13 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 100,
+  "proseWrap": "always",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

next.config.js

@@ -165,6 +165,7 @@ const config = {
   },
 };
 
+// eslint-disable-next-line max-lines
 module.exports = withPlugins(
   [withBundleAnalyzer, withPWA, withFonts, nextTranslate, withSentryConfig],
   config,

package.json

@@ -25,7 +25,10 @@
     "test:watch": "vitest watch",
     "analyze": "cross-env ANALYZE_BUNDLE=true yarn build",
     "lokalise": "node scripts/lokalise.js",
-    "chapter-data:format": "node scripts/format-chapter-data-json.js"
+    "chapter-data:format": "node scripts/format-chapter-data-json.js",
+    "postinstall": "husky",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable"
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.19.1",
@@ -138,12 +141,13 @@
     "eslint-plugin-sonarjs": "^0.15.0",
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unicorn": "^43.0.2",
-    "husky": "^8.0.1",
+    "husky": "^9.0.11",
     "inquirer": "^8.0.0",
     "inquirer-file-tree-selection-prompt": "^1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "next-sitemap": "^3.1.22",
+    "pinst": "^3.0.0",
     "postcss": "8",
     "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
@@ -169,6 +173,7 @@
   },
   "lint-staged": {
     "*.{tsx,ts}": "yarn lint:fix",
-    "*.scss": "yarn lint:scss"
+    "*.scss": "yarn lint:scss",
+    "*": "prettier --write"
   }
 }

server.js

@@ -20,6 +20,7 @@ app.prepare().then(() => {
     },
   ).listen(3000, (err) => {
     if (err) throw err;
+    // eslint-disable-next-line no-console
     console.log('> Server started on https://localhost:3000');
   });
 });

src/components/Collection/CollectionDetail/CollectionDetail.tsx

@@ -32,7 +32,6 @@ type CollectionDetailProps = {
   bookmarks: Bookmark[];
   sortBy: string;
   onSortByChange: (sortBy: string) => void;
-  onUpdated: () => void;
   onItemDeleted: (bookmarkId: string) => void;
 };
 

src/components/Collection/CollectionDetailContainer/CollectionDetailContainer.tsx

@@ -138,7 +138,6 @@ const CollectionDetailContainer = ({
                 bookmarks={bookmarks}
                 sortBy={sortBy}
                 onSortByChange={onSortByChange}
-                onUpdated={onUpdated}
                 onItemDeleted={onItemDeleted}
                 isOwner={isOwner}
               />

src/components/Collection/SaveToCollectionModal/SaveToCollectionModal.tsx

@@ -26,7 +26,6 @@ type SaveToCollectionModalProps = {
   collections: Collection[];
   onCollectionToggled: (collection: Collection, newValue: boolean) => void;
   onNewCollectionCreated: (name: string) => Promise<void>;
-  isAddingNewCollection?: boolean;
   onClose?: () => void;
   verseKey: string;
 };

src/components/FormBuilder/FormBuider.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 /* eslint-disable max-lines */
 /* eslint-disable react/no-multi-comp */
 /* eslint-disable no-alert */

src/components/Navbar/NavigationDrawer/NavigationDrawerItem.tsx

@@ -14,7 +14,6 @@ type NavigationDrawerItemProps = {
   isExternalLink?: boolean;
   href?: string;
   isStale?: boolean;
-  shouldFlipOnRTL?: boolean;
   onClick?: () => void;
 };
 

src/components/QuranReader/EndOfScrollingControls/ChapterControls.tsx

@@ -12,10 +12,8 @@ import { isFirstSurah, isLastSurah } from '@/utils/chapter';
 import { logButtonClick } from '@/utils/eventLogger';
 import { getNextSurahNavigationUrl, getPreviousSurahNavigationUrl } from '@/utils/navigation';
 import { VersesResponse } from 'types/ApiResponses';
-import Verse from 'types/Verse';
 
 interface Props {
-  lastVerse: Verse;
   initialData: VersesResponse;
 }
 

src/components/QuranReader/EndOfScrollingControls/index.tsx

@@ -46,7 +46,7 @@ const EndOfScrollingControls: React.FC<Props> = ({
       <div className={styles.container}>
         <div className={styles.buttonsContainer}>
           {quranReaderDataType === QuranReaderDataType.Chapter && (
-            <ChapterControls lastVerse={lastVerse} initialData={initialData} />
+            <ChapterControls initialData={initialData} />
           )}
           {(quranReaderDataType === QuranReaderDataType.Verse ||
             quranReaderDataType === QuranReaderDataType.ChapterVerseRanges ||

src/components/QuranReader/ReadingView/Line.tsx

@@ -23,6 +23,7 @@ export type LineProps = {
   words: Word[];
   lineKey: string;
   isBigTextLayout: boolean;
+  // eslint-disable-next-line react/no-unused-prop-types
   quranReaderStyles: QuranReaderStyles;
   pageIndex: number;
   lineIndex: number;

src/components/QuranReader/ReadingView/WordActionsMenu/index.tsx

@@ -32,7 +32,6 @@ const ReadingViewWordActionsMenu: React.FC<Props> = ({ word, onActionTriggered }
       {word?.verse?.timestamps && (
         <PlayVerseAudioButton
           verseKey={word.verseKey}
-          timestamp={word.verse.timestamps.timestampFrom}
           isTranslationView={false}
           onActionTriggered={onActionTriggered}
         />

src/components/QuranReader/ReflectionView/ReflectionBodyContainer/ReflectionBody/index.tsx

@@ -25,7 +25,6 @@ interface Props {
   data: AyahReflectionsResponse;
   scrollToTop: () => void;
   setSelectedVerseNumber: (verseNumber: string) => void;
-  translationFontScale: number;
 }
 
 const ReflectionBody: React.FC<Props> = ({

src/components/QuranReader/ReflectionView/ReflectionBodyContainer/index.tsx

@@ -2,13 +2,11 @@ import { useCallback, useState } from 'react';
 
 import dynamic from 'next/dynamic';
 import useTranslation from 'next-translate/useTranslation';
-import { shallowEqual, useSelector } from 'react-redux';
 
 import DataFetcher from '@/components/DataFetcher';
 import { REFLECTIONS_OBSERVER_ID } from '@/components/QuranReader/observer';
 import TafsirSkeleton from '@/components/QuranReader/TafsirView/TafsirSkeleton';
 import useGlobalIntersectionObserverWithDelay from '@/hooks/useGlobalIntersectionObserverWithDelay';
-import { selectQuranReaderStyles } from '@/redux/slices/QuranReader/styles';
 import { isLoggedIn } from '@/utils/auth/login';
 import { postReflectionViews } from '@/utils/auth/qf/api';
 import {
@@ -40,7 +38,6 @@ const ReflectionBodyContainer = ({
 }: ReflectionBodyProps) => {
   const [selectedChapterId, setSelectedChapterId] = useState(initialChapterId);
   const [selectedVerseNumber, setSelectedVerseNumber] = useState(initialVerseNumber);
-  const { translationFontScale } = useSelector(selectQuranReaderStyles, shallowEqual);
   const { lang } = useTranslation();
 
   /**
@@ -75,10 +72,9 @@ const ReflectionBodyContainer = ({
         selectedVerseNumber={selectedVerseNumber}
         setSelectedVerseNumber={setSelectedVerseNumber}
         scrollToTop={scrollToTop}
-        translationFontScale={translationFontScale}
       />
     ),
-    [scrollToTop, selectedChapterId, selectedVerseNumber, translationFontScale],
+    [scrollToTop, selectedChapterId, selectedVerseNumber],
   );
 
   const body = (

src/components/QuranReader/TranslationView/TranslationViewCell.tsx

@@ -1,4 +1,4 @@
-import React, { RefObject, useEffect, memo, useContext } from 'react';
+import React, { RefObject, memo, useContext, useEffect } from 'react';
 
 import { useSelector as useSelectorXstate } from '@xstate/react';
 import classNames from 'classnames';
@@ -96,10 +96,7 @@ const TranslationViewCell: React.FC<TranslationViewCellProps> = ({
               <VerseNotes verseKey={verse.verseKey} isTranslationView hasNotes={hasNotes} />
             </div>
             <div className={classNames(styles.actionItem, styles.priorityAction)}>
-              <PlayVerseAudioButton
-                verseKey={verse.verseKey}
-                timestamp={verse.timestamps.timestampFrom}
-              />
+              <PlayVerseAudioButton verseKey={verse.verseKey} />
             </div>
             <div className={classNames(styles.actionItem)}>
               <TafsirButton verseKey={verse.verseKey} />

src/components/QuranicCalendar/QuranicCalendarMonth/index.tsx

@@ -26,7 +26,6 @@ const QuranicCalendarMonth: React.FC<Props> = ({ monthWeeks, currentQuranicCalen
             key={ranges}
             isCurrentWeek={currentQuranicCalendarWeek === Number(weekNumber)}
             weekNumber={Number(weekNumber)}
-            currentQuranicCalendarWeek={currentQuranicCalendarWeek}
             localizedMonth={localizedMonth}
             ranges={ranges}
           />

src/components/QuranicCalendar/QuranicCalendarWeek/index.tsx

@@ -23,7 +23,6 @@ import { getQuranReflectPostUrl } from '@/utils/quranReflect/navigation';
 
 type Props = {
   weekNumber: number;
-  currentQuranicCalendarWeek: number;
   isCurrentWeek: boolean;
   localizedMonth: string;
   ranges: string;

src/components/Search/PreInput/SearchItem.tsx

@@ -7,7 +7,6 @@ import IconContainer, { IconColor, IconSize } from '@/dls/IconContainer/IconCont
 type SearchItemProps = {
   prefix: React.ReactNode;
   title: string;
-  url: string;
   suffix?: React.ReactNode;
   onClick?: () => void;
 };

src/components/Search/PreInput/SearchQuerySuggestion/index.tsx

@@ -32,7 +32,6 @@ const SearchQuerySuggestion: React.FC<Props> = ({
       <SearchItem
         title={searchQuery}
         prefix={<SearchIcon />}
-        url="/"
         onClick={() => onSearchKeywordClicked(searchQuery)}
         suffix={
           onRemoveSearchQueryClicked && (

src/components/Search/PreInput/index.tsx

@@ -50,7 +50,6 @@ const PreInput: React.FC<Props> = ({ onSearchKeywordClicked, isSearchDrawer }) =
                 <SearchItem
                   prefix={<TrendUpIcon />}
                   title={chapterData.transliteratedName}
-                  url={url}
                   key={url}
                   onClick={() => {
                     logButtonClick(

src/components/Verse/PlayVerseAudioButton.tsx

@@ -23,7 +23,6 @@ import { AudioPlayerMachineContext } from 'src/xstate/AudioPlayerMachineContext'
 
 interface PlayVerseAudioProps {
   verseKey: string;
-  timestamp: number;
   isTranslationView?: boolean;
   onActionTriggered?: () => void;
 }

src/components/Verse/SaveToCollectionAction.tsx

@@ -216,7 +216,6 @@ const SaveToCollectionAction = ({ verse, bookmarksRangeUrl, isTranslationView })
           onCollectionToggled={onCollectionToggled}
           onNewCollectionCreated={onNewCollectionCreated}
           onClose={closeModal}
-          isAddingNewCollection
           collections={collections}
           verseKey={`${verse.chapterId}:${verse.verseNumber}`}
         />

src/components/Verses/RecentReadingSessions.tsx

@@ -60,7 +60,6 @@ const RecentReadingSessions = () => {
                     Number(verseNumber),
                     lang,
                   )}`}
-                  verseCount={surah.versesCount}
                 />
               </Link>
             </div>

src/components/dls/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-alert */
 import Button from '../Button/Button';
 
 import ConfirmationModal from './ConfirmationModal';

src/components/dls/Skeleton/Skeleton.tsx

@@ -7,7 +7,6 @@ type SkeletonProps = {
   isRounded?: boolean;
   isSquared?: boolean;
   isActive?: boolean;
-  style?: React.CSSProperties;
   className?: string;
 };
 

src/components/dls/SurahPreview/SurahPreview.tsx

@@ -10,7 +10,6 @@ type SurahProps = {
   surahNumber: number;
   surahName: string;
   translatedSurahName: string;
-  verseCount: number;
   chapterId: number;
   display?: SurahPreviewDisplay;
   description?: string;

src/pages/radio.tsx

@@ -12,12 +12,10 @@ import ReciterStationList from '@/components/Radio/ReciterStationList';
 import { getAllChaptersData } from '@/utils/chapter';
 import { getLanguageAlternates } from '@/utils/locale';
 import { getCanonicalUrl } from '@/utils/navigation';
-import ChaptersData from 'types/ChaptersData';
 import Reciter from 'types/Reciter';
 
 type RadioPageProps = {
   reciters: Reciter[];
-  chaptersData: ChaptersData;
 };
 
 const NAVIGATION_URL = '/radio';

src/pages/reciters/[reciterId]/[chapterId].tsx

@@ -24,7 +24,7 @@ import PauseIcon from '@/icons/pause.svg';
 import PlayIcon from '@/icons/play-arrow.svg';
 import ReaderIcon from '@/icons/reader.svg';
 import { makeCDNUrl } from '@/utils/cdn';
-import { getChapterData, getAllChaptersData } from '@/utils/chapter';
+import { getAllChaptersData, getChapterData } from '@/utils/chapter';
 import { logButtonClick } from '@/utils/eventLogger';
 import {
   getCanonicalUrl,
@@ -36,13 +36,11 @@ import { isValidChapterId } from '@/utils/validator';
 import { selectCurrentAudioReciterId } from '@/xstate/actors/audioPlayer/selectors';
 import { AudioPlayerMachineContext } from '@/xstate/AudioPlayerMachineContext';
 import Chapter from 'types/Chapter';
-import ChaptersData from 'types/ChaptersData';
 import Reciter from 'types/Reciter';
 
 type ShareRecitationPageProps = {
   selectedReciter: Reciter;
   selectedChapter: Chapter;
-  chaptersData: ChaptersData;
 };
 
 const RecitationPage = ({ selectedReciter, selectedChapter }: ShareRecitationPageProps) => {

src/xstate/actors/audioPlayer/audioPlayerMachine.ts

@@ -1140,6 +1140,7 @@ export const audioPlayerMachine =
                 handler as MediaSessionActionHandler,
               );
             } catch (error) {
+              // eslint-disable-next-line no-console
               console.log(`The media session action "${action}" is not supported yet.`);
             }
           }