Merge pull request #38 from swoocn/dev

Self-approved; Propagate recent changes for deployment; Test changeset process.

.changeset/3-30-2024.md

@@ -0,0 +1,7 @@
+---
+"map-of-pi/frontend/src/app/shared/language-switcher": minor
+"map-of-pi/frontend/src/app/home": patch
+---
+
+Rebuilt Language Translation selector UI.
+Fixed unnecessary user tracking after map action.

.github/workflows/build.yml

@@ -17,6 +17,7 @@ on:
 
 jobs:
   build:
+    name: 🏗️ Build
     runs-on: ubuntu-latest
     # The sequence of tasks that will be executed as part of the job
     steps:

.github/workflows/release.yml

@@ -2,26 +2,52 @@ name: Map of Pi CI/CD [Release]
 
 # Controls when the workflow will execute
 on:
-  # Triggers the workflow on publised releases
-  release:
-    types: [published]
+  # Triggers the workflow on push events for the "main" branch
+  push:
+    branches: 
+      - main
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+# Allow only one instance of the workflow to run
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
-  update-version:
+  release:
+    name: 🚀 Release
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+
+    timeout-minutes: 10 
+
     runs-on: ubuntu-latest
     # The sequence of tasks that will be executed as part of the job
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Extract version from package.json
-        id: extract-version
-        run: echo "APP_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
-
-      - name: Display version from package.json
-        id: display-version
-        run: echo "Version extracted from package.json [$APP_VERSION]"
-
+      - name: Install Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Authenticate with GitHub Packages registry
+        run: echo "//npm.pkg.github.com/:_authToken=${{secrets.GITHUB_TOKEN}}" > ~/.npmrc
+
+      - name: Create release pull request or publish to GitHub Packages
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: true
+          version: true
+          commit: "chore: New Release"
+          title: "chore: New Release Candidate"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/version.yml

@@ -0,0 +1,28 @@
+name: Map of Pi CI/CD [Versioning]
+
+# Controls when the workflow will execute
+on:
+  # Triggers the workflow on publised releases
+  release:
+    types: [published]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+jobs:
+  update-version:
+    name: 🔆 Versioning
+    runs-on: ubuntu-latest
+    # The sequence of tasks that will be executed as part of the job
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Extract version from package.json
+        id: extract-version
+        run: echo "APP_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV
+
+      - name: Display version from package.json
+        id: display-version
+        run: echo "Version extracted from package.json [$APP_VERSION]"
+

backend/package.json

@@ -11,6 +11,7 @@
     "build": "npm install",
     "lint": "eslint .",
     "test": "jest ./test",
+    "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset publish"
   },

frontend/package.json

@@ -16,6 +16,7 @@
     "lint": "ng lint --max-warnings=0",
     "lint:fix": "ng lint --fix",
     "prettier": "npx prettier --write .",
+    "changeset": "changeset",
     "version": "changeset version",
     "release": "changeset publish"
   },

frontend/src/app/home/action-row/action-row.component.ts

