src/components/CareerFair2022/Location/Location.tsx
import { useEffect, useState } from 'react';
import {Row, Col} from 'react-bootstrap';
import { isMobile } from 'react-device-detect';
import { request } from 'graphql-request';
function CareerFairLocation() {
const [location, setLocation] = useState({'virtual': '', 'inPerson': '', 'id': ''});
useEffect(() => {
const fetchLocation = async () => {
const { careerFairLocation } = await request(
process.env.REACT_APP_GRAPHCMS_URL ? process.env.REACT_APP_GRAPHCMS_URL : "",
`
{
careerFairLocation(where: {year: 2022}) {
id
virtual
inPerson
}
}
`
);
setLocation(careerFairLocation);
};
fetchLocation();
}, []);
return (
<div id="Location">
<Row className="bg-white justify-content-center pb-5 pt-5">
<Col sm={10} xs={11} className={isMobile ? "ml-3" : "pl-2 ml-2"}>
<h2 className="text-orange font-weight-bold pb-3">{isMobile ? "LOCATION" : "Location"}</h2>
{location ?
<><h3 className="mono text-peach hack mb-4">{location.inPerson}</h3>
<h3 className="mono text-peach hack mb-4">{location.virtual}</h3></>
:
<h3>Coming Soon!</h3>
}
</Col>
</Row>
</div>
);
}
export default CareerFairLocation;