git.iko.soy/bridge
on 1464137 help sign in
bridge/src/lib/useRouter.js
140 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 console.log('attempting to pass to parent');
57 window.history.back();
58 }
60 console.log('at root');
62 return;
63 }
65 // on pop, tell the browser of a new state to avoid giving the user
66 // the ability to go forward
67 // TODO: allow the user to go forward by storing our data in history
68 // and using the url for other state
69 // (or just importing an actually good router lib)
70 window.history.pushState(null, null, null);
72 // pop as expected
73 return setRoutes(routes => [...routes.slice(0, routes.length - count)]);
74 },
75 [size, setRoutes, oldPopState]
76 );
77 const popTo = useCallback(
78 name => {
79 const index = findIndex(routes, route => route.key === name);
80 return pop(routes.length - 1 - index);
81 },
82 [pop, routes]
83 );
84 const peek = useCallback(() => last(routes), [routes]);
85 const replaceWith = useCallback(routes => setRoutes(() => routes), [
86 setRoutes,
87 ]);
88 const reset = useCallback(() => setRoutes(initialRoutes), [
89 setRoutes,
90 initialRoutes,
91 ]);
92 const includes = useCallback(key => _includes(routes.map(r => r.key), key), [
93 routes,
94 ]);
95 const data = useMemo(() => last(routes).data || NULL_DATA, [routes]);
96 const Route = useMemo(() => views[peek().key], [views, peek]);
98 // Scroll to top of page with each route transition
99 useEffect(() => {
100 window.scrollTo(0, 0);
101 }, [routes]);
103 useEffect(() => {
104 // on router mount, register new state with browser
105 window.history.pushState(null, null, null);
106 }, []);
108 // capture browser pop in primary router
109 useEffect(() => {
110 // store the previous onpopstate handler
111 oldPopState.current = window.onpopstate;
113 // construct new onpopstate handler
114 window.onpopstate = e => {
115 e.stopImmediatePropagation();
116 pop();
117 };
119 return () => {
120 // reset the onpopstate to the previous version
121 window.onpopstate = oldPopState.current;
122 };
123 }, [size, pop, oldPopState]);
125 return {
126 Route,
127 names,
128 routes,
129 push,
130 popAndPush,
131 pop,
132 popTo,
133 replaceWith,
134 reset,
135 peek,
136 size,
137 includes,
138 data,
139 };