New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Both: Integration of discussions #705

Closed
sylque opened this Issue Oct 20, 2018 · 26 comments

Comments

Projects
None yet
4 participants
@sylque
Copy link
Contributor

sylque commented Oct 20, 2018

The plan is to have Discourse discussions (discuss.focallocal.org) directly available within the application.

When on a BTM page like this one (guess what, such a page is called a "Page" in the application :-), you could click on some links/buttons/whatever and have related discussions displayed on the right.

Here is an example of what we want to achieve (on a third-party web site, not related to Focallocal): http://dcs.link/kzdf8p. To see it in action, click an orange balloon.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Here is a fork to work on this: https://github.com/sylque/fl-maps
As a first step, I implemented a very basic UI to display the Focallocal forum on the right.

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

I have checked the link it looks great, so I guess as you have mentioned we need to add those buttons to take to the discourse from anywhere.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Here is how I see this:
1- One or more React devs should take it from here and be responsible for the UI part
2- I would focus on the "backend" part (communication between the UI and Discourse)

On the UI part, what needs to be done is:

  • Cleanup my dirty React code
  • Redesign the Page component to have the Discourse interaction (more on this below)
@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

I can take the react part, It would be good if there is one more for the designs or to do the clean up.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Regarding the Page component (like this one), here is a rough idea from Andy:

He said: "i think the top two should be above 'about' and the bottom two just above the map"

Then I implemented this:

But he said he got used to the balloons and he would love to have them back.

That's the state of the design right now. What's needed is someone to take it from here.

@AndyatFocallocal

This comment has been minimized.

Copy link
Member

AndyatFocallocal commented Oct 20, 2018

i think balloons are better than blue links, as they stand out from ordinary site links so once a user becomes familiar with our site they will quickly know what that means, where with a blue link it will always be a guess if it is opening the forum or taking the user to an external site

@AndyatFocallocal

This comment has been minimized.

Copy link
Member

AndyatFocallocal commented Oct 20, 2018

i'm happy to help with designs. i've been working with the UX/UI guys on our site and think i'm fairly competent now (with the occasional habit of making things too complicated)

@OlivierJM is this ok to merge now?

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

I have cloned @sylque's fork, I am going to take and see what can be improved and how those ballons can be added.
Thanks

@AndyatFocallocal

This comment has been minimized.

Copy link
Member

AndyatFocallocal commented Oct 20, 2018

ok, great. give me a shout when you want it merged. Great to have you both here!

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

I will do that @AndyatFocallocal.
@sylque Thanks for the clear guidance

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Notice that the current fork doesn't have the changes to the Page component, only the changes. to the App component. So there is no blue link in the current repo.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

@OlivierJM, let me know if you want me to commit the changes to the Page component, but it's so dirty you might prefer to start from scratch.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Also, on the React side, we need to integrate the feature with the router.

Suppose a user opens the right panel, then copies the url from the address bar and send it to a friend. When the friend opens the link, we want to restore the same page state, i.e. with the right panel opened.

The state of the right panel is described like this:

  1. Is the right panel opened or closed?
  2. Does it contain a topic list corresponding to an orange balloon? If it does, which Discourse tag?
  3. Does it contain a topic corresponding to an orange balloon? If it does, which topic id?
  4. Does it contain another Discourse page? If it does, which page?

In the past, what I did is to add 4 search params in URLs. Suppose we call them dcsr, dcsl, dcst, dcsd. The result are urls of the form:

// Right panel opened
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcsr=1&dcsl=wall
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcsr=1&dcst=383
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcsr=1&dcsd=%2Fu%2Fsyl%2Fmessages

// Same with right panel closed
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcsl=wall
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcst=383
https://brightertomorrowmap.com/page/wsbM4AKFywAJDhySP?dcsd=%2Fu%2Fsyl%2Fmessages

Any thoughts about this? Anyone familiar with the React Router?

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

Heyy @sylque you can commit the changes, I will try and see if I can maintain the state in the router if not I will ask help from @ydaniel98 .

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Ok. I need 30 minutes.

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

Alright, I am heading out to look for a better internet, I should be there in less than 30 minutes, don't worry about how dirty it is, I will do my best to clean things up.

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 20, 2018

Ok, here is the commit:
sylque@1678c8f

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

Alright I just arrived.

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

Heyy @sylque can you create a pull request so that I see the changes, I checked your fork, I can't access them but am able to see them here on github.

@OlivierJM

This comment has been minimized.

Copy link
Member

OlivierJM commented Oct 20, 2018

I think I have gotten it, I had not checked out the docuss branch.

@AndyatFocallocal AndyatFocallocal changed the title Intregration of discussions Both: Intregration of discussions Oct 21, 2018

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 21, 2018

Things remaining to be done:

  1. Moving Olivier's code to the App so that search params are managed at the App level (whatever the page).
  2. Adding a selection indicator to ‘Photos’, ‘Videos’, etc. so that we can see which one is selected.
  3. Completing the onDiscourseRouteChange hook. There is a little trick there I will need to explain. It will require requesting some Meteor collections.
  4. Checking with Andy about the UI and making final adjustments.
@DnMcky

This comment has been minimized.

Copy link

DnMcky commented Oct 21, 2018

are there to be selection indicators on every page?

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Oct 21, 2018

Right now we only have orange balloons on the Page component. In the future, there will also be balloons in other pages. Today's deadline is only for the Page component, but you can design something broader if you want.

@DnMcky

This comment has been minimized.

Copy link

DnMcky commented Oct 21, 2018

ah cool, i think ill stay within the original scope

@DnMcky

This comment has been minimized.

Copy link

DnMcky commented Oct 21, 2018

@sylque whats the best way for me to get the work I have done into your forks branch?

I had cloned your fork and was working in the branch, just realised I cant push to it though

@sylque

This comment has been minimized.

Copy link
Contributor

sylque commented Nov 10, 2018

Integration of discussions is done. For additional feature requests and bug reports, please create new Github issues.

@sylque sylque closed this Nov 10, 2018

@sylque sylque changed the title Both: Intregration of discussions Both: Integration of discussions Nov 10, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment