From c989d50277c4f614e0d2aba2a5ed5c5e5363ba1d Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 16 Mar 2020 17:44:01 +0700
Subject: [PATCH] sort category tags before others

---
 src/components/node/NodePanelInner/index.tsx | 124 ++++++++++---------
 src/components/node/Tags/index.tsx           |  65 +++++-----
 2 files changed, 96 insertions(+), 93 deletions(-)

diff --git a/src/components/node/NodePanelInner/index.tsx b/src/components/node/NodePanelInner/index.tsx
index a4623c71..98d24999 100644
--- a/src/components/node/NodePanelInner/index.tsx
+++ b/src/components/node/NodePanelInner/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import * as styles from './styles.scss';
 import { Group } from '~/components/containers/Group';
 import { Filler } from '~/components/containers/Filler';
@@ -24,77 +24,79 @@ interface IProps {
   onLock: () => void;
 }
 
-const NodePanelInner: FC<IProps> = ({
-  node: { title, user, is_liked, is_heroic, deleted_at, created_at },
-  stack,
+const NodePanelInner: FC<IProps> = memo(
+  ({
+    node: { title, user, is_liked, is_heroic, deleted_at, created_at },
+    stack,
 
-  can_star,
-  can_edit,
-  can_like,
+    can_star,
+    can_edit,
+    can_like,
 
-  is_loading,
+    is_loading,
 
-  onStar,
-  onEdit,
-  onLike,
-  onLock,
-}) => {
-  return (
-    <div className={classNames(styles.wrap, { stack })}>
-      <div className={styles.content}>
-        <Group horizontal className={styles.panel}>
-          <Filler>
-            <div className={styles.title}>
-              {is_loading ? <Placeholder width="40%" /> : title || '...'}
-            </div>
-            {user && user.username && (
-              <div className={styles.name}>
-                {is_loading ? (
-                  <Placeholder width="100px" />
+    onStar,
+    onEdit,
+    onLike,
+    onLock,
+  }) => {
+    return (
+      <div className={classNames(styles.wrap, { stack })}>
+        <div className={styles.content}>
+          <Group horizontal className={styles.panel}>
+            <Filler>
+              <div className={styles.title}>
+                {is_loading ? <Placeholder width="40%" /> : title || '...'}
+              </div>
+              {user && user.username && (
+                <div className={styles.name}>
+                  {is_loading ? (
+                    <Placeholder width="100px" />
+                  ) : (
+                    `~${user.username}, ${getPrettyDate(created_at)}`
+                  )}
+                </div>
+              )}
+            </Filler>
+          </Group>
+
+          <div className={styles.buttons}>
+            {can_star && (
+              <div className={classNames(styles.star, { is_heroic })}>
+                {is_heroic ? (
+                  <Icon icon="star_full" size={24} onClick={onStar} />
                 ) : (
-                  `~${user.username}, ${getPrettyDate(created_at)}`
+                  <Icon icon="star" size={24} onClick={onStar} />
                 )}
               </div>
             )}
-          </Filler>
-        </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={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+                </div>
 
-          {can_edit && (
-            <>
-              <div>
-                <Icon icon={deleted_at ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
+                <div>
+                  <Icon icon="edit" size={24} onClick={onEdit} />
+                </div>
+              </>
+            )}
+
+            {can_like && (
+              <div className={classNames(styles.like, { is_liked })}>
+                {is_liked ? (
+                  <Icon icon="heart_full" size={24} onClick={onLike} />
+                ) : (
+                  <Icon icon="heart" size={24} onClick={onLike} />
+                )}
               </div>
-
-              <div>
-                <Icon icon="edit" size={24} onClick={onEdit} />
-              </div>
-            </>
-          )}
-
-          {can_like && (
-            <div className={classNames(styles.like, { is_liked })}>
-              {is_liked ? (
-                <Icon icon="heart_full" size={24} onClick={onLike} />
-              ) : (
-                <Icon icon="heart" size={24} onClick={onLike} />
-              )}
-            </div>
-          )}
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  );
-};
+    );
+  }
+);
 
 export { NodePanelInner };
diff --git a/src/components/node/Tags/index.tsx b/src/components/node/Tags/index.tsx
index 8af67240..ced5bd78 100644
--- a/src/components/node/Tags/index.tsx
+++ b/src/components/node/Tags/index.tsx
@@ -6,12 +6,13 @@ import React, {
   useEffect,
   KeyboardEvent,
   ChangeEvent,
-  useRef
-} from "react";
-import { TagField } from "~/components/containers/TagField";
-import { ITag } from "~/redux/types";
-import { Tag } from "~/components/node/Tag";
-import uniq from "ramda/es/uniq";
+  useRef,
+  useMemo,
+} from 'react';
+import { TagField } from '~/components/containers/TagField';
+import { ITag } from '~/redux/types';
+import { Tag } from '~/components/node/Tag';
+import uniq from 'ramda/es/uniq';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   tags: Partial<ITag>[];
@@ -19,16 +20,21 @@ type IProps = HTMLAttributes<HTMLDivElement> & {
   onTagsChange?: (tags: string[]) => void;
 };
 
-export const Tags: FC<IProps> = ({
-  tags,
-  is_editable,
-  onTagsChange,
-  ...props
-}) => {
-  const [input, setInput] = useState("");
+export const Tags: FC<IProps> = ({ tags, is_editable, onTagsChange, ...props }) => {
+  const [input, setInput] = useState('');
   const [data, setData] = useState([]);
   const timer = useRef(null);
 
+  const [catTags, ordinaryTags] = useMemo(
+    () =>
+      tags.reduce(
+        (obj, tag) =>
+          tag.title.substr(0, 1) === '/' ? [[...obj[0], tag], obj[1]] : [obj[0], [...obj[1], tag]],
+        [[], []]
+      ),
+    []
+  );
+
   const onInput = useCallback(
     ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
       clearTimeout(timer.current);
@@ -39,17 +45,17 @@ export const Tags: FC<IProps> = ({
 
   const onKeyUp = useCallback(
     ({ key }: KeyboardEvent) => {
-      if (key === "Backspace" && input === "" && data.length) {
+      if (key === 'Backspace' && input === '' && data.length) {
         setData(data.slice(0, data.length - 1));
         setInput(data[data.length - 1].title);
       }
 
-      if (key === "Enter" || key === "," || key === "Comma") {
+      if (key === 'Enter' || key === ',' || key === 'Comma') {
         setData(
           uniq([
             ...data,
             ...input
-              .split(",")
+              .split(',')
               .map((title: string) =>
                 title
                   .trim()
@@ -59,11 +65,11 @@ export const Tags: FC<IProps> = ({
               .filter(el => el.length > 0)
               .filter(el => !tags.some(tag => tag.title.trim() === el.trim()))
               .map(title => ({
-                title
-              }))
+                title,
+              })),
           ])
         );
-        setInput("");
+        setInput('');
       }
     },
     [input, setInput, data, setData]
@@ -75,21 +81,21 @@ export const Tags: FC<IProps> = ({
 
     if (!items.length) return;
     setData(items);
-    setInput("");
+    setInput('');
     onTagsChange(uniq([...tags, ...items]).map(tag => tag.title));
   }, [tags, data, onTagsChange, input, setInput]);
 
   useEffect(() => {
-    setData(
-      data.filter(
-        ({ title }) => !tags.some(tag => tag.title.trim() === title.trim())
-      )
-    );
+    setData(data.filter(({ title }) => !tags.some(tag => tag.title.trim() === title.trim())));
   }, [tags]);
 
   return (
     <TagField {...props}>
-      {tags.map(tag => (
+      {catTags.map(tag => (
+        <Tag key={tag.title} tag={tag} />
+      ))}
+
+      {ordinaryTags.map(tag => (
         <Tag key={tag.title} tag={tag} />
       ))}
 
@@ -98,12 +104,7 @@ export const Tags: FC<IProps> = ({
       ))}
 
       {is_editable && (
-        <Tag
-          tag={{ title: input }}
-          onInput={onInput}
-          onKeyUp={onKeyUp}
-          onBlur={onSubmit}
-        />
+        <Tag tag={{ title: input }} onInput={onInput} onKeyUp={onKeyUp} onBlur={onSubmit} />
       )}
     </TagField>
   );