feat: Bring shopping list integration (#335)

* feat: bring shopping list integration

* Migrate to backend supplying html

* Style bring button

* fix test errors

* adjust styling

Author: steve192

assets/Bring_Logo_big.png

@@ -30,6 +30,7 @@ http {
         listen 80;
         client_max_body_size 10M;
         location / {
+            add_header Access-Control-Allow-Origin https://api.getbring.com;
             root   /usr/share/nginx/html;
             index  index.html index.htm;
             try_files $uri /index.html;  

nginx/nginx.conf

@@ -0,0 +1,34 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {Linking, Platform, View} from 'react-native';
+import {Avatar, Button} from 'react-native-paper';
+import RestAPI from '../dao/RestAPI';
+import axios from 'axios';
+import AppPersistence from '../AppPersistence';
+
+type Props = {
+    recipeId: number;
+}
+
+export const BringImportButton = (props: React.ComponentPropsWithRef<typeof View> & Props ) => {
+  const {t} = useTranslation('translation');
+
+  const startBringImport = async () => {
+    const exportId = await RestAPI.createBringExport(props.recipeId);
+    const exportUrl = (await AppPersistence.getBackendURL()) + AppPersistence.getApiRoute() + '/bringexport?exportId=' + exportId;
+
+    if (Platform.OS === 'web') {
+      Linking.openURL('https://api.getbring.com/rest/bringrecipes/deeplink?source=web&url=' + encodeURIComponent(exportUrl));
+    } else {
+      const bringResponse = await axios.post<{deeplink: string}>('https://api.getbring.com/rest/bringrecipes/deeplink', {
+        url: exportUrl,
+      });
+
+      Linking.openURL(bringResponse.data.deeplink);
+    }
+  };
+
+  return (
+    <Button {...props} contentStyle={{height: 42}} style={[{width: 400, height: 42}, props.style]}icon={() => <Avatar.Image size={24} source={require('../../assets/Bring_Logo_big.png')}/>} color="#324047" mode="contained" onPress={() => startBringImport()} >{t('common.bringimport')}</Button>
+  );
+};

src/components/BringExportButton.tsx

@@ -53,6 +53,12 @@ export interface UserInfo {
 export interface InstanceInfo {
   termsOfService: string;
 }
+
+export interface BringExportData {
+  baseAmount: number;
+  ingredients: string[];
+}
+
 /**
  * RESTApi for communication with opencookbook backend
  */
@@ -83,6 +89,10 @@ class RestAPI {
     });
   }
 
+  static async createBringExport(recipeId: number): Promise<string> {
+    return (await this.post('/bringexport', {recipeId: recipeId})).data.exportId;
+  }
+
   static async getInstanceInfo(): Promise<InstanceInfo> {
     return (await this.get('/instance')).data;
   }

src/dao/RestAPI.ts

@@ -23,6 +23,7 @@
     "email": "E-Mail",
     "selected": "Ausgewählt",
     "offlinemode": "Offlinemodus",
+    "bringimport": "Import zu Bring®",
     "offline": {
       "notavailable": "Nicht verfügbar wenn du offline bist",
       "notavailabletitle": "Offline"

src/i18n/de.json

@@ -23,6 +23,7 @@
     "email": "E-mail",
     "selected": "selected",
     "offlinemode": "Offline mode",
+    "bringimport": "Import in Bring®",
     "offline": {
       "notavailable": "Not available when you are offline",
       "notavailabletitle": "Offline"

src/i18n/en.json

@@ -14,7 +14,8 @@ import {fetchSingleRecipe} from '../redux/features/recipesSlice';
 import {useAppDispatch, useAppSelector} from '../redux/hooks';
 import CentralStyles from '../styles/CentralStyles';
 import {useKeepAwake} from 'expo-keep-awake';
-import { PromptUtil } from '../helper/Prompt';
+import {PromptUtil} from '../helper/Prompt';
+import {BringImportButton} from '../components/BringExportButton';
 
 
 type Props = NativeStackScreenProps<MainNavigationProps, 'RecipeScreen'>;
@@ -119,6 +120,10 @@ export const RecipeScreen = (props: Props) => {
               onPress={() => displayedRecipe && props.navigation.navigate('GuidedCookingScreen', {recipe: displayedRecipe, scaledServings: scaledServings})}>
               {t('screens.recipe.startCookingButton')}
             </Button>
+            <Spacer height={30}/>
+            {displayedRecipe?.id && <View style={{alignItems: 'center'}}>
+              <BringImportButton style={{maxWidth: '90%'}}recipeId={displayedRecipe.id} />
+            </View>}
             <Spacer height={20} />
 
             {displayedRecipe && renderStepsSection()}