antd#List TypeScript Examples

Page_temp_trade_20220108 = () => {
  const [text, setText] = useState('')
  const [list, setList] = useState<string[]>([])

  const qqList = useMemo(() => text.split(','), [text])

  const find = useCallback(async () => {
    const hr = await services.temp.temp_trade_20220108__find_no_exist({
      list: qqList,
    })
    console.log(qqList)
    console.log(hr.data)
    setList(hr.data.resource)
  }, [qqList])

  return (
    <div>
      <h1>查询没有完成订单的用户</h1>
      <TextArea rows={4} value={text} onChange={(event) => setText(event.target.value)} />
      <Button type="primary" onClick={find}>
        查询
      </Button>
      <Button
        onClick={() => {
          setText('')
          setList([])
        }}
      >
        清除
      </Button>
      <List
        style={{ backgroundColor: '#fff' }}
        bordered
        dataSource={list}
        renderItem={(item) => <List.Item>{item}</List.Item>}
      />
    </div>
  )
}

Calendar = ({events, ...props}: CalendarProps) => (
  <CalendarDayjsAntd
    headerRender={props => <CalendarHeader {...props} />}
    dateCellRender={date => (
      <List size="small">
        {events
          .filter(({startDay, endDay}) => 
            date.isAfter(startDay?.startOf("day")) &&
            date.isBefore(endDay?.endOf("day"))
          )
          .map(event => (
            <List.Item key={event.title}>
              <CalendarEvent event={event} />
            </List.Item>
          ))
        }
      </List>
    )}
    {...props}
  />
)

/**
 * Track list component.
 */
export default function TrackList(props: Props): JSX.Element {
    const { playHistoryList, username } = props;
    return (
        <List
            size="small"
            header={<TrackListHeader username={username} />}
            bordered
            dataSource={playHistoryList}
            renderItem={(playHistory) => <TrackListItem playHistory={playHistory} />}
        />
    );
}

export function ActionsListView({ actions }: ActionsListViewProps): JSX.Element {
    const { selectAction } = useActions(actionsTabLogic)
    return (
        <List
            itemLayout="horizontal"
            dataSource={actions}
            renderItem={(action, index) => (
                <List.Item onClick={() => selectAction(action.id || null)} style={{ cursor: 'pointer' }}>
                    <List.Item.Meta
                        title={
                            <Space>
                                <span
                                    style={{
                                        display: 'inline-block',
                                        width: Math.floor(Math.log10(actions.length) + 1) * 12 + 6,
                                        textAlign: 'right',
                                        marginRight: 4,
                                    }}
                                >
                                    {index + 1}.
                                </span>
                                {action.name || <span style={{ color: '#888' }}>Untitled</span>}
                            </Space>
                        }
                    />
                </List.Item>
            )}
        />
    )
}

renderArray = (arrayEnts: any[], arrayHelpers: any) => {
  const data = arrayEnts
    .map((_ent, idx) => (
      <>
        <Field key={idx} name={`site.siteHierarchies.${idx}`} />
        <button type="button" onClick={() => arrayHelpers.remove(idx)}>
          -
        </button>
      </>
    ))
    .concat(
      <button type="button" onClick={() => arrayHelpers.push("")}>
        +
      </button>
    );
  return (
    <List
      itemLayout="vertical"
      dataSource={data}
      bordered={false}
      renderItem={(item) => (
        <List.Item style={{ borderBottom: "none" }}>{item}</List.Item>
      )}
    />
  );
}

export function BricksOfProviders(
  props: BricksOfProvidersProps
): React.ReactElement {
  if (!props.serviceData) {
    return null;
  }

  return (
    <Card title={props.serviceData.id} bordered={false}>
      <List
        dataSource={props.serviceData.bricks}
        renderItem={item => (
          <List.Item>
            <List.Item.Meta
              title={
                <Link
                  to={`/developers/providers/${props.serviceData.id}/${
                    item.split(".")[1]
                  }`}
                >
                  {item}
                </Link>
              }
            />
          </List.Item>
        )}
      />
    </Card>
  );
}

