sandboxnu / edulaw

EduLaw is a project that assists parents in reporting violations of their children's educational rights to the appropriate legal entity.

edulaw

EduLaw is a project that assists parents in reporting violations of their children's educational rights to the appropriate legal entity.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

edulaw's Issues

User Authentication - Frontend

Problem: User has no way to sign in or sign up

Solution: Establish authentication page

Description:

Follow the Figma design to set up a simple page (or two) for signing in and signing up. Note that actual backend functionality is not required for this ticket, we just want the page to be visible and routed to before starting the form. Proof of concept - log a message in the console with the username and password once submitted.

Specs:

• Sign-in frontend - Figma
• Sign-up frontend - Figma
  • Change text from ‘Your Journey Starts Here’ to ‘Welcome’
• Page appears before starting form
• Console log message containing signin info

Expected Completion: 1 week

Resident Expert: @dillydally414

"Home" Page

Problem: Finish up the text, background, and button on the "Home Page"
Solution: In the words of Shia Labeouf, JUST DO IT

Description: Just gotta finish it up.

Specs:

• text (with bolds/links)
• background shading
• button
• text getting hidden should be solved by Layout component ticket

If blocked, contact @dankrasno

Index bug - to reproduce, select 'Yes' for dogs, Next, 'No' for pets, Next, Back, Back, NextIf blocked, contact @nicolesorial

Backend Setup

Problem: We have no backend
Solution: Create backend
Description:
We want a super simple backend that just stores basic user info - email, password, and form progress.
Email and password should be pretty straightforward, form progress might be a little harder.
Specifics should be figured out during Backend Research

Specs:

• Next-auth setup
• Signin endpoint
• Client connection test endpoint
• Remote mongo connection set up
• Local mongo connection and docker set up

Expected Completion: 2 weeks
Resident Expert: @ChiliPaneer or #engineering-support or Daniel

Recreate Landing Page

Problem: We don't have the landing page.
Solution: When we have a landing page that emulates the one in the figma

Description: We should probably use Material UI. Most of the components used in the Landing page probably won't have to be reused, since the Form will probably have mostly it's own reused components, so just try and organize

Specs:

• Have the same navigation
• Doesn't have to be mobile yet, but keep in mind that at it should be at one point be responsive, so design components and layout with that in mind.
• Make sure the accordions and interactive components work as expected.
• Routing for buttons see @zefwang for more details

Notes
If you think this ticket needs to be split up further, please reach out to @ChiliPaneer

New Form Features

Problem: We are missing some form features the client is looking for
Solution: Add support for these features

Description:
Feature: We need a new type of question that has no answers but is NOT a result. This will represent the end of a section and should be marked as type CONTINUE (instead of RESULT). The buttons should be the same (next, back), and the next button should redirect to another question. This should be represented by the question having one answer field, but this answer field should NOT be displayed, simply used for redirect purposes.
Purpose: User should feel a sense of progress and clean breaks between sections.

Feature: We also need support for a tooltip that appears upon hovering. This represents more information about the question that is not necessary to the question itself, but some users may feel the need to gather more information. This will just be represented as an additional field for questions.
Purpose: User will be able to hover over some questions to get a more legalese version of question information. This allows the user to understand exactly what and where rules are codified if they wish to do further independent research

Specs:

• New question type CONTINUE
  • No visible answer
  • Routing to next and back questions
  • Proof of concept: Add in a CONTINUE with some filler text that occurs after selecting No to cats, and No to cats, and before the question asking why you don't like cats or dogs. This will require new questions and answers in their respective JSONs
• New question fields - tooltip-text, tooltip-hover-text
  • These field should be optional (we don't want an empty tooltip, that's just annoying)
  • If the fields are filled, include the subtext, styled like this
  • Upon hovering over the icon, the tooltip should appear above the cursor
  • After moving the mouse off of the icon, the tooltip should disappear
  • Proof of concept: Add in a tooltip for "Do you have a pet?" that says "Do younger siblings count?" that shows "Younger siblings do not count." on hover

