EPMRPP-90359 || Create redux store for organization

app/src/common/urls.js

@@ -127,7 +127,8 @@ export const URLS = {
   apiKeys: (userId) => `${urlCommonBase}users/${userId}/api-keys`,
   apiKeyById: (userId, apiKeyId) => `${urlCommonBase}users/${userId}/api-keys/${apiKeyId}`,
 
-  organizationsList: () => `${urlBase}organizations`,
+  organizationList: (name) => `${urlBase}organizations${getQueryParams({ name })}`,
+  organizationById: (organizationId) => `${urlBase}organizations/${organizationId}`,
 
   projectByName: (projectKey) => `${urlBase}project/${projectKey}`,
   project: (ids = []) => `${urlBase}project?ids=${ids.join(',')}`,

app/src/controllers/organizations/actionCreators.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FETCH_ORGANIZATIONS } from './constants';
+
+export const fetchOrganizationsAction = () => ({
+  type: FETCH_ORGANIZATIONS,
+});

app/src/controllers/organizations/constants.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const NAMESPACE = 'organizations';
+
+export const FETCH_ORGANIZATIONS = 'fetchOrganizations';

app/src/controllers/organizations/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { FETCH_ORGANIZATIONS } from './constants';
+export { fetchOrganizationsAction } from './actionCreators';
+export { organizationsReducer } from './reducer';
+export { organizationsListSelector, organizationsListLoadingSelector } from './selectors';
+export { organizationsSagas } from './sagas';

app/src/controllers/organizations/reducer.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { combineReducers } from 'redux';
+import { fetchReducer } from 'controllers/fetch';
+import { loadingReducer } from 'controllers/loading';
+import { NAMESPACE } from './constants';
+
+export const organizationsReducer = combineReducers({
+  list: fetchReducer(NAMESPACE, { contentPath: 'content' }),
+  listLoading: loadingReducer(NAMESPACE),
+});

app/src/controllers/organizations/sagas.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { takeEvery, all, put } from 'redux-saga/effects';
+import { URLS } from 'common/urls';
+import { showDefaultErrorNotification } from 'controllers/notification';
+import { fetchDataAction } from 'controllers/fetch';
+import { FETCH_ORGANIZATIONS, NAMESPACE } from './constants';
+
+function* fetchOrganizations() {
+  try {
+    yield put(fetchDataAction(NAMESPACE)(URLS.organizationList()));
+  } catch (error) {
+    yield put(showDefaultErrorNotification(error));
+  }
+}
+
+function* watchFetchOrganizations() {
+  yield takeEvery(FETCH_ORGANIZATIONS, fetchOrganizations);
+}
+
+export function* organizationsSagas() {
+  yield all([watchFetchOrganizations()]);
+}

app/src/controllers/organizations/selectors.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const organizationsSelector = (state) => state.organizations || {};
+
+export const organizationsListSelector = (state) => organizationsSelector(state).list || [];
+
+export const organizationsListLoadingSelector = (state) => organizationsSelector(state).listLoading;

app/src/pages/admin/projectsPage/projectsPanelView/projectsPanelView.jsx

@@ -18,21 +18,22 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames/bind';
 import { connect } from 'react-redux';
-import { URLS } from 'common/urls';
-import { fetch } from 'common/utils';
 import { loadingSelector, projectsSelector } from 'controllers/administrate/projects';
+import { organizationsListSelector } from 'controllers/organizations';
 import { SpinningPreloader } from 'components/preloaders/spinningPreloader';
 import { ProjectPanel } from './projectPanel';
 import styles from './projectsPanelView.scss';
 
 const cx = classNames.bind(styles);
 
 @connect((state) => ({
+  organizations: organizationsListSelector(state),
   projects: projectsSelector(state),
   loading: loadingSelector(state),
 }))
 export class ProjectsPanelView extends Component {
   static propTypes = {
+    organizations: PropTypes.array,
     projects: PropTypes.array,
     loading: PropTypes.bool,
     onMembers: PropTypes.func,
@@ -43,6 +44,7 @@ export class ProjectsPanelView extends Component {
   };
 
   static defaultProps = {
+    organizations: [],
     projects: [],
     loading: false,
     onMembers: () => {},
@@ -52,21 +54,8 @@ export class ProjectsPanelView extends Component {
     onDelete: () => {},
   };
 
-  // TODO: The request for organizations is made together with the request for all projects.
-  // Create a store for organizations and drop a selector here that returns organizations.
-  constructor(props) {
-    super(props);
-    this.state = {
-      organizations: [],
-    };
-
-    fetch(URLS.organizationsList()).then((response) => {
-      this.setState({ organizations: response?.content || [] });
-    });
-  }
-
   getPanelList = (projects) => {
-    const { organizations } = this.state;
+    const { organizations } = this.props;
 
     return projects.map((project) => {
       const { organizationId } = project;

app/src/routes/routesMap.js

@@ -82,6 +82,7 @@ import { fetchAllUsersAction } from 'controllers/administrate/allUsers/actionCre
 import { fetchLogPageData } from 'controllers/log';
 import { fetchHistoryPageInfoAction } from 'controllers/itemsHistory';
 import { fetchProjectsAction } from 'controllers/administrate/projects';
+import { fetchOrganizationsAction } from 'controllers/organizations';
 import { startSetViewMode } from 'controllers/administrate/projects/actionCreators';
 import { SIZE_KEY } from 'controllers/pagination';
 import { setSessionItem, updateStorageItem } from 'common/utils/storageUtils';
@@ -127,6 +128,7 @@ const routesMap = {
     path: '/administrate/projects',
     thunk: (dispatch) => {
       dispatch(fetchProjectsAction());
+      dispatch(fetchOrganizationsAction());
       dispatch(startSetViewMode());
     },
   },

app/src/store/reducers.js

@@ -37,6 +37,7 @@ import { administrateReducer } from 'controllers/administrate';
 import { pluginsReducer } from 'controllers/plugins';
 import { initialDataReadyReducer } from 'controllers/initialData';
 import { uniqueErrorsReducer } from 'controllers/uniqueErrors';
+import { organizationsReducer } from 'controllers/organizations';
 
 export default {
   appInfo: appInfoReducer,
@@ -45,6 +46,7 @@ export default {
   form: formReducer,
   modal: modalReducer,
   user: userReducer,
+  organizations: organizationsReducer,
   project: projectReducer,
   notifications: notificationReducer,
   screenLock: screenLockReducer,

app/src/store/rootSaga.js

@@ -30,6 +30,7 @@ import { historySagas } from 'controllers/itemsHistory';
 import { logSagas } from 'controllers/log';
 import { administrateSagas } from 'controllers/administrate';
 import { userSagas } from 'controllers/user';
+import { organizationsSagas } from 'controllers/organizations';
 import { projectSagas } from 'controllers/project';
 import { initialDataSagas } from 'controllers/initialData';
 import { pageSagas } from 'controllers/pages';
@@ -52,6 +53,7 @@ const sagas = [
   historySagas,
   administrateSagas,
   userSagas,
+  organizationsSagas,
   projectSagas,
   initialDataSagas,
   pageSagas,