Merge branch 'master' into 98-design-updates

ui/src/app/App.js

@@ -7,6 +7,7 @@ import WatchAuth from '../auth/WatchAuth'
 import ChildInfo from '../childinfo/ChildInfo'
 import CreateWish from '../landing/CreateWish'
 import WishDetails from '../wishDetails/WishDetails';
+import GalaxyScreen from '../galaxyScreen/galaxyScreen'
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
           <Route exact path="/wish-summary/:id" component={WishDetails} />
           <Route exact path="/logout" component={Login} />
           <Route exact path="/" component={Login} />
+          <Route exact path="/galaxy" component={GalaxyScreen} />
         </Switch>
       </WatchAuth>
     </Router>

ui/src/app/App.test.js

@@ -7,11 +7,20 @@ import ChildInfo from '../childinfo/ChildInfo'
 import CreateWish from '../landing/CreateWish'
 import WishList from '../wishList'
 import WishDetails from '../wishDetails/WishDetails';
+import GalaxyScreen from '../galaxyScreen/galaxyScreen'
 
 describe('Default routing behavior', () => {
   it('renders the login page by default', () => {
     const wrapper = shallow(<App />)
 
+    const galaxyRoute = wrapper
+      .find(Route)
+      .at(6)
+      .props()
+
+    expect(galaxyRoute.path).toEqual('/galaxy')
+    expect(galaxyRoute.component).toEqual(GalaxyScreen)
+
     const loginRoute = wrapper
       .find(Route)
       .at(5)

ui/src/galaxyScreen/galaxyScreen.js

@@ -0,0 +1,105 @@
+import React, { Component } from 'react'
+import './styles.scss'
+import { getWishes } from '../services/WishDetailsService'
+import backgroundGif from '../assets/gifs/MAW_BG.gif'
+import rocketGif from '../assets/gifs/MAW_Rocket.gif'
+import toBeGif from '../assets/gifs/MAW_To_Be.gif'
+import toMeetGif from '../assets/gifs/MAW_To_Meet.gif'
+
+export default class GalaxyScreen extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            currentGif: null,
+            previousWishList: []
+        }
+    }
+
+    componentDidMount() {
+        this.setState({
+            currentGif: backgroundGif
+        },
+        () => {
+            setInterval(() => {
+                this.handleCurrentGif()
+            },
+            3000)
+        })
+    }
+
+    handleCurrentGif = async () => {
+        const wishes = await getWishes()
+        if (JSON.stringify(this.state.previousWishList) !== JSON.stringify(wishes)) {
+            const difference = wishes.filter(wish => !this.state.previousWishList.some(prevWish => wish._id === prevWish._id));
+
+            // console.log(this.state.previousWishList)
+            // console.log(difference)
+            if (difference && difference.length > 0 && this.state.previousWishList.length > 0) {
+
+                if (difference[0].type === 'go') {
+                    this.setState({
+                        currentGif: rocketGif // 13 seconds
+                    }, () => {
+                        setTimeout(() => {
+                            this.setState({
+                                currentGif: backgroundGif
+                            })
+                        },
+                        13000)
+                    })
+                } else if (difference[0].type === 'meet') {
+                    this.setState({
+                        currentGif: toMeetGif // 11 seconds
+                    }, () => {
+                        setTimeout(() => {
+                            this.setState({
+                                currentGif: backgroundGif
+                            })
+                        },
+                        11000)
+                    })
+                } else if (difference[0].type === 'be') {
+                    this.setState({
+                        currentGif: toBeGif // 11 seconds
+                    }, () => {
+                        setTimeout(() => {
+                            this.setState({
+                                currentGif: backgroundGif
+                            })
+                        },
+                        11000)
+                    })
+                } else {
+                    this.setState({
+                        currentGif: rocketGif // 13 seconds
+                    }, () => {
+                        setTimeout(() => {
+                            this.setState({
+                                currentGif: backgroundGif
+                            })
+                        },
+                        13000)
+                    })
+                }
+            } else {
+                this.setState({
+                    currentGif: backgroundGif
+                })
+            }
+
+            this.setState({
+                previousWishList: wishes
+            })
+        }
+    }
+
+    render() {
+        return (
+            <div id="GalaxyScreen">
+                <img className='galaxy-image' src={this.state.currentGif} alt="loading..." />
+            </div>
+        )
+    }
+
+}

ui/src/galaxyScreen/galaxyScreen.test.js

@@ -0,0 +1,155 @@
+import React from 'react'
+import GalaxyScreen from './galaxyScreen'
+import { shallow } from 'enzyme'
+import { getWishes } from '../services/WishDetailsService'
+import rocketGif from '../assets/gifs/MAW_Rocket.gif'
+import toBeGif from '../assets/gifs/MAW_To_Be.gif'
+import toMeetGif from '../assets/gifs/MAW_To_Meet.gif'
+
+jest.mock('../services/WishDetailsService', () => ({
+    getWishes: jest.fn(() => {
+        return ([
+            {
+                _id: '1',
+                type: 'go'
+            },
+            {
+                _id: '2',
+                type: 'be'
+            }
+        ])
+    })
+}));
+
+describe('GalaxyScreen component', () => {
+
+    const component = shallow(
+        <GalaxyScreen />
+    )
+
+    it('should render a GalaxyScreen component', () => {
+        expect(component.length).toEqual(1)
+    })
+
+    it('should render a galaxy image', () => {
+        expect(component.find('.galaxy-image').length).toEqual(1)
+    })
+
+    describe('When handleCurrentGif is called', () => {
+
+        beforeEach(() => {
+            component.setState({
+                previousWishList: [
+                    {
+                        _id: '1',
+                        type: 'go'
+                    },
+                    {
+                        _id: '2',
+                        type: 'be'
+                    }
+                ]
+            })
+        })
+
+        it('should always show `rocket` GIF after receiving `go` wish type', async () => {
+            const wishes = [
+                {
+                    _id: '1',
+                    type: 'go'
+                },
+                {
+                    _id: '2',
+                    type: 'be'
+                },
+                {
+                    _id: '3',
+                    type: 'go'
+                }
+            ]
+
+            getWishes.mockImplementation(() => {
+                return wishes
+            })          
+
+            await component.instance().handleCurrentGif()
+            expect(component.state().currentGif).toEqual(rocketGif)
+            expect(component.state().previousWishList).toEqual(wishes)
+        })
+
+        it('should always show `to meet` GIF after receiving `meet` wish type', async () => {
+            const wishes = [
+                {
+                    _id: '1',
+                    type: 'go'
+                },
+                {
+                    _id: '2',
+                    type: 'be'
+                },
+                {
+                    _id: '3',
+                    type: 'meet'
+                }
+            ]
+
+            getWishes.mockImplementation(() => {
+                return wishes
+            })          
+
+            await component.instance().handleCurrentGif()
+            expect(component.state().currentGif).toEqual(toMeetGif)
+            expect(component.state().previousWishList).toEqual(wishes)
+        })
+
+        it('should always show `to be` GIF after receiving `be` wish type', async () => {
+            const wishes = [
+                {
+                    _id: '1',
+                    type: 'go'
+                },
+                {
+                    _id: '2',
+                    type: 'be'
+                },
+                {
+                    _id: '3',
+                    type: 'be'
+                }
+            ]
+
+            getWishes.mockImplementation(() => {
+                return wishes
+            })          
+
+            await component.instance().handleCurrentGif()
+            expect(component.state().currentGif).toEqual(toBeGif)
+            expect(component.state().previousWishList).toEqual(wishes)
+        })
+
+        it('should always show `rocket` GIF after receiving any unmatched wish type', async () => {
+            const wishes = [
+                {
+                    _id: '1',
+                    type: 'go'
+                },
+                {
+                    _id: '2',
+                    type: 'be'
+                },
+                {
+                    _id: '3',
+                    type: 'something'
+                }
+            ]
+
+            getWishes.mockImplementation(() => {
+                return wishes
+            })          
+
+            await component.instance().handleCurrentGif()
+            expect(component.state().currentGif).toEqual(rocketGif)
+            expect(component.state().previousWishList).toEqual(wishes)
+        })
+    })
+})

ui/src/galaxyScreen/styles.scss

@@ -0,0 +1,16 @@
+@import "../styles/colors";
+
+#GalaxyScreen {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: $light-blue;
+  color: $dark-blue;
+  font-family: 'Arial Rounded MT Bold', sans-serif;
+  box-sizing: border-box;
+
+  .galaxy-image {
+    height: 100vh;
+    width: 100vw;
+  }
+}