Frontend: "Hello world" for our persistent data

[plocket]

• [ ] Try to get a standard Epic Stack SQLite database going on your local.
• Advise on how to turn on the home-energy-analysis-tool SQL lite piece:
  • [ ] I suggest choosing any one model in standard Epic Stack to do a CRUD action from an Remix action().
  • [ ] Perhaps start into #124 which has had a lot of planning done. See heat-stack/types/index.ts

Existing npm run prisma:studio output on home-energy-analysis-tool but it may be slightly broken:

Current error when you click on one in home-energy-analysis-tool:

[jkoren]

Hi @thadk I am looking at this ticket. Since there is no back end, trying to understand where persistent data is being stored.

Does persistent data refer to the csv's such as Breslow natural-gas.csv

[thadk]

@jkoren Epic Stack and Remix host a javascript-based backend that access a SQL-based LiteDB/SQLite database via Prisma ORM, typically in the backend-based special loader function in Remix JSX files. The loader is great when you want to respond to a <form action/> or GET request.

Here's an example where it queries the database to show all the users:

https://github.com/epicweb-dev/epic-stack/blob/00c44b6bddf8da3b8c6594ffaede7a7b0c0765a4/app/routes/users%2B/index.tsx#L26-L39

If we wanted to access this route via our root.tsx, I think we just need to reintroduce children into our body.

[thadk]

@jkoren Then, for each user, thenatural-gas.csv might be stored in a table with a key associated with that user's entry in the user table in order to calculate their correct heat-pump size.

We had an idea of getting everything working in the browser before incorporating any persistence of this kind of data. Not sure if that'll end up being the best way forward or not.

[jkoren]

If we still want to get everything working in the browser before incorporating any persistence, se should hold off on this ticket for now.

[thadk]

This is open to take now! Welcome.

[McCambley]

I'm happy to take this on! I've got an epic-stack "Hello, World!" going on and will try to get some CRUD stuff going on there this week.

[McCambley]

Plan for Week of June 18th, 2024

H.E.A.T. Calc - Front End Room

• [ ] See existing error in the parent directory

• [ ] Create MockNotes
• [x] Create a simple button
• [ ] Send a POST request with that simple button
• [ ] Save hard-coded data to a MockNotes record

[McCambley]

Hoping to follow this how-to to create a CRUD functionality: https://davelarrabee.com/a-simple-crud-app-in-remix

[McCambley]

Work done June 15th

heat-stack-db in ./heat-stack-db

Note: Make sure you have your .env set up before running npm run dev or any prisma migrations. Jake didn't copy .gitignore file into the repo initially so we all might have to sync up on some secret files and such on a Tuesday.

1. Create a button in app/routes/_marketing+/index.tsx
2. Create a new MockNotes model in prisma/schema.prisma
3. Update database with new schema. Locally, npx prisma generate then npx prisma migrate dev(Camden and Jake aren't yet sure how these migrations happening in the cloud)
4. Create server action to POST a new MockNote
5. POST occurs in the /app/components/mock-heat-stack-form.tsx button
6. POST is handled in app/routes/mock_notes/index.tsx and returns all previous notes created

Using this, we can hook into the action found in heat-stack/app/routes/_heat+/single.tsx and interact with our Prisma client. On save, we can POST data to a not-yet-made table of user-form-data. On page load, we can load the most recent saved form-data associated with the logged in user 🎉

Out of scope... for now: Testing this in the cloud to see if the migrations run themselves or if we need to set up any custom CI/CD to run these migrations, or SSH into a fly.io server... or something like that. What am I? A DevOps expert?!

After talking with @plocket on Tuesday, this is a little bit of a more convoluted way to go about how Remix does things, which is to colocate client and server logic all in one place, and then split them up at compile time. This is to say, the button's onClick handler could have just used the Prisma client directly! How about that?!

Here's an example of the above, a component using the Prisma client directly

https://github.com/codeforboston/home-energy-analysis-tool/blob/d337111dce965539a5fec0807b955a16dcc8a236/heat-stack-db/app/root.tsx#L82-L100

[McCambley]

Here is the commit relevant to replicating the process of creating a table with prisma and sqlite, then using remix actions to persist data in the database: https://github.com/codeforboston/home-energy-analysis-tool/commit/d337111dce965539a5fec0807b955a16dcc8a236

Note: As mentioned in the above comment, this is a little convoluted, we could have colocated all the action code with the button... but we didn't... don't follow these directions to a tee, but do take note of how the migrations were structured and whatnot. the "backend" code is correct.