@/utils#compareVer JavaScript Examples

checkVersion = () => async(dispatch, getState) => {
  let versionInfo
  try {
    const { version, desc, history } = await getVersionInfo()
    versionInfo = {
      version,
      desc,
      history,
    }
  } catch (err) {
    versionInfo = {
      version: '0.0.0',
      desc: null,
      history: [],
    }
  }
  // const versionInfo = {
  //   version: '1.9.0',
  //   desc: '- 更新xxx\n- 修复xxx123的萨达修复xxx123的萨达修复xxx123的萨达修复xxx123的萨达修复xxx123的萨达',
  //   history: [{ version: '1.8.0', desc: '- 更新xxx22\n- 修复xxx22' }, { version: '1.7.0', desc: '- 更新xxx22\n- 修复xxx22' }],
  // }
  versionInfo.status =
   versionInfo.version == '0.0.0'
     ? VERSION_STATUS.unknown
     : compareVer(process.versions.app, versionInfo.version) < 0
       ? VERSION_STATUS.available
       : VERSION_STATUS.latest

  const { common } = getState()

  if (common.setting.ignoreVersion != versionInfo.version && versionInfo.status == VERSION_STATUS.available) {
    versionInfo.showModal = true
    dispatch(setVersionInfo(versionInfo))
    showVersionModal()
  } else {
    versionInfo.showModal = false
    dispatch(setVersionInfo(versionInfo))
  }
  // console.log(compareVer(process.versions.app, versionInfo.version))
  // console.log(process.versions.app, versionInfo.version)
}

