Develop Reference

Giving Typescript classes access to React hooks state

I'm trying to make a game using React to display the UI elements and using Typescript classes to represent the state of the game.
Here are a few examples of the classes I'm using to represent my data:
export class Place extends Entity {
items: Item[];
npcs: NPC[];
location: LatLng | null;
onEnter: (...args: any[]) => any = () => {};
constructor(
name: string,
description: string,
location?: LatLng,
onEnter: (...args: any[]) => any = () => {},
items: Item[] = [],
npcs: NPC[] = []
) {
super(name, description);
this.items = items;
this.npcs = npcs;
this.location = location ? location : null;
this.onEnter = onEnter;
}
export class Item extends Entity {
url: string;
constructor(
name: string,
description: string,
actions = {},
url = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Question_mark_%28black%29.svg/1920px-Question_mark_%28black%29.svg.png"
) {
super(name, description);
this.url = url;
this.actions = actions;
}
}
export class NPC {
name: string;
description: string;
messages: Message[];
url: string;
timesTalkedTo = 0;
constructor(
name: string,
description: string,
url = "https://cdn.icon-icons.com/icons2/1378/PNG/512/avatardefault_92824.png",
messages: Message[] = []
) {
this.name = name;
this.description = description;
this.messages = messages;
this.url = url;
}
getMsg() {
console.log(this.messages);
if (this.messages.length > 1) {
for (var i = 1; i < this.messages.length; i++) {
const msg = this.messages[i];
if (msg["cond"] && msg["cond"]()) {
this.timesTalkedTo += 1;
return msg;
}
}
}
this.timesTalkedTo += 1;
return this.messages[0];
}
}
Later on, I store instances of these classes in hooks so I can display them using other components I've defined:
function UI() {
const [places, setPlaces] = useState({});
const [inventory, setInventory] = useState([]);
const [playerPlace, setPlayerPlace] = useState(outside);
const [playerLocation, setPlayerLocation] = useState(L.latLng([0, 0]));
...
My problem is that I wanted to define a class and functions like this inside my UI component, so I would be able to access the setState hooks and use the "drop" and "pick up" actions on any item I've defined as Droppable:
class Droppable extends Item {
dropped;
constructor(
name,
description,
actions = {},
dropped = true,
url = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Question_mark_%28black%29.svg/1920px-Question_mark_%28black%29.svg.png"
) {
super(name, description, actions, url);
this.dropped = dropped;
const drop = () => {
addToPlace(removeFromInventory(this));
this.dropped = true;
this.actions["pick up"] = pickUp;
delete this.actions["drop"];
};
const pickUp = () => {
addToInventory(removeFromPlace(this));
this.dropped = false;
this.actions["drop"] = drop;
delete this.actions["pick up"];
};
if (dropped) {
this.actions["pick up"] = pickUp;
} else {
this.actions["drop"] = drop;
}
}
}
const addToInventory = useCallback(
(item) => {
setInventory((inv) => [...inv, item]);
return item;
},
[setInventory]
);
const removeFromInventory = useCallback(
(item) => {
setInventory((inv) => inv.filter((i) => i !== item));
return item;
},
[setInventory]
);
const addToPlace = useCallback(
(item) => {
setPlaces((places) => {
return {
...places,
[playerPlace.name]: {
...playerPlace,
items: [...playerPlace.items, item],
},
};
});
return item;
},
[setPlaces, playerPlace]
);
const removeFromPlace = useCallback(
(item) => {
setPlaces((places) => {
const newPlace = { ...places[playerPlace.name] };
newPlace.items = newPlace.items.filter((i) => i !== item);
const newPlaces = [...places];
newPlaces[playerPlace.name] = newPlace;
return newPlaces;
});
return item;
},
[setPlaces, playerPlace]
);
However, when I try removing an item from the place it's in and adding it to the player's inventory (the "pick up" action), I find that, while it is successfully added to the inventory, it cannot be removed from the place, because the playerPlace state variable is stale. Even though setPlayerPlace had been called successfully and set the playerPlace to a place containing items, the value is still set to its initial empty Place, so there is an error when trying to access the items of that Place.
My guess is that these callbacks are not being updated properly according to the state because they are used inside the class that I defined, but I can't think of any other way to give methods inside the class easy access to the state variables.
Is it a bad idea to be using ordinary classes alongside React in this way? If so, what would be a better way to structure my app. If not, how can I give my classes access to the state inside my React components?

I would recommend moving the class outside of the component and then passing the setters and data to the class as parameters if you really want to use classes. You can also use a third-party state management library for this and then hook it together, but I don't think it's really worth it. Generally speaking, using classes for your state in react is an antipattern IMHO. Usually what I would do is just write types and then utility functions for those types if I need to encapsulate functionality. This has many benefits aside from working with react such as easily being able to serialize the data to JSON (they are now POJOs).

Vue.js + Triggerring methods of the independent class does not work in html

I have the below class. The functions of the class are not assigned to the data property 'this.gridFilter' when instantiated.
I am calling 'gridFilter.set' onclick of the list item which does not get triggered and I get the following error on the console 'Cannot read properties of undefined (reading '_withTask')' and nothing works.
This happens only when I call the 'set' function from the instantiated object.
How can I call the class functions from the Html file? Please help
class GridFilters
{
constructor(grid)
{
this.grid = grid;
this.filterError = false;
this.isShow = false;
this.currentFilter = '';
this.filters = {};
}
async loadFilters()
{
const query = `?$select=*&$filter=mastertable eq ${window.parent.Xrm.Page.data.entity.getId().replace(/[{}]/g, "")}&$orderby=ice_name asc`;
this.filters = await window.parent.Xrm.WebApi.retrieveMultipleRecords('filters', query);
return this.filters;
}
async set()
{
const grid = this.grid;
grid.$refs.overlay.classList.remove('customgrid-modal-hidden');
grid.$refs.filter.classList.remove('customgrid-modal-hidden');
}
}
export default {
data() {
return {
gridFilter : {};
};
},
methods: {},
created () {
this.gridFilter = new GridFilters(this);
}
};
//html
<li><a v-on:click="gridFilter.set"><img src="../Images/ICE.Filter.svg" title="Filter" /><span>Filter</span></a></li>

AngularFire2 update creates new document field instead of updating a field

I would like to update a Firestore model containing a profile name and a list of hashtags with Angular 6. The "name" is stored as the value of a document field and the "hashtags" are stored as the keys of an object. When I try to update the database entry, my program adds a new document field called "data" every time I call the update function instead of updating the existing fields.
How can I fix this?
This is how my firestore looks like before the update.
My update function adds a new "data" field instead of updating everytime I call it.
My Firestore Service:
export class MembersService {
membersCollection: AngularFirestoreCollection<Member>;
members$: Observable<Member[]>;
memberDoc: AngularFirestoreDocument<Member>;
constructor(public afs: AngularFirestore) {
this.membersCollection = afs.collection<Member>('Members');
this.members$ = this.membersCollection.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as Member;
const id = a.payload.doc.id;
return { data, id };
}))
);
}
getMembers(): Observable<Member[]> {
return this.members$;
}
updateMember(member: Member) {
this.memberDoc = this.afs.doc(`Members/${member.id}`);
this.memberDoc.update(member);
}
}
My input component.ts:
export class MembersComponent implements OnInit {
members: Member[];
editState: boolean;
membertoEdit: Member;
constructor(private membersService: MembersService) {
this.editState = false;
}
ngOnInit() {
this.membersService.getMembers().subscribe(members => {
this.members = members;
});
}
editMember(member: Member) {
this.editState = true;
this.membertoEdit = member;
}
clearState() {
this.editState = false;
this.membertoEdit = null;
}
submit(member: Member, editName: string, editHashtag: string) {
if ( editName !== '' && editHashtag !== '') {
this.membertoEdit.name = editName;
const key = editHashtag;
const object = {};
object[key] = true;
this.membertoEdit.hashtag = object;
this.membersService.updateMember(this.membertoEdit);
}
this.clearState();
}
}
My component.html for the user Input:
<button *ngIf="editState == false" (click)="editMember(member)">edit</button>
<div *ngIf="editState && membertoEdit.id == member.id">
<form>
<input type="text" #editName>
<input type="text" #editHashtag>
<button (click)="submit(member, editName.value, editHashtag.value);
editName.value=''">Submit</button>
</form>>
</div>

