mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
added recent to reducer
This commit is contained in:
parent
920a8adaa2
commit
746d10ce8b
8 changed files with 38 additions and 9 deletions
|
@ -8,6 +8,7 @@ import { canEditNode } from '~/utils/node';
|
||||||
import { IUser } from '~/redux/auth/types';
|
import { IUser } from '~/redux/auth/types';
|
||||||
import { flowSetCellView } from '~/redux/flow/actions';
|
import { flowSetCellView } from '~/redux/flow/actions';
|
||||||
import { FlowHero } from '../FlowHero';
|
import { FlowHero } from '../FlowHero';
|
||||||
|
import { FlowRecent } from '../FlowRecent';
|
||||||
|
|
||||||
type IProps = Partial<IFlowState> & {
|
type IProps = Partial<IFlowState> & {
|
||||||
user: Partial<IUser>;
|
user: Partial<IUser>;
|
||||||
|
@ -15,13 +16,15 @@ type IProps = Partial<IFlowState> & {
|
||||||
onChangeCellView: typeof flowSetCellView;
|
onChangeCellView: typeof flowSetCellView;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const FlowGrid: FC<IProps> = ({ user, nodes, heroes, onSelect, onChangeCellView }) => (
|
export const FlowGrid: FC<IProps> = ({ user, nodes, heroes, recent, onSelect, onChangeCellView }) => (
|
||||||
<div>
|
<div>
|
||||||
<div className={styles.grid_test}>
|
<div className={styles.grid_test}>
|
||||||
<div className={styles.hero}>
|
<div className={styles.hero}>
|
||||||
<FlowHero heroes={heroes} />
|
<FlowHero heroes={heroes} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.stamp}>STAMP</div>
|
<div className={styles.stamp}>
|
||||||
|
<FlowRecent />
|
||||||
|
</div>
|
||||||
|
|
||||||
{nodes.map(node => (
|
{nodes.map(node => (
|
||||||
<Cell
|
<Cell
|
||||||
|
|
8
src/components/flow/FlowRecent/index.tsx
Normal file
8
src/components/flow/FlowRecent/index.tsx
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
import React, { FC } from 'react';
|
||||||
|
import * as styles from './styles.scss';
|
||||||
|
|
||||||
|
interface IProps {}
|
||||||
|
|
||||||
|
const FlowRecent: FC<IProps> = ({}) => <div className={styles.grid} />;
|
||||||
|
|
||||||
|
export { FlowRecent };
|
3
src/components/flow/FlowRecent/styles.scss
Normal file
3
src/components/flow/FlowRecent/styles.scss
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
|
@ -12,6 +12,11 @@ export const flowSetHeroes = (heroes: IFlowState['heroes']) => ({
|
||||||
type: FLOW_ACTIONS.SET_HEROES,
|
type: FLOW_ACTIONS.SET_HEROES,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
export const flowSetRecent = (recent: IFlowState['recent']) => ({
|
||||||
|
recent,
|
||||||
|
type: FLOW_ACTIONS.SET_RECENT,
|
||||||
|
});
|
||||||
|
|
||||||
export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({
|
export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({
|
||||||
type: FLOW_ACTIONS.SET_CELL_VIEW,
|
type: FLOW_ACTIONS.SET_CELL_VIEW,
|
||||||
id,
|
id,
|
||||||
|
|
|
@ -4,5 +4,6 @@ export const FLOW_ACTIONS = {
|
||||||
GET_FLOW: `${prefix}GET_FLOW`,
|
GET_FLOW: `${prefix}GET_FLOW`,
|
||||||
SET_NODES: `${prefix}SET_NODES`,
|
SET_NODES: `${prefix}SET_NODES`,
|
||||||
SET_HEROES: `${prefix}SET_HEROES`,
|
SET_HEROES: `${prefix}SET_HEROES`,
|
||||||
|
SET_RECENT: `${prefix}SET_RECENT`,
|
||||||
SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`,
|
SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`,
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import assocPath from 'ramda/es/assocPath';
|
import assocPath from 'ramda/es/assocPath';
|
||||||
import { FLOW_ACTIONS } from './constants';
|
import { FLOW_ACTIONS } from './constants';
|
||||||
import { flowSetNodes, flowSetHeroes } from './actions';
|
import { flowSetNodes, flowSetHeroes, flowSetRecent } from './actions';
|
||||||
import { IFlowState } from './reducer';
|
import { IFlowState } from './reducer';
|
||||||
|
|
||||||
const setNodes = (state: IFlowState, { nodes }: ReturnType<typeof flowSetNodes>) =>
|
const setNodes = (state: IFlowState, { nodes }: ReturnType<typeof flowSetNodes>) =>
|
||||||
|
@ -9,7 +9,11 @@ const setNodes = (state: IFlowState, { nodes }: ReturnType<typeof flowSetNodes>)
|
||||||
const setHeroes = (state: IFlowState, { heroes }: ReturnType<typeof flowSetHeroes>) =>
|
const setHeroes = (state: IFlowState, { heroes }: ReturnType<typeof flowSetHeroes>) =>
|
||||||
assocPath(['heroes'], heroes, state);
|
assocPath(['heroes'], heroes, state);
|
||||||
|
|
||||||
|
const setRecent = (state: IFlowState, { recent }: ReturnType<typeof flowSetRecent>) =>
|
||||||
|
assocPath(['recent'], recent, state);
|
||||||
|
|
||||||
export const FLOW_HANDLERS = {
|
export const FLOW_HANDLERS = {
|
||||||
[FLOW_ACTIONS.SET_NODES]: setNodes,
|
[FLOW_ACTIONS.SET_NODES]: setNodes,
|
||||||
[FLOW_ACTIONS.SET_HEROES]: setHeroes,
|
[FLOW_ACTIONS.SET_HEROES]: setHeroes,
|
||||||
|
[FLOW_ACTIONS.SET_RECENT]: setRecent,
|
||||||
};
|
};
|
||||||
|
|
|
@ -6,12 +6,14 @@ export type IFlowState = Readonly<{
|
||||||
is_loading: boolean;
|
is_loading: boolean;
|
||||||
nodes: INode[];
|
nodes: INode[];
|
||||||
heroes: Partial<INode>[];
|
heroes: Partial<INode>[];
|
||||||
|
recent: Partial<INode>[];
|
||||||
error: IError;
|
error: IError;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
const INITIAL_STATE: IFlowState = {
|
const INITIAL_STATE: IFlowState = {
|
||||||
nodes: [],
|
nodes: [],
|
||||||
heroes: [],
|
heroes: [],
|
||||||
|
recent: [],
|
||||||
is_loading: false,
|
is_loading: false,
|
||||||
error: null,
|
error: null,
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { takeLatest, call, put, select } from 'redux-saga/effects';
|
||||||
import { REHYDRATE } from 'redux-persist';
|
import { REHYDRATE } from 'redux-persist';
|
||||||
import { FLOW_ACTIONS } from './constants';
|
import { FLOW_ACTIONS } from './constants';
|
||||||
import { getNodes } from '../node/api';
|
import { getNodes } from '../node/api';
|
||||||
import { flowSetNodes, flowSetCellView, flowSetHeroes } from './actions';
|
import { flowSetNodes, flowSetCellView, flowSetHeroes, flowSetRecent } from './actions';
|
||||||
import { IResultWithStatus, INode } from '../types';
|
import { IResultWithStatus, INode } from '../types';
|
||||||
import { selectFlowNodes } from './selectors';
|
import { selectFlowNodes } from './selectors';
|
||||||
import { reqWrapper } from '../auth/sagas';
|
import { reqWrapper } from '../auth/sagas';
|
||||||
|
@ -11,20 +11,23 @@ import { IFlowState } from './reducer';
|
||||||
|
|
||||||
function* onGetFlow() {
|
function* onGetFlow() {
|
||||||
const {
|
const {
|
||||||
data: { nodes = null, heroes = null },
|
data: { nodes = null, heroes = null, recent = null },
|
||||||
}: IResultWithStatus<{ nodes: IFlowState['nodes']; heroes: IFlowState['heroes'] }> = yield call(
|
}: IResultWithStatus<{
|
||||||
getNodes,
|
nodes: IFlowState['nodes'];
|
||||||
{}
|
heroes: IFlowState['heroes'];
|
||||||
);
|
recent: IFlowState['recent'];
|
||||||
|
}> = yield call(getNodes, {});
|
||||||
|
|
||||||
if (!nodes || !nodes.length) {
|
if (!nodes || !nodes.length) {
|
||||||
yield put(flowSetNodes([]));
|
yield put(flowSetNodes([]));
|
||||||
yield put(flowSetHeroes([]));
|
yield put(flowSetHeroes([]));
|
||||||
|
yield put(flowSetRecent([]));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
yield put(flowSetNodes(nodes));
|
yield put(flowSetNodes(nodes));
|
||||||
yield put(flowSetHeroes(heroes));
|
yield put(flowSetHeroes(heroes));
|
||||||
|
yield put(flowSetRecent(recent));
|
||||||
}
|
}
|
||||||
|
|
||||||
function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
|
function* onSetCellView({ id, flow }: ReturnType<typeof flowSetCellView>) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue