feature: Sort by column type on Repository screen

[bdougie]

Type of feature

Select the type of feature request, the lowercase should also be the PR prefix.

• [x] 🍕 Feature
• [ ] 🐛 Bug Fix
• [ ] 📝 Documentation Update
• [ ] 🎨 Style
• [ ] 🧑‍💻 Code Refactor
• [ ] 🔥 Performance Improvements
• [ ] ✅ Test
• [ ] 🤖 Build
• [ ] 🔁 CI
• [ ] 📦 Chore (Release)
• [ ] ⏩ Revert

Current behavior

Is your feature request related to a problem? Please describe.

When viewing the Repository page, it has been requesting users, the ability to filter by activity, pr count, etc.

Suggested solution

When the user clicks the column the data should sort ascending or descending.

Code of Conduct

By submitting this issue, you agree to follow our Code of Conduct.

• [ ] I agree to follow this project's Code of Conduct

Contributing Docs

If you plan on contributing code please read - Contribution Guide

• [ ] I agree to follow this project's Contribution Docs

[takanome-dev]

@bdougie I would like to give it a shot

[bdougie]

Ok, still figuring out managing community contributions. Happy to assign this to you but this may need some API updates to filter the data. It might be best to take this in small steps and only sort by activity and repo name (alphabetically). You can do the UI (use clean design elements, i.e. Radix) to get UI up on a draft.

@brandonroberts what are your thoughts? Can we add sorting to the API?

[brandonroberts]

@bdougie @TAKANOME-DEV the API already supports sorting for the repos. You would need to provide an orderBy query param with one of the following values.

• stars
• owner
• name

stars is the default sort if none is provided

To provide a direction, provide an orderDirection query param with one of the following values

• ASC
• DESC

DESC is the default direction if none is provided

Let me know if you have any other questions.

[bdougie]

It looks like you can get started on this @TAKANOME-DEV.

A user should be able to click on the column title and sort by ASC, when clicking again, it should be DSC. An arrow should appear next to the column indicating its ASC and DSC. It should also be added to the URL like ?sort=ASC.

Please note we use the design system to organize reusable components.

We are using react-icons, if you end up looking for an arrow.

[takanome-dev]

Hi, I need some help. I'm blocked by this. The onClick handler that I passed to the Tabletitle component does not fire up at all when I click the colomn. Draft PR -> https://github.com/open-sauced/insights/pull/662/files

// components/organisms/Repositories/repositories.tsx
<TableTitle text="Repository" handleClick={() => console.log("clicked!")}  />

// components/atoms/TableTitle/table-title.tsx
interface TableTitleProps {
    text: string;
    className?: string;
    handleClick?: () => void;
}

const TableTitle: React.FC<TableTitleProps> = ({ className, text, handleClick }) => {

  return (
    <div className={`...`} onClick={handleClick}>
      {text}
    </div>
  );
};

[brandonroberts]

@TAKANOME-DEV are the click handlers working on the surrounding elements?

[takanome-dev]

Yeah @brandonroberts , it does work for the setLimit handler

//components/organisms/Repositories/repositories.tsx
const {
    // this `setLimit` is working fine
    setLimit,
   // but not the orderBy
    setOrderBy
  } = useRepositoriesList(true, repositories);
...
return (
<TableHeader
         // pass down here
        updateLimit={setLimit}
        title="Repositories"
      />
)

// components/molecules/TableHeader/table-header.tsx
const TableHeader = ({
  updateLimit,
}: TableHeaderProps): JSX.Element => {
  return (
    <div className="...">
      <div className="...">
        <Select
          // used here
          onChange={function (limit: number): void {
            updateLimit(limit);
          }}
        ></Select>
      </div>
    </div>
  );
};

[brandonroberts]

@TAKANOME-DEV Ahh I see the issue. There repositories table has 2 different layouts for mobile/desktop. Your click handler is most likely on the mobile layout, the other one is here https://github.com/open-sauced/insights/blob/beta/components/organisms/Repositories/repositories.tsx#L79

[takanome-dev]

Shoot, I didn't pay attention to the classes: md:hidden and md:flex :sweat_smile: Thanks Brandon

[github-actions[bot]]

:tada: This issue has been resolved in version 1.22.0-beta.9 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 1.22.0 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket:

[bdougie]

Reopening to try again. The first implementation was client side only and introduced unintentional bugs.

[nickytonline]

Relates to https://github.com/open-sauced/app/pull/2472/files#diff-9f367a6fd0d5a16b4c994858c85acc277de37bb7aac93e8ee5c336797ec82c27 where the new Table components were added. This was a starting point to integrate something like TanStack Table for sorting.

[brandonroberts]

To note, some of the columns we can't sort directly through the API, so we'll have to figure out which ones make sense