feat(mobx): add layout (paths + sections)

src/components/navigation/left/HomeSidebar.tsx

@@ -15,6 +15,7 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Unreads } from "../../../redux/reducers/unreads";
@@ -37,6 +38,7 @@ type Props = {
 const HomeSidebar = observer((props: Props) => {
     const { pathname } = useLocation();
     const client = useContext(AppContext);
+    const layout = useApplicationState().layout;
     const { channel } = useParams<{ channel: string }>();
     const { openScreen } = useIntermediate();
 
@@ -52,15 +54,8 @@ const HomeSidebar = observer((props: Props) => {
     if (channel && !obj) return <Redirect to="/" />;
     if (obj) useUnreads({ ...props, channel: obj });
 
-    useEffect(() => {
-        if (!channel) return;
-
-        dispatch({
-            type: "LAST_OPENED_SET",
-            parent: "home",
-            child: channel,
-        });
-    }, [channel]);
+    // Track what page the user was last on (in home page).
+    useEffect(() => layout.setLastHomePath(pathname), [pathname]);
 
     channels.sort((b, a) => a.timestamp.localeCompare(b.timestamp));
 

src/components/navigation/left/ServerListSidebar.tsx

@@ -12,8 +12,8 @@ import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../../../mobx/State";
 import { connectState } from "../../../redux/connector";
-import { LastOpened } from "../../../redux/reducers/last_opened";
 import { Unreads } from "../../../redux/reducers/unreads";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -195,11 +195,11 @@ function Swoosh() {
 
 interface Props {
     unreads: Unreads;
-    lastOpened: LastOpened;
 }
 
-export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
+export const ServerListSidebar = observer(({ unreads }: Props) => {
     const client = useClient();
+    const layout = useApplicationState().layout;
 
     const { server: server_id } = useParams<{ server?: string }>();
     const server = server_id ? client.servers.get(server_id) : undefined;
@@ -268,7 +268,7 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
             <ServerList>
                 <ConditionalLink
                     active={homeActive}
-                    to={lastOpened.home ? `/channel/${lastOpened.home}` : "/"}>
+                    to={layout.getLastHomePath()}>
                     <ServerEntry home active={homeActive}>
                         <Swoosh />
                         <div
@@ -295,15 +295,12 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                 <LineDivider />
                 {servers.map((entry) => {
                     const active = entry.server._id === server?._id;
-                    const id = lastOpened[entry.server._id];
 
                     return (
                         <ConditionalLink
                             key={entry.server._id}
                             active={active}
-                            to={`/server/${entry.server._id}${
-                                id ? `/channel/${id}` : ""
-                            }`}>
+                            to={layout.getServerPath(entry.server._id)}>
                             <ServerEntry
                                 active={active}
                                 onContextMenu={attachContextMenu("Menu", {
@@ -359,6 +356,5 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
 export default connectState(ServerListSidebar, (state) => {
     return {
         unreads: state.unreads,
-        lastOpened: state.lastOpened,
     };
 });

src/components/navigation/left/ServerSidebar.tsx

@@ -10,6 +10,7 @@ import PaintCounter from "../../../lib/PaintCounter";
 import { internalEmit } from "../../../lib/eventEmitter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../../../mobx/State";
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { Notifications } from "../../../redux/reducers/notifications";
@@ -58,6 +59,7 @@ const ServerList = styled.div`
 
 const ServerSidebar = observer((props: Props) => {
     const client = useClient();
+    const layout = useApplicationState().layout;
     const { server: server_id, channel: channel_id } =
         useParams<{ server: string; channel?: string }>();
 
@@ -75,16 +77,15 @@ const ServerSidebar = observer((props: Props) => {
         );
     if (channel_id && !channel) return <Redirect to={`/server/${server_id}`} />;
 
+    // Handle unreads; FIXME: should definitely not be here
     if (channel) useUnreads({ ...props, channel });
 
+    // Track which channel the user was last on.
     useEffect(() => {
         if (!channel_id) return;
+        if (!server_id) return;
 
-        dispatch({
-            type: "LAST_OPENED_SET",
-            parent: server_id!,
-            child: channel_id!,
-        });
+        layout.setLastOpened(server_id, channel_id);
     }, [channel_id, server_id]);
 
     const uncategorised = new Set(server.channel_ids);