add AppLoading, Spinner and a basic material-ui theme
This commit is contained in:
parent
521286cfcc
commit
81d8eccb08
|
@ -6,7 +6,7 @@
|
||||||
"Default GraphQL Endpoint": {
|
"Default GraphQL Endpoint": {
|
||||||
"url": "http://localhost:8080/graphql",
|
"url": "http://localhost:8080/graphql",
|
||||||
"headers": {
|
"headers": {
|
||||||
"user-agent": "JS GraphQL"
|
"user-agent": "IDE"
|
||||||
},
|
},
|
||||||
"introspect": true
|
"introspect": true
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,42 @@
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Typography,
|
||||||
|
CircularProgress,
|
||||||
|
BoxProps,
|
||||||
|
TypographyProps,
|
||||||
|
} from '@material-ui/core';
|
||||||
|
|
||||||
|
export const CENTER_SPINNER: BoxProps = {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
textAlign: 'center',
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface SpinnerProps {
|
||||||
|
size?: number;
|
||||||
|
containerProps?: BoxProps;
|
||||||
|
typographyProps?: TypographyProps;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
function Spinner({
|
||||||
|
size = 150,
|
||||||
|
containerProps = CENTER_SPINNER,
|
||||||
|
typographyProps = { variant: 'h3' },
|
||||||
|
description = '',
|
||||||
|
}: SpinnerProps) {
|
||||||
|
return (
|
||||||
|
<Box {...containerProps}>
|
||||||
|
<Box mb={description ? 1 : 0}>
|
||||||
|
<CircularProgress size={size} />
|
||||||
|
</Box>
|
||||||
|
{description && (
|
||||||
|
<Typography {...typographyProps}>{description}</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Spinner;
|
|
@ -1,4 +1,4 @@
|
||||||
import React from "react";
|
import AppLoading from './AppLoading';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
import Spinner, { CENTER_SPINNER } from 'common/Spinner/Spinner';
|
||||||
|
import { useAuth } from 'libs/auth';
|
||||||
|
|
||||||
|
export interface AppLoadingProps {
|
||||||
|
children: JSX.Element;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AppLoading({ children }: AppLoadingProps) {
|
||||||
|
const { loading } = useAuth();
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<Spinner
|
||||||
|
containerProps={{
|
||||||
|
...CENTER_SPINNER,
|
||||||
|
minHeight: '100vh',
|
||||||
|
}}
|
||||||
|
description="Wczytywanie danych..."
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AppLoading;
|
|
@ -1,10 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
import { MuiThemeProvider } from '@material-ui/core';
|
|
||||||
import { ApolloProvider } from '@apollo/client';
|
import { ApolloProvider } from '@apollo/client';
|
||||||
import App from './features/App';
|
import App from './features/App';
|
||||||
|
import AppLoading from './features/AppLoading';
|
||||||
import { AuthProvider } from './libs/auth';
|
import { AuthProvider } from './libs/auth';
|
||||||
|
import ThemeProvider from './libs/material-ui/ThemeProvider';
|
||||||
import TokenStorage from './libs/tokenstorage/TokenStorage';
|
import TokenStorage from './libs/tokenstorage/TokenStorage';
|
||||||
import createClient from './libs/graphql/createClient';
|
import createClient from './libs/graphql/createClient';
|
||||||
import { API_URI } from './config/api';
|
import { API_URI } from './config/api';
|
||||||
|
@ -15,9 +16,13 @@ const tokenStorage = new TokenStorage();
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<ApolloProvider client={createClient(API_URI, tokenStorage)}>
|
<ApolloProvider client={createClient(API_URI, tokenStorage)}>
|
||||||
<AuthProvider tokenStorage={tokenStorage}>
|
<ThemeProvider>
|
||||||
<App />
|
<AuthProvider tokenStorage={tokenStorage}>
|
||||||
</AuthProvider>
|
<AppLoading>
|
||||||
|
<App />
|
||||||
|
</AppLoading>
|
||||||
|
</AuthProvider>
|
||||||
|
</ThemeProvider>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
</BrowserRouter>,
|
</BrowserRouter>,
|
||||||
document.getElementById('root')
|
document.getElementById('root')
|
||||||
|
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
|
||||||
|
import { CssBaseline } from '@material-ui/core';
|
||||||
|
import createTheme from './createTheme';
|
||||||
|
|
||||||
|
interface ThemeProviderProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ThemeProvider({ children }: ThemeProviderProps) {
|
||||||
|
return (
|
||||||
|
<MuiThemeProvider theme={createTheme()}>
|
||||||
|
{children}
|
||||||
|
<CssBaseline />
|
||||||
|
</MuiThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ThemeProvider;
|
|
@ -0,0 +1,21 @@
|
||||||
|
import {
|
||||||
|
createMuiTheme,
|
||||||
|
responsiveFontSizes,
|
||||||
|
Theme,
|
||||||
|
} from '@material-ui/core/styles';
|
||||||
|
|
||||||
|
const createTheme = (): Theme => {
|
||||||
|
return responsiveFontSizes(
|
||||||
|
createMuiTheme({
|
||||||
|
overrides: {
|
||||||
|
MuiTableContainer: {
|
||||||
|
root: {
|
||||||
|
overflow: 'auto',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default createTheme;
|
Reference in New Issue