render (): React.ReactNode {
    var groups = null
    if (this.props.groups !== undefined) {
      groups = this.props.groups.map((item, index: number) => (
        <Description
          key={index}
          header={item.name}
          attributes={item.attributes}
        />
      ))
    }
    var title
    if (this.props.type !== undefined) {
      title = `${this.props.type}: ${this.props.identifier}`
    } else {
      title = this.props.identifier
    }
    return (
      <List.Item key={this.props.uid}>
        <Description
          header={title}
          attributes={this.props.attributes}
          hasLongValues={this.props.hasLongValues}
        >
          {groups}
        </Description>
        {this.props.children}
      </List.Item>
    )
  }

export function HomeListings({ title, listings }: Props) {
    return (
        <div className="home-listings">
            <Title level={4} className="home-listings__title">
                {title}
            </Title>
            <List
                grid={{
                    gutter: 8,
                    xs: 1,
                    sm: 2,
                    lg: 4,
                }}
                dataSource={listings}
                renderItem={(listing) => (
                    <List.Item>
                        <ListingCard listing={listing} />
                    </List.Item>
                )}
            />
        </div>
    );
}

function TokenListItem({
  tokenInfo,
  onClick,
}: {
  tokenInfo: TokenInfo;
  onClick: (mint: PublicKey) => void;
}) {
  const mint = new PublicKey(tokenInfo.address);
  return (
    <List.Item onClick={() => onClick(mint)} className={'token-list-item'}>
      <TokenIcon mint={mint} style={{ width: '30px', borderRadius: '15px' }} />
      <TokenName mint={mint} />
    </List.Item>
  );
}

DownloadList: FC<DownloadListProps> = memo(
  ({ onDownloadFile, tasks }) => {
    const t = useI18NPrefix('main.nav.download');

    const tasksContent = useMemo(() => {
      return (
        <List
          size="small"
          dataSource={tasks}
          rowKey={t => t.name}
          renderItem={t => {
            return (
              <ListItem>
                <DownloadFileItem {...t} onDownloadFile={onDownloadFile} />
              </ListItem>
            );
          }}
        />
      );
    }, [onDownloadFile, tasks]);

    return (
      <Wrapper>
        <Title>
          <h2>{t('title')}</h2>
        </Title>
        <Content>{tasksContent}</Content>
      </Wrapper>
    );
  },
)

MatchNoteList: React.FC<MatchNoteListProps> = (props) => {
  const [onConvertNoteState, onConvertNote] = useAsyncFn(props.onConvertNote)

  return (
    <List
      dataSource={props.url.matchNotes}
      className={css.sub2}
      loading={onConvertNoteState.loading}
      renderItem={(matchNote) => (
        <List.Item key={matchNote.id}>
          <Space>
            <Typography.Text>{matchNote.title}</Typography.Text>
            <Button onClick={() => onConvertNote(matchNote)}>{i18n.t('convertExternalLink.action.convert')}</Button>
          </Space>
        </List.Item>
      )}
    />
  )
}

ListTarget: React.FC<{ data: any }> = ({ data }: any) => {
	return _.isUndefined(_.get(data, 'address')) ? null : (
		<List
			size='large'
			bordered
			dataSource={_.get(data, 'targets', [])}
			renderItem={(item) => <List.Item>{item}</List.Item>}
		/>
	);
}

ClickableItem = styled(List.Item)`
  display: flex;
  justify-content: space-between;
  &:hover {
    cursor: pointer;
    background-color: #f7fcff;
  }
  padding: 0;
`

export function MemberList({ data, statusRender }: MemberListProps) {
  const { t } = useTranslation();
  const isExtensionAccount = useIsInjected();

  return (
    <List
      itemLayout="horizontal"
      className="lg:hidden block"
      dataSource={data.meta.addressPair as KeyringJson[]}
      renderItem={(item) => (
        <List.Item>
          <List.Item.Meta
            avatar={<BaseIdentityIcon theme="polkadot" size={24} value={item.address} />}
            title={
              <Space className="flex flex-col">
                {/* eslint-disable-next-line  @typescript-eslint/no-explicit-any */}
                <Typography.Text>{(item as any).name}</Typography.Text>
                <Typography.Text>
                  {statusRender ? statusRender(item) : t(isExtensionAccount(item.address) ? 'injected' : 'external')}
                </Typography.Text>
              </Space>
            }
            description={
              <Typography.Text copyable className="w-full">
                {item.address}
              </Typography.Text>
            }
          />
        </List.Item>
      )}
    />
  );
}

