Contacts: Add edit button to group list items

src/Contacts/ContactEdit.tsx

@@ -120,7 +120,7 @@ interface PropsType {
   collections: CachedCollection[];
   initialCollection?: string;
   item?: ContactType;
-  group?: boolean;
+  newGroup?: boolean;
   onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise<void>;
   onDelete: (contact: ContactType, collectionUid: string) => void;
   onCancel: () => void;
@@ -305,7 +305,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     comp.updatePropertyWithValue("version", "4.0");
     comp.updatePropertyWithValue("uid", this.state.uid);
     comp.updatePropertyWithValue("rev", ICAL.Time.now());
-    if (this.props.group) {
+    if (this.props.newGroup) {
       comp.updatePropertyWithValue("kind", "group");
     }
 
@@ -356,7 +356,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     }
 
 
-    if (!this.props.group && !this.state.group) {
+    if (!this.props.newGroup && !this.state.group) {
       setProperties("tel", this.state.phone);
       setProperties("email", this.state.email);
       setProperties("adr", this.state.address);
@@ -399,7 +399,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
     return (
       <React.Fragment>
         <h2>
-          {this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.group ? "New Group" : "New Contact"}
+          {this.props.item ? this.state.group ? "Edit Group" : "Edit Contact" : this.props.newGroup ? "New Group" : "New Contact"}
         </h2>
         <form style={styles.form} onSubmit={this.onSubmit}>
           <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
@@ -417,7 +417,7 @@ class ContactEdit extends React.PureComponent<PropsType> {
             </Select>
           </FormControl>
 
-          {this.props.group || this.state.group ?
+          {this.props.newGroup || this.state.group ?
             <TextField
               name="firstName"
               placeholder="Name"

src/Contacts/Main.tsx

@@ -119,7 +119,7 @@ export default function ContactsMain() {
           onDelete={onItemDelete}
           onCancel={onCancel}
           history={history}
-          group
+          newGroup
         />
       </Route>
       <Route
@@ -176,7 +176,7 @@ export default function ContactsMain() {
                   onDelete={onItemDelete}
                   onCancel={onCancel}
                   history={history}
-                  group
+                  newGroup
                 />
               </Route>
               <Route

src/Contacts/SearchableAddressBook.tsx

@@ -68,6 +68,7 @@ export default function SearchableAddressBook(props: PropsType) {
           filterByGroup={filterByGroup}
           setFilterByGroup={setFilterByGroup}
           newGroup={props.onNewGroupClick}
+          editGroup={props.onItemClick}
         />
       </Grid>
 

src/Contacts/Sidebar.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import InboxIcon from "@material-ui/icons/Inbox";
 import LabelIcon from "@material-ui/icons/LabelOutlined";
 import AddIcon from "@material-ui/icons/Add";
+import EditIcon from "@material-ui/icons/EditOutlined";
 
 import IconButton from "@material-ui/core/IconButton";
 
@@ -15,19 +16,27 @@ interface ListItemPropsType {
   primaryText: string;
   filterByGroup: string | undefined;
   setFilterByGroup: (group: string | undefined) => void;
+  editGroup: () => void;
 }
 
 function SidebarListItem(props: ListItemPropsType) {
-  const { name, icon, primaryText, filterByGroup } = props;
+  const { name, icon, primaryText, filterByGroup, editGroup } = props;
 
   const handleClick = () => props.setFilterByGroup(name);
 
+  const selected = name === filterByGroup;
+
   return (
     <ListItem
       onClick={handleClick}
-      selected={name === filterByGroup}
+      selected={selected}
       leftIcon={icon}
       primaryText={primaryText}
+      secondaryAction={name && selected &&
+        <IconButton onClick={editGroup}>
+          <EditIcon />
+        </IconButton>
+      }
     />
   );
 }
@@ -37,10 +46,11 @@ interface PropsType {
   filterByGroup: string | undefined;
   setFilterByGroup: (group: string | undefined) => void;
   newGroup: () => void;
+  editGroup: (group: ContactType) => void;
 }
 
 export default React.memo(function Sidebar(props: PropsType) {
-  const { groups, filterByGroup, setFilterByGroup, newGroup } = props;
+  const { groups, filterByGroup, setFilterByGroup, newGroup, editGroup } = props;
 
   const groupList = [...groups].sort((a, b) => a.fn.localeCompare(b.fn)).map((group) => (
     <SidebarListItem
@@ -50,6 +60,7 @@ export default React.memo(function Sidebar(props: PropsType) {
       icon={<LabelIcon />}
       filterByGroup={filterByGroup}
       setFilterByGroup={setFilterByGroup}
+      editGroup={() => editGroup(group)}
     />
   ));
 
@@ -61,6 +72,7 @@ export default React.memo(function Sidebar(props: PropsType) {
         icon={<InboxIcon />}
         filterByGroup={filterByGroup}
         setFilterByGroup={setFilterByGroup}
+        editGroup={newGroup}
       />
 
       <div style={{ display: "flex", justifyContent: "space-between" }}>

src/widgets/List.tsx

@@ -6,6 +6,7 @@ import * as React from "react";
 import { createStyles, makeStyles } from "@material-ui/core/styles";
 import MuiList from "@material-ui/core/List";
 import MuiListItem from "@material-ui/core/ListItem";
+import MuiListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import MuiListSubheader from "@material-ui/core/ListSubheader";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
@@ -47,6 +48,7 @@ interface ListItemPropsType {
   nestedItems?: React.ReactNode[];
   selected?: boolean;
   secondaryTextColor?: "initial" | "inherit" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error";
+  secondaryAction?: React.ReactNode;
 }
 
 export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
@@ -64,6 +66,7 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
     nestedItems,
     selected,
     secondaryTextColor,
+    secondaryAction,
   } = _props;
 
   const extraProps = (onClick || href) ? {
@@ -94,6 +97,11 @@ export const ListItem = React.memo(function ListItem(_props: ListItemPropsType)
             {rightIcon}
           </ListItemIcon>
         )}
+        {secondaryAction && (
+          <MuiListItemSecondaryAction>
+            {secondaryAction}
+          </MuiListItemSecondaryAction>
+        )}
       </MuiListItem>
       {nestedItems && (
         <List className={classes.nested} disablePadding>