feat(boards): add ability to update boards

src/components/Boards/Boards.stories.tsx

@@ -27,5 +27,6 @@ export const Default = () => (
       },
     ]}
     onAddBoard={noop}
+    onUpdateBoard={noop}
   />
 );

src/components/Boards/Boards.tsx

@@ -15,6 +15,7 @@ interface Props {
     name: string;
   }[];
   onAddBoard: () => void;
+  onUpdateBoard: (args: { id: string; value: string }) => void;
 }
 
 export default function(props: Props) {
@@ -37,6 +38,7 @@ export default function(props: Props) {
               id={board.id}
               name={board.name}
               link={`boards/${board.id}`}
+              onSubmit={props.onUpdateBoard}
             />
           ))}
         </Grid>

src/components/Boards/BoardsContainer.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+
 import Boards from './Boards';
 import useGroups from '../../lib/hooks/useGroups';
 import useUpdateGroups from '../../lib/hooks/useUpdateGroups';
 import { GroupType } from '../../lib/types';
 
 export default function BoardsContainer() {
+  const history = useHistory();
   const { data, loading, error } = useGroups();
   const updateBoard = useUpdateGroups();
 
-  function onAddBoard() {
-    updateBoard({
+  async function onAddBoard() {
+    const result = await updateBoard({
       type: GroupType.Board,
       name: `Board - ${new Date().toLocaleDateString('en-US', {
         year: 'numeric',
@@ -19,6 +22,16 @@ export default function BoardsContainer() {
         minute: 'numeric',
       })}`,
     });
+
+    history.push(`boards/${result.id}`);
+  }
+
+  function onUpdateBoard({ id, value }: { id: string; value: string }) {
+    updateBoard({
+      id,
+      type: GroupType.Board,
+      name: value,
+    });
   }
 
   if (loading) {
@@ -29,5 +42,11 @@ export default function BoardsContainer() {
     return <div>Error Loading Boards</div>;
   }
 
-  return <Boards boards={data} onAddBoard={onAddBoard} />;
+  return (
+    <Boards
+      boards={data}
+      onUpdateBoard={onUpdateBoard}
+      onAddBoard={onAddBoard}
+    />
+  );
 }

src/components/Tile/Tile.stories.tsx

@@ -5,4 +5,4 @@ export default {
   title: 'Tile',
 };
 
-export const Default = () => <Tile id="1" name="Board A" />;
+export const Default = () => <Tile id="1" name="Board A" link="#routes" />;

src/components/Tile/Tile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
 import Grid from '@material-ui/core/Grid';
@@ -7,37 +7,108 @@ import Avatar from '@material-ui/core/Avatar';
 import CardActionArea from '@material-ui/core/CardActionArea';
 import Card from '@material-ui/core/Card';
 import * as S from './Tile.styles';
+import Input from '@material-ui/core/Input';
+import { useTheme } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
 
 interface Props {
   id: string;
   name: string;
   link?: string;
+  onSubmit?: (args: { id: string; value: string }) => void;
 }
 
 export default function Tile(props: Props) {
+  const theme = useTheme();
+  const [isEditing, setIsEditing] = useState(false);
+  const [name, setName] = useState(props.name);
+  const [nextName, setNextName] = useState(name);
+
+  useEffect(() => {
+    setName(props.name);
+  }, [props.name]);
+
+  const handleOnEditClick = () => {
+    setIsEditing(true);
+  };
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNextName(e.target.value);
+  };
+
+  const handleCancelClick = () => {
+    setName(name);
+    setNextName(name);
+    setIsEditing(false);
+  };
+
+  const handleConfirmClick = () => {
+    if (props.onSubmit) {
+      props.onSubmit({ id: props.id, value: nextName });
+    }
+    setName(nextName);
+    setIsEditing(false);
+  };
+
   const headerNode = (
     <CardHeader
       avatar={<Avatar>{props.name ? props.name[0].toUpperCase() : ''}</Avatar>}
-      title={props.name}
+      title={
+        isEditing ? (
+          <FormControl>
+            <Input
+              autoFocus={true}
+              color="primary"
+              disableUnderline={true}
+              fullWidth={true}
+              placeholder={props.name}
+              inputProps={{ style: theme.typography.body2 }}
+              onChange={handleNameChange}
+              value={nextName}
+            />
+          </FormControl>
+        ) : (
+          name
+        )
+      }
     />
   );
 
   return (
     <Grid item xs={6} sm={3}>
-      <Card>
-        {props.link ? (
-          <CardActionArea>
-            <S.MutedLink to={props.link}>{headerNode}</S.MutedLink>
-          </CardActionArea>
-        ) : (
-          headerNode
-        )}
-        <CardActions>
-          <Button size="small">Edit</Button>
-          <Button size="small" color="secondary">
-            Delete
-          </Button>
-        </CardActions>
+      <Card raised={isEditing}>
+        <form noValidate autoComplete="off">
+          {props.link && !isEditing ? (
+            <CardActionArea>
+              <S.MutedLink to={props.link}>{headerNode}</S.MutedLink>
+            </CardActionArea>
+          ) : (
+            headerNode
+          )}
+          {isEditing ? (
+            <CardActions>
+              <Button color="primary" size="small" onClick={handleConfirmClick}>
+                Confirm
+              </Button>
+              <Button
+                onClick={handleCancelClick}
+                size="small"
+                color="secondary"
+              >
+                Cancel
+              </Button>
+            </CardActions>
+          ) : (
+            <CardActions>
+              <Button size="small" onClick={handleOnEditClick}>
+                Edit
+              </Button>
+              <Button size="small" color="secondary">
+                Delete
+              </Button>
+            </CardActions>
+          )}
+        </form>
       </Card>
     </Grid>
   );