Skip to content

Commit 4b04ecb

Browse files
TOPOFGRTOPOFGR
committed
Refactor for fetch user
1 parent 7f176f8 commit 4b04ecb

File tree

2 files changed

+65
-67
lines changed

2 files changed

+65
-67
lines changed

‎src/pages/User/index.jsx‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
import React, { useState, useEffect } from 'react';
22
import { useParams, Redirect } from 'react-router-dom';
3-
import { useSelector, shallowEqual } from 'react-redux';
3+
import { useSelector, shallowEqual, useDispatch } from 'react-redux';
44
import ClipLoader from 'react-spinners/ClipLoader';
55

66
import UserForm from 'components/UserForm';
7-
import { createUser, modifyUser } from 'state/actions/users';
7+
import { createUser, modifyUser, fetchUsers } from 'state/actions/users';
88
import paths from 'pages/Router/paths';
9-
import firebase from 'firebase.js';
109
import { useFormatMessage } from 'hooks';
1110

1211
const User = () => {
1312
const { id } = useParams();
1413

15-
const { success } = useSelector(
16-
state => ({
17-
success: state.users.success
14+
const { success, usersList } = useSelector(
15+
(state) => ({
16+
success: state.users.success,
17+
usersList: state.users.data,
1818
}),
1919
shallowEqual
2020
);
@@ -25,36 +25,31 @@ const User = () => {
2525
location: '',
2626
isAdmin: false,
2727
file: null,
28-
createdAt: new Date().toDateString()
28+
createdAt: new Date().toDateString(),
2929
});
3030

31-
useEffect(() => {
32-
const fetchUserData = async () => {
33-
const response = (
34-
await firebase
35-
.database()
36-
.ref(`users/${id}`)
37-
.once('value')
38-
).val();
39-
return response;
40-
};
31+
const dispatch = useDispatch();
4132

33+
useEffect(() => {
4234
if (id) {
43-
fetchUserData()
44-
.then(userData => {
45-
setUser({
46-
...userData,
47-
createdAt: userData.createdAt,
48-
id,
49-
isAdmin: userData.isAdmin
50-
});
51-
})
52-
.catch(() => {
53-
setUser({ error: true });
54-
});
35+
const thisUser = usersList
36+
?.filter((fetchedUser) => fetchedUser.id === id)
37+
.pop();
38+
if (thisUser) {
39+
setUser(thisUser);
40+
} else {
41+
dispatch(fetchUsers(id));
42+
}
5543
}
5644
}, [id]);
5745

46+
useEffect(() => {
47+
const thisUser = usersList
48+
?.filter((fetchedUser) => fetchedUser.id === id)
49+
.pop();
50+
setUser(thisUser);
51+
}, [usersList]);
52+
5853
const isEditing = !!id;
5954

6055
const userForm =

‎src/state/actions/users.js‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,36 @@ export const USERS_CLEAN_UP = createAction('USERS_CLEAN_UP');
3535

3636
export const USERS_CLEAR_DATA_LOGOUT = createAction('USERS_CLEAR_DATA_LOGOUT');
3737

38-
export const fetchUsers = () => {
38+
export const fetchUsers = (userId = '') => {
3939
return async (dispatch, getState) => {
4040
dispatch(checkUserData());
4141

4242
dispatch(USERS_FETCH_DATA_INIT());
43+
if (userId) {
44+
let userData;
45+
try {
46+
userData = (
47+
await firebase.database().ref(`users/${userId}`).once('value')
48+
).val();
49+
} catch (error) {
50+
toastr.error('', error);
51+
return dispatch(USERS_FETCH_DATA_FAIL({ error }));
52+
}
53+
54+
const user = { ...userData, id: userId };
55+
return dispatch(
56+
USERS_FETCH_DATA_SUCCESS({
57+
users: [user],
58+
})
59+
);
60+
}
4361

4462
const { id } = getState().auth.userData;
4563

4664
let users;
4765

4866
try {
49-
users = (
50-
await firebase
51-
.database()
52-
.ref('users')
53-
.once('value')
54-
).val();
67+
users = (await firebase.database().ref('users').once('value')).val();
5568
} catch (error) {
5669
toastr.error('', error);
5770
return dispatch(USERS_FETCH_DATA_FAIL({ error }));
@@ -60,47 +73,37 @@ export const fetchUsers = () => {
6073
const usersData = users
6174
? Object.entries(users).map(([key, value]) => ({
6275
id: key,
63-
...value
76+
...value,
6477
}))
6578
: [];
6679

6780
return dispatch(
6881
USERS_FETCH_DATA_SUCCESS({
69-
users: usersData.filter(user => user.id !== id)
82+
users: usersData.filter((user) => user.id !== id),
7083
})
7184
);
7285
};
7386
};
7487

75-
const deleteLogo = oldLogo => {
88+
const deleteLogo = (oldLogo) => {
7689
if (!oldLogo.includes('firebasestorage')) {
7790
return null;
7891
}
79-
const logoPath = oldLogo
80-
.split('users%2F')
81-
.pop()
82-
.split('?alt=media')
83-
.shift();
84-
return firebase
85-
.storage()
86-
.ref(`users/${logoPath}`)
87-
.delete();
92+
const logoPath = oldLogo.split('users%2F').pop().split('?alt=media').shift();
93+
return firebase.storage().ref(`users/${logoPath}`).delete();
8894
};
8995

90-
export const deleteUser = id => {
96+
export const deleteUser = (id) => {
9197
return async (dispatch, getState) => {
9298
dispatch(USERS_DELETE_USER_INIT());
9399
const { locale } = getState().preferences;
94100
const { logoUrl } = getState()
95-
.users.data.filter(user => user.id === id)
101+
.users.data.filter((user) => user.id === id)
96102
.pop();
97103

98104
const deleteLogoTask = logoUrl ? deleteLogo(logoUrl) : null;
99105

100-
const deleteUserTask = firebase
101-
.database()
102-
.ref(`users/${id}`)
103-
.remove();
106+
const deleteUserTask = firebase.database().ref(`users/${id}`).remove();
104107

105108
try {
106109
await Promise.all([deleteLogoTask, deleteUserTask]);
@@ -109,7 +112,7 @@ export const deleteUser = id => {
109112
toastr.error('', errorMessage);
110113
return dispatch(
111114
USERS_DELETE_USER_FAIL({
112-
error: errorMessage
115+
error: errorMessage,
113116
})
114117
);
115118
}
@@ -120,13 +123,13 @@ export const deleteUser = id => {
120123
};
121124

122125
export const clearUsersData = () => {
123-
return dispatch => {
126+
return (dispatch) => {
124127
dispatch(USERS_CLEAR_DATA());
125128
};
126129
};
127130

128131
export const clearUsersDataLogout = () => {
129-
return dispatch => {
132+
return (dispatch) => {
130133
dispatch(USERS_CLEAR_DATA_LOGOUT());
131134
};
132135
};
@@ -155,7 +158,7 @@ export const createUser = ({
155158
location,
156159
file,
157160
createdAt,
158-
isAdmin
161+
isAdmin,
159162
}) => {
160163
return async (dispatch, getState) => {
161164
dispatch(USERS_CREATE_USER_INIT());
@@ -173,7 +176,7 @@ export const createUser = ({
173176
toastr.error('', errorMessage);
174177
return dispatch(
175178
USERS_CREATE_USER_FAIL({
176-
error: errorMessage
179+
error: errorMessage,
177180
})
178181
);
179182
}
@@ -194,7 +197,7 @@ export const createUser = ({
194197

195198
const actionCodeSettings = {
196199
url: process.env.REACT_APP_LOGIN_PAGE_URL,
197-
handleCodeInApp: true
200+
handleCodeInApp: true,
198201
};
199202

200203
const sendSignInLinkToEmailTask = firebase
@@ -205,14 +208,14 @@ export const createUser = ({
205208
await Promise.all([
206209
uploadLogoTask,
207210
createUserDbTask,
208-
sendSignInLinkToEmailTask
211+
sendSignInLinkToEmailTask,
209212
]);
210213
} catch (error) {
211214
const errorMessage = firebaseError(error.code, locale);
212215
toastr.error('', errorMessage);
213216
return dispatch(
214217
USERS_CREATE_USER_FAIL({
215-
error: errorMessage
218+
error: errorMessage,
216219
})
217220
);
218221
}
@@ -230,15 +233,15 @@ export const modifyUser = ({
230233
createdAt,
231234
id,
232235
isEditing,
233-
isProfile
236+
isProfile,
234237
}) => {
235238
return async (dispatch, getState) => {
236239
dispatch(USERS_MODIFY_USER_INIT());
237240
const { locale } = getState().preferences;
238241
const { logoUrl } = isProfile
239242
? getState().auth.userData
240243
: getState()
241-
.users.data.filter(user => user.id === id)
244+
.users.data.filter((user) => user.id === id)
242245
.pop();
243246

244247
let deleteLogoTask;
@@ -255,7 +258,7 @@ export const modifyUser = ({
255258
location,
256259
createdAt,
257260
isAdmin,
258-
logoUrl: logoUrl || newLogoUrl
261+
logoUrl: logoUrl || newLogoUrl,
259262
};
260263

261264
const updateUserDbTask = firebase
@@ -276,7 +279,7 @@ export const modifyUser = ({
276279
toastr.error('', errorMessage);
277280
return dispatch(
278281
USERS_MODIFY_USER_FAIL({
279-
error: errorMessage
282+
error: errorMessage,
280283
})
281284
);
282285
}
@@ -291,4 +294,4 @@ export const modifyUser = ({
291294
};
292295
};
293296

294-
export const usersCleanUp = () => dispatch => dispatch(USERS_CLEAN_UP());
297+
export const usersCleanUp = () => (dispatch) => dispatch(USERS_CLEAN_UP());

0 commit comments

Comments
 (0)