bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Dashboard styles, typescript, add useAppDispatch

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2022-04-14 15:24:11 +02:00
parent 3ecd7c3961
commit 39b819241f
7 changed files with 107 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
app/soapbox/features/admin/components/latest_accounts_panel.js
View file

@ -1,87 +0,0 @@
import { is } from 'immutable';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages } from 'react-intl';
import { connect } from 'react-redux';
import { fetchUsers } from 'soapbox/actions/admin';
import compareId from 'soapbox/compare_id';
import AccountListPanel from 'soapbox/features/ui/components/account_list_panel';
const messages = defineMessages({
title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
expand: { id: 'admin.latest_accounts_panel.expand_message', defaultMessage: 'Click to see {count} more {count, plural, one {account} other {accounts}}' },
});
const mapStateToProps = state => {
const accountIds = state.getIn(['admin', 'latestUsers']);
// HACK: AdminAPI only recently started sorting new users at the top.
// Try a dirty check to see if the users are sorted properly, or don't show the panel.
// Probably works most of the time.
const sortedIds = accountIds.sort(compareId).reverse();
const hasDates = accountIds.every(id => state.getIn(['accounts', id, 'created_at']));
const isSorted = hasDates && is(accountIds, sortedIds);
return {
isSorted,
accountIds,
};
};
export default @connect(mapStateToProps)
@injectIntl
class LatestAccountsPanel extends ImmutablePureComponent {
static propTypes = {
accountIds: ImmutablePropTypes.orderedSet.isRequired,
limit: PropTypes.number,
};
static defaultProps = {
limit: 5,
}
state = {
total: 0,
}
componentDidMount() {
const { dispatch, limit } = this.props;
dispatch(fetchUsers(['local', 'active'], 1, null, limit))
.then(({ count }) => {
this.setState({ total: count });
})
.catch(() => {});
}
render() {
const { intl, accountIds, limit, isSorted, ...props } = this.props;
const { total } = this.state;
if (!isSorted || !accountIds || accountIds.isEmpty()) {
return null;
}
const expandCount = total - accountIds.size;
return (
<AccountListPanel
icon={require('@tabler/icons/icons/users.svg')}
title={intl.formatMessage(messages.title)}
accountIds={accountIds}
limit={limit}
total={total}
expandMessage={intl.formatMessage(messages.expand, { count: expandCount })}
expandRoute='/admin/users'
withDate
withRelationship={false}
{...props}
/>
);
}
}

63
app/soapbox/features/admin/components/latest_accounts_panel.tsx Normal file
View file

@ -0,0 +1,63 @@
import { OrderedSet as ImmutableOrderedSet, is } from 'immutable';
import React, { useState } from 'react';
import { useEffect } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { Link } from 'react-router-dom';
import { fetchUsers } from 'soapbox/actions/admin';
import compareId from 'soapbox/compare_id';
import { Text, Widget } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account_container';
import { useAppSelector } from 'soapbox/hooks';
import { useAppDispatch } from 'soapbox/hooks/useAppDispatch';
const messages = defineMessages({
title: { id: 'admin.latest_accounts_panel.title', defaultMessage: 'Latest Accounts' },
expand: { id: 'admin.latest_accounts_panel.expand_message', defaultMessage: 'Click to see {count} more {count, plural, one {account} other {accounts}}' },
});
interface ILatestAccountsPanel {
limit?: number,
}
const LatestAccountsPanel: React.FC<ILatestAccountsPanel> = ({ limit = 5 }) => {
const dispatch = useAppDispatch();
const intl = useIntl();
const accountIds = useAppSelector<ImmutableOrderedSet<string>>((state) => state.admin.get('latestUsers'));
const hasDates = useAppSelector((state) => accountIds.every(id => !!state.accounts.getIn([id, 'created_at'])));
const [total, setTotal] = useState(0);
useEffect(() => {
dispatch(fetchUsers(['local', 'active'], 1, null, limit))
.then((value) => {
setTotal((value as { count: number }).count);
})
.catch(() => {});
}, []);
const sortedIds = accountIds.sort(compareId).reverse();
const isSorted = hasDates && is(accountIds, sortedIds);
if (!isSorted || !accountIds || accountIds.isEmpty()) {
return null;
}
const expandCount = total - accountIds.size;
return (
<Widget title={intl.formatMessage(messages.title)}>
{accountIds.take(limit).map((account) => (
<AccountContainer key={account} id={account} withRelationship={false} />
))}
{!!expandCount && (
<Link className='wtf-panel__expand-btn' to='/admin/users'>
<Text>{intl.formatMessage(messages.expand, { count: expandCount })}</Text>
</Link>
)}
</Widget>
);
};
export default LatestAccountsPanel;

79
app/soapbox/features/admin/index.js
View file

