Add throttle (#23)

* Add throttle

* Add error boundary

src/App.tsx

@@ -11,6 +11,7 @@ import { HotKeys } from 'react-hotkeys'
 import { useSelector } from 'react-redux'
 import useShortcuts, { keyMap } from './hooks/useShortcuts'
 import { getShowLayout } from './core/selectors/app'
+import ErrorBoundary from './components/ErrorBoundary'
 
 const App = () => {
   const showLayout = useSelector(getShowLayout)
@@ -32,9 +33,11 @@ const App = () => {
         <Flex minHeight="calc(100vh - 3rem)">
           <Sidebar />
 
-          <Box bg="white" flex={1} zIndex={10} position="relative">
-            <Editor />
-          </Box>
+          <ErrorBoundary>
+            <Box bg="white" flex={1} zIndex={10} position="relative">
+              <Editor />
+            </Box>
+          </ErrorBoundary>
 
           <Box
             maxH="calc(100vh - 3rem)"

src/components/ErrorBoundary.tsx

@@ -0,0 +1,81 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { ActionCreators as UndoActionCreators } from 'redux-undo'
+import { Box, Flex, Stack, Button } from '@chakra-ui/core'
+import { FaBomb } from 'react-icons/fa'
+import { gridStyles } from './editor/Editor'
+
+type ErrorBoundaryState = {
+  hasError: boolean
+}
+
+type ErrorBoundaryProps = {
+  undo: () => void
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      this.props.undo()
+
+      return (
+        <Flex
+          {...gridStyles}
+          alignItems="center"
+          justifyContent="center"
+          flex={1}
+          zIndex={10}
+          position="relative"
+        >
+          <Stack
+            alignItems="center"
+            isInline
+            spacing={8}
+            bg="white"
+            px={6}
+            py={6}
+            shadow="sm"
+            width="lg"
+          >
+            <Box as={FaBomb} fontSize="100px" />
+            <Box>
+              <b>Oups…</b>
+              <br />
+              Something went wrong! We have recovered the editor to its previous
+              version.
+              <Button
+                onClick={() => {
+                  this.setState({ hasError: false })
+                }}
+                variant="outline"
+                rightIcon="check-circle"
+                size="sm"
+                mt={4}
+                display="block"
+              >
+                Reload
+              </Button>
+            </Box>
+          </Stack>
+        </Flex>
+      )
+    }
+
+    return this.props.children
+  }
+}
+
+const mapDispatchToProps = {
+  undo: UndoActionCreators.undo,
+}
+
+export default connect(null, mapDispatchToProps)(ErrorBoundary)

src/components/editor/Editor.tsx

@@ -9,6 +9,14 @@ import useDispatch from '../../hooks/useDispatch'
 import { getComponents } from '../../core/selectors/components'
 import { getShowLayout, getShowCode } from '../../core/selectors/app'
 
+export const gridStyles = {
+  backgroundImage:
+    'linear-gradient(to right, #d9e2e9 1px, transparent 1px),linear-gradient(to bottom, #d9e2e9 1px, transparent 1px);',
+  backgroundSize: '20px 20px',
+  bg: '#edf2f6',
+  p: 10,
+}
+
 const Editor: React.FC = () => {
   const showCode = useSelector(getShowCode)
   const showLayout = useSelector(getShowLayout)
@@ -21,13 +29,7 @@ const Editor: React.FC = () => {
   let editorBackgroundProps = {}
 
   if (showLayout) {
-    editorBackgroundProps = {
-      backgroundImage:
-        'linear-gradient(to right, #d9e2e9 1px, transparent 1px),linear-gradient(to bottom, #d9e2e9 1px, transparent 1px);',
-      backgroundSize: '20px 20px',
-      bg: '#edf2f6',
-      p: 10,
-    }
+    editorBackgroundProps = gridStyles
   }
 
   const Playground = (

src/components/inspector/panels/styles/BorderPanel.tsx

@@ -1,15 +1,11 @@
 import React, { memo } from 'react'
-import SizeControl from '../../controls/SizeControl'
-import usePropsSelector from '../../../../hooks/usePropsSelector'
 import TextControl from '../../controls/TextControl'
 
 const BorderPanel = () => {
-  const rounded = usePropsSelector('rounded')
-
   return (
     <>
       <TextControl name="border" label="Border" />
-      <SizeControl name="rounded" label="Border radius" value={rounded} />
+      <TextControl name="borderRadius" label="Border radius" />
     </>
   )
 }

src/components/inspector/panels/styles/EffectsPanel.tsx

@@ -3,17 +3,16 @@ import FormControl from '../../controls/FormControl'
 import { useForm } from '../../../../hooks/useForm'
 import usePropsSelector from '../../../../hooks/usePropsSelector'
 import {
-  Select,
   Slider,
   SliderTrack,
   SliderFilledTrack,
   SliderThumb,
 } from '@chakra-ui/core'
+import TextControl from '../../controls/TextControl'
 
 const EffectsPanel = () => {
-  const { setValueFromEvent, setValue } = useForm()
+  const { setValue } = useForm()
   const opacity = usePropsSelector('opacity')
-  const shadow = usePropsSelector('shadow')
 
   const normalizedOpacity = useMemo(() => {
     return opacity * 100 || 100
@@ -32,19 +31,8 @@ const EffectsPanel = () => {
           <SliderThumb />
         </Slider>
       </FormControl>
-      <FormControl label="Box shadow">
-        <Select
-          size="sm"
-          value={shadow}
-          onChange={setValueFromEvent}
-          name="shadow"
-        >
-          <option>xs</option>
-          <option>sm</option>
-          <option>md</option>
-          <option>lg</option>
-        </Select>
-      </FormControl>
+
+      <TextControl name="shadow" label="Shadow" />
     </>
   )
 }

src/core/store.ts

@@ -21,6 +21,7 @@ const persistConfig = {
   storage,
   whitelist: ['present'],
   version,
+  throttle: 500,
 }
 
 const persistPlugin = {