Snackbar for Avatar code updated feedback (#799)

* Add socket listener for console log events * Add Snackbar with logic but without styling * Merge branch 'master' into snackbar * move propTypes to the top of the component * IDE follows the dark theme, rest of the UI follows the light theme * update snapshots * Use dark theme variant for IDE * Create separate snackbar component * Add tests for new reducer logic * Merge branch 'master' into snackbar * Customize snackbar to match design * Update snapshots * Merge branch 'master' into snackbar * Delete ThemeProvider component as it messes up with the rerendering of components No simple way to compose context
ocadotechnology · Sep 12, 2018 · d25fe20 · d25fe20
1 parent 9dcb9a4
commit d25fe20
Show file tree

Hide file tree

Showing 23 changed files with 2,452 additions and 71 deletions.
diff --git a/game_frontend/.babelrc b/game_frontend/.babelrc
@@ -5,7 +5,8 @@
       "cwd": "babelrc",
       "root": ["./src"],
       "alias": {
-        "features": "./src/redux/features"
+        "features": "./src/redux/features",
+        "theme": "./src/theme"
       }
     }],
     "transform-class-properties"

diff --git a/game_frontend/src/components/Code/index.test.js b/game_frontend/src/components/Code/index.test.js
@@ -5,7 +5,7 @@ import createShallowWithTheme from 'testHelpers/createShallow'
 
 describe('<Code />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<Code>Code</Code>)
+    const tree = createShallowWithTheme(<Code>Code</Code>, 'dark')
     expect(tree).toMatchSnapshot()
   })
 })
diff --git a/game_frontend/src/components/IDEConsole/index.test.js b/game_frontend/src/components/IDEConsole/index.test.js
@@ -5,14 +5,17 @@ import createShallowWithTheme from 'testHelpers/createShallow'
 
 describe('<IDEConsole />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<IDEConsole logs={[{ timestamp: '1', log: 'hello' }, { timestamp: '2', log: 'bye' }]} />)
+    const tree = createShallowWithTheme(
+      <IDEConsole logs={[{ timestamp: '1', log: 'hello' }, { timestamp: '2', log: 'bye' }]} />,
+      'dark'
+    )
     expect(tree).toMatchSnapshot()
   })
 })
 
 describe('<StyledConsole />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<StyledConsole />)
+    const tree = createShallowWithTheme(<StyledConsole />, 'dark')
     expect(tree).toMatchSnapshot()
   })
 })
diff --git a/game_frontend/src/components/IDEEditor/__snapshots__/index.test.js.snap b/game_frontend/src/components/IDEEditor/__snapshots__/index.test.js.snap
@@ -61,7 +61,6 @@ exports[`<IDEEditor /> matches snapshot 1`] = `
 
 exports[`<IDEEditorLayout /> renders correctly 1`] = `
 .c0 {
-  background-color: #2F4F4F;
   position: relative;
   grid-area: ide-editor;
 }
@@ -81,6 +80,9 @@ exports[`<MarginedPlayIcon /> matches snapshot 1`] = `
   theme={
     Object {
       "additionalVariables": Object {
+        "snackbar": Object {
+          "borderRadius": "6px",
+        },
         "typography": Object {
           "code": Object {
             "fontFamily": "'Source Code Pro', monospace",
@@ -122,7 +124,14 @@ exports[`<MarginedPlayIcon /> matches snapshot 1`] = `
           "minHeight": 56,
         },
       },
-      "overrides": Object {},
+      "overrides": Object {
+        "MuiSnackbarContent": Object {
+          "root": Object {
+            "paddingLeft": "14px",
+            "paddingRight": "14px",
+          },
+        },
+      },
       "palette": Object {
         "action": Object {
           "active": "#fff",
@@ -362,6 +371,9 @@ exports[`<RunCodeButton /> matches snapshot 1`] = `
   theme={
     Object {
       "additionalVariables": Object {
+        "snackbar": Object {
+          "borderRadius": "6px",
+        },
         "typography": Object {
           "code": Object {
             "fontFamily": "'Source Code Pro', monospace",
@@ -403,7 +415,14 @@ exports[`<RunCodeButton /> matches snapshot 1`] = `
           "minHeight": 56,
         },
       },
