87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import { Drug } from "@/redux/features/drug/drug";
|
|
import { View, StyleSheet, FlatList, Dimensions } from "react-native";
|
|
import { RootState, AppDispatch } from "@/redux/store";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import React, { useState } from "react";
|
|
import DrugDisplay from "./DrugDisplay";
|
|
import { FAB, MD3Theme, useTheme } from "react-native-paper";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import DeletePopUp from "./DeletePopUp";
|
|
import { drugSlice, removeDrug } from "@/redux/features/drug/drugSlice";
|
|
import { ConnectionNotification } from "./ConnectionNotification";
|
|
import { ErrorNotification } from "./ErrorNotification";
|
|
|
|
export default function DrugList() {
|
|
const drugs: Drug[] = useSelector((state: RootState) => state.drug.drugList);
|
|
const dispatch: AppDispatch = useDispatch();
|
|
const theme = useTheme();
|
|
const style = styles(theme);
|
|
const navigation = useNavigation<any>(); //TODO: types...
|
|
|
|
const [deleteIndex, useDeleteIndex] = useState(-1)
|
|
|
|
return (
|
|
<View style={style.listMargin}>
|
|
<ConnectionNotification />
|
|
{/* <ErrorNotification /> */}
|
|
<FAB
|
|
color={theme.colors.onPrimary}
|
|
style={style.fab}
|
|
icon="pencil-outline"
|
|
mode="elevated"
|
|
onPress={() => {
|
|
navigation.navigate("add");
|
|
}}
|
|
/>
|
|
{deleteIndex != -1 ?
|
|
<DeletePopUp
|
|
drugId={deleteIndex}
|
|
onCancel = {() => {
|
|
useDeleteIndex(-1)
|
|
}}
|
|
onDelete = {() => {
|
|
dispatch({type: "drug/remove", payload: deleteIndex})
|
|
useDeleteIndex(-1)
|
|
}}
|
|
/> : null}
|
|
<FlatList style={style.list}
|
|
data={drugs}
|
|
renderItem={({item})=><DrugDisplay
|
|
key={item.id}
|
|
drug={item}
|
|
onUpdate={(drugId: number) => {
|
|
navigation.navigate("update/[id]", {id: item.id});
|
|
}}
|
|
onDelete={(drugId: number) => {
|
|
useDeleteIndex(drugId)
|
|
}} />}
|
|
keyExtractor={item => item.id.toString()}
|
|
showsHorizontalScrollIndicator={false}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = (theme: MD3Theme) => StyleSheet.create({
|
|
listMargin:{
|
|
paddingTop: 75.5,
|
|
paddingBottom: 23.5,
|
|
paddingLeft: 26,
|
|
paddingRight: 26,
|
|
height: Dimensions.get('window').height,
|
|
flex: 1
|
|
},
|
|
list: {
|
|
backgroundColor: theme.colors.surface,
|
|
height: "100%"
|
|
},
|
|
fab: {
|
|
position: 'absolute',
|
|
margin: 48,
|
|
right: 0,
|
|
bottom: 0,
|
|
zIndex: 30,
|
|
borderRadius: 30,
|
|
backgroundColor: theme.colors.primary
|
|
}
|
|
}) |