jobhopper/frontend/src/ui/LandingBlurb/LandingBlurbContainer.tsx at 5979eac553f71e150aeec9d8a3ef07b396637f16 · codeforboston/jobhopper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { Collapse } from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import React, { useState } from 'react';
import styled from 'styled-components';
import { Section } from '../Common';
import { Body, Title } from '../Typography';
import { LandingBlurb } from './LandingBlurb';
import { useEffect, useOccupationState } from 'react';

export const LandingBlurbContainer = () => {
  const [show, setShow] = useState(true);
  const [hasClicked, setHasClicked] = useState(false);
  const {selectedOccupation} = useOccupationState();

  useEffect(() => {
    if (selectedOccupation && show && !hasClicked) {
      setShow(false);
    }
  })

  return <LandingBlurb show={show} onClick={() => {
    setShow(show => !show);
    setHasClicked(true);
  }}/>;
},

  const CollapsingSection = styled(Section)`
  & p {
    margin-block: 0;
    margin-bottom: 48px;
  }
`;

const CollapseIcon = styled(ExpandMoreIcon)`
  vertical-align: middle;
`;

export default function LandingBlurb() {
  const [show, setShow] = useState(true);
  return (
    <CollapsingSection>
      <Title onClick={() => setShow(show => !show)}>
        Occupation Transitions
        <CollapseIcon transform={`rotate(${show ? 180 : 0})`} />
      </Title>
      <Collapse in={show}>
        <Body>
          JobHopper is a tool to explore new data on mobility between
          occupations. This data was calculated by academic researchers from
          around 16 million resumes of U.S. workers (which were obtained and
          parsed by Burning Glass Technologies). The tool is designed to help
          program managers, policy analysts and job coaches explore occupational
          transitions that job changers have made in recent years. Understanding
          these transitions can support labor market analysis, program and
          policy development, and individual job seekers’ aspiration.
        </Body>
      </Collapse>
    </CollapsingSection>
  );
}