Hylozoic / hylo-evo

Hylo UI
Apache License 2.0
36 stars 10 forks source link

add Duplicate Post option to post action menu #1585

Closed tibetsprague closed 5 months ago

tibetsprague commented 7 months ago

Add a new menu item to the "three dot" menu in the PostHeader called "Duplicate". This will open up the Create/Edit post modal (called the PostEditor component) and pre-populate it with all the data of the previous post, with the title changed to "Copy of [original post title truncated to fit into 80 characters with Copy Of at the front]", so that the user can edit the title, dates, content, etc. before they post it.

One thing to test is whether this works ok for setting up the location object (make sure the new post appears on the map at the right location) and for the link preview (the link preview shows up in the post).

I will get you an icon for the Duplicate item soon!

old idea for reference, not doing this: There's a few ways to accomplish this. All the data could be passed to the CreateModel and then down to the PostEditor via url parameters. We already have this option for lat/lng when a post is created by clicking on the map. But i don't think that would work for a very long description. Another option is to add a new "action" to the PosteEditor component. Right now we have 2 actions "create" and "edit". You would add a "copy" action. So then the URL you would open to duplicate a post with an id of 12345 would be /groups/xxxx/post/12345/copy. This would allow the PostEditor to pull the data from the store for the existing post. The main difference is that the Save button would change to say Duplicate, and when you click it it would call createPost instead of updatePost. That's probably the way to go.

KevinTriplett commented 7 months ago

Just so I know the terms, is this an example of a PostCard? The representation of a post in the list views?

Screenshot 2024-02-08 at 9 12 38 PM
tibetsprague commented 7 months ago

Yes!On Feb 8, 2024, at 7:13 PM, Kevin Triplett @.***> wrote: Just so I know the terms, is this an example of a PostCard? Screenshot.2024-02-08.at.9.12.38.PM.png (view on web)

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

tibetsprague commented 7 months ago

That’s also the name of the component. You an inspect and see it in the DOM too. On Feb 8, 2024, at 7:13 PM, Kevin Triplett @.***> wrote: Just so I know the terms, is this an example of a PostCard? Screenshot.2024-02-08.at.9.12.38.PM.png (view on web)

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

tibetsprague commented 6 months ago

@KevinTriplett actually, i changed my mind about how this should work. Instead of creating the new post and then immediately opening it, it should open the Create/edit post modal (called the PostEditor component) and prepopulate it with all the data of the previous post, along with the "Copy of...." title, so that the user can edit the title, dates, content, etc. before they post it. I will update the main description too

KevinTriplett commented 6 months ago

I agree, I was going to suggest opening it for edit -- but I think you added a good point, that it not be created in the backend until the user submits it from this modal. That way, if the user changes their mind and cancels, no harm, the DB is not touched.

KevinTriplett commented 6 months ago

BTW, do I or will someone else add Spanish translation for "Duplicate Post"?

tibetsprague commented 6 months ago

Ok I updated the description with ideas for how to do this!

It would be great for you to add the translation. This means adding the text to en.js and es.js and using the t() function to translate it as you will see all across the app

thomasgwatson commented 6 months ago

BTW, do I or will someone else add Spanish translation for "Duplicate Post"?

A google translate will work for now. We'll try to get the translations periodically reviewed, to ensure accuracy

KevinTriplett commented 5 months ago

My friend (from Mexico) suggested "Duplicar" for the translation.

I need to get on a zoom call with someone to discuss the process for this, I'm having some confusion that I'm sure can be cleared up within 15 minutes

thomasgwatson commented 5 months ago

Kevin, great to hear from you. I just got back to California to find my campervan has been ransacked. So a bit distracted by that.

I'm somewhat assuming that one would need to navigate to the /create modal for posts. There are numerous instances you can look at of useRouter, and you can search for createPath to see how the path is created (which could also be used for a regular anchor Link button). As for the duplicated data: probably easiest to stuff it into localStorage (if you search localStorage you can see other instances of how we have used localStorage), and check that whenever the create component is opened. Of course, one will want to avoid stale data in the localStorage, or the next time they go and create a post it will be there as well. Perhaps they should only check the local storage on a conditional query-string param in the url?

-Tom

On Wed, 20 Mar 2024 at 06:59, Kevin Triplett @.***> wrote:

My friend (from Mexico) suggested "Duplicar" for the translation.

I need to get on a zoom call with someone to discuss the process for this, I'm having difficulty understanding the store and how to trigger an event in React (editPost in this case)

— Reply to this email directly, view it on GitHub https://github.com/Hylozoic/hylo-evo/issues/1585#issuecomment-2009640427, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHT4AU5W5EB7FD3O6HPH63YZGI3XAVCNFSM6AAAAABC6WWZYGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMBZGY2DANBSG4 . You are receiving this because you commented.Message ID: @.***>

KevinTriplett commented 5 months ago

