⚡ Replaced pager with infinite loop (using react-virtualize)

.vscode/launch.json

@@ -14,7 +14,7 @@
             "smartStep": true,
             "sourceMaps": true,
             "outFiles": [
-                "${workspaceRoot}/dist/**/*.js"
+                "${workspaceRoot}/dist/src/*.js"
             ],
             "preLaunchTask": "webpack-dev",
             "skipFiles": [

.vscode/settings.json

@@ -4,8 +4,6 @@
         "node_modules": true,
         ".vscode-test": true,
         "coverage": true,
-        "out": true,
-        "dist": true
     },
     "search.exclude": {
         "out": true,

browser/package.json

@@ -5,5 +5,8 @@
     "tests": "npm test",
     "build": "cd .. && npx webpack -p --progress --colors",
     "watch": "cd .. && npx webpack --progress --colors --watch"
+  },
+  "devDependencies": {
+    "@types/react-virtualized": "^9.21.10"
   }
-}
+}

browser/src/actions/messagebus.ts

@@ -13,7 +13,10 @@ function uuid() {
     );
 }
 
-function createPromiseFromMessageEvent(requestId): Promise<any> {
+function createPromiseFromMessageEvent(
+    requestId: string,
+    persistentCallback: (requestId: string, data: any) => any = null,
+): Promise<any> {
     return new Promise<any>((resolve, reject) => {
         const handleEvent = (e: MessageEvent) => {
             if (requestId === e.data.requestId) {
@@ -27,20 +30,32 @@ function createPromiseFromMessageEvent(requestId): Promise<any> {
             }
         };
 
-        window.addEventListener('message', handleEvent);
+        if (persistentCallback !== null) {
+            window.addEventListener('message', e => persistentCallback(requestId, e.data));
+        } else {
+            window.addEventListener('message', handleEvent);
+        }
     });
 }
 
-export function post<T>(cmd: string, payload: any): Promise<T> {
+export function post<T>(
+    cmd: string,
+    payload: any,
+    persistentCallback: (requestId: string, data: any) => any = null,
+): Promise<T> {
     const requestId = uuid();
 
+    if (persistentCallback !== null) {
+        payload.requestId = requestId;
+    }
+
     vsc.postMessage({
         requestId,
         cmd,
         payload,
     });
 
-    return createPromiseFromMessageEvent(requestId);
+    return createPromiseFromMessageEvent(requestId, persistentCallback);
 }
 
 export function initialize(vscodeApi: any) {

browser/src/actions/results.ts

@@ -3,14 +3,15 @@ import { createAction } from 'redux-actions';
 import * as Actions from '../constants/resultActions';
 import { ActionedUser, Avatar, CommittedFile, LogEntriesResponse, LogEntry, Ref } from '../definitions';
 import { BranchesState, RootState } from '../reducers';
-import { BranchSelection, Branch } from '../types';
+import { BranchSelection, Branch, Graph } from '../types';
 import { post } from '../actions/messagebus';
 
 export const addResults = createAction<Partial<LogEntriesResponse>>(Actions.FETCHED_COMMITS);
 export const updateCommit = createAction<LogEntry>(Actions.FETCHED_COMMIT);
 export const updateCommitInList = createAction<LogEntry>(Actions.UPDATE_COMMIT_IN_LIST);
 export const updateSettings = createAction(Actions.UPDATE_SETTINGS);
 export const updateBranchList = createAction<BranchesState>(Actions.FETCHED_BRANCHES);
+export const clearCommits = createAction(Actions.CLEAR_COMMITS);
 export const clearCommitSelection = createAction(Actions.CLEAR_SELECTED_COMMIT);
 export const goToPreviousPage = createAction<void>(Actions.GO_TO_PREVIOUS_PAGE);
 export const goToNextPage = createAction<void>(Actions.GO_TO_NEXT_PAGE);
@@ -21,8 +22,14 @@ export const fetchedAuthors = createAction<ActionedUser[]>(Actions.FETCHED_AUTHO
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace ResultActions {
-    export const commitsRendered = createAction<number>(Actions.COMMITS_RENDERED);
+    export const commitsRendered = createAction<Graph>(Actions.COMMITS_RENDERED);
 
+    export const onStateChanged = (listener: (requestId: string, data: any) => any) => {
+        return (dispatch: Dispatch<any>, getState: () => RootState) => {
+            // register state message handler
+            return post<any>('registerState', {}, listener);
+        };
+    };
     export const actionCommit = (logEntry: LogEntry, name = '', value = '') => {
         return async (dispatch: Dispatch<any>, getState: () => RootState) => {
             dispatch(notifyIsFetchingCommit(logEntry.hash.full));
@@ -38,7 +45,6 @@ export namespace ResultActions {
                 switch (name) {
                     case 'reset_soft':
                     case 'reset_hard':
-                        dispatch(ResultActions.refresh());
                         break;
                     case 'newtag':
                         break;
@@ -112,64 +118,48 @@ export namespace ResultActions {
             }
         };
     };
-    export const getNextCommits = () => {
-        return (dispatch: Dispatch<any>, getState: () => RootState) => {
-            const state = getState();
-            const pageIndex = state.logEntries.pageIndex + 1;
-            return fetchCommits(dispatch, state, pageIndex, undefined);
-        };
-    };
-    export const getPreviousCommits = () => {
-        return (dispatch: Dispatch<any>, getState: () => RootState) => {
-            const state = getState();
-            const pageIndex = state.logEntries.pageIndex - 1;
-            return fetchCommits(dispatch, state, pageIndex, undefined);
-        };
-    };
+
     export const search = (searchText: string) => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
+            dispatch(notifyIsLoading());
             dispatch(updateSettings({ searchText }));
             const state = getState();
             return fetchCommits(dispatch, state, 0, undefined);
         };
     };
     export const clearSearch = () => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
+            dispatch(notifyIsLoading());
             dispatch(updateSettings({ searchText: '', authorFilter: undefined }));
+            dispatch(clearCommits());
             const state = getState();
             return fetchCommits(dispatch, state, 0, undefined);
         };
     };
     export const selectBranch = (branchName: string, branchSelection: BranchSelection) => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
             //state.settings.branchName = branchName;
+            dispatch(notifyIsLoading());
             dispatch(updateSettings({ branchName, branchSelection }));
+            dispatch(clearCommits());
             const state = getState();
             return fetchCommits(dispatch, state, 0, undefined);
         };
     };
     export const selectAuthor = (authorName: string) => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
+            dispatch(notifyIsLoading());
             dispatch(updateSettings({ authorFilter: authorName }));
             const state = getState();
             return fetchCommits(dispatch, state, 0, undefined);
         };
     };
