Add account page

graphql/queries.graphql

@@ -485,3 +485,20 @@ mutation addressSetDefaultMutation(
     }
   }
 }
+
+query meDetailsQuery {
+  me {
+    id
+    lastLogin
+    dateJoined
+    email
+    firstName
+    lastName
+    avatar {
+      ...ImageFragment
+    }
+    orders {
+      totalCount
+    }
+  }
+}

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 <BaseTemplate isLoading={true} />;
+  }
+  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 (
+    <BaseTemplate>
+      <div className="py-10">
+        <header className="mb-4">
+          <div className="max-w-7xl mx-auto px-8">Your account</div>
+        </header>
+        <main className="max-w-7xl mx-auto px-8">
+          <p>{user.email}</p>
+          <p>{user.firstName}</p>
+          <p>{user.lastName}</p>
+          <p>{user.dateJoined}</p>
+          <p>{user.lastLogin}</p>
+        </main>
+      </div>
+    </BaseTemplate>
+  );
+};
+
+export default Account;

pages/login.tsx

@@ -19,12 +19,14 @@ const LoginPage: React.VFC = () => {
     setError: setErrorForm,
     getValues,
   } = useForm<LoginFormData>({});
+
+  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 (
     <div className="min-h-screen bg-no-repeat bg-cover bg-center bg-gradient-to-r from-blue-100 to-blue-500">
       <div className="flex justify-end">

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<string>, message?: Maybe<string>, code: AccountErrorCode }> }> };
 
+export type MeDetailsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type MeDetailsQuery = { __typename?: 'Query', me?: Maybe<{ __typename?: 'User', id: string, lastLogin?: Maybe<any>, dateJoined: any, email: string, firstName: string, lastName: string, avatar?: Maybe<{ __typename?: 'Image', url: string, alt?: Maybe<string> }>, orders?: Maybe<{ __typename?: 'OrderCountableConnection', totalCount?: Maybe<number> }> }> };
+
 export const AddressFragmentDoc = gql`
     fragment AddressFragment on Address {
   phone
@@ -13845,6 +13850,51 @@ export function useAddressSetDefaultMutation(baseOptions?: Apollo.MutationHookOp
 export type AddressSetDefaultMutationHookResult = ReturnType<typeof useAddressSetDefaultMutation>;
 export type AddressSetDefaultMutationMutationResult = Apollo.MutationResult<AddressSetDefaultMutation>;
 export type AddressSetDefaultMutationMutationOptions = Apollo.BaseMutationOptions<AddressSetDefaultMutation, AddressSetDefaultMutationVariables>;
+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<MeDetailsQuery, MeDetailsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MeDetailsQuery, MeDetailsQueryVariables>(MeDetailsQueryDocument, options);
+      }
+export function useMeDetailsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MeDetailsQuery, MeDetailsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MeDetailsQuery, MeDetailsQueryVariables>(MeDetailsQueryDocument, options);
+        }
+export type MeDetailsQueryHookResult = ReturnType<typeof useMeDetailsQuery>;
+export type MeDetailsQueryLazyQueryHookResult = ReturnType<typeof useMeDetailsQueryLazyQuery>;
+export type MeDetailsQueryQueryResult = Apollo.QueryResult<MeDetailsQuery, MeDetailsQueryVariables>;
 export type AccountAddressCreateKeySpecifier = ('accountErrors' | 'address' | 'errors' | 'user' | AccountAddressCreateKeySpecifier)[];
 export type AccountAddressCreateFieldPolicy = {
 	accountErrors?: FieldPolicy<any> | FieldReadFunction<any>,