BOX-138 - card list (#38)

* feat(pages/search): adds search page, adds ability to search

adds search ability with trigger on field change, with debounce

ISSUES CLOSED: #61

* fix(pages/search): fixes empty query

adds search ability with trigger on field change, with debounce
ISSUES CLOSED: #61

* fix(pages/search): plural function

adds search ability with trigger on field change, with debounce
ISSUES CLOSED: #61

* fix(pages): suggestions from review

babel plugin
export

ISSUES CLOSED: #61

* fix(app): use-query package

added package from suggestions in review

ISSUES CLOSED: #61

* feat(pages): search page

changing view for search page
changes view of users list
changes view of card list

ISSUES CLOSED: #65

* feat(ui/templates): header - changes color of button

changed base button to match design

ISSUES CLOSED: #65

* fix(app): review suggestions

history, reflect (has bugs)

ISSUES CLOSED: #65

* fix(app): fix reflext and package

#65

* fix(app): fixed ssr for reflect in one place

BREAKING CHANGE:
missed reflect

ISSUES CLOSED: #65

* fix(app): regenerate yarn lock

* fix(app): fixes letter dublicates in user search

ISSUES CLOSED: #137

* fix(features): card preview - make clickable

ISSUES CLOSED: #138

* fix(features): card preview - make clickable

ISSUES CLOSED: #141

* fix(app): regenerate lock

* fix(app): remove package lock

* fix(features): card list

ellips for title, fix text selection

ISSUES CLOSED: #140

* feat(api): adds simulation from api - adds reaction to search params

ellips for title, fix text selection
ISSUES CLOSED: #140

ISSUES CLOSED: #91

* fix(app): changes from review

ellips for title, fix text selection
ISSUES CLOSED: #140
ISSUES CLOSED: #91

* fix(app): review changes

* fix(app): review changes

* fix(app): review

* fix(app): fixed autocomplete from tsconfig|styles (glogal props)

* style: move focus funcs to hook

* fix(app): review

* fix(app): fixes card click on button

* fix(app): adds todo

package.json

@@ -75,7 +75,7 @@
     "cross-env": "^7.0.2",
     "cz-conventional-changelog": "3.0.2",
     "cz-customizable": "^6.2.1",
-    "eslint": "^6.0.0",
+    "eslint": "6.8.0",
     "eslint-import-resolver-typescript": "^2.0.0",
     "eslint-plugin-import": "^2.22.0",
     "glob": "^7.1.6",

src/api/internal/index.ts

@@ -2,8 +2,9 @@ import type { Card, User } from '../types';
 // NOTE: По сути будет использоваться только на клиенте, поэтому импорчу напрямую
 import { requestClient } from '../request/client';
 
-// FIXME: Удалю модуль позднее, после генерации через OpenApi
-// Но для этого надо поправить саму схему
+// FIXME:
+//  Удалю модуль позднее, после генерации через OpenApi
+//  Но для этого надо поправить саму схему
 
 // TODO: bind with /api/request
 // TODO: autogen later by openapi-generator

src/api/mock/fixtures.ts

@@ -152,7 +152,7 @@ export const cards: Card[] = [
   },
   {
     id: '2',
-    title: `Effector: sample vs forward`,
+    title: `Effector: sample vs forward, Effector: sample vs forward`,
     content: `Sample: This method can be used for linking two nodes, resulting the third one, which will fire only upon clock node trigger.\nForward: Method to create connection between units in a declarative way. Sends updates from one set of units to another`,
     author: viewer,
     createdAt: '2021-01-04T05:03:00.000Z',
@@ -161,13 +161,13 @@ export const cards: Card[] = [
   },
   {
     id: '3',
-    title: `Effects sequence`,
+    title: `Effects sequence, Effects sequence, Effects sequence`,
     content: `We'll need it when second request to the server requires resolved data from the first one
     \`\`\`
     import ReactDOM from 'react-dom'
 
     const getAllId = createEffect({handler: async () => [1, 2, 3]})
-    
+
     const getPostsByIds = createEffect({
       handler: ids => Promise.all(ids.map(
         async id => {
@@ -179,12 +179,12 @@ export const cards: Card[] = [
         }
       ))
     })
-    
+
     forward({
       from: getAllId.done.map(({result}) => result),
       to: getPostsByIds,
     })
-    
+
     const postGroups = createStore([])
       .on(getPostsByIds.done, (list, {result}) => [
         ...list,
@@ -212,7 +212,7 @@ export const cards: Card[] = [
   },
   {
     id: '5',
-    title: `Effector live comparsion`,
+    title: `Stop using Effector`,
     content: `Effector is a brand new reactive state manager. Its ambitious team aims to solve all the problems that existing solutions have. Writing the core of the library from scratch took several attempts across six months, and recently the team released the first stable release.
 
     In this article, I will show why I prefer using Effector for my new projects instead of other state managers. Let's get started with the Effector API.`,

src/api/mock/index.ts

@@ -1,8 +1,19 @@
 import { Model, belongsTo, createServer, hasMany } from 'miragejs';
 
-import type { User } from '../types';
+import type { Card, User } from '../types';
 import { cards, users, viewer } from './fixtures';
 
+/** little shortcut for search */
+function hasIncluding({
+  including,
+  query,
+}: {
+  including?: string;
+  query: string;
+}) {
+  if (!including) return false;
+  return including.toLowerCase().includes(query);
+}
 /**
  * Mock-api server for internal development
  * @see https://cardbox.github.io/backend/api-internal/index.html
@@ -39,11 +50,26 @@ export function runMockServer() {
     routes() {
       this.namespace = 'api';
 
-      this.post('/search.results', (schema) => {
-        // TODO: add search-query param processing
+      this.post('/search.results', (schema, req) => {
+        const { query } = JSON.parse(req.requestBody);
+        const users = schema.db.users.where((user: User) => {
+          return (
+            hasIncluding({ including: user.username, query }) ||
+            hasIncluding({ including: user.firstName, query }) ||
+            hasIncluding({ including: user.lastName, query })
+          );
+        });
+
+        const cards = schema.db.cards.where((card: Card) => {
+          return (
+            hasIncluding({ including: card.title, query }) ||
+            hasIncluding({ including: card.content, query })
+          );
+        });
+
         return {
-          users: schema.db.users,
-          cards: schema.db.cards,
+          users,
+          cards,
         };
       });
 
@@ -106,6 +132,5 @@ export function runMockServer() {
       });
     },
   });
-
   return instance;
 }

src/app/application.tsx

@@ -1,4 +1,4 @@
-// import 'react-tabs/style/react-tabs.css';
+import './custom-props.css';
 
 import * as React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
@@ -26,17 +26,9 @@ const Globals = createGlobalStyle`
     padding: 0;
     font-family: sans-serif;
   }
-
-  :root {
-    --wizard500: #4231FF;
-    --wizard300: #B6AFFF;
-    --wizard100: #F7F6FF;
-
-    --gray100: #FBFAFB;
-  }
 `;
 
-export const Application: React.FC<Props> = ({ root }) => (
+export const Application = ({ root }: Props) => (
   <QueryParamProvider ReactRouterRoute={Route}>
     <Provider value={root}>
       <Container>

src/app/custom-props.css

@@ -0,0 +1,14 @@
+:root {
+  --wizard500: #4231ff;
+  --wizard300: #b6Afff;
+  --wizard100: #f7f6ff;
+
+  --gray100: #fbfafb;
+
+  /* backgrounds */
+  --bnw100: #fbfafb;
+  --bnw200: #eeeef1;
+  --bnw0: #fff;
+
+  --box-shadow-1: 0px 3px 9px #ebebeb;
+}

src/entities/card/organisms/card-list.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import type { Card } from '@box/api';
 import { SkeletonGroup } from '@box/ui';
+import { useKeyboardFocus } from '@box/lib/use-keyboard-focus';
 
 import { CardPreview } from './card-preview';
 
@@ -11,19 +12,22 @@ interface Props {
   loading?: boolean;
 }
 
-export const CardList: React.FC<Props> = ({ cards, getHref, loading }) => {
+export const CardList = ({ cards, getHref, loading }: Props) => {
+  const { focusItemChanged, containerRef } = useKeyboardFocus();
+
   if (loading) {
     return <SkeletonGroup amount={4} />;
   }
 
   return (
-    <Container>
+    <Container ref={containerRef}>
       {cards.map((card, i) => (
         <CardPreview
           key={card.id}
           card={card}
           isCardInFavorite={i % 2 === 0}
           href={getHref?.(card)}
+          focusItemChanged={focusItemChanged}
         />
       ))}
     </Container>