Wolf/ohome-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

recipes visible

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-02 15:43:43 +01:00
parent ad4778de3d
commit ad391b69f6
19 changed files with 252 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/App.js
View File

@@ -4,8 +4,11 @@ import { TouchableOpacity, View } from 'react-native';
//components //components
import HomePage from './pages/HomePage'; import HomePage from './pages/HomePage';
import GroceryListPage from './pages/groceryList/GroceryListPage'; import GroceryListPage from './pages/groceryList/GroceryListPage';
import RecipePage from './pages/recipes/RecipesPage'; import RecipePage from './pages/recipes/RecipesPage';
import AddRecipe from './pages/recipes/AddRecipe'; import AddRecipe from './pages/recipes/AddRecipe';
import Recipe from './pages/recipes/Recipe';
import theme from './styles/theme'; import theme from './styles/theme';
//dependencies //dependencies
//navigation //navigation
@@ -24,16 +27,6 @@ const MyTheme = {
}, },
}; };
// const ScrollToTop = () => {
// const { pathname } = useLocation();
// useEffect(() => {
// window.scrollTo(0, 0);
// }, [pathname]);
// return null
// }
const Stack = createNativeStackNavigator(); const Stack = createNativeStackNavigator();
function App() { function App() {
@@ -59,6 +52,8 @@ function App() {
), ),
}} /> }} />
<Stack.Screen name="Groceries" component={GroceryListPage} /> <Stack.Screen name="Groceries" component={GroceryListPage} />
<Stack.Screen name="Recipes" component={RecipePage} />
<Stack.Screen name="Recipe" component={Recipe} />
</Stack.Navigator> </Stack.Navigator>
</NavigationContainer> </NavigationContainer>
); );

6
src/components/Home/RecipeCard.js
View File

@@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import { useNavigation } from '@react-navigation/core';
//dependencies //dependencies
//styles //styles
import {WrapperCard, TextCard, IconRecipe} from './styles/groceryCard' import {WrapperCard, TextCard, IconRecipe} from './styles/groceryCard'
const RecipeCard = () => { const RecipeCard = () => {
const navigation = useNavigation();
return ( return (
// <Link to="/recipes"> <WrapperCard onPress={() => navigation.navigate('Recipes')}>
<WrapperCard>
<TextCard>Recipes</TextCard> <TextCard>Recipes</TextCard>
<IconRecipe/> <IconRecipe/>
</WrapperCard> </WrapperCard>
// </Link>
) )
} }

138
src/components/modals/groceries/ModalAddItem.js
View File

@@ -68,76 +68,76 @@ const ModalAddItem = (props) => {
onBackdropPress={props.closeModal} onBackdropPress={props.closeModal}
onBackButtonPress={props.closeModal} onBackButtonPress={props.closeModal}
useNativeDriverForBackdrop useNativeDriverForBackdrop
style={{margin: 0}} > style={{ margin: 0 }} >
<Wrapper> <Wrapper>
<ModalHeader>Add product</ModalHeader> <ModalHeader>Add product</ModalHeader>
{/* {product && product.image && <Image source={product.image} />} */} {/* {product && product.image && <Image source={product.image} />} */}
<WrapperInput> <WrapperInput>
<IconProduct /> <IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) } <Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false)}
value={productName} value={productName}
onChangeText={(text) => setProductName(text)} onChangeText={(text) => setProductName(text)}
placeholder="Product name" /> placeholder="Product name" />
{productName != "" ? <IconCheck /> : <IconWrong />} {productName != "" ? <IconCheck /> : <IconWrong />}
</WrapperInput> </WrapperInput>
{focusedProduct && <WrapperDropdown> {focusedProduct && <WrapperDropdown>
<Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} /> <Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
</WrapperDropdown>} </WrapperDropdown>}
<WrapperInput> <WrapperInput>
<IconAmount /> <IconAmount />
<Input style={{ width: '69%' }} <Input style={{ width: '69%' }}
keyboardType={'number-pad'} keyboardType={'number-pad'}
value={amount} value={amount}
onChangeText={(text) => setAmount(text)} onChangeText={(text) => setAmount(text)}
placeholder="Amount" /> placeholder="Amount" />
{amount ? <IconCheck /> : <IconWrong />} {amount ? <IconCheck /> : <IconWrong />}
<InputSmall style={{ marginLeft: "1%", width: '10%' }} <InputSmall style={{ marginLeft: "1%", width: '10%' }}
onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)} onFocus={() => setFocusedQt(true)} onEndEditing={() => setFocusedQt(false)}
value={qt} value={qt}
onChangeText={(text) => setQt(text)} onChangeText={(text) => setQt(text)}
placeholder="Qt." /> placeholder="Qt." />
</WrapperInput> </WrapperInput>
{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}> {focusedQt && <WrapperDropdown style={{ marginLeft: "60%" }}>
<QtDropdown text={qt} setElement={setQt} /> <QtDropdown text={qt} setElement={setQt} />
</WrapperDropdown>} </WrapperDropdown>}
<WrapperInput> <WrapperInput>
<IconPerson /> <IconPerson />
<Input <Input
value={person} value={person}
onChangeText={(text) => setPerson(text)} onChangeText={(text) => setPerson(text)}
placeholder="For" /> placeholder="For" />
</WrapperInput> </WrapperInput>
<WrapperInput> <WrapperInput>
<IconDetails /> <IconDetails />
<Input <Input
value={details} value={details}
onChangeText={(text) => setDetails(text)} onChangeText={(text) => setDetails(text)}
placeholder="Additional details" /> placeholder="Additional details" />
</WrapperInput> </WrapperInput>
<WrapperInput> <WrapperInput>
<IconTag /> <IconTag />
<Input type="text" <Input type="text"
onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)} onFocus={() => setFocusedTag(true)} onEndEditing={() => setFocusedTag(false)}
value={tag} value={tag}
onChangeText={(text) => setTag(text)} onChangeText={(text) => setTag(text)}
placeholder="Tag" /> placeholder="Tag" />
</WrapperInput> </WrapperInput>
{focusedTag && <WrapperDropdown> {focusedTag && <WrapperDropdown>
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} /> <Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>} </WrapperDropdown>}
<WrapperInput> <WrapperInput>
<IconDollar /> <IconDollar />
<Input <Input
keyboardType={'number-pad'} keyboardType={'number-pad'}
value={price} value={price}
onChangeText={(text) => setPrice(text)} onChangeText={(text) => setPrice(text)}
placeholder="Price" /> placeholder="Price" />
</WrapperInput> </WrapperInput>
<WrapperButtons> <WrapperButtons>
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button> <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator /> <VerticalSeperator />
<Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button> <Button onPress={() => handleSubmit()}><ButtonText>Add Item</ButtonText></Button>
</WrapperButtons> </WrapperButtons>
</Wrapper> </Wrapper>
</StyledModal > </StyledModal >
) )

21
src/components/modals/recipes/ModalAddIngredients.js
View File

