Undefined error on show page

[alquador]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

DR

What's the problem you're trying to solve?

I have been trying to have my show page display. Each way I have tried changing the syntax to access the id it has been returning undefined. I double checked that the route is successful in Postman for grabbing specific ids from the models.

Post any code you think might be relevant (one fenced block per file)

//show function
export const getOneProfile = (user, profileId) => {
    console.log('profile id in the axios call', profileId)
    console.log('user in the axios call', user)
    return axios({
        url: `${apiUrl}/profiles/${profileId}/`,
        method: 'GET',
        headers: {
            Authorization: `Token ${user.token}`
        }
    })
}

import React, {useState, useEffect, useRef} from 'react'
import { getOneProfile, removeProfile, updateProfile } from '../../api/profiles'
import { useParams, useNavigate } from 'react-router-dom'
import { Spinner, Container, Card, Button, Row, Col } from 'react-bootstrap'
import EditProfileModal from './EditProfileModal'

const ShowProfiles = (props) => {
// setting state here
    const [profile, setProfile] = useState(null)
    const [modalOpen, setModalOpen] = useState(false)
    const [updated, setUpdated] = useState(false)
    const navigate = useNavigate()

    console.log('props in showProfiles', props)

    const { id } = useParams()
    const {user} = props

    console.log('id in showProfiles', id)

    // put updated in the array so that the page will re-render every time we make an update and trigger the trigger refresh function
    useEffect(() => {
        console.log('id in showProfiles useEffect', id)
        //calls the api to get a specific profile
        getOneProfile(id)
            .then(res => {
                console.log('Show profile res data', res.data.profile)
                setProfile(res.data.profile)
            })
            .catch(console.error)  
    }, [updated, id])

    //delete a profile
    const removeTheProfile = () => {
        removeProfile(user, profile._id)
            .then(() => {navigate(`/profiles`)})
            .catch(console.error)
    }

    //display a spinner if there isn't a profile
    if (!profile) {
        return (
            <Container fluid className="justify-content-center">
                <Spinner animation="border" role="status" variant="warning" >
                    <span className="visually-hidden">Loading....</span>
                </Spinner>
            </Container>
        )
    }

    if(profile.name){
        return (
            <>
            <Container className="fluid" id="showContainer">
                    <Card className='shadow p-3 mb-5 bg-body rounded mt-3'>
                        <Card.Header><h2 style={{
                            textAlign: 'center'
                        }}>{profile.name}</h2></Card.Header>
                        <Card.Body>
                            <Card.Text>
                            <Row>
                                <Col>
                                    <small>Type: {profile.age}</small><br/>
                                </Col>
                                <Col>
                                    <small>Time: {profile.aboutMe} Minutes</small><br/>
                                </Col>
                            </Row>
                        </Card.Text>

                    </Card.Body>
                    {/* if the user owns this profile allow them to edit, or delete it */}
                    {profile.owner === user._id && 
                    <Card.Footer>

                            <Button onClick={() => setModalOpen(true)} className="m-2" variant="warning">
                                Edit Profile
                            </Button>
                            <Button className="m-2" variant="danger" onClick={removeTheProfile}>
                                Delete Profile
                            </Button>

                    </Card.Footer>                        
                    }
                </Card>
            </Container>

            {/* a pop up to edit the profile */}
            <EditProfileModal 
            profile = {profile}
            show={modalOpen}
            user={user}
            triggerRefresh={() => setUpdated(prev => !prev)}
            updateProfile={updateProfile}
            handleClose={() => setModalOpen(false)}
            />
            </>
        )

    }
}

export default ShowProfiles

            <Route
                path='/profiles/:id'
                element={<ShowProfiles msgAlert={msgAlert} user={user} />}
            />

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

What is your best guess as to the source of the problem?

I think I am accessing it wrong, but I have trying changing the syntax of the id with no luck. I can't type it into the browser specifically because then there is no auth token to view the show page. Everything I have tried returns undefined.

What things have you already tried to solve the problem?

I have googled specifics seeing how others have accessed django psql api through react. I have tried changing the syntax of the id and console logging at every step of the way.

Paste a link to your repository here https://github.com/alquador/Project-4-Client

[cory-yonomi]

It looks like your getOneProfile() expects two arguments, but is only getting one when you call it, so the profileID is missing when the function runs

[alquador]

I tried adding an id within the useEffect getOneProfile function to have two arguments, yet it still is only able to grab the user successfully. I have yet to successfully log the profile Id anywhere. Am I calling profileId wrong?

[cory-yonomi]

Readjusted some variable names and how things were getting called, fixed!