Soulstorm-wiki-frontend/src/classes/building/ResearchFull.tsx

import {IMod} from "../../types/Imod";
import {IResearch} from "../../types/IResearch";
import {
    Accordion,
    AccordionDetails,
    AccordionSummary,
    Grid2,
    Paper,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableRow
} from "@mui/material";
import {ExpandMore} from "@mui/icons-material";
import {getIcon, ModifiersProvidesTable} from "../ModifiersProvideTable";
import AvTimerOutlinedIcon from "@mui/icons-material/AvTimer";
import Required from "../Required";
import React, {useEffect, useState} from "react";
import {IBuilding} from "../../types/IBuilding";
import {IResearchShort} from "../../types/IResearchShort";
import {ResearchUrl, WeaponUrl} from "../../core/api";
import {IWeapon} from "../../types/IUnit";


interface IResearchFull {
    research: IResearch | undefined,
}

function ResearchFull(props: { id: number, building: IBuilding }){

    const [researchFull, setResearchFull] = useState<IResearchFull>({
        research: undefined,
    });

    const building = props.building
    const research= researchFull.research!!

    useEffect(() => {

        fetch(ResearchUrl + "/" + building.modId + "/" + props.id)
            .then(res => res.json())
            .then((research: IResearch) => {
                setResearchFull({
                    research:research,
                })

            });
    }, []);

    if(researchFull.research !== undefined) {

        return <div className='addon-research-accordion' id={"research-" + research.id}>

            <Grid2 container spacing={2}>
                <Grid2 size={{xs: 12, md: 4}}>
                    <TableContainer component={Paper}>
                        <Table size="small" aria-label="a dense table">
                            <TableBody id="unit-stats-table">
                                <TableRow
                                    sx={{'&:last-child td, &:last-child th': {border: 0}}}
                                >
                                    <TableCell component="th" scope="row">Cost</TableCell>
                                    <TableCell component="th" scope="row">
                                        {research.costRequisition > 0 &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_requisition.gif"/>&nbsp;
                                                {research.costRequisition.toFixed(0)}</span>}
                                        {research.costPower > 0 && <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                                                    src="/images/Resource_power.gif"/>&nbsp;
                                            {research.costPower.toFixed(0)}</span>}
                                        {(research.costPopulation !== undefined && research.costPopulation > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_orksquadcap.gif"/>&nbsp;
                                                {research.costPopulation.toFixed(0)}</span>}
                                        {(research.costFaith !== undefined && research.costFaith > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_faith.gif"/>&nbsp;
                                                {research.costFaith}</span>}
                                        {(research.costSouls !== undefined && research.costSouls > 0) &&
                                            <span>&nbsp;<img style={{verticalAlign: "top"}}
                                                             src="/images/Resource_souls.gif"/>&nbsp;
                                                {research.costSouls.toFixed(0)}</span>}
                                        {(research.costTime !== undefined && research.costTime > 0) &&
                                            <span>&nbsp;<AvTimerOutlinedIcon
                                                style={{verticalAlign: "top", fontSize: "18px"}}/>&nbsp;
                                                {research.costTime}s</span>}
                                    </TableCell>
                                </TableRow>

                            </TableBody>
                        </Table>
                    </TableContainer><br/>
                </Grid2>
                <Grid2 size={{xs: 12, md: 8}}>
                    <div style={{whiteSpace: "pre-wrap"}}>
                        {research.description}
                    </div>

                </Grid2>
                <Grid2 size={{xs: 12, md: 12}}>
                    <ModifiersProvidesTable modifiers={research.modifiers} affectedData={research.affectedData}
                                            modId={building.modId} race={building.race}/>
                </Grid2>
                {research.requirements !== null &&
                    <Grid2 size={{xs: 12, md: 12}}>
                        <Required requirement={research.requirements} modId={building.modId} raceId={building.race.id}/>
                    </Grid2>}
            </Grid2>
        </div>
    } else return <div>loading...</div>
}

export default ResearchFull;