[HER-155] Add feature flags (#48)

* [HER-155] Change from material to grid or box

* [HER-155] Add feature flags in settings file

* [HER-155] Use the flags for login

* [HER-155] Use the flags for livestream

* [HER-155] Move livestream component in a different file

* [HER-155] Put the livestream component into a box

* [HER-155] Put a different padding on livestream by feature value

public/settings.json

@@ -13,5 +13,9 @@
   "apiUrl": "https://hermes.api.dev.k8s.nerds.sh/graphql",
   "sources": [
     "k9Ljm6DdzCI"
-  ]
+  ],
+  "features": {
+    "login": false,
+    "livestream": false
+  }
 }

src/cameras/content.jsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import YouTube from 'react-youtube'
-import * as Material from '@material-ui/core'
+import { Box, Grid } from '@material-ui/core'
 
 import { Map } from 'cameras/map'
-import { settings } from 'settings'
-import { useStyles } from 'cameras/style'
+import { Livestream } from 'cameras/livestream'
+import { useLivestreamPadding } from 'cameras/hooks/use-livestream-padding'
 
-export const Content = () => <Material.Grid item xs={12} sm={11} md={9} lg={8}>
-  <Material.Box pt={3} style={{ height: '80vh', width: '100%' }}>
+export const Content = () => <Grid xs={12} sm={11} md={9} lg={8}>
+  <Box pt={3} style={{ height: '80vh', width: '100%' }}>
     <Map />
-  </Material.Box>
-  <Material.Grid container justify={'center'} classes={useStyles()}>
-    <YouTube videoId={settings().sources[0]} />
-  </Material.Grid>
-</Material.Grid>
+  </Box>
+  <Box pt={3} {...useLivestreamPadding()}>
+    <Livestream />
+  </Box>
+</Grid>
 

src/cameras/hooks/use-livestream-padding.js

@@ -0,0 +1,7 @@
+import { useSettings } from 'settings/hooks/use-settings'
+
+export const useLivestreamPadding = () => {
+  const appear = useSettings().features.livestream
+
+  return appear ? { style: { paddingBottom: '2%' } } : { style: { paddingBottom: '3.8%' } }
+}

src/cameras/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import * as Material from '@material-ui/core'
+import { Grid } from '@material-ui/core'
 
 import { Content } from 'cameras/content'
 import { useDefaultContext, Context } from 'cameras/context'
 import { Sidebar } from 'cameras/sidebar'
 
 export const Cameras = () => <Context.Provider value={useDefaultContext()}>
-  <Material.Grid container>
+  <Grid container>
     <Sidebar />
     <Content />
-  </Material.Grid>
+  </Grid>
 </Context.Provider>
 

src/cameras/livestream/hooks/use-livestream-props.js

@@ -0,0 +1,7 @@
+import { useStyles } from 'cameras/style'
+import { useSettings } from 'settings/hooks/use-settings'
+
+export const useLivestreamProps = () => ({
+  classes: useStyles(),
+  hidden: !useSettings().features.livestream,
+})

src/cameras/livestream/index.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Grid } from '@material-ui/core'
+import YouTube from 'react-youtube'
+
+import { settings } from 'settings'
+import { useLivestreamProps } from 'cameras/livestream/hooks/use-livestream-props'
+
+export const Livestream = () => <Grid {...useLivestreamProps()}>
+  <YouTube videoId={settings().sources[0]} />
+</Grid>

src/cameras/sidebar/index.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import * as Material from '@material-ui/core'
+import { Grid } from '@material-ui/core'
 
 import { Header } from 'cameras/sidebar/header'
 import { Ids } from 'cameras/sidebar/ids'
 
-export const Sidebar = () => <Material.Grid item xs={12} md={3}>
+export const Sidebar = () => <Grid item xs={12} md={3}>
   <Header />
   <Ids />
-</Material.Grid>
+</Grid>

src/login/hooks/use-menu-props.js

@@ -0,0 +1,6 @@
+import { useSettings } from 'settings/hooks/use-settings'
+
+export const useMenuProps = () => ({
+  px: 3,
+  hidden: !useSettings().features.login,
+})

src/login/menu.jsx

@@ -3,11 +3,12 @@ import { Box } from '@material-ui/core'
 
 import { useContext } from 'login/context'
 import { Button } from 'login/login-button'
+import { useMenuProps } from 'login/hooks/use-menu-props'
 
 export const Menu = () => {
   const { user } = useContext()
 
-  return <Box px={3}>
+  return <Box {...useMenuProps()}>
     <Button user={user} />
   </Box>
 }