ifycode / buuks-react-client Goto Github PK

• A user should be able to view other user's books and read

Suggestion by @tylerjusfly

Description
An error occurs in /books page when a user tries to load this page after being logged out.

Solution
Check if user is authenticated on /books page load when user tries to access it directly and redirect accordingly.

Screenshots

useEffect(() => { 
    // Set isloading to true

    // read token from local storage
    // if token exists, 
        // read user data from local storage
        // set the user variable
        // set isAuthenticated to true

    // if token doesn't exist, 
        // set isAuthenticated to false

    // set isLoading to false
  }, []);

One of the suggestions from @faarda

• Extract buttons into one component e.g. like the AppLink component

Description

On Chrome mobile browser, pdf link tries to open up a new tab but immediately closes the tab. As a result, one cannot preview or download the pdf file.
It works well in chrome browser on Mac.

Steps to reproduce

• Use a mobile phone with chrome browser.
• Sign up and login to created account
• Click on the add button to create a book card
• Click on the pdf link on the card

Expected output

One should be able to preview or download pdf on mobile phone too.

Screenshot

Browser and phone specifications

• Chrome mobile phone browser (add version later)
• Nokia 2.4
• Android 11

The link works as expected tested with Firefox mobile phone browser

• Delete button should prompt the user with a popup: "Confirm your action as this action cannot be reversed"
• Loader should also be used on the login and signup pages
• And maybe improve loader color so that it's more visible

Suggestion by @jiobiagba

• More conventional to have the name field first at the top of the registration form (signup form).
• Add splash screen with some beautiful content to welcome a none registered user.

Suggestions by @HENRYKC24

Currently, javascript intervals are used to show and hide the loader. Use tailwind CSS and CSS to show, hide, and animate the loader component instead of javascript.