aswi2023one-team-to-rule-them-all-gitlab/src/pages/ItemViewPage.tsx @ 7410d6c1

import React, { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import { getItem, getItemNotes, setConcordances } from "../stores/actions/itemThunks"
import { login } from "../stores/actions/userThunks"
import { TabView } from "react-native-tab-view"
import ItemView from "../components/item/ItemView"
import { useWindowDimensions } from "react-native"
import LoadingBox from "../components/loading/LoadingBox"
import ItemTabBar from "../components/item/ItemTabBar"
import { log } from "../logging/logger"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootDrawerParamList } from "./Navigation"


const ItemViewPage = ({route, navigation}: DrawerScreenProps<RootDrawerParamList, 'Item'>) => {

  const layout = useWindowDimensions();

  const [routes, setRoutes] = React.useState([
    // initial tab
    { key: 'loading', title: 'Loading item...' },
  ]);

  // // TODO vyřešit, aby nebyly freezy při přepínání
  // const [renderSceneDict, setRenderSceneDict] = React.useState({});

  const [index, setIndex] = React.useState(0);

  const dispatch = useDispatch<AppDispatch>();

  const { item, itemLoading, notes, notesLoading, concordances } = useSelector((state: RootState) => state.itemViewState)

  // initial: load main item
  useEffect(() => {
    dispatch(getItem(route.params.itemId));
    log.debug("ItemViewPage", "useEffect", "getItem", route.params.itemId);
  }, [])


  // concordances are loaded
  useEffect(() => {
    log.debug("ItemViewPage", "useEffect", "concordances", concordances)

    if (item && concordances && concordances.length > 0) {
      let concordanceRoutes = [];

      // let _renderSceneDict: any = {};

      for (let i = 0; i < concordances.length; i++) {
        let concordance = concordances[i];
        concordanceRoutes.push({
          key: concordance.id,
          title: concordance.id
        })
        // _renderSceneDict[concordance.id] = <LoadingBox text={`Loading item ${concordance.id}...`}></LoadingBox>;
      }

      setRoutes(concordanceRoutes);
      // setRenderSceneDict(_renderSceneDict);
    }
  }, [concordances]);

  // item changes
  useEffect(() => {
    log.debug("ItemViewPage", "useEffect", "item", item)

    if (!itemLoading && item && item.id) {
      if (index == 0) {
        dispatch(setConcordances(item.concordances));
      }
      // set item notes if item is loaded
      if (item && item.id) {
        dispatch(getItemNotes(item.id));
      }
    }
  }, [item]);

  const handleIndexChanged = (newIndex: number) => {
    if(newIndex >= 0 && newIndex < concordances.length && index != newIndex){
      console.log("index changed");
      setIndex(newIndex);
      if (concordances && concordances.length > 0) {
        dispatch(getItem(concordances[newIndex].id));
      }
    }
  }

  const onBackPressed = () => {
    log.debug("back pressed")
    navigation.goBack();
  }

  return (
    !concordances || concordances.length < 1 ?
      <LoadingBox text={`Loading item ${route.params.itemId}...`}/>
      :
      <TabView
        renderTabBar={() => ItemTabBar({
          navigationState: {
            routes: routes,
          },
          concordances: concordances,
          index: index,
          onIndexChange: handleIndexChanged,
          onBackPressed: onBackPressed,
        })}

        navigationState={{ index, routes }}
        renderScene={() => <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} navigation={navigation}/>}

        initialLayout={{ width: layout.width }}
        onIndexChange={handleIndexChanged}
      />
  );
}

export default ItemViewPage;