ily123 / grafnote Goto Github PK

• Done

Interactive elements to:

• Add notebook
• Switch note to new notebook
• Delete notebook
• Edit notebook name

• Add cascade delete to models
• Pop notes from the store if folder deleted

Clean up / refactor CSS and styling

• landing page
• navbar
• Note area
  • Sidebar
  • Text input
  • Preview

Read https://developer.mozilla.org/en-US/docs/Web/CSS/resize

• Done

• Done

• Done

• There is a side bar on the left with the list of notes
• There is a main display area with the note
• You can click on the note in the side bar, and the note display updates with the selected note

• Think through implementation
• Implement

• Done

• Add notes
  • Button in top left that says 'add note'
  • When you click on it
    • a new note is created in the list
    • main screen goes to that blank
• Edit notes
  • Edit title
  • Edit main content
  • Autosave changes
• Remove notes
  • Delete button
  • Note should disappear from the navigation menu
  • If user is reading note, they should be redirected somewhere else (where?) -> First note for now, if there are no notes left, then oh oh. Open new issue with this.
• Navigate existing notes
  • There is a side bar on the left with the note/folder hierarchy

• Style sidebar
• Style editor
• Style the header

• Model
• Seeder
• Migrations

For Notes table:

• Model
• Migration
• Seeder

• My account button
• Sign-in button
• Sign-up button
• Left side logo
• Styling

• Set up reducer
• Actions
  • Load all notes
  • Edit single note
  • Add single note
  • Delete single note
  • Set active note
• Thunks
  • Load all notes
  • Edit single note
  • Add single note
  • Delete single note

• Dark theme with purple accents
• A few words on what the product is
• (save for later) Pic of the note-taking UI as the centerpiece
• Big red demo-user button
• A couple of paragraphs after the screenshot

• Dynamically display green/red validators as user types in information
• Clearly display any backend errors with steps to resolve
• Styling

• Left sidebar with list of user notes
• A button in side bar to add new note
• A button to add new folder
• Main element with the note editor

This is just an outline, no functionality.

• Actions
  • New notebooks
  • Remove notebooks
  • Rename notebooks
• Thunks
  • New notebooks
  • Remove notebooks
  • Rename notebook

CRUD endpoints for Notes

• Add note (POST api/note)
• Remove note (DELETE api/note/:id)
• Edit note (PATCH api/note/:id)
• Load all notes (`GET api/note/')
• Load single note (GET api/note/:id)

• Sign-in validation
  • Clearly display any backend errors with steps to resolve
• Styling

• Sticks to the bottom of the page
• Has my contact info
• Styled with Obsidian fonts/colors

• Something in the reducer and/or backend trips up after the redirect.
• Steps to recreate the bug are as follows:
  • Enter valid inputs in the sign-up form & submit.
  • Backend correctly creates a new user, and send it back.
  • The reducer correctly sets the new user in the state.
  • The page is redirected to '/'
  • Home page component tries to do a GET request to restore the user
  • The request is GET /%3Canonymous%3E 404 0.885 ms - 2933 and it fails
    • Where is %3Canonymous%3 coming from?
  • The server sends back a 404 response ('resource not found')
  • Inside the thunk, the response is destructured to produce a user of undefined
    • Why? there is a response.ok() handler inside the thunk that should prevent this behavior.
  • The reducer then tries to set the 'undefined' user as the slice of state
  • underfined slice of state causes an error that crashed the app
  • React reports two errors:

 Unhandled Rejection (TypeError): response.json is not a function
submit
src/components/SignupFormPage/index.js:42
  39 |   try {
  40 |     await dispatch(signupUser(email, username, password));
  41 |   } catch (response) {
> 42 |     const { errors } = await response.json();
     | ^  43 |     console.error(errors);
  44 |   }
  45 | };

and

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.
▶ 25 stack frames were collapsed.
(anonymous function)
src/store/session.js:51
  48 |   if (response.ok) {
  49 |     const { user } = await response.json();
  50 |     console.log(user);
> 51 |     dispatch(loadUser(user));
  52 |   }
  53 |   return response;
  54 | };
View compiled
async submit
src/components/SignupFormPage/index.js:40
  37 | const submit = async (event) => {
  38 |   event.preventDefault();
  39 |   try {
> 40 |     await dispatch(signupUser(email, username, password));
     | ^  41 |   } catch (response) {
  42 |     const { errors } = await response.json();
  43 |     console.error(errors);

Course of action:

• Take no more than 2 hours tomorrow to try to debug
• If not successful, refactor the code to exactly follow samples from a/A. User auth needs to be done by Monday.

• POST new
• UPDATE
• DELETE

Don't really need a GET. I will include folder information with the get request to 'NOTE'.