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

import { Center, Box, VStack, Button, HStack, Text, Image, ScrollView, View, Spacer, Card, Heading, Switch, Flex, ChevronLeftIcon, ChevronRightIcon } from "native-base"
import React, { useCallback, useEffect, useState } 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"
import { log } from "../../logging/logger"
import { createNote, getAllNotes } from "../../stores/actions/notesThunks"
import { AppDispatch, RootState } from "../../stores/store"
import { useDispatch, useSelector } from "react-redux"
import { getItemNotes } from "../../stores/actions/itemThunks"

import { Dimensions } from "react-native";
import { DrawerNavigationProp } from "@react-navigation/drawer"
import { RootStackParamList } from "../../pages/Navigation"

interface ItemDetailProps {
    item: Item,
    itemLoading: boolean,
    notes: Note[],
    notesLoading: boolean,
    navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined>
}

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

    const [selectedImage, setSelectedImage] = useState<number>(0);

    return (<>
        {
            item && props.itemLoading ?
                (<LoadingBox text="Item loading..." />)
                :
                (
                    <ScrollView flex="1">
                        <VStack>
                            <HStack marginLeft={2.5} alignItems={"center"}>
                                <VStack flex={1} marginTop={3.5}>
                                    <Text>
                                        {item.authorDisplayName ? item.authorDisplayName : item.authorName}
                                    </Text>
                                    <Heading size="sm">
                                        {item.workName}
                                    </Heading>
                                </VStack>
                                <Box marginLeft="auto" marginTop={0}> {/* marginLeft: "auto" pushes the Box to the right */}
                                    <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 != undefined && item?.searchSubjects?.map((subject, index) => (
                                                item.searchSubjects && index < item.searchSubjects.length - 1 ? (subject + ", ") : (subject)
                                            ))}
                                        </Text>
                                    </VStack>}
                            </Card>
                            {item.fullView && item.images && item.images.length > 0 && (
                                <VStack background="primary.100" marginTop={5} alignItems="center" justifyContent="center">
                                    <Text marginBottom={2}>Resembling objects {selectedImage + 1 + "/" + item.images.length}</Text>
                                    <HStack space={4}>
                                        <Button variant="ghost" size="lg" onPress={() => {
                                            if (item.images && selectedImage - 1 >= 0) {
                                                setSelectedImage(selectedImage - 1);
                                            }
                                        }} leftIcon={<ChevronLeftIcon size="lg" />} />
                                        <Image size={250} alt="image" source={{ uri: IMAGE_URL + "/" + item.images[selectedImage].imageUrl }} />
                                        <Button variant="ghost" size="lg" onPress={() => {
                                            if (item.images && selectedImage + 1 < item.images.length) {
                                                setSelectedImage(selectedImage + 1);
                                            }
                                        }} leftIcon={<ChevronRightIcon size="lg" />} />
                                    </HStack>
                                </VStack>
                            )}
                            {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>
                    </ScrollView>
                )
        }</>
    );
}



const ItemNotes = (props: { item: Item, notes: Note[], notesLoading: boolean, navigation: DrawerNavigationProp<RootStackParamList, "Item", undefined> }) => {

    const [showRelatedComments, setShowRelatedComments] = useState(true);

    const { requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)

    const dispatch = useDispatch<AppDispatch>();

    // trigger refresh on triggerRefresh increment
    useEffect(() => {
        if (triggerRefresh > 0) {
            log.debug("NotesViewPage", "useEffect", "getNotes");
            dispatch(getItemNotes({ item: props.item, relatedComments: showRelatedComments }));
        }
    }, [triggerRefresh])
    
    const toggleRelatedComments = useCallback(() => {
        if (!props.notesLoading) {

            let value = !showRelatedComments;

            setShowRelatedComments(value);
            dispatch(getItemNotes({ item: props.item, relatedComments: value }));
        }
      }, [showRelatedComments]);


    const handleCreateItemComment = useCallback(
        (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
            if (!requestPending) {
                // creating new comment
                if (replyingTo != null) {
                    dispatch(createNote({ newNote: { note: newComment, reply_to: replyingTo.messageId } as Note }));
                } else {
                    dispatch(createNote({ newNote: { note: newComment, items: props.item.id } as any }));
                }
            }
        },
        [props.item.id]
    );

    return (

        props.notesLoading ?
            (<LoadingBox text="Notes loading..." />)
            :
            (<VStack>
                <Flex direction="row" alignItems="center" justify="flex-end">
                    <Text fontSize={"12"}>Show related comments</Text>
                    <Switch value={showRelatedComments} onChange={toggleRelatedComments} size="md" />
                </Flex>
                <Box >
                    <NotesListView height={Dimensions.get('window').height - 355} requestPending={requestPending} notes={props.notes} navigation={props.navigation} handleCreateComment={handleCreateItemComment} />
                </Box>
            </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 marginLeft={2.5} marginRight={2.5}>

            <Box height={Dimensions.get('window').height - 210}>
                {itemShown ? (
                    <ItemDetail itemLoading={itemLoading} item={props.item} />
                ) : (
                    <ItemNotes item={props.item} notesLoading={props.notesLoading} notes={props.notes} navigation={props.navigation} />
                )}
            </Box>

            {/* 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