feat(frontend/settings): refresh overlay dropdown on focus (#553)

Co-Authored-By: Harjot1Singh <harjot@harkul.com>
shabados · May 30, 2020 · 0a990ac · 0a990ac
1 parent 3bcf985
commit 0a990ac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/app/frontend/src/Settings/SettingComponents.js b/app/frontend/src/Settings/SettingComponents.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { string, func, any, arrayOf, number, bool } from 'prop-types'
 
 import classNames from 'classnames'
@@ -99,10 +99,36 @@ Button.defaultProps = {
   className: null,
 }
 
+export const UrlDropdown = ( { url, ...props } ) => {
+  const [ isOpen, setOpen ] = useState( false )
+  const [ values, setValues ] = useState( [] )
+
+  useEffect( () => {
+    fetch( url )
+      .then( res => res.json() )
+      .then( values => values.map( value => ( { name: value, value } ) ) )
+      .then( setValues )
+  }, [ setValues, isOpen, url ] )
+
+  return (
+    <Dropdown
+      {...props}
+      values={values}
+      onOpen={() => setOpen( true )}
+      onClose={() => setOpen( false )}
+    />
+  )
+}
+
+UrlDropdown.propTypes = {
+  url: string.isRequired,
+}
+
 const typeComponents = {
   [ OPTION_TYPES.dropdown ]: GeneralSettingEvent( Dropdown ),
   [ OPTION_TYPES.toggle ]: GeneralSettingParam( Toggle ),
   [ OPTION_TYPES.slider ]: GeneralSettingParam( Slider ),
+  [ OPTION_TYPES.urlDropdown ]: GeneralSettingEvent( UrlDropdown ),
 }
 
 export default type => typeComponents[ type ]
diff --git a/app/frontend/src/Settings/index.js b/app/frontend/src/Settings/index.js
@@ -77,15 +77,6 @@ const Settings = () => {
       } )
   }, [] )
 
-  // Fetch list of overlay themes from server
-  useEffect( () => {
-    fetch( `${BACKEND_URL}/overlay/themes` )
-      .then( res => res.json() )
-      .then( themes => {
-        OPTIONS.overlayName.values = themes.map( theme => ( { name: theme, value: theme } ) )
-      } )
-  }, [] )
-
   const openMobileMenu = () => setMobileOpen( true )
   const closeMobileMenu = () => setMobileOpen( false )
 

diff --git a/app/frontend/src/lib/options.js b/app/frontend/src/lib/options.js
@@ -41,7 +41,7 @@ import {
   faPauseCircle,
 } from '@fortawesome/free-regular-svg-icons'
 
-import { LANGUAGES } from './consts'
+import { LANGUAGES, BACKEND_URL } from './consts'
 import SHORTCUTS from './keyMap'
 
 /**
@@ -55,6 +55,7 @@ export const OPTION_TYPES = {
   toggle: Symbol( 'Toggle' ),
   slider: Symbol( 'Slider' ),
   colorPicker: Symbol( 'Color Picker' ),
+  urlDropdown: Symbol( 'URL Dropdown' ),
 }
 
 export const PRIVACY_TYPES = {
@@ -144,7 +145,7 @@ export const OPTIONS = {
       { name: 'Urdu', value: LANGUAGES.urdu },
     ],
   },
-  overlayName: { name: 'Overlay Name', icon: faPalette, type: OPTION_TYPES.dropdown, values: [], privacy: PRIVACY_TYPES.global },
+  overlayName: { name: 'Overlay Name', icon: faPalette, type: OPTION_TYPES.urlDropdown, values: [], url: `${BACKEND_URL}/overlay/themes`, privacy: PRIVACY_TYPES.global },
 }
 
 // Possible options groups