| 1 |
import { Button } from '@wordpress/components' |
| 2 |
import { useState } from '@wordpress/element' |
| 3 |
import { useIsDevMode } from '@extendify/hooks/helpers' |
| 4 |
import { useTaxonomyStore } from '@extendify/state/Taxonomies' |
| 5 |
import { useTemplatesStore } from '@extendify/state/Templates' |
| 6 |
import { useUserStore } from '@extendify/state/User' |
| 7 |
|
| 8 |
export const DevSettings = () => { |
| 9 |
const [processing, setProcessing] = useState(false) |
| 10 |
const [canHydrate, setCanHydrate] = useState(false) |
| 11 |
const devMode = useIsDevMode() |
| 12 |
|
| 13 |
const handleReset = async () => { |
| 14 |
if (processing) return |
| 15 |
setProcessing(true) |
| 16 |
if (canHydrate) { |
| 17 |
setCanHydrate(false) |
| 18 |
useUserStore.setState({ |
| 19 |
participatingTestsGroups: [], |
| 20 |
}) |
| 21 |
await useUserStore.persist.rehydrate() |
| 22 |
setProcessing(false) |
| 23 |
return |
| 24 |
} |
| 25 |
useUserStore.persist.clearStorage() |
| 26 |
await new Promise((resolve) => setTimeout(resolve, 1000)) |
| 27 |
setCanHydrate(true) |
| 28 |
setProcessing(false) |
| 29 |
} |
| 30 |
|
| 31 |
const handleServerSwitch = async () => { |
| 32 |
const params = new URLSearchParams(window.location.search) |
| 33 |
params.delete('LOCALMODE', 1) |
| 34 |
params[params.has('DEVMODE') || devMode ? 'delete' : 'append']( |
| 35 |
'DEVMODE', |
| 36 |
1, |
| 37 |
) |
| 38 |
window.history.replaceState( |
| 39 |
null, |
| 40 |
null, |
| 41 |
window.location.pathname + '?' + params.toString(), |
| 42 |
) |
| 43 |
await new Promise((resolve) => setTimeout(resolve, 500)) |
| 44 |
window.dispatchEvent(new Event('popstate')) |
| 45 |
useTemplatesStore.getState().resetTemplates() |
| 46 |
useTemplatesStore.getState().updateSearchParams({}) |
| 47 |
useTaxonomyStore.persist.clearStorage() |
| 48 |
useTaxonomyStore.persist.rehydrate() |
| 49 |
useTemplatesStore.setState({ |
| 50 |
taxonomyDefaultState: {}, |
| 51 |
}) |
| 52 |
useTaxonomyStore |
| 53 |
.getState() |
| 54 |
.fetchTaxonomies() |
| 55 |
.then(() => { |
| 56 |
useTemplatesStore.getState().setupDefaultTaxonomies() |
| 57 |
}) |
| 58 |
} |
| 59 |
|
| 60 |
if (!window.extendifyData.devbuild) return null |
| 61 |
|
| 62 |
return ( |
| 63 |
<section className="p-6 flex flex-col space-y-6 border-l-8 border-extendify-secondary"> |
| 64 |
<div> |
| 65 |
<p className="text-base m-0 text-extendify-black"> |
| 66 |
Development Settings |
| 67 |
</p> |
| 68 |
<p className="text-sm italic m-0 text-gray-500"> |
| 69 |
Only available on dev builds |
| 70 |
</p> |
| 71 |
</div> |
| 72 |
<div className="flex space-x-2"> |
| 73 |
<Button isSecondary onClick={handleServerSwitch}> |
| 74 |
Switch to {devMode ? 'Live' : 'Dev'} Server |
| 75 |
</Button> |
| 76 |
<Button isSecondary onClick={handleReset}> |
| 77 |
{processing |
| 78 |
? 'Processing...' |
| 79 |
: canHydrate |
| 80 |
? 'OK! Press to rehydrate app' |
| 81 |
: 'Reset User Data'} |
| 82 |
</Button> |
| 83 |
</div> |
| 84 |
</section> |
| 85 |
) |
| 86 |
} |
| 87 |
|
