[FEATURE] Better question submission flow

[ykdojo]

Description

When a user submits a question, there should be a better indication to show that the question has been submitted successfully.

[epicadidash]

@ykdojo would love to work on this

[adilwahla]

there should be some kind of confirmation that yes your questions has been submitted successfully thanks @ykdojo for early detection of issue :) i just submitted question and found this issue ...looking to contribute in other things

[ykdojo]

@adilwahla thank you so much. Would you like to take this issue though?

[adilwahla]

Sure if you give me bit direction as well 🤠

[ykdojo]

@adilwahla how would you approach it if it were up to you?

[epicadidash]

@ykdojo we achieve this using promises , if function onSubmit successfully posts it , Then we can show user a basic javascript alert or a custom made alert containing your question successfully submitted or else question could not be submitted in case it fails .

[adilwahla]

@ykdojo i would make button size increased horizontally and upon successful question submission it will turn green else red OR what about react toastify?
open to suggestions as well

[adilwahla]

used submit message ...can make div pretty

[epicadidash]

@adilwahla

It will not look good , We can show it at the top instead

[ykdojo]

@adilwahla what do you think of transitioning to a different page entirely?

[adilwahla]

ok new page should show message like "Successfully submitted" would you like to add more questions? ->button to come back
does it makes sense?

[ykdojo]

Sounds good!

[epicadidash]

Yes

[adilwahla]

@ykdojo its done ! please have a look I am opening PR

[adilwahla]

please check out i have made video
https://www.awesomescreenshot.com/video/11525877?key=371821889405da656419b58003392b21

[adilwahla]

@adilwahla what do you think of transitioning to a different page entirely?

followed this & i am just thinking we can add this transition to when every page to page transition occurs ! does it makes sense

[ykdojo]

Checked the video. After the transition, I think it should go to a separate page to indicate that the question has been submitted successfully?

[Akshay1018]

My suggestion is to add a popup for the successful confirmation and we can add the button(Add more?) on the popup So that users can add more questions. If the user clicks on Add more we will redirect to the /questions/new page.

[Akshay1018]

@ykdojo My approach is to check the status of the response that we are getting after making an API call on submitting the form. If the response status is 200 then we can show the Modal(i.e. popup) otherwise errors will be displayed.

[adilwahla]

Checked the video. After the transition, I think it should go to a separate page to indicate that the question has been submitted successfully?

sure I will update it

[ykdojo]

@Akshay1018 that approach might work, too. @adilwahla, what do you think?

[adilwahla]

yes sure

[Akshay1018]

@ykdojo shall I take this issue and work on it?

[ykdojo]

@Akshay1018 please decide with @adilwahla, but yes feel free to start working on it

[adilwahla]

[adilwahla]

@Akshay1018 together we will add value to DEFAANG I love pair Programming <3

[adilwahla]

@ykdojo checkout please
https://www.awesomescreenshot.com/video/11558985?key=f6b3c2d268ed28298fb820b5c196deb5

[Akshay1018]

@adilwahla I looked at the video and the message is great but I'm a bit curious to know do we need to show the success message on a different route(/success). why not be on the same page?

[adilwahla]

@Akshay1018 the reason is we want to make question submit flow better & that the user should feel like he has achieved something what he intended for @ykdojo has similar suggestions !
Now one point is raised should we add another button for back to home if user doesn't chose to submit another question @ykdojo your thought? plz

[Akshay1018]

[Akshay1018]

@adilwahla this is how the page will look like. when you will click on submit, it will check the response code, and based on the success code it will show a message like this. By clicking on Add more? button it will land us on the same page.

If we are adding back button on the /success page then again we will be on the same page. I think we need to check whether we need an extra route or not, We can optimize by showing messages on the same route.

[Akshay1018]

I will style this popup by adding a success icon and button also.

[adilwahla]

I did that previously but I think moving to new page is better idea i guess; it gives a better flow; just think for layman submitting question. Secondly Defaang is going to make further theme changes & i think new page suits
@ykdojo can give better idea !

[Akshay1018]

@adilwahla Yes, I think two options we have now. @ykdojo any luck with this solution?

[ykdojo]

I think this one looks pretty clear:

[Akshay1018]

@ykdojo Thanks, I will test, commit the code, and will make PR soon. You can test on your end and merge.

[adilwahla]

@ykdojo what if user doesn't want to further submit question & want to move on discussion page or home page ?
i think we should let users to navigate other pages as well your thoughts ?

[Akshay1018]

@adilwahla if the user wants to add more questions, the user can click on "Add more?" button and will be rendered on the same page. Coming to the discussion page and home page, I think we need to add the navbar on every page, by clicking on the product logo, the user will be navigated to the home page. For the discussion section, we can add a separate card on the right side of the main section. @ykdojo What do you think?

[ykdojo]

@Akshay1018 sounds good! It's hard to tell without having a visual element though.

[Akshay1018]

@ykdojo I'll work on it and update the progress.

[Akshay1018]

@ykdojo by the way, do we need a discussion section? if yes, then where it should be?

[ykdojo]

We probably should. We don't know where it should be yet!