WIP: Automatically collapse info section on user interaction

frontend/.env

@@ -1 +1 @@
-REACT_APP_BASE_API_URL=http://52.204.195.181:8000/api/v1/jobs
+REACT_APP_BASE_API_URL=https://jobhopper.aballslab.com/api/v1/jobs

frontend/src/ui/LandingBlurb.stories.tsx → frontend/src/ui/LandingBlurb/LandingBlurb.stories.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
 import { Story, Meta } from '@storybook/react/types-6-0';
 
-import LandingBlurb from './LandingBlurb';
+import { LandingBlurbContainer } from './LandingBlurbContainer';
 
 export default {
   title: 'JobHopper/LandingBlurb',
-  component: LandingBlurb,
+  component: LandingBlurbContainer,
 } as Meta;
 
-const Template: Story = () => <LandingBlurb />;
+const Template: Story = () => <LandingBlurbContainer />;
 
 export const Default = Template.bind({});

frontend/src/ui/LandingBlurb.tsx → frontend/src/ui/LandingBlurb/LandingBlurbContainer.tsx

@@ -2,10 +2,30 @@ 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 { Section } from '../Common';
+import { Body, Title } from '../Typography';
+import { useEffect } from 'react';
+import { useOccupationsState } from '../../ducks/occupations';
 
-const CollapsingSection = styled(Section)`
+
+export const LandingBlurbContainer = () => {
+  const [show, setShow] = useState(true);
+  const [hasClicked, setHasClicked] = useState(false);
+  const {selectedOccupation} = useOccupationsState();
+
+  useEffect(() => {
+    if (selectedOccupation && show && !hasClicked) {
+      setShow(false);
+    }
+  })
+
+  return <LandingBlurbCN show={show} onClick={() => {
+    setShow(show => !show);
+    setHasClicked(true);
+  }}/>;
+}
+
+  const CollapsingSection = styled(Section)`
   & p {
     margin-block: 0;
     margin-bottom: 48px;
@@ -16,7 +36,7 @@ const CollapseIcon = styled(ExpandMoreIcon)`
   vertical-align: middle;
 `;
 
-export default function LandingBlurb() {
+export default function LandingBlurbCN() {
   const [show, setShow] = useState(true);
   return (
     <CollapsingSection>

frontend/src/ui/LandingBlurb/index.ts

@@ -0,0 +1 @@
+export { LandingBlurbContainer } from './LandingBlurbContainer';

frontend/src/ui/TransitionPage/TransitionPage.tsx

@@ -2,13 +2,15 @@ import React from 'react';
 import { LabeledSection } from '../Common';
 import Page from '../Page';
 import { ResultsContainer } from '../Results';
-import LandingBlurb from '../LandingBlurb';
+import { LandingBlurbContainer } from '../LandingBlurb';
 import { OccupationSelectContainer, StateSelectContainer } from '../Select';
 import { createContainerContext } from '../utils';
 
+
 const { ContainerContext, useContainerContext } = createContainerContext({
   OccupationSelectContainer,
   StateSelectContainer,
+
   ResultsContainer,
 });
 
@@ -20,7 +22,7 @@ const TransitionPage: React.FC = () => {
   } = useContainerContext();
   return (
     <Page>
-      <LandingBlurb />
+      <LandingBlurbContainer />
       <LabeledSection
         title="Enter occupation"
         subtitle="Type in an occupation by name or SOC code."