CustomEntityFilterTest = observer(() => {
    const {
        items,
        listQueryResult: {loading},
        entityListState: {pagination},
        handlePaginationChange,
        handleFilterChange,
        count,
    } = useEntityList<Car>({
        listQuery: SCR_CAR_LIST,
        entityName: ENTITY_NAME,
        routingPath: ROUTING_PATH,
    });

    return (
        <div className={appStyles.narrowLayout}>
            <Space direction="vertical" style={{width: "100%"}}>
                <Card title="EntityFilter" size="small">
                    <Space direction="vertical" style={{width: "100%"}} size="middle">
                        <EntityFilter
                            entityName={ENTITY_NAME}
                            onFilterApply={handleFilterChange}
                        />
                        <List
                            itemLayout="horizontal"
                            bordered
                            loading={loading}
                            dataSource={items}
                            renderItem={(item: EntityInstance<Car>) => (
                                <List.Item>
                                    <div style={{flexGrow: 1}}>
                                        {getFields(item).map(p => (
                                            <EntityProperty
                                                entityName={ENTITY_NAME}
                                                propertyName={p}
                                                value={item[p]}
                                                key={p}
                                            />
                                        ))}
                                    </div>
                                </List.Item>
                            )}
                        />
                        <Paging
                            paginationConfig={pagination ?? {}}
                            onPagingChange={handlePaginationChange}
                            total={count}
                        />
                    </Space>
                </Card>
            </Space>
        </div>
    )
})

/**
 * Track list item component.
 */
export default function TrackListItem(props: Props): JSX.Element {
    const { playHistory } = props;
    const trackInfo = playHistory.track;
    // Join artists with comma
    const combinedArtistName = trackInfo.artists.map((artist) => artist.name).join(', ');
    const trackName = trackInfo.name;
    const trackUrl = trackInfo.external_urls.spotify;

    const albumName = trackInfo.album.name;
    const albumUrl = trackInfo.album.external_urls.spotify;
    const albumCoverSrc = trackInfo.inlineimage;

    return (
        <List.Item className="track-item" extra={<Timestamp isoDate={playHistory.played_at} />}>
            <List.Item.Meta
                avatar={
                    <a target="_blank" rel="noopener noreferrer" href={albumUrl} title={albumName}>
                        <Avatar shape="square" src={albumCoverSrc} />
                    </a>
                }
                title={
                    <a
                        className="ellipsis-overflow a-spotify"
                        target="_blank"
                        rel="noopener noreferrer"
                        href={trackUrl}
                        title={trackName}>
                        {trackName}
                    </a>
                }
                description={
                    <Text className="ellipsis-overflow" type="secondary" title={combinedArtistName}>
                        {combinedArtistName}
                    </Text>
                }
            />
        </List.Item>
    );
}

function TabContents(frameworks: Record<string, string>, sort?: boolean): JSX.Element {
    const { setPlatform, setFramework } = useActions(ingestionLogic)
    const { activeTab } = useValues(ingestionLogic)

    return (
        <List
            style={{ height: 300, maxHeight: 300, overflowY: 'auto' }}
            grid={{}}
            size={'large'}
            dataSource={getDataSource(frameworks, sort) as Framework[]}
            renderItem={(item: Framework) => (
                <List.Item
                    className="selectable-item"
                    data-attr={'select-framework-' + item}
                    key={item}
                    onClick={() => {
                        setPlatform(frameworkToPlatform(item))
                        setFramework(item)
                    }}
                >
                    <div className="framework-container">
                        <div className={'logo-container'}>
                            <Avatar
                                size={64}
                                shape={'square'}
                                className={'logo'}
                                src={item && item in logos ? logos[item] : logos['default']}
                            />
                        </div>
                        <Paragraph className="framework-name" type="secondary" strong>
                            {getDisplayName(frameworks, item)}{' '}
                            {item?.toString() === 'AUTOCAPTURE' && activeTab !== 'all' && (
                                <Tag color="success">Recommended</Tag>
                            )}
                        </Paragraph>
                    </div>
                </List.Item>
            )}
        />
    )
}