VersionModal = ({ componentId }) => {
  const theme = useGetter('common', 'theme')
  const { t } = useTranslation()
  const versionInfo = useGetter('common', 'versionInfo')
  const setVersionInfo = useDispatch('common', 'setVersionInfo')
  const setIgnoreVersion = useDispatch('common', 'setIgnoreVersion')
  const [ignoreBtn, setIgnoreBtn] = useState({ text: t('version_btn_ignore'), show: true, disabled: false })
  const [closeBtnText, setCloseBtnText] = useState(t('version_btn_close'))
  const [confirmBtn, setConfirmBtn] = useState({ text: t('version_btn_confirm'), show: true, disabled: false })
  const [title, setTitle] = useState('')
  const [tip, setTip] = useState('')

  const history = useMemo(() => {
    if (!versionInfo.history) return []
    let arr = []
    for (const ver of versionInfo.history) {
      if (compareVer(currentVer, ver.version) < 0) arr.push(ver)
    }
    return arr
  }, [versionInfo])

  const handleCancel = () => {
    setVersionInfo({ showModal: false })
    Navigation.dismissOverlay(componentId)
  }

  const handleIgnore = () => {
    setIgnoreVersion(versionInfo.version)
    handleCancel()
  }

  const handleDownload = () => {
    setVersionInfo({
      status: VERSION_STATUS.downloading,
      downloadProgress: {
        total: 0,
        current: 0,
      },
    })
    downloadNewVersion(versionInfo.version, (total, current) => {
      // console.log(total, current)
      setVersionInfo({
        status: VERSION_STATUS.downloading,
        downloadProgress: {
          total,
          current,
        },
      })
    }).then(() => {
      setVersionInfo({
        status: VERSION_STATUS.downloaded,
      })
    }).catch(err => {
      console.log(err)
      setVersionInfo({
        status: VERSION_STATUS.failed,
      })
    })
  }
  const handleConfirm = () => {
    switch (versionInfo.status) {
      case VERSION_STATUS.available:
        handleDownload()
        break
      case VERSION_STATUS.downloaded:
        updateApp().catch(() => {
          setVersionInfo({
            status: VERSION_STATUS.failed,
          })
        })
        break
      case VERSION_STATUS.failed:
        handleDownload()
        break

      case VERSION_STATUS.unknown:
      default:
        openUrl('https://github.com/lyswhut/lx-music-mobile#readme')
        break
    }
    // setVersionInfo({ showModal: false })
    // Navigation.dismissOverlay(componentId)
  }

  useEffect(() => {
    switch (versionInfo.status) {
      case VERSION_STATUS.available:
        setTitle(t('version_title_new'))
        setTip('')
        setIgnoreBtn({ text: t('version_btn_ignore'), show: true, disabled: false })
        setConfirmBtn({ text: t('version_btn_new'), show: true, disabled: false })
        // setTip(t('version_btn_new'))
        setCloseBtnText(t('version_btn_close'))
        break
      case VERSION_STATUS.downloading:
        setTitle(t('version_title_new'))
        setTip(t('version_btn_downloading', {
          total: sizeFormate(versionInfo.downloadProgress.total),
          current: sizeFormate(versionInfo.downloadProgress.current),
          progress: versionInfo.downloadProgress.total ? (versionInfo.downloadProgress.current / versionInfo.downloadProgress.total * 100).toFixed(2) : '0',
        }))
        if (ignoreBtn.show) setIgnoreBtn({ text: t('version_btn_ignore'), show: false, disabled: true })
        if (!confirmBtn.disabled) setConfirmBtn({ text: t('version_btn_update'), show: true, disabled: true })
        setCloseBtnText(t('version_btn_min'))
        break
      case VERSION_STATUS.downloaded:
        setTitle(t('version_title_update'))
        setTip('')
        if (ignoreBtn.show) setIgnoreBtn({ text: t('version_btn_ignore'), show: false, disabled: true })
        setConfirmBtn({ text: t('version_btn_update'), show: true, disabled: false })
        setCloseBtnText(t('version_btn_close'))
        break
      case VERSION_STATUS.checking:
        setTitle(t('version_title_checking'))
        setTip(t(''))
        setIgnoreBtn({ text: t('version_btn_ignore'), show: false, disabled: true })
        setConfirmBtn({ text: t('version_btn_new'), show: false, disabled: true })
        setCloseBtnText(t('version_btn_close'))
        break
      case VERSION_STATUS.failed:
        setTitle(t('version_title_failed'))
        setTip(t('version_tip_failed'))
        setIgnoreBtn({ text: t('version_btn_ignore'), show: true, disabled: false })
        setConfirmBtn({ text: t('version_btn_failed'), show: true, disabled: false })
        setCloseBtnText(t('version_btn_close'))
        break
      case VERSION_STATUS.unknown:
        setTitle(t('version_title_unknown'))
        setTip(t('version_tip_unknown'))
        setIgnoreBtn({ text: t('version_btn_ignore'), show: false, disabled: true })
        setConfirmBtn({ text: t('version_btn_unknown'), show: true, disabled: false })
        setCloseBtnText(t('version_btn_close'))
        break
      case VERSION_STATUS.latest:
      default:
        setTitle(t('version_title_latest'))
        setTip('')
        setIgnoreBtn({ text: t('version_btn_ignore'), show: false, disabled: true })
        setConfirmBtn({ text: t('version_btn_new'), show: false, disabled: true })
        setCloseBtnText(t('version_btn_close'))
        break
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [t, versionInfo])

  return (
    <View style={{ ...styles.centeredView }}>
      <View style={{ ...styles.modalView, backgroundColor: theme.primary }}>
        <View style={{ ...styles.header, backgroundColor: theme.secondary }}></View>
        <View style={styles.main}>
          <Text style={{ ...styles.title, color: theme.normal }}>{title}</Text>
          <ScrollView style={styles.content} keyboardShouldPersistTaps={'always'}>
            <Text style={{ ...styles.label, color: theme.normal }}>{t('version_label_latest_ver')}{versionInfo.version}</Text>
            <Text style={{ ...styles.label, color: theme.normal }}>{t('version_label_current_ver')}{currentVer}</Text>
            {
              versionInfo.desc
                ? (
                    <View>
                      <Text style={{ ...styles.label, color: theme.normal }}>{t('version_label_change_log')}</Text>
                      <View style={{ paddingLeft: 10, marginTop: 5 }}>
                        <Text selectable style={{ ...styles.desc, color: theme.normal }}>{versionInfo.desc}</Text>
                      </View>
                    </View>
                  )
                : null
            }
            {
              history.length
                ? (
                    <View style={styles.history}>
                      <Text style={{ ...styles.label, color: theme.normal }}>{t('version_label_history')}</Text>
                      <View style={{ paddingLeft: 10, marginTop: 5 }}>
                        {history.map((item, index) => <VersionItem key={index} version={item.version} desc={item.desc} />)}
                      </View>
                    </View>
                  )
                : null
            }
          </ScrollView>
          { tip.length ? <Text style={{ marginTop: 10, fontSize: 14, color: theme.secondary }}>{tip}</Text> : null }
        </View>
        <View style={styles.btns}>
          {
            ignoreBtn.show
              ? (
                  <Button disabled={ignoreBtn.disabled} style={{ ...styles.btn, backgroundColor: theme.secondary45 }} onPress={handleIgnore}>
                    <Text style={{ fontSize: 14, color: theme.secondary_5 }}>{ignoreBtn.text}</Text>
                  </Button>
                )
              : null
          }
          <Button style={{ ...styles.btn, backgroundColor: theme.secondary45 }} onPress={handleCancel}>
            <Text style={{ fontSize: 14, color: theme.secondary_5 }}>{closeBtnText}</Text>
          </Button>
          {
            confirmBtn.show
              ? (
                  <Button disabled={confirmBtn.disabled} style={{ ...styles.btn, backgroundColor: theme.secondary45 }} onPress={handleConfirm}>
                    <Text style={{ fontSize: 14, color: theme.secondary_5 }}>{confirmBtn.text}</Text>
                  </Button>
                )
              : null
          }
        </View>
      </View>
    </View>
  )
}