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

import React, { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import { getItem, getItemNotes, setConcordances, setSelectedConcordance } from "../stores/actions/itemThunks"
import { login } from "../stores/actions/userThunks"
import { NavigationState, SceneRendererProps, TabBar, TabView } from "react-native-tab-view"
import ItemView from "../components/item/ItemView"
import { Button, Pressable, View, Text, Icon, CircleIcon, ScrollView, HStack, VStack } from "native-base"
import { useWindowDimensions } from "react-native"
import LoadingBox from "../components/loading/loadingBox"
import { CertaintyWithColors } from "../stores/reducers/itemSlice"


interface ItemViewProps {
  itemId: string
}

const ItemViewPage = (props: ItemViewProps) => {

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



  const dispatch = useDispatch<AppDispatch>();

  const { item, itemLoading, notes, notesLoading, concordances, selectedConcordance } = 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 = [];

      for (let i = 0; i < concordances.length; i++) {
        let concordance = concordances[i];
        concordanceRoutes.push({
          key: concordance.id,
          title: concordance.id
        })
      }
      setRoutes(concordanceRoutes);
    }
  }, [concordances]);

  const handleTabChange = (index: number) => {
  
    dispatch(setSelectedConcordance(index));
  };

  // selected concordance changes
  useEffect(() => {
    if (concordances && concordances.length > 0) {
      dispatch(getItem(concordances[selectedConcordance].id));
    }

  }, [selectedConcordance]);

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

  // custom render Tab
  const _renderTabBar = (props: { navigationState: { routes: any[] } }) => {
    if (concordances && concordances.length > 0)
      return (
        <View h="16">
          <ScrollView horizontal={true} >
            <HStack>
              {props.navigationState.routes.map((route, i) => {
                return (
                  <Button size="lg" key={i}
                    variant={selectedConcordance == i ? "subtle" : "outline"}
                    rightIcon={<CircleIcon size="2" color={CertaintyWithColors[concordances[i].cert].color} />}
                    onPress={() => handleTabChange(i)}
                  >
                    {concordances[i].id}
                  </Button>
                );
              })}
            </HStack>

          </ScrollView>
        </View>
      )
    else {
      return <LoadingBox text={`Loading concordances...`}></LoadingBox>
    }
  };

  return (
    !concordances || concordances.length < 1 ?
      <LoadingBox text={`Loading item ${props.itemId}...`}></LoadingBox>
      :
      <TabView
        renderTabBar={_renderTabBar}
        navigationState={{ index: selectedConcordance, routes }}
        renderScene={() => (
          <ItemView item={item} notes={notes} itemLoading={itemLoading} notesLoading={notesLoading} />
        )}
        initialLayout={{ width: layout.width }}

        // prevent default action on index change
        onIndexChange={handleTabChange}

      />
  );
}



export default ItemViewPage;