Update types and finalize design on Activity page
Signed-off-by: Marquis Kurt <software@marquiskurt.net>
This commit is contained in:
Marquis Kurt
parent
78b97b1b82
commit
ea12f53fb2
|
|
@ -3,19 +3,35 @@ import {
|
|||
withStyles,
|
||||
Typography,
|
||||
CircularProgress,
|
||||
ListSubheader
|
||||
ListSubheader,
|
||||
Link,
|
||||
Paper,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
ListItemAvatar,
|
||||
ListItemSecondaryAction,
|
||||
Tooltip,
|
||||
IconButton
|
||||
} from "@material-ui/core";
|
||||
import { styles } from "./PageLayout.styles";
|
||||
import { UAccount, Account } from "../types/Account";
|
||||
import { Tag } from "../types/Tag";
|
||||
import Mastodon from "megalodon";
|
||||
import { LinkableAvatar, LinkableIconButton } from "../interfaces/overrides";
|
||||
import moment from "moment";
|
||||
|
||||
import FireplaceIcon from "@material-ui/icons/Fireplace";
|
||||
import TrendingUpIcon from "@material-ui/icons/TrendingUp";
|
||||
import SearchIcon from "@material-ui/icons/Search";
|
||||
import OpenInNewIcon from "@material-ui/icons/OpenInNew";
|
||||
import AssignmentIndIcon from "@material-ui/icons/AssignmentInd";
|
||||
|
||||
interface IActivityPageState {
|
||||
user?: UAccount;
|
||||
trendingTags?: [Tag];
|
||||
profileDirectory?: [Account];
|
||||
activeProfileDirectory?: [Account];
|
||||
newProfileDirectory?: [Account];
|
||||
viewLoading: boolean;
|
||||
viewLoaded?: boolean;
|
||||
viewErrored?: boolean;
|
||||
|
|
@ -41,7 +57,7 @@ class ActivityPage extends Component<any, IActivityPageState> {
|
|||
this.getAccountData();
|
||||
|
||||
this.client
|
||||
.get("/trends")
|
||||
.get("/trends", { limit: 3 })
|
||||
.then((resp: any) => {
|
||||
let trendingTags: [Tag] = resp.data;
|
||||
this.setState({ trendingTags });
|
||||
|
|
@ -55,11 +71,27 @@ class ActivityPage extends Component<any, IActivityPageState> {
|
|||
});
|
||||
|
||||
this.client
|
||||
.get("/directory", { local: true, order: "active" })
|
||||
.get("/directory", { local: true, order: "active", limit: 5 })
|
||||
.then((resp: any) => {
|
||||
let profileDirectory: [Account] = resp.data;
|
||||
this.setState({
|
||||
profileDirectory,
|
||||
activeProfileDirectory: profileDirectory
|
||||
});
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
this.setState({
|
||||
viewLoading: false,
|
||||
viewErrored: true
|
||||
});
|
||||
console.log(err.message);
|
||||
});
|
||||
|
||||
this.client
|
||||
.get("/directory", { local: true, order: "new", limit: 5 })
|
||||
.then((resp: any) => {
|
||||
let profileDirectory: [Account] = resp.data;
|
||||
this.setState({
|
||||
newProfileDirectory: profileDirectory,
|
||||
viewLoading: false,
|
||||
viewLoaded: true
|
||||
});
|
||||
|
|
@ -117,27 +149,174 @@ class ActivityPage extends Component<any, IActivityPageState> {
|
|||
<ListSubheader>Trending hashtags</ListSubheader>
|
||||
{this.state.trendingTags &&
|
||||
this.state.trendingTags.length > 0 ? (
|
||||
<div></div>
|
||||
<Paper>
|
||||
<List className={classes.pageListConstraints}>
|
||||
{this.state.trendingTags.map((tag: Tag) => (
|
||||
<ListItem
|
||||
id={"trending_tag_" + tag.name}
|
||||
key={"trending_tag_" + tag.name}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<TrendingUpIcon />
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={"#" + tag.name}
|
||||
secondary={
|
||||
tag.history
|
||||
? `${tag.history[0].accounts} people talking in ${tag.history[0].uses} posts`
|
||||
: "Couldn't determine usage"
|
||||
}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="Search">
|
||||
<LinkableIconButton
|
||||
to={`/search?query=tag:${tag.name}`}
|
||||
>
|
||||
<SearchIcon />
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="View on web">
|
||||
<IconButton>
|
||||
<OpenInNewIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</Paper>
|
||||
) : (
|
||||
<Typography paragraph>
|
||||
It looks like there aren't any trending tags on
|
||||
your instance as of right now.
|
||||
</Typography>
|
||||
)}
|
||||
<ListSubheader>
|
||||
Active on profile directory
|
||||
</ListSubheader>
|
||||
{this.state.profileDirectory &&
|
||||
this.state.profileDirectory.length > 0 ? (
|
||||
<div></div>
|
||||
<br />
|
||||
<ListSubheader>Who's been active</ListSubheader>
|
||||
{this.state.activeProfileDirectory &&
|
||||
this.state.activeProfileDirectory.length > 0 ? (
|
||||
<Paper>
|
||||
<List className={classes.pageListConstraints}>
|
||||
{this.state.activeProfileDirectory.map(
|
||||
(account: Account) => (
|
||||
<ListItem
|
||||
key={
|
||||
"account_active_" +
|
||||
account.acct
|
||||
}
|
||||
id={
|
||||
"account_active_" +
|
||||
account.acct
|
||||
}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<LinkableAvatar
|
||||
to={`/profile/${account.id}`}
|
||||
src={
|
||||
account.avatar_static
|
||||
}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
`${account.display_name} (@${account.username})` ||
|
||||
`@${account.username}`
|
||||
}
|
||||
secondary={`Last posted ${moment(
|
||||
account.last_status_at
|
||||
)
|
||||
.startOf("minute")
|
||||
.fromNow()}`}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="View account">
|
||||
<LinkableIconButton
|
||||
to={`/profile/${account.id}`}
|
||||
>
|
||||
<AssignmentIndIcon />
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
)
|
||||
)}
|
||||
</List>
|
||||
</Paper>
|
||||
) : (
|
||||
<Typography paragraph>
|
||||
It looks like there aren't any people in the
|
||||
profile directory yet.
|
||||
It looks like there aren't any active people in
|
||||
the profile directory yet.
|
||||
</Typography>
|
||||
)}
|
||||
<br />
|
||||
<ListSubheader>New arrivals</ListSubheader>
|
||||
{this.state.newProfileDirectory &&
|
||||
this.state.newProfileDirectory.length > 0 ? (
|
||||
<Paper>
|
||||
<List className={classes.pageListConstraints}>
|
||||
{this.state.newProfileDirectory.map(
|
||||
(account: Account) => (
|
||||
<ListItem
|
||||
key={
|
||||
"account_new_" +
|
||||
account.acct
|
||||
}
|
||||
id={
|
||||
"account_new_" +
|
||||
account.acct
|
||||
}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<LinkableAvatar
|
||||
to={`/profile/${account.id}`}
|
||||
src={
|
||||
account.avatar_static
|
||||
}
|
||||
/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText
|
||||
primary={
|
||||
`${account.display_name} (@${account.username})` ||
|
||||
`@${account.username}`
|
||||
}
|
||||
secondary={`Joined ${moment(
|
||||
account.created_at
|
||||
)
|
||||
.startOf("minute")
|
||||
.fromNow()}`}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="View account">
|
||||
<LinkableIconButton
|
||||
to={`/profile/${account.id}`}
|
||||
>
|
||||
<AssignmentIndIcon />
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
)
|
||||
)}
|
||||
</List>
|
||||
</Paper>
|
||||
) : (
|
||||
<Typography paragraph>
|
||||
It looks like there aren't any new arrivals
|
||||
listed in the profile directory yet.
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{this.state.viewErrored ? (
|
||||
<Paper className={classes.errorCard}>
|
||||
<Typography variant="h4">Bummer.</Typography>
|
||||
<Typography variant="h6">
|
||||
Something went wrong when loading instance activity.
|
||||
</Typography>
|
||||
</Paper>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
{this.state.viewLoading ? (
|
||||
<div style={{ textAlign: "center" }}>
|
||||
<CircularProgress
|
||||
|
|
@ -148,6 +327,15 @@ class ActivityPage extends Component<any, IActivityPageState> {
|
|||
) : (
|
||||
<span />
|
||||
)}
|
||||
<br />
|
||||
<div>
|
||||
<Typography variant="caption">
|
||||
Trending hashtags and the profile directory may not
|
||||
appear here if your instance isn't up to date. Check the{" "}
|
||||
<Link href="/#/about">about page</Link> to see if your
|
||||
instance is running the latest version.
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export type Account = {
|
|||
followers_count: number;
|
||||
following_count: number;
|
||||
statuses_count: number;
|
||||
last_status_at: string;
|
||||
note: string;
|
||||
url: string;
|
||||
avatar: string;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
export type History = {
|
||||
day: string;
|
||||
uses: number;
|
||||
accounts: number;
|
||||
};
|
||||
|
|
@ -1,4 +1,7 @@
|
|||
import { History } from "./History";
|
||||
|
||||
export type Tag = {
|
||||
name: string;
|
||||
url: string;
|
||||
history?: [History];
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue