[Feat]: Communities Country Picker (#241)

* feat(): add country picker for communities

Author: eduardoRoth

angular-hub/src/app/pages/communities/index.page.ts

@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, computed, signal } from '@angular/core';
 import { CommunityCardComponent } from '../../components/cards/community-card.component';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { injectLoad, RouteMeta } from '@analogjs/router';
 import { load } from './index.server';
 import { Title } from '@angular/platform-browser';
 import { JsonLdService } from '../../services/json-ld.service';
+import { DropdownModule } from 'primeng/dropdown';
+import { FormsModule } from '@angular/forms';
 
 export const routeMeta: RouteMeta = {
   meta: [
@@ -18,7 +20,7 @@ export const routeMeta: RouteMeta = {
 @Component({
   selector: 'app-communities',
   standalone: true,
-  imports: [CommunityCardComponent],
+  imports: [CommunityCardComponent, DropdownModule, FormsModule],
   template: `
     <aside
       class="h-36 w-full flex flex-col justify-center items-center mb-8 bg-no-repeat bg-auto md:bg-cover px-4"
@@ -28,8 +30,22 @@ export const routeMeta: RouteMeta = {
       <h2 class="text-2xl text-center">Curated list of Angular Communities</h2>
     </aside>
 
+    <form
+      class="w-full flex flex-col sm:flex-row justify-center items-center gap-2 mb-8"
+    >
+      <p-dropdown
+        name="language"
+        [options]="countries()"
+        [style]="{ width: '230px' }"
+        [showClear]="true"
+        placeholder="Select a country"
+        [ngModel]="selectedCountry()"
+        (ngModelChange)="selectedCountry.set($event)"
+      />
+    </form>
+
     <ul class="flex flex-wrap justify-center gap-x-8 gap-y-4 px-8">
-      @for (community of communities(); track community.name) {
+      @for (community of filteredCommunities(); track community.name) {
         <li>
           <app-community-card [community]="community"></app-community-card>
         </li>
@@ -39,6 +55,33 @@ export const routeMeta: RouteMeta = {
 })
 export default class CommunitiesComponent {
   communities = toSignal(injectLoad<typeof load>(), { requireSync: true });
+  selectedCountry = signal(null);
+  countries = computed(() =>
+    this.communities()
+      .map((community) => community.location)
+      .reduce<string[]>((acc, curr) => {
+        const location = curr
+          ? curr.includes(',')
+            ? curr.split(',').at(-1)
+            : curr
+          : '';
+        if (location && !acc.includes(location.trim())) {
+          acc.push(location.trim());
+        }
+        return acc;
+      }, [])
+      .sort((a, b) =>
+        a.toLocaleUpperCase().localeCompare(b.toLocaleUpperCase()),
+      ),
+  );
+
+  filteredCommunities = computed(() =>
+    this.communities().filter((community) =>
+      this.selectedCountry()
+        ? community.location?.includes(this.selectedCountry() ?? '')
+        : true,
+    ),
+  );
 
   constructor(
     private title: Title,

angular-hub/src/public/assets/data/community.json

@@ -229,7 +229,7 @@
   {
     "name": "Angular Community Meetup",
     "type": "meetup",
-    "location": "Earth",
+    "location": "Worldwide Online",
     "url": "https://angularcommunity.net/home",
     "logo": "https://pbs.twimg.com/profile_images/1547959576015749120/96f233Pr_400x400.jpg",
     "twitter": "https://twitter.com/angular_meetup",
@@ -293,7 +293,7 @@
   {
     "name": "Angular Costa Rica",
     "type": "meetup",
-    "location": "San Jose, Costa rica",
+    "location": "San Jose, Costa Rica",
     "url": "https://www.facebook.com/angularcostarica",
     "logo": "https://pbs.twimg.com/profile_images/1275887771048083459/SldZRi5t_400x400.jpg",
     "twitter": "https://twitter.com/AngularCR",
@@ -831,7 +831,7 @@
   {
     "name": "ngGirls",
     "type": "workshop",
-    "location": null,
+    "location": "Worldwide Onsite",
     "url": "https://www.ng-girls.org/",
     "logo": "https://pbs.twimg.com/profile_images/1757125339090653184/5wgfX_ZD_400x400.jpg",
     "twitter": "https://twitter.com/AngularGirls",
@@ -992,7 +992,7 @@
   {
     "name": "Ng Asia",
     "type": "meetup",
-    "location": null,
+    "location": "Worldwide Online",
     "url": "https://www.youtube.com/@NgAsiaAngular/streams",
     "logo": "https://pbs.twimg.com/profile_images/1748238047056191488/QArIjHBp_400x400.jpg",
     "twitter": "https://twitter.com/angular_asia",