added nodes heroize button

src/components/node/NodePanel/index.tsx

@@ -3,67 +3,77 @@ import * as styles from './styles.scss';
 import { INode } from '~/redux/types';
 import { createPortal } from 'react-dom';
 import { NodePanelInner } from '~/components/node/NodePanelInner';
+import pick from 'ramda/es/pick';
 
 interface IProps {
-  node: INode;
+  node: Partial<INode>;
   layout: {};
 
   can_edit: boolean;
   can_like: boolean;
+  can_star: boolean;
+
   onEdit: () => void;
   onLike: () => void;
+  onStar: () => void;
 }
 
-const NodePanel: FC<IProps> = memo(({ node, layout, can_edit, can_like, onEdit, onLike }) => {
-  const [stack, setStack] = useState(false);
+const NodePanel: FC<IProps> = memo(
+  ({ node, layout, can_edit, can_like, can_star, onEdit, onLike, onStar }) => {
+    const [stack, setStack] = useState(false);
 
-  const ref = useRef(null);
-  const getPlace = useCallback(() => {
-    if (!ref.current) return;
+    const ref = useRef(null);
+    const getPlace = useCallback(() => {
+      if (!ref.current) return;
 
-    const { offsetTop } = ref.current;
-    const { height } = ref.current.getBoundingClientRect();
-    const { scrollY, innerHeight } = window;
+      const { offsetTop } = ref.current;
+      const { height } = ref.current.getBoundingClientRect();
+      const { scrollY, innerHeight } = window;
 
-    setStack(offsetTop > scrollY + innerHeight - height);
-  }, [ref]);
+      setStack(offsetTop > scrollY + innerHeight - height);
+    }, [ref]);
 
-  useEffect(() => {
-    getPlace();
-    window.addEventListener('scroll', getPlace);
-    window.addEventListener('resize', getPlace);
+    useEffect(() => {
+      getPlace();
+      window.addEventListener('scroll', getPlace);
+      window.addEventListener('resize', getPlace);
 
-    return () => {
-      window.removeEventListener('scroll', getPlace);
-      window.removeEventListener('resize', getPlace);
-    };
-  }, [layout]);
+      return () => {
+        window.removeEventListener('scroll', getPlace);
+        window.removeEventListener('resize', getPlace);
+      };
+    }, [layout]);
 
-  return (
-    <div className={styles.place} ref={ref}>
-      {stack ? (
-        createPortal(
+    return (
+      <div className={styles.place} ref={ref}>
+        {stack ? (
+          createPortal(
+            <NodePanelInner
+              node={node}
+              stack
+              onEdit={onEdit}
+              onLike={onLike}
+              onStar={onStar}
+              can_edit={can_edit}
+              can_like={can_like}
+              can_star={can_star}
+            />,
+            document.body
+          )
+        ) : (
           <NodePanelInner
             node={node}
-            stack
             onEdit={onEdit}
             onLike={onLike}
+            onStar={onStar}
             can_edit={can_edit}
             can_like={can_like}
-          />,
-          document.body
-        )
-      ) : (
-        <NodePanelInner
-          node={node}
-          onEdit={onEdit}
-          onLike={onLike}
-          can_edit={can_edit}
-          can_like={can_like}
-        />
-      )}
-    </div>
-  );
-});
+            can_star={can_star}
+          />
+        )}
+      </div>
+    );
+  }
+);
 
 export { NodePanel };

src/components/node/NodePanelInner/index.tsx

@@ -7,20 +7,24 @@ import { INode } from '~/redux/types';
 import classNames from 'classnames';
 
 interface IProps {
-  node: INode;
+  node: Partial<INode>;
   stack?: boolean;
 
   can_edit: boolean;
   can_like: boolean;
+  can_star: boolean;
   onEdit: () => void;
   onLike: () => void;
+  onStar: () => void;
 }
 
 const NodePanelInner: FC<IProps> = ({
-  node: { title, user, is_liked },
+  node: { title, user, is_liked, is_heroic },
   stack,
+  can_star,
   can_edit,
   can_like,
+  onStar,
   onEdit,
   onLike,
 }) => {
@@ -35,6 +39,15 @@ const NodePanelInner: FC<IProps> = ({
         </Group>
 
         <div className={styles.buttons}>
+          {can_star && (
+            <div className={classNames(styles.star, { is_heroic })}>
+              {is_heroic ? (
+                <Icon icon="star_full" size={24} onClick={onStar} />
+              ) : (
+                <Icon icon="star" size={24} onClick={onStar} />
+              )}
+            </div>
+          )}
           {can_edit && (
             <div>
               <Icon icon="edit" size={24} onClick={onEdit} />

src/components/node/NodePanelInner/styles.scss

@@ -166,3 +166,18 @@
     animation: pulse 0.75s infinite;
   }
 }
+
+.star {
+  transition: fill, stroke 0.25s;
+  will-change: transform;
+
+  &:global(.is_heroic) {
+    svg {
+      fill: $orange;
+    }
+  }
+
+  &:hover {
+    fill: $orange;
+  }
+}