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

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"

interface ItemViewProps {
  itemId: string,
  backPressed: any
}

const ItemViewPage = (props: ItemViewProps) => {

  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(() => {
    // TODO remove login from here
    dispatch(login({ username: "Viktorie", password: "Golem123." }));
    dispatch(getItem(props.itemId));
  }, []);


  // concordances are loaded
  useEffect(() => {
    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(() => {
    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));
      }
    }
  }

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

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

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

export default ItemViewPage;