Add hover animation to post summaries. Fix key error for post list item groups

Author: jason-roundtree

web/pages/index.js

@@ -12,9 +12,10 @@ const PostContainer = styled.li`
     padding: 7px 10px;
     font-size: 1.75em;
     background-color: ${({ theme }) => theme.listItemBgColor};
+    transition: background 300ms;
     &:hover {
         cursor: pointer;
-        background-color: ${({ theme }) => theme.secondaryColor};
+        background: ${({ theme }) => theme.secondaryColor};
         border: ${({ theme }) => theme.secondaryColor};
     }
 `
@@ -87,9 +88,7 @@ function Index({
 
     useEffect(() => {
         getTagCountsData(tags)
-            .then(tagCounts => {
-                setTagCounts(tagCounts)
-            })
+            .then(tagCounts => setTagCounts(tagCounts))
             .catch(err => console.log('error getting tag counts: ', err))
     }, [])
 

web/pages/posts/[slug].js

@@ -314,19 +314,22 @@ function Post(props) {
     }
     // TODO: test if list rendering works correctly with multiple lists in post
     let list = []
+    let listGroupKey = ''
     props.body && props.body.forEach(section => {
         // console.log('section: ', section)
         if (section.listItem) {
             list.push(
                 <ListItem key={section._key}>{formatListItem(section.children)}</ListItem>
             )
+            listGroupKey += section._key
         } else {
             if (list.length > 0) {
                 postContent.push(
-                    // TODO: why is React key error being thrown here?
-                    <UL>{list}</UL>
+                    // TODO: why is key needed on this UL here?
+                    <UL key={listGroupKey}>{list}</UL>
                 )
                 list = []
+                listGroupKey = ''
             }
             switch(section._type) {
                 case 'block':