DepartmentPagination:FC<{
    queryReference: PreloadedQueryOf<typeof DEPARTMENT_LIST_QUERY>
}> = memo(({queryReference}) => {

    const list = useTypedPreloadedQuery(DEPARTMENT_LIST_QUERY, queryReference);

    const { 
        data, loadNext, loadPrevious, hasNext, hasPrevious, isLoadingNext, isLoadingPrevious 
    } = useTypedPaginationFragment(DEPARTMENT_LIST_FRAGMENT, list);

    const onPreviousPageClick = useCallback(() => {
        loadPrevious(DEFAULT_PAGE_SIZE);
    }, [loadPrevious]);

    const onNextPageClick = useCallback(() => {
        loadNext(DEFAULT_PAGE_SIZE);
    }, [loadNext]);

    return (
        <Space direction="vertical" className={FULL_WIDTH}>
            <List bordered>
                {
                    data.list.edges.map(edge => 
                    <List.Item key={edge.node.id}>
                        <DepartmentRow listFilter={extractBusinessArgs(queryReference)} row={edge.node}/>
                    </List.Item>
                    )
                }
            </List>
            <div className={css({textAlign: "center"})}>
                <Space>
                    <Button 
                    disabled={!hasPrevious} 
                    loading={isLoadingPrevious}
                    onClick={onPreviousPageClick}>
                        &lt;Previous page
                    </Button>
                    <Button 
                    disabled={!hasNext} 
                    loading={isLoadingNext}
                    onClick={onNextPageClick}>
                        Next page&gt;
                    </Button>
                </Space>
            </div>
        </Space>
    );
})

export function AdvanceListContainer(
  props: AdvanceListContainerProps
): React.ReactElement {
  const [activeIndex, setActiveIndex] = useState(props.defaultActiveIndex || 0);
  const clickItemEvent = (data: any, index: number): void => {
    setActiveIndex(index);
    props.itemClick({ item: data, index });
  };
  const renderItemExtra = (item: Record<string, any>): React.ReactElement => {
    return (
      props?.suffixBrick?.useBrick && (
        <BrickAsComponent
          useBrick={props.suffixBrick.useBrick}
          data={item}
        ></BrickAsComponent>
      )
    );
  };
  useEffect(() => {
    if (props.data.list) {
      const item = props.data.list[props.defaultActiveIndex];
      item && props.itemClick({ item, index: props.defaultActiveIndex });
    }
  }, [props.defaultActiveIndex, props.data]);
  const renderItem = (
    item: Record<string, any>,
    index: number
  ): React.ReactElement => {
    return (
      <div
        className={classNames({
          [style.itemContainer]: true,
          [style.activeItem]: props.selectable && activeIndex === index
        })}
        onClick={() => clickItemEvent(item, index)}
      >
        <div className={style.itemContainerInner}>
          <BrickAsComponent
            useBrick={props.titleBrick.useBrick}
            data={item}
          ></BrickAsComponent>
          {renderItemExtra(item)}
        </div>
      </div>
    );
  };
  return (
    <div>
      <List dataSource={props?.data?.list || []} renderItem={renderItem}></List>
    </div>
  );
}

