[FEAT] Add a Feedback panel

[gbowne1]

Add a feedback panel.

We have a Feedback icon and its label in the (R) user icon dropdown menu but it currently does not do anything.

Add some sort of Feedback feature so that users could provide staff with feedback about the app

[anubhav1206]

Can I work on it?

[gbowne1]

yes you can work on it @anubhav1206

[anubhav1206]

Hey @gbowne1, I am getting some errors trying to run the web app.

[gbowne1]

@anubhav1206 screenshot?

[anubhav1206]

@anubhav1206 screenshot?

[gbowne1]

@anubhav1206

I could not duplicate the error b ut It's quite possible that error is coming from ProtectedRoutes.jsx

@LOGESH-B,

I am suggesting an update to the ProtectedRoutes.jsx as

const UserAuthenticated = () => {
  const token = JSON.parse(localStorage.getItem('token'));
  const { decodedToken, isExpired } = useJwt(token);
  console.log(decodedToken);
  let isloggedin = false;
  if (token && token.length !== 0) {
    isloggedin = !isExpired;
  }
  return <div>{isloggedin ? <Outlet /> : <Navigate to='/login' />}</div>;
};

[LOGESH-B]

@gbowne1 Yeah,Issue is resolved and pushed to master

@anubhav1206 You can pull the main repo master to work further

[anubhav1206]

@gbowne1 Yeah,Issue is resolved and pushed to master

@anubhav1206 You can pull the main repo master to work further

thanks

[anubhav1206]

Where exactly is the feedback section supposed to be placed?

[gbowne1]

Several things @anubhav1206 just to check to see where you are at in the process:

This screen is the Sign Up / Register page where you would create a user. The feedback section would not go here. You will need to create a user. We have a utility to create a test user.

There is documentation for this in /src/server/README.md

1) Have you installed both the client and the server dependencies?

This project uses MongoDB. You will need to:

Use MongoDB locally or use Mongo Atlas or even possibly MongoDB Compass. And it can also be done with the API using Postman or Insomnia if you know how to use an API.

The database name you will create is codebooker. You will need to create a mongodb user for yourself and give yourself acccess.

the .ENV should have MONGO_DB= with the standard mongodb connection string with your username and password to your local codebooker database and it should look something like: mongodb://username:password@localhost:27017/codebooker and it will also need a PORT= variable of 3001.

You should start the development process in this order:

1) start mongod with mongod 2) start Mongo shell with mongosh or the other shell mongo. I use mongosh. 2a) in mongosh, run the use codebooker command 3) change to the /src/server folder/directory and run node index.js 4) in the project root /codebooker/ run npm start to start the react development server and the app. 5) follow the steps in /src/server/README.md

@LOGESH-B and I can help you if you get this far. It looks like you have the app running though.

[gbowne1]

The feature should be able to be accessed from this menu.

[gbowne1]

Have you been able to work on this @anubhav1206 ?

[anubhav1206]

Have you been able to work on this @anubhav1206 ?

I am having trouble setting up the project, kindly consider unassigning me for this one thanks.

[gbowne1]

Hi, @anubhav1206 What problems are you having? any warnings or errors?

I can unassign you.

[vktr-r2]

Hey @gbowne1 I would like to work on this issue, please. Can you explain further how you would like feedback to be submitted or stored?

[gbowne1]

ok @vktr-r2. I can assign you.

We use MongoDB.

As for the type of feedback: feedback types could include ratings, reviews, comments, and suggestions.

The form can include fields such as rating, review text, etc.

When a user submits the feedback form, I would handle the submission process using the following steps:

• Validate the form inputs to ensure they meet the required criteria.
• Collect the feedback data from the form inputs.
• Send an HTTP request to your server to store the feedback data in the database.

In the express server we need to:

• Set up a route in your Express app to handle the feedback submission.
• Receive the feedback data from the client-side request.
• Use Mongoose (MongoDB object modeling tool) to define a schema for the feedback data.
• Create a new document based on the feedback schema and save it to the MongoDB database.

