refactor: bump react router and migrate projects state to overmind (#52)

issue getOne action

projects state, actions, reducers migrated to overmind

bump react-router-dom to v6 and fix routing

Author: Spring3

main/transformers/index.js

@@ -1,5 +1,6 @@
 const users = require('./users');
 const issues = require('./issues');
+const projects = require('./projects');
 
 const transform = (route, responseBody) => {
   const [entity] = route.split('/');
@@ -9,6 +10,8 @@ const transform = (route, responseBody) => {
       return users.transform(route, responseBody);
     case 'issues.json':
       return issues.transform(route, responseBody);
+    case 'projects.json':
+      return projects.transform(route, responseBody);
     default:
       return responseBody;
   }

main/transformers/issues.js

@@ -1,36 +1,70 @@
 const transform = (route, responseBody) => {
-  const { issues } = responseBody;
+  if (route === 'issues.json') {
+    const { issues } = responseBody;
+    return {
+      issues: issues.map((issue) => ({
+        id: issue.id,
+        project: issue.project,
+        tracker: issue.tracker,
+        status: issue.status,
+        priority: issue.priority,
+        author: issue.author,
+        assignee: issue.assigned_to,
+        subject: issue.subject,
+        description: issue.description,
+        startDate: issue.start_date,
+        dueDate: issue.due_date,
+        doneRatio: issue.done_ratio,
+        isPrivate: issue.is_private,
+        estimatedHours: issue.estimated_hours,
+        totalEstimatedHours: issue.total_estimated_hours,
+        spentHours: issue.spent_hours,
+        totalSpentHours: issue.total_spent_hours,
+        createdOn: issue.created_on,
+        updatedOn: issue.updated_on,
+        closedOn: issue.closed_on
+      })),
+      total: responseBody.total_count,
+      offset: responseBody.offset,
+      limit: responseBody.limit
+    };
+  }
 
-  switch (route) {
-    case 'issues.json': {
-      return {
-        issues: issues.map((issue) => ({
-          id: issue.id,
-          project: issue.project,
-          tracker: issue.tracker,
-          status: issue.status,
-          priority: issue.priority,
-          author: issue.author,
-          assignee: issue.assigned_to,
-          subject: issue.subject,
-          description: issue.description,
-          startDate: issue.start_date,
-          dueDate: issue.due_date,
-          doneRatio: issue.done_ratio,
-          isPrivate: issue.is_private,
-          estimatedHours: issue.estimated_hours,
-          createdOn: issue.created_on,
-          updatedOn: issue.updated_on,
-          closedOn: issue.closed_on
-        })),
-        total: responseBody.total_count,
-        offset: responseBody.offset,
-        limit: responseBody.limit
-      };
-    }
-    default:
-      return responseBody;
+  if (/issues\/\d\.json/.test(route)) {
+    const { issue } = responseBody;
+    return {
+      id: issue.id,
+      project: issue.project,
+      tracker: issue.tracker,
+      status: issue.status,
+      priority: issue.priority,
+      author: issue.author,
+      assignee: issue.assigned_to,
+      subject: issue.subject,
+      description: issue.description,
+      startDate: issue.start_date,
+      dueDate: issue.due_date,
+      doneRatio: issue.done_ratio,
+      isPrivate: issue.is_private,
+      estimatedHours: issue.estimated_hours,
+      totalEstimatedHours: issue.total_estimated_hours,
+      spentHours: issue.spent_hours,
+      totalSpentHours: issue.total_spent_hours,
+      createdOn: issue.created_on,
+      updatedOn: issue.updated_on,
+      subTasks: issue.children,
+      customFields: issue.custom_fields,
+      journals: issue.journals?.map((journal) => ({
+        id: journal.id,
+        user: journal.user,
+        createdOn: journal.created_on,
+        notes: journal.notes
+      })),
+      closedOn: issue.closed_on
+    };
   }
+
+  return responseBody;
 };
 
 module.exports = {

main/transformers/projects.js

@@ -0,0 +1,27 @@
+const transform = (route, responseBody) => {
+  if (route === 'projects.json') {
+    const { projects } = responseBody;
+    return {
+      projects: projects.map((project) => ({
+        id: project.id,
+        name: project.name,
+        identifier: project.identifier,
+        description: project.description,
+        status: project.status,
+        isPublic: project.isPublic,
+        inheritMembers: project.inheritMembers,
+        timeEntryActivities: project.time_entry_activities,
+        createdOn: project.created_on,
+        updatedOn: project.updated_on
+      })),
+      total: responseBody.total_count,
+      offset: responseBody.offset,
+      limit: responseBody.limit
+    };
+  }
+  return responseBody;
+};
+
+module.exports = {
+  transform
+};

package.json

@@ -94,7 +94,7 @@
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.173",
     "@types/react-redux": "^7.1.18",
-    "@types/react-router-dom": "^5.1.9",
+    "@types/react-router-dom": "^5.3.2",
     "@types/styled-components": "^5.1.14",
     "@types/webpack-env": "^1.16.2",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -170,7 +170,7 @@
     "react-focus-lock": "^2.6.0",
     "react-redux": "^6.0.1",
     "react-responsive-modal": "^3.6.0",
-    "react-router-dom": "^5.3.0",
+    "react-router-dom": "^6.0.2",
     "react-select": "^2.4.1",
     "react-tabs": "^3.1.0",
     "react-toastify": "^5.5.0",

render/App.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import { Route, Switch, useHistory } from 'react-router-dom';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import cleanStack from 'clean-stack';
@@ -23,11 +23,11 @@ toast.configure({
   draggable: true,
 });
 
-const Routes = ({ dispatch }) => {
+const App = ({ dispatch }) => {
   const [isReady, setIsReady] = useState(false);
 
   const actions = useOvermindActions();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleRejection = useCallback(debounce((event) => {
     event.preventDefault();
@@ -88,7 +88,7 @@ const Routes = ({ dispatch }) => {
           redmineEndpoint: response.payload.endpoint
         });
         if (loginResponse.success) {
-          history.replace('/app');
+          navigate('/issues', { replace: true });
         }
       }
 
@@ -103,15 +103,15 @@ const Routes = ({ dispatch }) => {
   }
 
   return (
-    <Switch>
-      <Route path="/" exact component={LoginView} />
-      <Route path="/app" exact component={AppView} />
-    </Switch>
+    <Routes>
+      <Route path="/" exact element={<LoginView />} />
+      <Route path="/issues/*" element={<AppView />} />
+    </Routes>
   );
 };
 
-Routes.propTypes = {
+App.propTypes = {
   dispatch: PropTypes.func.isRequired,
 };
 
-export default Routes;
+export default App;

render/actions/__tests__/index.spec.js

@@ -6,7 +6,6 @@ describe('Actions aggregator', () => {
     expect(actions.user).toBeTruthy();
     expect(actions.issues).toBeTruthy();
     expect(actions.tracking).toBeTruthy();
-    expect(actions.projects).toBeTruthy();
     expect(actions.timeEntry).toBeTruthy();
     expect(actions.settings).toBeTruthy();
   });

render/actions/__tests__/project.actions.spec.js

@@ -1,15 +1,13 @@
 import trackingActions from './tracking.actions';
 import issuesActions from './issues.actions';
 import issueActions from './issue.actions';
-import projectActions from './project.actions';
 import timeEntryActions from './timeEntry.actions';
 import settingsActions from './settings.actions';
 
 export default {
   issues: issuesActions,
   issue: issueActions,
   tracking: trackingActions,
-  projects: projectActions,
   timeEntry: timeEntryActions,
   settings: settingsActions
 };

render/actions/index.js

@@ -3,28 +3,10 @@ import moment from 'moment';
 
 import request, { notify } from './helper';
 
-export const ISSUES_GET = 'ISSUES_GET';
 export const ISSUES_COMMENTS_SEND = 'ISSUES_COMMENTS_SEND';
 export const ISSUES_RESET_SELECTION = 'ISSUES_RESET_SELECTION';
 export const ISSUES_TIME_ENTRY_GET = 'ISSUES_TIME_ENTRY_GET';
 
-const get = (id) => (dispatch) => {
-  dispatch(notify.start(ISSUES_GET));
-
-  return request({
-    url: `/issues/${id}.json`,
-    query: {
-      include: 'attachments,children,relations,journals'
-    },
-    id: `getIssueDetails:${id}`
-  }).then(({ data }) => dispatch(notify.ok(ISSUES_GET, data)))
-    .catch((error) => {
-      // eslint-disable-next-line
-      console.error(`Error when trying to get the issue with id ${id}:`, error.message);
-      dispatch(notify.nok(ISSUES_GET, error));
-    });
-};
-
 const sendComments = (issueId, comments) => (dispatch, getState) => {
   const { user = {} } = getState();
 
@@ -92,7 +74,6 @@ const getTimeEntriesPage = (issueId, projectId, pageNumber, batchSize) => (dispa
 const resetSelected = () => ({ type: ISSUES_RESET_SELECTION });
 
 export default {
-  get,
   getTimeEntriesPage,
   sendComments,
   resetSelected