프로필 변경을 해보자.
먼저 현재 유저의 트윗을 가져와보자.
Router
<Route exact path="/profile">
<Profile userObj={userObj}/>
</Route>
이를 위해서는 당연히 userObj를 props로 받아야한다.
그리고 uid를 통해 쿼리문을 작성해보자.
Profile
const getOwnHoits = async () => {
const hoits = await dbService
.collection("hoits")
.where("creatorId", "==", userObj.uid)
.orderBy("createdAt")
//index 필요 콘솔 에러메세지에서 링크 이동해서 적용
.get();
console.log(hoits.docs.map((doc) => doc.data()));
};
useEffect(() => {
getOwnHoits();
}, []);
이런식으로 데이터를 쿼리할 수 있다.
파베의 유저는 두개의 변경값밖에 없다. displayname과 photoURL, 부족하다 느끼면 컬렉션에 users를 추가해주면 된다.
네비게이션에 먼저 displayname이 나오게 한다.
Profile
const onChange = (e) => {
const {
target: { value },
} = e;
setNewDisplayName(value);
};
const onSubmit = async () => {
if (userObj.displayName !== newDisplayName) {
await userObj.updateProfile({
displayName: newDisplayName,
});
}
console.log("변경완료!");
};
//
<form onSubmit={onSubmit}>
<input type="text" onChange={onChange} value={newDisplayName} />
<input type="submit" vlaue="Update Profile" />
</form>
새로운문제는 실시간으로 네비게이션이 바뀌지 않는다는 것이다.
App에서 userObj를 watch할수 있도록 해보자.
App
const refreshUser = () => {
const user = authService.currentUser;
setUserObj({
displayName: user.displayName,
uid: user.uid,
updateProfile: (args) => user.updateProfile(args),
});
};
setUserObj(user)을 할수도있지만 적용은 되지 않는다. 왜냐하면 크기가 너무 크기때문에 리액트가 결정장애에 빠진다.