@@ -7,12 +7,13 @@ import { findRecipeById } from '../../../redux/slices/recipesSlice'
//styles //styles
import { import {
StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
} from '../styles/modal' } from '../styles/modal'
import Ingredient from '../../recipes/Ingredient&Button' import Ingredient from '../../recipes/Ingredient&Button'
import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice' import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
import Dropdown from '../../Dropdown' import Dropdown from '../../Dropdown'
import theme from '../../../styles/theme'; import theme from '../../../styles/theme';
import { Text } from 'react-native';
const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} /> const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
@@ -56,7 +57,12 @@ const ModalAddIngredients = (props) => {
} }
} }
return ( return (
<StyledModal show={props.visible} centered={true} onHide={props.closeModal} > <StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
onBackdropPress={props.closeModal}
onBackButtonPress={props.closeModal}
useNativeDriverForBackdrop
style={{margin: 0}} >
<Wrapper>
<ModalHeader>Add to grocerylist</ModalHeader> <ModalHeader>Add to grocerylist</ModalHeader>
<ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription> <ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
<WrapperInput> <WrapperInput>
@@ -65,7 +71,7 @@ const ModalAddIngredients = (props) => {
style={{ fontSize: 20 }} style={{ fontSize: 20 }}
type="text" type="text"
value={listName} value={listName}
onChange={(text) => setListName(text.target.value)} onChangeText={(text) => setListName(text)}
onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }} onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
placeholder="Grocery list" /> placeholder="Grocery list" />
{listName ? <IconCheck /> : <IconWrong />} {listName ? <IconCheck /> : <IconWrong />}
@@ -78,9 +84,9 @@ const ModalAddIngredients = (props) => {
<IconMeal /> <IconMeal />
<Input <Input
style={{ fontSize: 20, width: 100 }} style={{ fontSize: 20, width: 100 }}
type="number" type="number-pad"
value={servings} value={servings}
onChange={(text) => setServings(Number(text.target.value))} onChangeText={(text) => setServings(text)}
min={amountOfServings} min={amountOfServings}
step={amountOfServings} step={amountOfServings}
placeholder="Multiplier" /> placeholder="Multiplier" />
@@ -88,10 +94,11 @@ const ModalAddIngredients = (props) => {
</WrapperInput> </WrapperInput>
{IngredientsList} {IngredientsList}
<WrapperButtons> <WrapperButtons>
<Button onClick={props.closeModal}>Close</Button> <Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
<VerticalSeperator /> <VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add</Button> <Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
</WrapperButtons> </WrapperButtons>
</Wrapper>
</StyledModal > </StyledModal >
) )
} }

