Переглянути джерело

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 роки тому
батько
коміт
5c07ddc22d

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

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