djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add app state

Browse source
This commit is contained in:
dominik-zeglen 2019-11-14 15:10:52 +01:00
parent 0d51418f72
commit b12f3c35fa
12 changed files with 551 additions and 442 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/auth/components/SectionRoute.tsx
View file

@ -1,10 +1,6 @@
import React from "react";
import ErrorBoundary from "react-error-boundary";
import { Route, RouteProps } from "react-router-dom";
import AppLayout from "@saleor/components/AppLayout";
import ErrorPage from "@saleor/components/ErrorPage";
import useNavigator from "@saleor/hooks/useNavigator";
import useUser from "@saleor/hooks/useUser";
import NotFound from "../../NotFound";
import { PermissionEnum } from "../../types/globalTypes";
@ -18,7 +14,6 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
permissions,
...props
}) => {
const navigate = useNavigator();
const { user } = useUser();
const hasPermissions =
@ -26,18 +21,7 @@ export const SectionRoute: React.FC<SectionRouteProps> = ({
permissions
.map(permission => hasPermission(permission, user))
.reduce((prev, curr) => prev && curr);
return hasPermissions ? (
<AppLayout>
<ErrorBoundary
FallbackComponent={() => <ErrorPage onBack={() => navigate("/")} />}
key={permissions ? permissions.join(":") : "home"}
>
<Route {...props} />
</ErrorBoundary>
</AppLayout>
) : (
<NotFound />
);
return hasPermissions ? <Route {...props} /> : <NotFound />;
};
SectionRoute.displayName = "Route";
export default SectionRoute;

56
src/components/AppLayout/AppLayout.tsx
View file

@ -13,13 +13,13 @@ import classNames from "classnames";
import React from "react";
import SVG from "react-inlinesvg";
import { FormattedMessage, useIntl } from "react-intl";
import { RouteComponentProps, withRouter } from "react-router";
import useRouter from "use-react-router";
import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg";
import saleorDarkLogo from "@assets/images/logo-dark.svg";
import menuArrowIcon from "@assets/images/menu-arrow-icon.svg";
import AppProgressProvider from "@saleor/components/AppProgress";
import { createConfigurationMenu } from "@saleor/configuration";
import useAppState from "@saleor/hooks/useAppState";
import useLocalStorage from "@saleor/hooks/useLocalStorage";
import useNavigator from "@saleor/hooks/useNavigator";
import useTheme from "@saleor/hooks/useTheme";
@ -28,6 +28,8 @@ import ArrowDropdown from "@saleor/icons/ArrowDropdown";
import { maybe } from "@saleor/misc";
import { staffMemberDetailsUrl } from "@saleor/staff/urls";
import Container from "../Container";
import ErrorPage from "../ErrorPage";
import NotFoundPage from "../NotFoundPage";
import AppActionContext from "./AppActionContext";
import AppHeaderContext from "./AppHeaderContext";
import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
@ -273,8 +275,7 @@ interface AppLayoutProps {
children: React.ReactNode;
}
const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
({ children, location }: AppLayoutProps & RouteComponentProps<any>) => {
const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
const classes = useStyles({});
const { isDark, toggleTheme } = useTheme();
const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false);
@ -286,6 +287,8 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
const { logout, user } = useUser();
const navigate = useNavigator();
const intl = useIntl();
const [appState, dispatchAppState] = useAppState();
const { location } = useRouter();
const menuStructure = createMenuStructure(intl);
const configurationMenu = createConfigurationMenu(intl);
@ -321,9 +324,17 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
setMenuSmall(!isMenuSmall);
};
const handleErrorBack = () => {
navigate("/");
dispatchAppState({
payload: {
error: null
},
type: "displayError"
});
};
return (
<AppProgressProvider>
{({ isProgress }) => (
<AppHeaderContext.Provider value={appHeaderAnchor}>
<AppActionContext.Provider value={appActionAnchor}>
<div className={classes.root}>
@ -339,9 +350,7 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
[classes.logoDark]: isDark
})}
>
<SVG
src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
/>
<SVG src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo} />
</div>
<Hidden smDown>
<div
@ -370,11 +379,8 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
[classes.contentToggle]: isMenuSmall
})}
>
{isProgress ? (
<LinearProgress
className={classes.appLoader}
color="primary"
/>
{appState.loading ? (
<LinearProgress className={classes.appLoader} color="primary" />
) : (
<div className={classes.appLoaderPlaceholder} />
)}
@ -402,10 +408,7 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
checked={isDark}
onClick={toggleTheme}
/>
<div
className={classes.userMenuContainer}
ref={anchor}
>
<div className={classes.userMenuContainer} ref={anchor}>
<Chip
avatar={
user.avatar && (
@ -478,17 +481,24 @@ const AppLayout = withRouter<AppLayoutProps & RouteComponentProps<any>, any>(
</div>
</Container>
</div>
<main className={classes.view}>{children}</main>
<main className={classes.view}>
{appState.error ? (
appState.error === "not-found" ? (
<NotFoundPage onBack={handleErrorBack} />
) : (
<ErrorPage onBack={handleErrorBack} />
)
) : (
children
)}
</main>
</div>
<div className={classes.appAction} ref={appActionAnchor} />
</div>
</div>
</AppActionContext.Provider>
</AppHeaderContext.Provider>
)}
</AppProgressProvider>
);
}
);
};
export default AppLayout;