Assets = (props: Props) => {
    const service = new Service('tenant');

    const { data: { id }, user } = props;

    const [userList, setUserList] = useState([]);
    const [current, setCurrent] = useState();
    useEffect(() => {
        service.member.query(id, encodeQueryParam({})).subscribe(resp => {
            const temp = resp.map((item: any) => ({
                id: item.userId,
                name: item.name
            }));
            setUserList(temp);
        });
        if (user) {
            setCurrent(user.userId);
        }
    }, [user?.userId]);

    return (


        <div>
            <div style={{ marginBottom: 20, marginTop: 20, width: '30%' }}>
                <Form.Item label="选择成员"
                    labelAlign="left"
                    labelCol={{ xxl: 4, xl: 8, lg: 7, md: 8 }}
                    wrapperCol={{ xxl: 20, xl: 16, lg: 17, md: 16 }}
                >
                    <Select
                        style={{ width: '100%' }}
                        value={current}
                        onChange={(e: any) => setCurrent(e)}
                        allowClear
                    >
                        {userList.map((item: any) => <Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>)}
                    </Select>
                </Form.Item>
            </div>

            <div className={styles.cardList}>

                <List<Partial<any>>
                    rowKey="id"
                    loading={false}
                    grid={{ gutter: 24, lg: 4, md: 2, sm: 1, xs: 1 }}
                >

                    <Product user={current} />
                    <Device user={current} />
                    {/* <Protocol user={current} /> */}
                </List>
            </div>
        </div >
    )
}

DebugEvents = ({ handleClick }: Props) => {
  const services = ApplicationServices.get()

  const { data: eventsData, isLoading } = useLoaderAsObject(
    async () =>
      await services.backendApiClient.get(`/events/cache?project_id=${services.activeProject.id}&limit=10`, {
        proxy: true,
      })
  )

  const allEvents = useMemo(() => {
    const events = eventsData?.events ?? []
    if (events.length > 100) events.length = 100
    return events
      .map(event => ({
        data: event,
        time: moment(event.original._timestamp),
      }))
      .sort((e1: Event, e2: Event) => {
        if (e1.time.isAfter(e2.time)) {
          return -1
        } else if (e2.time.isAfter(e1.time)) {
          return 1
        }
        return 0
      })
  }, [eventsData?.events])

  return (
    <Card bordered={false} className={`${styles.events}`}>
      {isLoading ? (
        <List
          dataSource={range(0, 25)}
          renderItem={() => (
            <Skeleton active title={false} paragraph={{ rows: 2, width: ["100%", "70%"] }} className="mb-2" />
          )}
        />
      ) : (
        <List
          className={`h-full w-full overflow-y-auto overflow-x-hidden ${styles.withSmallScrollbar}`}
          dataSource={allEvents}
          renderItem={(item: any) => {
            return (
              <div
                className={`flex flex-col items-stretch ${styles.eventItem}`}
                onClick={handleClick(item?.data.original)}
              >
                <p className="truncate mb-0">{item?.time?.utc?.()?.format?.()}</p>
                {item?.data?.original?.event_type ? (
                  <p className="truncate mb-0">{item?.data?.original?.event_type}</p>
                ) : (
                  ""
                )}
              </div>
            )
          }}
        />
      )}
    </Card>
  )
}

export function ListingBookings({
    listingBookings,
    bookingsPage,
    limit,
    setBookingsPage,
}: ListingBookingsProps) {
    const total = listingBookings ? listingBookings.total : null;
    const result = listingBookings ? listingBookings.result : null;

    const listingBookingsList = listingBookings ? (
        <List
            grid={{
                gutter: 8,
                xs: 1,
                sm: 2,
                lg: 3,
            }}
            dataSource={result ? result : undefined}
            locale={{ emptyText: "No bookings have been made yet!" }}
            pagination={{
                current: bookingsPage,
                total: total ? total : undefined,
                defaultPageSize: limit,
                hideOnSinglePage: true,
                showLessItems: true,
                onChange: (page: number) => setBookingsPage(page),
            }}
            renderItem={(listingBooking) => {
                const bookingHistory = (
                    <div className="listing-bookings__history">
                        <div>
                            Check in:{" "}
                            <Text strong>{listingBooking.checkIn}</Text>
                        </div>
                        <div>
                            Check out:{" "}
                            <Text strong>{listingBooking.checkOut}</Text>
                        </div>
                    </div>
                );

                return (
                    <List.Item className="listing-bookings__item">
                        {bookingHistory}
                        <Link to={`/user/${listingBooking.tenant.id}`}>
                            <Avatar
                                src={listingBooking.tenant.avatar}
                                size={64}
                                shape="square"
                            />
                        </Link>
                    </List.Item>
                );
            }}
        />
    ) : null;

    const listingBookingsElement = listingBookingsList ? (
        <div className="listing-bookings">
            <Divider />
            <div className="listing-bookings__section">
                <Title level={4}>Bookings</Title>
            </div>
            {listingBookingsList}
        </div>
    ) : null;

    return listingBookingsElement;
}

