ソースを参照

Get categories for specific user

FE_dev
Dzenis Hadzifejzovic 2年前
コミット
eb00d0137d

+ 7
- 5
src/pages/UsersPage/UserDetails.js ファイルの表示

import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { USER_DETAILS_LOADING } from "../../store/actions/users/usersActionConstants"; import { USER_DETAILS_LOADING } from "../../store/actions/users/usersActionConstants";
import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors"; import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelectors";
import { selectCategories } from "../../store/selectors/categoriesSelector";
import { setCategoriesReq } from "../../store/actions/categories/categoriesAction";
import { selectIsCategoriesChecked } from "../../store/selectors/categoriesSelector";
import { setIsCategoriesCheckedReq } from "../../store/actions/categories/categoriesAction";


const UserDetails = ({ history }) => { const UserDetails = ({ history }) => {
const theme = useTheme(); const theme = useTheme();
const [showReset, setReset] = useState(false); const [showReset, setReset] = useState(false);
const [showDelete, setDelete] = useState(false); const [showDelete, setDelete] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const categories = useSelector(selectCategories);
const categories = useSelector(selectIsCategoriesChecked);


const { user, errorMessage } = useSelector((s) => s.userDetails); const { user, errorMessage } = useSelector((s) => s.userDetails);


}; };


useEffect(() => { useEffect(() => {
dispatch(setCategoriesReq());
}, []);
if(id){
dispatch(setIsCategoriesCheckedReq({userId:id}));
}
}, [id]);


const handleApiResponseSuccessReset = () => { const handleApiResponseSuccessReset = () => {
setReset(false); setReset(false);

+ 1
- 0
src/request/apiEndpoints.js ファイルの表示

}, },
categories: { categories: {
allCategories: base + "/categories/names", allCategories: base + "/categories/names",
isCategoriesChecked: base + "/categories/granted-categories"
}, },
tags: { tags: {
allTags: base + "/tags/names", allTags: base + "/tags/names",

+ 3
- 0
src/request/categoriesRequest.js ファイルの表示



export const getAllCategories = () => export const getAllCategories = () =>
getRequest(apiEndpoints.categories.allCategories); getRequest(apiEndpoints.categories.allCategories);

export const getIsCategoriesChecked = (userId) =>
getRequest(apiEndpoints.categories.isCategoriesChecked + "?userId=" + userId);

+ 19
- 0
src/store/actions/categories/categoriesAction.js ファイルの表示

FETCH_CATEGORIES_REQ, FETCH_CATEGORIES_REQ,
FETCH_CATEGORIES_SUCCESS, FETCH_CATEGORIES_SUCCESS,
FETCH_CATEGORIES_ERR, FETCH_CATEGORIES_ERR,
FETCH_IS_CATEGORIES_CHECKED_ERR,
FETCH_IS_CATEGORIES_CHECKED_REQ,
FETCH_IS_CATEGORIES_CHECKED_SUCCESS
} from "./categoriesActionConstants"; } from "./categoriesActionConstants";


export const setCategoriesReq = () => ({ export const setCategoriesReq = () => ({
type: FETCH_CATEGORIES_SUCCESS, type: FETCH_CATEGORIES_SUCCESS,
payload, payload,
}); });

export const setIsCategoriesCheckedReq = (payload) => ({
type: FETCH_IS_CATEGORIES_CHECKED_REQ,
payload
});

export const setIsCategoriesCheckedError = (payload) => ({
type: FETCH_IS_CATEGORIES_CHECKED_ERR,
payload,
});

export const setIsCategoriesChecked = (payload) => ({
type: FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
payload,
});


+ 5
- 0
src/store/actions/categories/categoriesActionConstants.js ファイルの表示

} from "../actionHelpers"; } from "../actionHelpers";


const FETCH_CATEGORIES_SCOPE = "FETCH_CATEGORIES"; const FETCH_CATEGORIES_SCOPE = "FETCH_CATEGORIES";
const FETCH_IS_CATEGORIES_CHECKED_SCOPE = "FETCH_IS_CATEGORIES_CHECKED";


export const FETCH_CATEGORIES_REQ = createFetchType(FETCH_CATEGORIES_SCOPE); export const FETCH_CATEGORIES_REQ = createFetchType(FETCH_CATEGORIES_SCOPE);
export const FETCH_CATEGORIES_ERR = createErrorType(FETCH_CATEGORIES_SCOPE); export const FETCH_CATEGORIES_ERR = createErrorType(FETCH_CATEGORIES_SCOPE);
export const FETCH_CATEGORIES_SUCCESS = createSuccessType(FETCH_CATEGORIES_SCOPE); export const FETCH_CATEGORIES_SUCCESS = createSuccessType(FETCH_CATEGORIES_SCOPE);

