How to return lists relating to a logged in user

JavaScript
#1

I am trying to return lists of data relating to logged in users. I have created an API below to return this but I am getting an error message “Unhandled Rejection (TypeError): dispatch is not a function” error when I try to access the API in componentDidMount on the front-end.

Is req.body.username the correct way to return the correct data on the API in the back-end? Does the service method on the front-end have to send the logged in users username to the back-end when the data request is made?

const db = require("../server/models/");
const approvedDivingSchool = db.approvedDivingSchool;

exports.userDiveLog = (req, res) => {

    diveLog.findAll({
        where: {
            [Op.and]: [
                {diverUserNumber: req.body.username},
                //{diveVerifiedBySchool: true}
        ]
        },
    })
        .then((diveLog) => {

            const userDiveLogList = [];
            for (i = 0; i < diveLog.length; i++) {
                userDiveLogList.push(diveLog[i].dataValues);
            }

            if (!diveLog) {
                return res.status(404).send({ message: "No dive logs stored belonging to this individual." });
            }

            res.status(200).send({
                data: userDiveLogList
            });
        })
        .catch((err) => {
            res.status(500).send({ message: err.message });
        });
};
#2

dispatch sound more like a redux error on the frontend and has nothing to do with API.

1 Like
#3

The method set-up in my redux action folder is below. This would make sense as I have had the same error on a few places in my project. Do I need to set-up a reducer js file for returning these types of files? I only have the authentication reducer file set-up at the minute.

Should I have a reducer file for anything that goes into state? it is my first time using redux and react.

import { scubaSchoolLocations } from "../services/diveSchool.service";
import { failed_data_load, set_message, data_load_successful } from "./types.action";

// pull the dive log of the user
export const pullUserDiveLogs = (dispatch) => {
    return userDiveLogList().then(
        (response) => {
            return response;
        },
        (error) => {
            const message =
                (error.response &&
                    error.response.data &&
                    error.response.data.message) ||
                error.message ||
                error.toString();

            dispatch({
                type: failed_data_load,
            });

            dispatch({
                type: set_message,
                payload: message,
            });

            return Promise.reject();
        }
    );
}
#4

You should either create an example with runnable code or at least post the link to a full code, because the redux code you posted is missing the part where pullUserDiveLogs is called.

1 Like
#5

My diveLog.service file is:

import axios from 'axios';
const API_URL = "http://localhost:5002/api/diveschool/";

    // returns list of dives per user from db
export const userDiveLogList  = () => {
        return axios.get(API_URL + "userdiveloglist");
    };

I haven’t included the top of the diveLogAction file as there are other methods.

#6

That’s the imports updated now.