fix: enhance FoodCard to include restaurant location and improve web …

…tab bar styling
neuland-ingolstadt · Dec 17, 2024 · e2ce5f7 · e2ce5f7
1 parent c117040
commit e2ce5f7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 55 deletions.
diff --git a/src/components/Cards/FoodCard.tsx b/src/components/Cards/FoodCard.tsx
@@ -6,6 +6,7 @@ import { type LanguageKey } from '@/localization/i18n'
 import { formatISODate } from '@/utils/date-utils'
 import {
     getUserSpecificPrice,
+    humanLocations,
     loadFoodEntries,
     mealName,
     userMealRating,
@@ -35,9 +36,8 @@ const FoodCard = (): JSX.Element => {
 
     const { userKind = USER_GUEST } = useContext(UserKindContext)
     const [foodEntries, setFoodEntries] = useState<
-        Array<{ name: string; price: string | null }>
+        Array<{ name: string; price: string | null; location: string | null }>
     >([])
-    const [foodCardTitle, setFoodCardTitle] = useState('food')
     const { data, isSuccess } = useQuery({
         queryKey: ['meals', selectedRestaurants, false],
         queryFn: async () => await loadFoodEntries(selectedRestaurants, false),
@@ -91,6 +91,7 @@ const FoodCard = (): JSX.Element => {
                             i18n.language as LanguageKey
                         ),
                         price: getUserSpecificPrice(x, userKind ?? USER_GUEST),
+                        location: x.restaurant ?? null,
                     })),
                     ...(hiddenEntriesCount > 0
                         ? [
@@ -102,6 +103,7 @@ const FoodCard = (): JSX.Element => {
                                                 count: hiddenEntriesCount,
                                             }),
                                   price: null,
+                                  location: null,
                               },
                           ]
                         : []),
@@ -119,34 +121,8 @@ const FoodCard = (): JSX.Element => {
         userKind,
     ])
 
-    useEffect(() => {
-        const restaurants =
-            selectedRestaurants.length === 0 ? ['food'] : selectedRestaurants
-        if (restaurants.length !== 1) {
-            setFoodCardTitle('food')
-        } else {
-            switch (restaurants[0]) {
-                case 'IngolstadtMensa':
-                    setFoodCardTitle('mensa')
-                    break
-                case 'Reimanns':
-                    setFoodCardTitle('reimanns')
-                    break
-                case 'Canisius':
-                    setFoodCardTitle('canisius')
-                    break
-                case 'NeuburgMensa':
-                    setFoodCardTitle('mensaNeuburg')
-                    break
-                default:
-                    setFoodCardTitle('food')
-                    break
-            }
-        }
-    }, [selectedRestaurants])
-
     return (
-        <BaseCard title={foodCardTitle} onPressRoute="/food">
+        <BaseCard title={'food'} onPressRoute="/food">
             {Boolean(isSuccess) && data !== undefined && data.length > 0 && (
                 <View style={styles.listView}>
                     {foodEntries.length === 0 && (
@@ -169,6 +145,8 @@ const FoodCard = (): JSX.Element => {
                                         numberOfLines={1}
                                     >
                                         {meal.price}
+                                        {meal.location != null &&
+                                            ` - ${humanLocations[meal.location as keyof typeof humanLocations]}`}
                                     </Text>
                                 )}
                             </View>
@@ -197,17 +175,16 @@ const stylesheet = createStyleSheet((theme) => ({
         paddingTop: 12,
     },
     mealEntry: {
-        flexDirection: 'row',
-        gap: 12,
+        flexDirection: 'column',
+        gap: 4,
     },
     mealPrice: {
         color: theme.colors.labelColor,
         fontSize: 15,
+        textAlign: 'left',
     },
     mealTitle: {
         color: theme.colors.text,
-        flexGrow: 1,
-        flexShrink: 1,
         fontSize: 16,
         fontWeight: '500',
     },

diff --git a/src/components/Flow/Login.web.tsx b/src/components/Flow/Login.web.tsx
@@ -148,8 +148,8 @@ const stylesheet = createStyleSheet((theme) => ({
         backgroundColor: theme.colors.card,
         borderRadius: theme.radius.md,
         gap: 10,
+        maxWidth: 1000,
         padding: 14,
-        width: '80%',
     },
     innerContainer: {
         flexDirection: 'column',

diff --git a/src/components/Layout/Tabbar.web.tsx b/src/components/Layout/Tabbar.web.tsx
@@ -2,22 +2,30 @@ import PlatformIcon from '@/components/Universal/Icon'
 import { Tabs } from 'expo-router'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Platform } from 'react-native'
-import { createStyleSheet, useStyles } from 'react-native-unistyles'
+import { Dimensions, Platform } from 'react-native'
+import { useStyles } from 'react-native-unistyles'
 
 export function useBottomTabBarHeight(): number {
     return 60
 }
 
 const DefaultTabs = (): JSX.Element => {
-    const { styles, theme: styleTheme } = useStyles(stylesheet)
+    const { theme: styleTheme } = useStyles()
     const { t } = useTranslation('navigation')
+    const isMobile = Dimensions.get('window').width < 900
 
     return (
         <>
             <Tabs
                 screenOptions={{
+                    tabBarPosition: isMobile ? 'bottom' : 'left',
+                    tabBarActiveBackgroundColor: styleTheme.colors.card,
                     tabBarActiveTintColor: styleTheme.colors.primary,
+                    tabBarInactiveTintColor: styleTheme.colors.labelColor,
+                    tabBarInactiveBackgroundColor: styleTheme.colors.card,
+                    tabBarStyle: {
+                        backgroundColor: styleTheme.colors.card,
+                    },
                 }}
             >
                 <Tabs.Screen
@@ -45,8 +53,6 @@ const DefaultTabs = (): JSX.Element => {
                                 }}
                             />
                         ),
-
-                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
 
@@ -75,7 +81,6 @@ const DefaultTabs = (): JSX.Element => {
                                 }}
                             />
                         ),
-                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
 
@@ -104,7 +109,6 @@ const DefaultTabs = (): JSX.Element => {
                                 }}
                             />
                         ),
-                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
 
@@ -133,25 +137,11 @@ const DefaultTabs = (): JSX.Element => {
                                 }}
                             />
                         ),
-
-                        tabBarStyle: styles.tabbarStyle(false),
                     }}
                 />
             </Tabs>
         </>
     )
 }
 
-const stylesheet = createStyleSheet((theme) => ({
-    tabbarStyle: (blur: boolean) => ({
-        borderTopColor: theme.colors.border,
-        backgroundColor: blur
-            ? Platform.OS === 'ios'
-                ? undefined
-                : theme.colors.card
-            : theme.colors.card,
-        alignItems: 'stretch',
-    }),
-}))
-
 export default DefaultTabs