git.iko.soy/bridge
on a9801ce help sign in
bridge/src/lib/useRouter.js
136 lines 3.6 kB history raw
1import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
2import { last, includes as _includes, findIndex } from 'lodash';
4const NULL_DATA = {};
6/**
7 * @param names map of string to view key, used for consumer references
8 * @param views map of view keys to react component views
9 * @param initialRoutes initial set of routes following the { key, data } format
10 */
11export default function useRouter({
12 names = {},
13 views = {},
14 initialRoutes = [],
15}) {
16 const [routes, setRoutes] = useState(initialRoutes);
18 const oldPopState = useRef();
20 const size = routes.length;
21 const push = useCallback(
22 (key, data) => {
23 if (!views[key]) {
24 throw new Error(
25 `Invalid Route: ${key}. Possible Routes: ${Object.keys(views).join(
26 ', '
27 )}`
28 );
29 }
30 setRoutes(routes => [...routes, { key, data }]);
31 },
32 [setRoutes, views]
33 );
34 const popAndPush = useCallback(
35 (key, data = {}) => {
36 if (!views[key]) {
37 throw new Error(
38 `Invalid Route: ${key}. Possible Routes: ${Object.keys(views).join(
39 ', '
40 )}`
41 );
42 }
44 setRoutes(routes => [
45 ...routes.slice(0, routes.length - 1),
46 { key, data },
47 ]);
48 },
49 [setRoutes, views]
50 );
51 const pop = useCallback(
52 (count = 1) => {
53 if (size <= 1) {
54 // if we are at the root, pass this event to our parent
55 if (oldPopState.current) {
56 oldPopState.current();
57 }
58 return;
59 }
61 // on pop, tell the browser of a new state to avoid giving the user
62 // the ability to go forward
63 // TODO: allow the user to go forward by storing our data in history
64 // and using the url for other state
65 // (or just importing an actually good router lib)
66 window.history.pushState(null, null, null);
68 // pop as expected
69 return setRoutes(routes => [...routes.slice(0, routes.length - count)]);
70 },
71 [size, setRoutes, oldPopState]
72 );
73 const popTo = useCallback(
74 name => {
75 const index = findIndex(routes, route => route.key === name);
76 return pop(routes.length - 1 - index);
77 },
78 [pop, routes]
79 );
80 const peek = useCallback(() => last(routes), [routes]);
81 const replaceWith = useCallback(routes => setRoutes(() => routes), [
82 setRoutes,
83 ]);
84 const reset = useCallback(() => setRoutes(initialRoutes), [
85 setRoutes,
86 initialRoutes,
87 ]);
88 const includes = useCallback(key => _includes(routes.map(r => r.key), key), [
89 routes,
90 ]);
91 const data = useMemo(() => last(routes).data || NULL_DATA, [routes]);
92 const Route = useMemo(() => views[peek().key], [views, peek]);
94 // Scroll to top of page with each route transition
95 useEffect(() => {
96 window.scrollTo(0, 0);
97 }, [routes]);
99 useEffect(() => {
100 // on router mount, register new state with browser
101 window.history.pushState(null, null, null);
102 }, []);
104 // capture browser pop in primary router
105 useEffect(() => {
106 // store the previous onpopstate handler
107 oldPopState.current = window.onpopstate;
109 // construct new onpopstate handler
110 window.onpopstate = e => {
111 e && e.stopImmediatePropagation();
112 pop();
113 };
115 return () => {
116 // reset the onpopstate to the previous version
117 window.onpopstate = oldPopState.current;
118 };
119 }, [size, pop, oldPopState]);
121 return {
122 Route,
123 names,
124 routes,
125 push,
126 popAndPush,
127 pop,
128 popTo,
129 replaceWith,
130 reset,
131 peek,
132 size,
133 includes,
134 data,
135 };