Function Pack

frontend/src/app/Pack/Pack.tsx:25–125

({ getPack, weightUnit, packId })

import { Credit, PackWrapper, SectionHeader, SectionTitle, TripDescription, ItemsFooter } from "./styles";

const Pack: React.FC<PackSpecs.Props> = ({ getPack, weightUnit, packId }) => {
    const [loading, setLoading] = React.useState<boolean>(true);
    const [pack, setPack] = React.useState<PackType | null>(null);
    const [unit, setUnit] = React.useState<WeightUnit>(weightUnit);
    const { dispatch } = useSidebar();
    const app = React.useContext(AppContext);

    React.useEffect(() => {
        getPack(packId)
            .then(pack => {
                setPack(pack);
                setLoading(false);
            })
            .catch(() => {
                alertError({ message: 'Unable to retrieve pack.' });
            });

        return function cleanup() {
            dispatch({ type: 'reset' });
        }
    }, []);

    // render sidebar
    React.useEffect(() => {
        if (pack) {
            const catWeights = getWeightByCategory(unit, pack.items);
            const Sidebar = () => (
                <>
                    <Statistics pack={pack}/>
                    <CategoryTable data={catWeights} unit={unit}/>
                    <CategoryChart data={catWeights}/>
                </>
            );

            dispatch({ type: 'setTitle', value: 'Details' });
            dispatch({ type: 'setContent', value: Sidebar() })
        }
    }, [pack, unit]);

    const componentDecorator = (href: string, text: string, key: number | string) => (
        <a href={href} key={key} target="_blank">{text}</a>
    );

    if (loading) {
        return <Loading size="large"/>
    }

    if (!pack) {
        return <p>Pack not found!</p>
    }

    const userPack = app.userInfo && app.userInfo.id === pack.userId;
    const isEditable = () => userPack && (
        <div className="edit-link">
            <Link to={`/pack/${pack.id}`}>Edit</Link>
        </div>
    );