5
src/components/recipes/Ingredient&Button.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { View } from 'react-native' import { View } from 'react-native'
import styled from "styled-components" import styled from "styled-components"
@@ -10,10 +11,10 @@ export const Wrapper = styled(View)`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
border-bottom-color: ${props => props.theme.colors.dp1}; border-bottom-color: ${props => props.theme.colors.dp01};
border-bottom-width: 1px; border-bottom-width: 1px;
border-radius: 20px; border-radius: 20px;
background-color: ${props => props.checked === true && props.theme.colors.selected + '33'}; ${props => props.checked === true && css`background-color: ` + props.theme.colors.selected + '33'};
` `
const IngredientButton = (props) => { const IngredientButton = (props) => {

8
src/components/recipes/RecipeCard.js
View File

@@ -1,11 +1,13 @@
import { useNavigation } from "@react-navigation/core";
import React from "react";
import { WrapperRecipeCard, RecipeName, ImageRecipe } from "./styles/recipeCard" import { WrapperRecipeCard, RecipeName, ImageRecipe } from "./styles/recipeCard"
const RecipeCard = (props) => { const RecipeCard = (props) => {
let recipe = props.recipe let recipe = props.recipe
const navigation = useNavigation();
return ( return (
<WrapperRecipeCard to={"/recipes/"+recipe._id}> <WrapperRecipeCard onPress={() => navigation.navigate('Recipe', { id: recipe._id })}>{/*to={"/recipes/"+recipe._id}>*/}
{recipe.image && <ImageRecipe source={recipe.image} />} {recipe.image != "" && <ImageRecipe source={{ uri: recipe.image }} />}
<RecipeName>{recipe.name}</RecipeName> <RecipeName>{recipe.name}</RecipeName>
</WrapperRecipeCard> </WrapperRecipeCard>
) )

1
src/components/recipes/RecipeList.js
View File

@@ -1,3 +1,4 @@
import React from "react";
import { WrapperRecipeList } from "./styles/recipeList" import { WrapperRecipeList } from "./styles/recipeList"
import RecipeCard from "./RecipeCard" import RecipeCard from "./RecipeCard"
import { useSelector } from "react-redux" import { useSelector } from "react-redux"

4
src/components/recipes/addRecipe/Buttons.js
View File

@@ -4,6 +4,7 @@ import {
WrapperAddRecipe, IconPlus, WrapperAddRecipe, IconPlus,
WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit WrapperOptions, IconOptions, WrapperOptionButtons, IconRemove, IconEdit
} from "./styles/buttons" } from "./styles/buttons"
import React from "react";
import { useDispatch } from "react-redux" import { useDispatch } from "react-redux"
import { removeRecipe } from "../../../redux/slices/recipesSlice" import { removeRecipe } from "../../../redux/slices/recipesSlice"
@@ -12,6 +13,7 @@ import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
import { Alert } from "react-native" import { Alert } from "react-native"
export const AddRecipeButton = () => { export const AddRecipeButton = () => {
return ( return (
// < Link to="/recipes/addRecipe"> // < Link to="/recipes/addRecipe">
<WrapperAddRecipe> <WrapperAddRecipe>
@@ -24,7 +26,7 @@ export const AddRecipeButton = () => {
export const AddIngredientsButton = (props) => { export const AddIngredientsButton = (props) => {
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
return (<> return (<>
<WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}> <WrapperAddItem style={{ bottom: 10 }} onPress={()=>setVisible(true)}>
<PlusIcon /> <PlusIcon />
</WrapperAddItem> </WrapperAddItem>
<ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} /> <ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />

11
src/components/recipes/addRecipe/Ingredient.js
View File

@@ -1,7 +1,8 @@
import React from 'react';
import { View } from "react-native" import { View } from "react-native"
import { useSelector } from "react-redux" import { useSelector } from "react-redux"
import { WrapperIngredient, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient' import { WrapperIngredient, WrapperIngredientLeft, TagCircle, IngredientName, IngredientPortion, IngredientAmount, IconEdit, IconRemove } from './styles/ingredient'
export const Ingredient = (props) => { export const Ingredient = (props) => {
let ingredient = props.ingredient let ingredient = props.ingredient
@@ -9,14 +10,14 @@ export const Ingredient = (props) => {
let multiplier = props.multiplier ? props.multiplier : 1 let multiplier = props.multiplier ? props.multiplier : 1
return ( return (
<WrapperIngredient> <WrapperIngredient>
<View id="left"> <WrapperIngredientLeft>
<TagCircle tagColor={tag.color} /> <TagCircle tagColor={tag.color} />
<IngredientPortion>{ingredient.portion}</IngredientPortion> <IngredientPortion>{ingredient.portion}</IngredientPortion>
<IngredientName>{ingredient.productName}</IngredientName> <IngredientName>{ingredient.productName}</IngredientName>
</View> </WrapperIngredientLeft>
<IngredientAmount>{ingredient.amount*multiplier}</IngredientAmount> <IngredientAmount>{ingredient.amount*multiplier}</IngredientAmount>
{/* {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />} */} {props.EditIngredient && <IconEdit onClick={() => props.EditIngredient(props.index)} />}
{/* {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />} */} {props.RemoveIngredient && <IconRemove onClick={() => props.RemoveIngredient(props.index)} />}
</WrapperIngredient> </WrapperIngredient>
) )
} }

1
src/components/recipes/addRecipe/Inputs.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { useState } from "react" import { useState } from "react"
import { View } from "react-native" import { View } from "react-native"
import { useSelector } from "react-redux" import { useSelector } from "react-redux"

72
src/components/recipes/addRecipe/styles/ingredient.js
View File

@@ -5,58 +5,58 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
import theme from "../../../../styles/theme"; import theme from "../../../../styles/theme";
export const WrapperIngredient = styled(View)` export const WrapperIngredient = styled(View)`
margin: 5px 0px; margin: 5px 0px;
display: flex; display: flex;
flex: 1; flex: 1;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
#left{ `
export const WrapperIngredientLeft = styled(View)`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
width: 75%; width: 75%;
}
` `
export const TagCircle = styled(View)` export const TagCircle = styled(View)`
background-color: ${(props) => props.tagColor}; background-color: ${(props) => props.tagColor};
width: 7px; width: 7px;
height: 7px; height: 7px;
border-radius: 4px; border-radius: 4px;
align-self: center; align-self: center;
margin: 0px 5px; margin: 0px 5px;
` `
export const IngredientName = styled(Text)` export const IngredientName = styled(Text)`
margin-left: 10px; margin-left: 10px;
width: 60%; width: 60%;
font-size: ${({ theme }) => theme.fontSize.fontS}; font-size: ${({ theme }) => theme.fontSizes.fontS}px;
/* overflow-wrap: break-word; */ /* overflow-wrap: break-word; */
color: ${props => props.theme.colors.textW4}; color: ${props => props.theme.colors.textW4};
` `
export const IngredientPortion = styled(Text)` export const IngredientPortion = styled(Text)`
width: 35%; width: 35%;
font-size: ${({ theme }) => theme.fontSize.fontS}; font-size: ${({ theme }) => theme.fontSizes.fontS}px;
font-weight: 900; font-weight: 900;
/* word-break: break-all; */ /* word-break: break-all; */
/* overflow-wrap: break-word; */ /* overflow-wrap: break-word; */
color: ${props => props.theme.colors.textW5}; color: ${props => props.theme.colors.textW5};
` `
export const IngredientAmount = styled(Text)` export const IngredientAmount = styled(Text)`
max-width: 12%; max-width: 12%;
margin-right: 48px; margin-right: 48px;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
/* overflow-wrap: break-word; */ /* overflow-wrap: break-word; */
color: ${props => props.theme.colors.textW5}; color: ${props => props.theme.colors.textW5};
` `
const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} /> const Remove = () => <MaterialCommunityIcons name="trash-can-outline" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
export const IconRemove = styled(Remove)` export const IconRemove = styled(Remove)`
position:absolute; position:absolute;
right: 0px; right: 0px;
` `
const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSize.fontS} /> const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={theme.fontSizes.fontS} />
export const IconEdit = styled(Edit)` export const IconEdit = styled(Edit)`
position:absolute; position:absolute;
right: 20px; right: 20px;
` `

8
src/components/recipes/addRecipe/styles/inputs.js
View File

@@ -15,19 +15,19 @@ export const WrapperIngredients = styled(View)`
` `
export const InputIngredientName = styled(TextInput)` export const InputIngredientName = styled(TextInput)`
margin-top: 10px; margin-top: 10px;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px; border-bottom-width: 1px;
width:100%; width:100%;
` `
export const InputAmount = styled(TextInput)` export const InputAmount = styled(TextInput)`
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px; border-bottom-width: 1px;
width: 50px; width: 50px;
` `
export const InputPortion = styled(TextInput)` export const InputPortion = styled(TextInput)`
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px; border-bottom-width: 1px;
width: 60%; width: 60%;
@@ -39,5 +39,5 @@ export const Button = styled(Text)`
bottom: -8px; bottom: -8px;
color: ${props => props.theme.colors.primary + 'bb'}; color: ${props => props.theme.colors.primary + 'bb'};
font-weight: bold; font-weight: bold;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
` `

9
src/components/recipes/styles/recipeCard.js
View File

@@ -1,19 +1,16 @@
import { Image, Text, View } from 'react-native' import { Image, Text, TouchableOpacity, View } from 'react-native'
import styled from 'styled-components' import styled from 'styled-components'
export const WrapperRecipeCard = styled(View)` export const WrapperRecipeCard = styled(TouchableOpacity)`
box-shadow: ${({theme})=> theme.colors.shadow}; box-shadow: ${({theme})=> theme.colors.shadow};
display: flex; display: flex;
flex:1;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin: 5px;
height: 130px; height: 130px;
min-width: 130px; width: 48%;
max-width: 200px;
background-color: ${props => props.theme.colors.dp01 + 'dd'}; background-color: ${props => props.theme.colors.dp01 + 'dd'};
border-radius: 20px; border-radius: 20px;
` `

3
src/components/recipes/styles/recipeList.js
View File

@@ -3,6 +3,7 @@ import styled from 'styled-components'
export const WrapperRecipeList = styled(View)` export const WrapperRecipeList = styled(View)`
display: flex; display: flex;
justify-content: flex-start; flex-direction: row;
justify-content: space-evenly;
flex-wrap: wrap; flex-wrap: wrap;
` `

1
src/pages/recipes/AddRecipe.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { Text, View } from 'react-native' import { Text, View } from 'react-native'
//components //components
import Header from "../../components/Header" import Header from "../../components/Header"

86
src/pages/recipes/Recipe.js
View File

@@ -1,17 +1,17 @@
import React from "react"
import { useSelector } from "react-redux" import { useSelector } from "react-redux"
import { useParams } from "react-router"
//redux //redux
import { findRecipeById } from "../../redux/slices/recipesSlice" import { findRecipeById } from "../../redux/slices/recipesSlice"
import { Wrapper, WrapperRecipe } from "./styles/addRecipe" import { Column, Row, Wrapper, WrapperRecipe } from "./styles/addRecipe"
import { Ingredient } from "../../components/recipes/addRecipe/Ingredient" import { Ingredient } from "../../components/recipes/addRecipe/Ingredient"
import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr } from "./styles/recipe" import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr, SubTitle, InstructionText, WrapperNumber } from "./styles/recipe"
import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/recipes/addRecipe/Buttons" import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/recipes/addRecipe/Buttons"
import { Text, View } from "react-native" import { ScrollView, Text, View } from "react-native"
import HeaderPadding from "../../components/Header" import HeaderPadding from "../../components/Header"
const Recipe = () => { const Recipe = (props) => {
let { id } = useParams() const id = props.route.params.id
const recipe = useSelector(state => findRecipeById(state, id)) const recipe = useSelector(state => findRecipeById(state, id))
const IngredientList = recipe.ingredients.map((ingredient, index) => { const IngredientList = recipe.ingredients.map((ingredient, index) => {
return (<Ingredient ingredient={ingredient} index={index} key={index} />) return (<Ingredient ingredient={ingredient} index={index} key={index} />)
@@ -21,48 +21,50 @@ const Recipe = () => {
let strArr = recipe.instructions.split("- ") let strArr = recipe.instructions.split("- ")
const InstructionList = strArr.map((instruction, index) => { const InstructionList = strArr.map((instruction, index) => {
return index !== 0 && (<InstructionWrapper key={index} > return index !== 0 && (<InstructionWrapper key={index} >
<View><InstructionNumber>{index}</InstructionNumber></View> <WrapperNumber><InstructionNumber>{index}</InstructionNumber></WrapperNumber>
<Text id="instruction">{instruction}</Text> <InstructionText>{instruction}</InstructionText>
</InstructionWrapper>) </InstructionWrapper>)
}) })
return ( return (
<> <>
<HeaderPadding/> <ScrollView>
<Wrapper >
{recipe.image && <StyledImage source={recipe.image} />}
<WrapperRecipe>
<Text>{recipe.name}</Text>
<Hr />
{recipe.prepTime !== 0 && recipe.prepTime && <>
<View id="row" style={{ position: 'relative', marginTop: 0 }} >
<IconPotLarge />
<TextPrep>READY IN:</TextPrep>
<View id="column" >
<TextTime>{recipe.prepTime}</TextTime>
<TextMinutes>minutes</TextMinutes>
</View>
{recipe.servings !== 0 && recipe.servings && <>
<WrapperServings>
<IconMeal />
<View>
<TextTime>{recipe.servings}</TextTime>
<TextServings>servings</TextServings>
</View>
</WrapperServings>
</>}
</View>
<Hr />
</>}
<View style={{ width: '100%' }}> <Wrapper >
<Title>Ingredients</Title> {recipe.image != "" && <StyledImage source={{ uri: recipe.image }} />}
{IngredientList} <WrapperRecipe>
<Title>{recipe.name}</Title>
<Hr /> <Hr />
<Title>Instructions</Title> {recipe.prepTime !== 0 && recipe.prepTime && <>
{InstructionList} <Row style={{ position: 'relative', marginTop: 0 }} >
</View> <IconPotLarge />
</WrapperRecipe> <TextPrep>READY IN:</TextPrep>
</Wrapper> <Column >
<TextTime>{recipe.prepTime}</TextTime>
<TextMinutes>minutes</TextMinutes>
</Column>
{recipe.servings !== 0 && recipe.servings && <>
<WrapperServings>
<IconMeal />
<View>
<TextTime>{recipe.servings}</TextTime>
<TextServings>servings</TextServings>
</View>
</WrapperServings>
</>}
</Row>
<Hr />
</>}
<View style={{ width: '100%' }}>
<SubTitle>Ingredients</SubTitle>
{IngredientList}
<Hr />
<SubTitle>Instructions</SubTitle>
{InstructionList}
</View>
</WrapperRecipe>
</Wrapper>
</ScrollView>
<AddIngredientsButton id={id} /> <AddIngredientsButton id={id} />
</> </>
) )

1
src/pages/recipes/RecipesPage.js
View File

@@ -1,4 +1,5 @@
//components //components
import React from "react";
import RecipeList from "../../components/recipes/RecipeList" import RecipeList from "../../components/recipes/RecipeList"
import Header from '../../components/Header' import Header from '../../components/Header'
import { ArrowBack } from '../styles/page' import { ArrowBack } from '../styles/page'

44
src/pages/recipes/styles/addRecipe.js
View File

@@ -16,21 +16,20 @@ export const WrapperRecipe = styled(View)`
align-items: flex-start; align-items: flex-start;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
#row{ `
margin-top: 5px; export const Row = styled(View)`
display: flex; margin-top: 5px;
flex-direction: row; display: flex;
width: 100%; flex-direction: row;
align-items: flex-end; width: 100%;
} align-items: center;
#column{ `
margin-left: 5px; export const Column = styled(View)`
margin-bottom: -3px; margin-left: 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
justify-content: flex-end; justify-content: flex-end;
}
` `
export const Input = styled(TextInput)` export const Input = styled(TextInput)`
flex:1; flex:1;
@@ -39,7 +38,7 @@ export const Input = styled(TextInput)`
color: ${props => props.theme.colors.textW1}; color: ${props => props.theme.colors.textW1};
border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px; border-bottom-width: 1px;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
width: 100%; width: 100%;
` `
@@ -49,10 +48,9 @@ export const InputInstructions = styled(Text)`
padding: 5px; padding: 5px;
color: ${props => props.theme.colors.textW1}; color: ${props => props.theme.colors.textW1};
border-top: solid ${props => props.theme.colors.primary + 'aa'} 1px;
border-bottom-color: ${props => props.theme.colors.primary + 'aa'}; border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px; border-bottom-width: 1px;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
min-height: 600px; min-height: 600px;
width: 100%; width: 100%;
` `
@@ -60,15 +58,15 @@ export const StyledImage = styled(Image)`
width: 100px; width: 100px;
height: 100px; height: 100px;
` `
export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSize.fontM} /> export const IconRecipe = () => <MaterialCommunityIcons name="pasta" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} /> export const IconPot = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSize.fontM} /> export const IconMeal = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSize.fontM} /> export const IconImage = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={theme.fontSizes.fontM} />
const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSize.fontL} /> const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.textB3} size={theme.fontSizes.fontL} />
export const IconCheck = styled(Check)` export const IconCheck = styled(Check)`
margin-right: 10px; margin-right: 10px;

