Get some data from Mastodon

This commit is contained in:
Marquis Kurt 2019-03-27 19:24:52 -04:00
parent fec1a94e59
commit 5880abd7ae
10 changed files with 84 additions and 14 deletions

View File

@ -1,7 +1,6 @@
import React, { Component } from 'react';
import {MuiThemeProvider, CssBaseline, withStyles, Typography } from '@material-ui/core';
import { setHyperspaceTheme, darkMode } from './utilities/themes';
import { defaultTheme } from './types/HyperspaceTheme';
import AppLayout from './components/AppLayout';
import {styles} from './App.styles';
import {Route} from 'react-router-dom';
@ -10,7 +9,7 @@ import Settings from './pages/Settings';
import { getUserDefaultBool, getUserDefaultTheme } from './utilities/settings';
let theme = setHyperspaceTheme(getUserDefaultTheme());
console.log(theme);
class App extends Component<any, any> {
constructor(props: any) {

View File

@ -93,7 +93,7 @@ export const styles = (theme: Theme) => createStyles({
},
},
appBarAcctMenuIcon: {
backgroundColor: theme.palette.secondary.main
backgroundColor: theme.palette.primary.dark
},
drawer: {
[theme.breakpoints.up('sm')]: {

View File

@ -15,9 +15,12 @@ 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';
interface IAppLayoutState {
drawerOpenOnMobile: boolean;
currentUser: UAccount;
}
interface ILinkableListItemProps extends ListItemProps {
@ -34,7 +37,8 @@ export class AppLayout extends Component<any, IAppLayoutState> {
super(props);
this.state = {
drawerOpenOnMobile: false
drawerOpenOnMobile: false,
currentUser: getCurrentUserData()
}
this.toggleDrawerOnMobile = this.toggleDrawerOnMobile.bind(this);
@ -71,9 +75,9 @@ export class AppLayout extends Component<any, IAppLayoutState> {
<div className={classes.drawerDisplayMobile}>
<LinkableListItem button key="profile-mobile" to="/profile">
<ListItemAvatar>
<Avatar alt="You" src="https://preview.redd.it/9a5zntent0g21.jpg?width=960&crop=smart&auto=webp&s=5668a0a2d3cb52e43a302aa3d0902ae0704c9dc1"/>
<Avatar alt="You" src={this.state.currentUser.avatar_static}/>
</ListItemAvatar>
<ListItemText primary="Asriel Dreemurr" secondary="@asriel@dreemurr.io"/>
<ListItemText primary={this.state.currentUser.display_name} secondary={this.state.currentUser.acct}/>
</LinkableListItem>
<LinkableListItem button key="notifications-mobile" to="/notifications">
<ListItemIcon><NotificationsIcon/></ListItemIcon>
@ -166,7 +170,7 @@ export class AppLayout extends Component<any, IAppLayoutState> {
<MailIcon/>
</IconButton>
<IconButton>
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src="https://preview.redd.it/9a5zntent0g21.jpg?width=960&crop=smart&auto=webp&s=5668a0a2d3cb52e43a302aa3d0902ae0704c9dc1"/>
<Avatar className={classes.appBarAcctMenuIcon} alt="You" src={this.state.currentUser.avatar_static}/>
</IconButton>
</div>
</Toolbar>

View File

@ -18,8 +18,27 @@ 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';
class AboutPage extends Component<any, any> {
interface IAboutPageState {
instance: Instance;
}
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);
this.setState({
instance: data
});
})
}
render() {
const { classes } = this.props;
@ -34,7 +53,7 @@ class AboutPage extends Component<any, any> {
<DomainIcon/>
</Avatar>
</ListItemAvatar>
<ListItemText primary="Instance location (URL)" secondary="dreemurr.io"/>
<ListItemText primary="Instance location (URL)" secondary={this.state ? this.state.instance.uri: "Couldn't determine location"}/>
<ListItemSecondaryAction>
<IconButton>
<OpenInNewIcon/>
@ -43,9 +62,12 @@ class AboutPage extends Component<any, any> {
</ListItem>
<ListItem>
<ListItemAvatar>
<Avatar alt="Instance admin" src="https://preview.redd.it/wkdcm71za0i21.jpg?auto=webp&s=a59ce15710bf3bf5ab74bcce9d86055fd97c6102"/>
<Avatar alt="Instance admin" src={this.state? this.state.instance.contact_account.avatar_static: ""}/>
</ListItemAvatar>
<ListItemText primary="Instance admin" secondary="Toriel (@toriel)"/>
<ListItemText primary="Instance admin" secondary={
this.state ? `${this.state.instance.contact_account.display_name} (@${this.state.instance.contact_account.acct})`:
"Couldn't determine admin"
}/>
<ListItemSecondaryAction>
<IconButton>
<ChatIcon/>

View File

@ -106,10 +106,10 @@ class SettingsPage extends Component<any, ISettingsState> {
</RadioGroup>
</DialogContent>
<DialogActions>
<Button onClick={this.toggleThemeDialog} color="primary">
<Button onClick={this.toggleThemeDialog} color="default">
Cancel
</Button>
<Button onClick={this.changeTheme} color="primary">
<Button onClick={this.changeTheme} color="secondary">
Ok
</Button>
</DialogActions>

View File

@ -24,4 +24,10 @@ export type Account = {
moved: Account | null;
fields: [Field];
bot: boolean | null;
}
export type UAccount = {
acct: string;
display_name: string;
avatar_static: string;
}

15
src/types/Instance.tsx Normal file
View File

@ -0,0 +1,15 @@
import { Field } from "./Field";
import { Account } from "./Account";
export type Instance = {
uri: string;
title: string;
description: string;
email: string;
version: string;
thumbnail: string | null;
urls: Field;
stats: Field;
languages: [string];
contact_account: Account;
}

View File

@ -0,0 +1,16 @@
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;
}

View File

@ -0,0 +1,9 @@
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;
}

View File

@ -37,7 +37,6 @@ export function setUserDefaultBool(key: string, value: boolean) {
* Gets the user's default theme or the default theme
*/
export function getUserDefaultTheme() {
console.log(localStorage.getItem('theme'));
let returnTheme = defaultTheme;
themes.forEach((theme) => {
if(theme.key === localStorage.getItem('theme')) {