fixes repository, protocols link, adds csfr token to request headers

app/controllers/client_api/teams_controller.rb

@@ -2,9 +2,6 @@ module ClientApi
   class TeamsController < ApplicationController
     MissingTeamError = Class.new(StandardError)
 
-    # TODO  remove this when the user authentication will be implemented
-    skip_before_action :verify_authenticity_token
-
     def index
       success_response
     end

app/javascript/packs/app/axios.js

@@ -0,0 +1,7 @@
+import axios from "axios";
+
+export default axios.create({
+  headers: {
+    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
+  }
+});

app/javascript/packs/shared/actions/ActivitiesActions.js

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "../../app/axios";
 import { ACTIVITIES_PATH } from "../../app/routes";
 import { GLOBAL_ACTIVITIES_DATA } from "../../app/action_types";
 

app/javascript/packs/shared/actions/TeamsActions.js

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "../../app/axios";
 import _ from "lodash";
 import { TEAMS_PATH, CHANGE_TEAM_PATH } from "../../app/routes";
 import { GET_LIST_OF_TEAMS, SET_CURRENT_TEAM } from "../../app/action_types";

app/javascript/packs/shared/actions/UsersActions.js

@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "../../app/axios";
 import { CURRENT_USER_PATH } from "../../app/routes";
 import { SET_CURRENT_USER } from "../../app/action_types";
 

app/javascript/packs/shared/navigation/components/GlobalActivitiesModal.jsx

@@ -25,9 +25,9 @@ class GlobalActivitiesModal extends Component {
       );
     }
     return this.props.activities.map((activity, i, arr) => {
-      let newDate = new Date(activity.created_at);
+      const newDate = new Date(activity.created_at);
       if (i > 0) {
-        let prevDate = new Date(arr[i - 1].created_at);
+        const prevDate = new Date(arr[i - 1].created_at);
         if (prevDate < newDate) {
           return [
             <ActivityDateElement key={newDate} date={newDate} />,
@@ -45,8 +45,8 @@ class GlobalActivitiesModal extends Component {
   }
 
   addMoreActivities() {
-    let last_id = _.last(this.props.activities).id;
-    this.props.fetchActivities(last_id);
+    const lastId = _.last(this.props.activities).id;
+    this.props.fetchActivities(lastId);
   }
 
   addMoreButton() {
@@ -100,13 +100,13 @@ GlobalActivitiesModal.propTypes = {
 };
 
 const mapStateToProps = ({ global_activities }) => {
-  let { activities, more } = global_activities;
+  const { activities, more } = global_activities;
   return { activities, more };
 };
 
 const mapDispatchToProps = dispatch => ({
-  fetchActivities(last_id) {
-    dispatch(getActivities(last_id));
+  fetchActivities(lastId) {
+    dispatch(getActivities(lastId));
   }
 });
 

app/javascript/packs/shared/navigation/index.js

@@ -43,7 +43,7 @@ class Navigation extends Component {
     this.state = {
       showActivitesModal: false,
       page: "",
-      currentTeam: { id: 0 }
+      current_team: { id: 0 }
     };
     this.selectItemCallback = this.selectItemCallback.bind(this);
     this.closeModalCallback = this.closeModalCallback.bind(this);
@@ -74,10 +74,10 @@ class Navigation extends Component {
             </Navbar.Brand>
           </Navbar.Header>
           <Nav>
-            <NavItem eventKey={1} href="/">
+            <NavItem onClick={() => (window.location = "/")}>
               <span className="glyphicon glyphicon-home" title="Home" />
             </NavItem>
-            <NavItem eventKey={2} href="/protocols">
+            <NavItem onClick={() => (window.location = "/protocols")}>
               <span
                 className="glyphicon glyphicon-list-alt"
                 title="Protocol repositories"
@@ -85,7 +85,9 @@ class Navigation extends Component {
             </NavItem>
             <NavItem
               eventKey={3}
-              href={`/teams/${this.state.currentTeam.id}/repositories`}
+              onClick={() =>
+                (window.location = `/teams/${this.props.current_team
+                  .id}/repositories`)}
             >
               <i
                 className="fa fa-cubes"
@@ -118,14 +120,22 @@ class Navigation extends Component {
 }
 
 Navigation.propTypes = {
-  fetchActivities: PropTypes.func.isRequired
+  fetchActivities: PropTypes.func.isRequired,
+  current_team: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
+    current_team: PropTypes.bool.isRequired
+  }).isRequired
 };
 
-// Map the fetch activity action to component
+// Map the states from store to component props
+const mapStateToProps = ({ current_team }) => ({ current_team });
+
+// Map the fetch activity action to component props
 const mapDispatchToProps = dispatch => ({
   fetchActivities() {
     dispatch(getActivities());
   }
 });
 
-export default connect(null, mapDispatchToProps)(Navigation);
+export default connect(mapStateToProps, mapDispatchToProps)(Navigation);

app/views/layouts/application_client_api.html.erb

@@ -4,6 +4,7 @@
     <meta data-hook="head-js">
     <title><%= t('nav.title') %></title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <%= csrf_meta_tags %>
     <%= stylesheet_link_tag 'bootstrap/css/bootstrap.min'  %>
     <%= stylesheet_link_tag 'font-awesome/css/font-awesome.min' %>
     <%= stylesheet_pack_tag 'styles/main' %>