code-the-dream-school/alpaca-albatross-practicum-team3-back

alpaca-albatross-practicum-team3-back's Issues

M- Toggle, Dark Mode, Light Mode

Fix Fave --> Home route

per Dan:
check location.state

Connect Fave page to user

registration error

M - Back-end data models

Overview

Design of data models and schema for MVP:

1. ER Diagram for data models.
2. Mongoose schema for authentication, todos, and settings.

Technical Notes

1. ER Diagram
   Create an Entity Relationship Diagram that shows data relationship and share with Team.

2. Schemas will be implemented as follows:

• Authentication:
  User fields:
  a. username
  b. password

• Todos
  TodoList fields:
  a. title
  Todo fields:
  a. title

• Settings
  Setting fields TBD

Autocomplete function

autocomplete todo.title from favorites list
Does this need backend support?

Set tabs to footer menu (mobile)

Style-Add Strikeout to checkbox function

Mobile design features

Footer task bar
Adjust header (avatar, logout, darkmode toggle)

make {userName} dynamic for Welcome

Favorites List--Styling

See mock up:
https://www.figma.com/file/p0lAgYHPKuW2GvUO61XSJ9/CtD-Practicum?node-id=1%3A72&t=bRcg9kSxamqd031I-0

change "remove button" to say "remove"

W3C WAI review

Use information and tools from the site to test for accessibility.
Create Issues tickets with areas of concern

Connect additional list to user

This list name is not determined. Will use the same TodoList components and structure, just a different name for the tab.

Monthly Tab & List

Copy components from Main

Show/Hide function in password fields

example code: https://dev.to/gautham495/react-forms-with-react-hooks-with-password-show-hide-functionality-4e2k

User would click on an icon to view their password

Specify error messages for clarity in registration (unclear if this is a duplicate of #63)

Check routes and messages

protect password field in log in

Change buttons to match palette

Style- fix some bugs

• edit Log out button styling on hover so it doesn't move the screen on click
• remove register button from task bar
• stick eye icon in input field so it doesn't move when error message pops up
• find nav bar errors: styling conflicts, disappears on mobile
• realign fields
• determine css parents and children: remove duplicate and overlapping code

Log out from database

Favorites handleStar function

handleStar function should change icon and add/remove todoListItem from main list

Resolve TodoList error

password visible on login

I believe this can be resolved by changing the input type to password.

Revise getAllTodos Controller Function to Implement GET Todo Items Pertaining to Each List

Overview

Rework of getAllTodos controller function to GET only items belonging to a particular todo list

1. Append peram :list_id to ${BASE_URL}/api/v1/todos route for GET request
2. Rename getAllTodos controller function to getTodos and revise content
3. Rename all instances of param :id in the lists.js and todos.js controller files to :list_id and :todo_id respectively
4. Rename all params in all back end files and tests accordingly

Technical Notes

Current back end routing and controllers do not provide for fetching todo items one list at a time, nor leave the option for pagination of the items should they become numerous. The first step proposed here is to make the getTodos controller fetch only the todo items that belong to a particular list.

Pagination is of low priority, and I believe, given the project progress and uncertain prospect, should be put on the back burner to reserve resources for completing a simple MEAN stack todo app that has at least add, edit and delete functions to at least one immutable list, with simple yet responsive UI implemented on the front end.

Favorites-List

Assemble List with input field, remove function, edit function

Pass listid to API

Media queries

Adjust responsiveness for desktop, tablet, and mobile version.

• change log in form: logo below form, create account link some where the error message wouldn't interfere
• check registration form for resizing
• task bar should stay on top with dark mode toggle on left and log out on right (maybe switch sides?)
• NavMenu (the collection of tabs) sent to bottom as footer
• check mobile in dark mode
• .notepad and .todo_list_item should fit on screen without breaking words. may need to change box style
• .favelist and .todo_list_item should fit on screen

Style weekly and monthly tabs

See mockup: https://www.figma.com/file/p0lAgYHPKuW2GvUO61XSJ9/CtD-Practicum?node-id=1%3A72&t=bRcg9kSxamqd031I-0

Registration error

Weekly Tab & List

Copy components from main

Edit Icon

Task bar Style

Remove Register and Log in Button
Add Log out Button
Match tab folder design (maybe on top of the desk from the log in page?)
Set tabs to right or center

If designing for mobile also, the task bar should move to footer. Header can have log out and dark mode toggle. Speech command bottom should float on bottom right above footer.

Style warning in Log in page

Edit Function

Logo edit

Move to production repo and deploy

Favorites-API

Create User Registration and Login UI

Overview

Prototype Registration/Login UI:

1. Registration form
2. Login form
3. Tentative: combining both forms on single page
4. Set up front-end directory structure per convention
5. Demo routing (for auth) in /App.js
6. Propose separate file for an optimized useSemiPersistentState function.

Technical Notes

1. The app employs user authentication, the front-end logic for which I have been assigned to do. As there reportedly has pressure on manpower for front end, for MVP I propose a single auth page combining both the register and login forms, as it'd require one less FE route and less code.
2. The current front end project structure does not comport with convention, which separates components form /App.js and further divides them into subdirectories according to the groups of functionalities or interface they serve. For example, /components/layout commonly includes components that serve elements common to all pages--header, footer, sidebars, etc, and /components/login commonly has components that are for the authentication page(s). So it's proposed to group the components in login, layout, and lists directories pending the need for additions or further division.
3. A demo routing for the authentication page may be included in /App.js if the team so desires.
4. Current useSemiPersistentState function is not optimized as it makes a call on initial mounting of the page before todo lists/items are fetched via API from db that'll require another/other call(s) to set the records into localStorage once the records arrive. Making the initial call to localStorage only after initial mounting will do the function right, though I suspect we'll eventually not use any localStorage as was in prior cases in which records are managed through state and db only.

Media Query-Adjust for Wide screen

Style Log out

style-Start button for voice command

Rework of Front End Structure and Logics to Ensure Adherence to React Dev Principles

Overview

Rework of front end code to include reusable components and modules

1. Share InputWithLabel, SubmitButton and AddTitleForm in /src/form/ with the entire app.
2. Share /src/persistState.js with the entire app.

Technical Notes

1. Current back end has duplicate components list/InputWithLabel and list/AddTodoForm to form/InputWithLabel and form/AddTodoForm. Only the latters are reusable.
2. Current back end has in /src/App.js a useSemiPersisteState helper function that is not optimized nor reusable outside /App.js. This should be replaced by /src/persistState that is optimized and reusable.

add favorites option in DB - Dahlak

API for weekly/monthly lists

DarkMode feature

complete functions for dark/light mode

Speech commands

Refer to Danielle's list

S - Testing of prototype back-end APIs implemented in PR#1

Overview

Testing Back-end APIs for MVP:

Technical Notes

Testing of back-end APIs will be done with Jest and SuperTest. Jest is the go-to because create-react-app and create-next-app come with Jest as the test runner out of the box so that, if the team decides on merging FE and BE in one project repo, Jest can be imported conveniently from the FE mode_modules and doesn't have to be included in that of the back end.

L - Prototype back-end implementation

Overview

Prototype Back-end API for MVP:

1. Router middlewares.
2. Controllers for routes.
3. Authentication, error-handling and not-found middlewares.
4. Custom error-handlers and error-messages.
5. Security packages/middlewares.
6. Custom server-side 404.
7. Swagger documentation.
8. More descriptive README.

Technical Notes

This issue is generated post hoc. A complete prototype of back-end logic/code has been proposed in PR #1 to which this issue is associated. The only back-end business not included in this issue and pertinent PR is the testing, which is being implemented and expected to complete by Oct. 25, 2022.

Speech recognition components