Added helper text to EditableText to avoid blank invisible fields

Author: wickathou

frontend/src/pages/_dashboard/renderDashboard/organiser/edit/questions/index.js

@@ -8,66 +8,6 @@ import FormControl from 'components/inputs/FormControl'
 import QuestionSelect from './QuestionSelect'
 
 export default () => {
-    // const buildColumns = useCallback((form, field, fieldValue) => {
-    //     return [
-    //         {
-    //             Header: 'Name',
-    //             accessor: 'label',
-    //         },
-    //         {
-    //             Header: 'Category',
-    //             accessor: 'category',
-    //         },
-    //         {
-    //             Header: 'Enabled?',
-    //             accessor: 'enabled',
-    //             Cell: props => {
-    //                 const row = props.row.original
-    //                 return (
-    //                     <Switch
-    //                         color="primary"
-    //                         disabled={!row.editable}
-    //                         checked={row.enable}
-    //                         onChange={(e, enable) => {
-    //                             form.setFieldValue(field.name, {
-    //                                 ...fieldValue,
-    //                                 [row.key]: {
-    //                                     ...fieldValue[row.key],
-    //                                     enable,
-    //                                     require: !enable ? false : row.require,
-    //                                 },
-    //                             })
-    //                         }}
-    //                     />
-    //                 )
-    //             },
-    //         },
-    //         {
-    //             Header: 'Required?',
-    //             accessor: 'require',
-    //             Cell: props => {
-    //                 const row = props.row.original
-    //                 return (
-    //                     <Switch
-    //                         color="primary"
-    //                         disabled={!row.editable || !row.enable}
-    //                         checked={row.require}
-    //                         onChange={(e, require) => {
-    //                             form.setFieldValue(field.name, {
-    //                                 ...fieldValue,
-    //                                 [row.key]: {
-    //                                     ...fieldValue[row.key],
-    //                                     require,
-    //                                 },
-    //                             })
-    //                         }}
-    //                     />
-    //                 )
-    //             },
-    //         },
-    //     ]
-    // }, [])
-
     return (
         <Grid container spacing={3}>
             <Grid item xs={12}>

frontend/src/pages/_dashboard/renderDashboard/organiser/edit/submission/components/section/EditableText.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 const typeToClass = {
     heading: 'tw-text-xl tw-font-bold',
@@ -22,7 +22,7 @@ const EditableText = ({ value, save, className = '', type = 'default' }) => {
         }
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         setCurrentValue(value)
     }, [value])
 
@@ -42,7 +42,7 @@ const EditableText = ({ value, save, className = '', type = 'default' }) => {
             onClick={() => setIsEditable(true)}
             className={`tw-w-full tw-items-start tw-justify-start tw-text-gray-800 tw-cursor-pointer ${displayClass}`}
         >
-            {currentValue}
+            {currentValue || 'Click to edit'}
         </span>
     )
 }