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

import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer, Row, View } from "native-base"
import React, { useState, 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 { Item, ItemViewState } from "../types/item"
import { login } from "../stores/actions/userThunks"
import { SceneRendererProps, TabView } from "react-native-tab-view"
import { useWindowDimensions } from "react-native"
import ItemDetail from "../components/item/ItemDetail"

interface ItemViewProps {
  itemId: string
}

const ItemViewPage = (props: ItemViewProps) => {

  const layout = useWindowDimensions();

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

  const dispatch = useDispatch<AppDispatch>();

  const { item, notes, 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));
  }, [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 (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]);

  return (
    <TabView
      navigationState={{ index: selectedConcordance, routes }}
      renderScene={() => <ItemDetail item={item} />}
      onIndexChange={handleTabChange}
      initialLayout={{ width: layout.width }}
    />
  );
}

export default ItemViewPage;