profile ProfileClient.tsx

0% Statements 0/15
0% Branches 0/23
0% Functions 0/1
0% Lines 0/15
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client';
 
import { useQuery } from '@apollo/client/react';
import {
  Avatar,
  Group,
  Paper,
  Skeleton,
  Stack,
  Text,
  Title,
} from '@mantine/core';
import { useSession } from 'next-auth/react';
import { useTranslations } from 'next-intl';
import { GET_USER_BY_ID } from '@/lib/graphql/queries';
import AccountInfo from './AccountInfo';
import Password from './Password';
import PersonalData from './PersonalData';
 
export interface ProfileUser {
  id: string;
  firstName: string;
  lastName: string;
  userName: string;
  email: string;
  role: string;
  locale: string;
  createdAt: string;
  updatedAt: string;
}
 
interface GetUserData {
  getUserById: ProfileUser;
}
 
const ProfileClient = () => {
  const translate = useTranslations();
  const { data: session, status } = useSession();
  const userId = session?.user?.id;
 
  const {
    data: userData,
    loading,
    refetch,
  } = useQuery<GetUserData>(GET_USER_BY_ID, {
    variables: { id: userId ?? '' },
    skip: !userId,
    fetchPolicy: 'network-only',
  });
 
  const user = userData?.getUserById;
  const firstName = user?.firstName ?? session?.user?.firstName ?? '';
  const lastName = user?.lastName ?? session?.user?.lastName ?? '';
  const initials =
    firstName && lastName
      ? `${firstName.charAt(0)}${lastName.charAt(0)}`
      : firstName.charAt(0) || '?';
  const isSessionLoading = status === 'loading';
  const isInitialLoading = isSessionLoading || (loading && !user);
 
  if (isSessionLoading) {
    return (
      <Stack gap="lg">
        <Paper shadow="sm" radius="lg" p={{ base: 'md', md: 'xl' }}>
          <Group gap="lg" wrap="nowrap">
            <Skeleton circle h={72} w={72} />
            <Stack gap={4}>
              <Skeleton h={28} w={200} />
              <Skeleton h={16} w={280} />
            </Stack>
          </Group>
        </Paper>
        <Skeleton h={200} radius="lg" />
        <Skeleton h={200} radius="lg" />
        <Skeleton h={200} radius="lg" />
      </Stack>
    );
  }
 
  return (
    <Stack gap="lg">
      <Paper shadow="sm" radius="lg" p={{ base: 'md', md: 'xl' }}>
        <Group gap="lg" wrap="nowrap">
          {isInitialLoading ? (
            <Skeleton circle h={72} w={72} />
          ) : (
            <Avatar
              size={72}
              radius="xl"
              color="pink"
              variant="filled"
              alt={`${firstName} ${lastName}`}
            >
              {initials.toUpperCase()}
            </Avatar>
          )}
          <Stack gap={4}>
            {isInitialLoading ? (
              <>
                <Skeleton h={28} w={200} />
                <Skeleton h={16} w={280} />
              </>
            ) : (
              <>
                <Title order={2}>
                  {translate('user.profileGreeting', { firstName })}
                </Title>
                <Text size="sm" c="dimmed">
                  {translate('user.profileSubtitle')}
                </Text>
              </>
            )}
          </Stack>
        </Group>
      </Paper>
 
      <PersonalData user={user} loading={loading} refetch={refetch} />
      <AccountInfo user={user} loading={loading} />
      <Password />
    </Stack>
  );
};
 
export default ProfileClient;