Feature/mobx setup

[aburd]

Description

Use mobx to:

• [x] Push item to an array
• [x] Filter item from an array
• [x] Update item in array
• [x] Update string (I've added this to Main.tsx. It's just an example and can be deleted later)
• [x] Update number (this can also be a boxed value like the string example above)
• [x] Update object

What issue does this address? (if any)

closes #22

More information

I followed this guide: https://dev.to/mitchkarajohn/working-with-react-context-providers-in-typescript-1fk0

• https://mobx.js.org/refguide/array.html

[aburd]

@scootyboots After our session, I've updated the description with a list of things that this PR has to demonstrate before moving forward. Feel free to knock out any.

[aburd]

@scootyboots Hey, we should do another session together. Just to go through this so you'll be able to know where you will need to look when building out parts of da app. I would say we should also maybe pair-program one small part of the app together, just to give you a firmer grasp on the concepts necessary to build larger apps.

Please let me know if you have any questions at all. Don't feel like you can't ask.

[scootyboots]

@aburd heeeeey got the bio to work, but it's just using the Field component. Got profile photo to update and added a new component for sign up.

Is it time to get mobx into master? I say with hard nipples

[scootyboots]

@aburd I tried adding a boolean to the profile object and I was getting a TS error something about how type 'any' cannot be used with type 'never' or something. I made the assumption that the changes to the object made it no longer a "plain object" (whatever that means) and so was no longer observable.

So I tried changing from an observable Map, but got stuck pretty quickly.

I then tried changing it to an observable box which is where the branch is currently at. I feel like it should work, but when I access appStore.profile from the component I can only access the methods from the observable .get, .set, .etc so it's cleary very much so not working.

...help?

[aburd]

@scootyboots mcdoodyboots

I tried adding a boolean to the profile object and I was getting a TS error something about how type 'any' cannot be used with type 'never' or something.

This is a very very strange error message, but TS gives the never type in this case because Typescript cannot ever know what is possibly allowed in this case.

will compile

interface MyInterface {
  foo: string
  bar: string
}

const myInterface: MyInterface = { foo: 'scooty', bar: 'boots' }

// keyof MyInterface => 'foo' | 'bar'
function modifyMyInterface(key: keyof MyInterface, val: string) {
  // this is ok because no matter what key, TS knows that strings are ok
  // and it knows val is a string
  myInterface[key] = val
}

Will not compile

interface MyInterface {
  foo: string
  bar: string
  isCool: boolean
}

const myInterface: MyInterface = { foo: 'scooty', bar: 'boots', isCool: true }

// keyof MyInterface => 'foo' | 'bar' | 'isCool'
function modifyMyInterface(key: keyof MyInterface, val: string) {
  // typescript knows that myInterface[key] needs either a string or a bool
  // BUT it doesn't know which one YOU will pass, therefore it cannot evaluate whether the code is ok
  // you could pass key: 'isCool', val: 'uhoh' and it would fuck up the object
  // therefore, TS can only say that this is an  unknowable situation, hence, `never`
  myInterface[key] = val
}

You can read more about it here if you're interested, this is where I learned about above: https://github.com/microsoft/TypeScript/issues/32375

The key here is to keep everything the same as before (use observable.object()), but don't try to make this kind of function with the keyof crap that I did. It's better just to assign everything directly in the Profile component without make a special method like I did. If you give the specific key and the value, then Typescript will always know the types and it will work out.

I actually fixed it, but I didn't want to give you the answer so to speak, so I didn't commit to this branch. Try again with my advice, and if you get stuck, go ahead and checkout my branch below: feature/mobx-setup-profile

[scootyboots]

@aburd Aaaah is see, thanks that's helpful. I tried setting it up by putting the method on the profile object without using key of, but was just running into different TS errors. At least I learned how to declare the types for a function on an interface hehe

Thanks for setting up that branch, makes sense just update the profile store from a function in the component, I was working on some assumption that we'd need to have the method come from the store. I'll go ahead and try to implement something like that.

[aburd]

I'm going to refactor this to use decorators with mobx today. I've heard they're much easier to understand.

[aburd]

Ok, so there is no decorator support for create-react-app, so I'm going to just try and clean up the AppStore

[aburd]

@scootyboots Hey nice work the Profile component. Even when I switched over to decorator, it seems like everything is still working.

Ok, basically to summarize,

1. we can use the decorate method to wrap stores
   • There are no more confusing methods to remember like observable.box, observable.array, etc
2. When you add a property to a store, you can just type the variable like normal

before:

wordOfTheDay = observable.box<string>('FARTS')

after

wordOfTheDay: string = 'FARTS'

3. When you want to update the state, just use the equal sign.