atlp-rwanda/knights-ecomm-fe | Build 9927772577 | src/components/Dashboard/adminDashbord/SingleUser.tsx | Coveralls

1

import React, { useEffect, useState } from 'react';

1✔

2

import toast from 'react-hot-toast';

1✔

3

import { useNavigate, useParams } from 'react-router-dom';

1✔

4

import { user } from './Users';

1✔

5

import axios from 'axios';

1✔

6

import { useSelector } from 'react-redux';

1✔

7

import { RootState } from '../../../redux/store';

1✔

8

import formatDateAndTime from '../../../utils/formartDate&Time';

1✔

9

import { PropagateLoader } from 'react-spinners';

1✔

10

import ConfirmDeletePopup from '../../../components/Popups/ConfirmDeletePopup';

1✔

11

import { deactivateUser } from '../../../utils/updateUserStatus/deactivateUser';

1✔

12

import { activateUser } from '../../../utils/updateUserStatus/activateUser';

1✔

13

1✔

14

function SingleUser() {

13✔

15

  const initialState = {

13✔

16

    id: '',

13✔

17

    firstName: '',

13✔

18

    lastName: '',

13✔

19

    email: '',

13✔

20

    gender: '',

13✔

21

    phoneNumber: '',

13✔

22

    photoUrl: '',

13✔

23

    verified: undefined,

13✔

24

    twoFactorEnabled: undefined,

13✔

25

    status: undefined,

13✔

26

    role: undefined,

13✔

27

    createdAt: new Date()

13✔

28

};

13✔

29

13✔

30

  const { id } = useParams();

13✔

31

  const navigate = useNavigate();

13✔

32

  const { userToken } = useSelector((state: RootState) => state.auth);

13✔

33

  const [currentUser, setCurrentUser] = useState<

13✔

34

    Partial<Omit<user, 'createdAt'>> & { createdAt: Date; email: string; firstName: string }

13✔

35

  >(initialState);

13✔

36

  const [loading, setLoading] = useState(true);

13✔

37

  const [relode, setRelode] = useState(false);

13✔

38

  const [upadatingLoading, setUpadatingLaoding] = useState(false);

13✔

39

13✔

40

  useEffect(() => {

13✔

41

    const fetchData = async () => {

6✔

42

      try {

6✔

43

        const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/user/single/${id}`, {

6✔

44

          headers: {

6✔

45

            Authorization: `Bearer ${userToken}`

6✔

46

6✔

47

});

6✔

48

        if (response.status === 200) {

6✔

49

          const user: user = response.data.user;

6✔

50

          setCurrentUser(user);

6✔

51

6✔

52

        setLoading(false);

6✔

56

};

6✔

57

    fetchData();

6✔

58

  }, [userToken, relode, id]);

13✔

59

13✔

60

  const createdAt = formatDateAndTime(currentUser.createdAt);

13✔

61

13✔

62

  return (

13✔

63

    <div className="p-7 w-full h-[calc(100vh-94px)]  bg-[#EEF5FF] overflow-y-scroll">

13✔

64

      <div className="flex flex-col gap-5">

13✔

65

        <div>

13✔

66

          <h1 className="text-[20px] font-semibold">All Users</h1>

13✔

67

          <p className="text-[14px] font-light flex items-center">

13✔

68

            Home &gt;{' '}

13✔

69

            <span className="hover:underline cursor-pointer mx-1" onClick={() => navigate(`/Admin/dashboard/users`)}>

13✔

70

              Users

13✔

71

            </span>{' '}

13✔

72

            &gt;{' '}

13✔

73

            <span data-testid="userIdentifier">

13✔

74

              #{currentUser.firstName?.toLowerCase()}

13✔

75

              {currentUser.lastName?.toLowerCase()}

13✔

76

            </span>

13✔

77

          </p>

13✔

78

        </div>

13✔

79

13✔

80

        <div>

13✔

81

          <div className="w-full p-7 bg-white">

13✔

82

            {loading ? (

13✔

83

              <div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">

13✔

84

                <PropagateLoader color="#070f2b" />

13✔

85

              </div>

13✔

86

            ) : (

6✔

87

              <div className="flex flex-col gap-6">

6✔

88

                <div className="w-full flex flex-col gap-4 xmd:flex-row xmd:gap-[20%] md:gap-[25%] justify-center">

6✔

89

                  <div className="flex flex-col gap-3 self-center xmd:self-start">

6✔

90

                    <p className="text-[16px] font-semibold">Profile Information</p>

6✔

91

                    <div

6✔

92

                      data-testid="profileIdentifier"

6✔

93

                      className="w-52 h-44 bg-neutral-100 rounded-lg flex justify-center object-contain"

6✔

94

6✔

95

                      {currentUser.photoUrl ? (

6✔

96

                        <img className="h-full w-full rounded-lg" src={currentUser.photoUrl} alt="User profile" />

6✔

97

                      ) : (

6✔

98

<p

6✔

99

                          className="self-center

1✔

100

1✔

101

1✔

102

                          No profile picture

1✔

103

                        </p>

1✔

104

)}

5✔

105

                    </div>

5✔

106

                  </div>

5✔

107

                  <div className="flex flex-col gap-3 justify-center items-center">

5✔

108

                    <p className="text-[15px] font-medium self-center underline">Basic Info</p>

5✔

109

                    <div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">

5✔

110

                      <p>Status</p>

5✔

111

                      <div

6✔

112

                        data-testid="statusIdentifier"

6✔

113

                        className=" border-[1px] border-[#CCCBCB] px-2 py-1 rounded-lg"

6✔

114

6✔

115

                        {currentUser.status?.toLowerCase() === 'active' ? (

6✔

116

                          <div className="col-span-2 flex items-center gap-1 justify-start">

6✔

117

                            <div className="w-[10px] h-[10px] rounded-full bg-[#4D9A00]"></div>

6✔

118

                            <p>Active</p>

6✔

119

                          </div>

6✔

120

                        ) : (

6✔

121

                          <div className="col-span-2 flex items-center gap-1 justify-start">

6✔

122

                            <div className="w-[10px] h-[10px] rounded-full bg-[#FF3333]"></div>

6✔

123

                            <p>Suspended</p>

5✔

124

                          </div>

5✔

125

)}

5✔

126

                      </div>

5✔

127

                    </div>

1✔

128

                    <div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">

1✔

129

                      <p>Member since</p>

1✔

130

                      <p>{createdAt.date}</p>

1✔

131

                    </div>

1✔

132

                    <div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">

6✔

133

                      <p>Role</p>

6✔

134

                      <p>{currentUser.role}</p>

6✔

135

                    </div>

6✔

136

6✔

137

                    {currentUser.status?.toLowerCase() === 'active' ? (

6✔

138

                      <div>

6✔

139

                        <ConfirmDeletePopup

6✔

140

                          trigger={

6✔

141

                            <button

6✔

142

                              data-testid="deactivateStatusButton"

6✔

143

                              className="px-6 text-[15px] self-center mt-4 h-10 rounded-lg bg-[#FF3333] text-white"

6✔

144

6✔

145

                              {upadatingLoading ? <p>loading...</p> : <p>Deactivate</p>}

5✔

146

                            </button>

5✔

147

5✔

148

                          title={`Confirm Deactivating User`}

5✔

149

                          body={`Are you sure you want to deactivate user: ${currentUser.firstName + ' ' + currentUser.lastName}`}

5✔

150

                          onSubmit={() =>

5✔

151

                            deactivateUser(

5✔

153

                              currentUser.email,

5✔

154

                              currentUser.firstName,

5✔

155

                              setRelode,

5✔

156

                              setUpadatingLaoding

5✔

157

5✔

158

1✔

159

/>

1✔

160

                      </div>

1✔

161

                    ) : (

1✔

162

                      <div>

1✔

163

                        <ConfirmDeletePopup

1✔

164

                          trigger={

1✔

165

                            <button

5✔

166

                              data-testid="activateStatusButton"

5✔

167

                              className="px-6 text-[15px] self-center mt-4 h-10 rounded-lg bg-[#4D9A00] text-white"

5✔

168

1✔

169

                              {upadatingLoading ? <p>loading...</p> : <p>Activate</p>}

1✔

170

                            </button>

1✔

171

1✔

172

                          title={`Confirm Activating User`}

1✔

173

                          body={`Are you sure you want to activate user: ${currentUser.firstName + ' ' + currentUser.lastName}`}

1✔

174

                          onSubmit={() =>

1✔

175

                            activateUser(

1✔

177

                              currentUser.email,

1✔

178

                              currentUser.firstName,

1✔

179

                              setRelode,

1✔

180

                              setUpadatingLaoding

1✔

181

1✔

182

1✔

183

/>

1✔

184

                      </div>

1✔

185

)}

1✔

186

                  </div>

1✔

187

                </div>

1✔

188

                <div className="flex flex-wrap gap-x-[140px] gap-y-4 justify-center">

1✔

189

                  <div className="flex flex-col gap-1">

1✔

190

                    <p className="text-[15px] font-medium">First Name</p>

1✔

191

                    <div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">

1✔

192

                      <p className="text-[14px] font-normal">{currentUser.firstName}</p>

6✔

193

                    </div>

6✔

194

                  </div>

6✔

195

6✔

196

                  <div className="flex flex-col gap-1">

6✔

197

                    <p className="text-[15px] font-medium">Last Name</p>

6✔

198

                    <div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">

6✔

199

                      <p className="text-[14px] font-normal">{currentUser.lastName}</p>

6✔

200

                    </div>

6✔

201

                  </div>

6✔

202

6✔

203

                  <div className="flex flex-col gap-1">

6✔

204

                    <p className="text-[15px] font-medium">Email</p>

6✔

205

                    <div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">

6✔

206

                      <p className="text-[14px] font-normal">{currentUser.email}</p>

6✔

207

                    </div>

6✔

208

                  </div>

6✔

209

6✔

210

                  <div className="flex flex-col gap-1">

6✔

211

                    <p className="text-[15px] font-medium">Contact No</p>

6✔

212

                    <div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">

6✔

213

                      <p className="text-[14px] font-normal">{currentUser.phoneNumber}</p>

6✔

214

                    </div>

6✔

215

                  </div>

6✔

216

6✔

217

                  <div className="flex flex-col gap-1">

6✔

218

                    <p className="text-[15px] font-medium">Gender</p>

6✔

219

                    <div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">

6✔

220

                      <p className="text-[14px] font-normal">{currentUser.gender}</p>

6✔

221

                    </div>

6✔

222

                  </div>

6✔

223

6✔

224

                  <div className="flex flex-col gap-1">

6✔

225

                    <p className="text-[15px] font-medium">Two factor authentication</p>

6✔

226

                    <div

6✔

227

                      data-testid="2FAIdentifier"

6✔

228

                      className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg"

6✔

229

6✔

230

                      {currentUser.twoFactorEnabled ? (

6✔

231

                        <p className="text-[14px] font-normal">Enabled</p>

6✔

232

                      ) : (

6✔

233

                        <p className="text-[14px] font-normal">Disbled</p>

6✔

234

)}

6✔

235

                    </div>

6✔

236

                  </div>

6✔

237

                </div>

6✔

238

              </div>

1✔

239

)}

5✔

240

          </div>

5✔

241

        </div>

6✔

242

      </div>

6✔

243

    </div>

6✔

244

);

6✔

245

6✔

246

13✔

247

export default SingleUser;

13✔

atlp-rwanda / knights-ecomm-fe / 9927772577

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1	import React, { useEffect, useState } from 'react';	1✔
2	import toast from 'react-hot-toast';	1✔
3	import { useNavigate, useParams } from 'react-router-dom';	1✔
4	import { user } from './Users';	1✔
5	import axios from 'axios';	1✔
6	import { useSelector } from 'react-redux';	1✔
7	import { RootState } from '../../../redux/store';	1✔
8	import formatDateAndTime from '../../../utils/formartDate&Time';	1✔
9	import { PropagateLoader } from 'react-spinners';	1✔
10	import ConfirmDeletePopup from '../../../components/Popups/ConfirmDeletePopup';	1✔
11	import { deactivateUser } from '../../../utils/updateUserStatus/deactivateUser';	1✔
12	import { activateUser } from '../../../utils/updateUserStatus/activateUser';	1✔
13		1✔
14	function SingleUser() {	13✔
15	const initialState = {	13✔
16	id: '',	13✔
17	firstName: '',	13✔
18	lastName: '',	13✔
19	email: '',	13✔
20	gender: '',	13✔
21	phoneNumber: '',	13✔
22	photoUrl: '',	13✔
23	verified: undefined,	13✔
24	twoFactorEnabled: undefined,	13✔
25	status: undefined,	13✔
26	role: undefined,	13✔
27	createdAt: new Date()	13✔
28	};	13✔
29		13✔
30	const { id } = useParams();	13✔
31	const navigate = useNavigate();	13✔
32	const { userToken } = useSelector((state: RootState) => state.auth);	13✔
33	const [currentUser, setCurrentUser] = useState<	13✔
34	Partial<Omit<user, 'createdAt'>> & { createdAt: Date; email: string; firstName: string }	13✔
35	>(initialState);	13✔
36	const [loading, setLoading] = useState(true);	13✔
37	const [relode, setRelode] = useState(false);	13✔
38	const [upadatingLoading, setUpadatingLaoding] = useState(false);	13✔
39		13✔
40	useEffect(() => {	13✔
41	const fetchData = async () => {	6✔
42	try {	6✔
43	const response = await axios.get(`${import.meta.env.VITE_APP_API_URL}/user/single/${id}`, {	6✔
44	headers: {	6✔
45	Authorization: `Bearer ${userToken}`	6✔
46	}	6✔
47	});	6✔
48	if (response.status === 200) {	6✔
49	const user: user = response.data.user;	6✔
50	setCurrentUser(user);	6✔
51	}	6✔
52	setLoading(false);	6✔
53	} catch (error) {	6!
NEW 54	toast.error('Failed to fetch user');	×
NEW 55	}	×
56	};	6✔
57	fetchData();	6✔
58	}, [userToken, relode, id]);	13✔
59		13✔
60	const createdAt = formatDateAndTime(currentUser.createdAt);	13✔
61		13✔
62	return (	13✔
63	<div className="p-7 w-full h-[calc(100vh-94px)] bg-[#EEF5FF] overflow-y-scroll">	13✔
64	<div className="flex flex-col gap-5">	13✔
65	<div>	13✔
66	<h1 className="text-[20px] font-semibold">All Users</h1>	13✔
67	<p className="text-[14px] font-light flex items-center">	13✔
68	Home >{' '}	13✔
69	<span className="hover:underline cursor-pointer mx-1" onClick={() => navigate(`/Admin/dashboard/users`)}>	13✔
70	Users	13✔
71	</span>{' '}	13✔
72	>{' '}	13✔
73	<span data-testid="userIdentifier">	13✔
74	#{currentUser.firstName?.toLowerCase()}	13✔
75	{currentUser.lastName?.toLowerCase()}	13✔
76	</span>	13✔
77	</p>	13✔
78	</div>	13✔
79		13✔
80	<div>	13✔
81	<div className="w-full p-7 bg-white">	13✔
82	{loading ? (	13✔
83	<div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">	13✔
84	<PropagateLoader color="#070f2b" />	13✔
85	</div>	13✔
86	) : (	6✔
87	<div className="flex flex-col gap-6">	6✔
88	<div className="w-full flex flex-col gap-4 xmd:flex-row xmd:gap-[20%] md:gap-[25%] justify-center">	6✔
89	<div className="flex flex-col gap-3 self-center xmd:self-start">	6✔
90	<p className="text-[16px] font-semibold">Profile Information</p>	6✔
91	<div	6✔
92	data-testid="profileIdentifier"	6✔
93	className="w-52 h-44 bg-neutral-100 rounded-lg flex justify-center object-contain"	6✔
94	>	6✔
95	{currentUser.photoUrl ? (	6✔
96	<img className="h-full w-full rounded-lg" src={currentUser.photoUrl} alt="User profile" />	6✔
97	) : (	6✔
98	<p	6✔
99	className="self-center	1✔
100	"	1✔
101	>	1✔
102	No profile picture	1✔
103	</p>	1✔
104	)}	5✔
105	</div>	5✔
106	</div>	5✔
107	<div className="flex flex-col gap-3 justify-center items-center">	5✔
108	<p className="text-[15px] font-medium self-center underline">Basic Info</p>	5✔
109	<div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">	5✔
110	<p>Status</p>	5✔
111	<div	6✔
112	data-testid="statusIdentifier"	6✔
113	className=" border-[1px] border-[#CCCBCB] px-2 py-1 rounded-lg"	6✔
114	>	6✔
115	{currentUser.status?.toLowerCase() === 'active' ? (	6✔
116	<div className="col-span-2 flex items-center gap-1 justify-start">	6✔
117	<div className="w-[10px] h-[10px] rounded-full bg-[#4D9A00]"></div>	6✔
118	<p>Active</p>	6✔
119	</div>	6✔
120	) : (	6✔
121	<div className="col-span-2 flex items-center gap-1 justify-start">	6✔
122	<div className="w-[10px] h-[10px] rounded-full bg-[#FF3333]"></div>	6✔
123	<p>Suspended</p>	5✔
124	</div>	5✔
125	)}	5✔
126	</div>	5✔
127	</div>	1✔
128	<div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">	1✔
129	<p>Member since</p>	1✔
130	<p>{createdAt.date}</p>	1✔
131	</div>	1✔
132	<div className="flex justify-between w-48 xmd:w-72 text-[14px] items-center">	6✔
133	<p>Role</p>	6✔
134	<p>{currentUser.role}</p>	6✔
135	</div>	6✔
136		6✔
137	{currentUser.status?.toLowerCase() === 'active' ? (	6✔
138	<div>	6✔
139	<ConfirmDeletePopup	6✔
140	trigger={	6✔
141	<button	6✔
142	data-testid="deactivateStatusButton"	6✔
143	className="px-6 text-[15px] self-center mt-4 h-10 rounded-lg bg-[#FF3333] text-white"	6✔
144	>	6✔
145	{upadatingLoading ? <p>loading...</p> : <p>Deactivate</p>}	5✔
146	</button>	5✔
147	}	5✔
148	title={`Confirm Deactivating User`}	5✔
149	body={`Are you sure you want to deactivate user: ${currentUser.firstName + ' ' + currentUser.lastName}`}	5✔
150	onSubmit={() =>	5✔
151	deactivateUser(	5✔
152	userToken,	5!
153	currentUser.email,	5✔
154	currentUser.firstName,	5✔
155	setRelode,	5✔
156	setUpadatingLaoding	5✔
157	)	5✔
158	}	1✔
159	/>	1✔
160	</div>	1✔
161	) : (	1✔
162	<div>	1✔
163	<ConfirmDeletePopup	1✔
164	trigger={	1✔
165	<button	5✔
166	data-testid="activateStatusButton"	5✔
167	className="px-6 text-[15px] self-center mt-4 h-10 rounded-lg bg-[#4D9A00] text-white"	5✔
168	>	1✔
169	{upadatingLoading ? <p>loading...</p> : <p>Activate</p>}	1✔
170	</button>	1✔
171	}	1✔
172	title={`Confirm Activating User`}	1✔
173	body={`Are you sure you want to activate user: ${currentUser.firstName + ' ' + currentUser.lastName}`}	1✔
174	onSubmit={() =>	1✔
175	activateUser(	1✔
176	userToken,	1!
177	currentUser.email,	1✔
178	currentUser.firstName,	1✔
179	setRelode,	1✔
180	setUpadatingLaoding	1✔
181	)	1✔
182	}	1✔
183	/>	1✔
184	</div>	1✔
185	)}	1✔
186	</div>	1✔
187	</div>	1✔
188	<div className="flex flex-wrap gap-x-[140px] gap-y-4 justify-center">	1✔
189	<div className="flex flex-col gap-1">	1✔
190	<p className="text-[15px] font-medium">First Name</p>	1✔
191	<div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">	1✔
192	<p className="text-[14px] font-normal">{currentUser.firstName}</p>	6✔
193	</div>	6✔
194	</div>	6✔
195		6✔
196	<div className="flex flex-col gap-1">	6✔
197	<p className="text-[15px] font-medium">Last Name</p>	6✔
198	<div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">	6✔
199	<p className="text-[14px] font-normal">{currentUser.lastName}</p>	6✔
200	</div>	6✔
201	</div>	6✔
202		6✔
203	<div className="flex flex-col gap-1">	6✔
204	<p className="text-[15px] font-medium">Email</p>	6✔
205	<div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">	6✔
206	<p className="text-[14px] font-normal">{currentUser.email}</p>	6✔
207	</div>	6✔
208	</div>	6✔
209		6✔
210	<div className="flex flex-col gap-1">	6✔
211	<p className="text-[15px] font-medium">Contact No</p>	6✔
212	<div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">	6✔
213	<p className="text-[14px] font-normal">{currentUser.phoneNumber}</p>	6✔
214	</div>	6✔
215	</div>	6✔
216		6✔
217	<div className="flex flex-col gap-1">	6✔
218	<p className="text-[15px] font-medium">Gender</p>	6✔
219	<div className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg">	6✔
220	<p className="text-[14px] font-normal">{currentUser.gender}</p>	6✔
221	</div>	6✔
222	</div>	6✔
223		6✔
224	<div className="flex flex-col gap-1">	6✔
225	<p className="text-[15px] font-medium">Two factor authentication</p>	6✔
226	<div	6✔
227	data-testid="2FAIdentifier"	6✔
228	className="h-9 w-72 px-3 flex items-center bg-[#E7EBEF] border-[2px] border-[#CCCBCB] rounded-lg"	6✔
229	>	6✔
230	{currentUser.twoFactorEnabled ? (	6✔
231	<p className="text-[14px] font-normal">Enabled</p>	6✔
232	) : (	6✔
233	<p className="text-[14px] font-normal">Disbled</p>	6✔
234	)}	6✔
235	</div>	6✔
236	</div>	6✔
237	</div>	6✔
238	</div>	1✔
239	)}	5✔
240	</div>	5✔
241	</div>	6✔
242	</div>	6✔
243	</div>	6✔
244	);	6✔
245	}	6✔
246		13✔
247	export default SingleUser;	13✔

atlp-rwanda / knights-ecomm-fe / 9927772577

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous