From 15ea84481e54e72d65919345edfb92cd3784ecbd Mon Sep 17 00:00:00 2001
From: andreea-dumitrascu
 <72592844+andreea-dumitrascu@users.noreply.github.com>
Date: Fri, 17 Sep 2021 10:03:01 +0300
Subject: [PATCH] [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                          |  6 +++++-
 src/cameras/content.jsx                       | 21 +++++++++----------
 src/cameras/hooks/use-livestream-padding.js   |  7 +++++++
 src/cameras/index.jsx                         |  6 +++---
 .../livestream/hooks/use-livestream-props.js  |  7 +++++++
 src/cameras/livestream/index.jsx              | 10 +++++++++
 src/cameras/sidebar/index.jsx                 |  6 +++---
 src/login/hooks/use-menu-props.js             |  6 ++++++
 src/login/menu.jsx                            |  3 ++-
 9 files changed, 53 insertions(+), 19 deletions(-)
 create mode 100644 src/cameras/hooks/use-livestream-padding.js
 create mode 100644 src/cameras/livestream/hooks/use-livestream-props.js
 create mode 100644 src/cameras/livestream/index.jsx
 create mode 100644 src/login/hooks/use-menu-props.js

diff --git a/public/settings.json b/public/settings.json
index 2aa2f605..fe8cd3d6 100644
--- a/public/settings.json
+++ b/public/settings.json
@@ -13,5 +13,9 @@
   "apiUrl": "https://hermes.api.dev.k8s.nerds.sh/graphql",
   "sources": [
     "k9Ljm6DdzCI"
-  ]
+  ],
+  "features": {
+    "login": false,
+    "livestream": false
+  }
 }
diff --git a/src/cameras/content.jsx b/src/cameras/content.jsx
index ec82e614..fb59237e 100644
--- a/src/cameras/content.jsx
+++ b/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>
 
diff --git a/src/cameras/hooks/use-livestream-padding.js b/src/cameras/hooks/use-livestream-padding.js
new file mode 100644
index 00000000..d1b20a60
--- /dev/null
+++ b/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%' } }
+}
diff --git a/src/cameras/index.jsx b/src/cameras/index.jsx
index 41458a38..23859a8f 100644
--- a/src/cameras/index.jsx
+++ b/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>
 
diff --git a/src/cameras/livestream/hooks/use-livestream-props.js b/src/cameras/livestream/hooks/use-livestream-props.js
new file mode 100644
index 00000000..b4e2f1c5
--- /dev/null
+++ b/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,
+})
diff --git a/src/cameras/livestream/index.jsx b/src/cameras/livestream/index.jsx
new file mode 100644
index 00000000..28717e15
--- /dev/null
+++ b/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>
diff --git a/src/cameras/sidebar/index.jsx b/src/cameras/sidebar/index.jsx
index c63647f5..5da5f0ae 100644
--- a/src/cameras/sidebar/index.jsx
+++ b/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>
diff --git a/src/login/hooks/use-menu-props.js b/src/login/hooks/use-menu-props.js
new file mode 100644
index 00000000..85268174
--- /dev/null
+++ b/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,
+})
diff --git a/src/login/menu.jsx b/src/login/menu.jsx
index 384b8c4f..5517e1a2 100644
--- a/src/login/menu.jsx
+++ b/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>
 }