You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
carbon/components/EditorContainer.js

133 lines
3.3 KiB
JavaScript

// Theirs
import React from 'react'
import { useAsyncCallback } from '@dawnlabs/tacklebox'
import Editor from './Editor'
import Toasts from './Toasts'
import LoginButton from './LoginButton'
import { useAPI } from './ApiContext'
import { useAuth } from './AuthContext'
import { THEMES } from '../lib/constants'
import { updateRouteState } from '../lib/routing'
import { getThemes, saveThemes, clearSettings, saveSettings } from '../lib/util'
function onReset() {
clearSettings()
if (window.navigator && navigator.serviceWorker) {
navigator.serviceWorker.getRegistrations().then(registrations => {
5 years ago
registrations.forEach(registration => {
registration.unregister()
5 years ago
})
})
}
}
function toastsReducer(curr, action) {
switch (action.type) {
case 'ADD': {
if (!curr.find(t => t.children === action.toast.children)) {
return curr.concat(action.toast)
}
return curr
}
case 'SET': {
return action.toasts
}
}
throw new Error('Unsupported action')
}
function EditorContainer(props) {
const [themes, updateThemes] = React.useState(THEMES)
const api = useAPI()
const user = useAuth()
const [update, { loading }] = useAsyncCallback(api.snippet.update)
React.useEffect(() => {
const storedThemes = getThemes(localStorage) || []
if (storedThemes) {
updateThemes(currentThemes => [...storedThemes, ...currentThemes])
}
}, [])
React.useEffect(() => {
saveThemes(themes.filter(({ custom }) => custom))
}, [themes])
// XXX use context
const [snippet, setSnippet] = React.useState(props.snippet || null)
const [toasts, setToasts] = React.useReducer(toastsReducer, [])
const snippetId = snippet && snippet.id
React.useEffect(() => {
if ('/' + (snippetId || '') === props.router.asPath) {
return
}
window.history.pushState(null, null, '/' + (snippetId || ''))
// props.router.replace(props.router.asPath, '/' + (snippetId || ''), { shallow: true })
}, [snippetId, props.router])
function onEditorUpdate(state) {
if (loading) {
return
}
if (!user) {
updateRouteState(props.router, state)
saveSettings(state)
} else {
const updates = state
if (!snippet) {
update(snippetId, updates).then(newSnippet => {
if (newSnippet && newSnippet.id) {
setSnippet(newSnippet)
setToasts({
type: 'ADD',
toast: { children: 'Snippet saved!', closable: true }
})
}
})
} else if (snippet.userId === user.uid) {
update(snippetId, updates).then(() => {
setToasts({
type: 'ADD',
toast: { children: 'Snippet saved!', closable: true }
})
})
}
}
}
return (
<>
<div className="login-button-container">
<LoginButton />
<style jsx>
{`
.login-button-container {
position: absolute;
top: 1.5rem;
right: 2rem;
}
`}
</style>
</div>
<Toasts toasts={toasts} />
<Editor
{...props}
themes={themes}
updateThemes={updateThemes}
snippet={snippet}
setSnippet={setSnippet}
setToasts={setToasts}
onUpdate={onEditorUpdate}
onReset={onReset}
/>
</>
)
}
export default EditorContainer