redux - Add and expose CLEAR_SOURCEFILE action

src/index.tsx

@@ -7,7 +7,11 @@ import ASTOutline from "./components/ASTOutline";
 import CodeOutputDiff from "./components/CodeOutput";
 
 import configureStore from "./store";
-import { initSourceFile, updateSourceFile } from "./store/sourceFiles/actions";
+import {
+  initSourceFile,
+  updateSourceFile,
+  clearSourceFile
+} from "./store/sourceFiles/actions";
 
 import styles from "./styles.css";
 
@@ -34,8 +38,12 @@ export function ASTVisualizer() {
               <h2 className={styles.titleLight}>Code output Diff</h2>
             </Row>
             <Row>
-              <Col xs={6} className={styles.titleLight}>Input</Col>
+              <Col xs={6} className={styles.titleLight}>
-              <Col xs={6} className={styles.titleLight}>Output</Col>
+                Input
+              </Col>
+              <Col xs={6} className={styles.titleLight}>
+                Output
+              </Col>
             </Row>
             <CodeOutputDiff />
           </Col>
@@ -47,10 +55,15 @@ export function ASTVisualizer() {
 
 const {
   initSourceFile: initSourceFileConnected,
-  updateSourceFile: updateSourceFileConnected
+  updateSourceFile: updateSourceFileConnected,
-} = bindActionCreators({ initSourceFile, updateSourceFile }, store.dispatch);
+  clearSourceFile: clearSourceFileConnected
+} = bindActionCreators(
+  { initSourceFile, updateSourceFile, clearSourceFile },
+  store.dispatch
+);
 
 export {
   initSourceFileConnected as initSourceFile,
-  updateSourceFileConnected as updateSourceFile
+  updateSourceFileConnected as updateSourceFile,
+  clearSourceFileConnected as clearSourceFile
 };

src/store/sourceFiles/actions.ts

@@ -1,5 +1,5 @@
 import * as ts from "typescript";
-import { INIT_SOURCEFILE, UPDATE_SOURCEFILE } from "./types";
+import { INIT_SOURCEFILE, UPDATE_SOURCEFILE, CLEAR_SOURCEFILE } from "./types";
 
 export function initSourceFile(sourceFile: ts.SourceFile) {
   return {
@@ -14,3 +14,9 @@ export function updateSourceFile(sourceFile: ts.SourceFile) {
     payload: { sourceFile }
   };
 }
+
+export function clearSourceFile() {
+  return {
+    type: CLEAR_SOURCEFILE,
+  };
+}

src/store/sourceFiles/reducer.ts

@@ -1,7 +1,8 @@
 import {
-  SourceFilesState,
   INIT_SOURCEFILE,
   UPDATE_SOURCEFILE,
+  CLEAR_SOURCEFILE,
+  SourceFilesState,
   SourceFilesActionTypes
 } from "./types";
 
@@ -26,6 +27,8 @@ export function sourceFilesReducer(
         ...state,
         currentSourceFile: action.payload.sourceFile
       };
+    case CLEAR_SOURCEFILE:
+      return initialState;
     default:
       return state;
   }

src/store/sourceFiles/types.ts

@@ -9,6 +9,7 @@ export interface SourceFilesState {
 // Describing the different ACTION NAMES available
 export const INIT_SOURCEFILE = "INIT_SOURCEFILE";
 export const UPDATE_SOURCEFILE = "UPDATE_SOURCEFILE";
+export const CLEAR_SOURCEFILE = "CLEAR_SOURCEFILE";
 
 interface InitSourceFileAction {
   type: typeof INIT_SOURCEFILE;
@@ -20,6 +21,11 @@ interface UpdateSourceFileAction {
   payload: { sourceFile: ts.SourceFile };
 }
 
+interface ClearSourceFileAction {
+  type: typeof CLEAR_SOURCEFILE;
+}
+
 export type SourceFilesActionTypes =
   | InitSourceFileAction
-  | UpdateSourceFileAction;
+  | UpdateSourceFileAction
+  | ClearSourceFileAction;