[LandingPage] reuse useCurrentUser in LandingPage

which will push user id to gtm dataLayer properly

components/LandingPage/Header.js

@@ -2,15 +2,15 @@ import React, { useEffect, useState } from 'react';
 import gql from 'graphql-tag';
 import { c, t } from 'ttag';
 import cx from 'clsx';
-import { useQuery, useLazyQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/react-hooks';
 import { useRouter } from 'next/router';
 import { makeStyles, withStyles, useTheme } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Badge from '@material-ui/core/Badge';
 import { animated, useSpring } from 'react-spring';
 import Link from 'next/link';
-import Avatar from 'components/AppLayout/Widgets/Avatar';
 
+import useCurrentUser from 'lib/useCurrentUser';
 import NavLink from 'components/NavLink';
 import * as Widgets from 'components/AppLayout/Widgets';
 
@@ -33,17 +33,6 @@ const LIST_UNSOLVED_ARTICLES = gql`
   }
 `;
 
-const USER_QUERY = gql`
-  query UserLevelQuery {
-    GetUser {
-      id
-      name
-      ...AvatarData
-    }
-  }
-  ${Avatar.fragments.AvatarData}
-`;
-
 const CustomBadge = withStyles(theme => ({
   root: {
     verticalAlign: 'baseline' /* override badge default */,
@@ -167,8 +156,7 @@ const LandingPageHeader = React.memo(({ onLoginModalOpen }) => {
 
   const [isMobileMenuOpen, setMobileMenuOpen] = useState(false);
 
-  const [loadUser, { data: userData }] = useLazyQuery(USER_QUERY);
-  const user = userData?.GetUser;
+  const user = useCurrentUser();
 
   const { data } = useQuery(LIST_UNSOLVED_ARTICLES, {
     ssr: false, // no number needed for SSR
@@ -198,9 +186,6 @@ const LandingPageHeader = React.memo(({ onLoginModalOpen }) => {
     }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => loadUser(), []);
-
   useEffect(() => {
     handleScroll();
     window.addEventListener('scroll', handleScroll);