finished documentation update

.github/workflows/deploy.yml

@@ -28,7 +28,7 @@ jobs:
         run: pnpm install
         working-directory: ${{env.working-directory}}
       - name: Build Page
-        run: pnpm run build
+        run: pnpm build
         working-directory: ${{env.working-directory}}
       - name: Remove gh-pages Cache
         run: rm -rf node_modules/gh-pages/.cache

.vscode/course-schedulizer.code-workspace

@@ -19,7 +19,23 @@
     ],
     "cSpell.dictionaries": ["en_US", "typescript", "node", "html", "css", "npm"],
     "cSpell.enableFiletypes": ["html", "js", "json", "jsx", "markdown", "md", "scss", "ts", "tsx"],
-    "cSpell.words": ["Corepack", "Pruim", "Schedulizer", "VanderLinden"],
+    "cSpell.words": [
+      "Corepack",
+      "CSPS",
+      "Faeren",
+      "Fitsum",
+      "Haileselassie",
+      "Kornoelje",
+      "Madza",
+      "Maru",
+      "Norvig",
+      "Pruim",
+      "reuseables",
+      "Schedulizer",
+      "VanderLinden",
+      "Velpula",
+      "Vreeke"
+    ],
     "cSpell.blockCheckingWhenTextChunkSizeGreaterThan": 1500 // Allow checking of files with long base64 strings.
   },
   "extensions": {

README.md

@@ -15,21 +15,21 @@ This is the repository for the Course Schedulizer project created by students at
 
 - [About page](https://senior-knights.github.io/course-schedulizer/#/about) for a discussion of the purpose of the application.
 - [Help page](https://senior-knights.github.io/course-schedulizer/#/help) for instructions on how to use the application.
-- [Client README file](client-course-schedulizer/README.md) for a specification of the system development workflow.
+- [Client README file](client-course-schedulizer/README.md) for a specification of the system development workflows.
 
 ## Development Philosophy
 
-We generally follow the [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) collaboration model, with production, development, and feature branches.
+We generally follow the [Gitflow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) collaboration model, using these branches.
 
 - The `production` branch is a persistent branch that contains the most stable version of the Course Schedulizer. It requires two reviews to merge PRs to this branch.
 - The `develop` branch is a persistent branch that contains the cutting edge version of the Course Schedulizer. It requires one review to merge PRs to this branch. Each PR is ideally around 100-200 LOC.
-- Feature branches are cloned from `develop` and are used for developing new features. They are merged back into `develop` when the feature is complete.
+- _Feature branches_ are cloned from `develop` and are used for developing new features. They are merged back into `develop` when the feature is complete.
 
 Code reviews are done on every PR merged into the two persistent branches. A PR is made with a branch following the naming convention of `<broad>/<specific>`. `<broad>` are things like `feature`, `docs`, `chore`, `fix`, etc.
 
 ## Repository Configuration
 
-The repo is a [mono-repository](https://en.wikipedia.org/wiki/Monorepo), to spite the fact that it comprises only one application, stored in `./client-course-schedulizer`. This historical artifact leaves open the possibility of adding applications in the future.
+The repo is a [mono-repository](https://en.wikipedia.org/wiki/Monorepo) with one application, stored in `./client-course-schedulizer`, and the possibility of adding applications in the future.
 
 Because the application is open source, we use free minutes of GitHub actions to perform CI/CD. `ci.yml` tests on any push or PR against `develop` or `production`.
 
@@ -41,7 +41,7 @@ Development is best done using [VS Code](https://code.visualstudio.com/) and the
 
 - [EditorConfig](https://editorconfig.org/), which specifies shared editor configuration parameters (see [`.editorconfig`](.editorconfig)).
 - [Prettier](https://prettier.io/), which formats code and organizes imports (see [`.prettierrc.js`](.prettierrc.js)).
-- [ESLint](https://eslint.org/), which specifies application-specific formatting rules (see [`client-course-schedulizer/.eslintrc.js`](client-course-schedulizer/.eslintrc.js)).
+- [ESLint](https://eslint.org/), which specifies application-specific formatting rules (see [`client-course-schedulizer/.eslintrc.js`](client-course-schedulizer/.eslintrc.js); n.b., [`client-course-schedulizer/.env`](client-course-schedulizer/.env) allows for overriding the Create React App ESLint configuration.
 - [CSpell](https://cspell.org/), which checks spelling in markdown, comments, and strings (see the `cspell` settings in [`.vscode/course-schedulizer.code-workspace`](.vscode/course-schedulizer.code-workspace)).
 
 You can add your own user-specific VS Code extensions, but be sure to use these recommended, shared settings and extensions.

client-course-schedulizer/.npmrc

@@ -1 +1 @@
-use-node-version=20.15.1
+use-node-version=21.1.0

client-course-schedulizer/README.md

@@ -12,133 +12,91 @@ The Course Schedulizer is a single-page application that allows users to view an
 [![netlify](https://img.shields.io/badge/netlify-000?logo=netlify)](https://www.netlify.com/)
 [![vscode](https://img.shields.io/badge/vscode-000?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE+SURBVHgBjVJNToNAFP5moInpiiPIDdqauDY9gh6g1BO4s9EFYceqqRcQepEat02UjXvaE8hGtBHmOdMiZQAjb8FLePP9vB+GLuG+Adn3BJS5YKaHHM/whxvWEeiA8kAvsIDv801k/QluBaogh+PuxUU/j2UOGiT30aQdeAgOkW9lthQT+lmE2+i0Agxr7xPN+P47WzvgvFCgDQhLMOYeHVIMRlcgPpeIi9+/x4FpBFpEEMYlTnpb7L5WVTAvn/jnIUgsNRhJF6kxVmtpIS1sN9dBZQ3SsjDH7cpN4DsE8woCxWGDZyt8pIO6Mj9cTgFUgxHGCP6ZByGuKwZt9PirVB3oYMpsObdY9hvi0xyV/akZCDGtiVnNntVxLIYJ2mK2nsotPLZUqNtt79I6QSIn8vQ/WCeYS8EHpOZCOf0BmnSexRUGtfwAAAAASUVORK5CYII=)](https://code.visualstudio.com/)
 
-## Workflows
-
-**To run the Schedulizer locally:**
-
-1. `git checkout` the branch you want to work on (e.g., your dedicated feature branch).
-1. `cd client-course-schedulizer` to move into the monorepo’s client application sub-directory.
-1. `pnpm install` to install the required NodeJS packages as specified in `package.json`.
-   - Use the version of NodeJS specified in `.nvmrc`. You can install it manually
-     using [nvm](https://github.com/nvm-sh/nvm), or let pnpm
-     [do it automatically](https://pnpm.io/npmrc#use-node-version).
-   - Use the version of pnpm specified in `package.json`. You can [install it manually](https://pnpm.io/installation), or, if enabled,
-     [Corepack](https://nodejs.org/api/corepack.html) will do it automatically.
-1. `pnpm start` to run the website on [localhost:3000](http://localhost:3000).
-
-Edits you make to the code will automatically update the website in your browser.
-
-**To deploy the Schedulizer to the development server:**
-
-1. Create a pull request to merge your fully-implemented-and-tested feature branch into the `develop` branch.
-
-When the PR is approved, the development server, configured on Netlify, will auto-deploy the new version of the `develop` branch. See the:
-
-- Development server dashboard at [https://app.netlify.com/sites/sharp-babbage-a45ee2](https://app.netlify.com/sites/sharp-babbage-a45ee2)
-- Running application at: [https://sharp-babbage-a45ee2.netlify.app](https://sharp-babbage-a45ee2.netlify.app)
-
-**To deploy a new production version of the Schedulizer to the production server:**
-
-Follow the same workflow as for the development server, but merge your feature branch into the `production` branch. The production server, configured on GitHub Pages, will auto-deploy the new version of the `production` branch. See the:
-
-- Running application at [https://senior-knights.github.io/course-schedulizer](https://senior-knights.github.io/course-schedulizer).
-
-TODO: Document the CI/CD process.
-
-TODO: Still working on the rest of this stuff.
-
-- .github/workflows: the github auto-test and auto-deploy scripts
-  - ci.yml: automatically test the latest update
-    - Trigger: push to all branches, PR to `develop` and `production`
-    - Work environment: ./client-course-schedulizer
-    - Steps:
-      - Set up actions for pnpm and node
-      - Update pnpm version
-      - Install pnpm dependencies
-      - Run pnpm test on the latest push or PR
-  - deploy.yml: auto-deploy
-    - This script is not updated to use pnpm yet, must be updated before pushing to `production` or error will occur
-
-### Available Scripts
-
-In the project directory, you can run:
+## Scripts
 
-NEEDS TO BE FIXED...
+- `pnpm start` runs the app in the development mode.
+  Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.
 
-#### `npm start`
+- `pnpm test` launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-Runs the app in the development mode.
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.
+- `pnpm build` builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
 
-#### `npm test`
+- `pnpm deploy` is used by GitHub actions to deploy the build. It will trigger the `predeploy` script.
 
-Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-#### `npm run build`
-
-Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!** Would not recommend using this. Use [craco](https://github.com/gsoft-inc/craco) instead of ejecting.
-
-### `npm run deploy`
-
-Used by GitHub actions to deploy the build. Will trigger `predeploy` command.
-
-[Husky](https://typicode.github.io/husky/#/) is used with [Lint Staged](https://github.com/okonet/lint-staged) to format all code to the ESLint rules when they are committed. This insures that changes pushed are not confused by changing syntax or code style.
+We don’t suggest using `pnpm eject` (see [this Stack Overflow post](https://stackoverflow.com/questions/48308936/what-does-this-react-scripts-eject-command-do)).
 
 ## Directories
 
 - `csv/` contains sample course schedules in `.csv` and `.xlsx` formats. The files include new and old formats, which are not compatible.
 
-- `public/` contains files to import when deploying the application.
+- `public/` contains every image or other “artful” content used in the client app.
 
 - `src/` contains all source files that build the client application.
 
-  - `src/assets` contains images utilized by the application
-  - `src/components` contains the basic components used in the UI. Note that `pages/HarmonyPage` has been removed from the UI.
-  - `src/data` contains constraints on times within which classes may start. These constraints are run in R. Ask Prof. Pruim for more information about how this is done.
-  - `src/styles` establishes colors and fonts used in the application.
-  - `src/types` establishes objects used in the application (it's best not to alter this).
-  - `src/utilities` provides various functions and objects to help the application function (to be discussed in further detail later).
-  - Other files handle server operations.
+  - `src/assets` contains images used by the application
+  - `src/components` contains all React components in the project. Every component resides within a folder, that is its exported name written in `PascalCase`. When a folder is used for additional storage, such as `pages/` (for the apps views) and `reuseables/` (for components used in many other components), they are written in `camelCase`. Each component folder contains `index.ts`, `ComponentName.tsx`, `ComponentName.test.tsx`, and `ComponentName.scss`. Sometimes they will contain a `componentNameService.ts` or additional folders for children components. Note that `pages/HarmonyPage` has been removed from the UI.
+  - `src/data` contains constraints on times within which classes may start. These constraints are run in R; see Prof. Pruim for details.
+  - `src/styles` contains global styles using [Sass](https://sass-lang.com/) in SCSS form.
+  - `src/types` contains module type declares for NPM packages that do not ship with types.
+  - `src/utilities` contains helper functions, logic, interfaces, constants, services, and all other code-related things that are not React Components.
+    - `utilities/contexts` establishes the global state of the app.
+    - `utilities/helpers` provides various helpful functions for development use.
+    - `utilities/hooks` provides hooks for interacting with the schedule.
+    - `utilities/interfaces` defines the app interfaces and data interfaces.
+    - `utilities/reducers` provides functions to perform multiple setState updates at once that depend on each other.
+    - `utilities/services` provides services, e.g., for detecting conflict, calculating faculty load, etc.
 
-- `utilities/` contains various utilities.
+- `.tsconfig` has been modified to allow for: [barrelling](https://basarat.gitbook.io/typescript/main-1/barrel), which combines the exports from each module in a directory into a single `index.ts` module, and [absolute imports](https://medium.com/geekculture/making-life-easier-with-absolute-imports-react-in-javascript-and-typescript-bbdab8a8a3a1), which allows for cleaner imports.
 
-  - `utilities/contexts` establishes the global state of the app.
-  - `utilities/helpers` provides various helpful functions for development use.
-  - `utilities/hooks` provides hooks for interacting with the schedule.
-  - `utilities/interfaces` defines the app interfaces and data interfaces.
-  - `utilities/reducers` provides functions to perform multiple setState updates at once that depend on each other.
-  - `utilities/services` provides services, e.g., for detecting conflict, calculating faculty load, etc.
+- `index.tsx` is the entry point into the React application.
 
-- `.eslintrc.js` is a specific ESLint config. `.env` allows for overriding the Create React App ESLint config.
+[Husky](https://typicode.github.io/husky/#/) is used with [Lint Staged](https://github.com/okonet/lint-staged) to format all code to the ESLint rules when they are committed. This insures that changes pushed are not confused by changing syntax or code style.
 
-- `.tsconfig` has been modified to allow for barreling and absolute imports.
+## Workflows
 
-## Development Philosophy
+**To run the Schedulizer locally:**
 
-React’s functional programming is great for dealing with complex, stateful user interfaces. With React, all data is either primitives or an object (which includes functions) since the library focuses on immutability. Each React component defines how every view will behave for a given state. Generally, each view is rendered whenever the data is updated.
+1. `git checkout` the branch you want to work on (e.g., your dedicated feature branch).
+1. `cd client-course-schedulizer` to move into the monorepo’s client application sub-directory.
+1. `pnpm install` to install the required NodeJS packages as specified in `package.json`.
+   - Use the version of NodeJS specified in `.nvmrc`. You can install it manually
+     using [nvm](https://github.com/nvm-sh/nvm), or let pnpm
+     [do it automatically](https://pnpm.io/npmrc#use-node-version).
+   - Use the version of pnpm specified in `package.json`. You can [install it manually](https://pnpm.io/installation), or, if enabled,
+     [Corepack](https://nodejs.org/api/corepack.html) will do it automatically.
+1. `pnpm start` to run the website on [localhost:3000](http://localhost:3000).
 
-### Barrelling
+Edits you make to the code will automatically update the website in your browser.
 
-Every folder contains `index.ts` that exports all from every file in the folder which allows for barrelling and absolute imports.
+**To deploy the Schedulizer to the development server:**
 
-### Structure
+1. Create a pull request to merge your fully-implemented-and-tested feature branch into the `develop` branch. You can test your branch locally by running:
+   - `pnpm start` to manually test your changes.
+   - `pnpm test` Launches the test runner in the interactive watch mode. See the section about [running tests](https://create-react-app.dev/docs/running-tests/) for more information.
 
-`assets/` contains every image or other "artful" content used in the client app.
+GitHub is configured to require on review by a team member for all merges into the `develop` branch. When the merge is approved:
 
-`components/` contains all React components in the project. Every component resides within a folder, that is its exported name written in `PascalCase`. When a folder is used for additional storage, such as `pages/` (for the apps views) and `reuseables/` (for components used in many other components), they are written in `camelCase`. Each component folder contains `index.ts`, `ComponentName.tsx`, `ComponentName.test.tsx`, and `ComponentName.scss`. Sometimes they will contain a `componentNameService.ts` or additional folders for children components.
+1. The continuous integration (CI) workflow specified in [`.github/workflows/ci.yml`](.github/workflows/ci.yml) will automatically run the tests. The tests are specified in `src/**/*.test.*` files and run using [Jest](https://jestjs.io/).
+1. If the tests pass, the CI workflow will automatically merge your PR into the `develop` branch.
+1. When it detects new code in the `develop` branch, [Netlify](https://www.netlify.com/) will automatically deploy the new version of the `develop` branch to the development server. See the:
+   - Development server dashboard at: [https://app.netlify.com/sites/sharp-babbage-a45ee2](https://app.netlify.com/sites/sharp-babbage-a45ee2)
+   - Running application at: [https://sharp-babbage-a45ee2.netlify.app](https://sharp-babbage-a45ee2.netlify.app)
 
-`styles/` contains global styles. Uses Sass in SCSS form.
+**To deploy a new production version of the Schedulizer to the production server:**
 
-`types/` contains module type declares for NPM packages that do not ship with types.
+Follow the same workflow as for the development server, but merge your feature branch into the `production` branch. Note that:
 
-`utilities/` contains helper functions, logic, interfaces, constants, services, and all other code-related things that are not React Components.
+- The `production` branch is protected and requires a review by a team member.
+- Merging to the `production` branch will trigger both the CI workflow (discussed above) and the Deploy workflow specified in [`.github/workflows/deploy.yml`](.github/workflows/deploy.yml). You can test this locally by running:
+  - `pnpm start` to manually test your changes.
+  - `pnpm test` to run the tests.
+  - `pnpm build` to build the application deployment bundle.
+- The deploy workflow auto-deploys the new version of the `production` branch on GitHub Pages, see: [https://senior-knights.github.io/course-schedulizer](https://senior-knights.github.io/course-schedulizer).
 
-`index.tsx` is the entry point into the React application.
+**TODO**: The deploy script has not been tested with pnpm yet. Fix this before merging into `production`.
 
-### Packages
+## Development Philosophy
+
+React’s functional programming is great for dealing with complex, stateful user interfaces. With React, all data is either primitives or an object (which includes functions) since the library focuses on immutability. Each React component defines how every view will behave for a given state. Generally, each view is rendered whenever the data is updated.
 
 We typically use packages rather than rolling our own features. This saves times and catches more edge cases, typically.