Resolve "Implement and Split edit Category from add Category"
This commit is contained in:
parent
bf939fb807
commit
d3b7c61c67
8 changed files with 146 additions and 21 deletions
|
|
@ -1,21 +1,23 @@
|
|||
import { router, useLocalSearchParams } from "expo-router";
|
||||
import { useState } from "react";
|
||||
import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
|
||||
import { CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
|
||||
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
|
||||
import { addCategory } from "../../../services/database";
|
||||
import { useTheme } from "../../contexts/ThemeContext";
|
||||
|
||||
const addCategory = () => {
|
||||
export default function Page() {
|
||||
const {colors} = useTheme();
|
||||
|
||||
const parameters = useLocalSearchParams();
|
||||
|
||||
const [categoryName, setCategoryName] = useState<string>("Enter Category Name...");
|
||||
const [categoryColor, setCategoryColor] = useState<null|string>(null);
|
||||
const [categoryColor, setCategoryColor] = useState<string>('#' + Math.floor(Math.random()*16777215).toString(16));
|
||||
const [selectedType, setSelectedType] = useState<string>("expense");
|
||||
const [amount, setAmount] = useState(0);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
|
||||
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Category Editor</Text>
|
||||
<Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Add Category</Text>
|
||||
|
||||
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
|
||||
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
|
||||
|
|
@ -24,6 +26,12 @@ const addCategory = () => {
|
|||
}}/>
|
||||
</View>
|
||||
|
||||
<View style={styles.budgetInput}>
|
||||
<AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
|
||||
setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
|
||||
}}/>
|
||||
</View>
|
||||
|
||||
<TypeSelectorSwitch
|
||||
currentSelected={selectedType}
|
||||
handleButtonPress={(type) => {
|
||||
|
|
@ -32,7 +40,7 @@ const addCategory = () => {
|
|||
/>
|
||||
|
||||
<View>
|
||||
<CustomColorPicker currentColor={categoryColor} handleColorChange={(color) => {
|
||||
<CustomColorPicker color={categoryColor} handleColorChange={(color) => {
|
||||
setCategoryColor(color);
|
||||
}}/>
|
||||
</View>
|
||||
|
|
@ -42,7 +50,7 @@ const addCategory = () => {
|
|||
router.back();
|
||||
}}/>
|
||||
<NavigationButton text="Save" onPress={() => {
|
||||
console.log("Implement Saving here!");
|
||||
addCategory(categoryName, categoryColor, selectedType, amount);
|
||||
router.back();
|
||||
}}/>
|
||||
</View>
|
||||
|
|
@ -51,8 +59,6 @@ const addCategory = () => {
|
|||
);
|
||||
}
|
||||
|
||||
export default addCategory;
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
containerStyle: {
|
||||
flex: 1,
|
||||
|
|
@ -82,5 +88,9 @@ const styles = StyleSheet.create({
|
|||
textInputStyle: {
|
||||
paddingHorizontal: 10,
|
||||
fontSize: 25,
|
||||
},
|
||||
budgetInput: {
|
||||
marginBottom: 10,
|
||||
marginHorizontal: 10,
|
||||
}
|
||||
});
|
||||
Reference in a new issue