Projekt

Obecné

Profil

Stáhnout (3.64 KB) Statistiky
| Větev: | Tag: | Revize:
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;
(2-2/7)