1import Layout from '../layouts/Centered';
 2import {useTranslation} from 'react-i18next';
 3import {useRouter} from 'next/router';
 4import Loading from '../containers/Loading';
 5import Profile from '../containers/Profile';
 6import useProfile from '../hooks/useProfile';
 7import useAuthStore from '../stores/useAuthStore';
 8import {useUpdateMeMutation, EditUserInput} from '../generated/graphql';
 9
10const ProfilePage = () => {
11  const router = useRouter();
12  const {t} = useTranslation();
13  const logout = useAuthStore(s => s.logout);
14  const {profile} = useProfile();
15  const [updateProfile] = useUpdateMeMutation();
16
17  const onUpdateProfile = (userUpdate: EditUserInput) =>
18    updateProfile({variables: {userUpdate}});
19
20  const menuActions = [
21    {
22      label: t('menu.new_event'),
23      onClick: () => router.push('/'),
24      id: 'AddEventTabs',
25    },
26    {
27      label: t('menu.dashboard'),
28      onClick: () => router.push('/dashboard'),
29      id: 'DashboardTabs',
30    },
31  ];
32
33  if (!profile) return <Loading />;
34
35  return (
36    <Layout menuTitle={t('profile.title')} menuActions={menuActions} goBack>
37      <Profile
38        profile={profile}
39        updateProfile={onUpdateProfile}
40        logout={() => logout()}
41      />
42    </Layout>
43  );
44};
45
46export default ProfilePage;