search load more

src/components/flow/FlowSearchResults/index.tsx

@@ -1,13 +1,30 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback, MouseEvent } from 'react';
 import styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { URLS, PRESETS } from '~/constants/urls';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import { getURL, getPrettyDate } from '~/utils/dom';
 
 interface IProps {
   search: IFlowState['search'];
+  onLoadMore: () => void;
 }
 
-const FlowSearchResults: FC<IProps> = ({ search }) => {
+const FlowSearchResults: FC<IProps> = ({ search, onLoadMore }) => {
+  const onScroll = useCallback(
+    event => {
+      const el = event.target;
+      const bottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+
+      if (bottom > 100) return;
+
+      onLoadMore();
+    },
+    [onLoadMore]
+  );
+
   if (search.is_loading) {
     return (
       <div className={styles.loading}>
@@ -15,7 +32,26 @@ const FlowSearchResults: FC<IProps> = ({ search }) => {
       </div>
     );
   }
-  return <div className={styles.wrap}>SEARCH</div>;
+
+  return (
+    <div className={styles.wrap} onScroll={onScroll}>
+      {search.results.map(node => (
+        <Link key={node.id} className={styles.item} to={URLS.NODE_URL(node.id)}>
+          <div
+            className={classNames(styles.thumb)}
+            style={{
+              backgroundImage: `url("${getURL({ url: node.thumbnail }, PRESETS.avatar)}")`,
+            }}
+          />
+
+          <div className={styles.info}>
+            <div className={styles.title}>{node.title}</div>
+            <div className={styles.comment}>{getPrettyDate(node.created_at)}</div>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
 };
 
 export { FlowSearchResults };

src/components/flow/FlowSearchResults/styles.scss

@@ -1,6 +1,6 @@
 .wrap {
   flex: 1;
-  background: red;
+  overflow: auto;
 }
 
 .loading {
@@ -10,3 +10,61 @@
   flex: 1;
   opacity: 0.3;
 }
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: $font_12_regular;
+  border-radius: $radius;
+  flex-direction: row;
+  margin-bottom: $gap;
+  color: white;
+  text-decoration: none;
+}
+
+.thumb {
+  height: 48px;
+  margin-right: $gap;
+  background: 50% 50% no-repeat;
+  background-size: cover;
+  border-radius: $radius;
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &.new {
+    &::after {
+      content: ' ';
+      width: 12px;
+      height: 12px;
+      border-radius: 100%;
+      background: $red;
+      box-shadow: $content_bg 0 0 0 5px;
+      position: absolute;
+      right: -2px;
+      bottom: -2px;
+    }
+  }
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font: $font_16_semibold;
+  text-transform: capitalize;
+}
+
+.comment {
+  font: $font_12_regular;
+  margin-top: 4px;
+  opacity: 0.5;
+}

src/components/flow/FlowStamp/index.tsx

@@ -13,9 +13,10 @@ interface IProps {
   updated: IFlowState['updated'];
   search: IFlowState['search'];
   flowChangeSearch: typeof FLOW_ACTIONS.flowChangeSearch;
+  onLoadMore: () => void;
 }
 
-const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch }) => {
+const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch, onLoadMore }) => {
   const onSearchChange = useCallback((text: string) => flowChangeSearch({ text }), [
     flowChangeSearch,
   ]);
@@ -35,16 +36,19 @@ const FlowStamp: FC<IProps> = ({ recent, updated, search, flowChangeSearch }) =>
           <>
             <div className={styles.label}>
               <span className={styles.label_text}>Результаты поиска</span>
+              <span className="line" />
+              <span>{!search.is_loading && search.total}</span>
             </div>
 
             <div className={styles.items}>
-              <FlowSearchResults search={search} />
+              <FlowSearchResults search={search} onLoadMore={onLoadMore} />
             </div>
           </>
         ) : (
           <>
             <div className={styles.label}>
               <span className={styles.label_text}>Что нового?</span>
+              <span className="line" />
             </div>
 
             <div className={styles.items}>

src/components/flow/FlowStamp/styles.scss

@@ -12,6 +12,7 @@
   flex-direction: column;
   flex: 1;
   border-radius: $radius;
+  overflow: hidden;
 
   @include outer_shadow();
 }
@@ -21,6 +22,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 .label {
@@ -38,6 +40,10 @@
     color: white;
     padding-left: $gap * 1.2;
   }
+
+  & > :global(.line) {
+    margin-right: $gap;
+  }
 }
 
 .label_text {