aswi2023one-team-to-rule-them-all-gitlab/src/components/listView/ListView.tsx @ af8eb9a6

import { useEffect, useState } from "react"
import { ScrollView, Text, VStack } from "native-base"
import { useSelector } from "react-redux"
import { RootState } from "../../stores/store"
import ItemPreview from "./ItemPreview"
import { ItemPreviewType } from "../../types/listViewTypes"
import { log } from "../../logging/logger"


const ListView = () => {
    const items = useSelector((state: RootState) => state.listView.data)

    /**
     * Searches through names by given role, return getty_data.display_name if exists otherwise name.value
     * @param item
     * @param role
     */
    const parseNameByRole = (item: ItemPreviewType, role: string) => {
        // @ts-ignore
        const name = item.object[0].name?.find((name) => name.role === role)
        return name && name ?
            name.getty_data ?
                name.getty_data.display_name : name.value
            : ""
    }

    /**
     * Returns artist if it is original, otherwise returns copist and original artist in copy of
     * @param item
     */
    const parseArtists = (item: ItemPreviewType) => {
        // if is copy - display copist and copy of original artist if they are present in data
        if (item.src?.value && item.src?.value == "copy") {
            const copist = parseNameByRole(item, "copist")
            const artist = parseNameByRole(item, "artist")
            return `${ copist } ${ artist !== "" ? `(copy of ${ artist })` : "" }`
        } else {
            // if is original - display artist
            return parseNameByRole(item, "artist")
        }
    }

    /**
     * Parses image name
     * cycles through all objects and returns first image name with changed suffix to .png of undefined if not found
     * @param item
     */
    const parseImage = (item: ItemPreviewType) => {
        // @ts-ignore
        const image = item.object.find((object) => object.images)
        // @ts-ignore
        return image && image.images ? image.images[0].file.split('.')[0] + '.png' : undefined
    }

    useEffect(() => {
        log.debug("ListView", "Items:", items)
    }, [items])

    return (
        <>
            { items.map((item) => (
                <ItemPreview
                    // @ts-ignore
                    caption={ item.object[0].caption }
                    title={ item.text }
                    name={ parseArtists(item) }
                    image={ parseImage(item) }
                />
            )) }
        </>
    )
}

export default ListView