Found a solution: Even I don´t think it is elegant. It´s possible to pass every input on its own
updateMember(member: Member, editName: string, editHashtag: object) {
this.memberDoc = this.afs.doc(`Members/${member.id}`);
console.log(this.memberDoc);
this.memberDoc.update({
name: editName,
hashtag: editHashtag
});
}
submit(member: Member, editName: string, editHashtag: string) {
if ( editName !== '' && editHashtag !== '') {
const key = editHashtag;
const object = {};
object[key] = true;
this.membersService.updateMember(member, editName, object);
}
this.clearState();
}

How to track nested object in a MobX store

Let's stay I have this myObject loaded via an API call:
myObject = {
fieldA: { details: 'OK', message: 'HELLO' },
fieldB: { details: 'NOT_OK', message: 'ERROR' },
}
Only details and message of each field can change. I want this object to be observable in a MobX store (which properties? to be defined below). I have a simple React component which reads the two fields from the store:
#observer
class App extends Component {
store = new Store();
componentWillMount() {
this.store.load();
}
render() {
return (
<div>
{this.store.fieldA && <p>{this.store.fieldA.details}</p>}
{this.store.fieldB && <p>{this.store.fieldB.details}</p>}
</div>
);
}
}
I read this page trying to understand what MobX reacts to, but still didn't get a clear idea. Specifically, which of the 4 stores below would work, and why?
1/
class Store1 = {
#observable myObject = {};
#action setMyObject = object => {
this.myObject = object;
}
load = () => someAsyncStuff().then(this.setMyObject);
}
2/
class Store2 = {
#observable myObject = {};
#action setMyObject = object => {
this.myObject.fieldA = object.fieldA;
this.myObject.fieldB = object.fieldB;
}
load = () => someAsyncStuff().then(this.setMyObject);
}
3/
class Store3 = {
#observable myObject = { fieldA: {}, fieldB: {} };
#action setMyObject = object => {
this.myObject = object;
}
load = () => someAsyncStuff().then(this.setMyObject);
}
4/
class Store4 = {
#observable myObject = { fieldA: {}, fieldB: {} };
#action setMyObject = object => {
this.myObject.fieldA = object.fieldA;
this.myObject.fieldB = object.fieldB;
}
load = () => someAsyncStuff().then(this.setMyObject);
}