function FormList ({ dataSource, renderItem, ...extra }) {
    if (!renderItem) throw new Error('renderItem prop is required')

    return <List
        size="large"
        itemLayout={'horizontal'}
        dataSource={dataSource}
        renderItem={renderItemWrapper}
        {...extra}
    />

    function renderItemWrapper (item) {
        const itemData = renderItem(item)
        const itemMeta = { key: item.id, ...(itemData.itemMeta || {}) }
        const formMeta = { layout: 'inline', ...(itemData.formMeta || {}) }
        const mainBlockMeta = { key: `m${item.id}`, ...(itemData.mainBlockMeta || {}) }
        const extraBlockMeta = { key: `e${item.id}`, ...(itemData.extraBlockMeta || {}) }
        return <SListItem {...itemMeta}>
            <SListItemForm {...formMeta}>
                <SSkeleton loading={item.loading} active>
                    <SListItemMeta
                        avatar={itemData.avatar}
                        title={itemData.title}
                        description={itemData.description}
                        {...mainBlockMeta} />
                    <SListItemExtra {...extraBlockMeta}>
                        {(itemData.actions && Array.isArray(itemData.actions)) ?
                            itemData.actions
                                .map((actionsLine, i) => {
                                    if (!actionsLine) return null
                                    if (!Array.isArray(actionsLine)) throw new Error('renderItem() => itemData.actions should be array of arrays')
                                    const cleanedActionsLine = actionsLine.filter(identity)
                                    const length = cleanedActionsLine.length
                                    if (length === 0) return null
                                    return <SListActionsUl key={i} className='ant-list-item-action'>
                                        {cleanedActionsLine
                                            .map((action, j) => {
                                                if (!action) return null
                                                return <li key={j} className='ant-list-item-action'>
                                                    {action}
                                                    {j !== length - 1 && <em className='ant-list-item-action-split' />}
                                                </li>
                                            })
                                        }
                                    </SListActionsUl>
                                })
                                .filter(identity)
                            : itemData.actions}
                    </SListItemExtra>
                </SSkeleton>
            </SListItemForm>
        </SListItem>
    }
}

/**
 * @param callbackFn 回调函数返回一个颜色数组
 * @param children 点击弹出按钮的文字 支持文字和html类型
 */
function ThemeColorSelection({ children, callbackFn }: themeColorPropTypes) {
  const [switchStatus, setSwitchStatus] = useState(false);
  const [colors] = useState(colorThemes);
  const { i18n } = useTranslation();

  return (
    <Popover
      destroyTooltipOnHide
      onVisibleChange={setSwitchStatus}
      visible={switchStatus}
      trigger="click"
      placement="bottomRight"
      content={
        <ColorWrapAlert>
          <List
            itemLayout="horizontal"
            dataSource={colors}
            renderItem={item => (
              <List.Item
                onClick={() => {
                  callbackFn(item.colors);
                  setSwitchStatus(false);
                }}
              >
                <ColorTitle>{item[i18n.language].title}</ColorTitle>
                <ColorBlockWrap>
                  {item.colors.map((v, i) => {
                    return <ColorBlock color={v} key={i}></ColorBlock>;
                  })}
                </ColorBlockWrap>
              </List.Item>
            )}
          />
        </ColorWrapAlert>
      }
    >
      <ChooseTheme
        onClick={() => {
          setSwitchStatus(!switchStatus);
        }}
      >
        <ChooseThemeSpan>{children}</ChooseThemeSpan>
      </ChooseTheme>
    </Popover>
  );
}

