We Keep Coding

How to type the function responsible for the transition between the page

i have a problem. I'm beginner learn typescript and write code for SPA App
There is a Class for navigating between pages, the question is how to add types correctly so that it all works (everything works on pure js)
It should work depending on the mode of the class specified when calling the instance, the functionality was not checked on the typescript
interface IOption {
mode: string;
root: string;
}
class Router {
public routes: {
path: string;
cb: {
cb: string;
apply(param: {}, match: RegExpMatchArray): void;
};
}[] = [];
public mode!: string;
public root: string = '/';
public current: string = '';
constructor(options: IOption) {
// this.mode = window.history.pushState ? 'history' : 'hash';
// How correct is it to do so?
if (this.mode === 'history') {
window.history.pushState(null, '', this.root);
} else {
window.location.href = `${window.location.href.replace(/\?(.*)$/, '')}#`;
}
if (options.mode) this.mode = options.mode;
if (options.root) this.root = options.root;
this.listen();
}
add({path, cb}: {path: string; cb: never}) {
this.routes.push({
path,
cb,
});
return this;
}
remove(path: string) {
for (let i: number = 0; i < this.routes.length; i++) {
if (this.routes[i].path === path) {
this.routes.splice(i, 1);
return this;
}
}
return this;
}
flush() {
this.routes = [];
return this;
}
removeSlashes(path: string): string {
return path.replace(/\/$/, '').replace(/^\//, '');
}
getFragment() {
let fragment = '';
if (this.mode === 'history') {
fragment = this.removeSlashes(decodeURI(window.location.pathname + window.location.search));
fragment = fragment.replace(/\?(.*)$/, '');
fragment = this.root !== '/' ? fragment.replace(this.root, '') : fragment;
} else {
const match = window.location.href.match(/#(.*)$/);
fragment = match ? match[1] : '';
}
return this.removeSlashes(fragment);
}
navigate(path: string = '') {
if (this.mode === 'history') {
window.history.pushState(null, '', this.root + this.removeSlashes(path));
} else {
window.location.href = `${window.location.href.replace(/#(.*)$/, '')}#${path}`;
}
return this;
}
listen() {
clearInterval(this.interval as keyof typeof this.interval);
this.interval = setInterval(this.interval, 50);
// TS2322: Type 'Timer' is not assignable to type '() => void'.   Type 'Timer' provides no match for the signature '(): void'.
}
interval() {
if (this.current === this.getFragment()) return;
this.current = this.getFragment();
this.routes.some((route) => {
const match = this.current.match(route.path);
if (match) {
match.shift();
route.cb.apply({}, match);
return match;
}
return false;
});
}
}
i not use type any ( any === error )

angular listen for changes

NgOnChanges update table when changes is detected causes infinite service call , which I dont have any idea why. Maybe someone can help. Thanks.
I have parent component TableMultiSortComponent and I passed output EventEmitter which is the table data .
The event or the output from EventEmitter is passed to child component which I will use the pagesize , pageindex etc to query as you can see on the dataServiceEvent on the child component.
And then the output of the request is dealsListData which I pass back from child to parent as data to be populated to the table.
It should update table when there is changes that is why I put it on ngOnchanges which is the initTableMultiSort but right now it is updating the table infinitely , it should only update once if there is changes
#the table data that I am passing from parent component to child component , this.dataServiceEvent.emit(this.table); , this is what I emit cause I will be needing the pageindex, size etc.
#HTML CODE - Parent Component
<mat-card *ngIf="table !== undefined">
<mat-table mat-table [dataSource]="table.dataSource" matMultiSort (matSortChange)="table.onSortEvent()">
<ng-container *ngFor="let column of table.columns" [matColumnDef]="column.id">
<mat-header-cell class="table-multi-sort-header" *matHeaderCellDef [mat-multi-sort-header]="column.id">
<div>{{column.name}}</div>
<div class="sub-text">{{getColumnSubtitle(column.id)}}</div>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<ng-container *ngIf="column.id !== 'action'; then col; else actionCol"></ng-container>
<ng-template #col>
<app-table-multi-sort-cell-default [cellData]="row" [id]="column.id" [subId]="getColumnSubId(column.id)"></app-table-multi-sort-cell-default>
</ng-template>
<ng-template #actionCol>
<app-table-multi-sort-cell-action [rowData]="row" [actions]="getActions(column.id)" (actionClickEvent)="clickTableAction($event,row)"></app-table-multi-sort-cell-action>
</ng-template>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="table.displayedColumns; sticky:true"></mat-header-row>
<mat-row *matRowDef="let item; columns: table.displayedColumns;"></mat-row>
</mat-table>
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
</mat-card>
#ts code- parent component
export class TableMultiSortComponent implements OnInit {
#Input() tableOptions:any;
#Input() tableData:any = [];
#Input() isClientSide:boolean = false;
#Input() isLoading: boolean = false;
#Output() tableActionsEvent = new EventEmitter<any>();
#Output() dataServiceEvent = new EventEmitter<any>() ;
#ViewChild(MatMultiSort, { static: false }) sort: MatMultiSort;
tableConfig: any = TABLE_MULTI_SORT_OPTIONS.DEFAULT;
table:TableData<any>;
displayedColumns: any;
constructor() { }
ngOnInit(): void {
this.initTableMultiSort();
}
initTableMultiSort(){
this.tableConfig = {
...this.tableConfig,
...this.tableOptions
}
this.table = new TableData<any>(this.tableConfig.columns,this.tableConfig.sortParams);
this.table.pageSize = this.tableConfig.pageSize;
this.table.pageIndex = this.tableConfig.pageIndex;
this.table.nextObservable.subscribe(() => { this.getData(); });
this.table.sortObservable.subscribe(() => { this.getData(); });
this.table.previousObservable.subscribe(() => { this.getData(); });
this.table.sizeObservable.subscribe(() => { this.getData(); });
setTimeout(()=>{
this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.isClientSide);
this.getData();
},0);
}
ngOnChanges(changes: SimpleChanges) {
if (changes.tableData && changes.tableData.currentValue){
console.log("changes" , changes)
this.initTableMultiSort()
}
}
getData(){
this.table.totalElements = 1;
this.table.pageIndex = 0;
this.table.pageSize = 10;
this.table.data = this.tableData;
if(this.dataServiceEvent) {
this.dataServiceEvent.emit(this.table);
}
}
#child component HTML code
<app-table-multi-sort (dataServiceEvent)="dataServiceEvent($event)" [tableOptions]="tableOptions" [tableData]="dealsListData" (tableActionsEvent)="tableActions($event)"></app-table-multi-sort>
#child component ts code
export class DealsTransactionComponent implements OnInit {
#Input() transactionId: any = 2;
#Input() transactionName: string = '-';
#ViewChild(TableMultiSortComponent, { static: true }) tableMultiSortComponent: TableMultiSortComponent;
private currentTableConfig: TableData<any>;
dealsListData: any;
tableOptions: any;
#Input() transaction: any;
isLoading: boolean;
private _destroyed$ = new Subject();
totalDeals : number;
accountId: any;
searchInput: string;
table: any;
constructor(
private dialog: MatDialog,
private dealService: DealService,
private notificationService: NotificationService,
private route: Router,
) {}
ngOnInit(): void {
const currentAccountDetails = localStorage.getItem('currAcct') as any;
if (currentAccountDetails) {
this.accountId = JSON.parse(currentAccountDetails).accountId;
}
this.tableOptions = {
columns:[
{id:'name',name:'Deal Name',subId:'type', subtitle:'Deal Type'},
{id:'annualRentProposed',name:'Annual Rent (Proposed)', subId: 'annualRentCurrent', subtitle:'Annual Rent (Proposed)'},
{id:'firmTermRemain',name:'Firm Term Remaining', subId: 'firmTermAdded', subtitle:'(Current)'},
{id:'maxTerm',name:'Max Available Term'},
{id:'cash',name:'Cash Contribution'},
{id:'action', name: 'Actions', actions:[
{icon:'file_copy', name:'Copy', class:'primary-color'},
{icon:'delete', name: 'Delete', class:'mat-error'},
{icon:'forward', name: 'For Approval', class:'primary-color'}
]}
]
}
}
dataServiceEvent(item) {
this.table = item;
if(this.table) {
this._pageEventMyList();
}
}
private _pageEventMyList() {
if (!this.shouldLoadData(this.currentTableConfig, this.table)) {
return;
}
this.currentTableConfig = this.table;
this.searchInput = '';
this.isLoading = true;
this.dealService
.getAllDeals(
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe({
error: (err) => this.notificationService.showError(err),
next: (res) => {
this.dealsListData = res.totalItemCount;
this.dealsListData = res.lastItemOnPage;
this.totalDeals = res.items.length;
this.dealsListData = res.items;
console.log("this.dealsListData" , this.dealsListData)
},
complete: noop,
});
}
private shouldLoadData(oldTableConfig: TableData<any>, tableConfig: TableData<any>): boolean {
if (!oldTableConfig) {
return true;
}
return oldTableConfig.pageIndex !== tableConfig.pageIndex
|| oldTableConfig.pageSize !== tableConfig.pageSize
|| oldTableConfig.sortParams !== tableConfig.sortParams
|| JSON.stringify(oldTableConfig.sortParams) !== JSON.stringify(tableConfig.sortParams)
|| JSON.stringify(oldTableConfig.sortDirs) !== JSON.stringify(tableConfig.sortDirs);
}
createDeal() {
this.route.navigateByUrl(`deals/detail/${this.transactionId}~create`, {
state: { data: this.transaction },
});
localStorage.removeItem('breadCrumbsPath');
const breadCrumbsPath = [
{
text: 'My transactions',
link: '/transactions',
},
{
text: this.transactionName,
link: `/transactions/overview/${this.transactionId}`,
},
];
localStorage.setItem('breadCrumbsPath', JSON.stringify(breadCrumbsPath));
}
copyDeal(id: number) {
const data = { id : id }
this.duplicateDeal(data)
}
deleteDeal(id: number) {
this.isLoading = true;
this.dealService.delete(id)
.pipe(finalize(() => { this.isLoading = false;}))
.subscribe({
next: (res) => {
this.dealsListData = this.dealsListData.filter((x) => x.id !== id);
this.notificationService.showSuccess('Deal been removed successfully.');
},
error: (err) => {
this.notificationService.showError('Something went wrong, Try again later.');
this.isLoading = false;
},
complete: () => {
this.isLoading = false;
},
});
}
duplicateDeal(data: any) {
this.isLoading = true;
this.dealService.duplicate(data)
.pipe( finalize(() => { this.isLoading = false;}))
.subscribe({
next: (res) => {
let copyData = {
...this.dealsListData.filter((x) => x.id === data.id),
};
copyData.name = copyData.name + '(copy)';
copyData.id = this.dealsListData[this.dealsListData.length - 1].id + 1;
this.notificationService.showSuccess('Deal was successfully duplicated.' );
},
error: (err) => {
this.notificationService.showError('Something went wrong, Try again later.');
this.isLoading = false;
},
complete: () => {
this.isLoading = false;
},
});
}
approveDeal(data: any) {
this.isLoading = true;
this.dealService
.approve(data)
.pipe(finalize(() => { this.isLoading = false; }))
.subscribe({
next: (res) => {
this.notificationService.showSuccess('Deal was approved');
},
error: (err) => {
this.notificationService.showError('Something went wrong, Try again later.');
this.isLoading = false;
},
complete: () => {
this.isLoading = false;
},
});
}

You are emitting this.table whenever you call getData in the TableMultiSortComponent which happens in ngOnInit for the first time.
This event emission (I suppose) triggers the actual data fetch in the parent component, in the tableActions method (could not see the implementation of this method in the code you included). This method is probably doing something similar to _pageEventMyList that gets data from the API and sets the dealsListData property on the TableMultiSortComponent ([tableData]="dealsListData").
This in turn, triggers your onChange in the TableMultiSortComponent and also passes your if check (the tableData is actually changed). From onChange, you call initTableMultiSort that reinitializes this.table and emits it with this.dataServiceEvent.emit(this.table);. This makes all go into a cycle.
I recommend to implement some extra checks to make sure you are not triggering data reload if the table configuration is the same.
In short, it looks like you use the table for providing you data about the pageIndex, pageSize, sortParams and sortDirs, so I suggest to keep information about the value of these properties when you try to load data again. Compare them, and if something is changed, then fetch data
private currentTableConfig: TableData<any>;
private _pageEventMyList() {
if (!shouldLoadData(currentTableConfig, this.table)) {
return;
}
this.currentTableConfig = this.table;
this.searchInput = '';
this.isLoading = true;
this.dealService
.getAllDeals(
this.accountId,
this.transaction.id,
this.table.pageIndex + 1,
this.table.pageSize,
this.searchInput,
this.table.sortParams,
this.table.sortDirs
)
.pipe(finalize(() => (this.isLoading = false)))
.subscribe({
error: (err) => this.notificationService.showError(err),
next: (res) => {
this.dealsListData = res.totalItemCount;
this.dealsListData = res.lastItemOnPage;
this.totalDeals = res.items.length;
this.dealsListData = res.items;
},
complete: noop,
});
}
and the new shouldLoadData method performs the checks:
private shouldLoadData(oldTableConfig: TableData<any>, tableConfig: TableData<any>): boolean {
if (!oldTableConfig) {
return true;
}
return oldTableConfig.pageIndex !== tableConfig.pageIndex
|| oldTableConfig.pageSize !== tableConfig.pageSize
|| JSON.stringify(oldTableConfig.sortParams) !== JSON.stringify(tableConfig.sortParams)
|| JSON.stringify(oldTableConfig.sortDirs) !== JSON.stringify(tableConfig.sortDirs);
}
Disclaimer for using JSON.stringify:
This works, but it is not optimal. If you have another third party library installed, like lodash, you can go for _.isEqual instead (or something similar, that will compare the array contents for you).

Clearcache is not defined

I created this script, however the cache cleaning warning appears in the debug console which is not defined. How can I solve it?
I uploaded the code here https://codepen.io/stiac/pen/ExPjgwe
class NotificationBanner {
constructor(el) {
this.storageKey = 'notifications'
this.el = el
this.id = this.el.dataset.id
this.el.querySelector(".closebutton").onclick = () => this.close()
this.showUnlessDismissed()
}
show() {
this.el.hidden = false
}
close() {
this.el.remove()
this.updateLocalStorage()
}
showUnlessDismissed() {
if(this.getLocalStorage().includes(this.id)) {
this.close()
}
else {
this.show()
}
}
updateLocalStorage() {
const dismissedNotifications = this.getLocalStorage()
if(!dismissedNotifications.includes(this.id)) {
dismissedNotifications.push(this.id)
localStorage.setItem(this.storageKey, JSON.stringify(dismissedNotifications))
}
}
getLocalStorage() {
return JSON.parse(localStorage.getItem(this.storageKey)) || []
}
}
class NotificationBanners {
constructor() {
const notifications = [...document.querySelectorAll(".notification-banner")];
notifications.forEach(function(notification) {
return new NotificationBanner(notification);
})
}
}
new NotificationBanners()
clearcache.onclick = e => localStorage.setItem('notifications', JSON.stringify([]))
It is a script to hide a message. I wish I could set a deadline to make it appear after a few days.

Variable is undefined in p5.js when used with angular?

I am learning WebGL and started developing an Sketch app using p5.js and angular. I have defined boolean variables in the component file so that based on that i want to trigger specific function like ellipse, rectangle, line etc in the draw function. These boolean variables are managed by buttons in another component.
I am getting error as core.js:6014 ERROR TypeError: Cannot read property 'isRectangleMode' of undefined
Component file:
import { Component, OnInit } from '#angular/core';
import * as p5 from 'p5';
import { Subscription } from 'rxjs';
import { HomeService } from '../home.service';
#Component({
selector: 'app-doodle-area',
templateUrl: './doodle-area.component.html',
styleUrls: ['./doodle-area.component.css']
})
export class DoodleAreaComponent implements OnInit {
private p5Init : any;
modeSubs : Subscription;
modeSelected : string = null;
isCircleMode : boolean = false;
isEllipseMode : boolean = false;
isRectangleMode : boolean = false;
isLineMode : boolean = false;
isPointMode : boolean = false;
isBrushMode : boolean = false;
isPenMode : boolean = false;
constructor(private homeService : HomeService) { }
ngOnInit() {
this.createCanvas();
this.homeService.modeSelected
.subscribe(modeSelected => {
this.modeSelected = modeSelected;
console.log(this.modeSelected);
if(this.modeSelected) {
this.modeReset();
if(this.modeSelected === "circle") {
this.isCircleMode = true;
} else if(this.modeSelected === 'ellipse') {
this.isEllipseMode = true;
} else if(this.modeSelected === 'rectangle') {
this.isRectangleMode = true;
} else if(this.modeSelected === 'line') {
this.isLineMode = true;
} else if(this.modeSelected === 'point') {
this.isPointMode = true;
} else if(this.modeSelected === 'brush') {
this.isBrushMode = true;
} else if(this.modeSelected === 'pen') {
this.isPenMode = true;
}
}
});
}
private modeReset() {
this.isCircleMode = false;
this.isEllipseMode = false;
this.isRectangleMode = false;
this.isLineMode = false;
this.isPointMode = false;
this.isBrushMode = false;
this.isPenMode = false;
}
private createCanvas() {
this.p5Init = new p5(this.doodleArea);
}
private doodleArea(p : any) {
p.setup = () => {
p.createCanvas(p.windowWidth - 440, p.windowHeight - 200).parent('doodle-area');
p.background(206,214,224);
p.createP("Hello");
}
p.draw = () => {
if(this.isRectangleMode) {
console.log("Rectangle");
}
p.stroke(0);
if(p.mouseIsPressed === true) {
p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
}
}
}
}
Screenshot of the console:

This is issue is because of the scope. Here inside the callback function doodleArea, the scope is not component scoped (this). Here this is undefined and we can not access isRectangleMode of undefined. The possible solution for this is:
In .ts modify the createCanvas() with code given below:
private createCanvas() {
const doodleArea = s => {
s.setup = () => {
let canvas = s.createCanvas(s.windowWidth - 440, s.windowHeight - 200);
canvas.parent("doodle-area");
s.draw = () => {
if (this.isRectangleMode) {
console.log("Rectangle");
}
s.stroke(0);
if (s.mouseIsPressed === true) {
s.line(s.mouseX, s.mouseY, s.pmouseX, s.pmouseY);
}
};
s.keyPressed = () => {
if (s.key === 'c') {
window.location.reload();
}};};
};
this.p5Init = new p5(doodleArea);
}
Below is the sample code of the same:
https://stackblitz.com/edit/angular-s-p5-angular?file=src%2Fapp%2Fapp.component.ts
https://angular-s-p5-angular.stackblitz.io
Hope this will help.

ReferenceError: Error #1056: Cannot create property com.facebook.graph.core:AbstractFacebook::oauth2 on com.facebook.graph.Facebook

First I would like to say I have been trying to get this to work for over a year. I have tried a majority of the tutorials offered online. I ended up literally copying a template I found online and I still can't get this to work. I have a bunch of files I'll post the main two. Can someone please tell my how to fix this error message? I don't mean to plagiarize, If I can just get this to work, I can work on my own based off a working example.
MainGameFile.as
package {
import com.adobe.serialization.json.JSON;
import com.facebook.graph.Facebook;
import flash.display.Loader;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.MouseEvent;
import flash.net.URLRequest;
public class FlashMobileWeb extends Sprite {
protected static const APP_ID:String = "647743112027883"; //Your App Id
protected static const APP_URL:String = "https://localhost:3000/";
protected var profilePic:Loader;
public function FlashMobileWeb() {
var accessToken:String;
if (loaderInfo.parameters.accessToken != undefined) {
accessToken = String(loaderInfo.parameters.accessToken); //get
the token passed in index.php
}
Facebook.init(APP_ID, onInit, null, accessToken);
loginBtn.addEventListener(MouseEvent.CLICK, handleLoginClick, false, 0, true);
callBtn.addEventListener(MouseEvent.CLICK, handleCallClick, false, 0, true);
profilePic = new Loader();
profilePic.contentLoaderInfo.addEventListener(Event.INIT, handleProfilePicInit, false, 0, true);
profilePic.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, handleProfilePicIOError, false, 0, true);
profileHolder.addChild(profilePic);
}
protected function onInit(response:Object, fail:Object):void {
if (response) {
outputTxt.appendText("Logged In\n");
loginBtn.label = "Logout";
} else {
outputTxt.appendText("Click to Login\n");
loginBtn.label = "Login";
}
}
protected function handleLoginClick(event:MouseEvent):void {
if (loginBtn.label == "Login") {
var redirectUri:String = APP_URL; //Your App URL as specified in facebook.com/developers app settings
var permissions:Array = ["user_photos", "user_location"];
Facebook.mobileLogin(redirectUri, "touch", permissions);
} else {
outputTxt.appendText("LOGOUT\n");
Facebook.mobileLogout(APP_URL); //Redirect user back to your app url
}
}
protected function onLogout(response:Object):void {
loginBtn.label = "Login";
outputTxt.text = "";
}
protected function handleCallClick(event:MouseEvent):void {
Facebook.api("/me", onApiCall);
}
protected function onApiCall(response:Object, fail:Object):void {
if (response) {
outputTxt.appendText("RESPONSE:\n" + JSON.encode(response) + "\n");
var req:URLRequest = new URLRequest(Facebook.getImageUrl(response.id, "square"));
profilePic.load(req);
profileHolder.nameTxt.text = response.name + "\n";
if (response.location != null) { profileHolder.nameTxt.appendText(response.location.name); }
}
}
protected function handleProfilePicInit(event:Event):void {
profilePic.x = 1;
profilePic.y = profileHolder.height - profilePic.height >> 1;
}
protected function handleProfilePicIOError(event:IOErrorEvent):void {
outputTxt.appendText("Error Loading Profile Pic\n");
}
}
}
AbstractFacebook.as
package com.facebook.graph.core {
import com.facebook.graph.data.FacebookSession;
import com.facebook.graph.net.FacebookRequest;
import flash.net.URLRequestMethod;
import flash.utils.Dictionary;
public class AbstractFacebook {
protected var session:FacebookSession;
protected var openRequests:Dictionary;
public function AbstractFacebook():void {
openRequests = new Dictionary();
}
protected function api(method:String,
callback:Function = null,
params:* = null,
requestMethod:String = 'GET'
):void {
method = (method.indexOf('/') != 0) ? '/'+method : method;
if (session != null) {
if (params == null) { params = {}; }
params.access_token = session.accessToken;
}
var req:FacebookRequest = new FacebookRequest(
FacebookURLDefaults.GRAPH_URL,
requestMethod
);
openRequests[req] = callback;
req.call(method, params, handleRequestLoad);
}
protected function handleRequestLoad(target:FacebookRequest):void {
var resultCallback:Function = openRequests[target];
if (resultCallback === null) {
delete openRequests[target];
}
if (target.success) {
var data:Object = ('data' in target.data) ? target.data.data : target.data;
resultCallback(data, null);
} else {
resultCallback(null, target.data);
}
delete openRequests[target];
}
protected function callRestAPI(methodName:String,
callback:Function = null,
values:* = null,
requestMethod:String = 'GET'
):void {
if (values == null) { values = {}; }
values.format = 'json';
if (session != null) {
values.access_token = session.accessToken;
}
var req:FacebookRequest = new FacebookRequest(
FacebookURLDefaults.API_URL,
requestMethod
);
openRequests[req] = callback;
req.call('/method/' + methodName, values, handleRequestLoad);
}
protected function fqlQuery(query:String, callback:Function):void {
callRestAPI('fql.query', callback, {query:query});
}
protected function deleteObject(method:String, callback:Function = null):void {
var params:Object = {method:'delete'};
api(method, callback, params, URLRequestMethod.POST);
}
protected function getImageUrl(id:String, type:String = null):String {
return FacebookURLDefaults.GRAPH_URL
+ '/'
+ id
+ '/picture'
+ (type != null?'?type=' + type:'');
}
}
}