1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-18 20:09:08 +02:00
unleash.unleash/frontend/src/component/App.tsx
Tymoteusz Czech 23a874d051 Refactor: convert jsx files to typescript (#881)
* refactor: convert remaining js files to typescript

* refactor: conditionally render remove index

* refactor: dialog component to tsx

* refactor: migrate some files from jsx to tsx

* refactor: convert dropdown element to tsx

* refactor: feature toggle list to tsx

* refactor: update context name in use overrides

* refactor: variant overrides to tsx

refactor: remove unused strategy constraint file

* fix: tsx imports

* fix: update refectored components after rebase

* refactor: rename report list files to tsx

* fix: project health list types

* refactor: addon form - add types

* refactor: copy feature component types

* fix: projects toggle style after tsx refactor

* refactor: update ts types from openapi

* fix: ts refactor changes after review

* fix: header title prop

* fix: update after PR comments

* add test to useoverrides hook

* fix conditionally render time ago

* fix: toggle list empty tooltip

* fix: remove unused variable

* remove unused variable

* fix: remove faulty snapshot
2022-05-02 12:52:33 +02:00

80 lines
3.2 KiB
TypeScript

import { createElement } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { FeedbackNPS } from 'component/feedback/FeedbackNPS/FeedbackNPS';
import { LayoutPicker } from 'component/layout/LayoutPicker/LayoutPicker';
import Loader from 'component/common/Loader/Loader';
import NotFound from 'component/common/NotFound/NotFound';
import ProtectedRoute from 'component/common/ProtectedRoute/ProtectedRoute';
import SWRProvider from 'component/providers/SWRProvider/SWRProvider';
import ToastRenderer from 'component/common/ToastRenderer/ToastRenderer';
import { routes } from 'component/menu/routes';
import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
import { SplashPageRedirect } from 'component/splash/SplashPageRedirect/SplashPageRedirect';
import { IRoute } from 'interfaces/route';
import styles from 'component/styles.module.scss';
export const App = () => {
const { authDetails } = useAuthDetails();
const { user } = useAuthUser();
const isLoggedIn = Boolean(user?.id);
const hasFetchedAuth = Boolean(authDetails || user);
const isUnauthorized = (): boolean => {
return !isLoggedIn;
};
const renderRoute = (route: IRoute) => {
if (route.type === 'protected') {
const unauthorized = isUnauthorized();
return (
<ProtectedRoute
key={route.path}
path={route.path}
component={route.component}
unauthorized={unauthorized}
/>
);
}
return (
<Route
key={route.path}
path={route.path}
render={() => createElement(route.component, {}, null)}
/>
);
};
return (
<SWRProvider isUnauthorized={isUnauthorized}>
<ConditionallyRender
condition={!hasFetchedAuth}
show={<Loader />}
elseShow={
<div className={styles.container}>
<ToastRenderer />
<LayoutPicker>
<Switch>
<ProtectedRoute
exact
path="/"
unauthorized={isUnauthorized()}
component={() => (
<Redirect to="/features" />
)}
/>
{routes.map(renderRoute)}
<Route path="/404" component={NotFound} />
<Redirect to="/404" />
</Switch>
<FeedbackNPS openUrl="http://feedback.unleash.run" />
<SplashPageRedirect />
</LayoutPicker>
</div>
}
/>
</SWRProvider>
);
};