CheckParentNotebookView: React.FC = () => {
  const [list, setList] = useState<
    Pick<NoteProperties, 'id' | 'title' | 'parent_id'>[]
  >([])
  const [onCheckState, onCheck] = useAsyncFn(async () => {
    const list = await checkParentNotebookService.check()
    console.log('list: ', list)
    setList(list)
  })

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

  return (
    <Card
      title={i18n.t('checkParentNotebook.title')}
      extra={
        <Button loading={onCheckState.loading} onClick={onCheck}>
          {i18n.t('common.action.check')}
        </Button>
      }
    >
      <List
        dataSource={list}
        locale={{ emptyText: i18n.t('checkParentNotebook.listEmptyText') }}
        renderItem={(item) => (
          <List.Item
            id={item.id}
            extra={
              <Button onClick={() => onRemove(item.id)}>
                {i18n.t('common.action.remove')}
              </Button>
            }
          >
            <Typography.Text>{item.title}</Typography.Text>
          </List.Item>
        )}
      />
    </Card>
  )
}

function DeviceNotifPanel() {
  const thisEndpoint = useThisDeviceEndpoint();
  const { data: profile, mutate } = useSWR(`api/v1/profile`, async () =>
    API.profile.index()
  );
  const thisDesktopNotif = profile?.desktopNotifs?.find(
    (dn) => dn.endpoint === thisEndpoint
  );
  return (
    <div>
      <DeviceAddHeader>
        <h3>Your Devices</h3>
        {!thisDesktopNotif && (
          <Tooltip
            title={
              getNotificationState() ===
                NotificationStates.browserUnsupported &&
              "Browser does not support notifications. Please use Chrome or Firefox, and not Incognito Mode."
            }
          >
            <Button
              onClick={async () => {
                const canNotify = await requestNotificationPermission();
                if (canNotify === NotificationStates.notAllowed) {
                  message.warning("Please allow notifications in this browser");
                }
                if (canNotify === NotificationStates.granted) {
                  await registerNotificationSubscription();
                  mutate();
                }
              }}
              disabled={
                getNotificationState() === NotificationStates.browserUnsupported
              }
              style={{ marginBottom: "4px" }}
            >
              Add This Device
            </Button>
          </Tooltip>
        )}
      </DeviceAddHeader>
      <List
        bordered
        dataSource={profile.desktopNotifs}
        locale={{ emptyText: "No Devices Registered To Receive Notifications" }}
        renderItem={(device: DesktopNotifPartial) => (
          <List.Item
            actions={[
              <MinusCircleOutlined
                style={{ fontSize: "20px" }}
                key={0}
                onClick={async () => {
                  await API.notif.desktop.unregister(device.id);
                  mutate();
                }}
              />,
            ]}
          >
            <List.Item.Meta
              title={renderDeviceInfo(device, device.endpoint === thisEndpoint)}
              description={`Registered ${device.createdAt.toLocaleDateString()}`}
            />
          </List.Item>
        )}
      />
    </div>
  );
}

MailboxMessages: React.FC = () => {
	const { limit, next, previous, page, unseen } = useValues(messagesLogic);
	const { setLimit, setNext, setPrevious, setPage } = useActions(messagesLogic);

	const { mailboxId } = useValues(mailboxesLogic);

	const { id }: any = useParams();

	const { data: results, isLoading } = useMessages({
		userId: id,
		mailboxId: mailboxId,
		params: {
			unseen: unseen,
			page: page,
			next: page === 1 ? undefined : next || undefined,
			previous: previous || undefined,
			limit: limit,
		},
	});

	const { data, nextCursor, previousCursor } = _.isUndefined(results)
		? { data: [], nextCursor: undefined, previousCursor: undefined }
		: results;
	setNext(nextCursor);
	setPrevious(previousCursor);

	return (
		<>
			<MessagesSearch />
			<Pagination
				page={page}
				limit={limit}
				next={next}
				previous={previous}
				setPrevious={setPrevious}
				setLimit={setLimit}
				setNext={setNext}
				setPage={setPage}
			/>
			<List
				itemLayout='horizontal'
				dataSource={data}
				bordered={true}
				loading={isLoading}
				style={{ height: '500px', overflow: 'scroll', paddingTop: '5px' }}
				renderItem={(item) => <MessageList item={item as any} />}
			/>
		</>
	);
}

