Merge branch 'main' of github.com:trashtrack-team/trashtrack

.github/workflows/release-android.yml

@@ -0,0 +1,61 @@
+name: Build Android
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+        branches:
+            - main
+    workflow_dispatch:
+
+jobs:
+    build:
+        name: Build APK
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: Setup Java
+              uses: actions/setup-java@v3
+              with:
+                  distribution: "adopt"
+                  java-version: "17"
+            - uses: pnpm/action-setup@v3
+              with:
+                  version: 8
+            - name: Setup Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 21.1.0
+                  cache: "pnpm"
+            - name: Install Node.js dependencies
+              run: pnpm install
+            - name: Build app
+              run: pnpm nx run app:build
+            - name: Update Capacitor
+              run: pnpm nx run app:update:android
+            - name: Copy Capacitor files
+              run: pnpm nx run app:copy:android
+            - name: Build app bundle
+              run: cd apps/app/android && ./gradlew bundle && ./gradlew assembleDebug
+            - name: Extract Android signing key from repository secrets
+              run: |
+                  echo "${{ secrets.RELEASE_KEYSTORE }}" > apps/app/android/release.jks.base64
+                  base64 -d apps/app/android/release.jks.base64 > apps/app/android/release.decrypted.jks
+            - name: Sign development build
+              run: jarsigner -keystore apps/app/android/release.decrypted.jks -storepass "${{ secrets.RELEASE_KEYSTORE_PASSWORD }}" -signedjar ./apps/app/android/app/build/outputs/bundle/release/app-release-signed.aab ./apps/app/android/app/build/outputs/bundle/release/app-release.aab release
+            - name: Check folder content of android output
+              run: ls ./apps/app/android/app/build/outputs/bundle/release
+            - name: Set Tag
+              id: current-datetime
+              run: echo "CURRENT_DATETIME=$(date +'%Y-%m-%d-%H_%M_%S%z')" >> "$GITHUB_OUTPUT"
+            - name: Build Release
+              shell: bash
+              run: |
+                  hub release create ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
+                  -m ${{ steps.current-datetime.outputs.CURRENT_DATETIME }} \
+                  -a ./apps/app/android/app/build/outputs/bundle/release/app-release-signed.aab \
+                  -a ./apps/app/android/app/build/outputs/apk/debug/app-debug.apk
+              env:
+                  GITHUB_TOKEN: ${{ secrets.ACCESS_TOKEN }}

apps/app/android/.gitignore

@@ -99,3 +99,6 @@ app/src/main/assets/public
 app/src/main/assets/capacitor.config.json
 app/src/main/assets/capacitor.plugins.json
 app/src/main/res/xml/config.xml
+
+release.jks
+release.jks.base64

apps/app/src/i18n.ts

@@ -0,0 +1,23 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import enJSON from "./locales/en.json";
+import idJSON from "./locales/id.json";
+
+export const resources = {
+    en: {
+        ...enJSON,
+    },
+    id: {
+        ...idJSON,
+    },
+} as const;
+
+i18n.use(initReactI18next).init({
+    lng: "en",
+    fallbackLng: "en",
+    resources,
+    interpolation: {
+        escapeValue: false,
+    },
+});

apps/app/src/locales/en.json

@@ -0,0 +1,20 @@
+{
+    "translation": {
+        "home": {
+            "complain": {
+                "title": "Submit Complaint",
+                "description": "Submit a complaint about full, broken, or missing trash cans."
+            },
+            "operator": {
+                "title": "Operator Login",
+                "description": "Operators can log in to view complaints and resolutions."
+            }
+        },
+        "preferences": {
+            "language": {
+                "title": "Change Language",
+                "description": "Select the language you want to use for the application."
+            }
+        }
+    }
+}

apps/app/src/locales/id.json

@@ -0,0 +1,20 @@
+{
+    "translation": {
+        "home": {
+            "complain": {
+                "title": "Sampaikan Keluhan",
+                "description": "Submit keluhan mengenai tempat sampah yang penuh, rusak, atau tidak ada."
+            },
+            "operator": {
+                "title": "Operator Login",
+                "description": "Operator dapat login untuk melihat keluhan dan menyelesaikannya."
+            }
+        },
+        "preferences": {
+            "language": {
+                "title": "Ganti Bahasa",
+                "description": "Pilih bahasa yang ingin Anda gunakan untuk aplikasi."
+            }
+        }
+    }
+}

apps/app/src/main.tsx

@@ -3,6 +3,7 @@ import * as ReactDOM from "react-dom/client";
 
 import "./global.css";
 import App from "./components/app";
