aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ItemView.tsx @ 3218402b

import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading } from "native-base"
import React from "react"
import { Item } from "../../types/item"
import { Note } from "../../types/note"
import LoadingBox from "../loading/LoadingBox"
import NotesListView from "../notes/NotesListView"
import { IMAGE_URL } from "../../api/constants"

interface ItemDetailProps {
    item: Item,
    itemLoading: boolean,
    notes: Note[],
    notesLoading: boolean,
    navigation: any
}

const ItemDetail = (props: { item: Item }) => {
    const item = props.item;

    return (<>
        {
            item && (
                <VStack>
                    <HStack marginTop="5%">
                        <VStack width="75%">
                            <Text>
                                {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                            </Text>
                            <Heading size="sm">
                                {item.workName}
                            </Heading>

                        </VStack>
                        <Box width="25%">
                            <Button variant="outline" size="md">
                                {item.concordances[0].id}
                            </Button>
                        </Box>
                    </HStack>
                    <Card shadow="1" marginTop="5%">
                        {item.inventoryItem &&
                            <VStack>
                                <Text italic>
                                    <Text color="light.500">Inventory item: </Text>
                                    {item.inventoryItem}
                                </Text>
                                <Text italic marginTop="2.5%">
                                    {item.searchSubjects.map((subject, index) => (
                                        index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
                                    ))}
                                </Text>
                            </VStack>}
                    </Card>
                    {item.fullView && item.imageUrl && (
                        <Center background="primary.100" marginTop="5%">
                            <Text>Resembling object</Text>
                            <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.imageUrl }} />
                        </Center>)}
                    {item.fullView && (
                        <Card shadow="1" marginTop="5%" marginBottom="5%">
                            {item.authorName &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Author name: </Text>
                                        {item.authorName}
                                    </Text>
                                </HStack>}
                            {item.title &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Title: </Text>
                                        {item.title}
                                    </Text>
                                </HStack>}
                            {item.institution &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Institution: </Text>
                                        {item.institution.name}, Inv. No. {item.institution.inventoryNumber}, {item.institution.city} {"(" + item.institution.country + ")"}
                                    </Text>
                                </HStack>}
                            {item.repository &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Repository: </Text>
                                        {item.repository}
                                    </Text>
                                </HStack>}
                            {item.provenance &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Provenance: </Text>
                                        {item.provenance}
                                    </Text>
                                </HStack>}
                            {item.description &&
                                <HStack>
                                    <Text italic marginTop="2.5%">
                                        <Text color="light.500">Description: </Text>
                                        {item.description}
                                    </Text>
                                </HStack>}
                        </Card>)}
                </VStack>
            )
        }</>
    );
}



const ItemView = (props: ItemDetailProps) => {

    // item shown / note shown
    const [itemShown, setItemShown] = React.useState(true);

    const { itemLoading, notesLoading, navigation } = props;

    const handleItemClick = () => {
        setItemShown(true);
    }

    const handleNotesClick = () => {
        setItemShown(false);
    }

    return (
        <Box display="flex" flex={1} flexDirection="column" justifyContent="space-between">
            <ScrollView flex="1">
                <Box width="92%" marginLeft="5%">
                    {itemShown ? (
                        itemLoading ?
                            <LoadingBox text="Item loading" />
                            :
                            <ItemDetail item={props.item} />
                    ) : (
                        notesLoading ?
                            <LoadingBox text="Notes loading" />
                            :
                            <NotesListView notes={props.notes} handleDelete={() => console.log("TODO handle delete")} handleEdit={() => console.log("TODO handle edit")} handleReply={() => console.log("TODO handle reply")} setConfirmDialog={() => { }} navigation={navigation} />
                    )}
                </Box>
            </ScrollView>


            {/* item notes switch tab */}
            <HStack alignItems="center">
                <Button
                    variant={itemShown ? "subtle" : "outline"}
                    w="50%"
                    onPress={handleItemClick}
                >
                    Item
                </Button>
                <Button
                    variant={itemShown ? "outline" : "subtle"}
                    w="50%"
                    onPress={handleNotesClick}
                >
                    Notes
                </Button>
            </HStack>
        </Box>
    )
}

export default ItemView