Pārlūkot izejas kodu

Fix crash when clicking notification bell button

Fixes an issue where the app crashes when clicking the notification bell
button when there are no notification items.
Sergiu Miclea 6 gadi atpakaļ
vecāks
revīzija
5c07ddc22d

+ 22 - 12
src/components/molecules/NotificationDropdown/NotificationDropdown.jsx

@@ -72,7 +72,7 @@ const List = styled.div`
   top: 45px;
   z-index: 10;
 `
-const ListItem = styled(Link)`
+const ListItemCss = css`
   display: flex;
   border-bottom: 1px solid ${Palette.grayscale[0]};
   padding: 8px;
@@ -81,20 +81,11 @@ const ListItem = styled(Link)`
   text-decoration: none;
   color: inherit;
 
-  &:hover {
-    background: ${Palette.grayscale[0]};
-  }
-
   &:first-child {
     position: relative;
     border-top-left-radius: ${StyleProps.borderRadius};
     border-top-right-radius: ${StyleProps.borderRadius};
 
-    &:hover:after {
-      background: ${Palette.grayscale[0]};
-      border-color: transparent transparent ${Palette.grayscale[0]} ${Palette.grayscale[0]};
-    }
-
     &:after {
       content: ' ';
       position: absolute;
@@ -116,6 +107,25 @@ const ListItem = styled(Link)`
     border-bottom-right-radius: ${StyleProps.borderRadius};
   }
 `
+const ListItemNoLink = styled.div`
+  ${ListItemCss}
+
+  cursor: default;
+`
+const ListItem = styled(Link)`
+  ${ListItemCss}
+
+  &:hover {
+    background: ${Palette.grayscale[0]};
+  }
+
+  &:first-child {
+     &:hover:after {
+      background: ${Palette.grayscale[0]};
+      border-color: transparent transparent ${Palette.grayscale[0]} ${Palette.grayscale[0]};
+    }
+  }
+`
 export const InfoColumn = styled.div`
   display: flex;
   flex-direction: column;
@@ -229,12 +239,12 @@ class NotificationDropdown extends React.Component<Props, State> {
 
     return (
       <List>
-        <ListItem
+        <ListItemNoLink
           onMouseDown={() => { this.itemMouseDown = true }}
           onMouseUp={() => { this.itemMouseDown = false }}
         >
           <NoItems data-test-id={`${testId}-noItems`}>There are no notifications</NoItems>
-        </ListItem>
+        </ListItemNoLink>
       </List>
     )
   }