Why cannot I grab items from api/context?(react question) - reactjs

Question

I am trying to create a simple react app for lending phones with this api.
I am trying to grab the mobiles with context api like this:
import React, { useState, useEffect, createContext
} from 'react';
import axios from 'axios';
export const MobileContext = createContext({
mobiles: [],
setMobiles: () => {},
updateMobiles: () => {},
});
export default function MobileProvider(props) {
const [mobiles, setMobiles] = useState([]);
const updateMobiles = (id) => {
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
};
useEffect(() => {
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
}, [] );
return (
<MobileContext.Provider value={{ mobiles, setMobiles, updateMobiles }}>
{props.children}
</MobileContext.Provider>
);
}
and reuse them at the main page after logging in
import React from 'react'
import { MobileContext } from './MobileContext';
import { useContext } from 'react';
import Mobile from './Mobile';
import Navbar from './Navbar';
function MobileList() {
const { mobiles } = useContext(MobileContext);
return (
<div>
<Navbar/>
{mobiles.map((item) => (
<Mobile
vendor={item.vendor}
/>
))}
</div>
)
}
export default MobileList
and this is the single mobile component
import React from 'react'
function Mobile(props) {
return (
<div>
<p>{props.vendor}</p>
<p> ssssssssssss</p>
</div>
)
}
export default Mobile
after the correct logging in, it should display both the text and the vendor for each mobile but it isnt displaying anything besides the navbar
this would probably mean, that I am not getting the mobiles from the api in the first place, but I am not sure why is that. The auth token could also be the reason why I am not able to access the phones,never used it before.
Anyway, this is the full code and I would apreciate any help
login.js
import React from 'react'
import axios from 'axios';
import { useState } from 'react';
import { useHistory } from "react-router-dom";
function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
let history = useHistory()
const onSubmit = (e) => {
e.preventDefault();
const getIn = {
"login":email,
"password":password,
};
axios
.post('https://js-test-api.etnetera.cz/api/v1/login', getIn,
{
headers: {
'content-type': 'application/json',
}
}).then((res) => {
console.log(res.data);
history.push("/phones");
})
.catch((error) => console.log(error));
};
return (
<div>
<form >
<label>email</label> <input value={email}
onChange={(e) => setEmail(e.target.value)} type="text"/>
<label>password</label> <input type="text" value={password}
onChange={(e) => setPassword(e.target.value)}/>
<button onClick={onSubmit}>login</button>
</form>
</div>
)
}
export default Login

Answer 1

As you said, it's the get api expecting an auth token. You need to first login using the login endpoint and get the token from the login response. Post that you can pass that auth token in each get request in the header.
You can update your context file like so :-
import React, { useState, useEffect, createContext
} from 'react';
import axios from 'axios';
export const MobileContext = createContext({
login:()=>{},
mobiles: [],
setMobiles: () => {},
updateMobiles: () => {},
});
export default function MobileProvider(props) {
const [mobiles, setMobiles] = useState([]);
const [token,setToken] = useState(null);
const login = (username,password) =>{
// do the axios post thing - take ref from docs you shared for request body
// get the token from the response and you can set it in the state
setToken(token);
}
const updateMobiles = (id) => {
//Update this get request with proper header value using token state as well.
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
};
useEffect(() => {
//Update this get request with proper header value using token state as well.
axios
.get('https://js-test-api.etnetera.cz/api/v1/phones')
.then((res) => setMobiles(res.data));
}, [] );
return (
<MobileContext.Provider value={{ login,mobiles, setMobiles, updateMobiles }}>
{props.children}
</MobileContext.Provider>
);
}
Note - How you wan't to use that login function is upto you but generally its through form submission. In your case I think it's an auto login inside an useEffect, so don't hardcode username and password in the UI. You can use environment variables for the same.