diff --git a/.graphqlconfig b/.graphqlconfig index 7dff810..ddd96d5 100644 --- a/.graphqlconfig +++ b/.graphqlconfig @@ -6,7 +6,7 @@ "Default GraphQL Endpoint": { "url": "http://localhost:8080/graphql", "headers": { - "user-agent": "JS GraphQL" + "user-agent": "IDE" }, "introspect": true } diff --git a/src/common/Spinner/Spinner.tsx b/src/common/Spinner/Spinner.tsx new file mode 100644 index 0000000..72208e9 --- /dev/null +++ b/src/common/Spinner/Spinner.tsx @@ -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 ( + + + + + {description && ( + {description} + )} + + ); +} + +export default Spinner; diff --git a/src/features/App.tsx b/src/features/App.tsx index 9302b46..4dbe984 100644 --- a/src/features/App.tsx +++ b/src/features/App.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import AppLoading from './AppLoading'; function App() { return ( diff --git a/src/features/AppLoading.tsx b/src/features/AppLoading.tsx new file mode 100644 index 0000000..a2322f5 --- /dev/null +++ b/src/features/AppLoading.tsx @@ -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 ( + + ); + } + + return children; +} + +export default AppLoading; diff --git a/src/index.tsx b/src/index.tsx index 213d5a7..38e72f1 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,10 +1,11 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; -import { MuiThemeProvider } from '@material-ui/core'; import { ApolloProvider } from '@apollo/client'; import App from './features/App'; +import AppLoading from './features/AppLoading'; import { AuthProvider } from './libs/auth'; +import ThemeProvider from './libs/material-ui/ThemeProvider'; import TokenStorage from './libs/tokenstorage/TokenStorage'; import createClient from './libs/graphql/createClient'; import { API_URI } from './config/api'; @@ -15,9 +16,13 @@ const tokenStorage = new TokenStorage(); ReactDOM.render( - - - + + + + + + + , document.getElementById('root') diff --git a/src/libs/material-ui/ThemeProvider.tsx b/src/libs/material-ui/ThemeProvider.tsx new file mode 100644 index 0000000..2698249 --- /dev/null +++ b/src/libs/material-ui/ThemeProvider.tsx @@ -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 ( + + {children} + + + ); +} + +export default ThemeProvider; diff --git a/src/libs/material-ui/createTheme.ts b/src/libs/material-ui/createTheme.ts new file mode 100644 index 0000000..102594b --- /dev/null +++ b/src/libs/material-ui/createTheme.ts @@ -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;