Issue 662 area order and sorting #696

tedgeving · 2023-02-09T20:35:09Z

Work In Progress Addresses part of the following Issue
#662

DND Library has been (https://github.com/atlassian/react-beautiful-dnd) added to the Area edit page
https://github.com/OpenBeta/open-tacos/blob/develop/src/components/edit/AreaCRUD.tsx#L43

vercel · 2023-02-09T20:35:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
open-tacos	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 20, 2023 5:37pm

vnugent · 2023-02-09T21:27:39Z

Nice! Can you check the preview build? The list is showing up twice
https://open-tacos-git-issue-662-area-order-openbeta-dev.vercel.app/crag/793d57d9-1f16-5457-8810-cc4e05e07421

tedgeving · 2023-02-10T21:33:50Z

@vnugent Removed the duplicate listing.

vnugent · 2023-02-15T15:20:12Z

@tedgeving what do you think if we merge this PR now and create a follow up one when the backend functionality is done?

tedgeving · 2023-02-15T21:30:41Z

@vnugent that works for me.

vnugent · 2023-03-22T15:48:24Z

@tedgeving any chance you can revive this PR?

If you can rebase the PR with develop and get the drag-n-drop UI working again, I can finish the backend integration part.

tedgeving · 2023-03-22T16:23:53Z

Let me take a look at it, should not be a problem. Thanks for keeping me posted, have been busy with the day job and chasing the good snow we've had here in NM. Hoping to get to contributing again soon.

…

On Wed, Mar 22, 2023 at 9:48 AM Viet Nguyen ***@***.***> wrote: @tedgeving <https://github.com/tedgeving> any chance you can revive this PR? If you can rebase the PR with develop and get the drag-n-drop UI working again, I can finish the backend integration part. — Reply to this email directly, view it on GitHub <#696 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAF5E4PKG7AUDN6DRJCLZ3W5MNNHANCNFSM6AAAAAAUXAG72Y> . You are receiving this because you were mentioned.Message ID: ***@***.***>

glassbead0 · 2023-04-04T01:10:35Z

I love this feature or ordering areas! Just tracking down the current progress and I see the backend work is done, and looks like the frontend is still a WIP.

I'm curious if it makes sense to implement the area sorting UI using the same CSV Power Editor that is used for route sorting (cut/paste areas in the order you want), instead of a drag and drop. While I think drag and drop is just fine, it does create inconsistency. I have limited time to help with this (and no experience yet with the tech stack), but if I do get time I will start looking at code to see if I can help at all.

zichongkao · 2023-05-17T22:05:00Z

@vnugent Two outstanding problems:

In testing, I'm hitting the duplicate index error for leftRightIndex. I think it's because I'm sending [{areaId: .., leftRightIndex: 0}, {areaId: .., leftRightIndex: 1}, .., {areaId: .., leftRightIndex: <# of childareas -1>}] and when we try to set the leftRightIndex to be 0 for the first item, there is already another entry in the db with leftRightIndex 0, so throws the error even though later on, that item's leftRightIndex will replaced by a different entry. I could reset everything to -1 and then reassign, but it's not that elegant. Curious if you have a better approach in mind.
The drag and drop works fine in a single column, but you can't drag things across two columns. It doesn't detect the x coordinate, only the y coordinate, so it thinks you're dropping it into the leftmost column. Basically I think react-beautiful-dnd only supports either horizontal or vertical lists. When we have two columns, we need both directions.

tedgeving · 2023-05-17T22:53:52Z

The previous version was only one column in the edit mode to avoid this issue IIRC… On May 17, 2023, at 4:05 PM, zkao ***@***.***> wrote: @vnugent Two outstanding problems: In testing, I'm hitting the duplicate index error for leftRightIndex. I think it's because I'm sending [{areaId: .., leftRightIndex: 0}, {areaId: .., leftRightIndex: 1}, .., {areaId: .., leftRightIndex: <# of childareas -1>}] and when we try to set the leftRightIndex to be 0 for the first item, there is already another entry in the db with leftRightIndex 0, so throws the error even though later on, that item's leftRightIndex will replaced by a different entry. I could reset everything to -1 and then reassign, but it's not that elegant. Curious if you have a better approach in mind. The drag and drop works fine in a single column, but you can't drag things across two columns. It doesn't detect the x coordinate, only the y coordinate, so it thinks you're dropping it into the leftmost column. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

vnugent · 2023-05-18T05:04:30Z

Unfortunately, wrapped list isn't supported by the DnD library. See this long discussion: atlassian/react-beautiful-dnd#316

An alternative? https://github.com/clauderic/dnd-kit

zichongkao · 2023-05-18T06:49:41Z

Yup -- that's what I landed on too. Seems pretty mature and well-supported. Now we can handle multiple columns:

zichongkao · 2023-05-18T07:24:00Z

Next up, we'd have to update src/components/crag/cragTable.tsx to do the same there.

zichongkao · 2023-05-19T20:25:18Z

A good place to play with the functionality is https://open-tacos-git-issue-662-area-order-openbeta-dev.vercel.app/crag/f3c655b6-9c95-597f-aaa6-fd7d8a4865ec

zichongkao · 2023-05-20T06:19:30Z

src/components/crag/cragSummary.tsx

@@ -117,7 +117,7 @@ export default function CragSummary ({ area, history }: CragSummaryProps): JSX.E
   * Initially set to the childAreas prop coming from Next build, the cache
   * may be updated by the users in the AreaCRUD component.
   */
-  const [childAreasCache, setChildAreasCache] = useState(childAreas)
+  const [childAreasCache, setChildAreasCache] = useState(sortByLeftRightIndex(childAreas))


One question worth discussing is whether we should be sorting in the frontend or backend. You could argue that frontend is better if we want to allow dynamic sorting (L->R, Alphabetical, Most children) one day, so the backend result remain invariant and can be cached. Backend sorting just simplifies frontend code a bunch especially in the case where we always sort L->R.

I realize that for areas, L->R sorting doesn't make too much sense because areas aren't lined up on a wall like climbs. So the main purpose of the sorting here is just a stable ordering. If stability is what we care about, then perhaps no point enabling multiple sort orders for areas, which would lead to backend sorting being better.

For now I'm just following the design pattern of climbs, and doing sorting on the frontend.

All good points. Agreed we should sort in the backend. Can you create a backend issue?

OpenBeta/openbeta-graphql#294 Sounds good. I can work on this next.

vnugent · 2023-05-20T17:24:28Z

src/components/edit/AreaCRUD.tsx

@@ -4,9 +4,28 @@ import { AreaSummaryType } from '../crag/cragSummary'
 import { DeleteAreaTrigger, AddAreaTrigger, AddAreaTriggerButtonMd, AddAreaTriggerButtonSm, DeleteAreaTriggerButtonSm } from './Triggers'
 import { AreaEntityIcon } from '../EntityIcons'
 import NetworkSquareIcon from '../../assets/icons/network-square-icon.svg'
+import React, { useState } from 'react'
+import useUpdateAreasCmd from '../../js/hooks/useUpdateAreasCmd'
+import { useSession } from 'next-auth/react'


Not super important. I usually place library imports at the top and then our own stuff. ts-standard doesn't enforce this rule but I think it helps you quickly gain some context when scanning the import section.

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

package.json

tedgeving self-assigned this Feb 9, 2023

tedgeving had a problem deploying to Preview February 10, 2023 21:22 — with GitHub Actions Failure

tedgeving closed this Feb 15, 2023

vnugent reopened this Mar 22, 2023

vnugent temporarily deployed to Preview March 22, 2023 15:48 — with GitHub Actions Inactive

zichongkao force-pushed the issue-662-area-order branch from f61cec3 to 7dc84c8 Compare May 17, 2023 19:58

zichongkao temporarily deployed to Preview May 17, 2023 19:58 — with GitHub Actions Inactive

zichongkao had a problem deploying to Preview May 17, 2023 21:17 — with GitHub Actions Failure

zichongkao temporarily deployed to Preview May 17, 2023 21:39 — with GitHub Actions Inactive

zichongkao had a problem deploying to Preview May 18, 2023 06:49 — with GitHub Actions Failure

zichongkao had a problem deploying to Preview May 18, 2023 07:10 — with GitHub Actions Failure

zichongkao had a problem deploying to Preview May 18, 2023 07:16 — with GitHub Actions Failure

zichongkao force-pushed the issue-662-area-order branch from a845dfe to 9831fcc Compare May 18, 2023 07:21

zichongkao temporarily deployed to Preview May 18, 2023 07:21 — with GitHub Actions Inactive

zichongkao mentioned this pull request May 18, 2023

updateSortingOrder for areas allows re-sorting in-place OpenBeta/openbeta-graphql#293

Merged

tedgeving added 2 commits May 19, 2023 13:36

incremental

c0bbf61

incremental

5b11566

tedgeving and others added 3 commits May 19, 2023 13:36

change

49a3a99

AreaCRUD calls new updateAreaSortingOrder endpoint

1f593fa

Fix lint and type errors

b9fe72c

zichongkao force-pushed the issue-662-area-order branch from 9831fcc to 7110cb3 Compare May 19, 2023 21:31

zichongkao temporarily deployed to Preview May 19, 2023 21:31 — with GitHub Actions Inactive

zichongkao requested a review from vnugent May 19, 2023 22:18

zichongkao changed the title ~~WIP Issue 662 area order and sorting~~ Issue 662 area order and sorting May 19, 2023

Use dnd-kit

47a87c5

zichongkao force-pushed the issue-662-area-order branch from 7110cb3 to 47a87c5 Compare May 20, 2023 05:17

zichongkao temporarily deployed to Preview May 20, 2023 05:17 — with GitHub Actions Inactive

Frontend sorts child areas by leftRightIndex

0b40e7b

zichongkao temporarily deployed to Preview May 20, 2023 06:12 — with GitHub Actions Inactive

zichongkao reviewed May 20, 2023

View reviewed changes

vnugent reviewed May 20, 2023

View reviewed changes

package.json Show resolved Hide resolved

zichongkao mentioned this pull request May 20, 2023

Sort area children by leftRightIndex by default OpenBeta/openbeta-graphql#294

Open

Sort imports

d4c0ee5

zichongkao temporarily deployed to Preview May 20, 2023 17:35 — with GitHub Actions Inactive

vnugent merged commit 6759f2c into develop May 21, 2023
7 checks passed

vnugent deleted the issue-662-area-order branch May 21, 2023 04:44

This was referenced May 21, 2023

Sort area children by leftRightIndex OpenBeta/openbeta-graphql#296

Open

Remove react-beautiful-dnd #839

Merged

Implement drag and drop for area climbs #840

Closed

Support changing area left-to-right order #662

Closed

vnugent mentioned this pull request Dec 29, 2023

restore update area sorting order #1050

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue 662 area order and sorting #696

Issue 662 area order and sorting #696

tedgeving commented Feb 9, 2023

vercel bot commented Feb 9, 2023 •

edited

Loading

vnugent commented Feb 9, 2023

tedgeving commented Feb 10, 2023

vnugent commented Feb 15, 2023

tedgeving commented Feb 15, 2023

vnugent commented Mar 22, 2023

tedgeving commented Mar 22, 2023 via email

glassbead0 commented Apr 4, 2023

zichongkao commented May 17, 2023 •

edited

Loading

tedgeving commented May 17, 2023 via email

vnugent commented May 18, 2023 •

edited

Loading

zichongkao commented May 18, 2023 •

edited

Loading

zichongkao commented May 18, 2023

zichongkao commented May 19, 2023

zichongkao May 20, 2023

vnugent May 20, 2023

zichongkao May 20, 2023

vnugent May 20, 2023

zichongkao May 20, 2023

Issue 662 area order and sorting #696

Issue 662 area order and sorting #696

Conversation

tedgeving commented Feb 9, 2023

vercel bot commented Feb 9, 2023 • edited Loading

vnugent commented Feb 9, 2023

tedgeving commented Feb 10, 2023

vnugent commented Feb 15, 2023

tedgeving commented Feb 15, 2023

vnugent commented Mar 22, 2023

tedgeving commented Mar 22, 2023 via email

glassbead0 commented Apr 4, 2023

zichongkao commented May 17, 2023 • edited Loading

tedgeving commented May 17, 2023 via email

vnugent commented May 18, 2023 • edited Loading

zichongkao commented May 18, 2023 • edited Loading

zichongkao commented May 18, 2023

zichongkao commented May 19, 2023

zichongkao May 20, 2023

Choose a reason for hiding this comment

vnugent May 20, 2023

Choose a reason for hiding this comment

zichongkao May 20, 2023

Choose a reason for hiding this comment

vnugent May 20, 2023

Choose a reason for hiding this comment

zichongkao May 20, 2023

Choose a reason for hiding this comment

vercel bot commented Feb 9, 2023 •

edited

Loading

zichongkao commented May 17, 2023 •

edited

Loading

vnugent commented May 18, 2023 •

edited

Loading

zichongkao commented May 18, 2023 •

edited

Loading