BOX-138 - card list

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 { useFocus } from '@box/lib/use-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 } = useFocus();
+
   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>