fixed node actions

src/components/node/NodePanel/index.tsx

@@ -1,32 +0,0 @@
-import React, { FC, memo } from 'react';
-import { INode } from '~/redux/types';
-import { NodePanelInner } from '~/components/node/NodePanelInner';
-import { useNodePermissions } from '~/utils/hooks/node/useNodePermissions';
-import { useNodeActions } from '~/utils/hooks/node/useNodeActions';
-import { shallowEqual } from 'react-redux';
-
-interface IProps {
-  node: INode;
-  isLoading: boolean;
-}
-
-const NodePanel: FC<IProps> = memo(({ node, isLoading }) => {
-  const [can_edit, can_like, can_star] = useNodePermissions(node);
-  const { onEdit, onLike, onStar, onLock } = useNodeActions(node);
-
-  return (
-    <NodePanelInner
-      node={node}
-      onEdit={onEdit}
-      onLike={onLike}
-      onStar={onStar}
-      onLock={onLock}
-      canEdit={can_edit}
-      canLike={can_like}
-      canStar={can_star}
-      isLoading={!!isLoading}
-    />
-  );
-}, shallowEqual);
-
-export { NodePanel };

src/components/node/NodePanelInner/index.tsx

@@ -1,7 +1,6 @@
-import React, { FC, memo } from 'react';
+import React, { VFC, memo } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
-import { INode } from '~/redux/types';
 import classNames from 'classnames';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { getPrettyDate } from '~/utils/dom';
@@ -9,8 +8,15 @@ import { URLS } from '~/constants/urls';
 import { Link } from 'react-router-dom';
 
 interface IProps {
-  node: Partial<INode>;
-  stack?: boolean;
+  id?: number;
+  title: string;
+  username?: string;
+  createdAt: string;
+  likeCount: number;
+
+  isHeroic: boolean;
+  isLocked: boolean;
+  isLiked: boolean;
 
   canEdit: boolean;
   canLike: boolean;
@@ -24,10 +30,17 @@ interface IProps {
   onLock: () => void;
 }
 
-const NodePanelInner: FC<IProps> = memo(
+const NodePanelInner: VFC<IProps> = memo(
   ({
-    node: { id, title, user, is_liked, is_heroic, deleted_at, created_at, like_count },
-    stack,
+    id,
+    title,
+    username,
+    createdAt,
+    likeCount,
+
+    isHeroic,
+    isLocked,
+    isLiked,
 
     canStar,
     canEdit,
@@ -41,19 +54,19 @@ const NodePanelInner: FC<IProps> = memo(
     onLock,
   }) => {
     return (
-      <div className={classNames(styles.wrap, { stack })}>
+      <div className={classNames(styles.wrap)}>
         <div className={styles.content}>
           <div className={styles.panel}>
             <div className={styles.title}>
               {isLoading ? <Placeholder width="40%" /> : title || '...'}
             </div>
 
-            {user && user.username && (
+            {!!username && (
               <div className={styles.name}>
                 {isLoading ? (
                   <Placeholder width="100px" />
                 ) : (
-                  `~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}`
+                  `~${username.toLocaleLowerCase()}, ${getPrettyDate(createdAt)}`
                 )}
               </div>
             )}
@@ -67,8 +80,8 @@ const NodePanelInner: FC<IProps> = memo(
 
               <div className={styles.editor_buttons}>
                 {canStar && (
-                  <div className={classNames(styles.star, { is_heroic })}>
-                    {is_heroic ? (
+                  <div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
+                    {isHeroic ? (
                       <Icon icon="star_full" size={24} onClick={onStar} />
                     ) : (
                       <Icon icon="star" size={24} onClick={onStar} />
@@ -77,27 +90,29 @@ const NodePanelInner: FC<IProps> = memo(
                 )}
 
                 <div>
-                  <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+                  <Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
                 </div>
 
-                <Link to={URLS.NODE_EDIT_URL(id)}>
-                  <Icon icon="edit" size={24} onClick={onEdit} />
-                </Link>
+                {!!id && (
+                  <Link to={URLS.NODE_EDIT_URL(id)}>
+                    <Icon icon="edit" size={24} onClick={onEdit} />
+                  </Link>
+                )}
               </div>
             </div>
           )}
 
           <div className={styles.buttons}>
             {canLike && (
-              <div className={classNames(styles.like, { is_liked })}>
-                {is_liked ? (
+              <div className={classNames(styles.like, { [styles.is_liked]: isLiked })}>
+                {isLiked ? (
                   <Icon icon="heart_full" size={24} onClick={onLike} />
                 ) : (
                   <Icon icon="heart" size={24} onClick={onLike} />
                 )}
 
-                {!!like_count && like_count > 0 && (
-                  <div className={styles.like_count}>{like_count}</div>
+                {!!likeCount && likeCount > 0 && (
+                  <div className={styles.like_count}>{likeCount}</div>
                 )}
               </div>
             )}

src/components/node/NodePanelInner/styles.module.scss

@@ -38,17 +38,6 @@
   justify-content: center;
   box-sizing: border-box;
   min-width: 0;
-
-  &:global(.stack) {
-    padding: 0 $gap;
-    bottom: 0;
-    position: fixed;
-    z-index: 5;
-
-    @include tablet {
-      padding: 0;
-    }
-  }
 }
 
 .content {
@@ -209,7 +198,7 @@
   position: relative;
   flex: 0 0 32px;
 
-  &:global(.is_liked) {
+  .is_liked {
     svg {
       fill: $red;
     }
@@ -249,7 +238,7 @@
   transition: fill, stroke 0.25s;
   will-change: transform;
 
-  &:global(.is_heroic) {
+  .is_heroic {
     svg {
       fill: $orange;
     }