Add all reducers/actions

applications/web/pages/p/index.tsx

@@ -15,7 +15,12 @@ import { stringifyNotebook } from "@nteract/commutable";
 const CodeMirrorEditor = dynamic(() => import('@nteract/editor'), { ssr: false });
 
 // User defined
-import { toggleBinderMenu, toggleConsole } from "../../redux/actions"
+import { 
+  toggleBinderMenu, 
+  toggleConsole, 
+  toggleSaveDialog,
+  updateLoggedIn
+} from "../../redux/actions"
 import { Menu, MenuItem } from '../../components/Menu'
 import { Button } from '../../components/Button'
 import { Console } from '../../components/Console'
@@ -38,7 +43,12 @@ const Binder = dynamic(() => import("../../components/Binder"), {
 const BINDER_URL = "https://mybinder.org";
 
 export interface ComponentProps extends HTMLAttributes<HTMLDivElement> {
-  router: NextRouter
+  router: NextRouter,
+  toggleBinderMenu: () => {},
+  toggleConsole: () => {},
+  toggleSaveDialog: () => {}
+  updateLoggedIn: () => {}
+
 }
 
 export interface StateProps {
@@ -53,8 +63,6 @@ type Props = ComponentProps & StateProps;
 **************************/
 export const Main: FC<WithRouterProps> = (props: Props) => {
   const router = useRouter()
-  // Toggle Values
-  const [showSaveDialog, setShowSaveDialog] = useState(false)
   // Git API Values
   const [filePath, setFilepath] = useState(router.query.file as string)
   const [fileContent, setFileContent] = useState("")
@@ -80,12 +88,10 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
   const [host, setHost] = useState()
 
   // Login Values
-  const [loggedIn, setLoggedIn] = useState(false)
   const [username, setUsername] = useState("")
   const [userImage, setUserImage] = useState("")
   const [userLink, setUserLink] = useState("")
 
-
   /***************************************
     Notification and Console functions
   ****************************************/
@@ -171,7 +177,7 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
   }
 
   function showSave() {
-    toggle(showSaveDialog, setShowSaveDialog)
+    props.toggleSaveDialog()
   }
 
 
@@ -319,7 +325,7 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
       .then((res) => res.json())
       .then((data) => {
         if (data["login"] !== undefined) {
-          setLoggedIn(true)
+          props.updateLoggedIn(true)
           setUsername(data["login"])
           setUserLink(data["html_url"])
           setUserImage(data["avatar_url"])
@@ -331,7 +337,7 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
 
         } else {
           localStorage.removeItem("token")
-          setLoggedIn(false)
+          props.updateLoggedIn(false)
           addLog({
             type: "failure",
             message: `Github token expired. User logged out.`
@@ -451,9 +457,9 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
       }
 
 
-      {showSaveDialog &&
+      {props.globalState.showSaveDialog &&
         <>
-          <Shadow onClick={() => toggle(showSaveDialog, setShowSaveDialog)} />
+          <Shadow onClick={() => props.toggleSaveDialog()} />
           <Dialog >
             <form onSubmit={(e) => onSave(e)} >
               You are about to commit to <b>{username}/{repo}[{gitRef}]</b> as <b>@{username}</b>.
@@ -480,7 +486,7 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
           <MenuItem>
             <Button text="Run" variant="outlined" icon={runIcon} onClick={() => run()} />
           </MenuItem>
-          {loggedIn &&
+          {props.globalState.loggedIn &&
             <MenuItem>
               <Button text="Save" variant="outlined" icon={saveIcon} onClick={() => showSave()} />
             </MenuItem>
@@ -493,7 +499,7 @@ export const Main: FC<WithRouterProps> = (props: Props) => {
         </Menu>
         <Menu>
           <MenuItem >
-            {loggedIn
+            {props.globalState.loggedIn
               ? <Avatar userImage={userImage} username={username} userLink={userLink} />
               : <Button onClick={() => OAuthGithub()} text="Connect to Github" icon={githubIcon} />
             }
@@ -573,8 +579,10 @@ const mapStateToProps = (state: State): StateProps => ({
 
 const mapDispatchToProps = {
       toggleBinderMenu: toggleBinderMenu,
-      toggleConsole: toggleConsole
+      toggleConsole: toggleConsole,
+      toggleSaveDialog: toggleSaveDialog,
+      updateLoggedIn: updateLoggedIn
 }
 
 
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Main))
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Main))

applications/web/redux/actions.ts

@@ -1,93 +1,148 @@
 //
 // Action Types
 //
-export const BINDER_MENU = "TOGGLE_BINDER_MENU"
-export const CONSOLE = "TOGGLE_CONSOLE" 
-export const SAVE_DIALOG = "TOGGLE_SAVE_DIALOG" 
+export const BINDER_MENU = "BINDER_MENU"
+export const CONSOLE = "CONSOLE" 
+export const SAVE_DIALOG = "SAVE_DIALOG" 
 
-export const FILE_PATH = "UPDATE_FILE_PATH"
-export const FILE_CONTENT = "UPDATE_FILE_PATH"
-export const PROVIDER = "UPDATE_PROVIDER"
-export const ORG = "UPDATE_ORG"
-export const REPO = "UPDATE_REPO"
-export const GIT_REF = "UPDATE_GIT_REF"
+export const FILE_PATH = "FILE_PATH"
+export const FILE_CONTENT = "ILE_PATH"
+export const PROVIDER = "PROVIDER"
+export const ORG = "ORG"
+export const REPO = "REPO"
+export const GIT_REF = "GIT_REF"
 
-export const LANG = "UPDATE_LANG"
+export const LANG = "LANG"
 
-export const COMMIT_MESSAGE = "UPDATE_COMMIT_MESSAGE"
+export const COMMIT_MESSAGE = "COMMIT_MESSAGE"
 
-export const STRIP_OUTPUT = "TOGGLE_STRIP_OUTPUT"
-export const FILE_BUFFER = "UPDATE_FILE_BUFFER"
-export const SAVED_TIME = "UPDATE_SAVED_TIME"
+export const STRIP_OUTPUT = "STRIP_OUTPUT"
+export const FILE_BUFFER = "FILE_BUFFER"
+export const SAVED_TIME = "SAVED_TIME"
 
-export const CONSOLE_LOG = "UPDATE_CONSOLE_LOG"
-export const NOTIFICATION_LOG = "UPDATE_NOTIFICATION_LOG"
+export const CONSOLE_LOG = "CONSOLE_LOG"
+export const NOTIFICATION_LOG = "NOTIFICATION_LOG"
 
-export const SERVER_STATUS = "UPDATE_SERVER_STATUS"
-export const HOST = "UPDATE_HOST"
+export const SERVER_STATUS = "SERVER_STATUS"
+export const HOST = "HOST"
+
+export const LOGGED_IN = "LOGGED_IN"
+export const USERNAME = "USERNAME"
+export const USER_IMAGE = "IMAGE"
+export const USER_LINK = "LINK"
 
-export const LOGGED_IN = "UPDATE_LOGGED_IN"
-export const USERNAME = "UPDATE_USERNAME"
-export const USER_IMAGE = "UPDATE_IMAGE"
-export const USER_LINK = "UPDATE_LINK"
 //
 // ACTION CREATOR
 //
 
-export const toggleStripOutput = (text: string) => ({
-  type: STRIP_OUTPUT,
-  value: text
-})
-
-export const setCommitMessage = (text: string) => ({
-  type: COMMIT_MESSAGE,
-  value: text
-})
 
 export const toggleBinderMenu = () => ({
-  type: BINDER_MENU
+  type: `TOGGLE_${BINDER_MENU}`
 })
 
 export const toggleConsole = () => ({
-  type: CONSOLE
+  type: `TOGGLE_${CONSOLE}`
 })
 
 export const toggleSaveDialog = () => ({
-  type: SAVE_DIALOG 
+  type: `TOGGLE_${SAVE_DIALOG}`
 })
 
 export const setFilePath = (text: string) => ({
-  type: FILE_PATH,
+  type: `UPDATE_${FILE_PATH}`,
   value: text
 })
 
 export const setFileContent = (text: string) => ({
-  type: FILE_CONTENT,
+  type: `UPDATE_${FILE_CONTENT}`,
   value: text
 })
 
 export const setProvider = (text: string) => ({
-  type: PROVIDER,
+  type: `UPDATE_${PROVIDER}`,
   value: text
 })
 
 export const setORG = (text: string) => ({
-  type: ORG,
+  type: `UPDATE_${ORG}`,
   value: text
 })
 
 export const setRepo = (text: string) => ({
-  type: REPO,
+  type: `UPDATE_${REPO}`,
   value: text
 })
 
 export const setGitRef = (text: string) => ({
-  type: GIT_REF,
+  type: `UPDATE_${GIT_REF}`,
   value: text
 })
 
 export const setLang = (text: string) => ({
-  type: LANG,
+  type: `UPDATE_${LANG}`,
+  value: text
+})
+
+export const setCommitMessage = (text: string) => ({
+  type: `UPDATE_${COMMIT_MESSAGE}`,
+  value: text
+})
+
+export const toggleStripOutput = (text: string) => ({
+  type: `TOGGLE_${STRIP_OUTPUT}`,
   value: text
 })
 
+export const setFileBuffer = (obj: object) => ({
+  type: `UPDATE_${FILE_BUFFER}`,
+  value: obj
+})
+
+export const setSavedTime = (obj: object) => ({
+  type: `UPDATE_${SAVED_TIME}`,
+  value: obj
+})
+
+export const appendConsolelog = (obj: object) => ({
+  type: `APPEND_${CONSOLE_LOG}`,
+  value: obj
+})
+
+export const appendNotificationLog = (obj: object) => ({
+  type: `APPEND_${NOTIFICATION_LOG}`,
+  value: obj
+})
+
+export const setServerStatus = (text: string) => ({
+  type: `UPDATE_${SERVER_STATUS}`,
+  value: text
+})
+
+export const setHost = (obj: object) => ({
+  type: `UPDATE_${HOST}`,
+  value: obj
+})
+
+export const updateLoggedIn = (flag: boolean) => ({
+  type: `UPDATE_${LOGGED_IN}`,
+  value: flag
+})
+
+export const updateUsername = (text: string) => ({
+  type: `UPDATE_${USERNAME}`,
+  value: text
+})
+
+export const updateUserImage = (text: string) => ({
+  type: `UPDATE_${USER_IMAGE}`,
+  value: text
+})
+
+export const updateUserLink = (text: string) => ({
+  type: `UPDATE_${USER_LINK}`,
+  value: text
+})
+
+
+
+

applications/web/redux/reducers.ts

@@ -2,8 +2,8 @@ import {combineReducers} from "redux"
 import * as actions from "./actions"
 
 
-export const updateString = (actionName = "") => {
-  return (state = "", action) => {
+export const updateString = (actionName = "", defaultState = "") => {
+  return (state = defaultState, action) => {
     switch (action.type){
       case `UPDATE_${actionName}`:
         return action.value
@@ -13,45 +13,51 @@ export const updateString = (actionName = "") => {
   }
 }
 
-export const toggleBinderMenuReducer = (state = false, action) => {
-  switch(action.type) {
-    case actions.BINDER_MENU:
-      return !state
-    default:
-      return state
-  }
-}
-
-export const toggleConsoleReducer = (state = false, action) => {
-  switch(action.type) {
-    case actions.CONSOLE:
-      return !state
-    default:
-      return state
+export const updateBool = (actionName = "", defaultState = false) => {
+  return (state = defaultState, action) => {
+    switch (action.type){
+      case `UPDATE_${actionName}`:
+        return action.value
+      default:
+        return state
+    }
   }
 }
 
-export const toggleSaveDialogReducer = (state = false, action) => {
-  switch(action.type) {
-    case actions.SAVE_DIALOG:
-      return !state
-    default:
-      return state
+export const toggleBool = (actionName = "", defaultState = false) => {
+  return (state = defaultState, action) => {
+    switch (action.type){
+      case `TOGGLE_${actionName}`:
+        return !state
+      default:
+        return state
+    }
   }
 }
 
-
 const globalReducer = combineReducers({
-    showBinderMenu: toggleBinderMenuReducer,
-    showConsole: toggleConsoleReducer,
-    showSaveDialog: toggleSaveDialogReducer,
+    showBinderMenu: toggleBool(actions.BINDER_MENU),
+    showConsole: toggleBool(actions.CONSOLE),
+    showSaveDialog: toggleBool(actions.SAVE_DIALOG),
     filePath: updateString(actions.FILE_PATH),
     fileContent: updateString(actions.FILE_CONTENT),
     provider: updateString(actions.PROVIDER),
     org: updateString(actions.ORG),
     repo: updateString(actions.REPO),
     gitRef: updateString(actions.GIT_REF),
-    lang: updateString(actions.LANG)
+    lang: updateString(actions.LANG),
+    commitMessage: updateString(actions.COMMIT_MESSAGE),
+    stripOutput: updateString(actions.STRIP_OUTPUT),
+    fileBuffer: updateString(actions.FILE_BUFFER),
+    savedTime: updateString(actions.SAVED_TIME),
+    consolelog: updateString(actions.CONSOLE_LOG),
+    notificationlog: updateString(actions.NOTIFICATION_LOG),
+    serverStatus: updateString(actions.SERVER_STATUS),
+    host: updateString(actions.HOST),
+    loggedIn: updateBool(actions.LOGGED_IN),
+    username: updateString(actions.USERNAME),
+    userImage: updateString(actions.USER_IMAGE),
+    userLink: updateString(actions.USER_LINK),
 })
 
 export default globalReducer