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

No errors grocery page

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-10-31 15:25:42 +01:00
parent fb346632c5
commit 453e80f82d
26 changed files with 47 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Dropdown.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { Text, View } from 'react-native'
import { Text, TouchableOpacity, View } from 'react-native'
const WrapperDropdown = styled(View)`
display: flex;
@@ -17,7 +17,7 @@ const WrapperDropdown = styled(View)`
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
`
const DropdownItem = styled(Text)`
const DropdownItem = styled(TouchableOpacity)`
color: ${({ theme }) => theme.colors.textW2};
font-size: 20px;
`
@@ -41,7 +41,7 @@ const Dropdown = (props) => {
let dropdownList = newArray.map((element, index) => {
return (
<View key={index}>
<DropdownItem onClick={() => props.setElement(element)}>{element}</DropdownItem>
<DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
<HorizontalSeperator />
</View>
)

4
src/components/GroceryList/TabMenu.js
View File

@@ -15,10 +15,10 @@ const TabMenu = (props) => {
return (
<Wrapper>
<WrapperSelected previousPos = {previousPos} currenttab={props.currentTab}/>
<WrapperGroceries currenttab={props.currentTab} onClick={()=>handleTabPress("Groceries")}>
<WrapperGroceries currenttab={props.currentTab} onPress={()=>handleTabPress("Groceries")}>
{/* <IconGroceries currenttab={props.currentTab}/> */}
</WrapperGroceries>
<WrapperProducts currenttab={props.currentTab} onClick={()=>handleTabPress("Products")}>
<WrapperProducts currenttab={props.currentTab} onPress={()=>handleTabPress("Products")}>
{/* <IconProducts currenttab={props.currentTab}/> */}
</WrapperProducts>
</Wrapper>

10
src/components/GroceryList/groceries/GroceryButtons.js
View File

@@ -18,7 +18,7 @@ const SelectAllItemsButton = (props) => {
listId && setToggleAnim(!toggleAnim)
}
return (
<WrapperSelect toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
<WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <CheckIcon /> */}
</WrapperSelect>
)
@@ -33,7 +33,7 @@ const RemoveItemsButton = (props) => {
}
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onClick={handlePress}>
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <RemoveIcon /> */}
</WrapperRemove>
)
@@ -45,7 +45,7 @@ export const ContainerButtons = (props) => {
<>
<SelectAllItemsButton visible={visible} />
<RemoveItemsButton visible={visible} />
<WrapperButtons toggle={visible} onClick={() => setVisible(!visible)}>
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
{/* <MenuIcon /> */}
</WrapperButtons >
</>
@@ -59,7 +59,7 @@ export const AddItemButton = (props) => {
if (lists.find((list) => list.open === true)) {
return (
<>
<WrapperAddItem toggle={visibleItem} onClick={() => setVisibleItem(true)}>
<WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
{/* <PlusIcon /> */}
</WrapperAddItem>
<ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
@@ -68,7 +68,7 @@ export const AddItemButton = (props) => {
}
return (
<>
<WrapperAddList toggle={visibleList} onClick={() => setVisibleList(true)}>
<WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
{/* <ListIcon /> */}
</WrapperAddList>
<ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />

6
src/components/GroceryList/groceries/ListedItem.js
View File

@@ -15,15 +15,15 @@ const ListedItem = React.memo((props) => {
return (
<Wrapper>
<DarkLayer>
<WrapperItem person={item.person} color={tag.color} checked={item.checked} onClick={() => { props.setVisible(true); return dispatch(modalToggle(item._id)) }}>
<WrapperItem person={item.person} color={tag.color} checked={item.checked} onPress={() => { props.setVisible(true); return dispatch(modalToggle(item._id)) }}>
<TextProductName >{item.productName}</TextProductName>
<TextDetails>{item.details}</TextDetails>
<TextAmount>{item.amount.am}{item.amount.qt && " " + item.amount.qt}</TextAmount>
<TextPerson>{item.person && item.person}</TextPerson>
{/* {product.image && <Image src={product.image} />} */}
{/* {product.image && <Image source={product.image} />} */}
</WrapperItem>
</DarkLayer>
<WrapperButton onClick={() => dispatch(checkToggle(item._id))} >
<WrapperButton onPress={() => dispatch(checkToggle(item._id))} >
<CheckButton checked = {item.checked} />
</WrapperButton>
</Wrapper>

2
src/components/GroceryList/groceries/styles/list.js
View File

@@ -85,7 +85,7 @@ export const TextTotalAmount = styled(Text)`
position: absolute;
align-self: flex-end;
z-index: 2;
top:60px;
top:70px;
right:0px;
font-size: 20px;
color: ${({ theme }) => theme.colors.textW1};

8
src/components/GroceryList/groceries/styles/listedItem.js
View File

@@ -1,4 +1,4 @@
import { Text, View, Image} from 'react-native'
import { Text, View, Image, TouchableOpacity} from 'react-native'
import styled, { css } from 'styled-components'
export const Wrapper = styled(View)`
@@ -17,7 +17,7 @@ export const DarkLayer = styled(View)`
margin-left: 7px;
`
export const WrapperItem = styled(View)`
export const WrapperItem = styled(TouchableOpacity)`
box-shadow: ${({ theme }) => theme.colors.shadow};
display: flex;
min-height: ${props => props.person ? css`60px` : css`30px`};
@@ -30,7 +30,7 @@ export const WrapperItem = styled(View)`
background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
`
export const WrapperButton = styled(View)`
export const WrapperButton = styled(TouchableOpacity)`
height: 30px;
width: 40px;
`
@@ -90,7 +90,7 @@ export const TextPerson = styled(Text)`
`
export const StyledImage = styled(Image)`
position: absolute;
object-fit: cover;
resize-mode: contain;
opacity: 0.05;
height: 100%;
width: 200px;

8
src/components/GroceryList/products/ListedProduct.js
View File

@@ -13,15 +13,15 @@ const ListedProduct = React.memo((props) => {
const tag = useSelector(state => findTag(state, product.tag))
return (
<Wrapper>
<WrapperProduct color={tag.color} checked={product.checked} onClick={()=>{props.setVisible(true); return dispatch(modalToggle(product._id))}}>
<WrapperProduct color={tag.color} checked={product.checked} onPress={()=>{props.setVisible(true); return dispatch(modalToggle(product._id))}}>
<WrapperText>
<TextProductName >{product.productName}</TextProductName>
<TextTag color={tag.color}>{tag.tagName}</TextTag>
{product.price !== 0&& <TextPrice>€ {product.price}</TextPrice>}
{/* {product.price !== 0&& <TextPrice>€ {product.price}</TextPrice>} */}
</WrapperText>
{product.image && <StyledImage src={product.image}/>}
{/* {product.image && <StyledImage source={product.image}/>} */}
</WrapperProduct>
<WrapperButton onClick={()=>dispatch(checkToggle(product._id))} >
<WrapperButton onPress={()=>dispatch(checkToggle(product._id))} >
<CheckButton checked={product.checked}>
{/* <IconCheck checked={product.checked} /> */}
</CheckButton>

10
src/components/GroceryList/products/styles/listedProduct.js
View File

@@ -1,4 +1,4 @@
import { View, Text, Image } from 'react-native'
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styled, { css } from 'styled-components'
//dependencies
import { HiCheck } from 'react-icons/hi'
@@ -15,7 +15,7 @@ export const Wrapper = styled(View)`
width: 100vw;
}
`
export const WrapperProduct = styled(View)`
export const WrapperProduct = styled(TouchableOpacity)`
box-shadow: ${({theme})=> theme.colors.shadow};
display: flex;
flex: 1;
@@ -28,7 +28,7 @@ export const WrapperProduct = styled(View)`
background-color: ${props => props.checked ? props.theme.colors.itemSelected : props.color + '66'};
`
export const WrapperButton = styled(View)`
export const WrapperButton = styled(TouchableOpacity)`
height: 60px;
width: 40px;
`
@@ -45,7 +45,7 @@ export const CheckButton = styled(View)`
background-color: ${props => props.checked ? props.theme.colors.selected : props.theme.colors.buttonGrey};
`
export const WrapperText = styled(View)`
export const WrapperText = styled(Text)`
flex:1;
max-width:600px;
@media ${({ theme }) => theme.mediaQueries.below768}{
@@ -80,7 +80,7 @@ export const StyledImage = styled(Image)`
position: absolute;
top:0;
right:0;
object-fit: cover;
resize-mode: contain;
width: 100px;
height: 100%;
max-height:120px;

4
src/components/GroceryList/styles/tabMenu.js
View File

@@ -1,4 +1,4 @@
import { View } from 'react-native'
import { TouchableOpacity, View } from 'react-native'
import styled, { css } from 'styled-components'
import { RiShoppingBasketLine } from 'react-icons/ri'
import { FaAppleAlt } from 'react-icons/fa'
@@ -7,7 +7,7 @@ import { FaAppleAlt } from 'react-icons/fa'
const iconSize = '2.0px'
const iconSizeSelected = '2.5px'
const WrapperIcon = styled(View)`
const WrapperIcon = styled(TouchableOpacity)`
display: flex;
align-items: center;
justify-content: center;

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

@@ -66,7 +66,7 @@ const ModalAddItem = (props) => {
return (
<StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
<ModalHeader>Add product</ModalHeader>
{/* {product && product.image && <Image src={product.image} />} */}
{/* {product && product.image && <Image source={product.image} />} */}
<WrapperInput>
<IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}

2
src/components/modals/groceries/ModalAddProduct.js
View File

@@ -79,7 +79,7 @@ export const ModalAddProduct = (props) => {
onChange={(text) => setImage(text.target.value)}
placeholder="Image link" />
</WrapperInput>
{image && <StyledImage src={image} alt={'No link...'} />}
{image && <StyledImage source={image} alt={'No link...'} />}
<WrapperButtons>
<Button onClick={props.closeModal}>Close</Button>
<VerticalSeperator />

2
src/components/modals/groceries/ModalEditItem.js
View File

@@ -63,7 +63,7 @@ const ModalEditItem = (props) => {
return (
<StyledModal show={props.visible} centered={true} onHide={closeModal} >
<WrapperProduct color={tagState.color}>
{product && product.image && <StyledImage src={product.image} />}
{product && product.image && <StyledImage source={product.image} />}
<WrapperProductInfo>
<TextPrice>€ {price}</TextPrice>
<TextTag color={tagState.color}>{tagState.tagName}</TextTag>

2
src/components/modals/groceries/ModalEditProduct.js
View File

@@ -48,7 +48,7 @@ const ModalEditProduct = (props) => {
return (
<StyledModal show={props.visible} centered={true} onHide={closeModal} >
<WrapperProduct color={usedTag.color}>
{image && <StyledImage src={image} alt="No image found" />}
{image && <StyledImage source={image} alt="No image found" />}
<WrapperProductInfo>
<TextPrice>€ {price}</TextPrice>
<TextTag color={usedTag.color}>{usedTag.tagName}</TextTag>

2
src/components/modals/groceries/styles/addItem.js
View File

@@ -7,7 +7,7 @@ import { Image } from 'react-native'
export const StyledImage = styled(Image)`
position: absolute;
object-fit: cover;
resize-mode: contain;
z-index:0;
opacity: 0.1;
width: 70%;

2
src/components/modals/groceries/styles/addProduct.js
View File

@@ -7,7 +7,7 @@ import { Image } from 'react-native'
export const StyledImage = styled(Image)`
position: absolute;
object-fit: cover;
resize-mode: contain;
width: 35%;
height: 50%;
right:0;

2
src/components/modals/groceries/styles/edit.js
View File

@@ -33,7 +33,7 @@ export const TextTag = styled(Text)`
margin: 0px 5px;
`
export const StyledImage = styled(Image)`
object-fit: cover;
resize-mode: contain;
width: 150px;
height: 150px;
margin-top:-50px;

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

@@ -90,7 +90,7 @@ const ModalAddIngredients = (props) => {
min={amountOfServings}
step={amountOfServings}
placeholder="Multiplier" />
<p style={{ marginLeft: 5 }}>servings</p>
<Text style={{ marginLeft: 5 }}>servings</Text>
</WrapperInput>
{IngredientsList}
<WrapperButtons>

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

@@ -5,7 +5,7 @@ const RecipeCard = (props) => {
let recipe = props.recipe
return (
<WrapperRecipeCard to={"/recipes/"+recipe._id}>
{recipe.image && <ImageRecipe src={recipe.image} />}
{recipe.image && <ImageRecipe source={recipe.image} />}
<RecipeName>{recipe.name}</RecipeName>
</WrapperRecipeCard>
)

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

@@ -32,7 +32,7 @@ export const RecipeName = styled(Text)`
`
export const ImageRecipe = styled(Image)`
object-fit: cover;
resize-mode: contain;
width: 100%;
height: 100%;
border-radius: 20px;

2
src/pages/groceryList/GroceryListPage.js
View File

@@ -13,7 +13,7 @@ const GroceryListPage = () => {
{
currentTab === "Groceries" ? <Groceries /> : <Products />
}
{/* <TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} /> */}
<TabMenu currentTab={currentTab} setCurrentTab={setCurrentTab} />
</WrapperGroceryPage>
)
}

2
src/pages/groceryList/storageManagement/Groceries.js
View File

@@ -14,7 +14,7 @@ import { useSelector } from 'react-redux'
const Groceries = () => {
const statusItems = useSelector(state => state.items.status)
return (
<View>
<View style={{height: '100%'}}>
{statusItems === 'loading' ? <LoadAnimation/>
: <GroceryList />}
<ContainerButtons />

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

@@ -67,7 +67,7 @@ const AddRecipe = () => {
<>
<HeaderPadding/>
<Wrapper >
{image && <StyledImage src={image} alt="Recipe" />}
{image && <StyledImage source={image} alt="Recipe" />}
<WrapperRecipe>
<View id="row">
{/* <IconRecipe /> */}

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

@@ -31,7 +31,7 @@ const Recipe = () => {
<>
<HeaderPadding/>
<Wrapper >
{recipe.image && <StyledImage src={recipe.image} />}
{recipe.image && <StyledImage source={recipe.image} />}
<WrapperRecipe>
<Text>{recipe.name}</Text>
<Hr />

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

@@ -63,7 +63,7 @@ export const InputInstructions = styled(Text)`
width: 100%;
`
export const StyledImage = styled(Image)`
object-fit: cover;
resize-mode: contain;
width: 100px;
height: 100px;
`

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

@@ -34,7 +34,7 @@ export const InstructionNumber = styled(Text)`
export const StyledImage = styled(Image)`
margin-top: -70px;
object-fit: cover;
resize-mode: contain;
height: 200px;
width: 100%;
@media ${({theme}) => theme.mediaQueries.above768}{

4
src/styles/componentBlueprints.js
View File

@@ -1,4 +1,4 @@
import { View } from "react-native"
import { TouchableOpacity, View } from "react-native"
import React from 'react'
import styled, { css } from 'styled-components'
//deps
@@ -6,7 +6,7 @@ import { HiCheck } from 'react-icons/hi'
import LightenDarken from '../functions'
//standard button layout
export const Button = styled(View)`
export const Button = styled(TouchableOpacity)`
box-shadow: ${({ theme }) => theme.colors.shadow};
display: flex;
align-items: center;