git.iko.soy/bridge
on 685bb75 help sign in
bridge/src/lib/useRouter.js
143 lines 3.6 kB history raw
1import { useCallback, useMemo, useState, useRef, useEffect } from 'react';
2import { last, includes as _includes, findIndex, get } 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(
89 key =>
90 _includes(
91 routes.map(r => r.key),
92 key
93 ),
94 [routes]
95 );
96 const data = useMemo(() => {
97 return get(last(routes), 'data', NULL_DATA);
98 }, [routes]);
99 const Route = useMemo(() => views[peek().key], [views, peek]);
101 // Scroll to top of page with each route transition
102 useEffect(() => {
103 window.scrollTo(0, 0);
104 }, [routes]);
106 useEffect(() => {
107 // on router mount, register new state with browser
108 window.history.pushState(null, null, null);
109 }, []);
111 // capture browser pop in primary router
112 useEffect(() => {
113 // store the previous onpopstate handler
114 oldPopState.current = window.onpopstate;
116 // construct new onpopstate handler
117 window.onpopstate = e => {
118 e && e.stopImmediatePropagation();
119 pop();
120 };
122 return () => {
123 // reset the onpopstate to the previous version
124 window.onpopstate = oldPopState.current;
125 };
126 }, [size, pop, oldPopState]);
128 return {
129 Route,
130 names,
131 routes,
132 push,
133 popAndPush,
134 pop,
135 popTo,
136 replaceWith,
137 reset,
138 peek,
139 size,
140 includes,
141 data,
142 };