28
src/components/AppProgress/index.tsx
View file

@ -1,28 +0,0 @@
import React from "react";
interface IAppProgressContext {
isProgress: boolean;
setProgressState: (isOpened: boolean) => void;
}
export const AppProgressContext = React.createContext<IAppProgressContext>(
undefined
);
export const AppProgressProvider: React.FC<{}> = ({ children }) => {
const [isProgress, setProgressState] = React.useState(false);
return (
<AppProgressContext.Provider
value={{
isProgress,
setProgressState
}}
>
{children}
</AppProgressContext.Provider>
);
};
export const AppProgress = AppProgressContext.Consumer;
export default AppProgress;

2
src/components/ErrorPage/ErrorPage.tsx
View file

@ -48,7 +48,7 @@ const useStyles = makeStyles(theme => ({
root: {
alignItems: "center",
display: "flex",
height: "calc(100vh - 88px)"
height: "calc(100vh - 180px)"
},
upperHeader: {
fontWeight: 600 as 600

3
src/components/NotFoundPage/NotFoundPage.tsx
View file

@ -43,8 +43,7 @@ const useStyles = makeStyles(theme => ({
root: {
alignItems: "center",
display: "flex",
height: "100vh",
width: "100vw"
height: "calc(100vh - 180px)"
}
}));

40
src/containers/AppState/AppState.tsx Normal file
View file

@ -0,0 +1,40 @@
import React from "react";
import useRouter from "use-react-router";
import appStateReducer, { AppStateReducerAction } from "./reducer";
import IAppState, { initialAppState } from "./state";
export type AppStateContextType = [
IAppState,
React.Dispatch<AppStateReducerAction>
];
export const AppStateContext = React.createContext<AppStateContextType>([
initialAppState,
() => undefined
]);
const AppStateProvider: React.FC = ({ children }) => {
const { location } = useRouter();
const stateAndDispatch = React.useReducer(appStateReducer, initialAppState);
const [state, dispatch] = stateAndDispatch;
React.useEffect(() => {
if (!!state.error) {
dispatch({
payload: {
error: null
},
type: "displayError"
});
}
}, [location]);
return (
<AppStateContext.Provider value={stateAndDispatch}>
{children}
</AppStateContext.Provider>
);
};
export const { Consumer } = AppStateContext;
export default AppStateProvider;

2
src/containers/AppState/index.ts Normal file
View file

@ -0,0 +1,2 @@
export { default } from "./AppState";
export * from "./AppState";

42
src/containers/AppState/reducer.ts Normal file
View file

@ -0,0 +1,42 @@
import IAppState, { AppError } from "./state";
export type AppStateReducerActionType = "displayError" | "displayLoader";
export interface AppStateReducerAction {
payload: Partial<{
error: AppError;
value: boolean;
}>;
type: AppStateReducerActionType;
}
function displayError(prevState: IAppState, error: AppError): IAppState {
return {
...prevState,
error,
loading: false
};
}
function displayLoader(prevState: IAppState, value: boolean): IAppState {
return {
...prevState,
loading: value
};
}
function reduceAppState(
prevState: IAppState,
action: AppStateReducerAction
): IAppState {
switch (action.type) {
case "displayError":
return displayError(prevState, action.payload.error);
case "displayLoader":
return displayLoader(prevState, action.payload.value);
default:
return prevState;
}
}
export default reduceAppState;

13
src/containers/AppState/state.ts Normal file
View file

@ -0,0 +1,13 @@
export type AppError = "unhandled" | "not-found";
interface IAppState {
error: AppError | null;
loading: boolean;
}
export const initialAppState: IAppState = {
error: null,
loading: false
};
export default IAppState;

11
src/hooks/useAppState.ts Normal file
View file

@ -0,0 +1,11 @@
import React from "react";
import { AppStateContext } from "../containers/AppState";
function useAppState() {
const stateAndDispatch = React.useContext(AppStateContext);
return stateAndDispatch;
}
export default useAppState;

27
src/index.tsx
View file

@ -8,9 +8,11 @@ import { createUploadLink } from "apollo-upload-client";
import React from "react";
import { ApolloProvider } from "react-apollo";
import { render } from "react-dom";
import ErrorBoundary from "react-error-boundary";
import { useIntl } from "react-intl";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import useAppState from "@saleor/hooks/useAppState";
import AttributeSection from "./attributes";
import { attributeSection } from "./attributes/urls";
import Auth, { getAuthToken, removeAuthToken } from "./auth";
@ -20,7 +22,7 @@ import SectionRoute from "./auth/components/SectionRoute";
import { hasPermission } from "./auth/misc";
import CategorySection from "./categories";
import CollectionSection from "./collections";
import { AppProgressProvider } from "./components/AppProgress";
import AppLayout from "./components/AppLayout";
import { DateProvider } from "./components/Date";
import { LocaleProvider } from "./components/Locale";
import { MessageManager } from "./components/messages";
@ -29,6 +31,7 @@ import ThemeProvider from "./components/Theme";
import { WindowTitle } from "./components/WindowTitle";
import { API_URI, APP_MOUNT_URI } from "./config";
import ConfigurationSection, { createConfigurationMenu } from "./configuration";
import AppStateProvider from "./containers/AppState";
import { CustomerSection } from "./customers";
import DiscountSection from "./discounts";
import HomePage from "./home";
@ -119,11 +122,11 @@ const App: React.FC = () => {
<DateProvider>
<LocaleProvider>
<MessageManager>
<AppProgressProvider>
<AppStateProvider>
<ShopProvider>
<Routes />
</ShopProvider>
</AppProgressProvider>
</AppStateProvider>
</MessageManager>
</LocaleProvider>
</DateProvider>
@ -135,6 +138,7 @@ const App: React.FC = () => {
const Routes: React.FC = () => {
const intl = useIntl();
const [, dispatchAppState] = useAppState();
return (
<>
@ -148,6 +152,17 @@ const Routes: React.FC = () => {
user
}) =>
isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
<AppLayout>
<ErrorBoundary
onError={() =>
dispatchAppState({
payload: {
error: "unhandled"
},
type: "displayError"
})
}
>
<Switch>
<SectionRoute exact path="/" component={HomePage} />
<SectionRoute
@ -241,7 +256,9 @@ const Routes: React.FC = () => {
component={ServiceSection}
/>
{createConfigurationMenu(intl).filter(menu =>
menu.menuItems.map(item => hasPermission(item.permission, user))
menu.menuItems.map(item =>
hasPermission(item.permission, user)
)
).length > 0 && (
<SectionRoute
exact
@ -251,6 +268,8 @@ const Routes: React.FC = () => {
)}
<Route component={NotFound} />
</Switch>
</ErrorBoundary>
</AppLayout>
) : hasToken && tokenVerifyLoading ? (
<LoginLoading />
) : (

55
src/queries.tsx
View file

@ -5,9 +5,7 @@ import React from "react";
import { Query, QueryResult } from "react-apollo";
import { useIntl } from "react-intl";
import AppProgress from "./components/AppProgress";
import NotFoundPage from "./components/NotFoundPage";
import useNavigator from "./hooks/useNavigator";
import useAppState from "./hooks/useAppState";
import useNotifier from "./hooks/useNotifier";
import { commonMessages } from "./intl";
import { maybe, RequireAtLeastOne } from "./misc";
@ -68,13 +66,11 @@ export function TypedQuery<TData, TVariables>(
query: DocumentNode
): React.FC<TypedQueryInnerProps<TData, TVariables>> {
return ({ children, displayLoader, skip, variables, require }) => {
const navigate = useNavigator();
const pushMessage = useNotifier();
const [, dispatchAppState] = useAppState();
const intl = useIntl();
return (
<AppProgress>
{({ setProgressState }) => (
<Query
fetchPolicy="cache-and-network"
query={query}
@ -116,10 +112,6 @@ export function TypedQuery<TData, TVariables>(
variables: { ...variables, ...extraVariables }
});
let childrenOrNotFound = children({
...queryData,
loadMore
});
if (
!queryData.loading &&
require &&
@ -129,28 +121,53 @@ export function TypedQuery<TData, TVariables>(
true
)
) {
childrenOrNotFound = (
<NotFoundPage onBack={() => navigate("/")} />
);
dispatchAppState({
payload: {
error: "not-found"
},
type: "displayError"
});
}
if (displayLoader) {
return (
<QueryProgress
loading={queryData.loading}
onCompleted={() => setProgressState(false)}
onLoading={() => setProgressState(true)}
onCompleted={() =>
dispatchAppState({
payload: {
value: false
},
type: "displayLoader"
})
}
onLoading={() =>
dispatchAppState({
payload: {
value: true
},
type: "displayLoader"
})
}
>
{childrenOrNotFound}
{children({
...queryData,
loadMore
})}
</QueryProgress>
);
}
return <>{childrenOrNotFound}</>;
return (
<>
{children({
...queryData,
loadMore
})}
</>
);
}}
</Query>
)}
</AppProgress>
);
};
}