Add full GQL support to product editor

imports/client/ui/components/PrimaryAppBar/PrimaryAppBar.js

@@ -1,16 +1,20 @@
 import React, { Children } from "react";
 import PropTypes from "prop-types";
 import classNames from "classnames";
-import AppBar from "@material-ui/core/AppBar";
-import Hidden from "@material-ui/core/Hidden";
-import IconButton from "@material-ui/core/IconButton";
-import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "@material-ui/core/Typography";
-import withStyles from "@material-ui/core/styles/withStyles";
+import {
+  AppBar,
+  Box,
+  Hidden,
+  IconButton,
+  Toolbar,
+  Typography,
+  makeStyles
+} from "@material-ui/core";
 import MenuIcon from "mdi-material-ui/Menu";
+import ArrowLeftIcon from "mdi-material-ui/ArrowLeft";
 import { UIContext } from "../../context/UIContext";
 
-const styles = (theme) => ({
+const useStyles = makeStyles((theme) => ({
   action: {
     marginLeft: theme.spacing()
   },
@@ -23,15 +27,17 @@ const styles = (theme) => ({
   title: {
     flex: 1
   }
-});
+}));
 
 /**
  * An AppBar for the main content area that provides a place for a title,
  * actions to the right, and a menu button for opening and closing the sidebar drawer menu
  * @param {Object} props Component props
  * @returns {React.Component} A react component
  */
-function PrimaryAppBar({ children, classes, title }) {
+function PrimaryAppBar({ children, title, onBackButtonClick, shouldShowBackButton = true }) {
+  const classes = useStyles();
+
   return (
     <UIContext.Consumer>
       {({ isMobile, isDetailDrawerOpen, isPrimarySidebarOpen, onTogglePrimarySidebar }) => {
@@ -55,6 +61,13 @@ function PrimaryAppBar({ children, classes, title }) {
                   <MenuIcon />
                 </IconButton>
               </Hidden>
+              {(shouldShowBackButton && onBackButtonClick) && (
+                <Box paddingRight={1}>
+                  <IconButton onClick={onBackButtonClick}>
+                    <ArrowLeftIcon />
+                  </IconButton>
+                </Box>
+              )}
               <Typography
                 className={classes.title}
                 component="h1"
@@ -78,8 +91,10 @@ function PrimaryAppBar({ children, classes, title }) {
 PrimaryAppBar.propTypes = {
   children: PropTypes.node,
   classes: PropTypes.object,
+  onBackButtonClick: PropTypes.func,
   onToggleDrawerOpen: PropTypes.func,
+  shouldShowBackButton: PropTypes.bool,
   title: PropTypes.node
 };
 
-export default withStyles(styles, { name: "RuiPrimaryAppBar" })(PrimaryAppBar);
+export default PrimaryAppBar;

imports/plugins/core/catalog/client/components/publishControls.js

@@ -6,7 +6,7 @@ import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import withStyles from "@material-ui/core/styles/withStyles";
 import { i18next } from "/client/api";
-import PrimaryAppBar from "/imports/client/ui/components/PrimaryAppBar/PrimaryAppBar";
+import { Box } from "@material-ui/core";
 
 const publishProductsToCatalog = gql`
   mutation ($productIds: [ID]!) {
@@ -67,7 +67,7 @@ class PublishControls extends Component {
     const { documentIds, onPublishClick } = this.props;
 
     return (
-      <PrimaryAppBar>
+      <Box display="flex" alignItems="center">
         {this.renderChangesNotification()}
         <Mutation mutation={publishProductsToCatalog} onCompleted={() => this.renderOnCompletedAlert()} onError={(error) => this.renderOnErrorAlert(error)}>
           {(mutationFunc) => (
@@ -82,7 +82,7 @@ class PublishControls extends Component {
             </Button>
           )}
         </Mutation>
-      </PrimaryAppBar>
+      </Box>
     );
   }
 }

imports/plugins/core/dashboard/client/components/CreateFirstShopForm.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import SimpleSchema from "simpl-schema";
 import Button from "@reactioncommerce/catalyst/Button";
 import TextField from "@material-ui/core/TextField";
-import { makeStyles } from "@material-ui/styles";
+import { makeStyles } from "@material-ui/core";
 import muiOptions from "reacto-form/cjs/muiOptions";
 import useReactoForm from "reacto-form/cjs/useReactoForm";
 

imports/plugins/core/taxes/client/hooks/useTaxCodes.js

@@ -0,0 +1,32 @@
+import gql from "graphql-tag";
+import { useQuery } from "@apollo/react-hooks";
+
+const getTaxCodes = gql`
+  query getTaxCodes($shopId: ID!) {
+    taxCodes(shopId: $shopId) {
+      code
+      label
+    }
+  }
+`;
+
+/**
+ * Get tax codes
+ * @param {Object} args An object containing arguments
+ * @param {String} args.shopId  Shop Id
+ * @returns {Object} An object containing tax codes
+ */
+export default function useTaxCodes({ shopId }) {
+  const { data, isLoading, refetch } = useQuery(getTaxCodes, {
+    variables: {
+      shopId
+    },
+    skip: !shopId
+  });
+
+  return {
+    isLoading,
+    refetch,
+    taxCodes: data
+  };
+}