{"size": 7080, "ext": "js", "max_stars_repo_path": "src/views/ItemDisplay/ItemDetail.js", "max_stars_repo_name": "DSC-SolutionChallenge/neighborhood-donation", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/views/ItemDisplay/ItemDetail.js", "max_issues_repo_name": "DSC-SolutionChallenge/neighborhood-donation", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/views/ItemDisplay/ItemDetail.js", "max_forks_repo_name": "DSC-SolutionChallenge/neighborhood-donation", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 46.2745098039, "max_line_length": 158, "alphanum_fraction": 0.4995762712}
import React, { useState, useRef, useEffect, useCallback, useContext } from "react";
import { Link } from 'react-router-dom';
import { getItemById, auth, updateItem, generateUserDocument, getUserDocument } from "../../firebase"

import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
// core components
import GridItem from "components/Grid/GridItem.js";
import GridContainer from "components/Grid/GridContainer.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardAvatar from "components/Card/CardAvatar.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";
import CustomTabs from "components/CustomTabs/CustomTabs.js";
import avatar from "assets/img/faces/marc.jpg";
import AuthBox from "views/Authentication/AuthBox"

const ItemDetail = ({ match }) => {
    let params = match.params;
    const [item, setItem] = useState(null);
    const [requireLogin, setRequireLogin] = useState(false);
    const [user, setUser] = useState(null);
    const [donatorRequester, setDonatorRequester] = useState(null);
    const [alreadyRequested, setAlreadyRequested] = useState(false);
    const id = params.id;
    const fetchItem = useCallback(async () => {
        const item = await getItemById(id);
        setItem(item)
        const uid = item.donatorUid ? item.donatorUid : item.receiverUid
        const user_tmp = await getUserDocument(uid)
        setDonatorRequester(user_tmp)
    }, []);
    useEffect(() => {
        fetchItem()
        auth.onAuthStateChanged(async userAuth => {
            console.log(userAuth)
            const user = await generateUserDocument(userAuth);
            console.log(user)
            if (!user)
                setUser(null);
            else
                setUser(user);
            setRequireLogin(false)
        });
    }, []);
    console.log(donatorRequester)
    const incrementWaitingList = () => {
        if (!user) {
            setRequireLogin(true)
        } else {
            var newItem = JSON.parse(JSON.stringify(item))
            if (!newItem.requestUids.includes(user.uid)) {
                newItem.requestUids.push(user.uid)
                console.log(newItem)
                updateItem(newItem)
                setItem(newItem);
            } else {
                setAlreadyRequested(true)
            }
        }
    }

    const markReceivedDonated = (markReceived) => {
        if (!markReceived) {
            var newItem = JSON.parse(JSON.stringify(item))
            // newItem.receiverUid = user.uid
            newItem.received = true
            updateItem(newItem)
            setItem(newItem);
        } else {
            var newItem = JSON.parse(JSON.stringify(item))
            // newItem.donatorUid = user.uid
            newItem.donated = true
            updateItem(newItem)
            setItem(newItem);
        }
    }
    if (!item) {
        return (<div></div>);
    }
    return (
        <GridContainer>
            <GridItem xs={12} sm={12} md={3}>
                <img className="itemPic" src={item.picUrl} alt="User Profile Picture" width="300" height="300" />
            </GridItem>
            <GridItem xs={12} sm={12} md={9}>
                <Card>
                    <CardBody>
                        <GridContainer>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>Item Name</InputLabel>
                                <h4>{item.name}</h4>
                            </GridItem>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>Location</InputLabel>
                                <h4>Toronto</h4>
                            </GridItem>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>{item.donatorUid ? "Donated By" : "Requested By"}</InputLabel>
                                <h4>{donatorRequester?donatorRequester.displayName:""}</h4>
                            </GridItem>
                        </GridContainer>
                        <GridContainer>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>{item.donatorUid ? "Donated At" : "Requested At"}</InputLabel>
                                <h4>{item.createdAt}</h4>
                            </GridItem>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>Waiting List Size</InputLabel>
                                <h4>{item.requestUids.length}</h4>
                            </GridItem>
                            <GridItem xs={12} sm={12} md={4}>
                                <InputLabel style={{ color: "#AAAAAA" }}>Contact {item.donatorUid ? "Owner" : "Requester"} At</InputLabel>
                                <h4>{item.contactInfo}</h4>
                            </GridItem>
                        </GridContainer>
                        <GridContainer>
                            <GridItem xs={12} sm={12} md={12}>
                                <InputLabel style={{ color: "#AAAAAA" }}>Item Description</InputLabel>
                                <h4>{item.description}</h4>
                            </GridItem>
                        </GridContainer>

                        <GridContainer>
                            <GridItem xs={12} sm={12} md={12}>
                                <Button color="primary" onClick={() => { incrementWaitingList() }}>{item.donatorUid ? "Request Item" : "Donate Item"}</Button>
                            </GridItem>
                            {alreadyRequested && <small>You have already {item.donatorUid ? "requested" : "donated"} this item</small>}
                            {/* If current user requested, then display mark received button */}
                            {(user && item.receiverUid === user.uid) &&
                                <GridItem xs={12} sm={12} md={12}>
                                    <Button color="primary" onClick={() => { markReceivedDonated(true) }}>Mark Received</Button>
                                </GridItem>}
                            {(user && item.donatorUid === user.uid) &&
                                <GridItem xs={12} sm={12} md={12}>
                                    <Button color="primary" onClick={() => { markReceivedDonated(false) }}>Mark Donated</Button>
                                </GridItem>}

                        </GridContainer>
                    </CardBody>
                </Card>
            </GridItem>

            {requireLogin && <AuthBox></AuthBox>}

        </GridContainer>
    )
}

export default ItemDetail;