Description
As part of the POST Flash course conversions project, we are building a new e-learning course framework in React.
Info
Processes
Related
Links
Current Progress
2021-12-07
Today has been fighting tools, especially TypeScript. I think I have those bits taken care of, but the global context is no longer working the way it did. (That’s how it appears anyway.). Images are not loaded into context before the image atom is trying to pull them out to load the images.
2021-12-03
After splitting out the modal and replacing the built-in modal with it, I’m now getting this error in Safari: undefined is not an object (evaluating 'images.files')
The line that triggers the error doesn’t have that reference, so there’s something broken there. I probably need to evaluate in Chrome. The images I believe the error is referring to is either set via props (which we are not doing here) or pulling from context. That was working before, so I think it has to be some problem in the modal that’s causing this. Can’t imagine what in the modal would cause the image component to break though.
2021-11-30
Had a major problem in which I was getting an error trying to install the dm-gatsby-atom-image dependency in dm-gatsby-molecule-media. It was giving me this error on the install:
npm ERR! npm ERR! code 128
npm ERR! npm ERR! An unknown git error occurred
npm ERR! npm ERR! command git --no-replace-objects checkout ae86958fe2dc306026a6bf452d7e7f8de846e998
npm ERR! npm ERR! fatal: reference is not a tree: ae86958fe2dc306026a6bf452d7e7f8de846e998
I tried a ton of different fixes. The one that ultimate worked was to delete the package-lock.json in the image atom, clear the NPM cache with npm cache clean --force, and run npm install again to rebuild the package-lock.json. The old version of that file referenced a commit in a different dependency (dm-gatsby-context) that I had force pushed and overwritten.
Next steps are to continue the work on the media molecule and swap that into the course.
2021-09-27
I learned that I have to import chai-dom to register the types. (I had been just requiring it in my chai.use call, i.e., chai.use(require('chai-dom');).
Now, I’m having trouble checking if the image component returns another component when we give it just an image file. I tried spying on React.createElement, but that seems to only get the initial call for the component under test. I’m not sure why it’s not called again when the GatsbyImage element is returned but that does seem to be the case.
I’ll try adding Enzyme and see if that lets me do the testing I want to do.
2021-09-24
Scot got some components created. I’m circling back on them to add testing. They all need to have filenames changed so that they build to index.js.
I’ve started writing tests for the image atom. I installed chai-dom to make DOM-related assertions easier. I installed the types for the library as well, but typescript still doesn’t like my chaining the attribute method.
2021-09-17
I’m having an issue getting the correct component path from getTemplateComponentPath in utils.ts for the layout component, despite passing a valid component path. I get back the error component path (which is the fallback) every time.
I haven’t tested against a component path or name for one of the screens, so this may be a universal issue. The function itself passes tests as expected though and returns the correct value based on the value passed into it.
2021-09-15
I finally got my module working. I ended up passing just paths into the module from the course and using the module to load the appropriate files from those paths. It also required installing Gatsby and gatsby-plugin-image as dependencies of the course. The others seem to be fine coming in via the framework. It may be challenging to find a way to make sure the correct versions of those are installed as we’re updating the framework.
I implemented Typescript and got it compiling automatically on the framework itself. It wasn’t too difficult. I also added some typing to the code I had already written. I haven’t yet typed everything. We probably need to implement some typing around our course data. That’s going to be fairly painful since the data is so fluid.
2021-09-14
Working on modularizing, and I’m trying to start with gatsby-node.js and gatsby-config.js. I have those pulled out, but I’m still working through some issues. Current issue is that the code that’s loading the screen JSON is in the module and it’s trying to load those JSON files relative to its own directory. The data is in the main project directory thought. Would be nice if there was a way to call back to the parent’s directory from a node module, but I’m not sure there is.
Post-Mortem
Reflections on the project