feat core react: Add SubNavigation and Routes to components

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

resources/scripts/blueprint/components/Navigation/Routes/AdditionalDashboardRoutes.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/Routes/AdditionalGuestRoutes.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/Routes/AdditionalServerRoutes.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/SubNavigation/AdditionalAccountItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/SubNavigation/AdditionalServerItems.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/SubNavigation/AfterSubNavigation.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/blueprint/components/Navigation/SubNavigation/BeforeSubNavigation.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+/* blueprint/import */
+
+export default () => {
+  return (
+    <>
+      {/* blueprint/react */}
+    </>
+  );
+};

resources/scripts/routers/AuthenticationRouter.tsx

@@ -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>
+    );
+};

resources/scripts/routers/DashboardRouter.tsx

@@ -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>
+        </>
+    );
+};

resources/scripts/routers/ServerRouter.tsx

@@ -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>
+    );
+};