FavoriteBtn = (props: IProps) => {
  const { onGqlSelect } = props;
  const { console: { favorites, updateFavorites } } = useStore();
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState([]);
  const [curAccount] = useState(sessionStorage.getItem('curAccount'));

  useEffect(() => {
    const curAccount = sessionStorage.getItem('curAccount');
    if (favorites[curAccount]) {
      setData(favorites[curAccount]);
    }
  }, [favorites]);


  const handleClear = () => {
    if(!data.length) {
      return; 
    }
    const _favorites = { ...favorites };
    _favorites[curAccount] = [];
    updateFavorites(_favorites);
    setVisible(false);
  };

  const handleSelect = (gql: string) => {
    onGqlSelect(gql);
    setVisible(false);
  };

  const renderStr = (str: string) => {
    if (str.length < 300) {
      return str;
    }
    return str.substring(0, 300) + '...';
  };

  return (
    <>
      <Tooltip title={intl.get('console.favorites')} placement="top">
        <Icon className={styles.btnOperations} type="icon-studio-btn-save" onClick={() => setVisible(true)} />
      </Tooltip>
      <Modal
        title={
          <>
            <span >
              {intl.get('console.favorites')}
            </span>
            <Button type="link" onClick={handleClear}>
              {intl.get('console.clearFavorites')}
            </Button>
          </>
        }
        visible={visible}
        className={styles.favoriteList}
        footer={null}
        onCancel={() => setVisible(false)}
      >
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item: string) => (
            <List.Item
              style={{ cursor: 'pointer', wordBreak: 'break-all' }}
              onClick={() => handleSelect(item)}
            >
              {renderStr(item)}
            </List.Item>
          )}
        />
      </Modal>
    </>
  );
}

HTTPFuzzerHistorySelector: React.FC<HTTPFuzzerHistorySelectorProp> = React.memo((props) => {
    const [tasks, setTasks] = useState<HTTPFuzzerTask[]>([]);
    const [loading, setLoading] = useState(false);

    const deleteAll = useMemoizedFn(()=>{
        setLoading(true)
        ipcRenderer.invoke("DeleteHistoryHTTPFuzzerTask", {}).then(()=>{
            info("Delete History")
            reload()
        }).finally(()=>setTimeout(()=>setLoading(false), 300))
    })

    const reload = useMemoizedFn(() => {
        setLoading(true)
        ipcRenderer.invoke("QueryHistoryHTTPFuzzerTask", {}).then((data: { Tasks: HTTPFuzzerTask[] }) => {
            setTasks(data.Tasks)
        }).finally(() => setTimeout(() => setLoading(false), 300))
    })
    useEffect(() => {
        reload()
    }, [])

    return <Card size={"small"} bordered={false} title={<Space>
        Web Fuzzer History
        <Button type={"link"} size={"small"} icon={<ReloadOutlined/>} onClick={e => {
            reload()
        }}/>
        <Popconfirm title={"确定删除吗？"} onConfirm={()=>{
            deleteAll()
        }}>
            <Button type={"link"} size={"small"} danger={true}
                    icon={<DeleteOutlined />}
            />
        </Popconfirm>
    </Space>}>
        <List<HTTPFuzzerTask>
            loading={loading}
            dataSource={tasks} pagination={{total: tasks.length, size: "small", pageSize: 10}}
            renderItem={(i: HTTPFuzzerTask) => {
                return <Card size={"small"} style={{marginBottom: 8}} hoverable={true} onClick={e => {
                    e.preventDefault()

                    props.onSelect(i.Id)
                }}>
                    <Space>
                        <div>
                            {`ID:${i.Id} ${formatTimestamp(i.CreatedAt)}`}
                        </div>
                        <Tag>共{i.HTTPFlowTotal}个</Tag>
                        {i.HTTPFlowSuccessCount != i.HTTPFlowTotal && <Tag>成功:{i.HTTPFlowSuccessCount}个</Tag>}
                    </Space>
                </Card>
            }}
        />
    </Card>
})