w3b3/todoish

App initially conceived as a 30-min effort to demo a TODO app with persistency on AstraDB (Apache Cassandra-based cloud database, from @Datastax)

todoish's Issues

Bug: bad API response should not break UI

Currently having a typeerror being shown here

useEffect(() => {
    getAllEntries().then((newList) => {
      setTaskList(newList.tasks);
      // setApiPagination(newList.pagination);
      setTotalNumberOfTasks(newList.tasks.length); //TEMPORARY SOLUTION - FLAKY SINCE ITS WITHOUT PAGINATION
    });
  }, []);

Create language utility function

Should rely on Context to decide which language to return

Bug 12:43 PM in Firefox reads as 0:43 PM in Chrome

Query Cassandra to get an accurate item count

Alternatively show current payload amount (max 20)

Add Workbox support to cache Google Fonts on initial page load

Add a loader component for slow API responses

Should we have a skeleton instead of a loader?

Bug: updating items multiple times is adding duplicated tags

 "e728b5b5-691b-4f96-a0e6-5fd429fd19d0": {
      "creationTime": 1628786991764,
      "id": "e728b5b5-691b-4f96-a0e6-5fd429fd19d0",
      "isDone": false,
      "lastUpdateTime": 1628796235598,
      "name": "Add timer (countdown)",
      "tags": [
        "updated",
        "updated"
      ]
    }

add carousell-ish animation on mobile

https://www.framer.com/docs/animate-shared-layout/

Add option to change locale to `en-us` or `en-ca`

Dates are mostly affected by it

All but the post text should be `user-select: none`

Auto delete completed tasks (inline progress bar needed) -- 100s countdown

fix input on mobile

possibly related to #15

update README with initial `.env` configuration

There is no instruction on how to initialize the project.

Create instructions on how to add the initial ENV variables.

Clock should be updated dynamically

Every minute.
Should blink (but not very often)
User should be able to minimize it

Bug: [CHROME MOBILE ONLY] entries are not sorted by date

Clean-up task management component (using MaterialUI) to accommodate further changes

Click arrow to expand (additional row) and show controls

Add light mode for the App

Try reducing the FOUT

https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet#browser_compatibility

add favicon

Have 2 different dbs (one for dev another for prod)

update task should be inline (not on top entry input)

replace span with a input (in place)

Have CSS show conditional styling according to device support

@supports
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

media queries
https://drafts.csswg.org/mediaqueries-4/#media

How does the App behave with a max'ed out list (20 items) with 3-4 lines each on mobile?

Font for date and time is way too big on mobile

How to keep Database credentials secure. Serverless functions to the rescue?

Is this saying that my credentials are secure if stored as ENV in Vercel (and used during build step)?

• https://vercel.com/docs/environment-variables

"Task Entry" functionality should be visible/actionable at all times

Clock can be hidden when scrolling down, but not task entry. Or at least should be shown minimized or with an action button on the footer.

Suggestion: row should be CSS/Sticky

Add React Context for state management

Role unauthorized for operation: Not authorized to access tasks.tasks for SELECT (from source api: rest)

Role unauthorized for operation: Not authorized to access tasks.tasks for SELECT (from source api: rest)

Try a less restrictive role.

• Or should add SELECT permission

Layout on desktop should look like cards (and controls should be moved to a left/right sidebar)

Add Feature Flag support

• https://www.split.io/blog/feature-monitoring-tutorial/
• Maybe follow this pattern: https://www.split.io/blog/manage-feature-flags-javascript/

Add social login (Google/LinkedIn/Github/Facebook/Microsoft)

suggestion:

• Firebase https://firebase.google.com/docs/reference/js/firebase.auth.GoogleAuthProvider?authuser=0#setCustomParameters

Make an Icon component

Should leverage https://fontawesome.com/v5.15/icons/exclamation-circle?style=solid

Add support for pagination (each 20 items)

Add error handling in case API doesn't return

This screenshot illustrates the issue:

Reproduction steps / History

• This is the very first deploy to Vercel.
• No Env were configured (yet)
• API calls are running like https://undefined-undefined.astra.etc...
• fetch is returning a TypeError (it is caught by a try-catch block and returning the exception from catch).
• e: TypeError: NetworkError when attempting to fetch resource.
• So... the API response (a bad one) is being fed to the UI
• One of the things the UI does is doing some array operations on the response (sort, then map) and this is where it is errors out (unhandled error).
• TypeError: C.sort is not a function

Ideas:

• Update the return from API catch block.
• Validate response in UI, not passing down if data is not a valid Array.
• Also: can we add the famous Error Boundary here? (I know we can, but the real question is: should we?)

Bug: `handleAddTask` for newly setup db is crashing the UI

  80 |   setTaskList(newList.tasks);
  81 |   // setApiPagination(newList.pagination);
  82 |   // setTotalNumberOfTasks(newList.rowCount); //DOES NOT WORK
> 83 |   setTotalNumberOfTasks(newList.tasks.length); //TEMPORARY SOLUTION - FLAKY SINCE ITS WITHOUT PAGINATION
     | ^  84 | };

Add Cypress test

https://docs.cypress.io/guides/core-concepts/introduction-to-cypress

Add a app-wide configuration area

• Should allow changing the localed based on https://www.iana.org/time-zones

Complete tasks should be moved down

Desktop article should get Flex treatment

Fix the edit task interface

• bottom border
• icon alignment
• font sizing

Remove auto zoom on input field

Large strings (such as URL) break the task input field (becomes larger than the viewport causing horizontal scroll)

Bug: input field is not working on mobile (Chrome and Firefox)

Add skeleton for loading state on page load

On initial page load, currently show the "YOU DON'T HAVE ANY ELEMENT IN YOUR LIST" for a couple seconds until the call to the API/DB resolves and the list is populated and React renders it.

Instead I want to see a skeleton (that assumes some content is going to be returned from the API) and that will be replaced with the actual response content:

• a full list of items
• an empty array (rendering an empty list)

Clicking to edit a card with intent of setting it as "favorite" affects the non-editing input field at the top of the page (due to recent 'close-editing-mode' upon favorite/de-favorite selection)

Advanced: optimistic UI updates (and UNDO action)

It is a pain to wait for 2 API calls to fully resolve to ONLY THEN be able to continue operating with the App.

It feels weird. It should be instantaneous. API responses should come whenever AND (ONLY THEN) we will worry with a error state.

Examples:

• I will send a delete entry call
  • The app should assume the call was successfully submitted and responded at the same instance. Meaning the task should be removed from the screen upon clicking.
  • When the API returns a 200, the list is updated (maybe a new pagination, maybe a new ordering) but the user is already interacting with something else.
  • When the API returns a 400/500 response, a pop-up is displayed to the user and the response comes back with a revert operation in whatever was changed (maybe the old state of the article list has to be promoted again, since the fast one is not the most accurate given the bad response).

This implies that some actions will have to cache/keep an old state and a new state in memory. The new state always replaces instantaneously and the old state is only used when the response is bad. If response is good, old state is discarded.

Add styling and special behavior for Favorite cards

• Should go to top?
  or
• Should it simply get highlighted?

Optimize the background image

Not only make it smaller, but responsible and using source sets appropriately
Background images are hard, but a trick should be available in Stack Overflow

Add localization for Card Date