Merge pull request #110 from ineshbose/issue/109-add_food_item

Add food item action

src/app/api/items.ts

@@ -1,5 +1,11 @@
 import { axiosInstance } from '.';
-import { CreateData, FetchData, TrackItem, UpdateData } from '../types/api';
+import {
+  CreateData,
+  FetchData,
+  PortionItem,
+  TrackItem,
+  UpdateData,
+} from '../types/api';
 
 const API_PATH = '/trackitem/';
 
@@ -12,6 +18,20 @@ export const getTrackItems = async () => {
   }
 };
 
+export const createPortionItem = async (
+  props: CreateData<PortionItem, 'name'>
+) => {
+  try {
+    const response = await axiosInstance.post<PortionItem>(
+      '/portionitems/',
+      props
+    );
+    return response.data;
+  } catch (e) {
+    // unable to create
+  }
+};
+
 export const createTrackItem = async (props: CreateData<TrackItem, 'item'>) => {
   try {
     const response = await axiosInstance.post<TrackItem>(API_PATH, props);

src/app/components/FAB/MainButton.tsx

@@ -9,6 +9,8 @@ import {
 } from 'react-native';
 import ActionItem from './ActionItem';
 import { MainButtonProps } from '../../types/FAB';
+import { RootActionParamList } from '../../types/navigation';
+import { Button, Icon } from '@ui-kitten/components';
 
 const DEFAULT_SHADOW_PROPS = {
   shadowOpacity: 0.35,
@@ -22,21 +24,22 @@ const DEFAULT_SHADOW_PROPS = {
 
 export default function MainButton(Props: MainButtonProps) {
   const {
-    color,
-    shadow,
-    actions,
-    visible,
-    position,
-    animated,
-    iconHeight,
-    iconWidth,
-    iconColor,
-    buttonSize,
-    overlayColor,
-    showBackground,
-    distanceToEdge,
-    mainVerticalDistance,
-    actionsPaddingTopBottom,
+    color = 'red',
+    shadow = {},
+    actions = [],
+    visible = true,
+    position = 'right',
+    animated = true,
+    iconHeight = 15,
+    iconWidth = 15,
+    iconColor = '#fff',
+    buttonSize = 56,
+    floatingIcon,
+    overlayColor = 'rgba(68, 68, 68, 0.6)',
+    showBackground = 'true',
+    distanceToEdge = 30,
+    mainVerticalDistance = 0,
+    actionsPaddingTopBottom = 8,
     onPressMain,
     onPressAction,
   } = Props;
@@ -105,7 +108,7 @@ export default function MainButton(Props: MainButtonProps) {
       onPressMain(!active);
     }
 
-    if (!active) {
+    if (!active && actions.length > 0) {
       if (animated) {
         Animated.spring(animation, {
           toValue: 1,
@@ -130,7 +133,7 @@ export default function MainButton(Props: MainButtonProps) {
     }
   };
 
-  const pressAction = (name?: string) => {
+  const pressAction = (name?: keyof RootActionParamList) => {
     if (onPressAction && name) {
       onPressAction(name);
     }
@@ -141,7 +144,10 @@ export default function MainButton(Props: MainButtonProps) {
   return (
     <Animated.View
       pointerEvents="box-none"
-      style={[styles.overlay, { backgroundColor: 'transparent' }]}
+      style={[
+        styles.overlay,
+        { backgroundColor: 'transparent', display: visible ? 'flex' : 'none' },
+      ]}
     >
       {active && showBackground && (
         <Pressable
@@ -255,37 +261,51 @@ export default function MainButton(Props: MainButtonProps) {
                   },
             ]}
           >
-            <View
-              style={{
-                justifyContent: 'center',
-                alignItems: 'center',
-              }}
-            >
-              <View
-                style={[
-                  {
-                    width: 2,
-                    position: 'absolute',
-                  },
-                  {
-                    height: iconHeight,
-                    backgroundColor: active ? color : iconColor,
-                  },
-                ]}
+            {floatingIcon ? (
+              <Button
+                onPress={animateButton}
+                appearance="ghost"
+                accessoryLeft={(p) => (
+                  <Icon
+                    name={floatingIcon}
+                    {...p}
+                    style={[p?.style, { color: active ? color : iconColor }]}
+                  />
+                )}
               />
+            ) : (
               <View
-                style={[
-                  {
-                    height: 2,
-                    position: 'absolute',
-                  },
-                  {
-                    width: iconWidth,
-                    backgroundColor: active ? color : iconColor,
-                  },
-                ]}
-              />
-            </View>
+                style={{
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                }}
+              >
+                <View
+                  style={[
+                    {
+                      width: 2,
+                      position: 'absolute',
+                    },
+                    {
+                      height: iconHeight,
+                      backgroundColor: active ? color : iconColor,
+                    },
+                  ]}
+                />
+                <View
+                  style={[
+                    {
+                      height: 2,
+                      position: 'absolute',
+                    },
+                    {
+                      width: iconWidth,
+                      backgroundColor: active ? color : iconColor,
+                    },
+                  ]}
+                />
+              </View>
+            )}
           </Animated.View>
         </Pressable>
       </Animated.View>

src/app/navigation/ActionNavigator.tsx

@@ -0,0 +1,18 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import * as React from 'react';
+import AddItem from '../screens/Action/AddItem';
+import { RootActionParamList } from '../types/navigation';
+
+const Action = createNativeStackNavigator<RootActionParamList>();
+
+export default function ActionNavigator() {
+  return (
+    <Action.Navigator initialRouteName="Item">
+      <Action.Screen
+        name="Item"
+        component={AddItem}
+        options={{ headerShown: false }}
+      />
+    </Action.Navigator>
+  );
+}

src/app/navigation/BottomTabNavigator.tsx

@@ -5,18 +5,16 @@ import {
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
 import * as React from 'react';
-import { Image, ImageProps, Pressable } from 'react-native';
+import { Image, ImageProps, Pressable, View } from 'react-native';
 import {
   RootTabParamList,
   RouteActionIcon,
-  RouteNames,
   TabConfig,
 } from '../types/navigation';
 import {
   BottomNavigation,
   BottomNavigationTab,
   Button,
-  ButtonGroup,
   Icon,
   MenuItem,
   OverflowMenu,
@@ -28,10 +26,15 @@ import StatsPage from '../screens/StatsPage';
 import JournalPage from '../screens/JournalPage';
 import ResourcesPage from '../screens/ResourcesPage';
 import { useAppContext } from '../contexts/AppContext';
-import { ParamListBase, RouteProp } from '@react-navigation/native';
+import {
+  getFocusedRouteNameFromRoute,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
 import SettingsPage from '../screens/SettingsPage';
 import { IconOptions } from '../types';
 import { FAB } from '../components/FAB';
+import ActionNavigator from './ActionNavigator';
 
 const BottomTab = createBottomTabNavigator<RootTabParamList>();
 
@@ -68,17 +71,20 @@ const tabs: RootTab[] = [
   {
     name: 'Settings',
     component: SettingsPage,
-    icon: 'settings',
+    hideTab: true,
+  },
+  {
+    name: 'Action',
+    component: ActionNavigator,
     hideTab: true,
   },
 ];
 
 export default function BottomTabNavigator({
   navigation,
+  route,
 }: BottomTabScreenProps<RootTabParamList>) {
   const {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    user,
     headerAction,
     helpers: { signOut, setHeaderAction },
   } = useAppContext();
@@ -106,14 +112,9 @@ export default function BottomTabNavigator({
 
   const navRightAccessoryActionIcon = (
     props: Partial<ImageProps> | undefined,
-    route: RouteProp<ParamListBase, string>
+    { name }: RouteProp<ParamListBase, string> | { name: string }
   ) => (
-    <Icon
-      key="action"
-      name={headerButtonIcons[route.name as RouteNames<RootTabParamList>]}
-      size={30}
-      {...props}
-    />
+    <Icon key="action" name={headerButtonIcons[name]} size={30} {...props} />
   );
 
   const cardIcons = (
@@ -136,18 +137,15 @@ export default function BottomTabNavigator({
 
   const navigationRightAccessory = (
     props: {} | undefined,
-    { route }: BottomTabHeaderProps
+    { route: { name } }: BottomTabHeaderProps
   ) => (
-    <ButtonGroup appearance="ghost" {...props}>
-      {headerButtonIcons[route.name as RouteNames<RootTabParamList>] ? (
+    <View style={{ flexDirection: 'row' }} {...props}>
+      {headerButtonIcons[name] && (
         <Button
-          accessoryLeft={(p) => navRightAccessoryActionIcon(p, route)}
-          onPress={() =>
-            setHeaderAction(headerAction === route.name ? '' : route.name)
-          }
+          appearance="ghost"
+          accessoryLeft={(p) => navRightAccessoryActionIcon(p, { name })}
+          onPress={() => setHeaderAction(headerAction === name ? '' : name)}
         />
-      ) : (
-        <></>
       )}
       <OverflowMenu
         anchor={userOptionsToggle}
@@ -167,7 +165,7 @@ export default function BottomTabNavigator({
           onPress={() => signOut()}
         />
       </OverflowMenu>
-    </ButtonGroup>
+    </View>
   );
 
   const navigationHeader = (props: BottomTabHeaderProps) => (
@@ -228,23 +226,16 @@ export default function BottomTabNavigator({
         actions={[
           {
             icon: 'library-add',
-            name: 'Food Item',
+            name: 'Item',
+            text: 'Food Item',
           },
         ]}
-        onPressAction={console.log}
-        actionsPaddingTopBottom={8}
-        color="red"
-        overlayColor="rgba(68, 68, 68, 0.6)"
-        position="right"
+        floatingIcon="add"
+        onPressAction={(name) =>
+          navigation.navigate('Action', { screen: name })
+        }
         distanceToEdge={{ vertical: 80, horizontal: 30 }}
-        buttonSize={56}
-        iconHeight={15}
-        iconWidth={15}
-        iconColor="#fff"
-        mainVerticalDistance={0}
-        showBackground
-        animated
-        visible
+        visible={getFocusedRouteNameFromRoute(route) !== 'Action'}
       />
     </>
   );

src/app/navigation/LinkingConfiguration.ts

@@ -22,6 +22,12 @@ const linking: LinkingOptions<RootStackParamList> = {
               Stats: 'stats',
               Resources: 'resources',
               Settings: 'settings',
+              Action: {
+                path: 'add',
+                screens: {
+                  Item: 'item',
+                },
+              },
             },
           },
           Auth: {