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

src/components/common/CollapsibleSection.tsx

@@ -1,7 +1,6 @@
 import { ChevronDown } from "@styled-icons/boxicons-regular";
 
-import { State, store } from "../../redux";
-import { Action } from "../../redux/reducers";
+import { useApplicationState } from "../../mobx/State";
 
 import Details from "../ui/Details";
 
@@ -25,27 +24,14 @@ export default function CollapsibleSection({
     children,
     ...detailsProps
 }: Props) {
-    const state: State = store.getState();
-
-    function setState(state: boolean) {
-        if (state === defaultValue) {
-            store.dispatch({
-                type: "SECTION_TOGGLE_UNSET",
-                id,
-            } as Action);
-        } else {
-            store.dispatch({
-                type: "SECTION_TOGGLE_SET",
-                id,
-                state,
-            } as Action);
-        }
-    }
+    const layout = useApplicationState().layout;
 
     return (
         <Details
-            open={state.sectionToggle[id] ?? defaultValue}
-            onToggle={(e) => setState(e.currentTarget.open)}
+            open={layout.getSectionState(id, defaultValue)}
+            onToggle={(e) =>
+                layout.setSectionState(id, e.currentTarget.open, defaultValue)
+            }
             {...detailsProps}>
             <summary>
                 <div class="padding">

src/components/navigation/BottomNavigation.tsx

@@ -5,8 +5,7 @@ import styled, { css } from "styled-components";
 
 import ConditionalLink from "../../lib/ConditionalLink";
 
-import { connectState } from "../../redux/connector";
-import { LastOpened } from "../../redux/reducers/last_opened";
+import { useApplicationState } from "../../mobx/State";
 
 import { useClient } from "../../context/revoltjs/RevoltClient";
 
@@ -47,19 +46,14 @@ const Button = styled.a<{ active: boolean }>`
         `}
 `;
 
-interface Props {
-    lastOpened: LastOpened;
-}
-
-export const BottomNavigation = observer(({ lastOpened }: Props) => {
+export default observer(() => {
     const client = useClient();
+    const layout = useApplicationState().layout;
     const user = client.users.get(client.user!._id);
 
     const history = useHistory();
     const path = useLocation().pathname;
 
-    const channel_id = lastOpened["home"];
-
     const friendsActive = path.startsWith("/friends");
     const settingsActive = path.startsWith("/settings");
     const homeActive = !(friendsActive || settingsActive);
@@ -73,14 +67,11 @@ export const BottomNavigation = observer(({ lastOpened }: Props) => {
                             if (settingsActive) {
                                 if (history.length > 0) {
                                     history.goBack();
+                                    return;
                                 }
                             }
 
-                            if (channel_id) {
-                                history.push(`/channel/${channel_id}`);
-                            } else {
-                                history.push("/");
-                            }
+                            history.push(layout.getLastHomePath());
                         }}>
                         <Message size={24} />
                     </IconButton>
@@ -117,9 +108,3 @@ export const BottomNavigation = observer(({ lastOpened }: Props) => {
         </Base>
     );
 });
-
-export default connectState(BottomNavigation, (state) => {
-    return {
-        lastOpened: state.lastOpened,
-    };
-});

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);