👨🏼‍💻 #Proposal-86: Navigation Implementation - Alpha Testing

in Steem Dev8 months ago

It's been another week since my last update and I've made some decent progress in getting the Navigation implemented and tested.

In the past week, I've had a bit more time than usual which has allowed me to implement the bits that I mentioned at the end of my last post:

  • Implement Navigation on Post Page
  • Include "My Subscriptions" within the navigation (it currently appears underneath)
  • Fine Tune the Design



Separator-code.png

Navigation on Post Page

As you can see in the screenshot above, I've been able to implement the Navigation in a Post view.

This presented an interesting challenge.

An individual post doesn't provide any "Location context". A post can be accessed from pretty much anywhere in the site - All Posts, My Friends, My Subscriptions, The Various Profile Pages, etc. - so what should the navigation highlight? Simply "Explore"? That didn't feel right.

So the best solution that I could come up with, was to maintain the referring page navigation. So if you're opening a post from your "My Friends" feed, that remains highlighted. This feels correct and appropriate and presented an implementation challenge...

I initially tried to find the referrer which isn't available in the browser (for privacy reasons) by looking in the react-redux store. By default, this works like the browser and whilst goBack will take you to the previous page, I want the URL rather than being automatically redirected. The next option is to install the react-redux-dom pacakge but this created compatibility issues with NodeJS 10 so I shied away from that option.

Eventually, I settled upon manually recording the "previousUrl" in the Redux Store - specifically within the AppReducer. The downside with this approach is that the "previousUrl" is lost when the page is refreshed. An irritation that I'd like to overcome and perhaps by exploring how night mode works, I could overcome this (although nightmode appears to be boolean).

Separator-code.png

My Subscriptions within Navigation

I was able to tweak the existing "Topics" component to output slightly different HTML that fits with the navigation.

Other than tweaks to some classes, very little else needed changing with this component and the next challenge is to strip out unnecessary data retrieval and processing on the component's parent pages. I've not done this yet because I wanted to get things working first so tidying up needs to go on my next to-do list.

Separator-code.png

Fine Tune Design

I've played with the spacing a little bit and been fixing plenty of bugs.

Separator-code.png

Test, Test, Test, Test, etc...

A big thank you to everybody who's helped test so far and for the feedback. I was delighted when @michelangelo3 fed back:

I felt right "at home" despite the changed navigation.

It's really important to me that the navigation doesn't feel alien to existing users and also feels intuitive to new users.

To continue alpha testing, I've uploaded the latest version of my work to the following URL:

https://condenser-web-r64jisicxa-od.a.run.app/

Please visit it, have a play and let me know what you think.

Separator-code.png

To-do List

  • Try to retain "previousUrl" state upon page refresh
  • Tidy up Parent Components (which refer to Topics)
  • Update Right Sidebar

Footer-Top-green.png

I've been brief again so please ask if you'd like more detail on anything.

Sort:  
 8 months ago 

by exploring how night mode works

In the Redux Store under the key ["app", "user_preferences", "nightmode"] is the entry for night mode.
This is toggled in the AppReducer.
I assume this won't help you...

manually recording the "previousUrl" in the Redux Store

I would try to adjust the router/LOCATION_CHANGE action so that you can save the previuosURL or location in the Redux Store.

Please visit it, have a play and let me know what you think.

I will definitely give it a try :-)
I'm already testing the finished bookmarks implementation today with my current activities on Steemit... maybe I'll have a bit more time in the next few days... without my sick tooth :-)

 8 months ago 

At the moment, I'm saving the previousUrl in the Redux Store under a new "prevoiusUrl" location. I've added this in the AppReducer and it's working the majority of the time. The scenario where it doesn't work is if you're on an individual post and refresh the page. Then the entire page state is refreshed and the previousUrl disappears. Presumably, this is where the setRouteTag differs as the SagaShared.js file intercepts the request and sends it to the ServerAPIClient to store it in a database.

I looked to see if I could piggyback on the recordRouteTag function with an additional paramater but the ServerAPIClient only sends specific paramaters so there's no generic "custom_json" style storage available.

I hope I'm making sense and sorry if I've missed an important detail in your reply 🙂

I'm looking forward to seeing (and testing?) your bookmarks implementation. Have you implemented it so that you can see other people's bookmarks or only your own? (Just thinking about slotting it into the navigation.)

 8 months ago 

A short answer for now:

Have you implemented it so that you can see other people's bookmarks or only your own?

You can see other people's bookmarks too.

I try the link for the testing environment:
Really comfortable zone you created:)

 8 months ago 

I'm pleased that you like it 🙂

I tried accessing the URL of the alpha test version. Everything looks good. I especially like the changes to the LNB. Keep up the good work.

 8 months ago 

Cool, thank you 👍🏼

This is amazing, I am really happy to be back in Steemit and to see these developments becoming a reality. Great work !

 8 months ago 

Thank you.

You were gone for a long time. What brought you back?

This post has been featured in the latest edition of Steem News...