[Feedback] User Edit

[Acrylic125]

PR #96 Imrpovements

Feedback 1 - Data fetching mechanism

Standardise the data fetching mechanism as shown below:

queryFn: async () => {
  const { data, error } = await supabase.from('users_comments').select('*').eq('userid', userid);
  if (error) throw error;
  return data;
}

Why the proposed approach is better? Supabase does not throw an error, instead, it returns it as part of the result when the data is returned. This pattern is IDEAL and react query already provides us with an isError, and error data from each query. However, react query will not recognise it as an error when we return it directly from the supabase result, therefore you cannot source from react query whether an error occurred or not.

In an effort to standardise, to reduce confusion, the method I am proposing will cater to most cases when we need to handle errors.

Feedback 2 - Breaking down components

Consider breaking it down further. I suggest breaking this component down to, EditUserPage, EditUserFormWrap, and EditUserForm.

The responsibility of the EditUserForm is to hold the logic for the form, i.e.. validation logic, form and fields. The responsibility of the EditUserFormWrap is to hold the logic for data fetching and mutations. The responsibility of the EditUserPage is to hold the form wrap and other components associated with the page.

This way, we can improve the readability of the code.

Feedback 3 - Remove QueryClientProvider from Pages

QueryClientProvider and QueryClient is already provided in _app.jsx. You may remove this and QueryClientProvider.

Feedback 4 - Add in auto fill for form fields in user edit form.

[github-actions[bot]]

This issue is stale because it has been open 1 day with no activity. Remove stale label or comment or this will be closed if it remains stale for 1 week.

[github-actions[bot]]

This issue has been automatically closed because it received no activity for 1 week. If you think it was closed by accident, please leave a comment. Thank you.