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

buttons work, all modal ready

Browse Source
This commit is contained in:
wolfmoyaers@gmail.com
2021-11-01 16:09:24 +01:00
parent dcde2c35fb
commit 42be0512bf
13 changed files with 6070 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,6 +8,7 @@ import { WrapperButtons, WrapperAddItem, WrapperAddList, WrapperRemove, WrapperS
import { useSelector, useDispatch } from 'react-redux'
import { itemsRemoved, checkAll } from '../../../redux/slices/groceryList/itemsSlice'
import { selectOpenListId } from '../../../redux/slices/groceryList/listsSlice'
import { Alert } from 'react-native'
const SelectAllItemsButton = (props) => {
const dispatch = useDispatch()
@@ -27,10 +28,20 @@ const RemoveItemsButton = (props) => {
const dispatch = useDispatch()
const [toggleAnim, setToggleAnim] = useState(false)
const handlePress = () => {
if (window.confirm("Do you really want to remove the selected items?")) {
dispatch(itemsRemoved())
setToggleAnim(!toggleAnim)
}
Alert.alert(
"Warning",
"Are you sure you want to remove the selected items?",
[
{ text: "Cancel", },
{
text: "Remove", onPress: () => {
dispatch(itemsRemoved())
setToggleAnim(!toggleAnim)
}
}
],
{ cancelable: true, }
)
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>

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

@@ -9,7 +9,7 @@ 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 { FlatList, View } from 'react-native';
import { Alert, FlatList, View } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
export default React.memo((props) => {
@@ -29,10 +29,20 @@ export default React.memo((props) => {
const [modalListVisible, setModalListVisible] = useState(false);
const removeList = () => {
if (window.confirm("Do you really want to remove this list and the groceries within")) {
dispatch(itemsRemovedByList(props.listId))
dispatch(listRemoved(props.listId))
}
Alert.alert(
"Warning",
"Are you sure you want to remove this list and the groceries within?",
[
{ text: "Cancel", },
{
text: "Remove", onPress: () => {
dispatch(itemsRemovedByList(props.listId))
dispatch(listRemoved(props.listId))
}
}
],
{ cancelable: true, }
)
}
return (
<Wrapper >

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

@@ -6,7 +6,8 @@ import { WrapperButtons, WrapperAddProduct, WrapperUpload, UploadInput, WrapperD
//redux
import { useDispatch, useSelector } from 'react-redux'
import { productsRemoved, productsUploaded } from '../../../redux/slices/groceryList/productsSlice'
// var FileSaver = require('file-saver');
import { Alert } from 'react-native'
const UploadProductsButton = (props) => {
const dispatch = useDispatch()
@@ -32,12 +33,21 @@ const DownloadProductsButton = (props) => {
const products = useSelector(state => state.products.entities)
const [toggleAnim, setToggleAnim] = useState(false)
const handlePress = () => {
if (window.confirm("Do you want to download all of your products?")) {
setToggleAnim(!toggleAnim)
let productsJSON = JSON.stringify({ products: products }, null, 4)
let blob = new Blob([productsJSON], { type: "application/json" });
// FileSaver.saveAs(blob, "productList" + Date.now() + ".json");
}
Alert.alert(
"Alert",
"Do you want to download a JSON file with all of the products?",
[
{ text: "Cancel", },
{
text: "Download", onPress: async () => {
setToggleAnim(!toggleAnim)
let productsJSON = JSON.stringify({ products: products }, null, 4)
let blob = new Blob([productsJSON], { type: "application/json" });
}
}
],
{ cancelable: true, }
)
}
return (
<WrapperDownload toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
@@ -49,10 +59,20 @@ const RemoveProductsButton = (props) => {
const dispatch = useDispatch()
const [toggleAnim, setToggleAnim] = useState(false)
const handlePress = () => {
if (window.confirm("Do you really want to remove the selected products?")) {
dispatch(productsRemoved());
setToggleAnim(!toggleAnim)
}
Alert.alert(
"Warning",
"Are you sure you want to remove the selected products?",
[
{ text: "Cancel", },
{
text: "Remove", onPress: () => {
dispatch(productsRemoved());
setToggleAnim(!toggleAnim)
}
}
],
{ cancelable: true, }
)
}
return (
<WrapperRemove toggle={toggleAnim} visible={props.visible} onPress={handlePress}>
@@ -64,8 +84,8 @@ export const ContainerButtons = (props) => {
const [visible, setVisible] = useState(false);
return (
<>
<UploadProductsButton visible={visible} />
<DownloadProductsButton visible={visible} />
{/* <UploadProductsButton visible={visible} />
<DownloadProductsButton visible={visible} /> */}
<RemoveProductsButton visible={visible} />
<WrapperButtons toggle={visible} onPress={() => setVisible(!visible)}>
<MenuIcon />

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

@@ -53,8 +53,8 @@ export const MenuIcon = () => <MaterialCommunityIcons name="menu" color={theme.c
export const PlusIcon = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />
export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textB2} size={40} />
export const UploadIcon = () => <MaterialCommunityIcons name="cloud-upload-outline" color={theme.colors.textW2} size={40} />
export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textB2} size={40} />
export const DownloadIcon = () => <MaterialCommunityIcons name="cloud-download-outline" color={theme.colors.textW2} size={40} />
export const RemoveIcon = () => <MaterialCommunityIcons name="delete-forever" color={theme.colors.textB2} size={45} />

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

@@ -22,7 +22,7 @@ export const WrapperProduct = styled(TouchableOpacity)`
min-height: 70px;
position: relative;
flex-direction: row;
justify-content: center;
justify-content: flex-start;
border-radius: 15px;
margin-bottom:7px;
margin-left: 7px;
@@ -36,10 +36,7 @@ export const WrapperButton = styled(TouchableOpacity)`
export const WrapperText = styled(View)`
flex:1;
max-width:600px;
@media ${({ theme }) => theme.mediaQueries.below768}{
max-width: 60vw;
}
max-width:65%;
`
export const TextProductName = styled(Text)`
/* word-wrap: break-word; */

2
src/components/Home/styles/groceryCard.js
View File

@@ -37,7 +37,7 @@ export const IconCoffee = styled(Coffee)`
margin-top: 15px;
`
const Meal = () => <MaterialCommunityIcons name="food-turkey" color={theme.colors.primaryVar} size={50} />
const Meal = () => <MaterialCommunityIcons name="noodles" color={theme.colors.primaryVar} size={50} />
export const IconRecipe = styled(Meal)`
margin-top: 15px;

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

@@ -20,7 +20,7 @@ const ModalEditItem = (props) => {
const tags = useSelector(state => state.tags.entities)
const [productName, setProductName] = useState(item.productName);
const [amount, setAmount] = useState(item.amount.am);
const [amount, setAmount] = useState(item.amount.am.toString());
const [qt, setQt] = useState(item.amount.qt)
const [person, setPerson] = useState(item.person);
const [details, setDetails] = useState(item.details);

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

@@ -22,7 +22,7 @@ const ModalEditProduct = (props) => {
const [productName, setProductName] = useState(product.productName);
const [tag, setTag] = useState(product.tag);
const [price, setPrice] = useState(product.price);
const [price, setPrice] = useState(product.price.toString());
const [image, setImage] = useState(product.image);
const [focused, setFocused] = React.useState(false)

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

@@ -9,6 +9,7 @@ import { removeRecipe } from "../../../redux/slices/recipesSlice"
import { PlusIcon, WrapperAddItem } from "../../GroceryList/groceries/styles/buttons"
import ModalAddIngredients from "../../modals/recipes/ModalAddIngredients"
import { Alert } from "react-native"
export const AddRecipeButton = () => {
return (
@@ -35,9 +36,19 @@ export const OptionsButtonRecipe = (props) => {
const dispatch = useDispatch()
const [toggled, setToggled] = useState(false)
const handleRemove = () => {
if (window.confirm("Do you really want to remove this recipe?")) {
dispatch(removeRecipe(props.id))
}
Alert.alert(
"Warning",
"Are you sure you want to remove this recipe?",
[
{ text: "Cancel", },
{
text: "Remove", onPress: () => {
dispatch(removeRecipe(props.id))
}
}
],
{ cancelable: true, }
)
}
return (
<WrapperOptions toggled={toggled} >

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

@@ -9,12 +9,8 @@ import theme from "../../../../styles/theme";
export const WrapperAddRecipe = styled(Button)`
position:absolute;
background-color: ${({ theme }) => theme.colors.primary};
bottom:20px;
right:20px;
@media ${({ theme }) => theme.mediaQueries.below768}{
bottom:30px;
right:10px;
}
bottom:30px;
right:10px;
`
export const IconPlus = () => <MaterialCommunityIcons name="plus" color={theme.colors.textB2} size={60} />

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

@@ -7,17 +7,14 @@ import theme from "../../../styles/theme";
export const Wrapper = styled(View)`
display: flex;
flex-direction: column;
align-items: center;
@media ${({ theme }) => theme.mediaQueries.below768}{
align-items: flex-start;
}
align-items: flex-start;
`
export const WrapperRecipe = styled(View)`
display: flex;
flex-direction: column;
align-items: flex-start;
width: 500px;
width: 100%;
padding: 10px;
#row{
margin-top: 5px;
@@ -34,9 +31,6 @@ export const WrapperRecipe = styled(View)`
width: 100%;
justify-content: flex-end;
}
@media ${({ theme }) => theme.mediaQueries.below768}{
width: 100%;
}
`
export const Input = styled(TextInput)`
flex:1;

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

@@ -38,9 +38,6 @@ export const StyledImage = styled(Image)`
margin-top: -70px;
height: 200px;
width: 100%;
@media ${({theme}) => theme.mediaQueries.above768}{
width: 500px;
}
`
export const TextPrep = styled(Text)`
text-align: right;

5982
yarn-error.log Normal file
View File

File diff suppressed because it is too large Load Diff