Merge branch 'main' of https://github.com/falling-fruit/falling-fruit-web into issue-1049

Author: ezwelty

.gitignore

@@ -14,6 +14,7 @@
 # misc
 .DS_Store
 .env
+.env.*
 .eslintcache
 .vscode
 

.ruby-version

@@ -0,0 +1 @@
+3.1.3

android/app/src/main/AndroidManifest.xml

@@ -43,7 +43,7 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.CAMERA" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="29"/>
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <!-- Features implied by Permissions -->

docs/setup.md

@@ -41,11 +41,14 @@
   - `REACT_APP_GOOGLE_ANALYTICS_TRACKING_ID`: Tracking ID for Google Analytics. Optional.
 
 - Additional (top secret) environment variables in `.env` are needed to sign and release the mobile apps.
+
   - `ANDROID_KEYSTORE_PATH`
   - `ANDROID_KEYSTORE_PASSWORD`
   - `ANDROID_KEYSTORE_ALIAS`
   - `ANDROID_KEYSTORE_ALIAS_PASSWORD`
 
+- Additional `.env.android` and `.env.ios` files are used to set platform-specific environment variables that override those in `.env` when building for that platform.
+
 # Web app
 
 - Start the application.
@@ -74,7 +77,7 @@ yarn
 
 # Mobile apps
 
