diff --git a/graphql/queries.graphql b/graphql/queries.graphql index 68f319a3d..61d118ee5 100644 --- a/graphql/queries.graphql +++ b/graphql/queries.graphql @@ -485,3 +485,20 @@ mutation addressSetDefaultMutation( } } } + +query meDetailsQuery { + me { + id + lastLogin + dateJoined + email + firstName + lastName + avatar { + ...ImageFragment + } + orders { + totalCount + } + } +} diff --git a/pages/account/index.tsx b/pages/account/index.tsx new file mode 100644 index 000000000..63f1f7d8c --- /dev/null +++ b/pages/account/index.tsx @@ -0,0 +1,37 @@ +import BaseTemplate from "@/components/BaseTemplate"; +import { useMeDetailsQuery } from "@/saleor/api"; +import { useRouter } from "next/router"; + +const Account: React.VFC = () => { + const router = useRouter(); + const { data, loading } = useMeDetailsQuery(); + if (loading) { + return ; + } + if (!data?.me?.id) { + router.push("/login"); + // todo: resolve issue with auth token not automatically added to the client + // because application stuck in redirecting ATM + // router.push({ pathname: "/login", query: { next: "/account" } }); + return null; + } + const user = data.me; + return ( + +
+
+
Your account
+
+
+

{user.email}

+

{user.firstName}

+

{user.lastName}

+

{user.dateJoined}

+

{user.lastLogin}

+
+
+
+ ); +}; + +export default Account; diff --git a/pages/login.tsx b/pages/login.tsx index 109308dcd..77280a0a6 100644 --- a/pages/login.tsx +++ b/pages/login.tsx @@ -19,12 +19,14 @@ const LoginPage: React.VFC = () => { setError: setErrorForm, getValues, } = useForm({}); + + const redirectURL = router.query.next?.toString() || "/"; + const handleLogin = handleSubmitForm(async (formData: LoginFormData) => { const { data } = await login({ email: formData.email, password: formData.password, }); - console.log(data); if (data?.tokenCreate?.errors[0]) { // Unable to sign in. @@ -33,9 +35,10 @@ const LoginPage: React.VFC = () => { }); if (authenticated) { // User signed in successfully. - router.push("/"); + router.push(redirectURL); return null; } + return (
diff --git a/saleor/api.tsx b/saleor/api.tsx index 8b0a6c137..4fd97147c 100644 --- a/saleor/api.tsx +++ b/saleor/api.tsx @@ -12808,6 +12808,11 @@ export type AddressSetDefaultMutationVariables = Exact<{ export type AddressSetDefaultMutation = { __typename?: 'Mutation', addressSetDefault?: Maybe<{ __typename?: 'AddressSetDefault', errors: Array<{ __typename?: 'AccountError', field?: Maybe, message?: Maybe, code: AccountErrorCode }> }> }; +export type MeDetailsQueryVariables = Exact<{ [key: string]: never; }>; + + +export type MeDetailsQuery = { __typename?: 'Query', me?: Maybe<{ __typename?: 'User', id: string, lastLogin?: Maybe, dateJoined: any, email: string, firstName: string, lastName: string, avatar?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe }>, orders?: Maybe<{ __typename?: 'OrderCountableConnection', totalCount?: Maybe }> }> }; + export const AddressFragmentDoc = gql` fragment AddressFragment on Address { phone @@ -13845,6 +13850,51 @@ export function useAddressSetDefaultMutation(baseOptions?: Apollo.MutationHookOp export type AddressSetDefaultMutationHookResult = ReturnType; export type AddressSetDefaultMutationMutationResult = Apollo.MutationResult; export type AddressSetDefaultMutationMutationOptions = Apollo.BaseMutationOptions; +export const MeDetailsQueryDocument = gql` + query meDetailsQuery { + me { + id + lastLogin + dateJoined + email + firstName + lastName + avatar { + ...ImageFragment + } + orders { + totalCount + } + } +} + ${ImageFragmentDoc}`; + +/** + * __useMeDetailsQuery__ + * + * To run a query within a React component, call `useMeDetailsQuery` and pass it any options that fit your needs. + * When your component renders, `useMeDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useMeDetailsQuery({ + * variables: { + * }, + * }); + */ +export function useMeDetailsQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(MeDetailsQueryDocument, options); + } +export function useMeDetailsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(MeDetailsQueryDocument, options); + } +export type MeDetailsQueryHookResult = ReturnType; +export type MeDetailsQueryLazyQueryHookResult = ReturnType; +export type MeDetailsQueryQueryResult = Apollo.QueryResult; export type AccountAddressCreateKeySpecifier = ('accountErrors' | 'address' | 'errors' | 'user' | AccountAddressCreateKeySpecifier)[]; export type AccountAddressCreateFieldPolicy = { accountErrors?: FieldPolicy | FieldReadFunction,