Develop Reference

I am using provide/inject to pass the data within components , I've this function using compute, I am trying to run and pass it's result in provide

I have 4 functions, for 1st three functions, I can send the data in provide. For 4th function(
getViewApplicationDetails
), I am trying to fetch api and get application name, now I want that in mounted because, I want the application name as soon as component is rendered so I am trying to execute it in mounted but when I call the it, it's giving me error. Initially application name is empty and it should have the current application name when I fetch the api, the same application name will be used in provide and then I can use that in inject and then in any other component.
import { computed, inject, onMounted, provide, reactive } from "vue";
export const initStore = () => {
onMounted(()=>{
this.getViewApplicationDetails()
});
// State
const state = reactive({
name: "Bob Day",
email: "bob#martianmovers.com",
applicationName: "",
breadcrumbsData: [
{
name: "Home",
text: 'Home',
disabled: false,
href: '/'
}
]
});
// Getters
const getUsername = computed(() => state.name);
const getEmail = computed(() => console.log("state.email",state.email));
const getBreadcrumbsData=computed(()=>state.breadcrumbsData)
console.log("state.applicationName",state.applicationName)
//this is the temporary function
const getApplicationName=computed(()=>state.applicationName)
const getViewApplicationDetails=computed(()=> {
var viewApplicationDetailsParams = {
applicationId: this.$route.query.applicationId,
applicationStatus:this.$route.query.appStatus,
authType: "api",
clientId: process.env.VUE_APP_EXTERNAL_API_CLIENT_ID,
clientSecret: process.env.VUE_APP_EXTERNAL_API_CLIENT_SECRET
};
axios({
method: "post",
url: process.env.VUE_APP_BLUJ_BACKEND_URL + "/viewapplicationDefinition",
data: viewApplicationDetailsParams,
headers: {
"content-type": "application/json",
},
})
.then((response) =>{
this.viewDefinitionResponse = response.data.Definitions;
let applicationName = viewDefinitionResponse.application_display_name.en;
console.log("tyfgyhkjlfhgjklnm",applicationName)
setApplicationName(applicationName)
})
.catch((error) => {
console.log("error", error);
});
});
getViewApplicationDetails()
// Mutations
const setUsername = (name) => {
state.name = name;
};
const setEmail = (email) => {
state.email = email;
};
const setBreadCrumbsData=(breadcrumbsData)=>{
state.breadcrumbsData=breadcrumbsData;
}
const setApplicationName=(appName)=>{
state.applicationName=appName
}
// Actions
const updateUsername = (name) => {
setUsername(name);
};
const updateEmail = (email) => {
setEmail(email);
};
provide("getUsername", getUsername);
provide("getEmail", getEmail);
provide("updateUsername", updateUsername);
provide("updateEmail", updateEmail);
provide("getViewApplicationDetails", getViewApplicationDetails);
provide("getApplicationName", getApplicationName);
provide("getBreadcrumbsData", getBreadcrumbsData);
};
export const useStore = () => ({
getUsername: inject("getUsername"),
getEmail: inject("getEmail"),
updateUsername: inject("updateUsername"),
updateEmail: inject("updateEmail"),
viewApplicationDetails: inject("getViewApplicationDetails"),
getBreadcrumbsData: inject("getBreadcrumbsData"),
getApplicationName: inject("getApplicationName")
});
This is the code snippet.
const getUsername = computed(() => state.name);
const getEmail = computed(() => console.log("state.email",state.email));
const getBreadcrumbsData=computed(()=>state.breadcrumbsData)
I am getting data for this, but for getViewApplicationDetails, it's not working. While hovering over rest of the functions, it is showing "const getUsername: ComputedRef", like this. But, for getViewApplicationDetails, it shows "const getViewApplicationDetails: ComputedRef", this. I think it is not taking it as function or something. Error image is in the link.enter image description here

MongoDB keeps returning one less value than intended value

I am currently working on a blog project where I have to enable a "liking" feature on my blog website. I have enabled the liking feature, however, whenever I test the liking feature with my MongoDB, the response I get is always a like that is one less than the intended value. For example, if I give a blog a like, that already has 4 likes, I get back a document only showing the 4 likes and not the updated document with the new 5 likes.
Here is my frontend code that deals with the "liking" feature:
import axios from "axios"
import { useEffect, useState } from "react"
import blogService from '../services/blogs'
const baseUrl = '/api/blogs'
const Blog = ({blog}) => {
const [checker, setChecker] = useState(false)
const [blogLikes, setBlogLikes] = useState(0)
const [updatedBlog, setUpdatedBlog] = useState({})
const buttonText = checker ? 'hide' : 'view'
useEffect(() => {
setUpdatedBlog({
user: blog.user?.id,
likes: blogLikes,
author: blog.author,
title: blog.title,
url: blog.url
})
}, [blogLikes])
const blogStyle = {
paddingTop: 10,
paddingLeft: 2,
border: 'solid',
borderWidth: 1,
marginBottom: 5
}
const handleLike = async (e) => {
e.preventDefault()
setBlogLikes(blogLikes + 1)
const response = await blogService.update(blog?.id, updatedBlog)
console.log(response)
}
return (
<>
{buttonText === "view" ?
<div style={blogStyle}>
{blog.title} {blog.author} <button onClick={() => setChecker(!checker)}>{buttonText}</button>
</div>
: <div style={blogStyle}>
{blog.title} {blog.author} <button onClick={() => setChecker(!checker)}>{buttonText}</button>
<p>{blog.url}</p>
likes {blogLikes} <button onClick={handleLike}>like</button>
<p>{blog.user?.username}</p>
</div>}
</>
)
}
export default Blog
Here is my backend code that deals with the put request of the "new" like:
blogsRouter.put('/:id', async (request, response) => {
const body = request.body
const user = request.user
console.log(body)
const blog = {
user: body.user.id,
title: body.title,
author: body.author,
url: body.url,
likes: body.likes
}
const updatedBlog = await Blog.findByIdAndUpdate(ObjectId(request.params.id), blog, { new: true })
response.json(updatedBlog)
})
Here is the specific axios handler for put request in another file within frontend directory:
const update = async (id, newObject) => {
const request = await axios.put(`${ baseUrl }/${id}`, newObject)
return request
}

State updates are asynchronous in react, because of that when your API call happens:
const handleLike = async (e) => {
e.preventDefault()
setBlogLikes(blogLikes + 1)
const response = await blogService.update(blog?.id, updatedBlog)
console.log(response)
}
The updatedBlog object still contains old data, not the updated one.
So try the following, change your handleLike function to this:
const handleLike = () => {
setBlogLikes(blogLikes + 1)
}
And add your API call in the useEffect:
useEffect(() => {
setUpdatedBlog({
user: blog.user?.id,
likes: blogLikes,
author: blog.author,
title: blog.title,
url: blog.url
});
blogService.update(blog?.id, {
user: blog.user?.id,
likes: blogLikes,
author: blog.author,
title: blog.title,
url: blog.url
}).then((response) => console.log(response));
}, [blogLikes]);

React.js fetch multiple endpoints of API

I am doing a React.js project. I am trying to pull data from an API that has multiple endpoints. I am having issues with creating a function that pulls all the data at once without having to do every endpoint separetly. The console.log gives an empty array and nothing gets display. The props 'films' is data from the parent and works fine. It is also from another enpoint of the same API. This is the code:
import { useEffect, useState } from "react";
import styles from './MovieDetail.module.css';
const MovieDetail = ({films}) => {
const [results, setResults] = useState([]);
const fetchApis = async () => {
const peopleApiCall = await fetch('https://www.swapi.tech/api/people/');
const planetsApiCall = await fetch('https://www.swapi.tech/api/planets/');
const starshipsApiCall = await fetch('https://www.swapi.tech/api/starships/');
const vehicleApiCall = await fetch('https://www.swapi.tech/api/vehicles/');
const speciesApiCall = await fetch('https://www.swapi.tech/api/species/');
const json = await [peopleApiCall, planetsApiCall, starshipsApiCall, vehicleApiCall, speciesApiCall].json();
setResults(json.results)
}
useEffect(() => {
fetchApis();
}, [])
console.log('results of fetchApis', results)
return (
<div className={styles.card}>
<div className={styles.container}>
<h1>{films.properties.title}</h1>
<h2>{results.people.name}</h2>
<p>{results.planets.name}</p>
</div>
</div>
);
}
export default MovieDetail;
UPDATE
I just added the post of Phil to the code and I uploaded to a codesanbox

