1
|
import React, { useEffect } from "react"
|
2
|
import { useDispatch, useSelector } from "react-redux"
|
3
|
import { AppDispatch, RootState } from "../stores/store"
|
4
|
import { getItem, getItemNotes, setConcordances } from "../stores/actions/itemThunks"
|
5
|
import { login } from "../stores/actions/userThunks"
|
6
|
import { TabView } from "react-native-tab-view"
|
7
|
import ItemView from "../components/item/ItemView"
|
8
|
import { useWindowDimensions } from "react-native"
|
9
|
import LoadingBox from "../components/loading/LoadingBox"
|
10
|
import ItemTabBar from "../components/item/ItemTabBar"
|
11
|
import { log } from "../logging/logger"
|
12
|
import { DrawerScreenProps } from "@react-navigation/drawer"
|
13
|
import { RootDrawerParamList } from "./Navigation"
|
14
|
|
15
|
|
16
|
const ItemViewPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList, 'Item'>) => {
|
17
|
|
18
|
const layout = useWindowDimensions();
|
19
|
|
20
|
const [routes, setRoutes] = React.useState([
|
21
|
// initial tab
|
22
|
{ key: 'loading', title: 'Loading item...' },
|
23
|
]);
|
24
|
|
25
|
// // TODO vyřešit, aby nebyly freezy při přepínání
|
26
|
// const [renderSceneDict, setRenderSceneDict] = React.useState({});
|
27
|
|
28
|
const [index, setIndex] = React.useState(0);
|
29
|
|
30
|
const dispatch = useDispatch<AppDispatch>();
|
31
|
|
32
|
const { item, itemLoading, notes, notesLoading, concordances } = useSelector((state: RootState) => state.itemViewState)
|
33
|
|
34
|
// initial: load main item
|
35
|
useEffect(() => {
|
36
|
dispatch(getItem(route.params.itemId));
|
37
|
log.debug("ItemViewPage", "useEffect", "getItem", route.params.itemId);
|
38
|
}, [])
|
39
|
|
40
|
|
41
|
// concordances are loaded
|
42
|
useEffect(() => {
|
43
|
log.debug("ItemViewPage", "useEffect", "concordances", concordances)
|
44
|
|
45
|
if (item && concordances && concordances.length > 0) {
|
46
|
let concordanceRoutes = [];
|
47
|
|
48
|
// let _renderSceneDict: any = {};
|
49
|
|
50
|
for (let i = 0; i < concordances.length; i++) {
|
51
|
let concordance = concordances[i];
|
52
|
concordanceRoutes.push({
|
53
|
key: concordance.id,
|
54
|
title: concordance.id
|
55
|
})
|
56
|
// _renderSceneDict[concordance.id] = <LoadingBox text={`Loading item ${concordance.id}...`}></LoadingBox>;
|
57
|
}
|
58
|
|
59
|
setRoutes(concordanceRoutes);
|
60
|
// setRenderSceneDict(_renderSceneDict);
|
61
|
}
|
62
|
}, [concordances]);
|
63
|
|
64
|
// item changes
|
65
|
useEffect(() => {
|
66
|
log.debug("ItemViewPage", "useEffect", "item", item)
|
67
|
|
68
|
if (!itemLoading && item && item.id) {
|
69
|
if (index == 0) {
|
70
|
dispatch(setConcordances(item.concordances));
|
71
|
}
|
72
|
// set item notes if item is loaded
|
73
|
if (item && item.id) {
|
74
|
dispatch(getItemNotes(item.id));
|
75
|
}
|
76
|
}
|
77
|
}, [item]);
|
78
|
|
79
|
const handleIndexChanged = (newIndex: number) => {
|
80
|
if(newIndex >= 0 && newIndex < concordances.length && index != newIndex){
|
81
|
console.log("index changed");
|
82
|
setIndex(newIndex);
|
83
|
if (concordances && concordances.length > 0) {
|
84
|
dispatch(getItem(concordances[newIndex].id));
|
85
|
}
|
86
|
}
|
87
|
}
|
88
|
|
89
|
const onBackPressed = () => {
|
90
|
log.debug("back pressed")
|
91
|
navigation.goBack();
|
92
|
}
|
93
|
|
94
|
return (
|
95
|
!concordances || concordances.length < 1 ?
|
96
|
<LoadingBox text={`Loading item ${route.params.itemId}...`}/>
|
97
|
:
|
98
|
<TabView
|
99
|
renderTabBar={() => ItemTabBar({
|
100
|
navigationState: {
|
101
|
routes: routes,
|
102
|
},
|
103
|
concordances: concordances,
|
104
|
index: index,
|
105
|
onIndexChange: handleIndexChanged,
|
106
|
onBackPressed: onBackPressed,
|
107
|
})}
|
108
|
|
109
|
navigationState={{ index, routes }}
|
110
|
renderScene={() => <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} navigation={navigation}/>}
|
111
|
|
112
|
initialLayout={{ width: layout.width }}
|
113
|
onIndexChange={handleIndexChanged}
|
114
|
/>
|
115
|
);
|
116
|
}
|
117
|
|
118
|
export default ItemViewPage;
|