export const FETCH_IS_CATEGORIES_CHECKED_REQ = createFetchType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);
export const FETCH_IS_CATEGORIES_CHECKED_ERR = createErrorType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);
export const FETCH_IS_CATEGORIES_CHECKED_SUCCESS = createSuccessType(FETCH_IS_CATEGORIES_CHECKED_SCOPE);

+ 31
- 12
src/store/reducers/category/categoriesReducer.js ファイルの表示

import { import {
FETCH_CATEGORIES_ERR, FETCH_CATEGORIES_ERR,
FETCH_CATEGORIES_SUCCESS, FETCH_CATEGORIES_SUCCESS,
FETCH_IS_CATEGORIES_CHECKED_ERR,
FETCH_IS_CATEGORIES_CHECKED_SUCCESS,
} from "../../actions/categories/categoriesActionConstants"; } from "../../actions/categories/categoriesActionConstants";
import createReducer from "../../utils/createReducer"; import createReducer from "../../utils/createReducer";


const initialState = { const initialState = {
categories: [], categories: [],
isCategoriesChecked: [],
errorMessage: "", errorMessage: "",
}; };


{ {
[FETCH_CATEGORIES_SUCCESS]: setStateCategories, [FETCH_CATEGORIES_SUCCESS]: setStateCategories,
[FETCH_CATEGORIES_ERR]: setCategoriesErrorMessage, [FETCH_CATEGORIES_ERR]: setCategoriesErrorMessage,
[FETCH_IS_CATEGORIES_CHECKED_SUCCESS]: setStateIsCategoriesChecked,
[FETCH_IS_CATEGORIES_CHECKED_ERR]: setIsCategoriesCheckedErrorMessage,
}, },
initialState initialState
); );


function setStateCategories(state, action) { function setStateCategories(state, action) {
return {
...state,
categories: action.payload,
};
}
function setCategoriesErrorMessage(state, action) {
return {
...state,
errorMessage: action.payload,
};
}
return {
...state,
categories: action.payload,
};
}

function setCategoriesErrorMessage(state, action) {
return {
...state,
errorMessage: action.payload,
};
}

function setStateIsCategoriesChecked(state, action) {
return {
...state,
isCategoriesChecked: action.payload,
};
}

function setIsCategoriesCheckedErrorMessage(state, action) {
return {
...state,
errorMessage: action.payload,
};
}

+ 31
- 7
src/store/saga/categoriesSaga.js ファイルの表示

import { all, call, put, takeLatest } from "redux-saga/effects"; import { all, call, put, takeLatest } from "redux-saga/effects";
import { setCategories, setCategoriesError } from "../actions/categories/categoriesAction";
import {
setCategories,
setCategoriesError,
setIsCategoriesChecked,
setIsCategoriesCheckedError,
} from "../actions/categories/categoriesAction";
import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers"; import { authScopeStringGetHelper } from "../../util/helpers/authScopeHelpers";
import { JWT_TOKEN } from "../../constants/localStorage"; import { JWT_TOKEN } from "../../constants/localStorage";
import { addHeaderToken } from "../../request"; import { addHeaderToken } from "../../request";
import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper"; import { rejectErrorCodeHelper } from "../../util/helpers/rejectErrorCodeHelper";
import { FETCH_CATEGORIES_REQ } from "../actions/categories/categoriesActionConstants";
import { getAllCategories } from "../../request/categoriesRequest";
import {
FETCH_CATEGORIES_REQ,
FETCH_IS_CATEGORIES_CHECKED_REQ,
} from "../actions/categories/categoriesActionConstants";
import {
getAllCategories,
getIsCategoriesChecked,
} from "../../request/categoriesRequest";


export function* getCategories() { export function* getCategories() {
try { try {
} }
} }


export function* getIsCategoriesCheckedSaga({ payload }) {
try {
const JwtToken = yield call(authScopeStringGetHelper, JWT_TOKEN);
yield call(addHeaderToken, JwtToken);
const result = yield call(getIsCategoriesChecked, payload.userId);
yield put(setIsCategoriesChecked(result.data));
} catch (error) {
const errorMessage = yield call(rejectErrorCodeHelper, error);
yield put(setIsCategoriesCheckedError(errorMessage));
}
}

export default function* categoriesSaga() { export default function* categoriesSaga() {
yield all([
takeLatest(FETCH_CATEGORIES_REQ, getCategories),
]);
}
yield all([
takeLatest(FETCH_CATEGORIES_REQ, getCategories),
takeLatest(FETCH_IS_CATEGORIES_CHECKED_REQ, getIsCategoriesCheckedSaga),
]);
}

+ 10
- 0
src/store/selectors/categoriesSelector.js ファイルの表示

categoriesSelector, categoriesSelector,
(state) => state.errorMessage (state) => state.errorMessage
); );

export const selectIsCategoriesChecked = createSelector(
categoriesSelector,
(state) => state.isCategoriesChecked
);

export const selectIsCategoriesCheckedError = createSelector(
categoriesSelector,
(state) => state.errorMessage
);

読み込み中…
キャンセル
保存