Add captions, wider buttons

Author: Robb Satterwhite

src/components/AddCat.js

@@ -60,11 +60,11 @@ const AddCat = ({ props }) => {
 
           </form>
           <span className='editButtonArea'>
-            <IconButton config={ { title:'accept add',
-              disabled: !isValidLength(categoryName, 1, 60),
+            <IconButton config={ { title:'accept add', caption:'add category',
+              disabled: !isValidLength(categoryName, 1, 60), width:'wide',
               iconType:'confirm', callProc:onRequestAdd }} />
-            <IconButton config={ { title:'cancel add',
-              iconType:'cancel', callProc:cancelAddLocal }} />
+            <IconButton config={ { title:'cancel add', caption:'cancel add',
+              width:'wide', iconType:'cancel', callProc:cancelAddLocal }} />
           </span>
         </div>
       </Fragment>

src/components/AddList.js

@@ -50,11 +50,11 @@ const AddList = ({ props }) => {
             </span>
           </form>
           <span className='editButtonArea'>
-            <IconButton config={ { title:'accept add',
-              disabled: !isValidLength(listName, 1, 60),
+            <IconButton config={ { title:'accept add', caption:'add new list',
+              disabled: !isValidLength(listName, 1, 60), width:'wide',
               iconType:'confirm', callProc:onRequestAdd }} />
-            <IconButton config={ { title:'cancel add',
-              iconType:'cancel', callProc:cancelAddLocal }} />
+            <IconButton config={ { title:'cancel add', caption:'cancel new list',
+              width:'wide', iconType:'cancel', callProc:cancelAddLocal }} />
           </span>
         </div>
     </Fragment>

src/components/CopyList.js

@@ -11,7 +11,7 @@ import '../css/lists.css';
 import * as api from '../util/constants';
 import { useEscape, validateLength, isValidLength } from '../util/helpers'; // hook to capture escape key
 import { useStore } from '../store/StoreContext';
-import { handleUpdateList } from '../store/handlers';
+import { handleCopyList } from '../store/handlers';
 import { IconButton } from './IconButton';
 import TextField from '@material-ui/core/TextField';
 
@@ -25,9 +25,9 @@ const CopyList = ({ cancelCopy, listRec }) => {
   };
 
   const onRequestCopy = async () => {
-    // if (!validateLength(listName, 1, 60, 'list name')) return;
-    // const status = await handleCopyList(listRec.id, listName, state, dispatch);
-    // if (status===api.OK) { cancelCopy(); }
+    if (!validateLength(listName, 1, 60, 'list name')) return;
+    const status = await handleCopyList(listRec.id, listName, state, dispatch);
+    if (status===api.OK) { cancelCopy(); } // TODO go to new list if successful
     // TODO: maybe add additional message if API operation failed?
   };
 

src/components/EditCat.js

@@ -16,9 +16,12 @@ import { IconButton } from './IconButton';
 import TextField from '@material-ui/core/TextField';
 
 const EditCat = ({ props }) => {
-  const { cancelEdit, categoryRec }  = props;
+  const { cancelEdit, categoryRec } = props;
   const { state, dispatch } = useStore();
   const [categoryName, setCategoryName] = useState(categoryRec.categoryName);
+  useEscape(() => cancelEdit());
+  const catNameChangeDisabled = ((categoryName.trim()===categoryRec.categoryName) ||
+    !isValidLength(categoryName, 1, 60));
 
   const onSubmitEdit = (e) => {
     e.preventDefault();
@@ -33,7 +36,7 @@ const EditCat = ({ props }) => {
     // TODO: maybe add additional message if API operation failed?
   };
 
-  useEscape(() => cancelEdit());
+
   return (
       <Fragment>
         <div className='addArea'>
@@ -51,11 +54,11 @@ const EditCat = ({ props }) => {
             </span>
           </form>
           <span className='editButtonArea'>
-            <IconButton config={ { title:'accept category edit',
-              disabled: !isValidLength(categoryName, 1, 60),
+            <IconButton config={ { title:'accept category edit', caption:'rename category',
+              disabled:catNameChangeDisabled, width:'wide',
               iconType:'confirm', callProc:onRequestEdit }} />
-            <IconButton config={ { title:'cancel category edit',
-              iconType:'cancel', callProc:cancelEdit }} />
+            <IconButton config={ { title:'cancel category edit', caption:'cancel rename',
+              width:'wide', iconType:'cancel', callProc:cancelEdit }} />
           </span>
         </div>
       </Fragment>

src/components/EditList.js

@@ -50,8 +50,8 @@ const EditList = ({ cancelEdit, listRec }) => {
             </span>
           </form>
           <span className='editButtonArea'>
-            <IconButton config={ { title:'accept list edit', caption:'confirm rename',
-              disabled: listNameChangeDisabled, width:'wide',
+            <IconButton config={ { title:'accept list edit', caption:'rename list',
+              disabled:listNameChangeDisabled, width:'wide',
               iconType:'confirm', callProc:onRequestEdit }} />
             <IconButton config={ { title:'cancel list edit', caption:'cancel rename',
               width:'wide', iconType:'cancel', callProc:cancelEdit }} />

src/components/OneList.js

@@ -170,15 +170,15 @@ const OneList = () => {
   const moreIconsZone = () => {
     return (
       <div className='oneListMoreIcons'>
-        <IconButton config={ { title:'rename list', caption:'rename list',
-          iconType:'edit', callProc:setupEdit } } />
+        <IconButton config={ { title:'rename list', caption:'rename this list',
+          width:'wide', iconType:'edit', callProc:setupEdit } } />
         { showOrHideMoveIcon() }
-        <IconButton config={ { title:'copy list', caption:'copy list',
-          iconType:'copy', callProc:setupCopy } } />
-        <IconButton config={ { title:'delete list', caption:'delete list',
-          iconType:'delete', callProc:removeList } } />
+        <IconButton config={ { title:'copy list', caption:'copy this list',
+          width:'wide', iconType:'copy', callProc:setupCopy } } />
+        <IconButton config={ { title:'delete list', caption:'delete this list',
+          width:'wide', iconType:'delete', callProc:removeList } } />
         <IconButton config={ { title:'hide list ops', caption:'hide changes menu',
-          iconType:'cancel', callProc:cancelMore } } />
+          width:'wide', iconType:'cancel', callProc:cancelMore } } />
       </div>
     );
   };
@@ -191,7 +191,7 @@ const OneList = () => {
     if (!areThereOtherCats) {return null;}
     return (
       <IconButton config={ { title:'change category for this list', caption:'change category',
-        iconType:'move', callProc:setupMove } } />
+      width:'wide', iconType:'move', callProc:setupMove } } />
     );
   };