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

Merge pull request #254 from mirumee/ref/use-apollo-hooks

Browse source 
Use Apollo Hooks
This commit is contained in:
Marcin Gębala 2019-11-15 14:13:27 +01:00 committed by GitHub
commit bb8af8938f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1206 additions and 977 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -9,6 +9,7 @@ All notable, unreleased changes to this project will be documented in this file.
- Add secret fields in plugin configuration - #246 by @dominik-zeglen
- Fix subcategories pagination - #249 by @dominik-zeglen
- Update customer's details page design - #248 by @dominik-zeglen
- Use Apollo Hooks - #254 by @dominik-zeglen
## 2.0.0

2
package.json
View file

@ -47,7 +47,7 @@
"moment-timezone": "^0.5.26",
"qs": "^6.9.0",
"react": "^16.9.0",
"react-apollo": "^3.0.0",
"react-apollo": "^3.1.3",
"react-dom": "^16.9.0",
"react-dropzone": "^8.2.0",
"react-error-boundary": "^1.2.5",

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;

10
src/categories/mutations.ts
View file

@ -1,6 +1,6 @@
import gql from "graphql-tag";
import { TypedMutation } from "../mutations";
import makeMutation from "@saleor/hooks/makeMutation";
import { categoryDetailsFragment } from "./queries";
import {
CategoryBulkDelete,
@ -29,7 +29,7 @@ export const categoryDeleteMutation = gql`
}
}
`;
export const TypedCategoryDeleteMutation = TypedMutation<
export const useCategoryDeleteMutation = makeMutation<
CategoryDelete,
CategoryDeleteVariables
>(categoryDeleteMutation);
@ -48,7 +48,7 @@ export const categoryCreateMutation = gql`
}
}
`;
export const TypedCategoryCreateMutation = TypedMutation<
export const useCategoryCreateMutation = makeMutation<
CategoryCreate,
CategoryCreateVariables
>(categoryCreateMutation);
@ -67,7 +67,7 @@ export const categoryUpdateMutation = gql`
}
}
`;
export const TypedCategoryUpdateMutation = TypedMutation<
export const useCategoryUpdateMutation = makeMutation<
CategoryUpdate,
CategoryUpdateVariables
>(categoryUpdateMutation);
@ -82,7 +82,7 @@ export const categoryBulkDeleteMutation = gql`
}
}
`;
export const TypedCategoryBulkDeleteMutation = TypedMutation<
export const useCategoryBulkDeleteMutation = makeMutation<
CategoryBulkDelete,
CategoryBulkDeleteVariables
>(categoryBulkDeleteMutation);

7
src/categories/queries.ts
View file

@ -1,6 +1,7 @@
import gql from "graphql-tag";
import { pageInfoFragment, TypedQuery } from "../queries";
import makeQuery from "@saleor/hooks/makeQuery";
import { pageInfoFragment } from "../queries";
import {
CategoryDetails,
CategoryDetailsVariables
@ -65,7 +66,7 @@ export const rootCategories = gql`
}
}
`;
export const TypedRootCategoriesQuery = TypedQuery<RootCategories, {}>(
export const useRootCategoriesQuery = makeQuery<RootCategories, {}>(
rootCategories
);
@ -119,7 +120,7 @@ export const categoryDetails = gql`
}
}
`;
export const TypedCategoryDetailsQuery = TypedQuery<
export const useCategoryDetailsQuery = makeQuery<
CategoryDetails,
CategoryDetailsVariables
>(categoryDetails);

13
src/categories/views/CategoryCreate.tsx
View file

@ -6,7 +6,7 @@ import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { getMutationState, maybe } from "../../misc";
import CategoryCreatePage from "../components/CategoryCreatePage";
import { TypedCategoryCreateMutation } from "../mutations";
import { useCategoryCreateMutation } from "../mutations";
import { CategoryCreate } from "../types/CategoryCreate";
import { categoryListUrl, categoryUrl } from "../urls";
@ -31,9 +31,11 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
navigate(categoryUrl(data.categoryCreate.category.id));
}
};
return (
<TypedCategoryCreateMutation onCompleted={handleSuccess}>
{(createCategory, createCategoryResult) => {
const [createCategory, createCategoryResult] = useCategoryCreateMutation({
onCompleted: handleSuccess
});
const errors = maybe(
() => createCategoryResult.data.categoryCreate.errors,
[]
@ -78,8 +80,5 @@ export const CategoryCreateView: React.FC<CategoryCreateViewProps> = ({
/>
</>
);
}}
</TypedCategoryCreateMutation>
);
};
export default CategoryCreateView;

194
src/categories/views/CategoryDetails.tsx
View file

@ -24,11 +24,11 @@ import {
CategoryUpdatePage
} from "../components/CategoryUpdatePage/CategoryUpdatePage";
import {
TypedCategoryBulkDeleteMutation,
TypedCategoryDeleteMutation,
TypedCategoryUpdateMutation
useCategoryBulkDeleteMutation,
useCategoryDeleteMutation,
useCategoryUpdateMutation
} from "../mutations";
import { TypedCategoryDetailsQuery } from "../queries";
import { useCategoryDetailsQuery } from "../queries";
import { CategoryBulkDelete } from "../types/CategoryBulkDelete";
import { CategoryDelete } from "../types/CategoryDelete";
import { CategoryUpdate } from "../types/CategoryUpdate";
@ -63,6 +63,13 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
);
const intl = useIntl();
const paginationState = createPaginationState(PAGINATE_BY, params);
const { data, loading, refetch } = useCategoryDetailsQuery({
displayLoader: true,
require: ["category"],
variables: { ...paginationState, id }
});
const handleCategoryDelete = (data: CategoryDelete) => {
if (data.categoryDelete.errors.length === 0) {
notify({
@ -73,6 +80,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
navigate(categoryListUrl());
}
};
const [deleteCategory, deleteResult] = useCategoryDeleteMutation({
onCompleted: handleCategoryDelete
});
const handleCategoryUpdate = (data: CategoryUpdate) => {
if (data.categoryUpdate.errors.length > 0) {
const backgroundImageError = data.categoryUpdate.errors.find(
@ -86,6 +98,27 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
}
};
const [updateCategory, updateResult] = useCategoryUpdateMutation({
onCompleted: handleCategoryUpdate
});
const handleBulkCategoryDelete = (data: CategoryBulkDelete) => {
if (data.categoryBulkDelete.errors.length === 0) {
closeModal();
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
reset();
}
};
const [
categoryBulkDelete,
categoryBulkDeleteOpts
] = useCategoryBulkDeleteMutation({
onCompleted: handleBulkCategoryDelete
});
const changeTab = (tabName: CategoryPageTab) => {
reset();
navigate(
@ -114,12 +147,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
})
);
return (
<TypedCategoryDeleteMutation onCompleted={handleCategoryDelete}>
{(deleteCategory, deleteResult) => (
<TypedCategoryUpdateMutation onCompleted={handleCategoryUpdate}>
{(updateCategory, updateResult) => {
const paginationState = createPaginationState(PAGINATE_BY, params);
const formTransitionState = getMutationState(
updateResult.called,
updateResult.loading,
@ -130,25 +157,6 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
deleteResult.loading,
maybe(() => deleteResult.data.categoryDelete.errors)
);
return (
<TypedCategoryDetailsQuery
displayLoader
variables={{ ...paginationState, id }}
require={["category"]}
>
{({ data, loading, refetch }) => {
const handleBulkCategoryDelete = (
data: CategoryBulkDelete
) => {
if (data.categoryBulkDelete.errors.length === 0) {
closeModal();
notify({
text: intl.formatMessage(commonMessages.savedChanges)
});
refetch();
reset();
}
};
const handleBulkProductDelete = (data: productBulkDelete) => {
if (data.productBulkDelete.errors.length === 0) {
@ -172,31 +180,17 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
return (
<>
<WindowTitle title={maybe(() => data.category.name)} />
<TypedCategoryBulkDeleteMutation
onCompleted={handleBulkCategoryDelete}
>
{(categoryBulkDelete, categoryBulkDeleteOpts) => (
<TypedProductBulkDeleteMutation
onCompleted={handleBulkProductDelete}
>
<TypedProductBulkDeleteMutation onCompleted={handleBulkProductDelete}>
{(productBulkDelete, productBulkDeleteOpts) => {
const categoryBulkDeleteMutationState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(
() =>
categoryBulkDeleteOpts.data
.categoryBulkDelete.errors
)
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
const productBulkDeleteMutationState = getMutationState(
productBulkDeleteOpts.called,
productBulkDeleteOpts.loading,
maybe(
() =>
productBulkDeleteOpts.data.productBulkDelete
.errors
)
maybe(() => productBulkDeleteOpts.data.productBulkDelete.errors)
);
return (
@ -206,27 +200,18 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
currentTab={params.activeTab}
category={maybe(() => data.category)}
disabled={loading}
errors={maybe(
() =>
updateResult.data.categoryUpdate.errors
)}
onAddCategory={() =>
navigate(categoryAddUrl(id))
}
errors={maybe(() => updateResult.data.categoryUpdate.errors)}
onAddCategory={() => navigate(categoryAddUrl(id))}
onAddProduct={() => navigate(productAddUrl)}
onBack={() =>
navigate(
maybe(
() =>
categoryUrl(
data.category.parent.id
),
() => categoryUrl(data.category.parent.id),
categoryListUrl()
)
)
}
onCategoryClick={id => () =>
navigate(categoryUrl(id))}
onCategoryClick={id => () => navigate(categoryUrl(id))}
onDelete={() => openModal("delete")}
onImageDelete={() =>
updateCategory({
@ -251,22 +236,17 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
pageInfo={pageInfo}
onProductClick={id => () =>
navigate(productUrl(id))}
onProductClick={id => () => navigate(productUrl(id))}
onSubmit={formData =>
updateCategory({
variables: {
id,
input: {
backgroundImageAlt:
formData.backgroundImageAlt,
descriptionJson: JSON.stringify(
formData.description
),
backgroundImageAlt: formData.backgroundImageAlt,
descriptionJson: JSON.stringify(formData.description),
name: formData.name,
seo: {
description:
formData.seoDescription,
description: formData.seoDescription,
title: formData.seoTitle
}
}
@ -274,25 +254,16 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
})
}
products={maybe(() =>
data.category.products.edges.map(
edge => edge.node
)
data.category.products.edges.map(edge => edge.node)
)}
saveButtonBarState={formTransitionState}
subcategories={maybe(() =>
data.category.children.edges.map(
edge => edge.node
)
data.category.children.edges.map(edge => edge.node)
)}
subcategoryListToolbar={
<IconButton
color="primary"
onClick={() =>
openModal(
"delete-categories",
listElements
)
}
onClick={() => openModal("delete-categories", listElements)}
>
<DeleteIcon />
</IconButton>
@ -300,12 +271,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
productListToolbar={
<IconButton
color="primary"
onClick={() =>
openModal(
"delete-products",
listElements
)
}
onClick={() => openModal("delete-products", listElements)}
>
<DeleteIcon />
</IconButton>
@ -316,13 +282,9 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
toggleAll={toggleAll}
/>
<ActionDialog
confirmButtonState={
removeDialogTransitionState
}
confirmButtonState={removeDialogTransitionState}
onClose={closeModal}
onConfirm={() =>
deleteCategory({ variables: { id } })
}
onConfirm={() => deleteCategory({ variables: { id } })}
open={params.action === "delete"}
title={intl.formatMessage({
defaultMessage: "Delete category",
@ -336,10 +298,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
values={{
categoryName: (
<strong>
{maybe(
() => data.category.name,
"..."
)}
{maybe(() => data.category.name, "...")}
</strong>
)
}}
@ -354,14 +313,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
params.action === "delete-categories" &&
maybe(() => params.ids.length > 0)
}
confirmButtonState={
categoryBulkDeleteMutationState
}
confirmButtonState={categoryBulkDeleteMutationState}
onClose={closeModal}
onConfirm={() =>
categoryBulkDelete({
variables: { ids: params.ids }
})
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete categories",
@ -371,15 +328,11 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
>
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} categories}}?"
defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
values={{
counter: maybe(
() => params.ids.length
),
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
@ -390,14 +343,12 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
</ActionDialog>
<ActionDialog
open={params.action === "delete-products"}
confirmButtonState={
productBulkDeleteMutationState
}
confirmButtonState={productBulkDeleteMutationState}
onClose={closeModal}
onConfirm={() =>
productBulkDelete({
variables: { ids: params.ids }
})
}).then(() => refetch())
}
title={intl.formatMessage({
defaultMessage: "Delete products",
@ -405,18 +356,13 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
})}
variant="delete"
>
{" "}
<DialogContentText>
<FormattedMessage
defaultMessage="Are you sure you want to delete {counter,plural,one{this attribute} other{{displayQuantity} products}}?"
defaultMessage="Are you sure you want to delete {counter,plural,one{this product} other{{displayQuantity} products}}?"
values={{
counter: maybe(
() => params.ids.length
),
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>
{maybe(() => params.ids.length)}
</strong>
<strong>{maybe(() => params.ids.length)}</strong>
)
}}
/>
@ -426,17 +372,7 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
);
}}
</TypedProductBulkDeleteMutation>
)}
</TypedCategoryBulkDeleteMutation>
</>
);
}}
</TypedCategoryDetailsQuery>
);
}}
</TypedCategoryUpdateMutation>
)}
</TypedCategoryDeleteMutation>
);
};
export default CategoryDetails;

57
src/categories/views/CategoryList/CategoryList.tsx
View file

@ -18,8 +18,8 @@ import usePaginator, {
import { getMutationState, maybe } from "@saleor/misc";
import { ListViews } from "@saleor/types";
import { CategoryListPage } from "../../components/CategoryListPage/CategoryListPage";
import { TypedCategoryBulkDeleteMutation } from "../../mutations";
import { TypedRootCategoriesQuery } from "../../queries";
import { useCategoryBulkDeleteMutation } from "../../mutations";
import { useRootCategoriesQuery } from "../../queries";
import { CategoryBulkDelete } from "../../types/CategoryBulkDelete";
import {
categoryAddUrl,
@ -53,6 +53,20 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
);
const intl = useIntl();
const paginationState = createPaginationState(settings.rowNumber, params);
const queryVariables = React.useMemo(
() => ({
...paginationState,
filter: getFilterVariables(params)
}),
[params]
);
const { data, loading, refetch } = useRootCategoriesQuery({
displayLoader: true,
require: ["categories"],
variables: queryVariables
});
const tabs = getFilterTabs();
const currentTab =
@ -113,18 +127,6 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
handleTabChange(tabs.length + 1);
};
const paginationState = createPaginationState(settings.rowNumber, params);
const queryVariables = React.useMemo(
() => ({
...paginationState,
filter: getFilterVariables(params)
}),
[params]
);
return (
<TypedRootCategoriesQuery displayLoader variables={queryVariables}>
{({ data, loading, refetch }) => {
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
maybe(() => data.categories.pageInfo),
paginationState,
@ -138,17 +140,18 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
reset();
}
};
return (
<TypedCategoryBulkDeleteMutation
onCompleted={handleCategoryBulkDelete}
>
{(categoryBulkDelete, categoryBulkDeleteOpts) => {
const [
categoryBulkDelete,
categoryBulkDeleteOpts
] = useCategoryBulkDeleteMutation({
onCompleted: handleCategoryBulkDelete
});
const bulkDeleteState = getMutationState(
categoryBulkDeleteOpts.called,
categoryBulkDeleteOpts.loading,
maybe(
() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors
)
maybe(() => categoryBulkDeleteOpts.data.categoryBulkDelete.errors)
);
return (
@ -225,9 +228,7 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
defaultMessage="Are you sure you want to delete {counter,plural,one{this category} other{{displayQuantity} categories}}?"
values={{
counter: maybe(() => params.ids.length),
displayQuantity: (
<strong>{maybe(() => params.ids.length)}</strong>
)
displayQuantity: <strong>{maybe(() => params.ids.length)}</strong>
}}
/>
</DialogContentText>
@ -250,11 +251,5 @@ export const CategoryList: React.FC<CategoryListProps> = ({ params }) => {
/>
</>
);
}}
</TypedCategoryBulkDeleteMutation>
);
}}
</TypedRootCategoriesQuery>
);
};
export default CategoryList;

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;

65
src/hooks/makeMutation.ts Normal file
View file

@ -0,0 +1,65 @@
import { ApolloError } from "apollo-client";
import { DocumentNode } from "graphql";
import {
MutationFunction,
MutationResult,
useMutation as useBaseMutation
} from "react-apollo";
import { useIntl } from "react-intl";
import { commonMessages } from "@saleor/intl";
import { maybe } from "@saleor/misc";
import useNotifier from "./useNotifier";
type UseMutation<TData, TVariables> = [
MutationFunction<TData, TVariables>,
MutationResult<TData>
];
type UseMutationCbs<TData> = Partial<{
onCompleted: (data: TData) => void;
onError: (error: ApolloError) => void;
}>;
type UseMutationHook<TData, TVariables> = (
cbs: UseMutationCbs<TData>
) => UseMutation<TData, TVariables>;
function makeMutation<TData, TVariables>(
mutation: DocumentNode
): UseMutationHook<TData, TVariables> {
function useMutation<TData, TVariables>({
onCompleted,
onError
}: UseMutationCbs<TData>): UseMutation<TData, TVariables> {
const notify = useNotifier();
const intl = useIntl();
const [mutateFn, result] = useBaseMutation(mutation, {
onCompleted,
onError: (err: ApolloError) => {
if (
maybe(
() =>
err.graphQLErrors[0].extensions.exception.code ===
"ReadOnlyException"
)
) {
notify({
text: intl.formatMessage(commonMessages.readOnly)
});
} else {
notify({
text: intl.formatMessage(commonMessages.somethingWentWrong)
});
}
if (onError) {
onError(err);
}
}
});
return [mutateFn, result];
}
return useMutation;
}
export default makeMutation;

115
src/hooks/makeQuery.ts Normal file
View file

@ -0,0 +1,115 @@
import { ApolloQueryResult } from "apollo-client";
import { DocumentNode } from "graphql";
import { useEffect } from "react";
import { QueryResult, useQuery as useBaseQuery } from "react-apollo";
import { useIntl } from "react-intl";
import { commonMessages } from "@saleor/intl";
import { maybe, RequireAtLeastOne } from "@saleor/misc";
import useAppState from "./useAppState";
import useNotifier from "./useNotifier";
export interface LoadMore<TData, TVariables> {
loadMore: (
mergeFunc: (prev: TData, next: TData) => TData,
extraVariables: Partial<TVariables>
) => Promise<ApolloQueryResult<TData>>;
}
type UseQuery<TData, TVariables> = QueryResult<TData, TVariables> &
LoadMore<TData, TVariables>;
type UseQueryOpts<TData, TVariables> = Partial<{
displayLoader: boolean;
require: Array<keyof TData>;
skip: boolean;
variables: TVariables;
}>;
type UseQueryHook<TData, TVariables> = (
opts: UseQueryOpts<TData, TVariables>
) => UseQuery<TData, TVariables>;
function makeQuery<TData, TVariables>(
query: DocumentNode
): UseQueryHook<TData, TVariables> {
function useQuery<TData, TVariables>({
displayLoader,
require,
skip,
variables
}: UseQueryOpts<TData, TVariables>): UseQuery<TData, TVariables> {
const notify = useNotifier();
const intl = useIntl();
const [, dispatchAppState] = useAppState();
const queryData = useBaseQuery(query, {
context: {
useBatching: true
},
errorPolicy: "all",
fetchPolicy: "cache-and-network",
skip,
variables
});
useEffect(() => {
if (displayLoader) {
dispatchAppState({
payload: {
value: queryData.loading
},
type: "displayLoader"
});
}
}, [queryData.loading]);
if (queryData.error) {
if (
!queryData.error.graphQLErrors.every(
err =>
maybe(() => err.extensions.exception.code) === "PermissionDenied"
)
) {
notify({
text: intl.formatMessage(commonMessages.somethingWentWrong)
});
}
}
const loadMore = (
mergeFunc: (previousResults: TData, fetchMoreResult: TData) => TData,
extraVariables: RequireAtLeastOne<TVariables>
) =>
queryData.fetchMore({
query,
updateQuery: (previousResults, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return previousResults;
}
return mergeFunc(previousResults, fetchMoreResult);
},
variables: { ...variables, ...extraVariables }
});
if (
!queryData.loading &&
require &&
queryData.data &&
!require.reduce((acc, key) => acc && queryData.data[key] !== null, true)
) {
dispatchAppState({
payload: {
error: "not-found"
},
type: "displayError"
});
}
return {
...queryData,
loadMore
};
}
return useQuery;
}
export default makeQuery;

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 />
) : (

12
src/products/utils/data.ts
View file

@ -174,19 +174,23 @@ export function getProductUpdatePageFormData(
publicationDate: maybe(() => product.publicationDate, ""),
seoDescription: maybe(() => product.seoDescription, ""),
seoTitle: maybe(() => product.seoTitle, ""),
sku: maybe(() =>
sku: maybe(
() =>
product.productType.hasVariants
? undefined
: variants && variants[0]
? variants[0].sku
: undefined
: undefined,
""
),
stockQuantity: maybe(() =>
stockQuantity: maybe(
() =>
product.productType.hasVariants
? undefined
: variants && variants[0]
? variants[0].quantity
: undefined
: undefined,
0
)
};
}

53
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 ErrorPage from "./components/ErrorPage/ErrorPage";
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,26 +121,53 @@ export function TypedQuery<TData, TVariables>(
true
)
) {
childrenOrNotFound = <ErrorPage 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>
);
};
}

8
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -97522,6 +97522,7 @@ Ctrl + K"
disabled=""
name="sku"
type="text"
value=""
/>
<fieldset
aria-hidden="true"
@ -97543,8 +97544,8 @@ Ctrl + K"
class="MuiFormControl-root-id MuiTextField-root-id"
>
<label
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
data-shrink="false"
class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
data-shrink="true"
>
Inventory
</label>
@ -97557,6 +97558,7 @@ Ctrl + K"
disabled=""
name="stockQuantity"
type="number"
value="0"
/>
<fieldset
aria-hidden="true"
@ -97565,7 +97567,7 @@ Ctrl + K"
>
<legend
class="PrivateNotchedOutline-legend-id"
style="width:0.01px"
style="width:0"
>
<span>
​