fix(git): Properly update Git integration UI after a commit (codesandbox#2042)

* refactor(modules/git): Use undefined instead of null to originalGitChanges state

* refactor(git): Handle undefined values with defaultProps

* fix(git): Properly update Git integration UI after a commit

* refactor(modules/git): Use null instead of undefined to originalGitChanges state

Use of undefined raises a warning in mobx-state-tree

* fix(sequences/git): Fetch Git changes after finishing a commit

Author: arthurdenner

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Changes/Changes.tsx

@@ -18,3 +18,7 @@ export const Changes = ({ changes, color, hideColor, Icon, title }) => (
     ))}
   </>
 );
+
+Changes.defaultProps = {
+  changes: [],
+};

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Git.tsx

@@ -74,12 +74,12 @@ export const Git = observer(() => {
 
       <Margin bottom={0}>
         <WorkspaceSubtitle>
-          Changes ({gitChanges ? changeCount : '...'})
+          Changes ({isFetching ? '...' : changeCount})
         </WorkspaceSubtitle>
 
-        {!isFetching && gitChanges ? (
+        {!isFetching ? (
           <Margin top={1}>
-            <TotalChanges gitChanges={gitChanges} />
+            <TotalChanges gitChanges={gitChanges || {}} />
 
             {changeCount > 0 ? (
               <Margin top={1}>

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/TotalChanges/TotalChanges.tsx

@@ -16,3 +16,7 @@ export const TotalChanges = ({ gitChanges, hideColor }: Props) => (
     <Deleted changes={gitChanges.deleted} hideColor={hideColor} />
   </>
 );
+
+TotalChanges.defaultProps = {
+  gitChanges: {},
+};

packages/app/src/app/store/modules/git/sequences.js

@@ -1,5 +1,6 @@
 import { set, when, wait } from 'cerebral/operators';
 import { state, props, string } from 'cerebral/tags';
+import { fetchGitChanges } from '../../sequences';
 import * as actions from './actions';
 
 export const changeRepoTitle = [
@@ -53,7 +54,7 @@ export const createCommit = [
   },
   set(state`git.subject`, ''),
   set(state`git.description`, ''),
-  set(state`git.originalGitChanges`, null),
+  fetchGitChanges,
 ];
 
 export const createPr = [