@@ -37,7 +37,6 @@ export class ActionRowComponent implements OnInit {
 
   navigateToBusiness(): void {
     this.router.navigate(['/business']);
-    this.logger.debug('From map user shops', this.currentUser.shops);
   }
 
   openDialog() {

frontend/src/app/home/map/map.component.ts

@@ -308,7 +308,6 @@ export class MapComponent implements OnInit, OnDestroy {
     if (this.userMarker) {
       this.userMarker.closePopup();
       this.userMarker.unbindPopup();
-      this.track();
     }
   }
 

frontend/src/app/shared/language-switcher/language-switcher.component.html

@@ -3,12 +3,17 @@
 </button>
 
 <mat-menu #menu="matMenu" class="max-h-15 rounded-lg border-5 border-black-300">
-  <div class="flex flex-row justify-center">
+  <div class="w-full flex flex-col justify-center">
     @for (language of languages; track language) {
-      <button mat-menu-item (click)="switchLanguage(language.code)" class="flex">
-        <img [src]="language.imageUrl" alt="{{ language.name }}" class="flag-icon w-8 h-8"> 
+      <button mat-menu-item (click)="switchLanguage(language.code)" class="flex items-center mb-2">
+        <div class="language-section flex items-center mb-2 pl-2 pr-2 pb-1 rounded-lg border-5 border-black-300">
+          <img [src]="language.imageUrl" alt="{{ language.name }}" class="flag-image w-8 h-8">
+          <div class="w-full ml-5 text-black-500">
+            <span class="font-bold text-sm">{{ language.label }}</span>
+            <span class="block text-xs">{{ language.translation }}</span>
+          </div>
+        </div> 
       </button>
-      <!-- <span class="flex flex-row">{{ language.code }}</span> -->
     }
   </div>
 </mat-menu>

frontend/src/app/shared/language-switcher/language-switcher.component.scss

@@ -0,0 +1,16 @@
+.language-section {
+    background-color: #f0f0f0;
+
+    &:hover {
+        background-color: #e5e5e5;
+    }
+}
+
+.flag-image {
+    border-right: 1px solid #000;
+    padding-right: 0.5rem;
+}
+
+button:hover {
+    background-color: transparent !important;
+}

frontend/src/app/shared/language-switcher/language-switcher.component.ts

@@ -8,7 +8,9 @@ import { TranslateService } from '@ngx-translate/core';
 
 export interface LangMenuItem {
   code: string;
+  label: string;
   name: string;
+  translation: string;
   imageUrl: string;
 }
 
@@ -22,10 +24,10 @@ export interface LangMenuItem {
 })
 export class LanguageSwitcherComponent {
   protected readonly languages: LangMenuItem[] = [
-    { code: 'en', name: 'English', imageUrl: '../../../assets/images/shared/language/en.svg' },
-    { code: 'es', name: 'Spanish', imageUrl: '../../../assets/images/shared/language/es.svg' },
-    { code: 'ko', name: 'Korean', imageUrl: '../../../assets/images/shared/language/ko.svg' },
-    { code: 'ng_yor', name: 'Nigerian Yoruba', imageUrl: '../../../assets/images/shared/language/ng.svg' }
+    { code: 'en', label: 'EN', name: 'English', translation: 'English', imageUrl: '../../../assets/images/shared/language/en.svg' },
+    { code: 'es', label: 'ES', name: 'Spanish', translation: 'Español', imageUrl: '../../../assets/images/shared/language/es.svg' },
+    { code: 'ko', label: 'KO', name: 'Korean', translation: '한국어', imageUrl: '../../../assets/images/shared/language/ko.svg' },
+    { code: 'ng_yor', label: 'NG/YOR', name: 'Nigerian Yoruba', translation: 'Yorùbá', imageUrl: '../../../assets/images/shared/language/ng.svg' }
   ];
 
   constructor(private readonly translateService: TranslateService) {}

frontend/src/assets/i18n/ng_yor.json

@@ -5,7 +5,19 @@
   "HOME": {
     "ADD_MY_BUSINESS": "Fi Ọjà/Òwò mi l'éde",
     "SEARCH_BY_BUSINESS_PLACEHOLDER": "Wá Àwọn Iṣẹ́/Òwò Oríṣirísi..",
-    "SEARCH_BY_PRODUCT_PLACEHOLDER": "Wá Àwọn Ọjà Oríṣirísi.."
+    "SEARCH_BY_PRODUCT_PLACEHOLDER": "Wá Àwọn Ọjà Oríṣirísi..",
+    "SEARCH_RESULT_FOUND_MESSAGE": "Ṣíṣe àwárí Àyè Ìtajà jẹ́ {{ numberOfShopsFound }} Àyè Ìtajà. Jọ̀wọ́ fi Ìka méjì fẹ Ojú àwòrán yí s'íta láti rí àwọn Àyè Ìtajà tí ó bá kù.",
+    "SEARCH_RESULT_NOT_FOUND_MESSAGE": "Ìwádí rẹ kò ṣe àwárí Àyè Ìtajà kankan. Jọ̀wọ́ ṣe Ìwádì míràn Pẹ̀lúu àwọn Àkọ́lé Oríṣí míràn."
+  },
+  "MAP": {
+    "USER_LOCATION": "Ibí ni o wà",
+    "MOBILE_TRANSPORTATION_DISTANCE_MESSAGE": " ni o yàn lááyò gẹ́gẹ́ bíi ibi tí ò ńlọ, ètò láti dé ibẹ̀ sì ti wà. Àsìkò tí ìrìn-àjò ìgboro yí máa gbà ni ",
+    "MOBILE_TRANSPORTATION_TIME_MESSAGE": "{{ numHours }} wákàtí àti {{ numMinutes }} Ìṣẹ́jú",
+    "MIDDLE_CLICKED_MESSAGE": "O ti tẹ̀ẹ́ láàrin",
+    "UNKNOWN_MARKER_CLICKED_MESSAGE": "Àmì tí kò jẹmọ́ ni o tẹ̀",
+    "BUTTONS": {
+      "CANCEL": "Wọ́gi lée"
+    }
   },
   "FOOTER": {
     "PRIVACY_POLICY": "ÌLÀNÀ ÌPA Ọ̀RỌ̀ MỌ́",

frontend/src/styles.scss

@@ -49,6 +49,16 @@ body {
   .search-toggle-element {
     color: #fff !important;
   }
+  .language-section {
+    background-color: rgba(0, 0, 0, 0.822) !important;
+
+    &:hover {
+      background-color: #666060 !important;
+    }
+  }
+  .flag-image {
+    border-color: #fff !important;
+  }
   div[class^="inner-wrapper"] {
     color: #ffffff;
     background-color: #7e7777;

package.json

@@ -4,6 +4,7 @@
     "description": "Map of Pi App",
     "scripts": {
         "config": "npm install && npm install --prefix frontend && npm install --prefix backend",
+        "changeset": "changeset",
         "version": "changeset version",
         "release": "changeset publish"
     },