-    export const refresh = () => {
+    export const getCommits = (startIndex: number, stopIndex: number) => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
             const state = getState();
-            // update branches
-            fetchBranches(dispatch, state);
-            return fetchCommits(dispatch, state, undefined, undefined);
+            return fetchCommits(dispatch, state, startIndex, stopIndex);
         };
     };
-
-    export function getCommits() {
-        return (dispatch: Dispatch<any>, getState: () => RootState) => {
-            const state = getState();
-            fetchCommits(dispatch, state);
-        };
-    }
     export const getBranches = () => {
         return (dispatch: Dispatch<any>, getState: () => RootState) => {
             const state = getState();
@@ -183,12 +173,16 @@ export namespace ResultActions {
         };
     };
 }
-function fetchCommits(dispatch: Dispatch<any>, store: RootState, pageIndex?: number, pageSize?: number) {
-    dispatch(notifyIsLoading());
-    post<LogEntriesResponse>('getLogEntries', {
+function fetchCommits(
+    dispatch: Dispatch<any>,
+    store: RootState,
+    startIndex?: number,
+    stopIndex?: number,
+): Promise<any> {
+    return post<LogEntriesResponse>('getLogEntries', {
         ...store.settings,
-        pageIndex,
-        pageSize,
+        startIndex,
+        stopIndex,
     }).then(x => {
         dispatch(addResults(x));
     });

browser/src/components/Header/index.tsx

@@ -26,7 +26,10 @@ interface HeaderState {
 export class Header extends React.Component<HeaderProps, HeaderState> {
     constructor(props: HeaderProps) {
         super(props);
-        this.state = { isLoading: props.isLoading, searchText: props.searchText };
+        this.state = {
+            isLoading: props.isLoading,
+            searchText: props.searchText,
+        };
     }
 
     static getDerivedStateFromProps(nextProps, prevState) {
@@ -40,19 +43,12 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         }
     };
     private onClear = () => {
-        this.setState({ isLoading: this.state.isLoading });
+        this.setState({ isLoading: this.state.isLoading, searchText: '' });
         if (!this.state.isLoading) {
             this.setState({ isLoading: true });
             this.props.clearSearch();
         }
     };
-    private onRefresh = () => {
-        this.setState({ isLoading: this.state.isLoading });
-        if (!this.state.isLoading) {
-            this.setState({ isLoading: true });
-            this.props.refresh();
-        }
-    };
 
     private remoteLink() {
         if (this.props.branches.length === 0) {
@@ -103,7 +99,10 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     private handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        this.setState({ isLoading: this.state.isLoading, searchText: e.target.value });
+        this.setState({
+            isLoading: this.state.isLoading,
+            searchText: e.target.value,
+        });
     };
 
     private handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -133,9 +132,6 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
                 <Button bsSize="small" disabled={this.state.isLoading} onClick={this.onClear}>
                     Clear
                 </Button>
-                <Button bsSize="small" disabled={this.state.isLoading} onClick={this.onRefresh}>
-                    Refresh
-                </Button>
                 <span className={'links'}>{this.remoteLink()}</span>
             </header>
         );
@@ -158,7 +154,6 @@ function mapDispatchToProps(dispatch) {
     return {
         search: (text: string) => dispatch(ResultActions.search(text)),
         clearSearch: () => dispatch(ResultActions.clearSearch()),
-        refresh: () => dispatch(ResultActions.refresh()),
     };
 }