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

import React, { useCallback, 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"
import { useToast } from "native-base"
import { ErrorToast } from "../components/toast/ErrorToast"


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

  const layout = useWindowDimensions();

  const [routes, setRoutes] = React.useState<{ key: string, title: string }[]>([
    // 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)

  const lastError = useSelector((state: RootState) => state.itemViewState.lastError)
  const toast = useToast();


  useEffect(() => {
    if (lastError) {
      toast.closeAll()
      toast.show({
        render: ({
          id
        }) => {
          return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
        },
        duration: 3000
      });
    }
  }, [lastError])

  // initial: load main item
  useEffect(() => {
    dispatch(getItem(route.params.itemId));
    log.debug("ItemViewPage", "useEffect", "getItem", route.params.itemId);
  }, [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: item, relatedComments: true }));
      }
    }
  }, [item]);


  const handleIndexChanged = useCallback((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 ?? ""));
      }
    }
  }, [concordances, index]);

  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,
          navigation: navigation,
          prevItem: item.prevItem,
          nextItem: item.nextItem,
        })}

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

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

export default ItemViewPage;