fix: #59

apps/web/src/components/list-item/index.js

@@ -52,8 +52,6 @@ const ItemSelector = ({ isSelected, toggleSelection }) => {
 };
 
 const ListItem = props => {
-  //const selectedNote = useStore(store => store.selectedNote);
-  // const isOpened = selectedNote === props.id;
   const [parentRef, closeContextMenu] = useContextMenu(
     `contextMenu${props.index}`
   );
@@ -90,7 +88,11 @@ const ListItem = props => {
       alignItems="center"
       sx={{
         borderBottom: "1px solid",
-        borderBottomColor: "navbg"
+        borderBottomColor: "border",
+        cursor: "pointer",
+        ":hover": {
+          borderBottomColor: "primary"
+        }
       }}
     >
       {isSelectionMode && (
@@ -109,12 +111,8 @@ const ListItem = props => {
           position: "relative",
           marginTop: props.pinned ? 4 : 0,
           paddingTop: props.pinned ? 0 : 2,
-          paddingBottom: 2,
-          cursor: "default",
-          ":hover": {
-            borderBottomColor: "primary",
-            cursor: "pointer"
-          }
+          paddingBottom: 2
+
           //TODO add onpressed reaction
         }}
       >
@@ -161,11 +159,14 @@ const ListItem = props => {
             }
           }}
         >
-          <Flex flexDirection="row" justifyContent="space-between">
-            <Text fontFamily={"heading"} fontSize="title" fontWeight={"bold"}>
-              {props.title}
-            </Text>
-          </Flex>
+          <Text
+            color={props.focused ? "primary" : "text"}
+            fontFamily={"heading"}
+            fontSize="title"
+            fontWeight={"bold"}
+          >
+            {props.title}
+          </Text>
           <Text
             display={props.body ? "flex" : "none"}
             variant="body"

apps/web/src/components/note/index.js

@@ -6,7 +6,7 @@ import { showSnack } from "../snackbar";
 import ListItem from "../list-item";
 import { confirm } from "../dialogs/confirm";
 import { showMoveNoteDialog } from "../dialogs/movenotedialog";
-import { store } from "../../stores/note-store";
+import { store, useStore } from "../../stores/note-store";
 import { store as editorStore } from "../../stores/editor-store";
 
 const dropdownRefs = [];
@@ -46,44 +46,45 @@ const menuItems = (note, index, groupIndex) => [
   }
 ];
 
-export default class Note extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    const prevItem = this.props.item;
-    const nextItem = nextProps.item;
-    return (
-      prevItem.pinned !== nextItem.pinned ||
-      prevItem.favorite !== nextItem.favorite ||
-      prevItem.headline !== nextItem.headline ||
-      prevItem.title !== nextItem.title
-    );
-  }
-
-  render() {
-    const { item, index, groupIndex } = this.props;
-    const note = item;
-    return (
-      <ListItem
-        selectable
-        item={note}
-        title={note.title}
-        body={note.headline}
-        id={note.id}
-        index={index}
-        onClick={async () => {
-          await editorStore.getState().openSession(note);
-        }}
-        info={
-          <Flex justifyContent="center" alignItems="center">
-            <TimeAgo datetime={note.dateCreated} />
-            {note.locked && <Icon.Lock size={13} style={{ marginLeft: 5 }} />}
-            {note.favorite && <Icon.Star size={13} style={{ marginLeft: 5 }} />}
-          </Flex>
-        }
-        pinned={note.pinned}
-        menuData={note}
-        menuItems={menuItems(note, index, groupIndex)}
-        dropdownRefs={dropdownRefs}
-      />
-    );
-  }
+function Note(props) {
+  const { item, index, groupIndex } = props;
+  const note = item;
+  const selectedNote = useStore(store => store.selectedNote);
+  const isOpened = selectedNote === note.id;
+  return (
+    <ListItem
+      selectable
+      focused={isOpened}
+      item={note}
+      title={note.title}
+      body={note.headline}
+      id={note.id}
+      index={index}
+      onClick={async () => {
+        await editorStore.getState().openSession(note);
+      }}
+      info={
+        <Flex justifyContent="center" alignItems="center">
+          <TimeAgo datetime={note.dateCreated} />
+          {note.locked && <Icon.Lock size={13} style={{ marginLeft: 5 }} />}
+          {note.favorite && <Icon.Star size={13} style={{ marginLeft: 5 }} />}
+        </Flex>
+      }
+      pinned={note.pinned}
+      menuData={note}
+      menuItems={menuItems(note, index, groupIndex)}
+      dropdownRefs={dropdownRefs}
+    />
+  );
 }
+
+export default React.memo(Note, function(prevProps, nextProps) {
+  const prevItem = prevProps.item;
+  const nextItem = nextProps.item;
+  return (
+    prevItem.pinned === nextItem.pinned &&
+    prevItem.favorite === nextItem.favorite &&
+    prevItem.headline === nextItem.headline &&
+    prevItem.title === nextItem.title
+  );
+});