| 1 |
- {"version":3,"file":"static/chunks/84450.48b1de8a01b24596.js","mappings":"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","sources":["webpack://_N_E/./src/components/DataFetcher/index.tsx","webpack://_N_E/./public/icons/retry.svg","webpack://_N_E/./src/components/Error/index.tsx","webpack://_N_E/./src/components/Navbar/SettingsDrawer/TafsirSelectionBody.tsx","webpack://_N_E/./src/components/dls/Forms/Input/index.tsx","webpack://_N_E/./src/components/Error/Error.module.scss","webpack://_N_E/./src/components/Navbar/SettingsDrawer/SearchSelectionBody.module.scss","webpack://_N_E/./src/components/dls/Forms/Input/Input.module.scss"],"sourcesContent":["import React, { memo } from 'react';\n\nimport useSWRImmutable from 'swr/immutable';\n\nimport Error from '@/components/Error';\nimport Spinner from '@/dls/Spinner/Spinner';\nimport { fetcher } from 'src/api';\nimport { BaseResponse } from 'types/ApiResponses';\n\ninterface Props {\n queryKey: string;\n render: (data: BaseResponse) => JSX.Element;\n renderError?: (error: any) => JSX.Element | undefined;\n initialData?: BaseResponse;\n loading?: () => JSX.Element;\n fetcher?: (queryKey: string) => Promise<BaseResponse>;\n showSpinnerOnRevalidate?: boolean;\n onFetchSuccess?: (data: BaseResponse) => void;\n}\n\n/**\n * Data fetcher is a dynamic component that serves as a container for a component\n * that depends on data from a remote API to render. This component handles:\n * 1. Calling the API.\n * 2. Caching the response (due to using useSwr).\n * 3. Handling errors if any by showing an error message.\n * 4. Handling when the user is offline while trying to fetch the API response.\n * 5. Dynamically passing the response data through render-props to the parent.\n *\n * @param {Props} props\n * @returns {JSX.Element}\n */\nconst DataFetcher: React.FC<Props> = ({\n queryKey,\n render,\n renderError,\n initialData,\n loading = () => <Spinner />,\n fetcher: dataFetcher = fetcher,\n showSpinnerOnRevalidate = true,\n onFetchSuccess,\n}: Props): JSX.Element => {\n const { data, error, isValidating, mutate } = useSWRImmutable(\n queryKey,\n () =>\n dataFetcher(queryKey)\n .then((res) => {\n onFetchSuccess?.(res);\n return Promise.resolve(res);\n })\n .catch((err) => Promise.reject(err)),\n {\n fallbackData: initialData,\n },\n );\n\n // if showSpinnerOnRevalidate is true, we should show the spinner if we are revalidating the data.\n // otherwise, we should only show the spinner on initial loads.\n if (showSpinnerOnRevalidate ? isValidating : isValidating && !data) {\n return loading();\n }\n\n const onRetryClicked = () => {\n mutate();\n };\n\n /**\n * if we haven't fetched the data yet and the device is not online (because we don't want to show an offline message if the data already exists).\n * or if we had an error when calling the API.\n */\n if (error) {\n // if there is a custom error renderer, use it.\n if (renderError) {\n const errorComponent = renderError(error);\n // if the custom error renderer returns false, it means that it doesn't want to render anything special.\n if (typeof errorComponent !== 'undefined') {\n return errorComponent;\n }\n }\n return <Error onRetryClicked={onRetryClicked} error={error} />;\n }\n\n return render(data);\n};\n\nexport default memo(DataFetcher);\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nvar SvgRetry = function SvgRetry(props) {\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 15,\n height: 15,\n viewBox: \"0 0 15 15\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\"\n }, props), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M1.85 7.5c0-2.835 2.21-5.65 5.65-5.65 2.778 0 4.152 2.056 4.737 3.15H10.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-1 0v1.813C12.296 3.071 10.666.85 7.5.85 3.437.85.85 4.185.85 7.5c0 3.315 2.587 6.65 6.65 6.65 1.944 0 3.562-.77 4.714-1.942a6.77 6.77 0 0 0 1.428-2.167.5.5 0 1 0-.925-.38 5.77 5.77 0 0 1-1.216 1.846c-.971.99-2.336 1.643-4.001 1.643-3.44 0-5.65-2.815-5.65-5.65Z\",\n fill: \"currentColor\",\n fillRule: \"evenodd\",\n clipRule: \"evenodd\"\n })));\n};\nexport default SvgRetry;","import React from 'react';\n\nimport useTranslation from 'next-translate/useTranslation';\n\nimport styles from './Error.module.scss';\n\nimport Button, { ButtonSize, ButtonType } from '@/dls/Button/Button';\nimport RetryIcon from '@/icons/retry.svg';\nimport { OFFLINE_ERROR } from 'src/api';\n\ninterface Props {\n onRetryClicked: () => void;\n error: Error;\n}\n\nconst Error: React.FC<Props> = ({ onRetryClicked, error }) => {\n const { t } = useTranslation('common');\n return (\n <div className={styles.container}>\n <p className={styles.text}>\n {error.message !== OFFLINE_ERROR ? t('error.general') : t('error.offline')}\n </p>\n <Button\n prefix={<RetryIcon />}\n size={ButtonSize.Small}\n type={ButtonType.Secondary}\n onClick={onRetryClicked}\n >\n {t('retry')}\n </Button>\n </div>\n );\n};\n\nexport default Error;\n","import { useState } from 'react';\n\nimport Fuse from 'fuse.js';\nimport groupBy from 'lodash/groupBy';\nimport useTranslation from 'next-translate/useTranslation';\nimport { useDispatch, useSelector } from 'react-redux';\n\nimport styles from './SearchSelectionBody.module.scss';\n\nimport DataFetcher from '@/components/DataFetcher';\nimport Input from '@/dls/Forms/Input';\nimport IconSearch from '@/icons/search.svg';\nimport { selectSelectedTafsirs, setSelectedTafsirs } from '@/redux/slices/QuranReader/tafsirs';\nimport SearchQuerySource from '@/types/SearchQuerySource';\nimport { makeTafsirsUrl } from '@/utils/apiPaths';\nimport { areArraysEqual } from '@/utils/array';\nimport { logEmptySearchResults, logValueChange, logItemSelectionChange } from '@/utils/eventLogger';\nimport { TafsirsResponse } from 'types/ApiResponses';\nimport TafsirInfo from 'types/TafsirInfo';\n\nconst filterTafsirs = (tafsirs, searchQuery: string): TafsirInfo[] => {\n const fuse = new Fuse(tafsirs, {\n keys: ['name', 'languageName', 'authorName'],\n threshold: 0.3,\n });\n\n const filteredTafsirs = fuse.search(searchQuery).map(({ item }) => item);\n if (!filteredTafsirs.length) {\n logEmptySearchResults({\n query: searchQuery,\n source: SearchQuerySource.TafsirSettingsDrawer,\n });\n }\n return filteredTafsirs as TafsirInfo[];\n};\n\nconst TafsirsSelectionBody = () => {\n const { t } = useTranslation('common');\n const dispatch = useDispatch();\n const selectedTafsirs = useSelector(selectSelectedTafsirs, areArraysEqual);\n const { lang } = useTranslation();\n const [searchQuery, setSearchQuery] = useState('');\n\n const onTafsirsChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const selectedTafsirId = e.target.value;\n const isChecked = e.target.checked;\n\n // when the checkbox is checked\n // add the selectedTranslationId to redux\n // if unchecked, remove it from redux\n const nextTafsirs = isChecked\n ? [...selectedTafsirs, selectedTafsirId]\n : selectedTafsirs.filter((id) => id !== selectedTafsirId); // remove the id\n\n logItemSelectionChange('tafsir', selectedTafsirId, isChecked);\n logValueChange('selected_tafsirs', selectedTafsirs, nextTafsirs);\n dispatch(setSelectedTafsirs({ tafsirs: nextTafsirs, locale: lang }));\n };\n\n return (\n <div>\n <div className={styles.searchInputContainer}>\n <Input\n prefix={<IconSearch />}\n id=\"tafsirs-search\"\n value={searchQuery}\n onChange={setSearchQuery}\n placeholder={t('settings.search-tafsirs')}\n fixedWidth={false}\n />\n </div>\n <DataFetcher\n queryKey={makeTafsirsUrl(lang)}\n render={(data: TafsirsResponse) => {\n const filteredTafsirs = searchQuery\n ? filterTafsirs(data.tafsirs, searchQuery)\n : data.tafsirs;\n const tafsirsByLanguages = groupBy(filteredTafsirs, 'languageName');\n return (\n <div>\n {Object.entries(tafsirsByLanguages).map(([language, tafsirs]) => {\n return (\n <div className={styles.group} key={language}>\n <div className={styles.language}>{language}</div>\n {tafsirs.map((tafsir) => (\n <div key={tafsir.slug} className={styles.item}>\n <input\n id={tafsir.slug.toString()}\n type=\"checkbox\"\n value={tafsir.slug}\n checked={selectedTafsirs.includes(tafsir.slug)}\n onChange={onTafsirsChange}\n />\n <label className={styles.label} htmlFor={tafsir.slug.toString()}>\n <span>{tafsir.name}</span>{' '}\n <span className={styles.author}>{tafsir.authorName}</span>\n </label>\n </div>\n ))}\n </div>\n );\n })}\n </div>\n );\n }}\n />\n </div>\n );\n};\n\nexport default TafsirsSelectionBody;\n","/* eslint-disable max-lines */\nimport React, {\n ReactNode,\n useState,\n useEffect,\n ChangeEvent,\n RefObject,\n KeyboardEvent,\n HTMLAttributes,\n} from 'react';\n\nimport classNames from 'classnames';\n\nimport Button, { ButtonShape, ButtonSize, ButtonVariant } from '../../Button/Button';\n\nimport styles from './Input.module.scss';\n\nimport ClearIcon from '@/icons/close.svg';\n\nexport enum InputSize {\n Small = 'small',\n Medium = 'medium',\n Large = 'large',\n}\n\nexport enum InputType {\n Error = 'error',\n Warning = 'warning',\n Success = 'success',\n}\n\nexport enum InputVariant {\n Default = 'default',\n Main = 'main',\n}\ninterface Props {\n id: string;\n name?: string;\n size?: InputSize;\n placeholder?: string;\n fixedWidth?: boolean;\n disabled?: boolean;\n clearable?: boolean;\n prefix?: ReactNode;\n suffix?: ReactNode;\n onClearClicked?: () => void;\n onChange?: (value: string) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n inputMode?: HTMLAttributes<HTMLInputElement>['inputMode'];\n value?: string;\n label?: string | JSX.Element;\n type?: InputType;\n shouldFlipOnRTL?: boolean;\n variant?: InputVariant;\n containerClassName?: string;\n htmlType?: React.HTMLInputTypeAttribute;\n isRequired?: boolean;\n inputRef?: RefObject<HTMLInputElement>;\n}\n\nconst Input: React.FC<Props> = ({\n id,\n name,\n label,\n placeholder,\n size = InputSize.Medium,\n fixedWidth = true,\n disabled = false,\n clearable = false,\n type,\n variant,\n prefix,\n suffix,\n onClearClicked,\n onChange,\n onKeyDown,\n inputMode,\n value = '',\n shouldFlipOnRTL = true,\n containerClassName,\n htmlType,\n isRequired,\n inputRef,\n}) => {\n const [inputValue, setInputValue] = useState(value);\n // listen to any change in value in-case the value gets populated after and API call.\n useEffect(() => {\n setInputValue(value);\n }, [value]);\n\n const onValueChange = (event: ChangeEvent<HTMLInputElement>) => {\n const newValue = event.target.value;\n setInputValue(newValue);\n if (onChange) {\n onChange(newValue);\n }\n };\n\n return (\n <>\n {label && <p className={styles.label}>{label}</p>}\n <div\n className={classNames(styles.container, containerClassName, {\n [styles.smallContainer]: size === InputSize.Small,\n [styles.mediumContainer]: size === InputSize.Medium,\n [styles.largeContainer]: size === InputSize.Large,\n [styles.fixedWidth]: fixedWidth,\n [styles.disabled]: disabled,\n [styles.error]: type === InputType.Error,\n [styles.success]: type === InputType.Success,\n [styles.warning]: type === InputType.Warning,\n [styles.main]: variant === InputVariant.Main,\n })}\n >\n {prefix && (\n <div className={classNames(styles.prefix, styles.prefixSuffixContainer)}>{prefix}</div>\n )}\n <input\n className={classNames(styles.input, {\n [styles.error]: type === InputType.Error,\n [styles.success]: type === InputType.Success,\n [styles.warning]: type === InputType.Warning,\n [styles.rtlInput]: shouldFlipOnRTL,\n })}\n type={htmlType}\n required={isRequired}\n dir=\"auto\"\n id={id}\n ref={inputRef}\n disabled={disabled}\n onChange={onValueChange}\n value={inputValue}\n onKeyDown={onKeyDown}\n inputMode={inputMode}\n {...(placeholder && { placeholder })}\n {...(name && { name })}\n />\n {clearable ? (\n <>\n {inputValue && (\n <div className={styles.clearContainer}>\n <Button\n shape={ButtonShape.Circle}\n variant={ButtonVariant.Ghost}\n size={ButtonSize.Small}\n onClick={onClearClicked}\n >\n <ClearIcon />\n </Button>\n </div>\n )}\n </>\n ) : (\n <>\n {suffix && (\n <div className={classNames(styles.suffix, styles.prefixSuffixContainer)}>\n {suffix}\n </div>\n )}\n </>\n )}\n </div>\n </>\n );\n};\n\nexport default Input;\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"Error_container__1m9XV\",\"text\":\"Error_text__yg4kD\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"titleContainer\":\"SearchSelectionBody_titleContainer__HgOZj\",\"language\":\"SearchSelectionBody_language__R3VJi\",\"item\":\"SearchSelectionBody_item__6odbz\",\"group\":\"SearchSelectionBody_group__a1Nqs\",\"searchInputContainer\":\"SearchSelectionBody_searchInputContainer__BENkn\",\"label\":\"SearchSelectionBody_label__7I2gU\",\"author\":\"SearchSelectionBody_author__cejLD\",\"input\":\"SearchSelectionBody_input__sxqRB\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"container\":\"Input_container__5BNOH\",\"fixedWidth\":\"Input_fixedWidth__MZoNx\",\"disabled\":\"Input_disabled__AFA4l\",\"error\":\"Input_error__cfc8q\",\"success\":\"Input_success__qb_Ue\",\"warning\":\"Input_warning__KwRSJ\",\"main\":\"Input_main__K4bVL\",\"input\":\"Input_input__za7E9\",\"rtlInput\":\"Input_rtlInput__8Yg1Q\",\"smallContainer\":\"Input_smallContainer__bxyYT\",\"mediumContainer\":\"Input_mediumContainer__jEOpT\",\"largeContainer\":\"Input_largeContainer__yafZ8\",\"label\":\"Input_label__loZWW\",\"clearContainer\":\"Input_clearContainer__3LxT4\",\"prefixSuffixContainer\":\"Input_prefixSuffixContainer__n84F6\",\"prefix\":\"Input_prefix__jYhnp\",\"suffix\":\"Input_suffix__v_BvR\"};"],"names":["DataFetcher","queryKey","render","renderError","initialData","loading","Spinner","dataFetcher","fetcher","showSpinnerOnRevalidate","onFetchSuccess","useSWRImmutable","then","res","Promise","resolve","catch","err","reject","fallbackData","data","error","isValidating","mutate","errorComponent","Error","onRetryClicked","memo","_path","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","props","width","height","viewBox","fill","xmlns","d","fillRule","clipRule","useTranslation","div","className","styles","p","message","OFFLINE_ERROR","Button","prefix","RetryIcon","size","ButtonSize","type","ButtonType","onClick","dispatch","useDispatch","selectedTafsirs","useSelector","selectSelectedTafsirs","areArraysEqual","lang","useState","searchQuery","setSearchQuery","onTafsirsChange","selectedTafsirId","target","value","isChecked","checked","nextTafsirs","filter","id","logItemSelectionChange","logValueChange","setSelectedTafsirs","tafsirs","locale","Input","IconSearch","onChange","placeholder","fixedWidth","makeTafsirsUrl","filteredTafsirs","Fuse","keys","threshold","search","map","item","logEmptySearchResults","query","source","SearchQuerySource","filterTafsirs","tafsirsByLanguages","groupBy","entries","language","tafsir","input","slug","toString","includes","label","htmlFor","span","name","authorName","InputSize","InputType","InputVariant","Medium","disabled","clearable","variant","suffix","onClearClicked","onKeyDown","inputMode","shouldFlipOnRTL","containerClassName","htmlType","isRequired","inputRef","inputValue","setInputValue","useEffect","classNames","Small","Large","Success","Warning","Main","required","dir","ref","event","newValue","shape","ButtonShape","ButtonVariant","ClearIcon","module","exports"],"sourceRoot":""}
|
