[FEATURE] Hide repositories with zero issues

[guibranco]

Is your feature request related to a problem? Please describe.
Currently, the Repositories page displays all repositories, including those with zero issues (vacancies). This can clutter the view, making it difficult to focus on repositories that have active vacancies.

Describe the solution you'd like
I propose adding a switch button (on/off or enable/disable style) that allows users to hide or show repositories with no vacancies.

Technical Notes:

• By default, the switch should hide repositories with zero issues (disabled/off).
• The selected value should be stored in localStorage for a stateful experience, so the preference persists across page reloads.
• The behavior should also be enabled via a query string parameter.
• Use the React Switch component for the implementation.

API Integration:
The API already includes the ability to filter out empty repositories. By adding a query string value of hide-empty=true to the URL, we can hide repositories/organizations with no issues/vacancies.

• Hide: https://apibr.com/vagas/api/v1/repositories?per_page=10&page=1&hide-empty=true
• Show: https://apibr.com/vagas/api/v1/repositories?per_page=10&page=1&hide-empty=false

Remarks:
For the first step, we can implement this feature solely on the front-end (UI) side in this repository. Later, we can extend the functionality to the back-end (API) side to enable filtering by query string as well.

Sample Code Snippet (ReactJS):

Here’s a basic implementation of the switch functionality using a React Switch component:

import React, { useEffect, useState } from 'react';
import Switch from 'react-switch'; // Make sure to install this package

const RepositoriesFilter = () => {
  const [hideEmpty, setHideEmpty] = useState(() => {
    // Get initial value from localStorage
    const savedValue = localStorage.getItem('hideEmpty');
    return savedValue === 'true' || false; // Default to false if not found
  });

  useEffect(() => {
    localStorage.setItem('hideEmpty', hideEmpty);
    // Optionally, you could also update the API call here
    const url = `https://apibr.com/vagas/api/v1/repositories?per_page=10&page=1&hide-empty=${hideEmpty}`;
    // Fetch data from the API
  }, [hideEmpty]);

  const handleToggle = () => {
    setHideEmpty(!hideEmpty);
  };

  return (
    <div>
      <label>
        Hide repositories with no vacancies:
        <Switch
          onChange={handleToggle}
          checked={hideEmpty}
          offColor="#888"
          onColor="#0f0"
        />
      </label>
    </div>
  );
};

export default RepositoriesFilter;

Acceptance Criteria:

• Users can toggle the switch to hide/show repositories with zero issues.
• The selected preference is stored in localStorage.
• The feature is implemented on the front-end, and the functionality for API integration is set up for future development.

[gitauto-ai]

@guibranco Pull request completed! Check it out here #235 🚀

Note: I automatically create a pull request for an unassigned and open issue in order from oldest to newest once a day at 00:00 UTC, as long as you have remaining automation usage. Should you have any questions or wish to change settings or limits, please feel free to contact [email protected] or invite us to Slack Connect.