Skip to content

Commit

Permalink
Merge pull request #4 from surgioproject/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@geekdada
geekdada authored Mar 10, 2020
2 parents f05420f + d4592dd commit ed1d6f8
Show file tree
Hide file tree
Showing 19 changed files with 1,104 additions and 505 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@types/node-fetch": "^2.5.5",
"@types/nunjucks": "^3.1.3",
"@types/passport-local": "^1.0.33",
"@types/qrcode.react": "^1.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
"@types/react-router-dom": "^5.1.3",
Expand All @@ -51,6 +52,7 @@
"notistack": "^0.9.8",
"npm-run-all": "^4.1.5",
"postcss-import": "^12.0.1",
"qrcode.react": "^1.0.0",
"react": "^16.12.0",
"react-clipboard.js": "^2.0.16",
"react-dom": "^16.12.0",
Expand Down
149 changes: 89 additions & 60 deletions packages/gateway-frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { observer } from 'mobx-react';
import { SnackbarProvider } from 'notistack';
import clsx from 'clsx';
import {
BrowserRouter as Router,
Switch,
Route,
Link as RouterLink,
LinkProps as RouterLinkProps,
Redirect,
useLocation,
} from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
Expand All @@ -31,6 +31,7 @@ import { makeStyles, useTheme, Theme, createStyles } from '@material-ui/core/sty
import loadable from '@loadable/component';

