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

import { Center, Box, Heading, VStack, FormControl, Link, Input, Button, HStack, Text, StatusBar, Container, Divider, Spacer } from "native-base"
import React, { useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch } from "../stores/store"
import { getPreviousConcordance, getNextConcordance, getItem } from "../stores/actions/itemThunks"
import { Item, ItemState } from "../stores/reducers/itemSlice"

interface ItemViewProps {
  itemId: string
}

const ItemViewPage = (props: ItemViewProps) => {

  const dispatch = useDispatch<AppDispatch>();

  const itemState = useSelector((state: ItemState) => state)

  useEffect(() => {
    dispatch(getItem(props.itemId));
  }, []);

  const handleGetPreviousConcordance = async () => {
    await dispatch(getPreviousConcordance());
  };

  const handleGetNextConcordance = async () => {
    await dispatch(getNextConcordance());
  };



  return (
    <VStack>
      <Center>
        <Heading
          size="lg"
          fontWeight="600"
          color="coolGray.800"
          _dark={{ color: "warmGrey.50" }}
        >
          {item.authorName}
        </Heading>

        <Text fontSize="xl" mt="2">
          {item.caption}
        </Text>

        <HStack>
          <Button onPress={handleGetPreviousConcordance} mr={2}>
            Previous Concordance
          </Button>
          <Button onPress={handleGetNextConcordance}>Next Concordance</Button>
        </HStack>
        <Divider my="2" />
      </Center>
    </VStack>
  );
}

export default ItemViewPage

function useEffect(arg0: () => void, arg1: (string | (import("redux-thunk").ThunkDispatch<{ user: import("../stores/reducers/userSlice").UserState; item: import("../stores/reducers/itemSlice").ItemState }, undefined, import("redux").AnyAction> & import("redux").Dispatch<...>))[]) {
  throw new Error("Function not implemented.")
}