Mastodon/hyperspace-desktop-client-windows-linux-macos
1
0
Fork 0
mirror of https://github.com/hyperspacedev/hyperspace synced 2025-02-12 01:30:50 +01:00
Code Issues Releases Wiki Activity

Start React routing

Browse Source
This commit is contained in:
Marquis Kurt 2019-03-26 20:35:30 -04:00
parent c51b80afc3
commit 3e18f24b56
2 changed files with 38 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/App.tsx
View File

@ -4,6 +4,7 @@ import { setHyperspaceTheme } from './utilities/themes';
import { defaultTheme } from './types/HyperspaceTheme'; import { defaultTheme } from './types/HyperspaceTheme';
import AppLayout from './components/AppLayout'; import AppLayout from './components/AppLayout';
import {styles} from './App.styles'; import {styles} from './App.styles';
import {Route} from 'react-router-dom';
const theme = setHyperspaceTheme(defaultTheme); const theme = setHyperspaceTheme(defaultTheme);
@ -15,11 +16,9 @@ class App extends Component<any, any> {
<MuiThemeProvider theme={theme}> <MuiThemeProvider theme={theme}>
<CssBaseline/> <CssBaseline/>
<AppLayout/> <AppLayout/>
<div className={classes.content}> <Route exact path="/"/>
<Typography variant="h3">Welcome to Hyperspace</Typography> <Route path="/home"/>
<br/> <Route path="/local"/>
<Typography paragraph>Here is where routed content should go so that it fits inside of AppLayout.</Typography>
</div>
</MuiThemeProvider> </MuiThemeProvider>
); );
} }

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

@ -1,5 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, Theme, createStyles, withStyles } from '@material-ui/core'; import { Typography, AppBar, Toolbar, IconButton, InputBase, Avatar, ListItemText, Divider, List, ListItem, ListItemIcon, Hidden, Drawer, ListSubheader, ListItemAvatar, withStyles } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu'; import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import NotificationsIcon from '@material-ui/icons/Notifications'; import NotificationsIcon from '@material-ui/icons/Notifications';
@ -13,11 +13,22 @@ import InfoIcon from '@material-ui/icons/Info';
import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle'; import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import {styles} from './AppLayout.styles'; import {styles} from './AppLayout.styles';
import { Link } from 'react-router-dom';
import { ListItemProps } from '@material-ui/core/ListItem';
interface IAppLayoutState { interface IAppLayoutState {
drawerOpenOnMobile: boolean; drawerOpenOnMobile: boolean;
} }
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> { export class AppLayout extends Component<any, IAppLayoutState> {
constructor(props: any) { constructor(props: any) {
super(props); super(props);
@ -58,57 +69,57 @@ export class AppLayout extends Component<any, IAppLayoutState> {
<div> <div>
<List> <List>
<div className={classes.drawerDisplayMobile}> <div className={classes.drawerDisplayMobile}>
<ListItem button key="profile-mobile"> <LinkableListItem button key="profile-mobile" to="/profile">
<ListItemAvatar> <ListItemAvatar>
<Avatar alt="You" src="https://preview.redd.it/9a5zntent0g21.jpg?width=960&crop=smart&auto=webp&s=5668a0a2d3cb52e43a302aa3d0902ae0704c9dc1"/> <Avatar alt="You" src="https://preview.redd.it/9a5zntent0g21.jpg?width=960&crop=smart&auto=webp&s=5668a0a2d3cb52e43a302aa3d0902ae0704c9dc1"/>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="Asriel Dreemurr" secondary="@asriel@dreemurr.io"/> <ListItemText primary="Asriel Dreemurr" secondary="@asriel@dreemurr.io"/>
</ListItem> </LinkableListItem>
<ListItem button key="notifications-mobile"> <LinkableListItem button key="notifications-mobile" to="/notifications">
<ListItemIcon><NotificationsIcon/></ListItemIcon> <ListItemIcon><NotificationsIcon/></ListItemIcon>
<ListItemText primary="Notifications"/> <ListItemText primary="Notifications"/>
</ListItem> </LinkableListItem>
<ListItem button key="messages-mobile"> <LinkableListItem button key="messages-mobile" to="/messages">
<ListItemIcon><MailIcon/></ListItemIcon> <ListItemIcon><MailIcon/></ListItemIcon>
<ListItemText primary="Messages"/> <ListItemText primary="Messages"/>
</ListItem> </LinkableListItem>
<ListItem button key="acctSwitch-module"> <LinkableListItem button key="acctSwitch-module" to="/switchacct">
<ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon> <ListItemIcon><SupervisedUserCircleIcon/></ListItemIcon>
<ListItemText primary="Switch account"/> <ListItemText primary="Switch account"/>
</ListItem> </LinkableListItem>
<ListItem button key="acctLogout-mobile"> <LinkableListItem button key="acctLogout-mobile" to="/logout">
<ListItemIcon><ExitToAppIcon/></ListItemIcon> <ListItemIcon><ExitToAppIcon/></ListItemIcon>
<ListItemText primary="Log out"/> <ListItemText primary="Log out"/>
</ListItem> </LinkableListItem>
<Divider/> <Divider/>
</div> </div>
<ListSubheader>Timelines</ListSubheader> <ListSubheader>Timelines</ListSubheader>
<ListItem button key="home"> <LinkableListItem button key="home" to="/home">
<ListItemIcon><HomeIcon/></ListItemIcon> <ListItemIcon><HomeIcon/></ListItemIcon>
<ListItemText primary="Home"/> <ListItemText primary="Home"/>
</ListItem> </LinkableListItem>
<ListItem button key="local"> <LinkableListItem button key="local" to="/local">
<ListItemIcon><DomainIcon/></ListItemIcon> <ListItemIcon><DomainIcon/></ListItemIcon>
<ListItemText primary="Local"/> <ListItemText primary="Local"/>
</ListItem> </LinkableListItem>
<ListItem button key="public"> <LinkableListItem button key="public" to="/public">
<ListItemIcon><PublicIcon/></ListItemIcon> <ListItemIcon><PublicIcon/></ListItemIcon>
<ListItemText primary="Public"/> <ListItemText primary="Public"/>
</ListItem> </LinkableListItem>
<Divider/> <Divider/>
<ListSubheader>More</ListSubheader> <ListSubheader>More</ListSubheader>
<ListItem button key="recommended"> <LinkableListItem button key="recommended" to="/recommended">
<ListItemIcon><GroupIcon/></ListItemIcon> <ListItemIcon><GroupIcon/></ListItemIcon>
<ListItemText primary="Who to follow"/> <ListItemText primary="Who to follow"/>
</ListItem> </LinkableListItem>
<ListItem button key="settings"> <LinkableListItem button key="settings" to="/settings">
<ListItemIcon><SettingsIcon/></ListItemIcon> <ListItemIcon><SettingsIcon/></ListItemIcon>
<ListItemText primary="Settings"/> <ListItemText primary="Settings"/>
</ListItem> </LinkableListItem>
<ListItem button key="info"> <LinkableListItem button key="info" to="/about">
<ListItemIcon><InfoIcon/></ListItemIcon> <ListItemIcon><InfoIcon/></ListItemIcon>
<ListItemText primary="About"/> <ListItemText primary="About"/>
</ListItem> </LinkableListItem>
</List> </List>
</div> </div>
); );