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

modal Add item works

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 12:30:56 +01:00
parent e3c0555452
commit b4e68dbac4
31 changed files with 167 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Dropdown.js
View File

@@ -1,15 +1,14 @@
import React from 'react'
import styled from 'styled-components'
import { Text, TouchableOpacity, View } from 'react-native'
import { ScrollView, Text, TouchableOpacity, View } from 'react-native'
const WrapperDropdown = styled(View)`
const WrapperDropdown = styled(ScrollView)`
display: flex;
flex-direction: column;
position: absolute;
z-index:2;
overflow-x: hidden;
overflow-y: auto;
overflow: hidden;
background-color: ${({ theme }) => theme.colors.dp01 + 'cc'};
width: 200px;
@@ -18,6 +17,8 @@ const WrapperDropdown = styled(View)`
border-bottom-right-radius: 10px;
`
const DropdownItem = styled(TouchableOpacity)`
`
const TextProduct = styled(Text)`
color: ${({ theme }) => theme.colors.textW2};
font-size: 20px;
`
@@ -41,7 +42,7 @@ const Dropdown = (props) => {
let dropdownList = newArray.map((element, index) => {
return (
<View key={index}>
<DropdownItem onPress={() => props.setElement(element)}>{element}</DropdownItem>
<DropdownItem onPress={() => props.setElement(element)}><TextProduct>{element}</TextProduct></DropdownItem>
<HorizontalSeperator />
</View>
)

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

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

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

@@ -19,7 +19,7 @@ const SelectAllItemsButton = (props) => {
}
return (
<WrapperSelect toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <CheckIcon /> */}
<CheckIcon />
</WrapperSelect>
)
}
@@ -34,7 +34,7 @@ const RemoveItemsButton = (props) => {
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <RemoveIcon /> */}
<RemoveIcon />
</WrapperRemove>
)
}
@@ -46,7 +46,7 @@ export const ContainerButtons = (props) => {
<SelectAllItemsButton visible={visible} />
<RemoveItemsButton visible={visible} />
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
{/* <MenuIcon /> */}
<MenuIcon />
</WrapperButtons >
</>
)
@@ -60,16 +60,16 @@ export const AddItemButton = (props) => {
return (
<>
<WrapperAddItem toggle={visibleItem} onPress={() => setVisibleItem(true)}>
{/* <PlusIcon /> */}
<PlusIcon />
<ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
</WrapperAddItem>
<ModalAddItem visible={visibleItem} closeModal={() => setVisibleItem(false)} />
</>
)
}
return (
<>
<WrapperAddList toggle={visibleList} onPress={() => setVisibleList(true)}>
{/* <ListIcon /> */}
<ListIcon />
</WrapperAddList>
<ModalAddList visible={visibleList} closeModal={() => setVisibleList(false)} />
</>

22
src/components/GroceryList/groceries/GroceryList.js
View File

@@ -7,16 +7,13 @@ import { selectAllSortedItems } from '../../../redux/slices/groceryList/itemsSli
//styles
import { WrapperGroceryList, TextTotalAmount } from './styles/list'
import { selectAllProducts } from '../../../redux/slices/groceryList/productsSlice';
import { ScrollView, View } from 'react-native';
import { FlatList, View } from 'react-native';
import HeaderPadding from '../../Header';
const GroceryList = (props) => {
const items = useSelector(selectAllSortedItems)
const products = useSelector(selectAllProducts)
const lists = useSelector(state => state.lists.entities)
let Lists = lists.map((list, index) => {
return <List key={index} listId={list._id} />
})
const totalPrice = Math.round(items.reduce((accumulator, item) => {
let product = products.find(product => product._id === item._id && item.checked)
accumulator += (product ? product.price : 0) * item.amount.am
@@ -26,11 +23,18 @@ const GroceryList = (props) => {
return (
<WrapperGroceryList>
<TextTotalAmount>total: € {totalPrice}</TextTotalAmount>
<ScrollView>
<HeaderPadding/>
{Lists}
<View style={{ height: 150 }} />
</ScrollView>
<FlatList
ListHeaderComponent={<HeaderPadding />}
ListFooterComponent={<View style={{ height: 100 }} />}
initialNumToRender={15}
maxToRenderPerBatch={10}
data={lists}
renderItem={({ item }) => {
return <List listId={item._id} />
}}
keyExtractor={(item, index) => {
return index.toString();
}} />
</WrapperGroceryList>
)
}

41
src/components/GroceryList/groceries/List.js
View File

@@ -1,4 +1,4 @@
import React, { useState , useEffect} from 'react'
import React, { useState, useEffect } from 'react'
//components
import ListedItem from './ListedItem'
import ModalEditItem from '../../modals/groceries/ModalEditItem';
@@ -9,29 +9,24 @@ import { Wrapper, WrapperList, WrapperListTitle, ListTitle, ListSubtitle, Button
import { useSelector, useDispatch } from 'react-redux';
import { selectAllSortedItems, itemsRemovedByList } from '../../../redux/slices/groceryList/itemsSlice'
import { toggleOpen, listRemoved } from '../../../redux/slices/groceryList/listsSlice'
import { View } from 'react-native';
import { FlatList, View } from 'react-native';
export default React.memo((props) => {
const items = useSelector(selectAllSortedItems)
const list = useSelector(state => state.lists.entities.find((list) => list._id === props.listId))
const [height, setHeight] = useState(100);
useEffect(() => {
setHeight(1);
}, [list.open, items]);
const dispatch = useDispatch()
const [modalItemVisible, setModalItemVisible] = useState(false);
const [modalListVisible, setModalListVisible] = useState(false);
const itemList = items.filter(item => item.listId === props.listId).map((item, index) => {
return (
<ListedItem key={index} item={item} setVisible={setModalItemVisible} />
)
})
const removeList = () => {
if (window.confirm("Do you really want to remove this list and the groceries within")) {
dispatch(itemsRemovedByList(props.listId))
@@ -47,22 +42,32 @@ export default React.memo((props) => {
</WrapperLeft>
<WrapperRight>
{list.open && <>
{/* <ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} /> */}
<ButtonEditList onClick={() => setModalListVisible(true)} />
<ButtonRemoveList onClick={removeList} />
</>}
{/* <IconArrowDown visible={list.open.toString()} /> */}
<IconArrowDown visible={list.open.toString()} />
</WrapperRight>
</WrapperListTitle>
<ListSizeWrapper height={height} visible={list.open} >
< WrapperList listLength={items.length} onLayout={(event) => {setHeight(event.nativeEvent.layout.height)}}>
{list.open && itemList}
{
itemList.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>
< WrapperList listLength={items.length} onLayout={(event) => { setHeight(event.nativeEvent.layout.height) }}>
{list.open &&
<FlatList style={{width: '100%'}}
initialNumToRender={20}
maxToRenderPerBatch={10}
// ListFooterComponent={items.length === 0 && <ListSubtitle style={{ fontSize: 22 }} >Add a grocery</ListSubtitle>}
data={items.filter(item => item.listId === props.listId)}
renderItem={({ item }) => (
<ListedItem item={item} setVisible={setModalItemVisible} />
)}
keyExtractor={(item, index) => {
return index.toString();
}}
/>
}
{items.find(item => item.modalVisible) && <ModalEditItem visible={modalItemVisible} setVisible={setModalItemVisible} />}
</WrapperList >
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
</ListSizeWrapper>
<ModalEditList id={props.listId} visible={modalListVisible} setVisible={setModalListVisible} />
</ListSizeWrapper>
</Wrapper>
)
})

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

@@ -19,8 +19,8 @@ const ListedItem = React.memo((props) => {
<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 source={product.image} />} */}
{item.person != "" && <TextPerson>{item.person}</TextPerson>}
{/* {product.image != "" && <Image source={product.image} />} */}
</WrapperItem>
</DarkLayer>
<WrapperButton onPress={() => dispatch(checkToggle(item._id))} >

5
src/components/GroceryList/groceries/styles/buttons.js
View File

@@ -1,3 +1,4 @@
import React from 'react'
import styled, { css } from 'styled-components'
//dependencies
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -51,11 +52,11 @@ export const WrapperSelect = styled(Button)`
bottom:70px;
`};
`
export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={47} />
export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.colors.textB2} size={50} />
export const PlusIcon = () => <MaterialCommunityIcons name="cart-plus" color={theme.colors.textB2} size={45} />
export const RemoveIcon = () => <MaterialCommunityIcons name="deleter-forever" color={theme.colors.textB2} size={45} />
export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />
export const CheckIcon = () => <MaterialCommunityIcons name="check" color={theme.colors.textB2} size={40} />

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

@@ -1,3 +1,4 @@
import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native'
import styled, { css } from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -65,7 +66,7 @@ export const ButtonRemoveList = styled(Close)`
margin: 4px 10px 4px 0px;
`
const Edit = () => <MaterialCommunityIcons name="pencil" color={theme.colors.textW5} size={28} />
const Edit = () => <MaterialCommunityIcons name="pencil-outline" color={theme.colors.textW5} size={28} />
export const ButtonEditList = styled(Edit)`
margin: 4px 10px 4px 0px;

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

@@ -24,7 +24,7 @@ const ListedProduct = React.memo((props) => {
</WrapperProduct>
<WrapperButton onPress={() => dispatch(checkToggle(product._id))} >
<CheckButton checked={product.checked}>
{/* <IconCheck checked={product.checked} /> */}
<IconCheck checked={product.checked} />
</CheckButton>
</WrapperButton>
</Wrapper>

10
src/components/GroceryList/products/ProductButtons.js
View File

@@ -24,7 +24,7 @@ const UploadProductsButton = (props) => {
<UploadInput type="file"
onChange={evt => openFile(evt)}
multiple={false} />
{/* <UploadIcon /> */}
<UploadIcon />
</WrapperUpload>
)
}
@@ -41,7 +41,7 @@ const DownloadProductsButton = (props) => {
}
return (
<WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <DownloadIcon /> */}
<DownloadIcon />
</WrapperDownload>
)
}
@@ -56,7 +56,7 @@ const RemoveProductsButton = (props) => {
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
{/* <RemoveIcon /> */}
<RemoveIcon />
</WrapperRemove>
)
}
@@ -68,7 +68,7 @@ export const ContainerButtons = (props) => {
<DownloadProductsButton visible={visible} />
<RemoveProductsButton visible={visible} />
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
{/* <MenuIcon /> */}
<MenuIcon />
</WrapperButtons >
</>
)
@@ -80,7 +80,7 @@ export const AddProductButton = (props) => {
return (
<>
<WrapperAddProduct toggle={visible} onPress={() => setVisible(true)}>
{/* <PlusIcon /> */}
<PlusIcon />
</WrapperAddProduct>
<ModalAddProduct visible={visible} closeModal={closeModal} />
</>

30
src/components/GroceryList/products/ProductsList.js
View File

@@ -8,28 +8,32 @@ import { selectAllSortedProducts } from '../../../redux/slices/groceryList/produ
//styles
import { WrapperList } from './styles/list'
import ModalEditProduct from '../../modals/groceries/ModalEditProduct';
import { ScrollView, View } from 'react-native';
import { View } from 'react-native';
import HeaderPadding from '../../Header';
import { FlatList } from 'react-native-gesture-handler';
const ProductsList = (props) => {
const products = useSelector(selectAllSortedProducts)
const [visible, setVisible] = useState(false);
const productList = products.map((product, index) => {
return (
<ListedProduct key={index} _id={product._id} setVisible={setVisible} />
)
})
return (
<WrapperList>
<ScrollView>
<HeaderPadding />
{productList}
<View style={{ height: 150 }} />
{products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
</ScrollView>
<FlatList
ListHeaderComponent={ <HeaderPadding/> }
ListFooterComponent={<View style={{ height: 100 }} />}
initialNumToRender={10}
maxToRenderPerBatch={10}
data={products}
renderItem={({ item, index }) => {
return <ListedProduct key={index} _id={item._id} setVisible={setVisible} />
}}
keyExtractor={(item, index) => {
return index.toString();
}}
/>
{products.find(product => product.modalVisible) && <ModalEditProduct visible={visible} setVisible={setVisible} />}
</WrapperList>
)
}

1
src/components/GroceryList/products/styles/buttons.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import styled from 'styled-components'
//dependencies
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

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

@@ -1,3 +1,4 @@
import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native'
import styled, { css } from 'styled-components'
//dependencies

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

@@ -1,11 +1,10 @@
import React from 'react'
import { TouchableOpacity, View } from 'react-native'
import styled, { css } from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import theme from '../../../styles/theme';
const iconSize = '2.0px'
const iconSizeSelected = '2.5px'
const WrapperIcon = styled(TouchableOpacity)`
display: flex;
@@ -55,15 +54,9 @@ export const WrapperGroceries = styled(WrapperIcon)`
height: 65px;
`
const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={iconSize} />
const Groceries = () => <MaterialCommunityIcons name="shopping" color={theme.colors.textW0} size={30} />
export const IconGroceries = styled(Groceries)`
font-size: ${iconSize};
${props => props.currenttab === 'Groceries' &&
css`
color: ${props => props.theme.colors.textW0};
font-size: ${iconSizeSelected};`
};
`
//products
export const WrapperProducts = styled(WrapperIcon)`
@@ -72,15 +65,8 @@ export const WrapperProducts = styled(WrapperIcon)`
`
const Products = () => <MaterialCommunityIcons name="apple" color={theme.colors.textW0} size={iconSize} />
const Products = () => <MaterialCommunityIcons name="food-apple" color={theme.colors.textW0} size={30} />
export const IconProducts = styled(Products)`
font-size: 16px;
margin-top:-5px;
${props => props.currenttab === 'Products' &&
css`
color: ${props => props.theme.colors.textW0};
font-size: 16px;`
};
`

1
src/components/Home/GroceryCard.js
View File

@@ -11,6 +11,7 @@ const GroceryCard = (props) => {
return (
<WrapperCard onPress={() => navigation.navigate('Groceries')}>
<TextCard>Groceries</TextCard>
<IconCoffee/>
<View style={{ height: 100, width: '100%' }} />
</WrapperCard>
)

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

@@ -10,7 +10,7 @@ const RecipeCard = () => {
// <Link to="/recipes">
<WrapperCard>
<TextCard>Recipes</TextCard>
{/* <IconRecipe/> */}
<IconRecipe/>
</WrapperCard>
// </Link>
)

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

@@ -4,7 +4,7 @@ import Dropdown, { QtDropdown } from '../../Dropdown'
//styles
import {
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall
StyledModal, ModalHeader, WrapperInput, WrapperDropdown, WrapperButtons, VerticalSeperator, Input, Button, IconWrong, IconCheck, InputSmall, Wrapper
} from '../styles/modal'
import { IconProduct, IconAmount, IconPerson, IconDetails } from './styles/addItem'
import { IconTag, IconDollar } from './styles/addProduct'
@@ -64,55 +64,60 @@ const ModalAddItem = (props) => {
setPrice(product.price)
}
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 product</ModalHeader>
{/* {product && product.image && <Image source={product.image} />} */}
{/* {product && product.image && <Image source={product.image} />} */}
<WrapperInput>
<IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
<Input onFocus={() => setFocusedProduct(true)} onEndEditing={() => setFocusedProduct(false) }
type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
onChangeText={(text) => setProductName(text)}
placeholder="Product name" />
{/* {productName ? <IconCheck /> : <IconWrong />} */}
{productName != "" ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focusedProduct && <WrapperDropdown>
<Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconAmount /> */}
<IconAmount />
<Input style={{ width: '69%' }}
type="number"
value={amount}
onChange={(text) => setAmount(text.target.value)}
onChange={(text) => setAmount(text)}
placeholder="Amount" />
{/* {amount ? <IconCheck /> : <IconWrong />} */}
{amount ? <IconCheck /> : <IconWrong />}
<InputSmall style={{ marginLeft: "1%", width: '10%' }}
onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
type="text"
value={qt}
onChange={(text) => setQt(text.target.value)}
onChange={(text) => setQt(text)}
placeholder="Qt." />
</WrapperInput>
{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
{/*{focusedQt && <WrapperDropdown style={{ marginLeft: "60%"}}>
<QtDropdown text={qt} setElement={setQt} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconPerson /> */}
<IconPerson />
<Input type="text"
value={person}
onChange={(text) => setPerson(text.target.value)}
placeholder="For" />
</WrapperInput>
<WrapperInput>
{/* <IconDetails /> */}
<IconDetails />
<Input type="text"
value={details}
onChange={(text) => setDetails(text.target.value)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
{/* <IconTag /> */}
<IconTag />
<Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
value={tag}
@@ -123,7 +128,7 @@ const ModalAddItem = (props) => {
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconDollar /> */}
<IconDollar />
<Input type="text"
value={price}
onChange={(text) => setPrice(text.target.value)}
@@ -133,7 +138,8 @@ const ModalAddItem = (props) => {
<Button onClick={props.closeModal}>Close</Button>
<VerticalSeperator />
<Button onClick={() => handleSubmit()}>Add Item</Button>
</WrapperButtons>
</WrapperButtons> */}
</Wrapper>
</StyledModal >
)
}

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

@@ -45,35 +45,35 @@ export const ModalAddProduct = (props) => {
<StyledModal show={props.visible} centered={true} onHide={props.closeModal} >
<ModalHeader>Add product</ModalHeader>
<WrapperInput>
{/* <IconProduct /> */}
<IconProduct />
<InputSmall type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{/* {productName ? <IconCheck /> : <IconWrong />} */}
{productName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
{/* <IconTag /> */}
<IconTag />
<InputSmall onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
type="text"
value={tag}
onChange={(text) => setTag(text.target.value)}
placeholder="Tag" />
{/* {tag ? <IconCheck /> : <IconWrong />} */}
{tag ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focused && <WrapperDropdown>
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconDollar /> */}
<IconDollar />
<InputSmall type="number"
value={price}
onChange={(text) => setPrice(text.target.value)}
placeholder="Price" />
</WrapperInput>
<WrapperInput>
{/* <IconLink /> */}
<IconLink />
<InputSmall type="text"
value={image}
onChange={(text) => setImage(text.target.value)}

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

@@ -70,26 +70,26 @@ const ModalEditItem = (props) => {
</WrapperProductInfo>
</WrapperProduct>
<WrapperInput>
{/* <IconProduct /> */}
<IconProduct />
<Input onFocus={() => setFocusedProduct(true)} onBlur={() => { setTimeout(() => { setFocusedProduct(false) }, 100) }}
type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{/* {productName ? <IconCheck /> : <IconWrong />} */}
{productName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focusedProduct && <WrapperDropdown>
<Dropdown array={products.map(product => product.productName)} text={productName} setElement={handleDropdownPress} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconAmount /> */}
<IconAmount />
<Input style={{ width: '67%' }}
type="number"
value={amount}
onChange={(text) => setAmount(text.target.value)}
placeholder="Amount" />
{/* {amount ? <IconCheck /> : <IconWrong />} */}
{amount ? <IconCheck /> : <IconWrong />}
<InputSmall style={{ marginLeft: "1%", width: '10%' }}
onFocus={() => setFocusedQt(true)} onBlur={() => { setTimeout(() => { setFocusedQt(false) }, 100) }}
type="text"
@@ -101,21 +101,21 @@ const ModalEditItem = (props) => {
<QtDropdown text={qt} setElement={setQt} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconPerson /> */}
<IconPerson />
<Input type="text"
value={person}
onChange={(text) => setPerson(text.target.value)}
placeholder="For" />
</WrapperInput>
<WrapperInput>
{/* <IconDetails /> */}
<IconDetails />
<Input type="text"
value={details}
onChange={(text) => setDetails(text.target.value)}
placeholder="Additional details" />
</WrapperInput>
<WrapperInput>
{/* <IconTag /> */}
<IconTag />
<Input type="text"
onFocus={() => setFocusedTag(true)} onBlur={() => { setTimeout(() => { setFocusedTag(false) }, 100) }}
value={tag}
@@ -126,7 +126,7 @@ const ModalEditItem = (props) => {
<Dropdown array={tags.map(t => t.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconDollar /> */}
<IconDollar />
<Input type="text"
value={price}
onChange={(text) => setPrice(text.target.value)}

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

@@ -55,35 +55,35 @@ const ModalEditProduct = (props) => {
</WrapperProductInfo>
</WrapperProduct>
<WrapperInput>
{/* <IconProduct /> */}
<IconProduct />
<Input type="text"
value={productName}
onChange={(text) => setProductName(text.target.value)}
// onKeyDown={(event) => handleKeyDown(event)}
placeholder="Product name" />
{/* {productName ? <IconCheck /> : <IconWrong />} */}
{productName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
<WrapperInput>
{/* <IconTag /> */}
<IconTag />
<Input onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
type="text"
value={tag}
onChange={(text) => setTag(text.target.value)}
placeholder="Tag" />
{/* {tag ? <IconCheck /> : <IconWrong />} */}
{tag ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focused && <WrapperDropdown>
<Dropdown array={tags.map(tag => tag.tagName)} text={tag} setElement={setTag} />
</WrapperDropdown>}
<WrapperInput>
{/* <IconDollar /> */}
<IconDollar />
<Input type="number"
value={price}
onChange={(text) => setPrice(text.target.value)}
placeholder="Price" />
</WrapperInput>
<WrapperInput>
{/* <IconLink /> */}
<IconLink />
<Input type="text"
value={image}
onChange={(text) => setImage(text.target.value)}

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

@@ -1,3 +1,4 @@
import React from 'react';
import styled from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import { Image } from 'react-native'

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

@@ -1,3 +1,4 @@
import React from 'react';
import styled from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

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

@@ -60,7 +60,7 @@ const ModalAddIngredients = (props) => {
<ModalHeader>Add to grocerylist</ModalHeader>
<ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
<WrapperInput>
{/* <IconList /> */}
<IconList />
<Input
style={{ fontSize: 20 }}
type="text"
@@ -68,14 +68,14 @@ const ModalAddIngredients = (props) => {
onChange={(text) => setListName(text.target.value)}
onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
placeholder="Grocery list" />
{/* {listName ? <IconCheck /> : <IconWrong />} */}
{listName ? <IconCheck /> : <IconWrong />}
</WrapperInput>
{focused && <WrapperDropdown>
<Dropdown array={lists.map(list => list.listName)} text={listName} setElement={setListName} />
</WrapperDropdown>
}
<WrapperInput>
{/* <IconMeal /> */}
<IconMeal />
<Input
style={{ fontSize: 20, width: 100 }}
type="number"

25
src/components/modals/styles/modal.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { Text, View, TextInput } from 'react-native'
import styled from 'styled-components'
import Modal from 'react-native-modal';
@@ -5,10 +6,13 @@ import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityI
import theme from '../../../styles/theme';
export const StyledModal = styled(Modal)`
.modal-content{
background-color: ${({ theme }) => theme.colors.dp01};
border-radius: 15px;
}
margin: 0px;
padding: 5px;
`
export const Wrapper = styled(View)`
border-radius: 10px;
padding: 5px;
background-color: ${props => props.theme.colors.dp01};
`
export const WrapperInput = styled(View)`
padding-left: 5px;
@@ -40,7 +44,7 @@ export const VerticalSeperator = styled(View)`
export const InputSmall = styled(TextInput)`
border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px;
font-size: ${({ theme }) => theme.fontSize.fontS};
font-size: ${({ theme }) => theme.fontSizes.fontS}px;
width: 50%;
@@ -50,7 +54,8 @@ export const InputSmall = styled(TextInput)`
export const Input = styled(TextInput)`
border-bottom-color: ${props => props.theme.colors.primary + 'aa'};
border-bottom-width: 1px;
font-size: ${({ theme }) => theme.fontSize.fontS};
font-size: ${({ theme }) => theme.fontSizes.fontS}px;
color: ${props => props.theme.colors.textW2};
width: 80%;
@@ -61,12 +66,12 @@ export const Input = styled(TextInput)`
export const Button = styled(Text)`
color: ${props => props.theme.colors.primary};
font-weight: bold;
font-size: ${({ theme }) => theme.fontSize.fontS};
font-size: ${({ theme }) => theme.fontSizes.fontS}px;
margin-bottom: 10px;
`
export const ModalHeader = styled(Text)`
font-size: ${({ theme }) => theme.fontSize.fontM};
font-size: ${({ theme }) => theme.fontSizes.fontM}px;
margin: 5px;
color: ${({ theme }) => theme.colors.textW1};
`
@@ -77,14 +82,14 @@ export const ModalDescription = styled(Text)`
padding: 2px;
`
const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSize.fontS} />
const Wrong = () => <MaterialCommunityIcons name="asterisk" color={theme.colors.error + 'aa'} size={theme.fontSizes.fontS} />
export const IconWrong = styled(Wrong)`
margin-left: -10px;
margin-top: -10px;
`
const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSize.fontM}/>
const Check = () => <MaterialCommunityIcons name="check" color={theme.colors.primary} size={theme.fontSizes.fontM}/>
export const IconCheck = styled(Check)`
margin-left: -15px;

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

@@ -14,7 +14,7 @@ export const AddRecipeButton = () => {
return (
// < Link to="/recipes/addRecipe">
<WrapperAddRecipe>
{/* <IconPlus /> */}
<IconPlus />
</WrapperAddRecipe>
// </Link>
)
@@ -24,7 +24,7 @@ export const AddIngredientsButton = (props) => {
const [visible, setVisible] = useState(false)
return (<>
<WrapperAddItem style={{ bottom: 10 }} onClick={()=>setVisible(true)}>
{/* <PlusIcon /> */}
<PlusIcon />
</WrapperAddItem>
<ModalAddIngredients id={props.id} visible={visible} closeModal={() => setVisible(false)} />
</>
@@ -41,10 +41,10 @@ export const OptionsButtonRecipe = (props) => {
}
return (
<WrapperOptions toggled={toggled} >
{/* <IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} /> */}
<IconOptions toggled={toggled} onClick={() => setToggled(!toggled)} />
<WrapperOptionButtons toggled={toggled}>
{/* <IconRemove onClick={() => handleRemove()} /> */}
{/* <IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} /> */}
<IconRemove onClick={() => handleRemove()} />
<IconEdit onClick={() => history.push("/recipes/addRecipe/" + props.id)} />
</WrapperOptionButtons>
</WrapperOptions>
)

1
src/components/recipes/addRecipe/styles/buttons.js
View File

@@ -1,3 +1,4 @@
import React from 'react';
import { View } from "react-native"
import styled, {css} from 'styled-components'
import { Button } from '../../../../styles/componentBlueprints'

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

@@ -70,7 +70,7 @@ const AddRecipe = () => {
{image && <StyledImage source={image} alt="Recipe" />}
<WrapperRecipe>
<View id="row">
{/* <IconRecipe /> */}
<IconRecipe />
<Input
type="text"
value={name}
@@ -78,13 +78,13 @@ const AddRecipe = () => {
placeholder="Recipe name" />
</View>
<View id="row">
{/* <IconPot /> */}
<IconPot />
<Input
type="number"
value={prepTime}
onChange={(text) => setPrepTime(text.target.value)}
placeholder="Prep time (min)" />
{/* <IconMeal /> */}
<IconMeal />
<Input
type="number"
value={servings}
@@ -92,7 +92,7 @@ const AddRecipe = () => {
placeholder="Servings" />
</View>
<View id="row">
{/* <IconImage /> */}
<IconImage />
<Input
style={{ borderBottom: 'none' }}
type="file" accept="image/*"

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

@@ -3,8 +3,6 @@ import { useParams } from "react-router"
//redux
import { findRecipeById } from "../../redux/slices/recipesSlice"
import Header from "../../components/Header"
import { ArrowBack } from "../styles/page"
import { Wrapper, WrapperRecipe } from "./styles/addRecipe"
import { Ingredient } from "../../components/recipes/addRecipe/Ingredient"
import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr } from "./styles/recipe"
@@ -37,7 +35,7 @@ const Recipe = () => {
<Hr />
{recipe.prepTime !== 0 && recipe.prepTime && <>
<View id="row" style={{ position: 'relative', marginTop: 0 }} >
{/* <IconPotLarge /> */}
<IconPotLarge />
<TextPrep>READY IN:</TextPrep>
<View id="column" >
<TextTime>{recipe.prepTime}</TextTime>
@@ -45,7 +43,7 @@ const Recipe = () => {
</View>
{recipe.servings !== 0 && recipe.servings && <>
<WrapperServings>
{/* <IconMeal /> */}
<IconMeal />
<View>
<TextTime>{recipe.servings}</TextTime>
<TextServings>servings</TextServings>

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

@@ -1,3 +1,4 @@
import React from 'react';
import { Image, Text, TextInput, View } from "react-native"
import styled from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

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

@@ -1,3 +1,4 @@
import React from 'react';
import { Image, Text, View } from "react-native"
import styled from 'styled-components'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

8
src/styles/theme.js
View File

@@ -91,10 +91,10 @@ const theme = {
textB5: LightenDarken(textB0, -18),
},
fontSizes: {
fontS: '16px',
fontM: '24px',
fontL: '32px',
fontXL: '64px',
fontS: 16,
fontM: 24,
fontL: 32,
fontXL: 64,
},
mediaQueries: {
"below768": "only screen and (max-width: 768px)",