getting node results for search

src/components/flow/FlowRecent/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState, useCallback, FormEvent } from 'react';
+import React, { FC } from 'react';
 import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { getURL, getPrettyDate } from '~/utils/dom';
@@ -6,7 +6,6 @@ import { Link } from 'react-router-dom';
 import { URLS, PRESETS } from '~/constants/urls';
 import classNames from 'classnames';
 import { NodeRelatedItem } from '~/components/node/NodeRelatedItem';
-import { InputText } from '~/components/input/InputText';
 
 interface IProps {
   recent: IFlowState['recent'];
@@ -14,55 +13,39 @@ interface IProps {
 }
 
 const FlowRecent: FC<IProps> = ({ recent, updated }) => {
-  const [search, setSearch] = useState('');
-
-  const onSearchSubmit = useCallback((event: FormEvent) => {
-    event.preventDefault();
-  }, []);
-
   return (
-    <div>
-      <form className={styles.search} onSubmit={onSearchSubmit}>
-        <InputText title="Поиск" value={search} handler={setSearch} />
-      </form>
+    <>
+      {updated &&
+        updated.slice(0, 20).map(node => (
+          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+            <div
+              className={classNames(styles.thumb, styles.new)}
+              style={{
+                backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
+              }}
+            />
 
-      <div className={styles.grid}>
-        <div className={styles.grid_label}>
-          <span>Что нового?</span>
-        </div>
+            <div className={styles.info}>
+              <div className={styles.title}>{node.title}</div>
+              <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+            </div>
+          </Link>
+        ))}
 
-        {updated &&
-          updated.slice(0, 20).map(node => (
-            <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-              <div
-                className={classNames(styles.thumb, styles.new)}
-                style={{
-                  backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
-                }}
-              />
+      {recent &&
+        recent.slice(0, 20).map(node => (
+          <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+            <div className={styles.thumb}>
+              <NodeRelatedItem item={node} />
+            </div>
 
-              <div className={styles.info}>
-                <div className={styles.title}>{node.title}</div>
-                <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-              </div>
-            </Link>
-          ))}
-
-        {recent &&
-          recent.slice(0, 20).map(node => (
-            <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
-              <div className={styles.thumb}>
-                <NodeRelatedItem item={node} />
-              </div>
-
-              <div className={styles.info}>
-                <div className={styles.title}>{node.title}</div>
-                <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
-              </div>
-            </Link>
-          ))}
-      </div>
-    </div>
+            <div className={styles.info}>
+              <div className={styles.title}>{node.title}</div>
+              <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+            </div>
+          </Link>
+        ))}
+    </>
   );
 };
 

src/components/flow/FlowRecent/styles.scss

@@ -1,29 +1,3 @@
-.grid {
-  display: flex;
-  justify-content: stretch;
-  flex-direction: column;
-  flex: 1;
-  background: $content_bg;
-  padding: $gap;
-  border-radius: 0 0 $radius $radius;
-
-  @include outer_shadow();
-}
-
-.grid_label {
-  margin-bottom: $gap;
-  @include title_with_line();
-  color: transparentize(white, $amount: 0.8);
-}
-
-.search {
-  background: lighten($content_bg, 4%);
-  border-radius: $radius $radius 0 0;
-  padding: $gap;
-
-  @include outer_shadow();
-}
-
 .item {
   display: flex;
   align-items: center;

src/components/flow/FlowSearchResults/index.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import styles from './styles.scss';
+import { IFlowState } from '~/redux/flow/reducer';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+
+interface IProps {
+  search: IFlowState['search'];
+}
+
+const FlowSearchResults: FC<IProps> = ({ search }) => {
+  if (search.is_loading) {
+    return (
+      <div className={styles.loading}>
+        <LoaderCircle size={64} />
+      </div>
+    );
+  }
+  return <div className={styles.wrap}>SEARCH</div>;
+};
+
+export { FlowSearchResults };

src/components/flow/FlowSearchResults/styles.scss

@@ -0,0 +1,12 @@
+.wrap {
+  flex: 1;
+  background: red;
+}
+
+.loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  opacity: 0.3;
+}

src/components/flow/FlowStamp/index.tsx

@@ -0,0 +1,60 @@
+import React, { FC, useCallback, FormEvent } from 'react';
+import { IFlowState } from '~/redux/flow/reducer';
+import { InputText } from '~/components/input/InputText';
+import { FlowRecent } from '../FlowRecent';
+import classnames from 'classnames';
+
+import * as styles from './styles.scss';
+import * as FLOW_ACTIONS from '~/redux/flow/actions';
+import { FlowSearchResults } from '../FlowSearchResults';
+
+interface IProps {
+  recent: IFlowState['recent'];
+  updated: IFlowState['updated'];
+  search: IFlowState['search'];
+  flowChangeSearch: typeof FLOW_ACTIONS.flowChangeSearch;
+}
+
+const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch }) => {
+  const onSearchChange = useCallback((text: string) => flowChangeSearch({ text }), [
+    flowChangeSearch,
+  ]);
+
+  const onSearchSubmit = useCallback((event: FormEvent) => {
+    event.preventDefault();
+  }, []);
+
+  return (
+    <div className={styles.wrap}>
+      <form className={styles.search} onSubmit={onSearchSubmit}>
+        <InputText title="Поиск" value={search.text} handler={onSearchChange} />
+      </form>
+
+      <div className={styles.grid}>
+        {search.text ? (
+          <>
+            <div className={styles.label}>
+              <span className={styles.label_text}>Результаты поиска</span>
+            </div>
+
+            <div className={styles.items}>
+              <FlowSearchResults search={search} />
+            </div>
+          </>
+        ) : (
+          <>
+            <div className={styles.label}>
+              <span className={styles.label_text}>Что нового?</span>
+            </div>
+
+            <div className={styles.items}>
+              <FlowRecent updated={updated} recent={recent} />
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { FlowStamp };

src/components/flow/FlowStamp/styles.scss

@@ -0,0 +1,55 @@
+.wrap {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: $content_bg;
+  border-radius: $radius;
+}
+
+.grid {
+  display: flex;
+  justify-content: stretch;
+  flex-direction: column;
+  flex: 1;
+  border-radius: $radius;
+
+  @include outer_shadow();
+}
+
+.items {
+  padding: 0 $gap 0 $gap;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  min-width: 0;
+  padding: $gap;
+  border-radius: $radius;
+
+  @include title_with_line();
+
+  color: transparentize(white, $amount: 0.8);
+
+  &_search {
+    color: white;
+    padding-left: $gap * 1.2;
+  }
+}
+
+.label_text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.search {
+  background: lighten($content_bg, 4%);
+  border-radius: $radius $radius 0 0;
+  padding: $gap;
+
+  @include outer_shadow();
+}

src/components/node/NodeRelated/styles.scss

@@ -23,7 +23,7 @@
 }
 
 .text {
-  margin: 0 $gap;
+  margin-left: $gap / 2;
 }
 
 .placeholder {