All of the above will work, except for solution 2.
That because as described in Mobx docs about objects:
When passing objects through observable, only the properties that
exist at the time of making the object observable will be observable.
Properties that are added to the object at a later time won't become
observable, unless extendObservable is used.
In the first solution you re-assign the object again with the properties already exist in the returned object.
In 3 and 4 you initialized the object with those 2 properties so it works.
Also I think in your component example you meant to use it like this (otherwise, it won't work in any way):
render() {
const { myObject } = this.store;
return (
<div>
{myObject && myObject.fieldA && <p>{myObject.fieldA.details}</p>}
{myObject && myObject.fieldB && <p>{myObject.fieldB.details}</p>}
</div>
);
}

MobX not setting observable properly in my class

I'm trying to make my react app as dry as possible, for common things like consuming a rest api, I've created classes that act as stores with predefined actions to make it easy to modify it.
Behold, big code:
import {autorun, action, observable} from 'mobx'
export function getResourceMethods(name) {
let lname = name.toLowerCase()
let obj = {
methods: {
plural: (lname + 's'),
add: ('add' + name),
addPlural: ('add' + name + 's'),
rename: ('rename' + name),
},
refMethods: {
add: ('add' + name + 'ByRef'),
addPlural: ('add' + name + 'sByRef'),
rename: ('rename' + name + 'ByRef'),
setRef: ('set' + name + 'Ref'),
},
fetchMethods: {
pending: (lname + 'Pending'),
fulfilled: (lname + 'Fulfilled'),
rejected: (lname + 'Rejected'),
}
}
return obj
}
class ResourceItem {
#observable data;
#observable fetched = false;
#observable stats = 'pending';
#observable error = null;
constructor(data) {
this.data = data;
}
}
class ResourceList {
#observable items = [];
#observable fetched = false;
#observable status = 'pending';
constructor(name) {
this['add' + name + 's'] = action((items) => {
items.forEach((item, iterator) => {
this.items.push(item.id)
})
})
}
}
class ResourceStore {
constructor(name, resourceItem, middleware) {
let {methods} = getResourceMethods(name)
this.middleware = middleware || []
let items = methods.plural.toLowerCase()
this[items] = observable({}) // <--------------- THIS DOES NOT WORK!
// Add resource item
this[methods.add] = action((id, resource) => {
let item = this[items][id], data;
if (item && item.fetched) {
data = item.data
} else {
data = resource || {}
}
this[items][id] = new resourceItem(data)
this.runMiddleware(this[items][id])
})
// Add several resource items
this[methods.addPlural] = action((resources) => {
resources.forEach((resource, iterator) => {
this[methods.add](resource.id, resource)
})
})
// Rename resource item
this[methods.rename] = action((oldId, newId) => {
let item = this[items][oldId]
this[items][newId] = item
if (oldId !== newId) {
delete this[items][oldId]
}
})
// Constructor ends here
}
runMiddleware(item) {
let result = item;
this.middleware.map(fn => {
result = fn(item)
})
return result
}
}
class ReferencedResourceStore extends ResourceStore {
#observable references = {}
constructor(name, resource, middleware) {
super(name, resource, middleware)
let {methods, refMethods, fetchMethods} = getResourceMethods(name)
let getReference = (reference) => {
return this.references[reference] || reference
}
this[refMethods.setRef] = action((ref, id) => {
this.references[ref] = id
})
this[refMethods.add] = action((ref, data) => {
this[methods.add](getReference(ref), data)
this[refMethods.setRef](ref, getReference(ref))
})
this[refMethods.rename] = action((ref, id) => {
this[methods.rename](getReference(ref), id)
this[refMethods.setRef](ref, id)
})
// *** Fetch *** //
// Resource pending
this[fetchMethods.pending] = action((ref) => {
this[refMethods.add](ref)
})
// Resource fulfilled
this[fetchMethods.fulfilled] = action((ref, data) => {
this[refMethods.add](ref, data)
this[refMethods.rename](ref, data.id)
let item = this[methods.plural][data.id];
item.fetched = true
item.status = 'fulfilled'
})
}
}
export {ResourceItem, ResourceList, ResourceStore, ReferencedResourceStore}
Now I'm just creating a simple user store:
class UserResource extends ResourceItem {
constructor(data) {
super(data)
}
#observable posts = new ResourceList('Posts')
#observable comments = new ResourceList('Comment')
}
// Create store
class UserStore extends ReferencedResourceStore {}
let store = new UserStore('User', UserResource)
And mobx-react connects just fine to the store, can read it as well. BUT, whenever I do any changes to the items (users in this case, the name of the property is dynamic) property, there are no reactions. I also noticed that in chrome, the object property does not have a "invoke property getter" in the tree view:

Didn't read the entire gist, but if you want to declare a new observable property on an existing object, use extendObservable, observable creates just a boxed observable, so you have an observable value now, but not yet an observable property. In other words:
this[items] = observable({}) // <--------------- THIS DOES NOT WORK!
should be:
extendObservable(this, {
[items] : {}
})
N.b. if you can't use the above ES6 syntax, it desugars to:
const newProps = {}
newProps[items] = {}
extendObservable(this, newProps)
to grok this: https://mobxjs.github.io/mobx/best/react.html
Edit: oops misread, you already did that, it is not hacky but the correct solution, just make sure the extend is done before the property is ever used :)

I found a hacky solution:
First off, use extendObservable instead (this is the correct solution) and then use a fresh version of the object and set it as the property.
let items = methods.plural.toLowerCase()
extendObservable(this, {
[items]: {}
})
// Add resource item
this[methods.add] = action((id, resource) => {
let item = this[items][id], data;
if (item && item.fetched) {
data = item.data
} else {
data = resource || {}
}
this[items][id] = new resourceItem(data)
this.runMiddleware(this[items][id])
this[items] = {...this[items]}
})
This works, not sure if there's a better solution.

Your options are using extendObservable or using an observable map.
For reference see the documentation of observable and specifically:
To create dynamically keyed objects use the asMap modifier! Only initially existing properties on an object will be made observable, although new ones can be added using extendObservable.