mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
- Added loading indicators when on groceries and todos, fixed margin issues in the todo page
This commit is contained in:
Dejan
@ -1,17 +1,17 @@
|
||||
import {FlatList, StyleSheet} from "react-native";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
|
||||
import { ActivityIndicator, Dimensions, FlatList, StyleSheet } from "react-native";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
|
||||
import GroceryItem from "./GroceryItem";
|
||||
import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
|
||||
import { GroceryCategory, GroceryFrequency, useGroceryContext } from "@/contexts/GroceryContext";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import {AntDesign} from "@expo/vector-icons";
|
||||
import { AntDesign } from "@expo/vector-icons";
|
||||
import EditGroceryItem from "./EditGroceryItem";
|
||||
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
|
||||
import {IGrocery} from "@/hooks/firebase/types/groceryData";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
import { IGrocery } from "@/hooks/firebase/types/groceryData";
|
||||
import Ionicons from '@expo/vector-icons/Ionicons';
|
||||
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
|
||||
import {REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
|
||||
import {ToDosContextProvider} from "@/contexts/ToDosContext";
|
||||
import { REPEAT_TYPE } from "@/hooks/firebase/types/todoData";
|
||||
import { ToDosContextProvider } from "@/contexts/ToDosContext";
|
||||
|
||||
const shoppingTodo = {
|
||||
id: "",
|
||||
@ -32,7 +32,8 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
|
||||
setIsAddingGrocery,
|
||||
addGrocery,
|
||||
} = useGroceryContext();
|
||||
const {profileData} = useAuthContext();
|
||||
|
||||
const { profileData } = useAuthContext();
|
||||
const [approvedGroceries, setApprovedGroceries] = useState<IGrocery[]>(
|
||||
groceries?.filter((item) => item.approved)
|
||||
);
|
||||
@ -105,205 +106,212 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<View marginH-20 marginB-45>
|
||||
<HeaderTemplate
|
||||
message={"Welcome to your grocery list"}
|
||||
isWelcome={false}
|
||||
isGroceries={true}
|
||||
>
|
||||
<View row centerV>
|
||||
<View
|
||||
paddingH-15
|
||||
paddingV-8
|
||||
centerV
|
||||
style={{borderRadius: 50}}
|
||||
>
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
{approvedGroceries?.length} list{" "}
|
||||
{approvedGroceries?.length === 1 ? (
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
item
|
||||
</Text>
|
||||
) : (
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
items
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
padding-8
|
||||
paddingH-12
|
||||
marginR-15
|
||||
style={{borderRadius: 50}}
|
||||
>
|
||||
<Text text70 style={styles.counterText} color="#e28800">
|
||||
{pendingGroceries?.length} pending
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setChoreDialogVisible(true)}>
|
||||
<Ionicons name="person-add-outline" size={24} color="grey" />
|
||||
</TouchableOpacity>
|
||||
<ToDosContextProvider>
|
||||
{choreDialogVisible &&
|
||||
<AddChoreDialog
|
||||
isVisible={choreDialogVisible}
|
||||
setIsVisible={setChoreDialogVisible}
|
||||
selectedTodo={shoppingTodo}
|
||||
isShoppingTodo
|
||||
/>
|
||||
}
|
||||
</ToDosContextProvider>
|
||||
<>
|
||||
{!groceries &&
|
||||
<View style={styles.loaderContainer}>
|
||||
<ActivityIndicator size="large" color="grey" />
|
||||
</View>
|
||||
</HeaderTemplate>
|
||||
|
||||
{/* Pending Approval Section */}
|
||||
<View row spread marginT-40 marginB-10 centerV>
|
||||
<View row centerV>
|
||||
<TouchableOpacity row centerV onPress={() => {setPendingVisible(!pendingVisible)}}>
|
||||
<Text style={styles.subHeader}>Pending Approval</Text>
|
||||
{pendingVisible && (
|
||||
<AntDesign
|
||||
name="down"
|
||||
size={17}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
{!pendingVisible && (
|
||||
<AntDesign
|
||||
name="right"
|
||||
size={15}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
centerV
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 35,
|
||||
backgroundColor: "#faead2",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
}
|
||||
<View marginH-20 marginB-45>
|
||||
<HeaderTemplate
|
||||
message={"Welcome to your grocery list"}
|
||||
isWelcome={false}
|
||||
isGroceries={true}
|
||||
>
|
||||
<Text style={styles.counterNr} center color="#e28800">
|
||||
{pendingGroceries?.length.toString()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{pendingGroceries?.length > 0
|
||||
? pendingVisible && (
|
||||
<FlatList
|
||||
data={pendingGroceries}
|
||||
renderItem={({item}) => (
|
||||
<GroceryItem
|
||||
item={item}
|
||||
handleItemApproved={(id, changes) =>
|
||||
updateGroceryItem({...changes, id: id})
|
||||
<View row centerV>
|
||||
<View
|
||||
paddingH-15
|
||||
paddingV-8
|
||||
centerV
|
||||
style={{borderRadius: 50}}
|
||||
>
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
{approvedGroceries?.length} list{" "}
|
||||
{approvedGroceries?.length === 1 ? (
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
item
|
||||
</Text>
|
||||
) : (
|
||||
<Text text70BL color="#46a80a" style={styles.counterText}>
|
||||
items
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
</View>
|
||||
<View
|
||||
padding-8
|
||||
paddingH-12
|
||||
marginR-15
|
||||
style={{borderRadius: 50}}
|
||||
>
|
||||
<Text text70 style={styles.counterText} color="#e28800">
|
||||
{pendingGroceries?.length} pending
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity onPress={() => setChoreDialogVisible(true)}>
|
||||
<Ionicons name="person-add-outline" size={24} color="grey" />
|
||||
</TouchableOpacity>
|
||||
<ToDosContextProvider>
|
||||
{choreDialogVisible &&
|
||||
<AddChoreDialog
|
||||
isVisible={choreDialogVisible}
|
||||
setIsVisible={setChoreDialogVisible}
|
||||
selectedTodo={shoppingTodo}
|
||||
isShoppingTodo
|
||||
/>
|
||||
}
|
||||
onInputFocus={onInputFocus}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
/>
|
||||
)
|
||||
: pendingVisible && (
|
||||
<Text style={styles.noItemTxt}>No items pending approval.</Text>
|
||||
)}
|
||||
</ToDosContextProvider>
|
||||
</View>
|
||||
</HeaderTemplate>
|
||||
|
||||
{/* Approved Section */}
|
||||
<View row spread marginT-40 marginB-0 centerV>
|
||||
<View row centerV>
|
||||
<TouchableOpacity row centerV onPress={() => {setApprovedVisible(!approvedVisible)}}>
|
||||
<Text style={styles.subHeader}>Shopping List</Text>
|
||||
{approvedVisible && (
|
||||
<AntDesign
|
||||
{/* Pending Approval Section */}
|
||||
<View row spread marginT-40 marginB-10 centerV>
|
||||
<View row centerV>
|
||||
<TouchableOpacity row centerV onPress={() => {setPendingVisible(!pendingVisible)}}>
|
||||
<Text style={styles.subHeader}>Pending Approval</Text>
|
||||
{pendingVisible && (
|
||||
<AntDesign
|
||||
name="down"
|
||||
size={17}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
{!approvedVisible && (
|
||||
<AntDesign
|
||||
name="right"
|
||||
size={15}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
centerV
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 35,
|
||||
backgroundColor: "#e2eed8",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.counterNr} center color="#46a80a">
|
||||
{approvedGroceries?.length.toString()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{marginTop: 8}}>
|
||||
<EditGroceryItem
|
||||
editGrocery={{
|
||||
title: title,
|
||||
setCategory: setCategory,
|
||||
category: category,
|
||||
setTitle: setTitle,
|
||||
setSubmit: setSubmitted,
|
||||
closeEdit: handleCancelAddGrocery
|
||||
}}
|
||||
onInputFocus={onInputFocus}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Render Approved Groceries Grouped by Category */}
|
||||
{approvedGroceries?.length > 0
|
||||
? approvedVisible && (
|
||||
<FlatList
|
||||
data={Object.keys(approvedGroceriesByCategory).sort((a, b) => {
|
||||
if (a !== "Done") return -1;
|
||||
if (b === "Done") return 1;
|
||||
return 0;
|
||||
})}
|
||||
renderItem={({item: category}) => (
|
||||
<View key={category}>
|
||||
{/* Render Category Header */}
|
||||
<Text text80M style={{marginTop: 10}} color="#666">
|
||||
{category}
|
||||
</Text>
|
||||
{/* Render Grocery Items for this Category */}
|
||||
{approvedGroceriesByCategory[category].map(
|
||||
(grocery: IGrocery) => (
|
||||
<GroceryItem
|
||||
key={grocery.id}
|
||||
item={grocery}
|
||||
handleItemApproved={(id, changes) =>
|
||||
updateGroceryItem({...changes, id: id})
|
||||
}
|
||||
onInputFocus={onInputFocus}
|
||||
approvedGroceries={approvedGroceries}
|
||||
setApprovedGroceries={setApprovedGroceries}
|
||||
/>
|
||||
)
|
||||
/>
|
||||
)}
|
||||
{!pendingVisible && (
|
||||
<AntDesign
|
||||
name="right"
|
||||
size={15}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
keyExtractor={(category) => category}
|
||||
/>
|
||||
)
|
||||
: approvedVisible && (
|
||||
<Text style={styles.noItemTxt}>No approved items.</Text>
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
centerV
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 35,
|
||||
backgroundColor: "#faead2",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.counterNr} center color="#e28800">
|
||||
{pendingGroceries?.length.toString()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
{pendingGroceries?.length > 0
|
||||
? pendingVisible && (
|
||||
<FlatList
|
||||
data={pendingGroceries}
|
||||
renderItem={({item}) => (
|
||||
<GroceryItem
|
||||
item={item}
|
||||
handleItemApproved={(id, changes) =>
|
||||
updateGroceryItem({...changes, id: id})
|
||||
}
|
||||
onInputFocus={onInputFocus}
|
||||
/>
|
||||
)}
|
||||
keyExtractor={(item) => item.id.toString()}
|
||||
/>
|
||||
)
|
||||
: pendingVisible && (
|
||||
<Text style={styles.noItemTxt}>No items pending approval.</Text>
|
||||
)}
|
||||
|
||||
{/* Approved Section */}
|
||||
<View row spread marginT-40 marginB-0 centerV>
|
||||
<View row centerV>
|
||||
<TouchableOpacity row centerV onPress={() => {setApprovedVisible(!approvedVisible)}}>
|
||||
<Text style={styles.subHeader}>Shopping List</Text>
|
||||
{approvedVisible && (
|
||||
<AntDesign
|
||||
name="down"
|
||||
size={17}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
{!approvedVisible && (
|
||||
<AntDesign
|
||||
name="right"
|
||||
size={15}
|
||||
style={styles.dropIcon}
|
||||
color="#9f9f9f"
|
||||
/>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
<View
|
||||
centerV
|
||||
style={{
|
||||
aspectRatio: 1,
|
||||
width: 35,
|
||||
backgroundColor: "#e2eed8",
|
||||
borderRadius: 50,
|
||||
}}
|
||||
>
|
||||
<Text style={styles.counterNr} center color="#46a80a">
|
||||
{approvedGroceries?.length.toString()}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={{marginTop: 8}}>
|
||||
<EditGroceryItem
|
||||
editGrocery={{
|
||||
title: title,
|
||||
setCategory: setCategory,
|
||||
category: category,
|
||||
setTitle: setTitle,
|
||||
setSubmit: setSubmitted,
|
||||
closeEdit: handleCancelAddGrocery
|
||||
}}
|
||||
onInputFocus={onInputFocus}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{/* Render Approved Groceries Grouped by Category */}
|
||||
{approvedGroceries?.length > 0
|
||||
? approvedVisible && (
|
||||
<FlatList
|
||||
data={Object.keys(approvedGroceriesByCategory).sort((a, b) => {
|
||||
if (a !== "Done") return -1;
|
||||
if (b === "Done") return 1;
|
||||
return 0;
|
||||
})}
|
||||
renderItem={({item: category}) => (
|
||||
<View key={category}>
|
||||
{/* Render Category Header */}
|
||||
<Text text80M style={{marginTop: 10}} color="#666">
|
||||
{category}
|
||||
</Text>
|
||||
{/* Render Grocery Items for this Category */}
|
||||
{approvedGroceriesByCategory[category].map(
|
||||
(grocery: IGrocery) => (
|
||||
<GroceryItem
|
||||
key={grocery.id}
|
||||
item={grocery}
|
||||
handleItemApproved={(id, changes) =>
|
||||
updateGroceryItem({...changes, id: id})
|
||||
}
|
||||
onInputFocus={onInputFocus}
|
||||
approvedGroceries={approvedGroceries}
|
||||
setApprovedGroceries={setApprovedGroceries}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
keyExtractor={(category) => category}
|
||||
/>
|
||||
)
|
||||
: approvedVisible && (
|
||||
<Text style={styles.noItemTxt}>No approved items.</Text>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -326,7 +334,16 @@ const styles = StyleSheet.create({
|
||||
counterNr: {
|
||||
fontFamily: "PlusJakartaSans_600SemiBold",
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
loaderContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: Dimensions.get("window").height,
|
||||
width: Dimensions.get("window").width,
|
||||
backgroundColor: 'rgba(218,217,217,0.6)',
|
||||
zIndex: 999,
|
||||
},
|
||||
});
|
||||
|
||||
export default GroceryList;
|
||||
|
||||
@ -223,6 +223,7 @@ const ToDoItem = (props: {
|
||||
{selectedMembers?.map((member) => {
|
||||
return member?.pfp ? (
|
||||
<ImageBackground
|
||||
key={member?.uid}
|
||||
source={{ uri: member.pfp }}
|
||||
style={{
|
||||
height: 24.64,
|
||||
|
||||
@ -8,7 +8,7 @@ import {IToDo} from "@/hooks/firebase/types/todoData";
|
||||
import DropdownIcon from "@/assets/svgs/DropdownIcon";
|
||||
import {Dropdown} from "react-native-element-dropdown";
|
||||
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
|
||||
import {StyleSheet} from "react-native";
|
||||
import {ActivityIndicator, Dimensions, StyleSheet} from "react-native";
|
||||
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
|
||||
|
||||
const FILTER_OPTIONS = {
|
||||
@ -296,8 +296,14 @@ const ToDosList = ({ isSettings, members }: { isSettings?: boolean, members?: Ar
|
||||
);
|
||||
};
|
||||
|
||||
const containerHeight = Dimensions.get('screen').height;
|
||||
return (
|
||||
<View marginB-402>
|
||||
<View style={{ marginBottom: 110 }} >
|
||||
{!toDos &&
|
||||
<View style={styles.loaderContainer}>
|
||||
<ActivityIndicator size="large" color="blue" />
|
||||
</View>
|
||||
}
|
||||
<Dropdown
|
||||
style={{ marginBottom: 15 }}
|
||||
data={filterOptions}
|
||||
@ -379,6 +385,12 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
dropdownStyle: { borderRadius: 6.61, minHeight: 10, maxHeight: "100%", width: 187 },
|
||||
itemStyle: { padding: 0, margin: 0 },
|
||||
loaderContainer: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
zIndex: 999,
|
||||
},
|
||||
});
|
||||
|
||||
export default ToDosList;
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import { Button, Text, View } from "react-native-ui-lib";
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import HeaderTemplate from "@/components/shared/HeaderTemplate";
|
||||
import AddChore from "./AddChore";
|
||||
import ProgressCard from "./ProgressCard";
|
||||
import ToDosList from "./ToDosList";
|
||||
import { Dimensions, ScrollView, StyleSheet } from "react-native";
|
||||
import { Dimensions, ScrollView, StyleSheet} from "react-native";
|
||||
import { TouchableOpacity } from "react-native-gesture-handler";
|
||||
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
|
||||
import FamilyChoresProgress from "./family-chores/FamilyChoresProgress";
|
||||
import UserChoresProgress from "./user-chores/UserChoresProgress";
|
||||
import { useAtom } from "jotai";
|
||||
import { toDosPageIndex } from "../calendar/atoms";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
|
||||
const ToDosPage = () => {
|
||||
const { profileData } = useAuthContext();
|
||||
@ -19,7 +19,7 @@ const ToDosPage = () => {
|
||||
|
||||
const { data: members } = useGetFamilyMembers();
|
||||
|
||||
const { width, height } = Dimensions.get("screen");
|
||||
const { width } = Dimensions.get("screen");
|
||||
const pageLink = (
|
||||
<TouchableOpacity onPress={() => setPageIndex(1)}>
|
||||
<Text color="#ea156d" style={{ fontSize: 14 }}>
|
||||
@ -35,7 +35,6 @@ const ToDosPage = () => {
|
||||
>
|
||||
<View
|
||||
paddingH-25
|
||||
height={"100%"}
|
||||
width={width}
|
||||
>
|
||||
{pageIndex == 0 && (
|
||||
|
||||
Reference in New Issue
Block a user