Other than that, open to ideas.

@LOGESH-B

[gbowne1]

My thoughts for this was adding Formik and Yup packages.

In MongoDB, we can create a collection to store the feedback documents. Each document will represent a piece of feedback and will contain the relevant fields such as rating, review text, and any other information you collected. I was thinking to display the feedback in the UI, implement a feature that retrieves the stored feedback from the database. This can be done by querying the MongoDB collection and returning the feedback documents to the client-side.

We will need to probably handle any necessary error checking, authentication, and authorization.

[LOGESH-B]

Hii @gbowne1 This is overall feedback of the website right? I will create a model and routes for this feedback,Is this attributes is enough

user_id (Id of the user who gave the feedback), rating(Rating in numbers), feedback(feedback_commets/review text)

[gbowne1]

yes it is, this feature is for overall site feedback.

I'm not sure about the attributes.. but I would concentrate on the

We should have a separate feedback collection, model, schema.. especially a separate collection. If you want to track who made feedback, might be easier that way by having an id key. Not sure.

[LOGESH-B]

Yeah, For our requirements this attributes is enough for now

Hii @gbowne1 This is overall feedback of the website right? I will create a model and routes for this feedback,Is this attributes is enough

user_id (Id of the user who gave the feedback), rating(Rating in numbers), feedback(feedback_commets/review text)

[gbowne1]

I thought so, but it can be basic.. we can iterate through any issues.

[LOGESH-B]

Hii @vktr-r2 You can make use the routes on user routes....please pull the latest code from master Mention your problems here if anything arise

[vktr-r2]

Thank you both for the guidance. I plan to get started on this tonight after work

[vktr-r2]

Hey @gbowne1 just want to make sure I'm on the right track with how the feedback panel appears before proceeding with the form and submission to db ...

Currently on click the panel appears on the right side and then when closed or feedback submitted is disappears. Is that okay?

Also regarding displaying existing feedback, should this be displayed in the same panel? I was thinking of displaying a list of existing feedback in the bottom third portion of the same panel.

[gbowne1]

@vktr-r2

I will definitely entertain some ideas with this. We can always iterate around design, UX, etc.

What you have right now looks good to me so far.

Just make sure that this feature is accessible from the:

I always prefer a cover page (hiding the background with a modal in the front), a modal, etc.. but that may also not be the best UI/UX.

Existing feedback should only be showed to anyone logged in as Staff, Admin, etc. so maybe that's a separate feature of the Feedback feature, so I guess ideally that would be a protected route for an existing feedback page.

Others could chime in here with their ideas.

@ratishjain12 @BlackBond06 @LOGESH-B

[vktr-r2]

Yup the panel appears on click of "Feedback" currently. I dont mind switching it to a modal though.

I thought the idea was to display to all users some positive feedback that the site has recieved like the top reviews, thats my misunderstanding. In that case my suggestion may not be the best

[gbowne1]

It's not a review panel for posting reviews. That would be on the marketing site, at least in my experience.

This feature is for sending the staff, admins, a message when a user has issues/etc. with the app in production/hosted. It's generally a form with some contact information for the staff (probably a email like feedback@example.com, and it would a text area, with their username, email, etc. and a send button.

[BlackBond06]

I totally agree with @gbowne1, the feedback should only be visible to admins. Then again should the feedback be sent to the dB? or the apps mail address?. If the feedback is to visible to admins on the app then it should ideally be sent to the dB where it can be pulled from, and as such, should have its own model and stored as a separate collection in the dB.

[gbowne1]

In my opinion, yes it should have it's own model, schema and collection.

I also agree storing in the database the feedback.

I guess the user could ideally choose how they wish to send feedback, email or through the form. Make a choose which switches the state and context depending on which choice they make.

Formik can do this pretty good.

[vktr-r2]

Hey @gbowne1 I just wanted to check in again to make sure I am understanding you correctly. Using Formik and a new modal I've done the following...