Thanks for writing Tom - dag! Sorry to read about your van, that's my fear everytime I leave my truck camper somewhere.

I can respond, now that I have a pseudo plan to propose: can I co-opt the built-in edit action by adding this test: If "duplicate" then modify the title and spoof the action as create? Might that work?

thomasgwatson commented 5 months ago

The edit button (in the menu on the postDetail view) goes to the URL prior-path/post/<postId>/edit

I'd add an action here (not sure if we are only allowing duplication of posts by the authors or what but that is handled by the onClick being a real function or not)

const dropdownItems = filter([ { icon: 'Pin', label: pinned ? t('Unpin') : t('Pin'), onClick: pinPost }, { icon: 'Edit', label: t('Edit'), onClick: editPost }, { icon: 'Copy', label: t('Copy Link'), onClick: copyLink }, { icon: 'Flag', label: t('Flag'), onClick: this.flagPostFunc() }, { icon: 'Trash', label: t('Delete'), onClick: deletePost ? () => deletePost( t('Are you sure you want to delete this post?')) : undefined, red: true }, { icon: 'Trash', label: t('Remove From Group'), onClick: removePost, red: true } ], item => isFunction(item.onClick))

And then creating an function in PostHeader.connector.js that uses the createPostUrl from navigation.js. This function has the arguments (opts = {}, querystringParams = {}) so you can add querystrings super easy.

Whatever we add to the queryString (probably something like ?duplicate=<postId>), it needs to change the behavior of the component that renders from the createPostUrl (the component is PostEditor). Probably in the PostEditor.connector.js, you'll want to check for whatever queryString you put and use the postId from that to look up the data for that postId, and then pass that into the PostEditor. Then you'll have the desired endstate; the post editor open with a bunch of the fields pre-filled with data from the prior post.

Does that make sense?

On Mon, 1 Apr 2024 at 18:09, Kevin Triplett @.***> wrote:

Thanks for writing Tom - dag! Sorry to read about your van, that's my fear everytime I leave my truck camper somewhere.

I can respond, now that I have a pseudo plan to propose: can I co-opt the built-in edit action by adding this test: If "duplicate" then modify the title and spoof the action as create? Might that work, rather than create a new action?

— Reply to this email directly, view it on GitHub https://github.com/Hylozoic/hylo-evo/issues/1585#issuecomment-2030898162, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHT4AUVBADUA4RLFFO2RXTY3IAOPAVCNFSM6AAAAABC6WWZYGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZQHA4TQMJWGI . You are receiving this because you commented.Message ID: @.***>

KevinTriplett commented 5 months ago

Thanks, Tom! That jives quite nicely with what Tibet and I independently crafted this afternoon, so it's good to get confirmation. It works (yay!), now I need to add a bunch of tests 😅.

@tibetsprague agreed to add the 'duplicate' icon to the master branch, so when my PR is merged it should seamlessly pick it up.

Regarding authorization for duplicating, does Hylo allow restriction of post creation? If not, then anyone should be able to duplicate a post, it seems. They could do this now, manually.

KevinTriplett commented 5 months ago

@tibetsprague and @thomasgwatson -- one side effect is that the Post button is not enabled until the title is changed. Advantage: forces the user to change the title (which they likely will) Disadvantage: it forces the user to figure out why the Post button is not enabled. They poke around until they discover that the title has to be changed, which might be frustrating / frictionfull

Thoughts? I haven't poked around the code to find out what enables the Post button but I suspect it's triggered by the title field change/keydown/press event.

thomasgwatson commented 5 months ago

In the PostEditor, you'll see references to a state.valid, that is tracking the validity of a post and thus whether the post button is enabled or not. When in create mode, the initial PostEditor state for valid is false. So you should just be able to make a small change to the buildStateFromProps method on the PostEditor and that will avoid the button disabling

On Wed, 3 Apr 2024 at 17:18, Kevin Triplett @.***> wrote:

@tibetsprague https://github.com/tibetsprague and @thomasgwatson https://github.com/thomasgwatson -- one side effect is that the Post button is not enabled until the title is changed. Advantage: forces the user to change the title (which they likely will) Disadvantage: it forces the user to figure out why the Post button is not enabled. They poke around until they discover that the title has to be changed, which might be frustrating / frictionfull

Thoughts? I haven't poked around the code to find out what enables the Post button but I suspect it's triggered by the title field change/keydown/press event.

— Reply to this email directly, view it on GitHub https://github.com/Hylozoic/hylo-evo/issues/1585#issuecomment-2035841891, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABHT4AVBNZAOVW7KIP3HJ2TY3SL5BAVCNFSM6AAAAABC6WWZYGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDAMZVHA2DCOBZGE . You are receiving this because you were mentioned.Message ID: @.***>

KevinTriplett commented 5 months ago

Thanks Tom, that did the trick -- I'll issue the PR in a few minutes