You want to fetch and then retrieve the JSON stream from each request.
Something like this
const urls = {
people: "https://www.swapi.tech/api/people/",
planets: "https://www.swapi.tech/api/planets/",
starships: "https://www.swapi.tech/api/starships/",
vehicles: "https://www.swapi.tech/api/vehicles/",
species: "https://www.swapi.tech/api/species/"
}
// ...
const [results, setResults] = useState({});
const fetchApis = async () => {
try {
const responses = await Promise.all(Object.entries(urls).map(async ([ key, url ]) => {
const res = await fetch(url)
return [ key, (await res.json()).results ]
}))
return Object.fromEntries(responses)
} catch (err) {
console.error(err)
}
}
useEffect(() => {
fetchApis().then(setResults)
}, [])
Each URL will resolve to an array like...
[ "people", [{ uid: ... }] ]
Once all these resolve, they will become an object (via Object.fromEntries()) like
{
people: [{uid: ... }],
planets: [ ... ],
// ...
}
Take note that each property is an array so you'd need something like
<h2>{results.people[0].name}</h2>
or a loop.

action creator does not return value to stream in marble test

I've got following Epic which works well in application, but I can't get my marble test working. I am calling action creator in map and it does return correct object into stream, but in the test I am getting empty stream back.
export const updateRemoteFieldEpic = action$ =>
action$.pipe(
ofType(UPDATE_REMOTE_FIELD),
filter(({ payload: { update = true } }) => update),
mergeMap(({ payload }) => {
const { orderId, fields } = payload;
const requiredFieldIds = [4, 12]; // 4 = Name, 12 = Client-lookup
const requestData = {
id: orderId,
customFields: fields
.map(field => {
return (!field.value && !requiredFieldIds.includes(field.id)) ||
field.value
? field
: null;
})
.filter(Boolean)
};
if (requestData.customFields.length > 0) {
return from(axios.post(`/customfields/${orderId}`, requestData)).pipe(
map(() => queueAlert("Draft Saved")),
catchError(err => {
const errorMessage =
err.response &&
err.response.data &&
err.response.data.validationResult
? err.response.data.validationResult[0]
: undefined;
return of(queueAlert(errorMessage));
})
);
}
return of();
})
);
On successfull response from server I am calling queueAlert action creator.
export const queueAlert = (
message,
position = {
vertical: "bottom",
horizontal: "center"
}
) => ({
type: QUEUE_ALERT,
payload: {
key: uniqueId(),
open: true,
message,
position
}
});
and here is my test case
describe("updateRemoteFieldEpic", () => {
const sandbox = sinon.createSandbox();
let scheduler;
beforeEach(() => {
scheduler = new TestScheduler((actual, expected) => {
expect(actual).toEqual(expected);
});
});
afterEach(() => {
sandbox.restore();
});
it("should return success message", () => {
scheduler.run(ts => {
const inputM = "--a--";
const outputM = "--b--";
const values = {
a: updateRemoteField({
orderId: 1,
fields: [{ value: "test string", id: 20 }],
update: true
}),
b: queueAlert("Draft Saved")
};
const source = ActionsObservable.from(ts.cold(inputM, values));
const actual = updateRemoteFieldEpic(source);
const axiosStub = sandbox
.stub(axios, "post")
.returns([]);
ts.expectObservable(actual).toBe(outputM, values);
ts.flush();
expect(axiosStub.called).toBe(true);
});
});
});
output stream in actual returns empty array
I tried to return from map observable of the action creator which crashed application because action expected object.

