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

Work on fetching instance info

This commit is contained in:
Marquis Kurt 2019-03-27 22:01:55 -04:00
parent 5880abd7ae
commit 8c4aebf4c5
9 changed files with 78 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.tsx
View File

@ -37,8 +37,8 @@ class App extends Component<any, any> {
<Route path="/public"/>
<Route path="/messages"/>
<Route path="/notifications"/>
<Route path="/profile"/>
<Route path="/conversation"/>
<Route path="/profile/:profileId"/>
<Route path="/conversation/:conversationId"/>
<Route path="/settings" component={Settings}/>
<Route path="/about" component={AboutPage}/>
</MuiThemeProvider>

3
src/components/AppLayout/AppLayout.styles.tsx
View File

@ -94,6 +94,9 @@ export const styles = (theme: Theme) => createStyles({
},
appBarAcctMenuIcon: {
backgroundColor: theme.palette.primary.dark
},
acctMenu: {
},
drawer: {
[theme.breakpoints.up('sm')]: {

56
src/components/AppLayout/AppLayout.tsx
View File

@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles } from '@material-ui/core';
import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles, Menu, MenuItem, ClickAwayListener } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import NotificationsIcon from '@material-ui/icons/Notifications';
@ -13,35 +13,33 @@ import InfoIcon from '@material-ui/icons/Info';
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import {styles} from './AppLayout.styles';
import { Link } from 'react-router-dom';
import { ListItemProps } from '@material-ui/core/ListItem';
import { getCurrentUserData } from '../../utilities/accounts';
import { UAccount } from '../../types/Account';
import {LinkableListItem, LinkableIconButton} from '../../interfaces/overrides';
interface IAppLayoutState {
acctMenuOpen: boolean;
drawerOpenOnMobile: boolean;
currentUser: UAccount;
}
interface ILinkableListItemProps extends ListItemProps {
to: string;
replace?: boolean;
}
const LinkableListItem = (props: ILinkableListItemProps) => (
<ListItem {...props} component={Link as any}/>
)
export class AppLayout extends Component<any, IAppLayoutState> {
constructor(props: any) {
super(props);
let accountData = JSON.parse(localStorage.getItem('account') as string);
this.state = {
drawerOpenOnMobile: false,
currentUser: getCurrentUserData()
acctMenuOpen: false,
currentUser: accountData
}
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
this.toggleAcctMenu = this.toggleAcctMenu.bind(this);
}
toggleAcctMenu() {
this.setState({ acctMenuOpen: !this.state.acctMenuOpen });
}
toggleDrawerOnMobile() {
@ -73,7 +71,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
<div>
<List>
<div className={classes.drawerDisplayMobile}>
<LinkableListItem button key="profile-mobile" to="/profile">
<LinkableListItem button key="profile-mobile" to={`/profile/${this.state.currentUser.id}`}>
<ListItemAvatar>
<Avatar alt="You" src={this.state.currentUser.avatar_static}/>
</ListItemAvatar>
@ -163,15 +161,33 @@ export class AppLayout extends Component<any, IAppLayoutState> {
</div>
<div className={classes.appBarFlexGrow}/>
<div className={classes.appBarActionButtons}>
<IconButton color="inherit">
<LinkableIconButton color="inherit" to="/notifications">
<NotificationsIcon/>
</IconButton>
<IconButton color="inherit">
</LinkableIconButton>
<LinkableIconButton color="inherit" to="/messages">
<MailIcon/>
</IconButton>
<IconButton>
</LinkableIconButton>
<IconButton id="acctMenuBtn" onClick={this.toggleAcctMenu}>
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser.avatar_static}/>
</IconButton>
<Menu
id="acct-menu"
anchorEl={document.getElementById("acctMenuBtn")}
open={this.state.acctMenuOpen}
className={classes.acctMenu}
>
<ClickAwayListener onClickAway={this.toggleAcctMenu}>
<LinkableListItem to={`/profile/${this.state.currentUser.id}`}>
<ListItemAvatar>
<Avatar alt="You" src={this.state.currentUser.avatar_static}/>
</ListItemAvatar>
<ListItemText primary={this.state.currentUser.display_name} secondary={this.state.currentUser.acct}/>
</LinkableListItem>
<Divider/>
<MenuItem>Switch account</MenuItem>
<MenuItem>Log out</MenuItem>
</ClickAwayListener>
</Menu>
</div>
</Toolbar>
</AppBar>

22
src/interfaces/overrides.tsx Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import ListItem, { ListItemProps } from "@material-ui/core/ListItem";
import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
import { Link } from "react-router-dom";
export interface ILinkableListItemProps extends ListItemProps {
to: string;
replace?: boolean;
}
export interface ILinkableIconButtonProps extends IconButtonProps {
to: string;
replace?: boolean;
}
export const LinkableListItem = (props: ILinkableListItemProps) => (
<ListItem {...props} component={Link as any}/>
)
export const LinkableIconButton = (props: ILinkableIconButtonProps) => (
<IconButton {...props} component={Link as any}/>
)

27
src/pages/About.tsx
View File

@ -18,25 +18,26 @@ import DomainIcon from '@material-ui/icons/Domain';
import ChatIcon from '@material-ui/icons/Chat';
import PersonIcon from '@material-ui/icons/Person';
import {styles} from './PageLayout.styles';
import {getCurrentInstanceData} from '../utilities/instances';
import {Instance} from '../types/Instance';
import {LinkableIconButton} from '../interfaces/overrides';
import Mastodon from 'megalodon';
interface IAboutPageState {
instance: Instance;
instance: Instance | any;
}
class AboutPage extends Component<any, IAboutPageState> {
constructor(props: any) {
super(props);
}
let instance = getCurrentInstanceData();
instance.then((resp: any) => {
let data: Instance = resp.data;
console.log("From response: " + data);
componentWillMount() {
let client = new Mastodon(localStorage.getItem('account_token') as string, localStorage.getItem('baseurl') + "/api/v1");
client.get('/instance').then((resp: any) => {
this.setState({
instance: data
});
instance: resp.data
})
})
}
@ -53,9 +54,9 @@ class AboutPage extends Component<any, IAboutPageState> {
<DomainIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Instance location (URL)" secondary={this.state ? this.state.instance.uri: "Couldn't determine location"}/>
<ListItemText primary="Instance location (URL)" secondary={this.state ? this.state.instance.uri: "Loading..."}/>
<ListItemSecondaryAction>
<IconButton>
<IconButton href={localStorage.getItem("baseurl") as string} target="_blank" rel="noreferrer">
<OpenInNewIcon/>
</IconButton>
</ListItemSecondaryAction>
@ -66,15 +67,15 @@ class AboutPage extends Component<any, IAboutPageState> {
</ListItemAvatar>
<ListItemText primary="Instance admin" secondary={
this.state ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
"Couldn't determine admin"
"Loading..."
}/>
<ListItemSecondaryAction>
<IconButton>
<ChatIcon/>
</IconButton>
<IconButton>
<LinkableIconButton to={`/profile/${this.state? this.state.instance.contact_account.id: 0}`}>
<PersonIcon/>
</IconButton>
</LinkableIconButton>
</ListItemSecondaryAction>
</ListItem>
</List>

14
src/tests/App.test.tsx
View File

@ -1,14 +0,0 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from '../App';
import { HashRouter } from 'react-router-dom';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(
<HashRouter>
<App />
</HashRouter>
, div);
ReactDOM.unmountComponentAtNode(div);
});

1
src/types/Account.tsx
View File

@ -27,6 +27,7 @@ export type Account = {
}
export type UAccount = {
id: string;
acct: string;
display_name: string;
avatar_static: string;

16
src/utilities/accounts.tsx
View File

@ -1,16 +0,0 @@
import Mastodon from 'megalodon';
import { Account, UAccount } from '../types/Account';
export function getCurrentUserData() {
let currentData: Account = JSON.parse(localStorage.getItem('account') as string);
if (currentData === null) {
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1/");
client.get('/account/verify_credentials').then((resp: any) => { let acct: Account = resp.data; currentData = acct; return acct; });
}
let account: UAccount = {
acct: "@" + currentData.acct,
display_name: currentData.display_name || "@" + currentData.acct,
avatar_static: currentData.avatar_static
}
return account;
}

9
src/utilities/instances.tsx
View File

@ -1,9 +0,0 @@
import Mastodon from 'megalodon';
import { Instance } from '../types/Instance';
export function getCurrentInstanceData() {
let instance;
let client = new Mastodon(localStorage.getItem('access_token') as string, localStorage.getItem('baseurl') as string + "/api/v1/");
instance = client.get<Instance>('/instance');
return instance;
}