Refactor/sdk user auth

CHANGELOG.md

@@ -8,6 +8,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add Cypress tags to all of the buttons (also speed up tests) - #718 by @krzysztofwolski
 - Automatically choose variant attributes from url in ProductVariantPicker - #708 by @AlicjaSzu
 - Use sdk as a standalone package - #724 by @dominik-zeglen
+- Use auth api from sdk - #727 by @orzechdev
 - Fix CartRow tests - #749 by @dominik-zeglen
 - Add prettier to precommit - #766 by @dominik-zeglen
 - Do not use prettier on generated files - #773 by @dominik-zeglen

cypress/elements/saleor-account/login-selectors.js

@@ -3,5 +3,5 @@ export const LOGIN_SELECTORS = {
   emailAddressInput: "[data-test=loginOverlay] input[name='email']",
   emailPasswordInput: "[data-test=loginOverlay] input[name='password']",
   signInButton: "[data-test=submit]",
-  warningCredentialMessage: ".form-error",
+  warningCredentialMessage: ".input__error",
 };

cypress/support/login/index.js

@@ -1,11 +1,11 @@
 import { userBuilder } from "../generate";
-const mainMenuButton = "[data-test=desktopMenuLoginOverlayLink]"
-const allertPopupMessage = "[data-test=alert]"
-const emailAddressInput = "[data-test=loginOverlay] input[name='email']"
-const emailPasswordInput = "[data-test=loginOverlay] input[name='password']"
-const signInButton = "[data-test=submit]"
-const loggedInMainMenuButton = "[data-test=userButton]"
-const logOutButton = "[data-test=desktopMenuLogoutLink]"
+const mainMenuButton = "[data-test=desktopMenuLoginOverlayLink]";
+const allertPopupMessage = "[data-test=alert]";
+const emailAddressInput = "[data-test=loginOverlay] input[name='email']";
+const emailPasswordInput = "[data-test=loginOverlay] input[name='password']";
+const signInButton = "[data-test=submit]";
+const loggedInMainMenuButton = "[data-test=userButton]";
+const logOutButton = "[data-test=desktopMenuLogoutLink]";
 
 const createUser = () => {
   const user = userBuilder();
@@ -29,8 +29,8 @@ Cypress.Commands.add("loginUser", (email, password) => {
     .type(password)
     .get(signInButton)
     .click()
-    .get(allertPopupMessage)
-    .should("contain", "You are now logged in", {timeoout: 20000});
+    .get(allertPopupMessage, { timeout: 3000 })
+    .should("contain", "You are now logged in", { timeoout: 20000 });
 });
 
 Cypress.Commands.add("logoutUser", () =>
@@ -39,6 +39,6 @@ Cypress.Commands.add("logoutUser", () =>
     .click()
     .get(logOutButton)
     .click()
-    .get(allertPopupMessage)
-    .should("contain", "You are now logged out", {timeoout: 20000})
+    .get(allertPopupMessage, { timeout: 3000 })
+    .should("contain", "You are now logged out", { timeoout: 20000 })
 );

package.json

@@ -9,7 +9,7 @@
   "dependencies": {
     "@babel/runtime": "^7.5.5",
     "@lhci/cli": "^0.4.1",
-    "@saleor/sdk": "github:mirumee/saleor-sdk#737c634",
+    "@saleor/sdk": "github:mirumee/saleor-sdk#a3c0a1f",
     "@sentry/apm": "^5.15.5",
     "@sentry/browser": "^5.15.5",
     "@stripe/react-stripe-js": "^1.1.2",

src/@next/components/molecules/AccountTabTiles/AccountTile.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { commonMessages } from "@temp/intl";
-import { useAccountUpdate, useUserDetails } from "@saleor/sdk";
+import { useAccountUpdate, useAuth } from "@saleor/sdk";
 
 import { Attribute, IconButton, Tile } from "@components/atoms";
 
@@ -12,8 +12,8 @@ import * as S from "./styles";
 export const AccountTile: React.FC = () => {
   const [isEditing, setIsEditing] = React.useState(false);
   const [setAccountUpdate, { data, error }] = useAccountUpdate();
-  const { data: user } = useUserDetails();
   const intl = useIntl();
+  const { user } = useAuth();
 
   React.useEffect(() => {
     if (data && !error) {

src/@next/components/molecules/AccountTabTiles/test.tsx

@@ -10,8 +10,8 @@ import { PasswordTile } from "./PasswordTile";
 
 jest.mock("@saleor/sdk", () => ({
   useAccountUpdate: () => [jest.fn(), { data: null, error: null }],
+  useAuth: () => ({ user: { firstName: "John", lastName: "Doe" } }),
   usePasswordChange: () => [jest.fn(), { data: null, error: null }],
-  useUserDetails: () => ({ data: { firstName: "John", lastName: "Doe" } }),
 }));
 
 describe("<PasswordTile />", () => {

src/@next/pages/CartPage/CartPage.tsx

@@ -1,4 +1,4 @@
-import { useCart, useCheckout, useUserDetails } from "@saleor/sdk";
+import { useAuth, useCart, useCheckout } from "@saleor/sdk";
 import { History } from "history";
 import React from "react";
 import { FormattedMessage } from "react-intl";
@@ -31,7 +31,7 @@ const getShoppingButton = (history: History) => (
   </Button>
 );
 
-const getCheckoutButton = (history: History, user: UserDetails_me | null) => (
+const getCheckoutButton = (history: History, user?: UserDetails_me | null) => (
   <Button
     testingContext="proceedToCheckoutButton"
     onClick={() => history.push(user ? `/checkout/` : `/login/`)}
@@ -111,7 +111,7 @@ const generateCart = (
 
 export const CartPage: React.FC<IProps> = ({}: IProps) => {
   const history = useHistory();
-  const { data: user } = useUserDetails();
+  const { user } = useAuth();
   const { checkout } = useCheckout();
   const {
     loaded,

src/@next/pages/CheckoutPage/subpages/CheckoutAddressSubpage.tsx

@@ -10,7 +10,7 @@ import { useIntl } from "react-intl";
 import { RouteComponentProps, useHistory } from "react-router";
 
 import { CheckoutAddress } from "@components/organisms";
-import { useCheckout, useUserDetails } from "@saleor/sdk";
+import { useAuth, useCheckout } from "@saleor/sdk";
 import { ShopContext } from "@temp/components/ShopProvider/context";
 import { CHECKOUT_STEPS } from "@temp/core/config";
 import { commonMessages } from "@temp/intl";
@@ -49,7 +49,7 @@ const CheckoutAddressSubpageWithRef: RefForwardingComponent<
   }));
 
   const history = useHistory();
-  const { data: user } = useUserDetails();
+  const { user } = useAuth();
   const {
     checkout,
     setShippingAddress,

src/@next/pages/CheckoutPage/subpages/CheckoutPaymentSubpage.tsx

@@ -11,7 +11,7 @@ import { useIntl } from "react-intl";
 import { RouteComponentProps, useHistory } from "react-router";
 
 import { CheckoutPayment } from "@components/organisms";
-import { useCart, useCheckout, useUserDetails } from "@saleor/sdk";
+import { useAuth, useCart, useCheckout } from "@saleor/sdk";
 import { ShopContext } from "@temp/components/ShopProvider/context";
 import { CHECKOUT_STEPS } from "@temp/core/config";
 import { commonMessages } from "@temp/intl";
@@ -42,7 +42,7 @@ const CheckoutPaymentSubpageWithRef: RefForwardingComponent<
   ref
 ) => {
   const history = useHistory();
-  const { data: user } = useUserDetails();
+  const { user } = useAuth();
   const {
     checkout,
     billingAsShipping,

src/components/CheckoutLogin/index.tsx

@@ -3,7 +3,7 @@ import "./scss/index.scss";
 import React, { useContext, useState } from "react";
 import { Redirect } from "react-router";
 
-import { useUserDetails } from "@saleor/sdk";
+import { useAuth } from "@saleor/sdk";
 
 import { Offline, OfflinePlaceholder, Online, OverlayContext } from "..";
 
@@ -14,7 +14,7 @@ import SignInForm from "./SignInForm";
 const CheckoutLogin: React.FC<{}> = () => {
   const [resetPassword, setResetPassword] = useState(false);
   const overlay = useContext(OverlayContext);
-  const { data: user } = useUserDetails();
+  const { user } = useAuth();
   if (user) {
     return <Redirect to="/checkout/" />;
   }

src/components/LoginForm/index.tsx

@@ -3,10 +3,9 @@ import "./scss/index.scss";
 import * as React from "react";
 import { useIntl } from "react-intl";
 
-import { useSignIn } from "@saleor/sdk";
+import { useAuth } from "@saleor/sdk";
 import { demoMode } from "@temp/constants";
 import { commonMessages } from "@temp/intl";
-import { maybe } from "@utils/misc";
 
 import { Button, Form, TextField } from "..";
 
@@ -15,12 +14,19 @@ interface ILoginForm {
 }
 
 const LoginForm: React.FC<ILoginForm> = ({ hide }) => {
-  const [signIn, { loading, error }] = useSignIn();
+  const { signIn } = useAuth();
+  const [loading, setLoading] = React.useState(false);
+  const [errors, setErrors] = React.useState(null);
 
   const handleOnSubmit = async (evt, { email, password }) => {
     evt.preventDefault();
-    const authenticated = await signIn({ email, password });
-    if (authenticated && hide) {
+    setLoading(true);
+    const { data, dataError } = await signIn(email, password);
+    setLoading(false);
+    if (dataError?.error) {
+      setErrors(dataError.error);
+    } else if (data && hide) {
+      setErrors(null);
       hide();
     }
   };
@@ -36,11 +42,7 @@ const LoginForm: React.FC<ILoginForm> = ({ hide }) => {
 
   return (
     <div className="login-form">
-      <Form
-        data={formData}
-        errors={maybe(() => error.extraInfo.userInputErrors, [])}
-        onSubmit={handleOnSubmit}
-      >
+      <Form data={formData} errors={errors || []} onSubmit={handleOnSubmit}>
         <TextField
           name="email"
           autoComplete="email"

src/components/MainMenu/MainMenu.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { commonMessages } from "@temp/intl";
-import { useCart, useSignOut, useUserDetails } from "@saleor/sdk";
+import { useAuth, useCart } from "@saleor/sdk";
+
 import Media from "react-media";
 import { Link } from "react-router-dom";
 import ReactSVG from "react-svg";
@@ -32,8 +33,7 @@ import {
 import "./scss/index.scss";
 
 const MainMenu: React.FC = () => {
-  const { data: user } = useUserDetails();
-  const [signOut] = useSignOut();
+  const { user, signOut } = useAuth();
   const { items } = useCart();
 
   const handleSignOut = () => {

src/components/OverlayManager/Cart/Cart.tsx

@@ -7,7 +7,7 @@ import ReactSVG from "react-svg";
 
 import { TaxedMoney } from "@components/containers";
 import { commonMessages } from "@temp/intl";
-import { useCart, useCheckout, useUserDetails } from "@saleor/sdk";
+import { useAuth, useCart, useCheckout } from "@saleor/sdk";
 
 import {
   Button,
@@ -26,7 +26,7 @@ import cartImg from "../../../images/cart.svg";
 import closeImg from "../../../images/x.svg";
 
 const Cart: React.FC<{ overlay: OverlayContextInterface }> = ({ overlay }) => {
-  const { data: user } = useUserDetails();
+  const { user } = useAuth();
   const { checkout } = useCheckout();
   const {
     items,