Fix bugs in UserAccount
This commit is contained in:
parent
c7f6906797
commit
ab77ae4c02
|
|
@ -1,121 +1,209 @@
|
|||
import React, { useEffect } from "react";
|
||||
|
||||
/* UI */
|
||||
|
||||
import TitleBar from "./Titlebar";
|
||||
|
||||
import Profile from "./Profile";
|
||||
|
||||
import PhotoViewer from "./PhotoViewer";
|
||||
|
||||
import HomePage from "./HomePage";
|
||||
|
||||
import FriendsListPage from "./FriendsListPage";
|
||||
import { BrowserRouter, Switch, Route } from "react-router-dom";
|
||||
|
||||
/* Router */
|
||||
|
||||
import {
|
||||
BrowserRouter as Router,
|
||||
Switch,
|
||||
Route,
|
||||
useLocation,
|
||||
} from "react-router-dom";
|
||||
|
||||
/* Layout */
|
||||
|
||||
import Container from "react-bootstrap/Container";
|
||||
|
||||
/* Redux */
|
||||
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
currentUserOffline,
|
||||
currentUserOnline,
|
||||
subscribeCurrentUser,
|
||||
subscribeUsers,
|
||||
subscribePosts,
|
||||
} from "../backend/backend";
|
||||
import {
|
||||
friendsListPageSet,
|
||||
profileLinkSet,
|
||||
watchSet,
|
||||
friendsListPageSet,
|
||||
profileLinkSet,
|
||||
watchSet,
|
||||
} from "../features/accountPage/accountPageSlice";
|
||||
|
||||
const UserAccount = (props) => {
|
||||
const profileLink = useSelector((state) => state.accountPage.profileLink);
|
||||
/* Mock-backend helpers */
|
||||
|
||||
const currentUser = useSelector((state) => state.currentUser);
|
||||
const users = useSelector((state) => state.users);
|
||||
const isFriendsListPage = useSelector(
|
||||
(state) => state.accountPage.isFriendsListPage
|
||||
);
|
||||
import {
|
||||
currentUserOffline,
|
||||
currentUserOnline,
|
||||
subscribeCurrentUser,
|
||||
subscribeUsers,
|
||||
subscribePosts,
|
||||
} from "../backend/backend";
|
||||
|
||||
const dispatch = useDispatch();
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
useEffect(() => {
|
||||
const unsubscribeCurrentUser = subscribeCurrentUser();
|
||||
const unsubscribeUsers = subscribeUsers();
|
||||
const unsubscribePosts = subscribePosts();
|
||||
//We make currentUser online
|
||||
currentUserOnline();
|
||||
//We add event listener for the event when the user closes the browser window
|
||||
const beforeunloadListener = (e) => {
|
||||
//We put the user offline
|
||||
currentUserOffline();
|
||||
};
|
||||
window.addEventListener("beforeunload", beforeunloadListener);
|
||||
//we add event listener for the event when the browser window change visibility
|
||||
const visibilitychangeListener = (e) => {
|
||||
if (document.visibilityState === "visible") currentUserOnline();
|
||||
else currentUserOffline();
|
||||
};
|
||||
document.addEventListener("visibilitychange", visibilitychangeListener);
|
||||
return () => {
|
||||
unsubscribeCurrentUser();
|
||||
unsubscribeUsers();
|
||||
unsubscribePosts();
|
||||
};
|
||||
}, []);
|
||||
/* Keep Redux in sync with the current pathname (once per navigation) */
|
||||
|
||||
//We add the index of user to the profileLink if there are more users with the exact same userName
|
||||
const addIndexToProfileLink = () => {
|
||||
if (currentUser && currentUser.index && currentUser.index > 0) {
|
||||
return `${profileLink}.${currentUser.index}`;
|
||||
} else return profileLink;
|
||||
};
|
||||
const newProfileLink = addIndexToProfileLink();
|
||||
useEffect(() => dispatch(profileLinkSet(newProfileLink)), [dispatch, newProfileLink]);
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
if (users.length === 0 || !currentUser) {
|
||||
return <div>...Loading</div>;
|
||||
}
|
||||
const RouteStateSync = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<div className="bg-200 vw-100 main-container overflow-hidden">
|
||||
<Container className="w-100 p-0" fluid>
|
||||
<BrowserRouter>
|
||||
<TitleBar />
|
||||
<Switch>
|
||||
<Route
|
||||
path="/fakebook/friends/list"
|
||||
render={() => {
|
||||
dispatch(friendsListPageSet(true));
|
||||
return <FriendsListPage />;
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
path={`/fakebook/photo/:userID/:n`}
|
||||
render={() => <PhotoViewer />}
|
||||
/>
|
||||
<Route
|
||||
path="/fakebook/watch"
|
||||
render={() => {
|
||||
dispatch(friendsListPageSet(false));
|
||||
dispatch(watchSet(true));
|
||||
return <HomePage className="pt-5" />;
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
path={`/fakebook/:userName`}
|
||||
render={() => {
|
||||
if (isFriendsListPage) return <FriendsListPage />;
|
||||
else {
|
||||
return <Profile />;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Route
|
||||
path="/fakebook"
|
||||
render={() => {
|
||||
dispatch(friendsListPageSet(false));
|
||||
dispatch(watchSet(false));
|
||||
return <HomePage className="pt-5" />;
|
||||
}}
|
||||
/>
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const { pathname } = location;
|
||||
|
||||
/* friends list page */
|
||||
|
||||
dispatch(friendsListPageSet(pathname.startsWith("/fakebook/friends/list")));
|
||||
|
||||
/* watch page (videos feed) */
|
||||
|
||||
dispatch(watchSet(pathname.startsWith("/fakebook/watch")));
|
||||
}, [location, dispatch]);
|
||||
|
||||
return null; // renders nothing
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
const UserAccount = () => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
/* Redux selectors */
|
||||
|
||||
const profileLink = useSelector((state) => state.accountPage.profileLink);
|
||||
|
||||
const currentUser = useSelector((state) => state.currentUser);
|
||||
|
||||
const users = useSelector((state) => state.users);
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/* Firestore-like subscriptions & online/offline flag */
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
const unsubCurrentUser = subscribeCurrentUser();
|
||||
|
||||
const unsubUsers = subscribeUsers();
|
||||
|
||||
const unsubPosts = subscribePosts();
|
||||
|
||||
/* mark user online */
|
||||
|
||||
currentUserOnline();
|
||||
|
||||
/* window closed or refreshed */
|
||||
|
||||
const beforeUnload = () => currentUserOffline();
|
||||
|
||||
window.addEventListener("beforeunload", beforeUnload);
|
||||
|
||||
/* tab visibility switch */
|
||||
|
||||
const visChange = () =>
|
||||
document.visibilityState === "visible"
|
||||
? currentUserOnline()
|
||||
: currentUserOffline();
|
||||
|
||||
document.addEventListener("visibilitychange", visChange);
|
||||
|
||||
/* cleanup */
|
||||
|
||||
return () => {
|
||||
unsubCurrentUser();
|
||||
|
||||
unsubUsers();
|
||||
|
||||
unsubPosts();
|
||||
|
||||
window.removeEventListener("beforeunload", beforeUnload);
|
||||
|
||||
document.removeEventListener("visibilitychange", visChange);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/* Build unique profile link (.index appended once) */
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentUser) return;
|
||||
|
||||
/* remove any existing trailing ".number" */
|
||||
|
||||
const base = profileLink.replace(/\.\d+$/, "");
|
||||
|
||||
const newLink =
|
||||
currentUser.index && currentUser.index > 0
|
||||
? `${base}.${currentUser.index}`
|
||||
: base;
|
||||
|
||||
dispatch(profileLinkSet(newLink));
|
||||
}, [currentUser, profileLink, dispatch]);
|
||||
|
||||
/* Loading guard */
|
||||
|
||||
if (!currentUser || users.length === 0) {
|
||||
return <div>…Loading</div>;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
/* Render */
|
||||
|
||||
/* -------------------------------------------------- */
|
||||
|
||||
return (
|
||||
<div className='bg-200 vw-100 main-container overflow-hidden'>
|
||||
<Container className='w-100 p-0' fluid>
|
||||
<Router>
|
||||
<RouteStateSync />
|
||||
|
||||
<TitleBar />
|
||||
|
||||
<Switch>
|
||||
{/* Friends list ------------------------------------------------ */}
|
||||
|
||||
<Route path='/fakebook/friends/list' component={FriendsListPage} />
|
||||
|
||||
{/* Single photo ----------------------------------------------- */}
|
||||
|
||||
<Route path='/fakebook/photo/:userID/:n' component={PhotoViewer} />
|
||||
|
||||
{/* Watch (video feed) ----------------------------------------- */}
|
||||
|
||||
<Route
|
||||
path='/fakebook/watch'
|
||||
render={(props) => <HomePage {...props} className='pt-5' />}
|
||||
/>
|
||||
|
||||
{/* User profile ----------------------------------------------- */}
|
||||
|
||||
<Route path='/fakebook/:userName' component={Profile} />
|
||||
|
||||
{/* News-feed root --------------------------------------------- */}
|
||||
|
||||
<Route
|
||||
path='/fakebook'
|
||||
exact
|
||||
render={(props) => <HomePage {...props} className='pt-5' />}
|
||||
/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</Container>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserAccount;
|
||||
|
|
|
|||
Loading…
Reference in New Issue