diff --git a/.gitignore b/.gitignore index ec8a36a..6623142 100644 --- a/.gitignore +++ b/.gitignore @@ -12,3 +12,9 @@ web-build/ # macOS .DS_Store + +# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb +# The following patterns were generated by expo-cli + +expo-env.d.ts +# @end expo-cli \ No newline at end of file diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index 324aeb7..0fed0e4 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -4,49 +4,23 @@ import { HelloWave } from '@/components/HelloWave'; import ParallaxScrollView from '@/components/ParallaxScrollView'; import { ThemedText } from '@/components/ThemedText'; import { ThemedView } from '@/components/ThemedView'; +import { SafeAreaView } from 'react-native-safe-area-context'; +import { LengthInput } from '@/components/LengthInput'; +import { setupStore } from '../store'; export default function HomeScreen() { + + const store = setupStore(); + + function calculatePrice() { + + } + return ( - - }> - - Welcome! - - - - Step 1: Try it - - Edit app/(tabs)/index.tsx to see changes. - Press{' '} - - {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })} - {' '} - to open developer tools. - - - - Step 2: Explore - - Tap the Explore tab to learn more about what's included in this starter app. - - - - Step 3: Get a fresh start - - When you're ready, run{' '} - npm run reset-project to get a fresh{' '} - app directory. This will move the current{' '} - app to{' '} - app-example. - - - + + + {} + ); } diff --git a/app/store.ts b/app/store.ts new file mode 100644 index 0000000..62ce741 --- /dev/null +++ b/app/store.ts @@ -0,0 +1,32 @@ +import { combineReducers, configureStore } from '@reduxjs/toolkit'; +import { rememberReducer, rememberEnhancer } from 'redux-remember'; +import reducers from "@/features/product/productSlice" +import AsyncStorage from '@react-native-async-storage/async-storage'; +import { Product } from "@/lib/product"; + +const rememberedKeys = ['products']; + +const rootReducer = reducers; + +export function setupStore(preloadedState: Partial = { + products: [] as Product[], +}) { + return configureStore({ + reducer: rememberReducer(reducers), + // @ts-ignore + preloadedState, + enhancers: (getDefaultEnhancers) => getDefaultEnhancers().concat( + rememberEnhancer( + AsyncStorage, + rememberedKeys, + { + persistWholeStore: true, + } + ) + ), + }); +} + +export type RootState = ReturnType; +export type AppStore = ReturnType; +export type AppDispatch = AppStore['dispatch']; diff --git a/babel.config.js b/babel.config.js index 9d89e13..09b631c 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,10 @@ module.exports = function (api) { api.cache(true); return { - presets: ['babel-preset-expo'], + presets: [ + 'babel-preset-expo', + '@babel/preset-typescript', + // 'module:metro-react-native-babel-preset', + ] }; }; diff --git a/components/LengthInput.tsx b/components/LengthInput.tsx new file mode 100644 index 0000000..3c73186 --- /dev/null +++ b/components/LengthInput.tsx @@ -0,0 +1,86 @@ +import { Measure, Unit, length as en_length, area as en_area } from "enheter"; +import { useState } from "react"; +import { Button, StyleSheet, Text, TextInput, View } from "react-native"; +import { SafeAreaView } from "react-native-safe-area-context"; + +export type LengthInputProps = { + onLengthSet?: (length: Measure<"length">) => any, + onAreaSet?: (area: Measure<"area">) => any, + isArea?: boolean, +} + +export type t_length_unit = "foot" | "inch" + +export function LengthInput(props: LengthInputProps) { + + const [length, setLength] = useState(null as null | number); + const [width, setWidth] = useState(null as null | number); + const [unit, setUnit] = useState("foot" as t_length_unit); + + function doSetLength(text: string) { + const value = parseFloat(text); + setLength(value); + if (!props.isArea) { + const len = en_length(unit, value) + props.onLengthSet && props.onLengthSet(len) + } else { + const en_unit = unit == "foot" ? "squareFoot" : "squareInch" + const ar = en_area(en_unit, value); + props.onAreaSet && props.onAreaSet(ar); + } + } + + function doSetWidth(text: string) { + const value = parseFloat(text); + setLength(value); + const len = en_length(unit, value) + props.onLengthSet && props.onLengthSet(len) + } + + return ( + + + setLength(null)} + value={length?.toString() || ""} + onChangeText={doSetLength} + style={styles.textInput} + /> + {props.isArea && + ( setWidth(null)} + value={length?.toString() || ""} + onChangeText={doSetWidth} + style={styles.textInput} + />) + } + {unit == "foot" ? "ft" : "in"} +