48
src/pages/recipes/styles/recipe.js
View File

@@ -5,6 +5,14 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
import theme from "../../../styles/theme"; import theme from "../../../styles/theme";
export const Title = styled(Text)` export const Title = styled(Text)`
color: ${({theme}) => theme.colors.textW1};
font-weight: bold;
font-size: 28px;
`
export const SubTitle = styled(Text)`
color: ${({theme}) => theme.colors.textW2};
font-weight: bold;
font-size: 24px;
margin-top: 10px; margin-top: 10px;
` `
export const InstructionWrapper = styled(View)` export const InstructionWrapper = styled(View)`
@@ -15,27 +23,30 @@ export const InstructionWrapper = styled(View)`
align-items: center; align-items: center;
border-bottom-color: ${({ theme }) => theme.colors.dp02}; border-bottom-color: ${({ theme }) => theme.colors.dp02};
border-bottom-width: 3px; border-bottom-width: 3px;
#instruction{
margin-left: 7px;
color: ${({theme}) => theme.colors.textW4};
}
` `
export const InstructionNumber = styled(Text)` export const InstructionText= styled(Text)`
width: 80%;
font-size: 18px;
margin-left: 7px;
color: ${({theme}) => theme.colors.textW4};
`
export const WrapperNumber = styled(View)`
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: ${({theme}) => theme.colors.primary + 'dd'}; background-color: ${({theme}) => theme.colors.primary + 'dd'};
height: 36px;
width: 36px;
border-radius: 18px;
`
export const InstructionNumber = styled(Text)`
color: ${({theme}) => theme.colors.textB1}; color: ${({theme}) => theme.colors.textB1};
font-size: 25px; font-size: 25px;
font-weight: bold; font-weight: bold;
height: 34px;
width: 34px;
border-radius: 17px;
` `
export const StyledImage = styled(Image)` export const StyledImage = styled(Image)`
margin-top: -70px;
height: 200px; height: 200px;
width: 100%; width: 100%;
` `
@@ -43,25 +54,24 @@ export const TextPrep = styled(Text)`
text-align: right; text-align: right;
width: 70px; width: 70px;
font-weight: bold; font-weight: bold;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontM}px;
line-height: 1.2; color: ${({theme}) => theme.colors.textW4};
` `
export const TextTime = styled(Text)` export const TextTime = styled(Text)`
margin-bottom: -3px;
width: 70px; width: 70px;
font-size: ${({theme}) => theme.fontSize.fontS};
font-weight: bold; font-weight: bold;
line-height: 1.2; font-size: ${({theme}) => theme.fontSizes.fontM}px;
color: ${({ theme }) => theme.colors.primary}; color: ${({ theme }) => theme.colors.primary};
` `
export const TextMinutes = styled(Text)` export const TextMinutes = styled(Text)`
width: 70px; width: 70px;
font-size: ${({theme}) => theme.fontSize.fontS}; font-size: ${({theme}) => theme.fontSizes.fontS}px;
font-weight: normal;
color: ${({ theme }) => theme.colors.primary}; color: ${({ theme }) => theme.colors.primary};
` `
export const WrapperServings = styled(View)` export const WrapperServings = styled(View)`
display: flex; display: flex;
flex-direction: row;
align-items: center;
position: absolute; position: absolute;
right: 2%; right: 2%;
top: 2px; top: 2px;
@@ -69,14 +79,16 @@ export const WrapperServings = styled(View)`
export const TextServings = styled(Text)` export const TextServings = styled(Text)`
margin-top: -5px; margin-top: -5px;
font-weight: bold; font-weight: bold;
font-size: 18px;
color: ${({theme}) => theme.colors.textW4};
` `
const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={theme.fontSize.fontL} /> const PotLarge = () => <MaterialCommunityIcons name="pot-steam" color={theme.colors.primary} size={40} />
export const IconPotLarge = styled(PotLarge)` export const IconPotLarge = styled(PotLarge)`
margin: -20px 0px -16px 0px; margin: -20px 0px -16px 0px;
` `
const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primary} size={theme.fontSize.fontL} /> const Meal = () => <MaterialCommunityIcons name="silverware-clean" color={theme.colors.primary} size={40} />
export const IconMeal = styled(Meal)` export const IconMeal = styled(Meal)`
margin: -20px 0px -16px 0px; margin: -20px 0px -16px 0px;