Skip to content

Commit

Permalink
docs(playground): persist changes in URL
Browse files Browse the repository at this point in the history
  • Loading branch information
gregberge committed Dec 25, 2019
1 parent 203c9a7 commit 318d5f0
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 3 deletions.
1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"brace": "^0.11.1",
"final-form": "^4.18.6",
"gatsby": "^2.18.17",
"history": "^4.10.1",
"isomorphic-fetch": "^2.2.1",
"polished": "^3.4.2",
"prismjs": "^1.17.1",
Expand Down
8 changes: 6 additions & 2 deletions website/src/components/playground/Playground.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { DropArea } from './DropArea'
import { Loading } from './Loading'
import { settings, getInitialState, stateToSettings } from './config/settings'
import { CodeFund } from './CodeFund'
import { useQuery } from './Query'

const GlobalStyle = createGlobalStyle`
.loading {
Expand Down Expand Up @@ -158,7 +159,6 @@ const SponsorButton = styled(Button)`
`

function trackLink(event) {
console.log(event.currentTarget.href)
if (window.ga) {
event.preventDefault()
const url = event.currentTarget.href
Expand Down Expand Up @@ -248,7 +248,7 @@ export function Playground() {
const [input, setInput] = React.useState(defaultSvg)
const [output, setOutput] = React.useState('')
const [loading, setLoading] = React.useState(false)
const [state, setState] = React.useState(getInitialState)
const [state, setState] = useQuery(getInitialState)
const dialog = useDialogState({ visible: false })

const transformIdRef = React.useRef(0)
Expand All @@ -262,6 +262,10 @@ export function Playground() {

setLoading(true)

if (window.ga) {
window.ga('send', 'event', 'playground', 'transform')
}

try {
/* eslint-disable-next-line no-plusplus */
const transformId = ++transformIdRef.current
Expand Down
64 changes: 64 additions & 0 deletions website/src/components/playground/Query.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import React from 'react'
import qs from 'query-string'
import { createBrowserHistory } from 'history'

const history = createBrowserHistory()

function formatQuery(state, initialState) {
const lightState = Object.entries(state).reduce(
(lightState, [key, value]) => {
if (initialState[key] !== value) {
lightState[key] = value
}
return lightState
},
{},
)
return qs.stringify(lightState, { arrayFormat: 'bracket' })
}

function parseQuery(query) {
return qs.parse(query, { arrayFormat: 'bracket', parseBooleans: true })
}

function getLocation() {
if (typeof window === 'undefined') return { search: '', pathname: '' }
return window.location
}

function useLocation() {
const [location, setLocation] = React.useState(getLocation)
React.useEffect(() => {
return history.listen(location => setLocation(location))
}, [])
return location
}

export function useQuery(getInitialState = {}) {
const [initialState] = React.useState(getInitialState)
const location = useLocation()
const locationRef = React.useRef(location)
React.useEffect(() => {
locationRef.current = location
})
const setState = React.useCallback(
state => {
const search = formatQuery({ ...initialState, ...state }, initialState)
if (locationRef.current.search !== search) {
history.push({
pathname: locationRef.current.pathname,
search,
})
}
},
[history, initialState],
)
const state = React.useMemo(
() => ({ ...initialState, ...parseQuery(location.search) }),
[location.search, initialState],
)
React.useEffect(() => {
setState(parseQuery(locationRef.current.search))
}, [history, setState])
return [state, setState]
}
34 changes: 33 additions & 1 deletion website/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6567,6 +6567,18 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==

history@^4.10.1:
version "4.10.1"
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
dependencies:
"@babel/runtime" "^7.1.2"
loose-envify "^1.2.0"
resolve-pathname "^3.0.0"
tiny-invariant "^1.0.2"
tiny-warning "^1.0.0"
value-equal "^1.0.1"

hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
Expand Down Expand Up @@ -8107,7 +8119,7 @@ longest@^1.0.0:
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -11157,6 +11169,11 @@ resolve-from@^5.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==

resolve-pathname@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==

resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
Expand Down Expand Up @@ -12550,6 +12567,16 @@ tiny-emitter@^2.0.0:
resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==

tiny-invariant@^1.0.2:
version "1.0.6"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==

tiny-warning@^1.0.0:
version "1.0.3"
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

tinycolor2@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
Expand Down Expand Up @@ -13216,6 +13243,11 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"

value-equal@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==

vary@^1, vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
Expand Down

0 comments on commit 318d5f0

Please sign in to comment.