Study Set creation

[CeraStroh]

As a student, I want to create Study Sets so that I can study their content.

[CeraStroh]

Conditions of Satisfaction

• Users can add a title and a list of Terms and Definitions
• The new Study Set will display on the Home Page
• The new Study Set will be added to a database
• The database will be protected from SQL injection attacks
• An error will display if a user tries to have more than 50 Term-Definition pairs in a single Study Set
• An error will display if a user has more than 255 characters in a text input on a Study Set

Tasks

• [x] Create placeholder data (2)
• [x] Create /scripts/seed.js file (3)
• [x] Create a Title input at the top and pass user input to database (3)
• [x] Display a "Create" button at the bottom to submit the form (1)
• [x] Create card components with inputs for a Term and Definition, pass inputs to database (3)
• [x] Program createStudySet action with React Server Actions & SQL to mutate data and add the new Study Set to the database (4)
• [x] Create a Postgres database in Vercel (2)
• [x] Successfully seed the database with placeholder-data (2)
• [x] Use React Server Components to fetch data to display all Study Sets (2)

[CeraStroh]

PR #27 to develop branch on 3/1/24 PR #29 to develop branch on 3/1/24

PR #28 to main branch on 3/1/24 PR #30 to main branch on 3/1/24

[CeraStroh]

3/1 Progress

• Solved the "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ term: string; definition: string; }'." error in the forms
• Deployed app and created PostgresSQL database (limit of only 1 PostgresSQL database per Hobbyist account)
• Installed postgres, dotenv, and bcrypt dependencies
• Attempted to seed the database (npm run seed) but there are errors

[CeraStroh]

Dependencies, Packages, Libraries, Modules

• Dependencies
• StackOverflow

Libraries: just a bunch of code classes anyone can use. For example, React.js is a JavaScript library for building front end components

Software Development Kits (SDKs): sets of tools to build software for a particular platform. These tools also allow an app developer to build an app which can integrate with another program

Packages: packs with some features which fulfill some functionality of an app, using npm command (Node Package Manager) installs the package as a dependency in the app inside the package.json file along with its modules

Dependencies: all of the libraries an app depends on in order to run the way you expect it to run, similar to Modules, an object that consists of all the packages that are used in the project with its version number. So, whenever you install any library that is required in your project that library you can find it in the dependencies object

Modules: installed instances of the libraries that the app depends on, similar to Dependencies, stored inside the node_modules folder

[CeraStroh]

PR 31 to main to test createStudySet() PR 32 to revert PR 31 from main

It can be tested locally so it shouldn't be necessary to merge with main to test.

[CeraStroh]

3/11 Progress - ~2 hours Unable to create a table with a variable table name - possibly an issue with the Vercel Postgres SDK

Alternate idea: store Terms and Definitions in studysets table with everything else Update: This solution worked effectively after various tests and changing the SQL statement. Completed "Program createStudySet action..." and "Use React Server Components..." tasks.

[CeraStroh]

3/12 Progress Cleaned up code from testing the action for about 15 minutes.

[CeraStroh]

There seems to be an problem with changing the dynamic form and accidentally submitting the form

[CeraStroh]

3/21 Progress - 1 hour Fixed auto-submit problem when deleting elements on form by adding event.preventDefault() on develop branch merged develop with main - PR #37

[CeraStroh]

• [ ] Research how the Vercel Postgres SDK handles SQL injection (3)
• [ ] Add count limits to Term-Definition pairs (3)
• [ ] Add character limits (3)
• [ ] Research how special characters will be stored in the database (1)