• First allow user to pick how they would like to submit feedback

  

• If "Leave us a message" is selected, feedback will be submitted to database (including rating and userid)

  

• If "Send us and email" is selected, form will send an email to desired email address (including rating, userid and use remail)

  

Still to-do:

• Styling forms
• Submission of first form to backend
• Submission of second form via email

Am I understanding everything correctly?

Also just wanted to mention that I'll be away until Monday so I'll have to finish the submission functionality next week.

Thank you

[gbowne1]

@vktr-r2

I think that this is pretty good so far. And, yet it seems like you're understanding it correctly. That looks great so far.

Take your time working on it and submit when you're ready. I'm all for quality over quantity.

[gbowne1]

@vktr-r2

Just checking in to see what progress you've made. Hope all is going well.

Again, Let us, me, @LOGESH-B and @BlackBond06 know if you need anything.

[vktr-r2]

@gbowne1 thanks for checking in. All is well.

I'm actually working on this as we speak. Submitting feedback to the db via the direct form is now working, I just need to work a small bug with the rating always submitting as '0' currently. After that I will look to get started on the second form submitting via email.

[gbowne1]

@vktr-r2

I just wanted to check in and follow up to see where you were with this.

Glad to hear all is well. Make sure and use the GitHub issue reporting for Bugs as well so that everything gets documented, even if they are minor issues, especially issues found in the browser console and dev tools.

Thanks so much

[vktr-r2]

@gbowne1

Couple questions for you today:

• My day job involves a lot of bug reporting so I'm comfortable creating new issues. Do I have permission to file new Issues in your project even if they're unrelated to the feedback feature itself?

• For emailing the feedback, I've never worked with email functionality in JS. How did you want to handle sending the email? Should I be looking for a free API service to send the email from the server to a generic email address you maintain?

Thank you

[BlackBond06]

@vktr-r2 We already have nodemailer installed and it handles resetpassword functionality. It will cover sending email from the server. As for a formal email address for the app, I'm eager to hear about this from @gbowne1 because I need for the support/help feature too.

[gbowne1]

@vktr-r2

Thanks for your questions.

Anyone working on the project has my full permission to buy report anything they find no matter if it is related to what they are working on or not, or what type of issue or bug it is.

One of the best ways we can improve is by eliminating bugs, errors and warnings and other problems with things that just don't look or work right.

One of my personal goals is to be as bug free as possible and also strive to have as little console errors in Firefox and Chrome (Multiple Platforms)

2nd, nodemailer is already being used to send email during the login registration forgot and reset password process so it could be adapted to send other emails to the user. I don't know of any APIs for this but you're welcome to investigate that.

Again, thanks for your input and questions and your contributions. :-)

[gbowne1]

As for an actual email, I don't have one available so just follow the RFC and use a example.com email which is perfectly legal. We can change the email when we are in Production.

[vktr-r2]

Oh I didn't think to look at the existing code for pw reset. Thank you both

[vktr-r2]

Okay the MVP functionality is complete (see below)🙌. I'm open to feedback for changes. This weekend I will style the feature and it should be complete for PR review.

Afterwards I'm open to work on admin dashboard where DB feedback can be viewed but can we work on that under a different issue/PR? (I'm literally just trying to increase my GH PR counts). If yes, I will file a new Issue on the project and we can chat about how an admin would register first.

Thanks!

https://github.com/gbowne1/codebooker/assets/122321007/3a11a74a-3d6f-4a57-b7b5-861ebf07ca5d

[gbowne1]

That's some awesome excellent work. Looks great. I like it.

We can always iterate through design. In development I prefer working over looking good. We can always test and have users provide us some UI and UX feedback.

I am looking forward to reviewing your PR.

No rush at all. Submit the PR when you think you're ready.

Thanks for including screenshots and a video.

As I said before, open any issues or bugs. If it's an action item use a TODO tag. If its something that needs discussion and isn't specifically a bug use the Discussion tab.

There is also a feature request thing on GitHub to for submitting ideas for new features