Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev #4

Merged
merged 8 commits into from
Mar 10, 2020
Merged

Dev #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ac569b4
chore: rename component
geekdada Mar 9, 2020
b8aecb7
deps: upgrade
geekdada Mar 9, 2020
55c8916
feat: artifact 增加二维码按钮
geekdada Mar 9, 2020
93eba45
feat: embed 模式的 artifact 页面
geekdada Mar 9, 2020
c030895
feat: Artifact embed 页面
geekdada Mar 9, 2020
c7253ee
feat: 方便获取 Embed 代码
geekdada Mar 10, 2020
fe4094a
test: update
geekdada Mar 10, 2020
d4592dd
test: update snapshot
geekdada Mar 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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