@ -7,6 +7,7 @@ import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email_list';
import { Text } from 'soapbox/components/ui';
import sourceCode from 'soapbox/utils/code';
import { parseVersion } from 'soapbox/utils/features';
import { getFeatures } from 'soapbox/utils/features';
@ -86,56 +87,46 @@ class Dashboard extends ImmutablePureComponent {
<Column icon='tachometer-alt' label={intl.formatMessage(messages.heading)}>
<div className='dashcounters'>
{mau && <div className='dashcounter'>
<div>
<div className='dashcounter__num'>
<FormattedNumber value={mau} />
</div>
<div className='dashcounter__label'>
<FormattedMessage id='admin.dashcounters.mau_label' defaultMessage='monthly active users' />
</div>
</div>
<Text align='center' size='2xl' weight='medium'>
<FormattedNumber value={mau} />
</Text>
<Text align='center'>
<FormattedMessage id='admin.dashcounters.mau_label' defaultMessage='monthly active users' />
</Text>
</div>}
<div className='dashcounter'>
<Link to='/admin/users'>
<div className='dashcounter__num'>
<FormattedNumber value={userCount} />
</div>
<div className='dashcounter__label'>
<FormattedMessage id='admin.dashcounters.user_count_label' defaultMessage='total users' />
</div>
</Link>
</div>
<Link className='dashcounter' to='/admin/users'>
<Text align='center' size='2xl' weight='medium'>
<FormattedNumber value={userCount} />
</Text>
<Text align='center'>
<FormattedMessage id='admin.dashcounters.user_count_label' defaultMessage='total users' />
</Text>
</Link>
{isNumber(retention) && (
<div className='dashcounter'>
<div>
<div className='dashcounter__num'>
{retention}%
</div>
<div className='dashcounter__label'>
<FormattedMessage id='admin.dashcounters.retention_label' defaultMessage='user retention' />
</div>
</div>
<Text align='center' size='2xl' weight='medium'>
{retention}%
</Text>
<Text align='center'>
<FormattedMessage id='admin.dashcounters.retention_label' defaultMessage='user retention' />
</Text>
</div>
)}
<Link className='dashcounter' to='/timeline/local'>
<Text align='center' size='2xl' weight='medium'>
<FormattedNumber value={instance.getIn(['stats', 'status_count'])} />
</Text>
<Text align='center'>
<FormattedMessage id='admin.dashcounters.status_count_label' defaultMessage='posts' />
</Text>
</Link>
<div className='dashcounter'>
<Link to='/timeline/local'>
<div className='dashcounter__num'>
<FormattedNumber value={instance.getIn(['stats', 'status_count'])} />
</div>
<div className='dashcounter__label'>
<FormattedMessage id='admin.dashcounters.status_count_label' defaultMessage='posts' />
</div>
</Link>
</div>
<div className='dashcounter'>
<div>
<div className='dashcounter__num'>
<FormattedNumber value={instance.getIn(['stats', 'domain_count'])} />
</div>
<div className='dashcounter__label'>
<FormattedMessage id='admin.dashcounters.domain_count_label' defaultMessage='peers' />
</div>
</div>
<Text align='center' size='2xl' weight='medium'>
<FormattedNumber value={instance.getIn(['stats', 'domain_count'])} />
</Text>
<Text align='center'>
<FormattedMessage id='admin.dashcounters.domain_count_label' defaultMessage='peers' />
</Text>
</div>
</div>
{account.admin && <RegistrationModePicker />}

1
app/soapbox/features/admin/user_index.js
View file

@ -116,6 +116,7 @@ class UserIndex extends ImmutablePureComponent {
showLoading={showLoading}
onLoadMore={this.handleLoadMore}
emptyMessage={intl.formatMessage(messages.empty)}
className='mt-4 space-y-4'
>
{accountIds.map(id =>
<AccountContainer key={id} id={id} withDate />,

5
app/soapbox/hooks/useAppDispatch.ts Normal file
View file

@ -0,0 +1,5 @@
import { useDispatch } from 'react-redux';
import { AppDispatch } from 'soapbox/store';
export const useAppDispatch = () => useDispatch<AppDispatch>();

60
app/styles/components/admin.scss
View file

@ -1,65 +1,9 @@
.dashcounters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
margin: 0 -5px 0;
padding: 20px;
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 mb-4;
}
.dashcounter {
box-sizing: border-box;
flex: 0 0 33.333%;
padding: 0 5px;
margin-bottom: 10px;
> a,
> div {
box-sizing: border-box;
text-decoration: none;
color: inherit;
display: block;
padding: 20px;
background: var(--accent-color--faint);
border-radius: 4px;
transition: 0.2s;
height: 100%;
}
> a:hover {
background: var(--accent-color--med);
transform: translateY(-2px);
}
&__num,
&__icon,
&__text {
text-align: center;
font-weight: 500;
font-size: 24px;
line-height: 30px;
color: var(--primary-text-color);
margin-bottom: 10px;
}
&__icon {
display: flex;
justify-content: center;
.svg-icon {
width: 48px;
height: 48px;
svg {
stroke-width: 1px;
}
}
}
&__label {
font-size: 14px;
color: hsla(var(--primary-text-color_hsl), 0.6);
text-align: center;
font-weight: 500;
}
@apply bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center space-y-2 hover:-translate-y-1 transition-transform cursor-pointer;
}
.dashwidgets {

2
app/styles/components/wtf-panel.scss
View file

@ -139,13 +139,13 @@
}
&__expand-btn {
@apply border-gray-300 dark:border-gray-600;
display: block;
width: 100%;
height: 100%;
max-height: 46px;
position: relative;
border-top: 1px solid;
border-color: var(--brand-color--faint);
transition: max-height 150ms ease;
overflow: hidden;
opacity: 1;