Experiment with load more

libs/remix-ui/debugger-ui/src/lib/vm-debugger/assembly-items.tsx

@@ -5,7 +5,7 @@ import './styles/assembly-items.css'
 export const AssemblyItems = ({ registerEvent }) => {
     const [assemblyItems, dispatch] = useReducer(reducer, initialState)
     const [selectedItem, setSelectedItem] = useState(0)
-    const [scrollHeight, setScrollHeight] = useState(null)
+    // const [index, setIndex] = useState(assemblyItems.opCodes.index)
     const refs = useRef({})
     const asmItemsRef = useRef(null)
 
@@ -16,16 +16,10 @@ export const AssemblyItems = ({ registerEvent }) => {
     }, [])
 
     useEffect(() => {
-        indexChanged(assemblyItems.index)
-    }, [assemblyItems.index])
-
-    useEffect(() => {
-        if (asmItemsRef.current.scrollTop > scrollHeight) {
-            console.log('scrolling up')
-        } else if (asmItemsRef.current.scrollTop < scrollHeight) {
-            console.log('scrolling down')
+        if (selectedItem !== assemblyItems.index) {
+            indexChanged(assemblyItems.index)
         }
-    }, [asmItemsRef.current.scrollTop])
+    }, [assemblyItems.index])
 
     const indexChanged = (index: number) => {
         if (index < 0) return
@@ -47,18 +41,21 @@ export const AssemblyItems = ({ registerEvent }) => {
             setSelectedItem(index)
         }
     }
+    
+    // const handleScroll = () => {
+    //     const codeView = asmItemsRef.current
 
-    const onScroll = () => {
-
-    }
-
-
+    //     if (codeView.scrollTop === 0) {
+    //         dispatch({ type: 'FETCH_PREV_OPCODES', payload: {} })
+    //         codeView.scrollTop = 0
+    //     }
+    // }
 
     return (
         <div className="border rounded px-1 mt-1 bg-light">
             <div className='dropdownpanel'>
                 <div className='dropdowncontent'>
-                    <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef} onScroll={() => setScrollHeight(asmItemsRef.current.scrollTop)}>
+                    <div className="pl-2 my-1 small instructions" id='asmitems' ref={asmItemsRef}>
                         {
                             assemblyItems.display.map((item, i) => {
                                 return <div className="px-1" key={i} ref={ref => refs.current[i] = ref}><span>{item}</span></div>

libs/remix-ui/debugger-ui/src/reducers/assembly-items.ts

@@ -13,6 +13,8 @@ export const initialState = {
     },
     display: [],
     index: 0,
+    top: 0,
+    bottom: 0,
     isRequesting: false,
     isSuccessful: false,
     hasError: null
@@ -20,34 +22,55 @@ export const initialState = {
 
 export const reducer = (state = initialState, action: Action) => {
   switch (action.type) {
-    case 'FETCH_OPCODES_REQUEST':
+    case 'FETCH_OPCODES_REQUEST': {
       return {
-          ...state,
-          isRequesting: true,
-          isSuccessful: false,
-          hasError: null
+        ...state,
+        isRequesting: true,
+        isSuccessful: false,
+        hasError: null
       };
-    case 'FETCH_OPCODES_SUCCESS': 
+    }
+    case 'FETCH_OPCODES_SUCCESS': {
       const opCodes = action.payload.address === state.opCodes.address ? { 
         ...state.opCodes, index: action.payload.index 
       } : deepEqual(action.payload.code, state.opCodes.code) ? state.opCodes : action.payload
-      const display = opCodes.index > 0 ? opCodes.code.slice(opCodes.index - 1, opCodes.index + 10) : opCodes.code.slice(opCodes.index, opCodes.index + 10)
+      const top = opCodes.index - 10 > 0 ? opCodes.index - 10 : 0
+      const bottom = opCodes.index + 10 < opCodes.code.length ? opCodes.index + 10 : opCodes.code.length
+      const display =  opCodes.code.slice(top, bottom)
 
       return {
           opCodes,
           display,
           index: display.findIndex(code => code === opCodes.code[opCodes.index]),
+          top,
+          bottom,
           isRequesting: false,
           isSuccessful: true,
           hasError: null
       };
-    case 'FETCH_OPCODES_ERROR':
-        return {
-            ...state,
-            isRequesting: false,
-            isSuccessful: false,
-            hasError: action.payload
-        };
+    }
+    case 'FETCH_OPCODES_ERROR': {
+      return {
+          ...state,
+          isRequesting: false,
+          isSuccessful: false,
+          hasError: action.payload
+      };
+    }
+    // case 'FETCH_PREV_OPCODES': {
+    //   const top = state.top - 10 > 0 ? state.top - 10 : 0
+    //   const display =  state.opCodes.code.slice(top, state.bottom)
+
+    //   return {
+    //     ...state,
+    //       display,
+    //       index: display.findIndex(code => code === state.opCodes.code[state.opCodes.index]),
+    //       top,
+    //       isRequesting: false,
+    //       isSuccessful: true,
+    //       hasError: null
+    //   };
+    // }
     default:
       throw new Error();
   }