Multiple language filter for selecting more than one language at a time

[sahitya-chandra]

Currently, we can only choose single language. So update this feature with which we can select more than on language at a time.

[dotslashbit]

Assigning this to you

[dotslashbit]

Sure: Its a standard Remix project where we have all the code inside the app directory. Its using tailwindCSS and shadcn for styling.

Inside the app directory, we have components directory (this is where we store all the components) Inside the app/routes directory we have index.tsx file (this is what will render on the page if you'll go to the homepage).

There's a services directory inside app directory, this has two files github.ts and gitlab.ts, both of these files are interacting with github and gitlab API

The types directory consists of all the types we are using, if you know how to use react + typescript then this is a standard way to work with types

Let me know if you need any help

[dotslashbit]

@sahitya-chandra I can look it up tomorrow, hope that's fine

Just do one thing, open up a PR with the description of closes #

Please keep a space between closes and #

By opening a PR I can review it and let you know

[dotslashbit]

Thanks, I'll look into it tomorrow morning

[pamarthiabhinav]

@sahitya-chandra out of curiosity. I have few questions.

• Did you update the language to hold multiple values like an array while declaring the useState for it in the _index.tsx file? Something like this:

  const [languages, setLanguages] = useState([]);

• did you create a function, which takes the language data and filter out the unselected options from available languages and then use setLanguage? like this:

  const handleLanguageChange = (value) => {
    if (languages.includes(value)) {
      // if the value is already in the state, the unselect it
      setLanguages(languages.filter((language) => language !== value));
    }
    else {
      // else add it to the state
      setLanguages([...languages, value]);
    }
  }

@dotslashbit Correct me if I went wrong?

[dotslashbit]

@pamarthiabhinav this is the way to go.

@pamarthiabhinav It will be great if you want to review and help him out.

I'll always review, that's for sure but if you wanna get involved then feel free to do so

[pamarthiabhinav]

@sahitya-chandra great buddy. Now go for the next steps and start your contributions 🙌

[pamarthiabhinav]

FYI @sahitya-chandra changing the language selection is just not the task here I think so, but you need to make sure how that can be used in the API calls in the github.ts and gitlab.ts files, Which actually uses the change to retrieve the issues

Ping here if you stuck anywhere, either me or @dotslashbit can help or assist you!

Good Luck @sahitya-chandra ✌️

[dotslashbit]

@pamarthiabhinav Yeah, that's what I wrote in the PR as a comment. I asked him to go step by step, so lets first get the UI working by implementing multi checks and then we can fix the github/gitlab api query to get it to fully functional feature.

@sahitya-chandra Remember, there's no rush, and if there's any help you need or if you are stuck, just ping me or @pamarthiabhinav

You are doing great 👍🏻

[dotslashbit]

@ST-KO will work on it

[dotslashbit]

@sahitya-chandra no worries even I can't solve a good amount of issues, it's pretty normal

[dotslashbit]

@sahitya-chandra let me know if you want to solve any issues, I'll tag you if a new issue comes up

[ST-KO]

@dotslashbit I am almost done with this issue, but I'm encountering an error which I believe is causing the css style to break for the "multiselect-react-dropdown" library. I notice this issue was present before I started working on the project. I also want to mention that I'm still a newbie :D but i will try to solve it again today.

• CSS style breaks like below picture

I noticed that when I refresh the page after the popup 'No issues found matching the current criteria. Try adjusting your filters' appears, the CSS works as intended and the hydration error also disappears.

• CSS works as intended

• Hydration error disappear

[dotslashbit]

@ST-KO congrats making it work, there's nothing rush to finish working on it, take your time. @Sechorda can you help him on this?

[Sechorda]

@dotslashbit Yes, I can help. I will have more time tomorrow to dedicate to the issues i'm on.

Edit: Just noticed the PR for this issue.

@ST-KO nice.

[ST-KO]

@dotslashbit Yes, I can help. I will have more time tomorrow to dedicate to the issues i'm on.

Edit: Just noticed the PR for this issue.

@ST-KO nice.

@Sechorda Thank you :D