Expected Completion: 2 weeks
Resident Expert: #engineering-support, @dillydally414

Update PDF Building

Problem: PDF is inaccurate... again....
Solution: update it
Description:
The PDF needs to incorporate all the info from #75. The values should be included at the top of the PDF.

Specs:

• Get all the values from the backend
• Style the PDF some to make it legible

Connect Signin Backend to Frontend

Problem: We have our backend and signin API, but this isn’t linked with our actual frontend yet.
Solution: Link that bad boy!
Description:
We’re using next-auth for user authentication, which handles a lot of the work for us (Yay!). We do have to handle signup ourselves, but the API endpoint is already there for that as well! Check out the resources below for some starting points.
Specs:

• Signin page uses next-auth sign in on submit, and signs the user in.
  • If the user signs in invalidly, alert a message telling them their information is incorrect.
  • If the user signs in correctly, alert a message containing the values returned by signIn
• Signup page uses our signup endpoint to register the user in the database, and then signs the user in (so the user doesn’t have to sign up and then sign in)
  • If the user signs up invalidly, alert a message telling them their information is incorrect (in this case, they would be using an already-existing username).
  • User should remain signed in upon sign up
• Both should redirect to /DynamicPOC

Resources: next-auth signIn method docs, next-auth example signin page
If blocked: @dillydally414 or @ChiliPaneer or #engineering-support

Template

Problem: A description of the issue
Solution: How do we know if it's been solved?

Description: Even more details...

Specs:

• goal
• goal
• goal

Notes
Some extra thoughts

If blocked, contact @Someone

Decide on form framwork

Problem: We need to create a stateful form to meet the spec from our client.
Solution: We find a library that works with Next.js that allows us to easily create a form with the same flow as in the spec (certain pages only show based on prior resopnses)

Description:

Specs:

• should be stateful
• Compatible with Next.js
• Good documentation

Notes
Should be easy

If blocked, contact @ChiliPaneer

PDF generation

Problem: We want to generate a pdf that is emailed to the appropriate recipient.
Solution: We are able to generate a pdf client side with our own text, preferably from an html layout.

Description: We want this to be client side, because we don't have a backend, and most api will probably cost money/be a privacy concern.

Specs:

• Select a tool with which to generate the pdf
• Actually integrate tool into the project and generate a pdf
• implement way to easily set content for the pdf (like from html layout or json)

Notes
I'm not saying this is the route you should go, but maybe as a starting point checkout: https://www.npmjs.com/package/html-to-pdf-js

If blocked, contact #engineering-support

Student or Group Details

Content: add "type" and "route" to every all answers in answers2.json. All the numbers are in the lucidcharts

Introducing Concern

Backend Prod Fixes

• Do the client caching thing with MongoDB
• Add secret to next so prod works
• Add bcrypt to passwords

Feature: ability to go back and forth between questions

We need to have some type of 'back' functionality so that users can go back and edit their answers. Note that this is different from the final "show everything they answered at the end and give the option to edit their text inputs". This is while the user is filling out the form for the first time.

Initial thoughts on how to do this is to store a list of visited questions in the state, append current question to it each time a user clicks next, and moving a pointer every time the user clicks "next".

NOTE: This is not the browser "Back"/"Next" button functionality. It is an on-page button.

Requirements:

• User can hit 'back' and see the back question
  • User's previous answer should be pre-filled out
  • User text input should still be filled out
• User can hit 'next' after going back and see the question they were on before hitting back
  • User's previously filled out answer, if it exists, should be pre-filled out
• If user changes an answer that changes the routing behavior, user will have to re-answer those questions:
  • Delete all visited questions after pointer in state
  • Delete all submitted answers after that point in the form context
  • Index bug - to reproduce, select 'Yes' for dogs, Next, 'No' for pets, Next, Back, Back, Next >>> if click NEXT on any button after going back, it brings you back to the very end >> fix
    If blocked, contact @nicolesorial

