made tags panel

src/redux/tag/actions.ts

@@ -0,0 +1,12 @@
+import { ITagState } from '~/redux/tag/index';
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+
+export const tagSetNodes = (nodes: Partial<ITagState['nodes']>) => ({
+  type: TAG_ACTIONS.SET_TAG_NODES,
+  nodes,
+});
+
+export const tagLoadNodes = (tag: string) => ({
+  type: TAG_ACTIONS.LOAD_TAG_NODES,
+  tag,
+});

src/redux/tag/api.ts

@@ -0,0 +1,19 @@
+import { INode, IResultWithStatus } from '~/redux/types';
+import { api, configWithToken, errorMiddleware, resultMiddleware } from '~/utils/api';
+import { API } from '~/constants/api';
+
+export const getTagNodes = ({
+  access,
+  tag,
+  offset,
+  limit,
+}: {
+  access: string;
+  tag: string;
+  offset: number;
+  limit: number;
+}): Promise<IResultWithStatus<{ nodes: INode[]; count: number }>> =>
+  api
+    .get(API.TAG.NODES, configWithToken(access, { params: { name: tag, offset, limit } }))
+    .then(resultMiddleware)
+    .catch(errorMiddleware);

src/redux/tag/constants.ts

@@ -0,0 +1,6 @@
+const prefix = 'TAG.';
+
+export const TAG_ACTIONS = {
+  LOAD_TAG_NODES: `${prefix}LOAD_TAG_NODES`,
+  SET_TAG_NODES: `${prefix}SET_TAG_NODES`,
+};

src/redux/tag/handlers.ts

@@ -0,0 +1,15 @@
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+import { ITagState } from '~/redux/tag/index';
+import { tagSetNodes } from '~/redux/tag/actions';
+
+const setNodes = (state: ITagState, { nodes }: ReturnType<typeof tagSetNodes>) => ({
+  ...state,
+  nodes: {
+    ...state.nodes,
+    ...nodes,
+  },
+});
+
+export const TAG_HANDLERS = {
+  [TAG_ACTIONS.SET_TAG_NODES]: setNodes,
+};

src/redux/tag/index.ts

@@ -0,0 +1,21 @@
+import { createReducer } from '~/utils/reducer';
+import { INode } from '~/redux/types';
+import { TAG_HANDLERS } from '~/redux/tag/handlers';
+
+export interface ITagState {
+  nodes: {
+    list: INode[];
+    count: number;
+    isLoading: boolean;
+  };
+}
+
+const INITIAL_STATE: ITagState = {
+  nodes: {
+    list: [],
+    count: 0,
+    isLoading: true,
+  },
+};
+
+export default createReducer(INITIAL_STATE, TAG_HANDLERS);

src/redux/tag/sagas.ts

@@ -0,0 +1,31 @@
+import { TAG_ACTIONS } from '~/redux/tag/constants';
+import { call, put, select, takeLatest } from 'redux-saga/effects';
+import { tagLoadNodes, tagSetNodes } from '~/redux/tag/actions';
+import { reqWrapper } from '~/redux/auth/sagas';
+import { selectTagNodes } from '~/redux/tag/selectors';
+import { getTagNodes } from '~/redux/tag/api';
+import { Unwrap } from '~/redux/types';
+
+function* loadTagNodes({ tag }: ReturnType<typeof tagLoadNodes>) {
+  yield put(tagSetNodes({ isLoading: true }));
+
+  try {
+    const { list }: ReturnType<typeof selectTagNodes> = yield select(selectTagNodes);
+    const { data, error }: Unwrap<ReturnType<typeof getTagNodes>> = yield call(
+      reqWrapper,
+      getTagNodes,
+      { tag, limit: 18, offset: list.length }
+    );
+
+    if (error) throw new Error(error);
+
+    yield put(tagSetNodes({ isLoading: false, list: [...list, ...data.nodes], count: data.count }));
+  } catch (e) {
+    console.log(e);
+    yield put(tagSetNodes({ isLoading: false }));
+  }
+}
+
+export default function* tagSaga() {
+  yield takeLatest(TAG_ACTIONS.LOAD_TAG_NODES, loadTagNodes);
+}

src/redux/tag/selectors.ts

@@ -0,0 +1,4 @@
+import { IState } from '~/redux/store';
+
+export const selectTag = (state: IState) => state.tag;
+export const selectTagNodes = (state: IState) => state.tag.nodes;