+import "./i18n";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 root.render(

apps/app/src/pages/home.tsx

@@ -1,9 +1,12 @@
 import { IonContent, IonPage } from "@ionic/react";
 import { Card, CardDescription, CardHeader, CardContent, CardTitle, Icons } from "@trashtrack/ui";
+import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 
 export function Home() {
     const history = useHistory();
+    const { t } = useTranslation();
+
     return (
         <IonPage>
             <IonContent className="home ion-padding" fullscreen>
@@ -13,21 +16,17 @@ export function Home() {
                 <div className="flex flex-col pt-8 gap-4">
                     <Card className="flex flex-row" onClick={() => history.push("/complain")}>
                         <CardHeader className="w-56">
-                            <CardTitle className="text-base">Sampaikan Keluhan</CardTitle>
-                            <CardDescription className="text-xs">
-                                Submit keluhan mengenai tempat sampah yang penuh, rusak, atau tidak ada.
-                            </CardDescription>
+                            <CardTitle className="text-base">{t("home.complain.title")}</CardTitle>
+                            <CardDescription className="text-xs">{t("home.complain.description")}</CardDescription>
                         </CardHeader>
                         <CardContent className="pt-6">
                             <Icons.complain strokeWidth={1} className="w-[78px] h-[74px]" />
                         </CardContent>
                     </Card>
                     <Card className="flex flex-row">
                         <CardHeader className="w-56">
-                            <CardTitle className="text-base">Operator Login</CardTitle>
-                            <CardDescription className="text-xs">
-                                Operator dapat login untuk melihat keluhan dan menyelesaikannya.
-                            </CardDescription>
+                            <CardTitle className="text-base">{t("home.operator.title")}</CardTitle>
+                            <CardDescription className="text-xs">{t("home.operator.description")}</CardDescription>
                         </CardHeader>
                         <CardContent className="pt-6">
                             <Icons.login strokeWidth={1} className="w-[78px] h-[74px]" />

apps/app/src/pages/preferences.tsx

@@ -1,6 +1,5 @@
 import { IonContent, IonPage } from "@ionic/react";
 import {
-    Button,
     Card,
     CardContent,
     CardDescription,
@@ -13,10 +12,20 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@trashtrack/ui";
-import { useHistory } from "react-router-dom";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 
 export function Preferences() {
-    const history = useHistory();
+    const {
+        t,
+        i18n: { changeLanguage, language },
+    } = useTranslation();
+    const [currentLanguage, setCurrentLanguage] = useState(language);
+
+    const handleChangeLanguage = (newLanguage: string) => {
+        setCurrentLanguage(newLanguage);
+        changeLanguage(newLanguage);
+    };
 
     return (
         <IonPage>
@@ -27,53 +36,40 @@ export function Preferences() {
                         <div className="flex flex-col gap-4">
                             <Card>
                                 <CardHeader>
-                                    <CardTitle className="text-sm">Bahasa Aplikasi</CardTitle>
+                                    <CardTitle className="text-sm">{t("preferences.language.title")}</CardTitle>
                                     <CardDescription className="text-xs">
-                                        Pilih bahasa yang akan digunakan oleh aplikasi.
+                                        {t("preferences.language.description")} <br />
                                     </CardDescription>
                                 </CardHeader>
                                 <CardContent>
                                     <form>
                                         <div className="grid w-full items-center gap-4">
                                             <div className="flex flex-col space-y-1.5">
                                                 <Label htmlFor="language">Bahasa</Label>
-                                                <Select defaultValue="bahasa-indonesia">
+                                                <Select
+                                                    defaultValue={currentLanguage}
+                                                    onValueChange={(value) => {
+                                                        if (value) {
+                                                            handleChangeLanguage(value);
+                                                        }
+                                                    }}
+                                                >
                                                     <SelectTrigger
                                                         id="language"
                                                         className="border-input border rounded-md "
                                                     >
                                                         <SelectValue placeholder="Pilih bahasa" />
                                                     </SelectTrigger>
                                                     <SelectContent position="popper">
-                                                        <SelectItem value="bahasa-indonesia">
-                                                            Bahasa Indonesia
-                                                        </SelectItem>
-                                                        <SelectItem value="american-english">
-                                                            American English
-                                                        </SelectItem>
+                                                        <SelectItem value="id">Bahasa Indonesia</SelectItem>
+                                                        <SelectItem value="en">English</SelectItem>
                                                     </SelectContent>
                                                 </Select>
                                             </div>
                                         </div>
                                     </form>
                                 </CardContent>
                             </Card>
-                            <Card>
-                                <CardHeader>
-                                    <CardTitle className="text-sm">Development Settings</CardTitle>
-                                    <CardDescription className="text-xs">
-                                        Pengaturan ini hanya digunakan untuk pengembangan aplikasi.
-                                    </CardDescription>
-                                </CardHeader>
-                                <CardContent>
-                                    <Button
-                                        className="font-bold text-xs w-full"
-                                        onClick={() => history.replace("/onboarding")}
-                                    >
-                                        Restart Onboarding
-                                    </Button>
-                                </CardContent>
-                            </Card>
                         </div>
                     </div>
                 </div>

apps/app/tsconfig.json

@@ -4,6 +4,8 @@
         "allowJs": false,
         "esModuleInterop": false,
         "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true,
+        "strictNullChecks": true,
         "strict": true,
         "types": ["vite/client"]
     },

package.json

@@ -28,13 +28,15 @@
         "clsx": "^2.1.0",
         "embla-carousel-autoplay": "8.0.0-rc21",
         "express": "^4.18.2",
+        "i18next": "^23.8.2",
         "lucia": "^3.0.1",
         "lucide-react": "^0.92.0",
         "nestjs": "^0.0.1",
         "oslo": "^1.0.3",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hook-form": "^7.50.0",
+        "react-i18next": "^14.0.5",
         "react-router-dom": "5.3.4",
         "reflect-metadata": "^0.1.13",
         "rxjs": "^7.8.0",