How to pass set of arrays in an object from a react component for a post request: This should be the structure of my request object:
{
"test": [
"abc"
],
"test2": [
"def"
],
"test3": [
"sds"
],
"name": "sam"
}
getting error when I do:
React Component:
this.props.actioncreatorCall(
someurl,
["abc"],
["def"],
["sasd"],
"sam"
);
Action creator:
export function apiCAll(someurl,{test, test2, test3, name}) {
return function dispatchUser(dispatch) {
axios.post((url),{test,
test2,
test3,
name},{ },
).then((response) => {
dispatch({
type: DATA_POST,
payload: response.data,
});
browserHistory.push('/NEXTPAGE');
})
.catch(() => {
//SOME ERROR
});
};
}
You need to pass in the second param as an object:
this.props.actioncreatorCall(someurl,{
test: ["abc"],
test2: ["def"],
test3: ["sasd"],
name: "sam"
});
And you action creator needs to accept an object as the second param:
export function actioncreatorCall(someurl, test = {}) {...}
Related
I'm calling data from an api into my react app using axios, like so:
const adapter = axios.create({
baseURL: "http://localhost:4000",
});
const getData = async () => {
const response = await adapter.get("/test-api");
return response.data;
};
This runs in a context, and I have a basic reducer function that I pass to the context:
const initialState = {
loading: true,
error: false,
data: [],
errorMessage: "",
};
const reducer = (state, action) => {
switch (action.type) {
case ACTIONS.FETCH_SUCCESS:
return {
...state,
loading: false,
data: action.payload,
};
case ACTIONS.FETCH_ERROR:
return {
...state,
error: true,
errorMessage: "Error loading data",
};
default:
return state;
}
};
The data I'm returning from my api is shaped like this:
{
"data": [
{
"id": 1,
"name": "Name 1",
"items": [
{
"id": "klqo1gnh",
"name": "Item 1",
"date": "2019-05-12"
}
]
},
{
"id": 2,
"name": "Name 2",
"items": [
{
"id": "klqo2fho",
"name": "Item 1",
"date": "2021-05-05"
},
{
"id": "klro8wip",
"name": "Item 2",
"date": "2012-05-05"
}
]
}
]
}
And I've written a simple function that finds the item whose nested array, items here, has the earliest date, using moment:
const sortDataByDate = (items) => {
return items.sort((first, second) => {
if (moment(first.items.date).isSame(second.items.date)) {
return -1;
} else if (moment(first.items.date).isBefore(second.items.date)) {
return -1;
} else {
return 1;
}
});
};
I then fetch everything in this function:
const fetchData = useCallback(async () => {
try {
await getData().then((response) => {
dispatch({
type: ACTIONS.FETCH_SUCCESS,
payload: response,
});
});
} catch (error) {
dispatch({ type: ACTIONS.FETCH_ERROR });
}
}, []);
I then run fetchData() inside a useEffect within my context:
useEffect(() => {
fetchData();
}, [fetchData]);
All this to say, here's the problem. My sortDataByDate function works sporadically; sometimes the data is ordered correctly, other times it's not. What I'd like to do is fetch my data, sort it with sortDataByDate, and then set the payload with that sorted data, so it's sorted globally rather than on a component level. Inside my App it seems to work consistently, so I think that I have missed something on a context level. Any suggestions?
You need to sort inner items first and get the earliest date:
const sortDataByDate = (items) => {
return items.sort((first, second) => {
if (moment(first.items[0].date).isSame(second.items[0].date)) {
return -1;
} else if (moment(first.items[0].date).isBefore(second.items[0].date)) {
return -1;
} else {
return 1;
}
});
};
I am reading over the docs for testing React/Apollo components Link. If the component has one query, it seems pretty simple to test it.
const mocks = [
{
request: {
query: GET_DOG_QUERY,
variables: {
name: 'Buck',
},
},
result: {
data: {
dog: { id: '1', name: 'Buck', breed: 'bulldog' },
},
},
},
];
it('renders without error', () => {
renderer.create(
<MockedProvider mocks={mocks} addTypename={false}>
<Dog name="Buck" />
</MockedProvider>,
);
});
My component is a little different than the one provided in the documentation.
It doesn't use the useQuery hook, instead I am opting for the HOC approach as outlined here.
I have two queries that my function uses, and so I use two graphql functions and combine them together using compose, as recommended in the docs.
My component is exported like this:
export default compose(withQueryA, withQueryB)(MyComponent);
const withQueryA = graphql(QUERY_A, {
name: "QueryA",
options: (props) => ({
variables: {
foo: props.foo,
},
}),
});
const withQueryB = graphql(QUERY_B, {
name: "QueryB ",
options: (props) => ({
variables: {
bar: props.bar,
},
}),
});
What I'm trying to do is provide the mocks object with multiple objects, each containing a request/result for the corresponding query. I just wanted to know if anyone has been testing their components in a similar way or if there is a better suggestion.
const mocks = [
{
request: {
query: QUERY_A,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
{
request: {
query: QUERY_B,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
];
I'm also confused about what to put in the result object. When I console.log what is actually returned to the component when making a query in production, it has the data plus error, fetchMore, loading, networkStatus. Do I have to put all those things in the mocks as well?
My feeling was correct. The result object should look something like this:
const mocks = [
{
request: {
query: QUERY_A,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
{
request: {
query: QUERY_B,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
];
How could I create a test for an Action with multiple dispatches(Loading, error & success), let see one of my actions:
import axios from 'axios';
import { CompaniesActionTypes } from './types';
export const getCompanies = () => async (dispatch: any) => {
dispatch({
type: CompaniesActionTypes.LOADING
})
try {
const response = await axios.get('app/admin/companies');
dispatch({
type: CompaniesActionTypes.GET_COMPANIES,
payload: response.data
})
} catch (error) {
console.log(error.message);
dispatch({
type: CompaniesActionTypes.ERROR,
payload: 'There was an error while requesting list of companies, please try again later.'
})
}
}
To have more information, below is my reducer for this scenario:
import { CompaniesActionTypes, CompaniesState } from './types';
import { Reducer } from 'redux';
const INITIAL_STATE: CompaniesState = {
data: [],
loading: false,
error: ''
}
export const reducer: Reducer<CompaniesState> = (state = INITIAL_STATE, action) => {
switch (action.type) {
case CompaniesActionTypes.GET_COMPANIES:
return {...state, data: action.payload, loading: false, error: ''}
case CompaniesActionTypes.LOADING:
return {...state, loading: true};
case CompaniesActionTypes.ERROR:
return {...state, error: action.payload, loading: false};
default:
return state
}
}
Note: As you can see I'm using typescript, should not be a problem.
so what I'm trying is:
// Actions
describe('creating actions', () => {
it('should create an action to get companies', () => {
const expectedAction = {
type: CompaniesActionTypes.GET_COMPANIES,
payload: Promise.resolve()
}
expect(actions.getCompanies()).toEqual(expectedAction)
})
})
For the first action test Im getting this error:
Expected: {"payload": {}, "type": "##companies/GET_COMPANIES"}
Received: [Function anonymous]
const middlewares = [thunk]
const mockStore = configureMockStore(middlewares)
describe('actions', () => {
afterEach(() => {
fetchMock.restore()
})
it('creates GET_COMPANIES when fetching companies', () => {
fetchMock.getOnce('app/admin/client/companies', {
body: mock,
headers: { 'content-type': 'application/json' }
})
const expectedActions = [{ type: CompaniesActionTypes.GET_COMPANIES, payload: mock }]
const store = mockStore({})
return store.dispatch(actions.getCompanies()).then(() => {
expect(store.getActions()).toEqual(expectedActions)
})
})
})
For this example I'm having problems with the dispatches:
- Expected
+ Received
Array [
Object {
- "payload": Array [
- Object {
- "id": 1,
- "name": "Company Test 1",
+ "type": "##companies/LOADING_COMPANIES",
},
Object {
- "id": 2,
- "name": "Company Test 2",
- },
- Object {
- "id": 3,
- "name": "Company Test 3",
- },
- ],
- "type": "##companies/GET_COMPANIES",
+ "payload": "There was an error while requesting list of companies, please try again later.",
+ "type": "##companies/ERROR_COMPANIES",
},
]
whats going on with:
"type": "##companies/LOADING_COMPANIES",
"type": "##companies/GET_COMPANIES",
"type": "##companies/ERROR_COMPANIES",
Any idea how to manage this scenario for testing? I guess it's because timing but I have no idea how to implement all the steps
I am performing an Axios get call in a React Component to retrieve JSON info. That function is working great. Within the JSON is a label for various network ports, which are returning as an array in my axios call. These are ultimately going to be displayed as nodes on a d3 graph. My issue is that I need to output the data pulled from the get call into the following format:
nodes: [
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' }
]
So the full component for the graph to read is:
export const data = {
nodes: [
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' },
{ id: 'JSON data.label here' }
]
}
Here is the format of the Axios get I am using:
axios.get(`NetworkConstruct.json`)
.then(res => {
const names = res.data.items;
this.setState({ names });
});
Here is a sample output I am receiving (there are 11 of these):
{id: "5bc0860c-ece1-461c-bac0-b155a3cacd82", label: "80.107.0.212",
resourceTypeId: "tosca.resourceTypes.NetworkConstruct", productId:
"5bc0835c-6cfa-486e-8429-a59eaf4118bc", tenantId: "393fa8da-61fd-458c-80f9-
ce92d0ef0330", …}
The data has to be in this EXACT format or the graph won't read it. I'm guessing I'll need to do an initial map function but am stuck on how to arrange it. I cannot have any divs or quotes in my output. Is this doable? I have scoured the boards and Google for a couple of days and can't make this work yet.
Here is the object I am receiving from the GET request.
{
"id": "5bd2c6ef-6009-4b90-9156-62168f3c6293",
"resourceId": "5bd0ba82-2994-455d-8716-2adb5694d6f0",
"interface": "getGraph",
"inputs": {},
"outputs": {
"graph": {
"nodes": [
{
"id": "5bcdf06c-dd53-4335-840f-55a4b8d85a2d",
"name": "asw-lab9306b",
"ports": {
"GigabitEthernet3/0/8": "5bd1777f-0ab9-4552-962b-9e306ce378ab",
"GigabitEthernet2/0/15": "5bd1777e-119c-44e8-ba69-0d86a481c0f5",
"GigabitEthernet3/0/47": "5bd17783-be94-4aaf-8858-70e4eb3d02dc",
"GigabitEthernet2/0/13": "5bd17783-ed99-453f-a958-f764edaa8da8"
}
}
],
"links": [
{
"a": "5bd1a467-13f2-4294-a768-561187b278a8",
"z": "5bd17770-2e6c-4c37-93c8-44e3eb3db6dd",
"layer": "ETHERNET"
},
{
"a": "5bd1776e-c110-4086-87d6-a374ccee419a",
"z": "5bd17770-83ee-4e10-b5bb-19814f9f5dad",
"layer": "ETHERNET"
}
]
}
},
"state": "successful",
"reason": "",
"progress": [],
"providerData": {},
"createdAt": "2018-10-26T07:49:03.484Z",
"updatedAt": "2018-10-26T07:49:25.425Z",
"resourceStateConstraints": {},
"executionGroup": "lifecycle"
}
The info I need is the nodes ID. There are eleven of them in the full object.
You can map an array of objects to another array of objects in your format with Array.prototype.map(). Assuming that data is the list of objects from your response:
class Graph extends React.Component {
state = {
nodes: null,
};
componentDidMount() {
axios.get('the url').then(response => {
const nodes = response.data.outputs.graph.nodes;
this.setState({nodes});
});
}
render() {
const {nodes} = this.state;
if (!nodes) return 'Loading...'
return <TheD3ComponentYouUse nodes={nodes} />;
}
}
I am trying to parse a simple JSON structure with arrays using Angular 2 typescript.
JSON structure:
[
{
"_id": {
"$oid": "594156331900006500e5f0f7"
},
"username": "John Smith",
"place": {
"name": "vvio",
"point": {
"type": "Point",
"coordinates": [
51.5044484,
-0.1056523
]
}
},
"from": "2017-05-01",
"to": "2017-05-30",
"availabilities": [
{
"date": "2017-05-01",
"timeFrom": "20:00",
"timeTo": "21:00"
},
{
"date": "2017-06-01",
"timeFrom": "20:00",
"timeTo": "21:00"
},
{
"date": "2017-06-19",
"timeFrom": "15:25",
"timeTo": "15:25"
},
{
"date": "2017-06-19",
"timeFrom": "15:59",
"timeTo": "15:59"
}
],
"sports": [
"Sport5",
"Sport2"
]
}
]
I create this class to map the JSON structure:
export class Checkin {
_id: Id;
username: string;
place :Place;
from: string;
to: string;
availabilities: Availability[];
sports: string[];
}
export class Id {
$oid: string;
}
export class Place {
name: string;
point: Point;
}
export class Point {
type: string;
coordinates: number[]; // number?
}
export class Availability {
date: string;
timeFrom: string;
timeTo: string;
}
Here is the service:
getCheckins(userName : string): Promise<Checkin[]> {
var options = new RequestOptions({
headers : new Headers({
'Accept': 'application/json;q=0.9,*/*;q=0.8',
'Content-Type':'application/json',
})
});
console.log("checkin ");
const url = `${this.checkinUrl}${userName}`;
return this.http.get(url)
.toPromise()
.then(response => {
let result = response.json();
console.log("response "+JSON.stringify(result));
return result as Checkin[]})
.catch(this.handleError);
}
Here is how I call the service:
getCheckins(): void {
console.log("called get checkin ");
this.userService.getCheckins("test#outlook.com").then(checkins => this.checkins = checkins);
console.log("printing checkins "+JSON.stringify(this.checkins));
for (let checkin of this.checkins) {
console.log("checkin "+checkin.username);
}
}
Here is the error I get (comes from the for loop):
AppComponent.html:1 ERROR TypeError: Cannot read property 'length' of undefined
at CheckinComponent.getCheckins (checkin.component.ts:46)
at CheckinComponent.ngOnInit (checkin.component.ts:34)
at checkAndUpdateDirectiveInline (provider.ts:275)
at checkAndUpdateNodeInline (view.ts:456)
at checkAndUpdateNode (view.ts:417)
at debugCheckAndUpdateNode (services.ts:235)
at debugCheckDirectivesFn (services.ts:294)
at Object.View_AppComponent_0.co [as updateDirectives] (AppComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (services.ts:273)
at checkAndUpdateView (view.ts:345)
It seems that I am not able to parse the json response into the json class..
Any help appreciated.