Add Arabic for translation

Author: sheepzh

src/app/components/HelpUs/MemberList.tsx

@@ -5,23 +5,22 @@
  * https://opensource.org/licenses/MIT
  */
 
-import { getMembers, MemberInfo } from "@api/crowdin"
+import { getMembers } from "@api/crowdin"
+import { useRequest } from "@app/hooks/useRequest"
 import { t } from "@app/locale"
 import { ElDivider } from "element-plus"
-import { defineComponent, onMounted, ref } from "vue"
+import { defineComponent } from "vue"
 
 const _default = defineComponent(() => {
-    const list = ref<MemberInfo[]>([])
-    onMounted(async () => {
+    const { data: list } = useRequest(async () => {
         const members = await getMembers() || []
-        members.sort((a, b) => (a.joinedAt || "").localeCompare(b.joinedAt || ""))
-        list.value = members
+        return members.sort((a, b) => (a.joinedAt || "").localeCompare(b.joinedAt || ""))
     })
     return () => (
         <div class="member-container">
             <ElDivider>{t(msg => msg.helpUs.contributors)}</ElDivider>
             <div>
-                {list.value.map(({ avatarUrl, username }) => (
+                {list.value?.map(({ avatarUrl, username }) => (
                     <a href={`https://crowdin.com/profile/${username}`} target="_blank">
                         <img src={avatarUrl} alt={username} title={username} />
                     </a>

src/app/components/HelpUs/ProgressList.tsx

@@ -6,10 +6,11 @@
  */
 
 import { getTranslationStatus, TranslationStatusInfo } from "@api/crowdin"
-import { ElLoading, ElProgress, ProgressProps } from "element-plus"
-import { defineComponent, onMounted, Ref, ref } from "vue"
+import { ElProgress, ProgressProps } from "element-plus"
+import { defineComponent } from "vue"
 import localeMessages from "@i18n/message/common/locale"
 import { t } from "@app/locale"
+import { useRequest } from "@app/hooks/useRequest"
 
 type SupportedLocale = timer.Locale | timer.TranslatingLocale
 
@@ -39,6 +40,7 @@ const localeCrowdMap: { [locale in SupportedLocale]: string } = {
     vi: "vi",
     sk: "sk",
     mn: "mn",
+    ar: "ar",
 }
 
 const crowdLocaleMap: { [locale: string]: SupportedLocale } = {}
@@ -50,12 +52,14 @@ type ProgressInfo = {
     progress: number
 }
 
-function convert2Info(translationStatus: TranslationStatusInfo): ProgressInfo {
-    const { languageId, translationProgress } = translationStatus
-    return {
-        locale: crowdLocaleMap[languageId] || languageId,
-        progress: translationProgress
-    }
+const convert2Info = ({ languageId, translationProgress }: TranslationStatusInfo): ProgressInfo => ({
+    locale: crowdLocaleMap[languageId] || languageId,
+    progress: translationProgress
+} satisfies ProgressInfo)
+
+const compareLocale = ({ progress: pa, locale: la }: ProgressInfo, { progress: pb, locale: lb }: ProgressInfo): number => {
+    const progressDiff = (pb ?? 0) - (pa ?? 0)
+    return progressDiff || la?.localeCompare?.(lb) || 0
 }
 
 function computeType(progress: number): ProgressProps["status"] {
@@ -70,27 +74,19 @@ function computeType(progress: number): ProgressProps["status"] {
 
 const CONTAINER_CLZ = 'progress-container'
 
-async function queryData(listRef: Ref<ProgressInfo[]>) {
-    const loading = ElLoading.service({ target: `.${CONTAINER_CLZ}`, text: t(msg => msg.helpUs.loading) })
+async function queryData(): Promise<ProgressInfo[]> {
     const langList = await getTranslationStatus()
-    listRef.value = langList.map(convert2Info)
-        .sort((a, b) => {
-            const progressDiff = b.progress - a.progress
-            if (progressDiff === 0) {
-                return a.locale.localeCompare(b.locale)
-            } else {
-                return progressDiff
-            }
-        })
-    loading.close()
+    return langList?.map?.(convert2Info)?.sort(compareLocale)
 }
 
 const _default = defineComponent(() => {
-    const list: Ref<ProgressInfo[]> = ref([])
-    onMounted(() => queryData(list))
+    const { data: list } = useRequest(
+        queryData,
+        { loadingTarget: `.${CONTAINER_CLZ}`, loadingText: t(msg => msg.helpUs.loading) },
+    )
     return () => (
         <div class={CONTAINER_CLZ}>
-            {list.value.map(({ locale, progress }) => (
+            {list.value?.map?.(({ locale, progress }) => (
                 <ElProgress percentage={progress} strokeWidth={22} status={computeType(progress)}>
                     <span class="progress-text">{`${progress}%`}</span>
                     <span class="language-name">{localeMessages[locale]?.name || locale}</span>

src/app/hooks/useRequest.ts

@@ -1,8 +1,11 @@
+import { ElLoadingService } from "element-plus"
 import { Ref, onMounted, ref } from "vue"
 
 type Option<T> = {
     manual?: boolean
     defaultValue?: T
+    loadingTarget?: string | Ref<HTMLElement>
+    loadingText?: string
 }
 
 type Result<T> = {
@@ -13,17 +16,21 @@ type Result<T> = {
 }
 
 export const useRequest = <T,>(getter: () => Promise<T> | T, option?: Option<T>): Result<T> => {
-    const { manual = false, defaultValue } = option || {}
+    const { manual = false, defaultValue, loadingTarget, loadingText } = option || {}
     const data: Ref<T> = ref(defaultValue) as Ref<T>
     const loading = ref(false)
+    let loadingInstance: { close?: () => void } = null
 
     const refreshAsync = async () => {
         loading.value = true
+        const loadingEl = typeof loadingTarget === "string" ? loadingTarget : loadingTarget?.value
+        loadingEl && (loadingInstance = ElLoadingService({ target: loadingEl, text: loadingText }))
         try {
             const value = await getter?.()
             data.value = value
         } finally {
             loading.value = false
+            loadingInstance?.close?.()
         }
     }
     const refresh = () => { refreshAsync() }

src/app/locale.ts

@@ -8,7 +8,7 @@
 import { I18nResultItem, I18nKey as _I18nKey, t as _t } from "@i18n"
 import { tN as _tN } from "@i18n"
 import messages, { AppMessage } from "@i18n/message/app"
-import { VNode } from "vue"
+import type { VNode } from "vue"
 
 export type I18nKey = _I18nKey<AppMessage>
 

src/i18n/message/common/locale-resource.json

@@ -80,5 +80,9 @@
     },
     "mn": {
         "name": "Монгол"
+    },
+    "ar": {
+        "name": "عربي",
+        "rtl": true
     }
 }

src/i18n/message/common/locale.ts

@@ -9,6 +9,7 @@ import resource from './locale-resource.json'
 
 type MetaBase = {
     name: string
+    rtl?: boolean
 }
 
 type Meta = MetaBase & {

src/util/fifo-cache.ts

@@ -19,7 +19,7 @@ class FIFOCache<T> {
         if (!threshold) {
             threshold = DEFAULT_THRESHOLD
         } else if (!Number.isInteger(threshold)) {
-            throw new Error('Threashold MUST BE integer')
+            throw new Error('Threshold MUST BE integer')
         } else if (threshold <= 0) {
             threshold = DEFAULT_THRESHOLD
         }

src/util/window.ts

@@ -2,11 +2,11 @@ import { onMounted, onUnmounted } from "vue"
 
 /**
  * handle window visible change
- * 
+ *
  * @since 1.4.4
  */
 export function handleWindowVisibleChange(handler: () => void) {
-    const hanlderInner = () => document.visibilityState === 'visible' && handler()
-    onMounted(() => document.addEventListener('visibilitychange', hanlderInner))
-    onUnmounted(() => document.removeEventListener('visibilitychange', hanlderInner))
+    const handlerInner = () => document.visibilityState === 'visible' && handler()
+    onMounted(() => document.addEventListener('visibilitychange', handlerInner))
+    onUnmounted(() => document.removeEventListener('visibilitychange', handlerInner))
 }

types/timer/index.d.ts

@@ -50,6 +50,7 @@ declare namespace timer {
         | 'vi'
         | 'sk'
         | 'mn'
+        | 'ar'
 
     type ExtensionMetaFlag = "rateOpen"