Mastodon
/
hyperspace-desktop-client-windows-linux-macos
mirror of https://github.com/hyperspacedev/hyperspace
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #20 from hyperspacedev/profile-buttons 

Make avatars clickable, profile view from search results
This commit is contained in:
Marquis Kurt 2019-04-25 18:22:14 -04:00 committed by GitHub
parent 5cfcf0e306 7d6204452c
commit f89b7fcff3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 74 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Post/Post.tsx
View File

@ -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={

9
src/interfaces/overrides.tsx
View File

@ -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 => (

13
src/pages/About.tsx
View File

@ -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>

6
src/pages/Messages.tsx
View File

@ -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>

24
src/pages/Notifications.tsx
View File

@ -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">

17
src/pages/Recommendations.tsx
View File

@ -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>
);

33
src/pages/Search.tsx
View File

@ -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>
);