Merge pull request premieroctet#34 from premieroctet/fix/various

Fix/various

src/App.tsx

@@ -9,7 +9,7 @@ import Header from './components/Header'
 import { Global } from '@emotion/core'
 import { HotKeys } from 'react-hotkeys'
 import useShortcuts, { keyMap } from './hooks/useShortcuts'
-import ErrorBoundary from './components/ErrorBoundary'
+import EditorErrorBoundary from './components/errorBoundaries/EditorErrorBoundary'
 import { decodeShareUrl } from './utils/share'
 import useDispatch from './hooks/useDispatch'
 
@@ -40,11 +40,11 @@ const App = () => {
         <Flex h="calc(100vh - 3rem)">
           <Sidebar />
 
-          <ErrorBoundary>
+          <EditorErrorBoundary>
             <Box bg="white" flex={1} zIndex={10} position="relative">
               <Editor />
             </Box>
-          </ErrorBoundary>
+          </EditorErrorBoundary>
 
           <Box
             maxH="calc(100vh - 3rem)"

src/components/editor/previews/InputRightElement.tsx

@@ -17,7 +17,7 @@ export const InputRightElementPreview: React.FC<{ component: IComponent }> = ({
   return (
     <InputRightElement top="10px" right="10px" {...props} ref={drop(ref)}>
       {component.children.map((key: string) => (
-        <ComponentPreview componentName={key} />
+        <ComponentPreview key={key} componentName={key} />
       ))}
     </InputRightElement>
   )

src/components/errorBoundaries/AppErrorBoundary.tsx

@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import { Box, Flex, Stack, Button } from '@chakra-ui/core'
+import { FaBomb } from 'react-icons/fa'
+import { gridStyles } from '../editor/Editor'
+import { bugsnagClient } from '../../utils/bugsnag'
+
+type ErrorBoundaryState = {
+  hasError: boolean
+}
+
+type ErrorBoundaryProps = {}
+
+export default class AppErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError(error: any) {
+    bugsnagClient.notify(error)
+    return { hasError: true }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Flex
+          {...gridStyles}
+          p={0}
+          alignItems="center"
+          justifyContent="center"
+          flex={1}
+          zIndex={10}
+          position="relative"
+          height="100vh"
+        >
+          <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! Clear cache and refresh.
+              <Button
+                onClick={() => {
+                  localStorage.clear()
+                  window.location.reload()
+                }}
+                variant="outline"
+                rightIcon="check-circle"
+                size="sm"
+                mt={4}
+                display="block"
+              >
+                Clear & reload
+              </Button>
+            </Box>
+          </Stack>
+        </Flex>
+      )
+    }
+
+    return this.props.children
+  }
+}

src/components/ErrorBoundary.tsx → src/components/errorBoundaries/EditorErrorBoundary.tsx

@@ -3,8 +3,8 @@ 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'
-import { bugsnagClient } from '../utils/bugsnag'
+import { gridStyles } from '../editor/Editor'
+import { bugsnagClient } from '../../utils/bugsnag'
 
 type ErrorBoundaryState = {
   hasError: boolean

src/core/models/components.ts

@@ -85,12 +85,16 @@ const components = createModel({
       let updatedComponents = { ...state.components }
       let component = updatedComponents[componentId]
 
+      // Remove self
       if (component && component.parent) {
-        const children = updatedComponents[component.parent].children.filter(
-          (el: string) => el !== component.id,
+        const siblings = updatedComponents[component.parent].children.filter(
+          (el: string) => el !== componentId,
         )
 
-        updatedComponents[component.parent].children = children
+        updatedComponents[component.parent] = {
+          ...updatedComponents[component.parent],
+          children: siblings,
+        }
       }
 
       const deleteRecursive = (
@@ -99,18 +103,15 @@ const components = createModel({
       ) => {
         children.forEach(child => {
           updatedComponents[child] &&
-            deleteRecursive(
-              updatedComponents[child].children,
-              updatedComponents[child].id,
-            )
+            deleteRecursive(updatedComponents[child].children, componentId)
         })
 
         updatedComponents = omit(updatedComponents, id)
       }
 
-      deleteRecursive(component.children, component.id)
+      deleteRecursive(component.children, componentId)
 
-      updatedComponents = omit(updatedComponents, component.id)
+      updatedComponents = omit(updatedComponents, componentId)
 
       return {
         ...state,

src/index.tsx

@@ -5,17 +5,20 @@ import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core'
 import { Provider } from 'react-redux'
 
 import { store } from './core/store'
-import { ErrorBoundary } from './utils/bugsnag'
+import { ErrorBoundary as BugsnagErrorBoundary } from './utils/bugsnag'
+import AppErrorBoundary from './components/errorBoundaries/AppErrorBoundary'
 
 ReactDOM.render(
-  <ErrorBoundary>
-    <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <CSSReset />
-        <App />
-      </ThemeProvider>
-    </Provider>
-  </ErrorBoundary>,
+  <BugsnagErrorBoundary>
+    <ThemeProvider theme={theme}>
+      <AppErrorBoundary>
+        <Provider store={store}>
+          <CSSReset />
+          <App />
+        </Provider>
+      </AppErrorBoundary>
+    </ThemeProvider>
+  </BugsnagErrorBoundary>,
 
   document.getElementById('root'),
 )

src/utils/share.ts

@@ -1,7 +1,9 @@
 import * as LZString from 'lz-string'
 
 export const createShareUrl = (components: IComponents) =>
-  `${document.location.host}/?share=${LZString.compressToEncodedURIComponent(
+  `${document.location.protocol}//${
+    document.location.host
+  }/?share=${LZString.compressToEncodedURIComponent(
     JSON.stringify(components),
   )}`