git.iko.soy/bridge
on d67b9e5 help sign in
bridge/src/lib/useRouter.js
138 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(() => {
92 return last(routes).data || NULL_DATA;
93 }, [routes]);
94 const Route = useMemo(() => views[peek().key], [views, peek]);
96 // Scroll to top of page with each route transition
97 useEffect(() => {
98 window.scrollTo(0, 0);
99 }, [routes]);
101 useEffect(() => {
102 // on router mount, register new state with browser
103 window.history.pushState(null, null, null);
104 }, []);
106 // capture browser pop in primary router
107 useEffect(() => {
108 // store the previous onpopstate handler
109 oldPopState.current = window.onpopstate;
111 // construct new onpopstate handler
112 window.onpopstate = e => {
113 e && e.stopImmediatePropagation();
114 pop();
115 };
117 return () => {
118 // reset the onpopstate to the previous version
119 window.onpopstate = oldPopState.current;
120 };
121 }, [size, pop, oldPopState]);
123 return {
124 Route,
125 names,
126 routes,
127 push,
128 popAndPush,
129 pop,
130 popTo,
131 replaceWith,
132 reset,
133 peek,
134 size,
135 includes,
136 data,
137 };