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