From 85476d9915f23fc45e64b5242e804623f50cd20a Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Mon, 31 Oct 2016 05:30:32 -0700 Subject: clean up mitmweb --- web/src/js/urlState.js | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 web/src/js/urlState.js (limited to 'web/src/js/urlState.js') diff --git a/web/src/js/urlState.js b/web/src/js/urlState.js new file mode 100644 index 00000000..118211db --- /dev/null +++ b/web/src/js/urlState.js @@ -0,0 +1,78 @@ +import { select } from "./ducks/flows" +import { selectTab } from "./ducks/ui/flow" +import { updateFilter, updateHighlight } from "./ducks/flowView" +import { toggleVisibility } from "./ducks/eventLog" + +const Query = { + SEARCH: "s", + HIGHLIGHT: "h", + SHOW_EVENTLOG: "e" +}; + +function updateStoreFromUrl(store) { + const [path, query] = window.location.hash.substr(1).split("?", 2) + const path_components = path.substr(1).split("/") + + if (path_components[0] === "flows") { + if (path_components.length == 3) { + const [flowId, tab] = path_components.slice(1) + store.dispatch(select(flowId)) + store.dispatch(selectTab(tab)) + } + } + + if (query) { + query + .split("&") + .forEach((x) => { + const [key, value] = x.split("=", 2) + switch (key) { + case Query.SEARCH: + store.dispatch(updateFilter(value)) + break + case Query.HIGHLIGHT: + store.dispatch(updateHighlight(value)) + break + case Query.SHOW_EVENTLOG: + if(!store.getState().eventLog.visible) + store.dispatch(toggleVisibility(value)) + break + default: + console.error(`unimplemented query arg: ${x}`) + } + }) + } +} + +function updateUrlFromStore(store) { + const state = store.getState() + let query = { + [Query.SEARCH]: state.flowView.filter, + [Query.HIGHLIGHT]: state.flowView.highlight, + [Query.SHOW_EVENTLOG]: state.eventLog.visible, + } + const queryStr = Object.keys(query) + .filter(k => query[k]) + .map(k => `${k}=${query[k]}`) + .join("&") + + let url + if (state.flows.selected.length > 0) { + url = `/flows/${state.flows.selected[0]}/${state.ui.flow.tab}` + } else { + url = "/flows" + } + + if (queryStr) { + url += "?" + queryStr + } + if (window.location.hash !== url) { + // FIXME: replace state + window.location.hash = url + } +} + +export default function initialize(store) { + updateStoreFromUrl(store) + store.subscribe(() => updateUrlFromStore(store)) +} -- cgit v1.2.3 From c2a130dcedcb69c35d8bb7432fa65e6542e6de19 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Tue, 1 Nov 2016 00:04:05 +0100 Subject: web: simplify flow storage --- web/src/js/urlState.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) (limited to 'web/src/js/urlState.js') diff --git a/web/src/js/urlState.js b/web/src/js/urlState.js index 118211db..77b39393 100644 --- a/web/src/js/urlState.js +++ b/web/src/js/urlState.js @@ -1,6 +1,5 @@ -import { select } from "./ducks/flows" +import { select, setFilter, setHighlight } from "./ducks/flows" import { selectTab } from "./ducks/ui/flow" -import { updateFilter, updateHighlight } from "./ducks/flowView" import { toggleVisibility } from "./ducks/eventLog" const Query = { @@ -10,7 +9,7 @@ const Query = { }; function updateStoreFromUrl(store) { - const [path, query] = window.location.hash.substr(1).split("?", 2) + const [path, query] = window.location.hash.substr(1).split("?", 2) const path_components = path.substr(1).split("/") if (path_components[0] === "flows") { @@ -28,14 +27,14 @@ function updateStoreFromUrl(store) { const [key, value] = x.split("=", 2) switch (key) { case Query.SEARCH: - store.dispatch(updateFilter(value)) + store.dispatch(setFilter(value)) break case Query.HIGHLIGHT: - store.dispatch(updateHighlight(value)) + store.dispatch(setHighlight(value)) break case Query.SHOW_EVENTLOG: - if(!store.getState().eventLog.visible) - store.dispatch(toggleVisibility(value)) + if (!store.getState().eventLog.visible) + store.dispatch(toggleVisibility()) break default: console.error(`unimplemented query arg: ${x}`) @@ -45,10 +44,10 @@ function updateStoreFromUrl(store) { } function updateUrlFromStore(store) { - const state = store.getState() - let query = { - [Query.SEARCH]: state.flowView.filter, - [Query.HIGHLIGHT]: state.flowView.highlight, + const state = store.getState() + let query = { + [Query.SEARCH]: state.flows.filter, + [Query.HIGHLIGHT]: state.flows.highlight, [Query.SHOW_EVENTLOG]: state.eventLog.visible, } const queryStr = Object.keys(query) -- cgit v1.2.3 From 77f05178ad23a8bb1f2cc43e1cdcf0593acd43d2 Mon Sep 17 00:00:00 2001 From: Maximilian Hils Date: Wed, 9 Nov 2016 13:01:25 +0100 Subject: mitmweb: minor fixes --- web/src/js/urlState.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'web/src/js/urlState.js') diff --git a/web/src/js/urlState.js b/web/src/js/urlState.js index 77b39393..ca9187b2 100644 --- a/web/src/js/urlState.js +++ b/web/src/js/urlState.js @@ -1,3 +1,10 @@ +/** + * Instead of dealing with react-router's ever-changing APIs, + * we use a simple url state manager where we only + * + * - read the initial URL state on page load + * - push updates to the URL later on. + */ import { select, setFilter, setHighlight } from "./ducks/flows" import { selectTab } from "./ducks/ui/flow" import { toggleVisibility } from "./ducks/eventLog" @@ -65,9 +72,8 @@ function updateUrlFromStore(store) { if (queryStr) { url += "?" + queryStr } - if (window.location.hash !== url) { - // FIXME: replace state - window.location.hash = url + if (window.location.hash.substr(1) !== url) { + history.replaceState(undefined, "", `/#${url}`) } } -- cgit v1.2.3