By stubbing axios.post(...) as [], you get from([]) in the epic - an empty observable that doesn't emit any values. That's why your mergeMap is never called. You can fix this by using a single-element array as stubbed value instead, e.g. [null] or [{}].
The below is an answer to a previous version of the question. I kept it for reference, and because I think the content is useful for those who attempt to mock promise-returning functions in epic tests.
I think your problem is the from(axios.post(...)) in your epic. Axios returns a promise, and the RxJS TestScheduler has no way of making that synchronous, so expectObservable will not work as intended.
The way I usually address this is to create a simple wrapper module that does Promise-to-Observable conversion. In your case, it could look like this:
// api.js
import axios from 'axios';
import { map } from 'rxjs/operators';
export function post(path, data) {
return from(axios.post(path, options));
}
Once you have this wrapper, you can mock the function to return a constant Observable, taking promises completely out of the picture. If you do this with Jest, you can mock the module directly:
import * as api from '../api.js';
jest.mock('../api.js');
// In the test:
api.post.mockReturnValue(of(/* the response */));
Otherwise, you can also use redux-observable's dependency injection mechanism to inject the API module. Your epic would then receive it as third argument:
export const updateRemoteFieldEpic = (action$, state, { api }) =>
action$.pipe(
ofType(UPDATE_REMOTE_FIELD),
filter(({ payload: { update = true } }) => update),
mergeMap(({ payload }) => {
// ...
return api.post(...).pipe(...);
})
);
In your test, you would then just passed a mocked api object.

Displaying multiple users from http data instead of a single user

I'm trying to modify the following code so that I receive an array of users from http and display all of them. This code only receives and displays a single user.
import Cycle from '#cycle/core';
import {div, button, h1, h4, a, makeDOMDriver} from '#cycle/dom';
import {makeHTTPDriver} from '#cycle/http';
function main(sources) {
const USERS_URL = 'http://jsonplaceholder.typicode.com/users/';
const getAllUsers$ = sources.DOM.select('.get-all').events('click')
.map(() => {
return {
url: USERS_URL + 1,
method: 'GET'
};
});
const user$ = sources.HTTP
.filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
.mergeAll()
.map(res => res.body)
.startWith(null);
const vtree$ = user$.map(user =>
div('.users', [
button('.get-all', 'Get all users'),
user === null ? null : div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {href: user.website}, user.website)
])
])
);
return {
DOM: vtree$,
HTTP: getAllUsers$
};
}
const drivers = {
DOM: makeDOMDriver('#app-main'),
HTTP: makeHTTPDriver(),
};
Cycle.run(main, drivers);

You should do one request for multiple users, then iterate over them:
Get all users:
// rather than getting just user 1
url: USERS_URL,
Update this stream:
const users$ = sources.HTTP // users (plural)
.filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
.mergeAll()
.map(res => res.body)
.startWith([]); // start with an empty array
Generate markup for all users:
users.map(user =>
div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {href: user.website}, user.website)
])
)
Here's the complete, working code:
function main(sources) {
const USERS_URL = 'http://jsonplaceholder.typicode.com/users/';
const getAllUsers$ = sources.DOM.select('.get-all').events('click')
.map(() => {
return {
url: USERS_URL,
method: 'GET'
};
});
const users$ = sources.HTTP
.filter(res$ => res$.request.url.indexOf(USERS_URL) === 0)
.mergeAll()
.map(res => res.body)
.startWith([])
const vtree$ = users$.map(users => {
return div('.users', [
button('.get-all', 'Get all users'),
...users.map(user =>
div('.user-details', [
h1('.user-name', user.name),
h4('.user-email', user.email),
a('.user-website', {href: user.website}, user.website)
])
)
])
});
return {
DOM: vtree$,
HTTP: getAllUsers$
};
}