Search Bar

Problem: Search Bar

Description: Make that search bar as seen in 'Rights Guide 1'

Specs:

• have fun
• doesn't have to actually search for now

Notes
Search functionality TBD

Dynamic Form Building POC

Problem: Hard coding each form question into it's own Page is a very brute force solution.

Solution: Come up with a Proof of Concept to dynamically build form pages.

Description: Assuming shared visual components for different form question types exists, we should be able to refer to a local data store of question type, content, answer options, and routing information, we should be able to dynamically build a question page that properly routes to the next page based on question answer.

Specs:

• Define a data definition for a question page
• Define a data definition for a question, including type, content, and answer
• Define a data definition for an answer, including answer options and routing information for each one
• Using the above data definitions, build a JSON representation of a form with interesting routing behavior
• Find a solution for using that JSON to dynamically build the form

Notes: If blocked, reach out to @nicolesorial

Design Mobile Landing Page Layout

Problem: We don't have a mobile layout design
Solution: We have figma mock-ups of the mobile layout for the landing page
Description: We want the project to eventually be mobile accessible, but for now we should at least have the landing page be resopnsive.

Specs:

• Design uses mostly same style as the desktop layout
• All elements are on figma

Notes
If you have any questions reach out to @ChiliPaneer

Next Steps Page

Problem: User has no clear next steps after completing the form
Solution: Next Steps Page
Description:
This will be a static page that the user is redirected to after finishing the form and having the PDF downloaded. It will include information that informs the user what to do now (AKA send the pdf to PRS). Specs will be updated once client provides the text for us to put on this page.

• Update styling so that pdf isn’t downloaded at the end of the form, and instead the final button redirects to the next steps page
• Download pdf from button (just call our building function, doesn’t have to actually be accurate)

Specs:

• Page located at /complete
• User is redirected to this page after pdf is downloaded at end of form
• Page contains general purpose information for the user to continue with filing their complaint
• Figma

If blocked: @dillydally414 @clue4 or #engineering-support

General Form Frontend

Problem: There are some general questions that we need to ask each user
Solution: Start the form with these general-purpose questions
Description:
We need to ask every user a standard set of questions, like name, school district, etc. These questions are outlined in the resources link. These will likely just be static pages. This is a frontend-only ticket, the backend for these pages should already be set up. These pages should also link to each other as outlined in the Figma. There should already be a distinct branch for each page's backend, the work can be continued on each respective branch.

Specs:

• Contact Info
• Statement of Concerns
• District and School - Diana was wondering if we could do a type-to-complete thing instead of a pure dropdown
• Additional Info
• Introducing Concern
• Student/Group Details

Resources: Figma mockup containing general purpose questions

Introduction to Describing Concerns

Additional Info

Formik Hello World

Problem: We don't have any experience using form framworks like formik, and need a starting point for us to start using more advanced features.
Solution: One person reads the tutorials and integrates formik, and gets a basic hello world going in the project.
Description: This person can help others get started and be available to answer questions.

Specs:

• Read the quick start tutorial here
• Import Formik to our code base
• Make a basic form that can save input
• Walk over the code at standup

Notes
If blocked drop a line in the engineering-support channel in the slack.

Dynamic Refactor Sprint

Problem: Some of the old dynamic code is a little janky.
Solution: Refactor that bad boy
Description:
Crank as much as you can out at next Sunday's GM, then we'll do a rapid-fire PR review and merge it in to reduce the :chungus: amount of conflicts that will probably occur. Below is a draft checklist of things that we might want to consider refactoring. Note that this is not all-encompassing nor prioritized, so something on here might be lower priority than something I forgot to include.
Incomplete checklist:

