antd#SpinProps TypeScript Examples

NotFoundResourceCheckView: React.FC = () => {
  const [list, setList] = useState<
    (Pick<NoteProperties, 'id' | 'title' | 'user_updated_time'> & {
      errorLinks: Pick<ResourceProperties, 'id' | 'title'>[]
    })[]
  >([])
  const [loadingMsg, setLoadingMsg] = useState('')
  const [state, onCheck] = useAsyncFn(async () => {
    const list = await notFoundResourceCheckService
      .check()
      .on('load', (title) => setLoadingMsg(title))
      .on('parse', (info) => {
        setLoadingMsg(`[${info.rate}/${info.all}] ${info.title}`)
      })
    console.log('list: ', list)
    setList(list)
  })

  return (
    <Card
      title={i18n.t('notFoundResource.title')}
      extra={<Button onClick={onCheck}>{i18n.t('common.action.check')}</Button>}
    >
      <List
        dataSource={list}
        locale={{
          emptyText: i18n.t('notFoundResource.listEmptyText'),
        }}
        renderItem={(note) => (
          <List.Item
            key={'note-' + note.id}
            actions={[<Button onClick={() => openNote(note.id)}>{i18n.t('common.action.open')}</Button>]}
          >
            <List.Item.Meta
              title={note.title}
              description={
                <List
                  className={css.subList}
                  dataSource={note.errorLinks}
                  renderItem={(item) => (
                    <List.Item key={'resource-' + note.id + '-' + item.id}>
                      <List.Item.Meta title={item.title || i18n.t('notFoundResource.unknownFileName', item)} />
                    </List.Item>
                  )}
                />
              }
            />
          </List.Item>
        )}
        loading={
          {
            spinning: state.loading,
            tip: loadingMsg,
          } as SpinProps
        }
      />
    </Card>
  )
}

UnusedResourceView: React.FC = () => {
  const [list, setList] = useState<Pick<ResourceProperties, 'id' | 'title' | 'mime'>[]>([])
  const [loadingMsg, setLoadingMsg] = useState('')
  const [state, onCheck] = useAsyncFn(async () => {
    try {
      const list = await unusedResourceService.getUnusedResource().on('process', (info) => {
        setLoadingMsg(i18n.t('unusedResource.msg.process', info))
      })
      console.log('list: ', list)
      setList(list)
    } catch (e) {
      message.error(i18n.t('unusedResource.msg.error'))
    }
  })

  async function onRemoveResource(id: string) {
    setList(produce((list) => list.filter((item) => item.id !== id)))
    await joplinApiGenerator.resourceApi.remove(id)
  }

  async function onOpenResource(id: string) {
    await downloadUrl(buildResourceUrl(id))
  }

  const [onRemoveAllState, onRemoveAll] = useAsyncFn(async () => {
    await AsyncArray.forEach(list, async (item) => {
      await joplinApiGenerator.resourceApi.remove(item.id)
    })
    setList([])
  }, [list])

  return (
    <Card
      title={i18n.t('unusedResource.title')}
      extra={
        <Space>
          <Button onClick={onCheck}>{i18n.t('common.action.check')}</Button>
          <Button disabled={list.length === 0} danger={true} loading={onRemoveAllState.loading} onClick={onRemoveAll}>
            {i18n.t('unusedResource.action.removeAll')}
          </Button>
        </Space>
      }
    >
      <List
        dataSource={list}
        locale={{
          emptyText: i18n.t('unusedResource.listEmptyText'),
        }}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            actions={[
              <Button onClick={() => onRemoveResource(item.id)}>{i18n.t('common.action.remove')}</Button>,
              <Button onClick={() => onOpenResource(item.id)}>{i18n.t('common.action.download')}</Button>,
            ]}
            extra={item.mime.startsWith('image/') && <Image src={buildResourceUrl(item.id)} width={300} />}
          >
            <List.Item.Meta title={item.title} />
          </List.Item>
        )}
        loading={
          {
            spinning: state.loading,
            tip: loadingMsg,
          } as SpinProps
        }
      />
    </Card>
  )
}

FixFileExtensionView: React.FC = () => {
  const [list, setList] = useState<
    Pick<ResourceProperties, 'id' | 'title' | 'file_extension' | 'mime'>[]
  >([])
  const [loadState, fetch] = useAsyncFn(async () => {
    setList(
      (
        await PageUtil.pageToAllList(
          joplinApiGenerator.resourceApi.list.bind(
            joplinApiGenerator.resourceApi,
          ),
          {
            fields: ['id', 'title', 'file_extension', 'mime'],
          },
        )
      )
        .filter((item) => !item.file_extension)
        .map((item) => ({
          ...item,
          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          file_extension: MimeUtils.toFileExtension(item.mime)!,
        })),
    )
  })

  async function onFix() {
    const hide = message.loading(i18n.t('fixFileExtension.action.progress'))
    try {
      await AsyncArray.forEach(
        list,
        asyncLimiting(async (item) => {
          await joplinApiGenerator.resourceApi.update({
            id: item.id,
            file_extension: item.file_extension,
          })
        }, 10),
      )
      setList([])
      message.success(i18n.t('fixFileExtension.action.complete'))
    } finally {
      hide()
    }
  }

  return (
    <Card
      title={i18n.t('fixFileExtension.title')}
      extra={
        <Space>
          <Button onClick={fetch}>{i18n.t('common.action.check')}</Button>
          <Button disabled={list.length === 0} onClick={onFix}>
            {i18n.t('fixFileExtension.action.fix')}
          </Button>
        </Space>
      }
    >
      <List
        dataSource={list ?? []}
        renderItem={(item) => (
          <List.Item
            key={item.id}
            extra={
              item.mime.startsWith('image/') && (
                <Image src={buildResourceUrl(item.id)} width={300} />
              )
            }
          >
            <List.Item.Meta
              title={item.title}
              description={`${i18n.t('fixFileExtension.tip')}${
                item.file_extension
              }`}
            />
          </List.Item>
        )}
        loading={
          {
            spinning: loadState.loading,
          } as SpinProps
        }
      />
    </Card>
  )
}