I need to modify my code where loading detail category will first look whether it is not already loaded in the statement, and if not then detail loads. Thanks for help!
Constructor of CategoryProvider:
private _obServers = {
'categoryList': undefined,
'category': undefined,
'idCategory': new Subject<Number>()
};
constructor(){
this.categories = new Observable(observer => this._obServers.categoryList = observer).share();
this._categoryObservable = this.categories
.combineLatest(this._obServers.idCategory, (categories, idCategory) => {
return categories.filter(category => category.id === idCategory)[0];
})
.distinctUntilChanged((oldCategory, newCategory) => {
return oldCategory.id === newCategory.id;
});
}
CategoryList:
loadCategories(search?:string):void{
this._http
.get('/services/category/list?search=' + search)
.map(res => res.json())
.subscribe(data => {
this._obServers.categoryList.next(this.createCategoryEntities(data));
});
}
CategoryDetail:
loadCategory(categoryId:number){
this._obServers.idCategory.next(categoryId);
//If category not loaded I need to load it
}
I have followed this way https://github.com/JonatanSCS/Angular-2-Tutorial/blob/master/node_modules/rxjs/src/add/observable/combineLatest.ts
import { Component, Injectable, Inject, provide } from '#angular/core';
import { HTTP_PROVIDERS } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { combineLatestStatic } from 'rxjs/operator/combineLatest.js';
import { MessageApi } from '../providers/lb-service/lb-services.provider'
import { EstimatesService } from './estimates.service';
#Component({
pipes: [TranslatePipe],
})
#Injectable()
export class InvoiceService {
constructor(private _message:MessageApi,
#Inject(EstimatesService) _estimates:EstimatesService) {
this._message = _message;
this._estimates = _estimates;
Observable.combineLatest = combineLatestStatic;
declare module 'rxjs/Observable' {
namespace Observable {
export let combineLatest: typeof combineLatestStatic;
}
}
Observable.combineLatest(
this._estimates.getEstimates(),
this._message.findOne({
where: {
moduleTag: 'monthlyStat',
'dynamic.date': "2016-07-01" //new Date
},
fields: {
dynamic: true
}
}),this._message.findOne({
where: {
moduleTag: 'areaPriceSE1',
'dynamic.date': ''
},
fields: {
dynamic: true
}
})
).subscribe(res => console.log("observable", res));
Related
I am attempting to write a test that will change the value of the current drop down selection in list. I have a drop down on a component that uses another component to change the value that takes in a list component that runs a GET call from our database to populate a list which also matches an equipment ID by the equipment name and displays the name associated with the EquipId.
Test Attempt:
test('Simulates selection for equipment list', () => {
function updateFieldDummy() {}
render(
<EditableSelect
fieldName={'equipmentTypeId'}
defaultValue={18}
updateField={updateFieldDummy}
/>,
);
fireEvent.change(screen.getByTestId('EditableSelectEquipmentListTestId'), {
target: { defaultValue: 19 },
});
const selectOption = screen.getAllByTestId('select-option') as any;
expect(selectOption[0].value).toContain('19');
});
List
import React from 'react';
import { useEffect, useState } from 'react';
import Caller from '../../api/internal/Caller';
function EquipList({equipId,equipName,type}) {
const [equipNameState, setEquipNameState] = useState<String>('');
const [equip, setEquip] = useState<Array<any>>([]);
const [equipIdState, setEquipIdState] = useState<Number>();
useEffect(() => {
Caller.get(`blahblahlblahj`)
.then(response => {
setEquip(response.data);
if (equipId) {
FindEquipName(response.data);
}
if (equipName) {
FindEquipId(response.data);
}
})
.catch(error => {
if (error.response) {
console.log('error.status');
console.log(error.status);
} else if (error.request) {
console.log('error.request');
console.log(error.request);
} else {
console.log('Error', error.message);
}
});
}, [equipId,equipName,type]);
function FindEquipName(apiData) {
apiData.map(equip => {
if (equipId == equip.equipTypeId) {
setEquipNameState(equip.equip);
}
});
}
function FindEquipId(apiData) {
apiData.map(equipment => {
if (equipName == equip.equip) {
setEquipIdState(equip.equipId);
}
});
}
let equipGroupsList = [];
equip.map(equip => {
if (!equipGroupsList.includes(equip.equipGroup)) {
equipGroupsList.push(equip.equipGroup);
}
});
let equipList = [] as any;
if (equipId) {
equipList.push(
<option
key={equipId}
value={equipId as string}
data-testid="select-option"
>
{equipNameState}
</option>,
);
}
equipGroupsList.map((equipGroup, equipId) => {
let equipSubGroup = [];
equip.map((equip, equipId) => {
if (equip.equipGroup == equipGroup) {
equipSubGroup.push(
<option key={equipId} value={equip.equipTypeId as string}
{equip.equip}
</option>,
);
}
});
equipList.push(
<optgroup key={equipId} label={equipGroup}>
{equipSubGroup}
</optgroup>,
);
});
return type == 'string'
? equiNameState
: type == 'number'
? equipIdState
: equipList;
}
export default EquipList as any;
select component
<select
data-testid="EditableSelectEquipListTestId"
onChange={e => UpdateValue(e.target.value, fieldName)}
defaultValue={defaultValue}
>
<EquipList equipId={defaultValue} />
</select>
Have an observable being returned from my service.ts as shown here:
import { Injectable, ErrorHandler } from '#angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders } from
'#angular/common/http'
import { Observable } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { PokeResponse } from '../PokeResponse';
#Injectable({
providedIn: 'root'
})
export class PokeApiService {
private url = "https://pokemon-go1.p.rapidapi.com/pokemon_stats.json";
constructor(private http:HttpClient) { }
getPokeData(): Observable<PokeResponse> {
return this.http.get<PokeResponse>(this.url,
{
headers : new HttpHeaders({
'x-rapidapi-key': 'a6cef4cbcamsh05b29346394d4a4p1bafacjsn2a92406ac103'
})
})
.pipe(
tap(data => console.log('Pokedata/Error' + JSON.stringify(data))
),
catchError(this.handleError)
);
}
private handleError(err:HttpErrorResponse) {
console.log('PokemonService: ' + err.message);
return Observable.throw(err.message);
}
}
This is my response:
export interface PokeResponse{
list:results[];
results:{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
}[];
}
export interface results{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
}
export class Pokemon implements results{
pokemon_id:number;
pokemon_name:string;
base_attack:number;
base_defense:number;
base_stamina:number;
constructor(_id:number, _name:string, _atk:number, _def:number, _stam:number) {
_id = this.pokemon_id;
_name = this.pokemon_name;
_atk = this.base_attack;
_def = this.base_defense;
_stam = this.base_stamina;
}
}
And this is my component.ts:
import { Component, OnInit } from '#angular/core';
import { PokeApiService } from 'src/app/services/poke-api.service';
import { PokeResponse, results, Pokemon } from 'src/app/PokeResponse';
import { Observable } from 'rxjs';
#Component({
selector: 'app-list-pokemon',
templateUrl: './list-pokemon.component.html',
styleUrls: ['./list-pokemon.component.css']
})
export class ListPokemonComponent implements OnInit {
constructor(private pokeService: PokeApiService) { }
ngOnInit(): void {
this.getPokeDetails();
}
pokeData:PokeResponse;
errorMessage:any;
pokeArray:results;
getPokeDetails() : boolean {
this.pokeService.getPokeData().subscribe(
pokeData => {
this.pokeData=pokeData;
console.table(pokeData);
},
error => this.errorMessage = <any>error
);
return false;
}
}
In my console I'm getting back a console.table of my observable like this
I'm trying to filter out the names of Pokemon which are the same as others, which could also be achieved by just filtering out any of the pokemon_ids as all the stats match regardless of the type.
So far I've tried:
console.log(this.pokeArray);,
using [...Set()], forEach(), and Array.from()
Any help or suggestions on how I can make this question any clearer would be greatly appreciated.
Try this, using filter:
// list-pokemon.component.ts
export class ListPokemonComponent implements OnInit {
uniqueListPoke = [];
flags = {};
constructor(private pokeService: PokeApiService) { }
ngOnInit(): void {
this.getPokeDetails();
}
pokeData:PokeResponse;
errorMessage:any;
pokeArray:results;
getPokeDetails() : boolean {
this.pokeService.getPokeData().subscribe(
pokeData => {
this.uniqueListPoke = pokeData.filter((entry) => {
if (this.flags[entry.pokemon_name]) {
// console.log('flags', false);
return false;
}
this.flags[entry.pokemon_name] = true;
return true;
});
console.log(JSON.stringify(this.uniqueListPoke));
},
error => this.errorMessage = <any>error
);
return false;
}
}
The working example:
https://stackblitz.com/edit/angular-distinct-poke?file=src/app/hello.component.ts
I have a rather large React component that manages the display of a detail for a job on my site.
There are a few things that I would like to do smarter
The component has a few options for opening Dialogs. For each dialog I have a separate Open and Close function. For example handleImageGridShow and handleImageGridClose. Is there any way to be more concise around this?
I have many presentational components (e.g. ViewJobDetails) that shows details about the job. My issue is that I have to pass them down into each Component as a prop and I'm passing the same props over and over again
As I'm loading my data from firebase I often have to do similar checks to see if the data exists before I render the component (e.g.this.state.selectedImageGrid && <ImageGridDialog />). Is there any more clever way of going about this?
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import ViewJobAttachment from "../../components/jobs/viewJobAttachment";
import ViewJobDetails from "../../components/jobs/viewJob/viewJobDetails";
import ViewJobActions from "../../components/jobs/viewJob/viewJobActions";
import ViewCompanyDetails from "../../components/jobs/viewJob/viewCompanyDetails";
import ViewClientsDetails from "../../components/jobs/viewJob/viewClientsDetails";
import ViewProductsDetails from "../../components/jobs/viewJob/viewProductsDetails";
import ViewAttachmentDetails from "../../components/jobs/viewJob/viewAttachmentDetails";
import ViewEventLogDetails from "../../components/jobs/viewJob/viewEventLogDetails";
import ViewSummaryDetails from "../../components/jobs/viewJob/viewSummary";
import {FirebaseList} from "../../utils/firebase/firebaseList";
import SimpleSnackbar from "../../components/shared/snackbar";
import {calculateTotalPerProduct} from "../../utils/jobsService";
import BasicDialog from "../../components/shared/dialog";
import ImageGrid from "../../components/shared/imageGrid";
import Spinner from "../../components/shared/spinner";
import ViewPinnedImageDialog from "../../components/jobs/viewEntry/viewPinnedImage";
import {
Redirect
} from 'react-router-dom';
const styles = theme => ({
wrapper: {
marginBottom: theme.spacing.unit*2
},
rightElement: {
float: 'right'
}
});
const ImageGridDialog = (props) => {
return (
<BasicDialog open={!!props.selectedImageGrid}
handleRequestClose={props.handleRequestClose}
fullScreen={props.fullScreen}
title={props.title}
>
<ImageGrid selectedUploads={props.selectedImageGrid}
handleClickOpen={props.handleClickOpen}/>
</BasicDialog>
)
};
class ViewJob extends Component {
constructor() {
super();
this.state = {
currentJob: null,
entries: [],
promiseResolved: false,
attachmentDialogOpen: false,
openAttachment: null,
selectedImageGrid: false,
selectedPinnedImage: false,
showSnackbar: false,
snackbarMsg: '',
markedImageLoaded: false,
loading: true,
redirect: false
};
this.firebase = new FirebaseList('jobs');
this.handleJobStatusChange = this.handleJobStatusChange.bind(this);
this.handleImageGridShow = this.handleImageGridShow.bind(this);
this.handleImageGridClose = this.handleImageGridClose.bind(this);
this.handlePinnedImageClose = this.handlePinnedImageClose.bind(this);
this.handlePinnedImageShow = this.handlePinnedImageShow.bind(this);
this.handleMarkedImageLoaded = this.handleMarkedImageLoaded.bind(this);
this.handleRemove = this.handleRemove.bind(this);
this.pushLiveToClient = this.pushLiveToClient.bind(this);
}
componentDidMount() {
this.firebase.db().ref(`jobs/${this.props.id}`).on('value', (snap) => {
const job = {
id: snap.key,
...snap.val()
};
this.setState({
currentJob: job,
loading: false
})
});
const previousEntries = this.state.entries;
this.firebase.db().ref(`entries/${this.props.id}`).on('child_added', snap => {
previousEntries.push({
id: snap.key,
...snap.val()
});
this.setState({
entries: previousEntries
})
});
}
handleRemove() {
this.firebase.remove(this.props.id)
.then(() => {
this.setState({redirect: true})
})
};
pushLiveToClient() {
const updatedJob = {
...this.state.currentJob,
'lastPushedToClient': Date.now()
};
this.firebase.update(this.state.currentJob.id, updatedJob)
.then(() => this.handleSnackbarShow("Job pushed live to client"))
}
handleJobStatusChange() {
const newState = !this.state.currentJob.completed;
const updatedJob = {
...this.state.currentJob,
'completed': newState
};
this.firebase.update(this.state.currentJob.id, updatedJob)
}
handleSnackbarShow = (msg) => {
this.setState({
showSnackbar: true,
snackbarMsg: msg
});
};
handleSnackbarClose= (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.setState({ showSnackbar: false });
};
handleAttachmentDialogClose =() => {
this.setState({attachmentDialogOpen: false})
};
handleClickOpen = (file) => {
this.setState({
attachmentDialogOpen: true,
openAttachment: file
});
};
handleImageGridShow(imageGrid) {
this.setState({selectedImageGrid: imageGrid})
}
handleImageGridClose() {
this.setState({selectedImageGrid: false})
}
handlePinnedImageShow(pinnedImage) {
this.setState({selectedPinnedImage: pinnedImage})
}
handlePinnedImageClose() {
this.setState({selectedPinnedImage: false})
}
handleMarkedImageLoaded() {
this.setState({markedImageLoaded: true})
}
render() {
const {classes} = this.props;
let {_, costPerItem} = calculateTotalPerProduct(this.state.entries);
if (this.state.redirect) {
return <Redirect to='/jobs' push/>
} else {
if (this.state.loading) {
return <Spinner/>
} else {
return (
<div className={styles.wrapper}>
{this.state.currentJob &&
<div>
<ViewJobActions currentJob={this.state.currentJob}
handleJobStatusChange={this.handleJobStatusChange}
pushLiveToClient={this.pushLiveToClient}
/>
<ViewJobDetails currentJob={this.state.currentJob}/>
<ViewCompanyDetails currentJob={this.state.currentJob}/>
<ViewClientsDetails currentJob={this.state.currentJob}/>
<ViewProductsDetails currentJob={this.state.currentJob}/>
{this.state.currentJob.selectedUploads && this.state.currentJob.selectedUploads.length > 0
? <ViewAttachmentDetails currentJob={this.state.currentJob} handleClickOpen={this.handleClickOpen}/>
: null}
<ViewEventLogDetails jobId={this.state.currentJob.jobId}
jobKey={this.state.currentJob.id}
entries={this.state.entries}
handlePinnedImageShow={this.handlePinnedImageShow}
handleImageGridShow={this.handleImageGridShow}/>
<ViewSummaryDetails stats={costPerItem}/>
<ViewJobAttachment open={this.state.attachmentDialogOpen}
handleRequestClose={this.handleAttachmentDialogClose}
attachment={this.state.openAttachment}
/>
{this.state.selectedImageGrid &&
<ImageGridDialog selectedImageGrid={this.state.selectedImageGrid}
handleRequestClose={this.handleImageGridClose}
handleClickOpen={this.handleClickOpen}
title="Pictures for job"
fullScreen={false}/>}
{this.state.selectedPinnedImage &&
<ViewPinnedImageDialog attachment={this.state.selectedPinnedImage}
open={!!this.state.selectedPinnedImage}
markedImageLoaded={this.state.markedImageLoaded}
handleMarkedImageLoaded={this.handleMarkedImageLoaded}
handleRequestClose={this.handlePinnedImageClose}
otherMarkedEntries={this.state.entries}
/>
}
<SimpleSnackbar showSnackbar={this.state.showSnackbar}
handleSnackbarClose={this.handleSnackbarClose}
snackbarMsg={this.state.snackbarMsg}/>
</div>}
</div>
);
}
}
}
}
export default withStyles(styles)(ViewJob);
You can define a regular component method and bind it in handler like this onSomething={this.handler.bind(this, index)} assuming you have some distinguishable thing in the index var
function should look like this
handler(index) {
...
}
Why am I getting undefined for data when the subscription goes through?
I am trying to figure out where the undefined for my props.data.allLocations is coming from. Any help would be appreciated.
//Higher order component
export const LocationList = graphql(
gql`
query ($site: ID!) {
allLocations(
filter: {
site: {
id:$site
}
}
) {
id
name
}
}
`,
{
options: (ownProps)=>({
variables: {
site: ownProps.site
},
}),
//props were injected from the JSX element
props: props => {
return {
data: props.data,
subscribeToData: params => {
return props.data.subscribeToMore({
document:
gql`
subscription newLocations {
Location {
mutation
node {
id
name
}
}
}
`,
variables: {
//Empty for now
//site: props.site,
},
updateQuery: (previousState, {subscriptionData}) => {
if (!subscriptionData.data) {
return previousState;
}
var newArray =[subscriptionData.data.Location.node].concat(previousState.allLocations)
var newState = {
...previousState,
allLocations: [
{
...subscriptionData.data.Location.node
},
...previousState.allLocations
],
};
return newState
}
})
},
}
},
onError: (err) => console.error(err)
} )(EntityList)
//List Component
class EntityList extends Component {
componentWillReceiveProps(newProps) {
if (!newProps.data.loading) {
console.log(newProps)
if (this.subscription && this.props.hasOwnProperty('subscribeToData')) {
if (newProps.data.allLocations !== this.props.data.allLocations) {
console.log("Resubscribe")
// if the todos have changed, we need to unsubscribe before resubscribing
this.subscription()
} else {
console.log('else')
// we already have an active subscription with the right params
return
}
}
this.subscription = this.props.subscribeToData(newProps)
}}
render () {
if (this.props.data.loading) {
return (<div>Loading</div>)
}
var Entities = [];
for(var key in this.props.data) {
if(this.props.data[key] instanceof Array){
Entities = Entities.concat(this.props.data[key])
//console.log(this.props.data[key])
}
}
return (
<div className='w-100 flex justify-center bg-transparent db' >
<div className='w-100 db' >
{Entities.map((entity) =>
(
<EntityListView
user={this.props.user}
key={entity.id}
entityId={entity.id}
name={entity.name}
profilePic={(entity.profilePic)?entity.profilePic.uuid : this.props.defaultPic.uuid}
clickFunc={this.props.clickFunc}
/>
))}
</div>
</div>
)
}
}
Thanks to all who looked into this.
I got it to work by splitting up my queries as suggested by #nburk.
I was able to keep it modular by creating my own high order component.
If anyone is interested:
const Subscriber = (document, config) => {
return (WrappedComponent) => {
return class extends Component {
constructor(props) {
super(props)
this.state={}
this.subscription = null
}
componentWillReceiveProps(nextProps) {
console.log(nextProps)
if (!this.subscription && !nextProps.data.loading) {
console.log("Sucess")
let { subscribeToMore } = this.props.data
this.subscription = [subscribeToMore(
{
document: document,
updateQuery: (previousResult, { subscriptionData }) => {
console.log(subscriptionData)
var newResult = [subscriptionData.data[config.modelName].node].concat(previousResult[config.propName])
console.log(newResult)
return {
//"allItems"
[config.propName]: newResult,
}
},
onError: (err) => console.error(err),
}
)]
this.setState({});
}
}
render () {
if (this.props.data.loading) {
return (<div>Loading</div>)
}
return (
<WrappedComponent {...this.props} />
)
}
}
}
}
export default Subscriber
/*prop config = {
propName: "string", //allItems // from query
//so I do not have to parse the gql query (would have to recieve from parent)
modelName: "string" //Item
// from subscribe //so I do not have to parse the gql subscribe
}
*/
I now wrap my component like this:
export const LocationList = graphql(gql`...,
{options: (ownProps)=>({
variables: {
site: ownProps.site
}})})(
Subscriber(gql`...,
propName:"allLocations",
modelName:"Location",
)(EntityList))
Thanks
I have Angular 2 Search Pipe that filters against an array... Like this...
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'SearchPipe'
})
export class SearchPipe implements PipeTransform {
transform(value, args?): Array<any> {
let searchText = new RegExp(args, 'ig');
if (value) {
return value.filter(ocurrence => {
if ( ocurrence.nroCasoDegir ) {
return ocurrence.nroCasoDegir.search(searchText) !== -1;
}
});
}
}
}
But I always get the follow error...
ocurrence.nroCasoDegir.search is not a function
How can I solve it?
Thanks
This issue is just a typo, you meant indexOfnot search.
Try with this:
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'SearchPipe'
})
export class SearchPipe implements PipeTransform {
transform(value, args?): Array<any> {
let searchText = new RegExp(args, 'ig');
if (value) {
return value.filter(ocurrence => {
if ( ocurrence.nroCasoDegir ) {
return ocurrence.nroCasoDegir.indexOf(searchText) !== -1;
}
});
}
}
}