-We use [Capacitor](https://capacitorjs.com) to package the web app as Android and iOS apps. Make sure you can build the web app first with `yarn build` before proceeding. Although most of the mobile app can be tested by opening the web app in a narrow browser window, this is inadequate for testing device-specific functionality like permissions, curved layouts, and onboard functions (camera, compass, and GPS).
+We use [Capacitor](https://capacitorjs.com) to package the web app as Android and iOS apps. Although most of the mobile app can be tested by opening the web app in a narrow browser window, this is inadequate for testing device-specific functionality like permissions, curved layouts, and onboard functions (camera, compass, and GPS).
 
 ## Bump app versions
 
@@ -101,21 +104,16 @@ First install the [requirements](https://capacitorjs.com/docs/v7/getting-started
 Sync the app with any changes to [`package.json`](../package.json) and `build` output:
 
 ```sh
+yarn build:android
 npx cap sync android
 ```
 
-Run the app on an emulator or device:
+Run the app on an emulator or device (see below) and debug with Chrome at [chrome://inspect/#devices](chrome://inspect/#devices).
 
 ```bash
-npx cap run android  # prompts to select device
-# npx cap run android --list
-# npx cap run android --device
-# npx cap run android --emulator
-# npx cap run android --target=<device>
+npx cap run android
 ```
 
-and debug with Chrome at [chrome://inspect/#devices](chrome://inspect/#devices).
-
 Alternatively, open as a project in Android Studio:
 
 ```sh
@@ -133,7 +131,7 @@ Then plug the device into your computer, start the `adb` (Android Debug Bridge)
 
 ```sh
 sudo adb start-server
-npx cap run android
+adb devices
 ```
 
 ### Release
@@ -159,7 +157,7 @@ First install the [requirements](https://capacitorjs.com/docs/v7/getting-started
 
 - [MacOS](https://www.apple.com/os/macos/) 14.5+ ([download](https://support.apple.com/en-us/102662))
 - [Xcode](https://developer.apple.com/xcode/) 16.0+ ([download](https://xcodereleases.com))
-- [Cocoapods](https://guides.cocoapods.org/using/getting-started.html)
+- [Cocoapods](https://guides.cocoapods.org/using/getting-started.html) with ruby 3.1.3
 
 And prepare Xcode for first use:
 
@@ -175,6 +173,7 @@ xcodebuild -runFirstLaunch
 Sync the app with any changes to [`package.json`](../package.json) and `build` output:
 
 ```sh
+yarn build:ios
 npx cap sync ios
 ```
 

ecosystem.config.js

@@ -1,14 +1,11 @@
 //Knip marks this file as unused, but is still needed for future development purposes.
 module.exports = {
   name: 'web',
-  script: 'serve',
+  script: 'node_modules/.bin/serve',
+  args: '-p 8082 ./build',
   watch: false,
   env: {
     NODE_ENV: 'production',
-    PM2_SERVE_PATH: 'build',
-    PM2_SERVE_PORT: 8082,
-    PM2_SERVE_SPA: 'true',
-    PM2_SERVE_HOMEPAGE: '/index.html',
   },
   exec_mode: 'cluster',
   instances: 4,

ios/App/App/Info.plist

@@ -46,14 +46,14 @@
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<true/>
 	<key>NSCameraUsageDescription</key>
-	<string>This app needs access to camera to take photos of fruit locations.</string>
+	<string>This app requires camera access to take photos.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
-	<string>This app needs access to location to show nearby fruit locations.</string>
+	<string>This app requires location access to show nearby locations.</string>
 	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
-	<string>This app needs access to location to show nearby fruit locations.</string>
+	<string>This app requires location access to show nearby locations.</string>
 	<key>NSPhotoLibraryUsageDescription</key>
-	<string>This app needs access to photo library to save and select photos.</string>
+	<string>This app requires photo library access to select photos.</string>
 	<key>NSPhotoLibraryAddUsageDescription</key>
-	<string>This app needs access to photo library to save photos.</string>
+	<string>This app requires photo library access to save photos.</string>
 </dict>
 </plist>

package.json

@@ -75,8 +75,10 @@
     "@babel/plugin-syntax-flow": "^7.14.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@capacitor/assets": "^3.0.5",
+    "@dotenvx/dotenvx": "^1.66.0",
     "@hack4impact-uiuc/eslint-plugin": "^2.0.10",
-    "@types/node": "*",
+    "@types/dotenv": "^8.2.3",
+    "@types/node": "^25.8.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^4.0.18",
     "@types/styled-components": "^5.1.26",
@@ -86,7 +88,8 @@
     "husky": "^4.3.8",
     "lint-staged": "^10.5.3",
     "postcss": "^8.1.0",
-    "prettier": "^3.4.1"
+    "prettier": "^3.4.1",
+    "serve": "^14.2.6"
   },
   "scripts": {
     "start": "craco start",
@@ -96,7 +99,10 @@
     "format:check": "yarn format:output --check",
     "format:output": "prettier \"./src/**/*.{js,jsx,ts,tsx,css,scss,json,md}\" \"./public/**/*.{js,jsx,ts,tsx,css,scss,json,md}\"",
     "build": "craco build",
-    "build:reload": "BUILD_PATH=./build_temp craco build && rm -rf build && mv ./build_temp build",
+    "build:android": "npx dotenvx run -f .env.android -f .env -- craco build",
+    "build:ios": "npx dotenvx run -f .env.ios -f .env -- craco build",
+    "rebuild": "BUILD_PATH=./build_temp craco build && rm -rf build && mv ./build_temp build",
+    "serve": "serve build",
     "test": "craco test",
     "eject": "react-scripts eject",
     "genApiSchema": "npx openapi-typescript https://raw.githubusercontent.com/falling-fruit/api/main/docs/openapi.yml --output src/utils/apiSchema.ts",

public/serve.json

@@ -0,0 +1,7 @@
+{
+  "rewrites": [
+    { "source": "/news", "destination": "/news/index.html" },
+    { "source": "/news/:id/", "destination": "/news/:id/index.html" },
+    { "source": "!/news/**", "destination": "/index.html" }
+  ]
+}

src/components/about/ProjectPage.js

@@ -235,10 +235,10 @@ const Project = () => {
         {' · '}
         <b dir="ltr">Ana Carolina de Lima</b> – <span dir="ltr">Português</span>
         {' · '}
-        <b dir="ltr">Anya Sytenkova</b> (<b dir="ltr">Аня Сытенкова</b>) –
+        <b dir="ltr">Anya Sytenkova</b> (<b dir="ltr">Аня Сытенкова</b>) –{' '}
         <span dir="ltr">Русский</span>
         {' · '}
-        <b dir="ltr"> Barbora Boulová </b> – <span dir="ltr">Čeština</span>
+        <b dir="ltr">Barbora Boulová</b> – <span dir="ltr">Čeština</span>
         {' · '}
         <b dir="ltr">Daniela Marini</b> – <span dir="ltr">Español</span>
         {' · '}
@@ -249,6 +249,8 @@ const Project = () => {
         {' · '}
         <b dir="ltr">Heimen Stoffels</b> – <span dir="ltr">Nederlands</span>
         {' · '}
+        <b dir="ltr">Itai Boneh</b> – <span dir="rtl">עברית</span>
+        {' · '}
         <b dir="ltr">Jadalnia Warszawa</b> – <span dir="ltr">Polski</span>
         {' · '}
         <b dir="ltr">Karolina Hansen</b> – <span dir="ltr">Polski</span>
@@ -273,6 +275,9 @@ const Project = () => {
         <b dir="ltr">Mylène Jacquemart</b> – <span dir="ltr">Deutsch</span>,{' '}
         <span dir="ltr">Italiano</span>
         {' · '}
+        <b dir="ltr">Omar Naamani</b> (<span dir="rtl">عمر نعماني</span>) –{' '}
+        <span dir="rtl">عربي</span>
+        {' · '}
         <b dir="ltr">Parmenter Welty</b> – <span dir="ltr">Español</span>
         {' · '}
         <b dir="ltr">Raven Lyn</b> – <span dir="ltr">Português</span>
@@ -288,7 +293,12 @@ const Project = () => {
         {' · '}
         <b dir="ltr">Timna Raz</b> – <span dir="rtl">עִברִית</span>
         {' · '}
+        <b dir="ltr">Tong Kitchen-Huan</b> (<b dir="ltr">还彤</b>) –{' '}
+        <span dir="ltr">简体中文</span>, <span dir="ltr">繁体中文</span>
+        {' · '}
         <b dir="ltr">Tống Thái Vương</b> – <span dir="ltr">Tiếng Việt</span>
+        {' · '}
+        <b dir="ltr">Wojtek Bażant</b> – <span dir="ltr">Polski</span>
       </p>
 
       <h2>{t('pages.about.closing_remarks')}</h2>

src/components/account/AccountPage.js

@@ -10,11 +10,11 @@ import { editProfile, logout } from '../../redux/authSlice'
 import { pathWithCurrentView } from '../../utils/appUrl'
 import { useAppHistory } from '../../utils/useAppHistory'
 import { useIsDesktop } from '../../utils/useBreakpoint'
-import { FormButtonWrapper, FormInputWrapper } from '../auth/AuthWrappers'
 import { Input, Textarea } from '../form/FormikWrappers'
 import AboutSection from '../mobile/AboutSection'
 import Button from '../ui/Button'
 import Checkbox from '../ui/Checkbox'
+import FormButtons from '../ui/FormButtons'
 import LabeledRow from '../ui/LabeledRow'
 import Column from '../ui/LinkColumn'
 import LoadingIndicator from '../ui/LoadingIndicator'
@@ -161,12 +161,12 @@ const AccountPage = () => {
             >
               {({ dirty, isValid, isSubmitting }) => (
                 <Form>
-                  <FormInputWrapper>
+                  <div>
                     <Input type="text" name="name" label={t('glossary.name')} />
                     <Textarea name="bio" label={t('users.bio')} />
-                  </FormInputWrapper>
+                  </div>
 
-                  <FormButtonWrapper>
+                  <FormButtons>
                     <Button secondary type="reset">
                       {t('form.button.reset')}
                     </Button>
@@ -178,7 +178,7 @@ const AccountPage = () => {
                         ? t('form.button.submitting')
                         : t('users.save_changes')}
                     </Button>
-                  </FormButtonWrapper>
+                  </FormButtons>
                 </Form>
               )}
             </Formik>