Fixing Channel page directory selection.

app/src/components/Channels.js

@@ -118,14 +118,6 @@ function ChannelPage({create, header}) {
         return <Loader active/>;
     }
 
-
-    const handleCheckbox = (e, {name, checked}) => {
-        if (e) {
-            e.preventDefault();
-        }
-        changeValue(name, checked);
-    }
-
     const handleInputChange = (e, {name, value}) => {
         if (e) {
             e.preventDefault();
@@ -154,7 +146,6 @@ function ChannelPage({create, header}) {
         const body = {
             name: channel.name,
             directory: channel.directory,
-            mkdir: channel.mkdir,
             url: channel.url,
         };
 
@@ -372,32 +363,12 @@ function ChannelPage({create, header}) {
                         </label>
                         <DirectorySearch
                             value={channel.directory}
-                            setInput={value => changeValue('directory', value)}
+                            onSelect={value => changeValue('directory', value)}
                             placeholder='videos/channel directory'
                         />
                     </FormField>
                 </FormGroup>
-                {
-                    create !== undefined &&
-                    <FormGroup>
-                        <FormField width={8}/>{/* Empty field*/}
-                        <FormField width={8}>
-                            <FormField>
-                                <Toggle
-                                    toggle
-                                    label="Create this directory, if it doesn't exist."
-                                    name="mkdir"
-                                    disabled={disabled}
-                                    error={errors.mkdir}
-                                    checked={channel.mkdir}
-                                    onChange={i => {
-                                        handleCheckbox(null, {name: 'mkdir', checked: i})
-                                    }}
-                                />
-                            </FormField>
-                        </FormField>
-                    </FormGroup>
-                }
+
                 <FormGroup>
                     <FormField width={16}>
                         <FormInput

app/src/components/Upload.js

@@ -28,10 +28,6 @@ export function Upload({disabled}) {
         }
     }, [destination]);
 
-    const handleDestination = (value) => {
-        setDestination(value);
-    }
-
     let progressBars;
     if (!_.isEmpty(progresses)) {
         progressBars = Object.entries(progresses).map(([name, value]) => {
@@ -71,7 +67,7 @@ export function Upload({disabled}) {
             <SForm.Field required>
                 <label>Destination</label>
                 <DirectorySearch
-                    onSelect={handleDestination}
+                    onSelect={i => setDestination(i)}
                     disabled={disabled}
                     style={{marginBottom: '0.5em'}}
                 />

app/src/components/admin/Settings.js

@@ -268,7 +268,7 @@ export function SettingsPage() {
         setQrOpen(true);
     }
 
-    const qrButton = <Button icon style={{marginBottom: '1em'}}>
+    const qrButton = <Button icon color='violet' style={{marginBottom: '1em'}}>
         <Icon name='qrcode' size='big'/>
     </Button>;
 
@@ -386,13 +386,13 @@ export function SettingsPage() {
                 <br/>
 
                 <ButtonGroup>
-                    <Button color={state.navColor} onClick={e => e.preventDefault()}>Navbar Color</Button>
+                    <Button color={state.nav_color} onClick={e => e.preventDefault()}>Navbar Color</Button>
                     <Dropdown
                         className='button icon'
                         floating
                         options={navColorOptions}
-                        onChange={(e, {value}) => setState({...state, navColor: value})}
-                        value={state.navColor}
+                        onChange={(e, {value}) => setState({...state, nav_color: value})}
+                        value={state.nav_color}
                     />
                 </ButtonGroup>
 
@@ -514,8 +514,8 @@ export function SettingsPage() {
             </GridRow>
         </Grid>
 
-        <p>Configs control a WROLPi, they are the source of truth. Any changes to a config will be applied to the
-            database when imported (typically at startup).</p>
+        <p>These configs control this WROLPi; they are the source of truth. Any changes to configs will be applied to
+            the database when imported (typically at startup).</p>
 
         <ConfigsTable
             configs={configs}

app/src/hooks/customHooks.js

@@ -423,7 +423,6 @@ export const useChannel = (channel_id) => {
     const emptyChannel = {
         name: '',
         directory: '',
-        mkdir: false,
         url: '',
         download_frequency: '',
         match_regex: '',
@@ -462,7 +461,9 @@ export const useChannel = (channel_id) => {
     }, [channel_id])
 
     const changeValue = (name, value) => {
-        setChannel({...channel, [name]: value});
+        const newChannel = {...channel, [name]: value};
+        console.debug('useChannel.changeValue', newChannel);
+        setChannel(newChannel);
     }
 
     return {channel, changeValue, original, fetched, fetchChannel: localGetChannel};