feat core react: Add SubNavigation and Routes to components
This commit is contained in:
prplwtf
parent
b55b4c9198
commit
2b649f9f74
11 changed files with 312 additions and 0 deletions
14
blueprint.sh
14
blueprint.sh
|
|
@ -640,6 +640,13 @@ if [[ ( $2 == "-i" ) || ( $2 == "-install" ) ]]; then VCMD="y"
|
|||
PLACE_REACT "$Components_Navigation_NavigationBar_BeforeNavigation" "Navigation/NavigationBar/BeforeNavigation.tsx" "$OldComponents_Navigation_NavigationBar_BeforeNavigation"
|
||||
PLACE_REACT "$Components_Navigation_NavigationBar_AdditionalItems" "Navigation/NavigationBar/AdditionalItems.tsx" "$OldComponents_Navigation_NavigationBar_AdditionalItems"
|
||||
PLACE_REACT "$Components_Navigation_NavigationBar_AfterNavigation" "Navigation/NavigationBar/AfterNavigation.tsx" "$OldComponents_Navigation_NavigationBar_AfterNavigation"
|
||||
PLACE_REACT "$Components_Navigation_SubNavigation_BeforeSubNavigation" "Navigation/SubNavigation/BeforeSubNavigation.tsx" "$OldComponents_Navigation_SubNavigation_BeforeSubNavigation"
|
||||
PLACE_REACT "$Components_Navigation_SubNavigation_AdditionalServerItems" "Navigation/SubNavigation/AdditionalServerItems.tsx" "$OldComponents_Navigation_SubNavigation_AdditionalServerItems"
|
||||
PLACE_REACT "$Components_Navigation_SubNavigation_AdditionalAccountItems" "Navigation/SubNavigation/AdditionalAccountItems.tsx" "$OldComponents_Navigation_SubNavigation_AdditionalAccountItems"
|
||||
PLACE_REACT "$Components_Navigation_SubNavigation_AfterSubNavigation" "Navigation/SubNavigation/AfterSubNavigation.tsx" "$OldComponents_Navigation_SubNavigation_AfterSubNavigation"
|
||||
PLACE_REACT "$Components_Navigation_Routes_AdditionalDashboardRoutes" "Navigation/Routes/AdditionalDashboardRoutes.tsx" "$OldComponents_Navigation_Routes_AdditionalDashboardRoutes"
|
||||
PLACE_REACT "$Components_Navigation_Routes_AdditionalServerRoutes" "Navigation/Routes/AdditionalServerRoutes.tsx" "$OldComponents_Navigation_Routes_AdditionalServerRoutes"
|
||||
PLACE_REACT "$Components_Navigation_Routes_AdditionalGuestRoutes" "Navigation/Routes/AdditionalGuestRoutes.tsx" "$OldComponents_Navigation_Routes_AdditionalGuestRoutes"
|
||||
|
||||
|
||||
# dashboard
|
||||
|
|
@ -1112,6 +1119,13 @@ if [[ ( $2 == "-r" ) || ( $2 == "-remove" ) ]]; then VCMD="y"
|
|||
REMOVE_REACT "$Components_Navigation_NavigationBar_BeforeNavigation" "Navigation/NavigationBar/BeforeNavigation.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_NavigationBar_AdditionalItems" "Navigation/NavigationBar/AdditionalItems.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_NavigationBar_AfterNavigation" "Navigation/NavigationBar/AfterNavigation.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_SubNavigation_BeforeSubNavigation" "Navigation/SubNavigation/BeforeSubNavigation.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_SubNavigation_AdditionalServerItems" "Navigation/SubNavigation/AdditionalServerItems.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_SubNavigation_AdditionalAccountItems" "Navigation/SubNavigation/AdditionalAccountItems.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_SubNavigation_AfterSubNavigation" "Navigation/SubNavigation/AfterSubNavigation.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_Routes_AdditionalDashboardRoutes" "Navigation/Routes/AdditionalDashboardRoutes.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_Routes_AdditionalServerRoutes" "Navigation/Routes/AdditionalServerRoutes.tsx"
|
||||
REMOVE_REACT "$Components_Navigation_Routes_AdditionalGuestRoutes" "Navigation/Routes/AdditionalGuestRoutes.tsx"
|
||||
|
||||
|
||||
# dashboard
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react';
|
||||
/* blueprint/import */
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<>
|
||||
{/* blueprint/react */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
32
resources/scripts/routers/AuthenticationRouter.tsx
Normal file
32
resources/scripts/routers/AuthenticationRouter.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import React from 'react';
|
||||
import { Route, Switch, useRouteMatch } from 'react-router-dom';
|
||||
import LoginContainer from '@/components/auth/LoginContainer';
|
||||
import ForgotPasswordContainer from '@/components/auth/ForgotPasswordContainer';
|
||||
import ResetPasswordContainer from '@/components/auth/ResetPasswordContainer';
|
||||
import LoginCheckpointContainer from '@/components/auth/LoginCheckpointContainer';
|
||||
import { NotFound } from '@/components/elements/ScreenBlock';
|
||||
import { useHistory, useLocation } from 'react-router';
|
||||
|
||||
import AdditionalGuestRoutes from '@/blueprint/components/Navigation/Routes/AdditionalGuestRoutes';
|
||||
|
||||
export default () => {
|
||||
const history = useHistory();
|
||||
const location = useLocation();
|
||||
const { path } = useRouteMatch();
|
||||
|
||||
return (
|
||||
<div className={'pt-8 xl:pt-32'}>
|
||||
<Switch location={location}>
|
||||
<Route path={`${path}/login`} component={LoginContainer} exact />
|
||||
<Route path={`${path}/login/checkpoint`} component={LoginCheckpointContainer} />
|
||||
<Route path={`${path}/password`} component={ForgotPasswordContainer} exact />
|
||||
<Route path={`${path}/password/reset/:token`} component={ResetPasswordContainer} />
|
||||
<Route path={`${path}/checkpoint`} />
|
||||
<AdditionalGuestRoutes />
|
||||
<Route path={'*'}>
|
||||
<NotFound onBack={() => history.push('/auth/login')} />
|
||||
</Route>
|
||||
</Switch>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
59
resources/scripts/routers/DashboardRouter.tsx
Normal file
59
resources/scripts/routers/DashboardRouter.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import React from 'react';
|
||||
import { NavLink, Route, Switch } from 'react-router-dom';
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import DashboardContainer from '@/components/dashboard/DashboardContainer';
|
||||
import { NotFound } from '@/components/elements/ScreenBlock';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import SubNavigation from '@/components/elements/SubNavigation';
|
||||
import { useLocation } from 'react-router';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import routes from '@/routers/routes';
|
||||
|
||||
import BeforeSubNavigation from '@/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation';
|
||||
import AdditionalAccountItems from '@/blueprint/components/Navigation/SubNavigation/AdditionalAccountItems';
|
||||
import AfterSubNavigation from '@/blueprint/components/Navigation/SubNavigation/AfterSubNavigation';
|
||||
import AdditionalDashboardRoutes from '@/blueprint/components/Navigation/Routes/AdditionalDashboardRoutes';
|
||||
|
||||
export default () => {
|
||||
const location = useLocation();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavigationBar />
|
||||
{location.pathname.startsWith('/account') && (
|
||||
<SubNavigation>
|
||||
<BeforeSubNavigation />
|
||||
<div>
|
||||
{routes.account
|
||||
.filter((route) => !!route.name)
|
||||
.map(({ path, name, exact = false }) => (
|
||||
<NavLink key={path} to={`/account/${path}`.replace('//', '/')} exact={exact}>
|
||||
{name}
|
||||
</NavLink>
|
||||
))}
|
||||
<AdditionalAccountItems />
|
||||
</div>
|
||||
<AfterSubNavigation />
|
||||
</SubNavigation>
|
||||
)}
|
||||
<TransitionRouter>
|
||||
<React.Suspense fallback={<Spinner centered />}>
|
||||
<Switch location={location}>
|
||||
<Route path={'/'} exact>
|
||||
<DashboardContainer />
|
||||
</Route>
|
||||
{routes.account.map(({ path, component: Component }) => (
|
||||
<Route key={path} path={`/account/${path}`.replace('//', '/')} exact>
|
||||
<Component />
|
||||
</Route>
|
||||
))}
|
||||
<AdditionalDashboardRoutes />
|
||||
<Route path={'*'}>
|
||||
<NotFound />
|
||||
</Route>
|
||||
</Switch>
|
||||
</React.Suspense>
|
||||
</TransitionRouter>
|
||||
</>
|
||||
);
|
||||
};
|
||||
137
resources/scripts/routers/ServerRouter.tsx
Normal file
137
resources/scripts/routers/ServerRouter.tsx
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
import TransferListener from '@/components/server/TransferListener';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { NavLink, Route, Switch, useRouteMatch } from 'react-router-dom';
|
||||
import NavigationBar from '@/components/NavigationBar';
|
||||
import TransitionRouter from '@/TransitionRouter';
|
||||
import WebsocketHandler from '@/components/server/WebsocketHandler';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { CSSTransition } from 'react-transition-group';
|
||||
import Can from '@/components/elements/Can';
|
||||
import Spinner from '@/components/elements/Spinner';
|
||||
import { NotFound, ServerError } from '@/components/elements/ScreenBlock';
|
||||
import { httpErrorToHuman } from '@/api/http';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
import SubNavigation from '@/components/elements/SubNavigation';
|
||||
import InstallListener from '@/components/server/InstallListener';
|
||||
import ErrorBoundary from '@/components/elements/ErrorBoundary';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { useLocation } from 'react-router';
|
||||
import ConflictStateRenderer from '@/components/server/ConflictStateRenderer';
|
||||
import PermissionRoute from '@/components/elements/PermissionRoute';
|
||||
import routes from '@/routers/routes';
|
||||
|
||||
import BeforeSubNavigation from '@/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation';
|
||||
import AdditionalServerItems from '@/blueprint/components/Navigation/SubNavigation/AdditionalServerItems';
|
||||
import AfterSubNavigation from '@/blueprint/components/Navigation/SubNavigation/AfterSubNavigation';
|
||||
import AdditionalServerRoutes from '@/blueprint/components/Navigation/Routes/AdditionalServerRoutes';
|
||||
|
||||
export default () => {
|
||||
const match = useRouteMatch<{ id: string }>();
|
||||
const location = useLocation();
|
||||
|
||||
const rootAdmin = useStoreState((state) => state.user.data!.rootAdmin);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const id = ServerContext.useStoreState((state) => state.server.data?.id);
|
||||
const uuid = ServerContext.useStoreState((state) => state.server.data?.uuid);
|
||||
const inConflictState = ServerContext.useStoreState((state) => state.server.inConflictState);
|
||||
const serverId = ServerContext.useStoreState((state) => state.server.data?.internalId);
|
||||
const getServer = ServerContext.useStoreActions((actions) => actions.server.getServer);
|
||||
const clearServerState = ServerContext.useStoreActions((actions) => actions.clearServerState);
|
||||
|
||||
const to = (value: string, url = false) => {
|
||||
if (value === '/') {
|
||||
return url ? match.url : match.path;
|
||||
}
|
||||
return `${(url ? match.url : match.path).replace(/\/*$/, '')}/${value.replace(/^\/+/, '')}`;
|
||||
};
|
||||
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearServerState();
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setError('');
|
||||
|
||||
getServer(match.params.id).catch((error) => {
|
||||
console.error(error);
|
||||
setError(httpErrorToHuman(error));
|
||||
});
|
||||
|
||||
return () => {
|
||||
clearServerState();
|
||||
};
|
||||
}, [match.params.id]);
|
||||
|
||||
return (
|
||||
<React.Fragment key={'server-router'}>
|
||||
<NavigationBar />
|
||||
{!uuid || !id ? (
|
||||
error ? (
|
||||
<ServerError message={error} />
|
||||
) : (
|
||||
<Spinner size={'large'} centered />
|
||||
)
|
||||
) : (
|
||||
<>
|
||||
<CSSTransition timeout={150} classNames={'fade'} appear in>
|
||||
<SubNavigation>
|
||||
<div>
|
||||
<BeforeSubNavigation />
|
||||
{routes.server
|
||||
.filter((route) => !!route.name)
|
||||
.map((route) =>
|
||||
route.permission ? (
|
||||
<Can key={route.path} action={route.permission} matchAny>
|
||||
<NavLink to={to(route.path, true)} exact={route.exact}>
|
||||
{route.name}
|
||||
</NavLink>
|
||||
</Can>
|
||||
) : (
|
||||
<NavLink key={route.path} to={to(route.path, true)} exact={route.exact}>
|
||||
{route.name}
|
||||
</NavLink>
|
||||
)
|
||||
)}
|
||||
<AdditionalServerItems />
|
||||
{rootAdmin && (
|
||||
// eslint-disable-next-line react/jsx-no-target-blank
|
||||
<a href={`/admin/servers/view/${serverId}`} target={'_blank'}>
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} />
|
||||
</a>
|
||||
)}
|
||||
<AfterSubNavigation />
|
||||
</div>
|
||||
</SubNavigation>
|
||||
</CSSTransition>
|
||||
<InstallListener />
|
||||
<TransferListener />
|
||||
<WebsocketHandler />
|
||||
{inConflictState && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${id}`))) ? (
|
||||
<ConflictStateRenderer />
|
||||
) : (
|
||||
<ErrorBoundary>
|
||||
<TransitionRouter>
|
||||
<Switch location={location}>
|
||||
{routes.server.map(({ path, permission, component: Component }) => (
|
||||
<PermissionRoute key={path} permission={permission} path={to(path)} exact>
|
||||
<Spinner.Suspense>
|
||||
<Component />
|
||||
</Spinner.Suspense>
|
||||
</PermissionRoute>
|
||||
))}
|
||||
<AdditionalServerRoutes />
|
||||
<Route path={'*'} component={NotFound} />
|
||||
</Switch>
|
||||
</TransitionRouter>
|
||||
</ErrorBoundary>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in a new issue