Improve stability

src/components/editor/previews/AccordionPreview.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useInteractive } from '../../../hooks/useInteractive'
 import { useDropComponent } from '../../../hooks/useDropComponent'
-import { Box, Accordion, AccordionHeader, AccordionIcon } from '@chakra-ui/core'
+import { Box, Accordion, AccordionHeader } from '@chakra-ui/core'
 import ComponentPreview from '../ComponentPreview'
 
 const acceptedTypes = [

src/components/inspector/children/ChildrenList.tsx

@@ -15,16 +15,19 @@ const ChildrenList: React.FC<Props> = ({
 }) => {
   return (
     <Box mx={2} h="100%">
-      {childrenList.map((child, index) => (
-        <ChildElement
-          key={child.id}
-          type={child.type}
-          index={index}
-          moveItem={moveItem}
-          id={child.id}
-          onSelect={onSelect}
-        />
-      ))}
+      {childrenList.map(
+        (child, index) =>
+          child && (
+            <ChildElement
+              key={child.id}
+              type={child.type}
+              index={index}
+              moveItem={moveItem}
+              id={child.id}
+              onSelect={onSelect}
+            />
+          ),
+      )}
     </Box>
   )
 }

src/core/models/app.ts

@@ -9,9 +9,12 @@ export type AppState = {
 }
 
 export const generateId = () => {
-  return `comp-${Math.random()
-    .toString(36)
-    .substr(2, 9)}`
+  return `comp-${(
+    Date.now().toString(36) +
+    Math.random()
+      .toString(36)
+      .substr(2, 5)
+  ).toUpperCase()}`
 }
 
 const app = createModel({

src/core/models/components.ts

@@ -2,6 +2,7 @@ import { createModel } from '@rematch/core'
 import { DEFAULT_PROPS } from '../../utils/defaultProps'
 import omit from 'lodash/omit'
 import { airbnbCard } from '../../theme/demo'
+import { generateId } from './app'
 
 type ComponentsState = {
   components: IComponents
@@ -97,10 +98,11 @@ const components = createModel({
         id: IComponent['id'],
       ) => {
         children.forEach(child => {
-          deleteRecursive(
-            updatedComponents[child].children,
-            updatedComponents[child].id,
-          )
+          updatedComponents[child] &&
+            deleteRecursive(
+              updatedComponents[child].children,
+              updatedComponents[child].id,
+            )
         })
 
         updatedComponents = omit(updatedComponents, id)
@@ -186,7 +188,7 @@ const components = createModel({
         rootParentType?: ComponentType
       },
     ): ComponentsState {
-      const id = `comp-${Math.round(new Date().getTime() / 1000)}`
+      const id = generateId()
 
       return {
         ...state,

src/utils/defaultProps.ts

@@ -216,7 +216,7 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
   Checkbox: {
     ...Checkbox.defaultProps,
     children: 'Lorem Ipsum',
-    isChecked: true,
+    isReadOnly: true,
   },
   AvatarBadge: {
     ...AvatarBadge.defaultProps,