-      "overrides": Object {},
+      "overrides": Object {
+        "MuiSnackbarContent": Object {
+          "root": Object {
+            "paddingLeft": "14px",
+            "paddingRight": "14px",
+          },
+        },
+      },
       "palette": Object {
         "action": Object {
           "active": "#fff",

diff --git a/game_frontend/src/components/IDEEditor/index.js b/game_frontend/src/components/IDEEditor/index.js
@@ -11,7 +11,6 @@ import Button from '@material-ui/core/Button'
 import PlayIcon from 'components/icons/Play'
 
 export const IDEEditorLayout = styled.div`
-  background-color: #2F4F4F;
   position: relative;
   grid-area: ide-editor;
 `

diff --git a/game_frontend/src/components/IDEEditor/index.test.js b/game_frontend/src/components/IDEEditor/index.test.js
@@ -11,7 +11,7 @@ describe('<IDEEditor />', () => {
       postCode: jest.fn()
     }
 
-    const component = createShallowWithTheme(<IDEEditor {...props} />)
+    const component = createShallowWithTheme(<IDEEditor {...props} />, 'dark')
 
     expect(component).toMatchSnapshot()
   })
@@ -22,7 +22,7 @@ describe('<IDEEditor />', () => {
       postCode
     }
 
-    const component = createShallowWithTheme(<IDEEditor {...props} />)
+    const component = createShallowWithTheme(<IDEEditor {...props} />, 'dark')
 
     component.find('#post-code-button').simulate('click')
     expect(postCode).toBeCalled()
@@ -31,22 +31,22 @@ describe('<IDEEditor />', () => {
 
 describe('<IDEEditorLayout />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<IDEEditorLayout />)
+    const tree = createShallowWithTheme(<IDEEditorLayout />, 'dark')
     expect(tree).toMatchSnapshot()
   })
 })
 
 describe('<RunCodeButton />', () => {
   it('matches snapshot', () => {
-    const component = createShallowWithTheme(<RunCodeButton />)
+    const component = createShallowWithTheme(<RunCodeButton />, 'dark')
 
     expect(component).toMatchSnapshot()
   })
 })
 
 describe('<MarginedPlayIcon />', () => {
   it('matches snapshot', () => {
-    const component = createShallowWithTheme(<MarginedPlayIcon />)
+    const component = createShallowWithTheme(<MarginedPlayIcon />, 'dark')
 
     expect(component).toMatchSnapshot()
   })

diff --git a/game_frontend/src/components/LogEntries/index.test.js b/game_frontend/src/components/LogEntries/index.test.js
@@ -5,26 +5,32 @@ import createShallowWithTheme from 'testHelpers/createShallow'
 
 describe('<LogEntries />', () => {
   it('renders correctly with logs', () => {
-    const tree = createShallowWithTheme(<LogEntries logs={[{ timestamp: '1', log: 'hello' }, { timestamp: 2, log: 'bye' }]} />)
+    const tree = createShallowWithTheme(
+      <LogEntries logs={[{ timestamp: '1', log: 'hello' }, { timestamp: 2, log: 'bye' }]} />,
+      'dark'
+    )
     expect(tree).toMatchSnapshot()
   })
 
   it('renders correctly without logs', () => {
-    const tree = createShallowWithTheme(<LogEntries logs={[]} />)
+    const tree = createShallowWithTheme(<LogEntries logs={[]} />, 'dark')
     expect(tree).toMatchSnapshot()
   })
 })
 
 describe('<StyledLogEntries />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<StyledLogEntries logs={[{ timestamp: '1', log: 'hello' }, { timestamp: 2, log: 'bye' }]} />)
+    const tree = createShallowWithTheme(
+      <StyledLogEntries logs={[{ timestamp: '1', log: 'hello' }, { timestamp: 2, log: 'bye' }]} />,
+      'dark'
+    )
     expect(tree).toMatchSnapshot()
   })
 })
 
 describe('<LogEntry />', () => {
   it('renders correctly', () => {
-    const tree = createShallowWithTheme(<LogEntry>hello</LogEntry>)
+    const tree = createShallowWithTheme(<LogEntry>hello</LogEntry>, 'dark')
     expect(tree).toMatchSnapshot()
   })
 })