getting node results for search

src/redux/flow/actions.ts

@@ -1,43 +1,48 @@
-import { FLOW_ACTIONS } from "./constants";
-import { IFlowState } from "./reducer";
-import { INode } from "../types";
+import { FLOW_ACTIONS } from './constants';
+import { IFlowState } from './reducer';
+import { INode } from '../types';
 
-export const flowSetNodes = (nodes: IFlowState["nodes"]) => ({
+export const flowSetNodes = (nodes: IFlowState['nodes']) => ({
   nodes,
-  type: FLOW_ACTIONS.SET_NODES
+  type: FLOW_ACTIONS.SET_NODES,
 });
 
-export const flowSetHeroes = (heroes: IFlowState["heroes"]) => ({
+export const flowSetHeroes = (heroes: IFlowState['heroes']) => ({
   heroes,
-  type: FLOW_ACTIONS.SET_HEROES
+  type: FLOW_ACTIONS.SET_HEROES,
 });
 
-export const flowSetRecent = (recent: IFlowState["recent"]) => ({
+export const flowSetRecent = (recent: IFlowState['recent']) => ({
   recent,
-  type: FLOW_ACTIONS.SET_RECENT
+  type: FLOW_ACTIONS.SET_RECENT,
 });
 
-export const flowSetUpdated = (updated: IFlowState["updated"]) => ({
+export const flowSetUpdated = (updated: IFlowState['updated']) => ({
   updated,
-  type: FLOW_ACTIONS.SET_UPDATED
+  type: FLOW_ACTIONS.SET_UPDATED,
 });
 
-export const flowSetCellView = (id: INode["id"], flow: INode["flow"]) => ({
+export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({
   type: FLOW_ACTIONS.SET_CELL_VIEW,
   id,
-  flow
-});
-
-export const flowSetRange = (range: IFlowState["range"]) => ({
-  range,
-  type: FLOW_ACTIONS.SET_RANGE
+  flow,
 });
 
 export const flowGetMore = () => ({
-  type: FLOW_ACTIONS.GET_MORE
+  type: FLOW_ACTIONS.GET_MORE,
 });
 
 export const flowSetFlow = (data: Partial<IFlowState>) => ({
   type: FLOW_ACTIONS.SET_FLOW,
-  data
+  data,
+});
+
+export const flowSetSearch = (search: Partial<IFlowState['search']>) => ({
+  type: FLOW_ACTIONS.SET_SEARCH,
+  search,
+});
+
+export const flowChangeSearch = (search: Partial<IFlowState['search']>) => ({
+  type: FLOW_ACTIONS.CHANGE_SEARCH,
+  search,
 });

src/redux/flow/api.ts

@@ -1,16 +1,11 @@
-import {
-  api,
-  configWithToken,
-  resultMiddleware,
-  errorMiddleware
-} from "~/utils/api";
-import { INode, IResultWithStatus } from "../types";
-import { API } from "~/constants/api";
-import { flowSetCellView } from "~/redux/flow/actions";
+import { api, configWithToken, resultMiddleware, errorMiddleware } from '~/utils/api';
+import { INode, IResultWithStatus } from '../types';
+import { API } from '~/constants/api';
+import { flowSetCellView } from '~/redux/flow/actions';
 
 export const postNode = ({
   access,
-  node
+  node,
 }: {
   access: string;
   node: INode;
@@ -20,24 +15,26 @@ export const postNode = ({
     .then(resultMiddleware)
     .catch(errorMiddleware);
 
-// export const getNodes = ({
-//   from = null
-// }: {
-//   from: string;
-// }): Promise<IResultWithStatus<{ nodes: INode[] }>> =>
-//   api
-//     .get(API.NODE.GET, { params: { from } })
-//     .then(resultMiddleware)
-//     .catch(errorMiddleware);
-
 export const postCellView = ({
   id,
   flow,
-  access
-}: ReturnType<typeof flowSetCellView> & { access: string }): Promise<
-  IResultWithStatus<{ is_liked: INode["is_liked"] }>
-> =>
+  access,
+}: ReturnType<typeof flowSetCellView> & { access: string }): Promise<IResultWithStatus<{
+  is_liked: INode['is_liked'];
+}>> =>
   api
     .post(API.NODE.SET_CELL_VIEW(id), { flow }, configWithToken(access))
     .then(resultMiddleware)
     .catch(errorMiddleware);
+
+export const getSearchResults = ({
+  access,
+  text,
+}: {
+  access: string;
+  text: string;
+}): Promise<IResultWithStatus<{ nodes: INode[]; total: number }>> =>
+  api
+    .get(API.SEARCH, configWithToken(access, { params: { text } }))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/flow/constants.ts

@@ -1,4 +1,4 @@
-const prefix = "FLOW.";
+const prefix = 'FLOW.';
 
 export const FLOW_ACTIONS = {
   GET_FLOW: `${prefix}GET_FLOW`,
@@ -9,5 +9,8 @@ export const FLOW_ACTIONS = {
   SET_UPDATED: `${prefix}SET_UPDATED`,
   SET_RANGE: `${prefix}SET_RANGE`,
   SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`,
-  GET_MORE: `${prefix}GET_MORE`
+  GET_MORE: `${prefix}GET_MORE`,
+
+  SET_SEARCH: `${prefix}SET_SEARCH`,
+  CHANGE_SEARCH: `${prefix}CHANGE_SEARCH`,
 };

src/redux/flow/handlers.ts

@@ -1,46 +1,41 @@
-import assocPath from "ramda/es/assocPath";
-import { FLOW_ACTIONS } from "./constants";
+import assocPath from 'ramda/es/assocPath';
+import { FLOW_ACTIONS } from './constants';
 import {
   flowSetNodes,
   flowSetHeroes,
   flowSetRecent,
   flowSetUpdated,
-  flowSetRange,
-  flowSetFlow
-} from "./actions";
-import { IFlowState } from "./reducer";
+  flowSetFlow,
+  flowSetSearch,
+} from './actions';
+import { IFlowState } from './reducer';
 
-const setNodes = (
-  state: IFlowState,
-  { nodes }: ReturnType<typeof flowSetNodes>
-) => assocPath(["nodes"], nodes, state);
+const setNodes = (state: IFlowState, { nodes }: ReturnType<typeof flowSetNodes>) =>
+  assocPath(['nodes'], nodes, state);
 
-const setHeroes = (
-  state: IFlowState,
-  { heroes }: ReturnType<typeof flowSetHeroes>
-) => assocPath(["heroes"], heroes, state);
+const setHeroes = (state: IFlowState, { heroes }: ReturnType<typeof flowSetHeroes>) =>
+  assocPath(['heroes'], heroes, state);
 
-const setRecent = (
-  state: IFlowState,
-  { recent }: ReturnType<typeof flowSetRecent>
-) => assocPath(["recent"], recent, state);
+const setRecent = (state: IFlowState, { recent }: ReturnType<typeof flowSetRecent>) =>
+  assocPath(['recent'], recent, state);
 
-const setUpdated = (
-  state: IFlowState,
-  { updated }: ReturnType<typeof flowSetUpdated>
-) => assocPath(["updated"], updated, state);
+const setUpdated = (state: IFlowState, { updated }: ReturnType<typeof flowSetUpdated>) =>
+  assocPath(['updated'], updated, state);
 
-const setRange = (
-  state: IFlowState,
-  { range }: ReturnType<typeof flowSetRange>
-) => assocPath(["range"], range, state);
+const setFlow = (state: IFlowState, { data }: ReturnType<typeof flowSetFlow>): IFlowState => ({
+  ...state,
+  ...data,
+});
 
-const setFlow = (
+const setSearch = (
   state: IFlowState,
-  { data }: ReturnType<typeof flowSetFlow>
+  { search }: ReturnType<typeof flowSetSearch>
 ): IFlowState => ({
   ...state,
-  ...data
+  search: {
+    ...state.search,
+    ...search,
+  },
 });
 
 export const FLOW_HANDLERS = {
@@ -48,6 +43,6 @@ export const FLOW_HANDLERS = {
   [FLOW_ACTIONS.SET_HEROES]: setHeroes,
   [FLOW_ACTIONS.SET_RECENT]: setRecent,
   [FLOW_ACTIONS.SET_UPDATED]: setUpdated,
-  [FLOW_ACTIONS.SET_RANGE]: setRange,
-  [FLOW_ACTIONS.SET_FLOW]: setFlow
+  [FLOW_ACTIONS.SET_FLOW]: setFlow,
+  [FLOW_ACTIONS.SET_SEARCH]: setSearch,
 };

src/redux/flow/reducer.ts

@@ -1,6 +1,6 @@
-import { createReducer } from "~/utils/reducer";
-import { INode, IError } from "../types";
-import { FLOW_HANDLERS } from "./handlers";
+import { createReducer } from '~/utils/reducer';
+import { INode, IError } from '../types';
+import { FLOW_HANDLERS } from './handlers';
 
 export type IFlowState = Readonly<{
   is_loading: boolean;
@@ -8,7 +8,11 @@ export type IFlowState = Readonly<{
   heroes: Partial<INode>[];
   recent: Partial<INode>[];
   updated: Partial<INode>[];
-  range: [string, string];
+  search: {
+    text: string;
+    is_loading: boolean;
+    results: INode[];
+  };
   error: IError;
 }>;
 
@@ -17,9 +21,13 @@ const INITIAL_STATE: IFlowState = {
   heroes: [],
   recent: [],
   updated: [],
-  range: [null, null], // drop it, we use realtime range calc
+  search: {
+    text: '',
+    is_loading: false,
+    results: [],
+  },
   is_loading: false,
-  error: null
+  error: null,
 };
 
 export default createReducer(INITIAL_STATE, FLOW_HANDLERS);

src/redux/flow/sagas.ts

@@ -9,11 +9,13 @@ import {
   flowSetRecent,
   flowSetUpdated,
   flowSetFlow,
+  flowChangeSearch,
+  flowSetSearch,
 } from './actions';
-import { IResultWithStatus, INode } from '../types';
+import { IResultWithStatus, INode, Unwrap } from '../types';
 import { selectFlowNodes } from './selectors';
 import { reqWrapper } from '../auth/sagas';
-import { postCellView } from './api';
+import { postCellView, getSearchResults } from './api';
 import { IFlowState } from './reducer';
 import uniq from 'ramda/es/uniq';
 
@@ -110,8 +112,28 @@ function* getMore() {
   yield delay(1000);
 }
 
+function* changeSearch({ search }: ReturnType<typeof flowChangeSearch>) {
+  yield put(
+    flowSetSearch({
+      ...search,
+      is_loading: !!search.text,
+    })
+  );
+
+  if (!search.text) return;
+
+  yield delay(500);
+
+  const res: Unwrap<typeof getSearchResults> = yield call(reqWrapper, getSearchResults, {
+    ...search,
+  });
+
+  console.log(res);
+}
+
 export default function* nodeSaga() {
   yield takeLatest([FLOW_ACTIONS.GET_FLOW, REHYDRATE], onGetFlow);
   yield takeLatest(FLOW_ACTIONS.SET_CELL_VIEW, onSetCellView);
   yield takeLeading(FLOW_ACTIONS.GET_MORE, getMore);
+  yield takeLatest(FLOW_ACTIONS.CHANGE_SEARCH, changeSearch);
 }