• Types
  • Question type enum
  • Question component similar props - MyContinue, MyInput, etc. have shared props
  • FormAnswer type
  • In general, making strings strings and numbers numbers instead of having parseInt and toString everywhere
• DynamicPOC/DynamicForm
  • Uncoupling currentQuestion and currentAnswer as much as possible
  • Making handleNext, handleBack, etc clearer to read (and abstracting out duplicated code)
  • If not addressed in #45, abstracting QuestionLayout out of each specific question type since the layout stays consistent

Creating Conditional Form

Problem: We want contextual forms so we can meet the client spec They look like this.
Solution: We are able to to make a form that displays different questions depending on the responses to prior questions.

Description:
For example:

Did you enjoy this form?   - - - - YES - - - -> Would you like to give us a rating?
            |
            |
            NO
            |
            |
            V
  Would you like to give feedback?

Here, the form displays a different question based on what the user enters.
We want this to be scalable, since we have hundreds of questions. The current idea is to do routing within the onSubmit() function based on the responses.

Specs:

• Create a simple from like the one above to act as an example/template
• Create a slightly more complex example to show that it scales
• Document well

Notes
Keep in mind this has to be scalable for hundreds of questions.

If blocked, ask for help in the engineering-support slack channel.

Form Restyle

• Implement the form restyle as seen [here](https://www.figma.com/file/UnjR8tbWQ49DHxHbtLmP7V/Full-Redesign-(All Breakpoints)?node-id=0%3A1).
• Mobile view is not necessary for this ticket.
• Consider making a 'breakpoint' (# of characters) at which we switch from the text-in-button Radio styling to the text-beside-button Radio styling.
• Ask designers if you have questions!!!
• Use styled-components for css rules pls 🙏 - feel free to use MUI components but be warned it might make styling more difficult

Specs:

• Styled radio text-in-button
• Styled radio text-beside-button
• Styled text input
• Styled continue
• Styled next/back
• Styled section header
• Placeholder left section tracking bar (populate with dummy values)
• Styled Nav Bar
• Styled quote blocks
  • Parse out anything in the question field that is contained in double quotes
  • pic:
  • link

Layout Component

Problem: A second component for the general layout of the page(s).
Solution: Its done when its done. nuff said

Description: As seen on 'Rights Guide 1', grey bar to the left

Specs:

• Abstract side bar so that it can be placed on either side of the page (use flexbox?)
• Main text should not be cut off
• General layout structure for 'Rights Guide 1'

Cleanup landing page code

Problem: The code for the landing page is pretty fragmented
Solution: How do we know if it's been solved?

Description: Even more details...

Specs:

• Eliminating repetitive pages (aboutprs.tsx, home.tsx, studentrights,tsx)
• • look into preventing rerenders by just updating current page instead of rendering entire page
• clean up by making content into constants (components that start with landing)
• Add some comments for documentation

Notes

If blocked, contact @clue4 for clarification and @zefwang or engineering-support for help.

Content: add the answers from the Dsicipline lucidchart

Content: add "answers" to questions 147-248

Mobile Form Styling

Problem: Mobile users can’t access our site :(
Solution: Responsive styling :)
Description:
Set up our form styling to work for mobile and tablet devices. This ticket does not include the static pages like home, etc, only the form.
Specs:

• Figma design
• Use styled-components pls
• Breakpoints: Need to get from designers
• Make sure web view is still accurate: >768 px wide
• Tablet view: 480-768 px wide
• Mobile view: < 480 px wide

If blocked: Talk to designers! (hopefully there won’t be technical blocks here :fear:)

Feature: Display editable answers at end of form

At the end of form completion, user should be able to see a summary of all the answers they gave for every question. They should NOT be able to change answers radio questions. They SHOULD be able to change their answers for text input.

Requirements:

• At form end, user can see all the questions and the answers they gave for them on a single page
• User can edit their answers to text input questions
  • This should also update our internal representation of those answers
• User cannot edit their answers to radio/selection questions
• Optional: There should be an option to generate PDF? Maybe just include the button, and make a new ticket to connect the functionality later

If blocked on general things, contact @nicolesorial. If blocked on something related to the PDF, contact @dankrasno

District and School

Form API

Problem: Users can't save or retrieve forms
Solution: Add some API endpoints and link them to frontend
Description:
We want a backend API that supports the following queries:

• Retrieve form progress
• Save form progress
• Anything else as deemed necessary
  We also want to link these APIs with DynamicPOC.

The things we need to store:

• userId
• formValues
• questionHistory
• currentIndex
• currentQuestion
• currentAnswer

Specs:

• Get form progress endpoint
  • This should be a GET request with the query containing the user ID
  • This should return a JSON containing either the form values or {error: string message}
• Save form progress endpoint
  • This should be a POST request with the body containing the form values and the user ID
  • This should return a JSON containing either {success: true} or {error: string message}
• Starting the form
  • If the user has data saved in the database, set the appropriate starting question and formvalues
    • User should start at the last-answered question
  • If the user does not have data saved in the database, set starting question to first question and formvalues to an empty object
• Saving the form
  • When currentIndex changes, save everything to our database using the endpoint
• Integrate with next-auth
  • Determine userId based on next-auth storage
  • provide this along with our requests!

Expected Completion: 2-3 weeks
Resident Expert: #engineering-support

Update Results Page

Problem: Rresults page isn't the prettiest rn
Solution: Fix it
Description:
Main issue here is just that the results don't scroll. Add scrolling! Also incorporate values from #75. And don't download the form yet! PDF build can be done in #55.

Specs:

• Add scrolling
• Incorporate backend values
• Don't build PDF until #55

Contact Info

Content: add "type" to all questions

Refactor Project Structure

Make project structure easier to read and understand :)

Backend Setup

Problem: We have no backend
Solution: Create backend
Description:
We want a super simple backend that just stores basic user info - email, password, and form progress.
Email and password should be pretty straightforward, form progress might be a little harder.
Specifics should be figured out during Backend Research
We also want a backend API that supports the following queries:

• Sign up (POST)
• Sign in (GET)
• Anything else as deemed necessary

Specs:

• User entity w/ email and password
• Entity representing form progress
• API for backend
  • Sign up post API
  • Sign in get API

Expected Completion: 2 weeks

Resident Expert: @ChiliPaneer

Content: Fill out constants files

Fill out the form constant content for the following forms:

• Discipline
• Bullying
• Special education

Include in PDF

Flowchart -> JSON Automation

Problem: There's a :chungus: amount of questions and answers in some of the flowcharts
Solution: Automate the process - given a lucidchart, spit out the relevant questions.json

Description:
LucidCharts can be made to export to a csv, that contains the relevant information necessary to convert into a JSON. We want to be able to download the csv of a LucidChart, plug it into a script, and have that script produce the appropriate JSON. This will probably need to be updated as more question types and fields are added, but for now it will just support the content present in #42.

Specs:

• Script imports one or multiple csvs (If multiple, it should still consolidate into one object)
• Script turns Process blocks into Questions
• Script turns Arrow blocks into answers in the respective questions
• The final object should be readable as type Question[]
  • We can either store it into a JSON file, or have the script run each time and store the csvs in the repo which would eliminate the need for JSON files overall
• Make compatible with #40
  • Continue question type
  • Tooltip support

Expected Completion: 1-2 weeks
Resident Expert: #engineering-support

Initial Form Styling

Problem: We don't have a pretty form that matches the figma
Solution: We want the form to look like the figma and a component library that allows us to create those pages easily.

Description: We want to design components for the form to match the figma. We also want to set up the layout of the page that has the form. This will probably be reusing some of the components from the "home page" - not 100% sure thought.

Specs:

• Making yes no checkboxes look good
• Making text entry boxes look good
• designing page layout
• Keep future mobile layout in mind, not high priority rn
• Obviously integrated with formik

Notes

If blocked, reach out to engineering-support

Rights Prs Form

Problem: Create the dropdown menu seen on 'Rights Guide 1'
Solution: Make a component

Specs:

• Have fun

Update PDF Building

Problem: Current review pages and PDF are not up to client specs
Solution: Fix the review pages and PDF building function
Description:
Currently, our review page contains all of their answers. This page should only contain the legal text for complaints they have identified, and the additional details provided in the prompts section. The same should be true for the PDF built at the end of the form.
Specs:

• Review page
  • Should only include questions of type TEXT
  • Should only include the portion of those questions with the legal text included. This can be filtered in one of two ways:
    • We can update the flowchart and flowchart parsing system to separate out the legal text from the rest - this is the more difficult approach
    • We can simply parse the question and look for quotation marks - there should be quotation marks around the legal text for each of these questions - this is the easier approach
• PDF
  • Should only include questions of type TEXT
  • Should only include the portion of those questions with the legal text included
  • Make the name better, such as PRS Complaint.pdf
  • Make sure that the formatting of PDF is good

Resources: jsPDF documentation, Figma mockup of what the ending PDF would look like
If blocked: @dillydally414 or #engineering-support

Static Page Restyling

Problem: Static pages are not up to date
Solution: Make them up to date
Description:
Make all of our home pages agree with the figma linked below, make sure mobile views are also accurate
Specs:

• Figma designs: in the works
• Use styled-components pls
• all links to /dynamicPOC should now go to /form
• Pages:
  • aboutprs
    • change this link to just say prs (just change the file name)
  • home
  • index (located at /)
  • signin
  • signup
  • studentrights
    • change this link to info (just change the file name)
    • change the bar on the left to say General Information instead of Student Rights
• Breakpoints:
  • Make sure web view is still accurate: >768 px wide
  • Tablet view: 480-768 px wide
  • Mobile view: < 480 px wide
    If blocked: Talk to designers! (hopefully there won’t be technical blocks here :fear:)

Console Error on SideProgressBar

Problem: There's a console error on (most likely) the SideProgressBar.
Solution: No console errors

Description:
The console error I got was this:

Warning: Prop className did not match. Server: "MuiButtonBase-root MuiListItem-root WithStyles(ForwardRef(ListItem))-root-11 MuiListItem-dense MuiListItem-gutters MuiListItem-button Mui-selected" Client: "MuiButtonBase-root MuiListItem-root WithStyles(ForwardRef(ListItem))-root-12 MuiListItem-dense MuiListItem-gutters MuiListItem-button Mui-selected"

Specs:

• Figure out the error and fix it

Notes
Appreciate the help! :D

General Form Backend

Problem: There are some general questions that we need to ask each user
Solution: Start the form with these general-purpose questions
Description:
We need to ask every user a standard set of questions, like name, school district, etc. These questions are outlined in the resources link. These will likely just be static pages. This is a backend-mainly ticket, the frontend for these pages will be covered in #54. There should be a distinct branch for each page's backend.

Specs:

• Contact Info
• Statement of Concerns
• District and School
• Additional Info
• Introducing Concern
• Student/Group Details

Resources: Figma mockup containing general purpose questions

Finish Flowchart

Description: Finish adding flowchart information
Replaces the need for #26 #28 #29 #30 #31 once #43 is complete.

• Bullying
  • Sections
  • Questions
  • Tooltips
  • Answers
• Discipline
  • Sections
  • Questions
  • Tooltips
  • Answers
• Special Education
  • Sections
  • Questions
  • Tooltips
  • Answers
• Get clarifications from client
  • Bullying
  • Discipline
  • Special Education
• Flowchart docs
  • Doc on how to update the flowchart to conform to our code
  • Doc on how to export from flowchart and add to codebase