mirror of
https://github.com/hyperspacedev/hyperspace
synced 2025-01-31 01:29:37 +01:00
Merge pull request #20 from hyperspacedev/profile-buttons
Make avatars clickable, profile view from search results
This commit is contained in:
Marquis Kurt
GitHub
commit
f89b7fcff3
@ -21,11 +21,11 @@ import { Visibility } from '../../types/Visibility';
|
||||
import moment from 'moment';
|
||||
import AttachmentComponent from '../Attachment';
|
||||
import Mastodon from 'megalodon';
|
||||
import { LinkableChip, LinkableMenuItem, LinkableIconButton } from '../../interfaces/overrides';
|
||||
import { LinkableChip, LinkableMenuItem, LinkableIconButton, LinkableAvatar } from '../../interfaces/overrides';
|
||||
import {withSnackbar} from 'notistack';
|
||||
import ShareMenu from './PostShareMenu';
|
||||
import {emojifyString} from '../../utilities/emojis';
|
||||
import { PollOption, Poll } from '../../types/Poll';
|
||||
import { PollOption } from '../../types/Poll';
|
||||
|
||||
interface IPostProps {
|
||||
post: Status;
|
||||
@ -445,7 +445,7 @@ export class Post extends React.Component<any, IPostState> {
|
||||
<Zoom in={true}>
|
||||
<Card className={classes.post} id={`post_${post.id}`}>
|
||||
<CardHeader avatar={
|
||||
<Avatar src={
|
||||
<LinkableAvatar to={`/profile/${post.reblog? post.reblog.account.id: post.account.id}`} src={
|
||||
post.reblog? post.reblog.account.avatar_static: post.account.avatar_static
|
||||
} />
|
||||
} action={
|
||||
|
||||
@ -7,6 +7,7 @@ import { MenuItemProps } from '@material-ui/core/MenuItem';
|
||||
import { MenuItem } from '@material-ui/core';
|
||||
import Button, { ButtonProps } from '@material-ui/core/Button';
|
||||
import Fab, { FabProps } from '@material-ui/core/Fab';
|
||||
import Avatar, { AvatarProps } from '@material-ui/core/Avatar';
|
||||
import { userLoggedIn } from '../utilities/accounts';
|
||||
|
||||
export interface ILinkableListItemProps extends ListItemProps {
|
||||
@ -39,6 +40,11 @@ export interface ILinkableFabProps extends FabProps {
|
||||
replace?: boolean;
|
||||
}
|
||||
|
||||
export interface ILinkableAvatarProps extends AvatarProps {
|
||||
to: string;
|
||||
replace?: boolean;
|
||||
}
|
||||
|
||||
export const LinkableListItem = (props: ILinkableListItemProps) => (
|
||||
<ListItem {...props} component={Link as any}/>
|
||||
)
|
||||
@ -62,6 +68,9 @@ export const LinkableButton = (props: ILinkableButtonProps) => (
|
||||
export const LinkableFab = (props: ILinkableFabProps) => (
|
||||
<Fab {...props} component={Link as any}/>
|
||||
)
|
||||
export const LinkableAvatar = (props: ILinkableAvatarProps) => (
|
||||
<Avatar {...props} component={Link as any}/>
|
||||
)
|
||||
|
||||
export const ProfileRoute = (rest: any, component: Component) => (
|
||||
<Route {...rest} render={props => (
|
||||
|
||||
@ -18,6 +18,7 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
|
||||
import DomainIcon from '@material-ui/icons/Domain';
|
||||
import ChatIcon from '@material-ui/icons/Chat';
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||
import NetworkCheckIcon from '@material-ui/icons/NetworkCheck';
|
||||
import UpdateIcon from '@material-ui/icons/Update';
|
||||
import InfoIcon from '@material-ui/icons/Info';
|
||||
@ -25,7 +26,7 @@ import NotesIcon from '@material-ui/icons/Notes';
|
||||
import CodeIcon from '@material-ui/icons/Code';
|
||||
import {styles} from './PageLayout.styles';
|
||||
import {Instance} from '../types/Instance';
|
||||
import {LinkableIconButton} from '../interfaces/overrides';
|
||||
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
|
||||
import Mastodon from 'megalodon';
|
||||
import { UAccount } from '../types/Account';
|
||||
import { getConfig } from '../utilities/settings';
|
||||
@ -114,7 +115,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt="Instance admin" src={this.state.instance? this.state.instance.contact_account.avatar_static: ""}/>
|
||||
<LinkableAvatar to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`} alt="Instance admin" src={this.state.instance? this.state.instance.contact_account.avatar_static: ""}/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="Instance admin" secondary={
|
||||
this.state.instance ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
|
||||
@ -128,7 +129,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||
</Tooltip>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${this.state.instance? this.state.instance.contact_account.id: 0}`}>
|
||||
<PersonIcon/>
|
||||
<AssignmentIndIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
@ -193,9 +194,9 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||
<List>
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
|
||||
<LinkableAvatar to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`} src={this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.avatar_static: ""}>
|
||||
<PersonIcon/>
|
||||
</Avatar>
|
||||
</LinkableAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary="App provider" secondary={this.state.hyperspaceAdmin && this.state.hyperspaceAdminName? (this.state.hyperspaceAdminName || this.state.hyperspaceAdmin.display_name || "@" + this.state.hyperspaceAdmin.acct): "No provider set in config"}/>
|
||||
<ListItemSecondaryAction>
|
||||
@ -206,7 +207,7 @@ class AboutPage extends Component<any, IAboutPageState> {
|
||||
</Tooltip>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${this.state.hyperspaceAdmin? this.state.hyperspaceAdmin.id: 0}`}>
|
||||
<PersonIcon/>
|
||||
<AssignmentIndIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
|
||||
@ -5,7 +5,7 @@ import ForumIcon from '@material-ui/icons/Forum';
|
||||
import {styles} from './PageLayout.styles';
|
||||
import Mastodon from 'megalodon';
|
||||
import { Status } from '../types/Status';
|
||||
import { LinkableIconButton } from '../interfaces/overrides';
|
||||
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||
|
||||
interface IMessagesState {
|
||||
posts?: [Status];
|
||||
@ -73,9 +73,9 @@ class MessagesPage extends Component<any, IMessagesState> {
|
||||
return (
|
||||
<ListItem>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={message.account.username} src={message.account.avatar_static}>
|
||||
<LinkableAvatar to={`/profile/${message.account.id}`} alt={message.account.username} src={message.account.avatar_static}>
|
||||
<PersonIcon/>
|
||||
</Avatar>
|
||||
</LinkableAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={message.account.display_name || "@" + message.account.acct} secondary={this.removeHTMLContent(message.content)}/>
|
||||
<ListItemSecondaryAction>
|
||||
|
||||
@ -20,11 +20,12 @@ import {
|
||||
DialogActions,
|
||||
Tooltip
|
||||
} from '@material-ui/core';
|
||||
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||
import DeleteIcon from '@material-ui/icons/Delete';
|
||||
import {styles} from './PageLayout.styles';
|
||||
import {LinkableIconButton} from '../interfaces/overrides';
|
||||
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||
import ForumIcon from '@material-ui/icons/Forum';
|
||||
import Mastodon from 'megalodon';
|
||||
import { Notification } from '../types/Notification';
|
||||
@ -147,9 +148,9 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
|
||||
return (
|
||||
<ListItem key={notif.id}>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={notif.account.username} src={notif.account.avatar_static}>
|
||||
<LinkableAvatar alt={notif.account.username} src={notif.account.avatar_static} to={`/profile/${notif.account.id}`}>
|
||||
<PersonIcon/>
|
||||
</Avatar>
|
||||
</LinkableAvatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={primary} secondary={
|
||||
<span>
|
||||
@ -164,11 +165,18 @@ class NotificationsPage extends Component<any, INotificationsPageState> {
|
||||
<ListItemSecondaryAction>
|
||||
{
|
||||
notif.type === "follow"?
|
||||
<Tooltip title="Follow account">
|
||||
<IconButton onClick={() => this.followMember(notif.account)}>
|
||||
<PersonAddIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>:
|
||||
<span>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${notif.account.id}`}>
|
||||
<AssignmentIndIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Follow account">
|
||||
<IconButton onClick={() => this.followMember(notif.account)}>
|
||||
<PersonAddIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</span>:
|
||||
|
||||
notif.status?
|
||||
<Tooltip title="View conversation">
|
||||
|
||||
@ -3,8 +3,9 @@ import {withStyles, Typography, List, ListItem, Paper, ListItemText, Avatar, Lis
|
||||
import {styles} from './PageLayout.styles';
|
||||
import Mastodon from 'megalodon';
|
||||
import {Account} from '../types/Account';
|
||||
import { LinkableIconButton } from '../interfaces/overrides';
|
||||
import { LinkableIconButton, LinkableAvatar } from '../interfaces/overrides';
|
||||
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
|
||||
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||
import CheckIcon from '@material-ui/icons/Check';
|
||||
import CloseIcon from '@material-ui/icons/Close';
|
||||
@ -120,7 +121,7 @@ class RecommendationsPage extends Component<IRecommendationsPageProps, IRecommen
|
||||
return (
|
||||
<ListItem key={request.id}>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={request.username} src={request.avatar_static}/>
|
||||
<LinkableAvatar to={`/profile/${request.id}`} alt={request.username} src={request.avatar_static}/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={request.display_name || request.acct} secondary={request.acct}/>
|
||||
<ListItemSecondaryAction>
|
||||
@ -164,20 +165,20 @@ class RecommendationsPage extends Component<IRecommendationsPageProps, IRecommen
|
||||
return (
|
||||
<ListItem key={suggestion.id}>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={suggestion.username} src={suggestion.avatar_static}/>
|
||||
<LinkableAvatar to={`/profile/${suggestion.id}`} alt={suggestion.username} src={suggestion.avatar_static}/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={suggestion.display_name || suggestion.acct} secondary={suggestion.acct}/>
|
||||
<ListItemSecondaryAction>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${suggestion.id}`}>
|
||||
<AssignmentIndIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Follow">
|
||||
<IconButton onClick={() => this.followMember(suggestion)}>
|
||||
<PersonAddIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${suggestion.id}`}>
|
||||
<AccountCircleIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
|
||||
@ -10,11 +10,15 @@ import {
|
||||
Paper,
|
||||
withStyles,
|
||||
Typography,
|
||||
CircularProgress
|
||||
CircularProgress,
|
||||
Tooltip,
|
||||
IconButton
|
||||
} from '@material-ui/core';
|
||||
import PersonIcon from '@material-ui/icons/Person';
|
||||
import AssignmentIndIcon from '@material-ui/icons/AssignmentInd';
|
||||
import PersonAddIcon from '@material-ui/icons/PersonAdd';
|
||||
import {styles} from './PageLayout.styles';
|
||||
import {LinkableIconButton} from '../interfaces/overrides';
|
||||
import {LinkableIconButton, LinkableAvatar} from '../interfaces/overrides';
|
||||
import Mastodon from 'megalodon';
|
||||
import {parse as parseParams, ParsedQuery} from 'query-string';
|
||||
import { Results } from '../types/Search';
|
||||
@ -145,6 +149,16 @@ class SearchPage extends Component<any, ISearchPageState> {
|
||||
});
|
||||
}
|
||||
|
||||
followMemberFromQuery(acct: Account) {
|
||||
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') + "/api/v1");
|
||||
client.post(`/accounts/${acct.id}/follow`).then((resp: any) => {
|
||||
this.props.enqueueSnackbar('You are now following this account.');
|
||||
}).catch((err: Error) => {
|
||||
this.props.enqueueSnackbar("Couldn't follow account: " + err.name, { variant: 'error' });
|
||||
console.error(err.message);
|
||||
})
|
||||
}
|
||||
|
||||
showAllAccountsFromQuery() {
|
||||
const { classes } = this.props;
|
||||
return (
|
||||
@ -158,13 +172,20 @@ class SearchPage extends Component<any, ISearchPageState> {
|
||||
return (
|
||||
<ListItem key={acct.id}>
|
||||
<ListItemAvatar>
|
||||
<Avatar alt={acct.username} src={acct.avatar_static}/>
|
||||
<LinkableAvatar to={`/profile/${acct.id}`} alt={acct.username} src={acct.avatar_static}/>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={acct.display_name || acct.acct} secondary={acct.acct}/>
|
||||
<ListItemSecondaryAction>
|
||||
<LinkableIconButton to={`/profile/${acct.id}`}>
|
||||
<PersonIcon/>
|
||||
</LinkableIconButton>
|
||||
<Tooltip title="View profile">
|
||||
<LinkableIconButton to={`/profile/${acct.id}`}>
|
||||
<AssignmentIndIcon/>
|
||||
</LinkableIconButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="Follow">
|
||||
<IconButton onClick={() => this.followMemberFromQuery(acct)}>
|
||||
<PersonAddIcon/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItem>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user