fix drag/drop bugs

apps/mobile/src/screens/settings/editor/common.tsx

@@ -6,6 +6,8 @@ import { Tool } from './tool';
 export const renderTool = ({ item, groupIndex, parentIndex }: DraggableItem) => {
   const data = item as string[];
 
+  if (!data) return null;
+
   const tools = data.map((item, index) => (
     <Tool
       key={Array.isArray(item) ? `subgroup-${index}` : item}

apps/mobile/src/screens/settings/editor/configuretoolbar.tsx

@@ -82,7 +82,13 @@ export const ConfigureToolbar = () => {
             ))}
           </View>
         </View>
-        <DraxScrollView showsVerticalScrollIndicator={false}>
+        <DraxScrollView
+          style={{
+            flex: 1
+          }}
+          scrollEventThrottle={13}
+          showsVerticalScrollIndicator={false}
+        >
           {renderGroups()}
           <View
             style={{

apps/mobile/src/screens/settings/editor/group.tsx

@@ -64,10 +64,11 @@ export const Group = ({ item, index: groupIndex, parentIndex }: DraggableItem) =
     }
 
     if (dragged.type === 'tool') {
-      const insertFrom = dragged.parentIndex
-        ? (_data[dragged.parentIndex][dragged.groupIndex] as string[])
-        : (_data[dragged.groupIndex] as string[]);
-
+      const insertFrom =
+        typeof dragged.parentIndex === 'number'
+          ? (_data[dragged.parentIndex][dragged.groupIndex] as string[])
+          : (_data[dragged.groupIndex] as string[]);
+      //@ts-ignore
       _data[groupIndex].push(insertFrom.splice(dragged.index, 1)[0]);
     }
 

apps/mobile/src/screens/settings/editor/tool.tsx

@@ -204,17 +204,22 @@ export const Tool = ({ item, index, groupIndex, parentIndex }: DraggableItem) =>
     const dragged = data.dragged.payload;
     const reciever = data.receiver.payload;
     let _data = useDragState.getState().data.slice();
+
+    const isFromSubgroup = typeof dragged.parentIndex === 'number';
+    const isDroppedAtSubgroup = typeof reciever.parentIndex === 'number';
+
     if (dragged.type === 'tool') {
       const fromIndex = dragged.index;
       const toIndex = isDroppedAbove ? Math.max(0, reciever.index) : reciever.index + 1;
 
-      const insertAt = reciever.parentIndex
+      console.log('indexes', reciever.parentIndex, reciever.groupIndex);
+
+      const insertAt = isDroppedAtSubgroup
         ? (_data[reciever.parentIndex][reciever.groupIndex] as string[])
         : (_data[reciever.groupIndex] as string[]);
-      const insertFrom = dragged.parentIndex
+      const insertFrom = isFromSubgroup
         ? (_data[dragged.parentIndex][dragged.groupIndex] as string[])
         : (_data[dragged.groupIndex] as string[]);
-
       insertAt.splice(
         toIndex > fromIndex ? toIndex - 1 : toIndex,
         0,
@@ -223,7 +228,7 @@ export const Tool = ({ item, index, groupIndex, parentIndex }: DraggableItem) =>
 
       // Remove the group or subgroup if it is empty.
       if (insertFrom.length === 0) {
-        dragged.parentIndex
+        isFromSubgroup
           ? _data[dragged.parentIndex].splice(_data[dragged.parentIndex].length - 1, 1)
           : _data.splice(dragged.groupIndex, 1);
       }

apps/mobile/src/screens/settings/editor/toolsheet.tsx

@@ -1,3 +1,4 @@
+import { ToolId } from '@streetwriters/editor/dist/es/toolbar';
 import React, { RefObject } from 'react';
 import { View } from 'react-native';
 import ActionSheet from 'react-native-actions-sheet';
@@ -20,9 +21,9 @@ export default function ToolSheet({
 }) {
   const colors = useThemeStore(state => state.colors);
   const data = useDragState(state => state.data);
-  const ungrouped = getUngroupedTools(data);
+  const ungrouped = getUngroupedTools(data) as ToolId[];
 
-  const renderTool = React.useCallback((item: string) => {
+  const renderTool = React.useCallback((item: ToolId) => {
     //@ts-ignore
     const tool = findToolById(item);
     //@ts-ignore
@@ -87,7 +88,7 @@ export default function ToolSheet({
         }}
         nestedScrollEnabled={true}
       >
-        {ungrouped.length === 0 ? (
+        {!ungrouped || ungrouped.length === 0 ? (
           <Paragraph
             style={{
               alignSelf: 'center'