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

import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer, Row } 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"

interface ItemViewProps {
  itemId: string
}

const ItemViewPage = (props: ItemViewProps) => {

  const dispatch = useDispatch<AppDispatch>();

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

  const handleGetPreviousConcordance = async () => {
    if (selectedConcordance - 1 >= 0) {
      dispatch(setSelectedConcordance(selectedConcordance - 1));
      dispatch(getItem(concordances[selectedConcordance].id));
    }
  };

  const handleGetNextConcordance = async () => {
    if (selectedConcordance + 1 < concordances.length) {
      dispatch(setSelectedConcordance(selectedConcordance + 1))
      dispatch(getItem(concordances[selectedConcordance].id));
    }
  };

  // load main item
  useEffect(() => {
    // TODO remove login from here
    dispatch(login({ username: "Viktorie", password: "Golem123." }));
    dispatch(getItem(props.itemId));
  }, []);

  // item changes
  useEffect(() => {

    if (selectedConcordance == 0) {
      dispatch(setConcordances(item.concordances));
    }

    // set item notes if item is loaded
    if(item.id){
      dispatch(getItemNotes(item.id));
    }

  }, [item]);

  console.log(notes);

  return (
    <VStack>
      <Center>
        {concordances && concordances.length > 0 && item && ( // concordances && item are loaded
          <VStack>
            <Text>
              Concordances: {concordances.map((concordance) => concordance.id).join(', ')}
            </Text>
            <Text>
              {/* Selected: {concordances[selectedConcordance].id} */}
              Selected: {concordances[selectedConcordance].id}
            </Text>
            <HStack>
              <Button onPress={handleGetPreviousConcordance} mr={2}>
                Previous Concordance
              </Button>
              <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
            </HStack>
            <Text>
              current item: {item.workName}
            </Text>
          </VStack>
        )}

        <Divider my="2" />
      </Center>
    </VStack>
  );
}

export default ItemViewPage;