import './App.css';
import useNavElements from './hooks/useNavElements';
import { defaultFetcher } from './libs/utils';
import { useStores } from './stores';
import { Config } from './stores/config';
Expand All @@ -41,12 +42,18 @@ const ArtifactListPage = loadable(() => import('./pages/ArtifactList'), {});
const ProviderListPage = loadable(() => import('./pages/ProviderList'), {});
const HomePage = loadable(() => import('./pages/Home'), {});
const AuthPage = loadable(() => import('./pages/Auth'), {});
const EmbedArtifactPage = loadable(() => import('./pages/embeds/Artifact'), {});

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
noDrawer: {
'& > main': {
width: '100%',
},
},
drawer: {
[theme.breakpoints.up('md')]: {
width: drawerWidth,
Expand Down Expand Up @@ -108,14 +115,26 @@ export default observer((props: ResponsiveDrawerProps) => {
const classes = useStyles();
const theme = useTheme();
const stores = useStores();
const isShowNavElements = useNavElements();
const location = useLocation();
const [mobileOpen, setMobileOpen] = React.useState(false);

const handleDrawerToggle = () => {
setMobileOpen(!mobileOpen);
};

const validateAuth = () => {
return defaultFetcher<{accessToken?: string}>('/api/auth/validate');
const search = new URLSearchParams(location.search);

if (search.get('access_token')) {
stores.config.updateConfig({
accessToken: search.get('access_token'),
});

return defaultFetcher<{accessToken?: string}>('/api/auth/validate-token');
}

return defaultFetcher<{accessToken?: string}>('/api/auth/validate-cookie');
};

const updateConfig = () => {
Expand Down Expand Up @@ -172,71 +191,78 @@ export default observer((props: ResponsiveDrawerProps) => {
);

return (
<Router>
<>
<SnackbarProvider maxSnack={3}>
<CssBaseline />

<div className={clsx(classes.root, 'app-root')}>
<div className={clsx(classes.root, 'app-root', !isShowNavElements && classes.noDrawer)}>
{ stores.config.isReady && (
<>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap className={classes.pageTitle}>
<Link component={RouterLink} to="/">
Surgio Dashboard
</Link>
</Typography>
<div>
<Link href="https://github.com/geekdada/surgio"
rel="noopener noreferrer"
target="_blank">
<GitHubIcon className={classes.appBarIcons} />
</Link>
</div>
</Toolbar>
</AppBar>
{
isShowNavElements && (
<>
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
onClick={handleDrawerToggle}
className={classes.menuButton}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" noWrap className={classes.pageTitle}>
<Link component={RouterLink} to="/">
Surgio Dashboard
</Link>
</Typography>
<div>
<Link href="https://github.com/geekdada/surgio"
rel="noopener noreferrer"
target="_blank">
<GitHubIcon className={classes.appBarIcons} />
</Link>
</div>
</Toolbar>
</AppBar>

<nav className={classes.drawer} aria-label="folders">
<Hidden lgUp>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden smDown>
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
<nav className={classes.drawer} aria-label="folders">
<Hidden lgUp>
<Drawer
container={container}
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
</Hidden>
<Hidden smDown>
<Drawer
classes={{
paper: classes.drawerPaper,
}}
variant="permanent"
open
>
{drawer}
</Drawer>
</Hidden>
</nav>
</>
)
}

<main className={classes.content}>
<div className={classes.toolbar} />
{ isShowNavElements && <div className={classes.toolbar} /> }

<Switch>
<Route path="/list-artifact">
<Redirect to="/artifacts" />
Expand All @@ -250,6 +276,9 @@ export default observer((props: ResponsiveDrawerProps) => {
<Route path="/auth">
<AuthPage />
</Route>
<Route path="/embed/artifact/:artifactName">
<EmbedArtifactPage />
</Route>
<Route exact path="/">
<HomePage />
</Route>
Expand All @@ -262,7 +291,7 @@ export default observer((props: ResponsiveDrawerProps) => {
) }
</div>
</SnackbarProvider>
</Router>
</>
);
});

Expand Down
20 changes: 10 additions & 10 deletions ...c/components/ActionButtons/index.test.tsx → ...ents/ArtifactActionButtons/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import React from 'react';
import { ArtifactConfig } from 'surgio/build/types';
import { CATEGORIES } from 'surgio/build/utils/constant';

import ActionButtons from './';
import ArtifactActionButtons from './';

describe('<ActionButtons />', () => {
describe('<ArtifactActionButtons />', () => {
test('renders empty component', () => {
const artifact = generateArtifact();
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(getByTestId('action-buttons').innerHTML).toBe('');
});
Expand All @@ -17,7 +17,7 @@ describe('<ActionButtons />', () => {
const artifact = generateArtifact({
name: 'Surge.conf',
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('action-buttons')?.querySelector('a')?.textContent
Expand All @@ -32,7 +32,7 @@ describe('<ActionButtons />', () => {
CATEGORIES.SURGE,
]
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('action-buttons')?.querySelector('a')?.textContent
Expand All @@ -44,7 +44,7 @@ describe('<ActionButtons />', () => {
const artifact = generateArtifact({
name: 'Clash.conf',
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('action-buttons')?.querySelector('a')?.textContent
Expand All @@ -59,7 +59,7 @@ describe('<ActionButtons />', () => {
CATEGORIES.CLASH,
]
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('action-buttons')?.querySelector('a')?.textContent
Expand All @@ -74,7 +74,7 @@ describe('<ActionButtons />', () => {
CATEGORIES.QUANTUMULT_X_SERVER,
]
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('quanx-server-remote')
Expand All @@ -89,7 +89,7 @@ describe('<ActionButtons />', () => {
CATEGORIES.QUANTUMULT_X_FILTER,
]
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('quanx-filter-remote')
Expand All @@ -104,7 +104,7 @@ describe('<ActionButtons />', () => {
CATEGORIES.QUANTUMULT_X_REWRITE,
]
});
const { getByTestId } = render(<ActionButtons artifact={artifact} />);
const { getByTestId } = render(<ArtifactActionButtons artifact={artifact} />);

expect(
getByTestId('quanx-rewrite-remote')
Expand Down
10 changes: 5 additions & 5 deletions ...nd/src/components/ActionButtons/index.tsx → ...omponents/ArtifactActionButtons/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,18 @@ import { JsonObject } from 'type-fest';
import { getDownloadUrl } from '../../libs/utils';
import { useStores } from '../../stores';

export interface ActionButtonsProps {
export interface ArtifactActionButtonsProps {
artifact: ArtifactConfig;
}

const useStyles = makeStyles((theme: Theme) =>
createStyles({
ActionButtons: {},
ArtifactActionButtons: {},
actionButton: {}
}),
);

function ActionButtons({ artifact }: ActionButtonsProps) {
function ArtifactActionButtons({ artifact }: ArtifactActionButtonsProps) {
const classes = useStyles();
const { config: configStore } = useStores();
const previewUrl = getDownloadUrl(artifact.name, true, configStore.config.accessToken);
Expand Down Expand Up @@ -145,12 +145,12 @@ function ActionButtons({ artifact }: ActionButtonsProps) {

return (
<div data-testid="action-buttons"
className={classes.ActionButtons}>
className={classes.ArtifactActionButtons}>
<SurgeButtons />
<ClashButtons />
<QuantumultXButtons />
</div>
);
}

export default observer(ActionButtons);
export default observer(ArtifactActionButtons);
Loading

0 comments on commit ed1d6f8

Please sign in to comment.