Quantcast
Channel: Active questions tagged javascript - Stack Overflow
Viewing all articles
Browse latest Browse all 140161

React/Redux/REST: sending an array

$
0
0

I'm working on a MERN project and I need your support. Which is the best way to get data with a REST call using an array as object?

I have an array of ID's and would like to take data using axios and the mongoose method "findById". Here below the code:

REST api call:

const express = require("express");
const router = express.Router();
const itineraryModel = require("../../models/itineraryModel");

//! GET FAV ITINERARIES //----------------------------------------------

//* @route   GET api/itineraries/:itin_id
//* @desc    Get itineraries per fav itin id
//* @access  Public
// http://localhost:5000/api/profile/itineraries/:itin_id
router.get("/itineraries/:favItin_id", (req, res) => {
  let itineraryRequestedId = req.params.favItin_id;
  itineraryModel
    .findById(itineraryRequestedId)
    .then(itinerary => {
      res.send(itinerary);
    })
    .catch(err => console.log(err));
});

module.exports = router;

Redux Actions:

import {
  FETCH_ITINERARIES_ID_PENDING,
  FETCH_ITINERARIES_ID_SUCCESS
} from "./typesActions";

//! FETCH FAVORITES BY USER ID //-------------------------------------------------------------

export function fetchItinerariesIdPending() {
  return {
    type: FETCH_ITINERARIES_ID_PENDING
  };
}

export const fetchItinerariesId = favItin_id => dispatch => {
  console.log("inside action fetchItineraries per fav ID");
  console.log(favItin_id);

  dispatch(fetchItinerariesIdPending());
  axios
    .get("/api/profile/itineraries", { favItin_id: favItin_id })
    .then(res => {
      dispatch({
        type: FETCH_ITINERARIES_ID_SUCCESS,
        payload: res.data
      });
    });
};

Redux Reducer

  FETCH_ITINERARIES_ID_PENDING,
  FETCH_ITINERARIES_ID_SUCCESS
} from "../actions/typesActions";

const initialState = {
  pending: false,
  favItineraries: []
};

function profileReducer(state = initialState, action) {
  switch (action.type) {
    // GETS FAVORITES FROM ITINERARIES USING ITIN ID
    case FETCH_ITINERARIES_ID_PENDING:
      return {
        ...state,
        pending: true
      };

    case FETCH_ITINERARIES_ID_SUCCESS:
      return {
        ...state,
        pending: false,
        favItineraries: action.payload
      };

    default:
      return state;
  }
}

export default profileReducer;

React view component:

 /*----- MATERIAL UI -----*/
import Box from "@material-ui/core/Box";...

/*----- REACT/ROUTER/REDUX -----*/
import React, { Component, Fragment } from "react";
import { connect } from "react-redux"; // connect component to  redux store.

/*----- COMPONENTS/ACTIONS -----*/
import Navbar from "../components/Navbar";
import ItininerariesList from "../components/ItinerariesList";
import { loadUser } from "../store/actions/authActions";
import { fetchItinerariesId } from "../store/actions/profileActions";
import { fetchActivities } from "../store/actions/activitiesActions";

class Profile extends Component {
  componentDidMount() {
    this.props.loadUser();
    let favItin_id = this.props.favItin_id;
    this.props.fetchItinerariesId(favItin_id);
  }

  render() {
    const { favitineraries, activities } = this.props;

    return (
      <Fragment>
        <Container maxWidth="sm">
          <Typography component="div">
            <Box fontSize="h7.fontSize" textAlign="left" mb="3">
              Favorites MYtineraries:
            </Box>

            <ItininerariesList
            itineraries={favitineraries}
            activities={activities}
            />

          </Typography>
        </Container>

        <div className="navbar">
          <Navbar />
        </div>
      </Fragment>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    favItin_id: state.auth.user.favorites,
    favitineraries: state.profileRed.favItineraries,
    activities: state.activitiesRed.activities
  };
};

export default connect(mapStateToProps, {
  loadUser,
  fetchItinerariesId,
  fetchActivities
})(Profile);

Any suggestions or guidance would be greatly appreciated. Thank you in advance.


Viewing all articles
Browse latest Browse all 140161

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>